@extends('layouts.security')

@section('content')

<style>

.form-card{
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(8px);
    padding:30px;
    border-radius:20px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    max-width:900px;
    transition:.25s;
}

.form-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.form-card h2{
    margin-bottom:25px;
    color:#14532d;
    font-size:32px;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#334155;
}

.form-control{
    width:100%;
    padding:14px;
    border:1px solid #dbe2ea;
    border-radius:12px;
    background:white;
    font-size:15px;
}

.form-control:focus{
    outline:none;
    border-color:#16a34a;
    box-shadow:0 0 0 4px rgba(22,163,74,.15);
}

.info-box{
    background:#f8fafc;
    border-radius:12px;
    padding:15px;
    margin-bottom:20px;
    border-left:4px solid #16a34a;
}

.btn-save{
    background:#16a34a;
    color:white;
    border:none;
    padding:14px 28px;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.btn-save:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(22,163,74,.25);
}

</style>

<div class="form-card">

<h2>Pemeriksaan Pasca Penggunaan</h2>

<div class="info-box">

<strong>Pengguna:</strong>
{{ $request->user->name }}

<br><br>

<strong>Kendaraan:</strong>
{{ $request->vehicle->vehicle_name }}

</div>

<form method="POST"
    action="/security/end-trip-submit/{{ $request->id }}">

@csrf

<div class="form-group">

<label>Bahan Bakar Digunakan (Liter)</label>

<input
    type="number"
    step="0.1"
    name="fuel_used"
    class="form-control"
    required>

</div>

<div class="form-group">

<label>Kondisi Kendaraan</label>

<select
    name="vehicle_condition"
    class="form-control">

    <option value="good">
        Baik
    </option>

    <option value="minor_damage">
        Kerusakan Ringan
    </option>

    <option value="major_damage">
        Kerusakan Berat
    </option>

</select>

</div>

<div class="form-group">

<label>Catatan Inspeksi</label>

<textarea
    name="inspection_notes"
    rows="5"
    class="form-control"
    placeholder="Masukkan hasil inspeksi kendaraan..."></textarea>

</div>

<button
    type="submit"
    class="btn-save">

    Selesaikan Pemeriksaan

</button>

</form>

</div>

@endsection