@extends('layouts.montir')

@section('content')
<form method="POST" action="{{ route('montir.inspection.data-kendaraan.store', $inspeksi->id) }}">
@csrf

<div class="p-4 pb-36 bg-white max-w-md mx-auto">

    {{-- STEP --}}
    <div class="text-orange-500 text-4xl font-bold mb-4">10/20</div>

    {{-- TITLE --}}
    <h1 class="text-3xl font-bold mb-8">Data Kendaraan</h1>

    {{-- FORM --}}
    <div class="space-y-6">

        <div>
            <label class="label">Merek Kendaraan</label>
            <input type="text" name="merek" class="input-field" placeholder="Misal : Honda" value="{{ old('merek', $inspeksi->merek) }}">
        </div>

        <div>
            <label class="label">Tipe Kendaraan</label>
            <input type="text" name="tipe" class="input-field" placeholder="Misal : City 1.5 HB RS CVT" value="{{ old('tipe', $inspeksi->tipe) }}">
        </div>

        <div>
            <label class="label">Tahun</label>
            <input type="number" name="tahun" class="input-field" placeholder="Misal : 2022" value="{{ old('tahun', $inspeksi->tahun) }}">
        </div>

        <div>
            <label class="label">Transmisi</label>
            <input type="text" name="transmisi" class="input-field" placeholder="Misal : Automatis CVT" value="{{ old('transmisi', $inspeksi->transmisi) }}">
        </div>

        <div>
            <label class="label">Warna Kendaraan</label>
            <input type="text" name="warna" class="input-field" placeholder="Misal : Kuning" value="{{ old('warna', $inspeksi->warna) }}">
        </div>

        <div>
            <label class="label">Odometer</label>
            <input type="text" name="odometer" class="input-field" placeholder="Misal : 43.456" value="{{ old('odometer', $inspeksi->odometer) }}">
        </div>

        <div>
            <label class="label">Kepemilikan</label>
            <input type="text" name="kepemilikan" class="input-field" placeholder="Misal : Pribadi" value="{{ old('kepemilikan', $inspeksi->kepemilikan) }}">
        </div>

        <div>
            <label class="label">Plat Nomor</label>
            <input type="text" name="plat_nomor" class="input-field" placeholder="Misal : AB 1234 CD" value="{{ old('plat_nomor', $inspeksi->plat_nomor) }}">
        </div>

        <div>
            <label class="label">Pajak 1 Tahun s.d.</label>
            <input type="date" name="pajak_1_tahun" class="input-field" value="{{ old('pajak_1_tahun', $inspeksi->pajak_1_tahun ? $inspeksi->pajak_1_tahun->format('Y-m-d') : '') }}">
        </div>

        <div>
            <label class="label">Pajak 5 Tahun s.d.</label>
            <input type="date" name="pajak_5_tahun" class="input-field" value="{{ old('pajak_5_tahun', $inspeksi->pajak_5_tahun ? $inspeksi->pajak_5_tahun->format('Y-m-d') : '') }}">
        </div>

        <div>
            <label class="label">Biaya Pajak</label>
            <input type="text" name="biaya_pajak" class="input-field" placeholder="Misal : 3.123.456" value="{{ old('biaya_pajak', $inspeksi->biaya_pajak) }}">
        </div>

    </div>
</div>

{{-- BOTTOM NAV --}}
<div class="fixed bottom-0 left-0 right-0 flex gap-4 p-4 bg-white shadow-xl z-50">
    <a href="{{ route('montir.inspection.dokumen', $inspeksi->id) }}"
       class="w-1/2 py-4 rounded-xl bg-orange-300 text-center font-semibold text-white">
        Back
    </a>

    <button type="submit"
            class="w-1/2 py-4 rounded-xl bg-orange-500 font-semibold text-white">
        Next
    </button>
</div>

{{-- STYLE --}}
<style>
    .label {
        display: block;
        font-weight: 600;
        margin-bottom: 6px;
        font-size: 16px;
    }

    .input-field {
        width: 100%;
        padding: 14px 16px;
        border-radius: 14px;
        border: 2px solid #d8b4fe;
        font-size: 16px;
        outline: none;
    }

    .input-field::placeholder {
        color: #c4c4c4;
    }

    .input-field:focus {
        border-color: #a855f7;
    }
</style>
</form>
@endsection