@csrf

<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
    <div>
        <label for="name" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
            Nama Kendaraan <span class="text-red-500">*</span>
        </label>

        <input
            id="name"
            type="text"
            name="name"
            value="{{ old('name', $vehicle->name) }}"
            required
            placeholder="Contoh: Mobil Box"
            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
        >

        @error('name')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div>
        <label for="plate_number" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
            Nomor Plat
        </label>

        <input
            id="plate_number"
            type="text"
            name="plate_number"
            value="{{ old('plate_number', $vehicle->plate_number) }}"
            placeholder="Contoh: N 1234 AB"
            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
        >

        @error('plate_number')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div>
        <label for="driver_name" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
            Nama Supir
        </label>

        <input
            id="driver_name"
            type="text"
            name="driver_name"
            value="{{ old('driver_name', $vehicle->driver_name) }}"
            placeholder="Contoh: Budi"
            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
        >

        @error('driver_name')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div>
        <label for="driver_phone" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
            No HP Supir
        </label>

        <input
            id="driver_phone"
            type="text"
            name="driver_phone"
            value="{{ old('driver_phone', $vehicle->driver_phone) }}"
            placeholder="Contoh: 08123456789"
            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
        >

        @error('driver_phone')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div class="md:col-span-2">
        <label for="notes" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
            Catatan
        </label>

        <textarea
            id="notes"
            name="notes"
            rows="3"
            placeholder="Catatan tambahan kendaraan, jika ada..."
            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
        >{{ old('notes', $vehicle->notes) }}</textarea>

        @error('notes')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">
                {{ $message }}
            </p>
        @enderror
    </div>

    <div class="md:col-span-2">
        <label class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-800">
            <input
                type="checkbox"
                name="is_active"
                value="1"
                @checked(old('is_active', $vehicle->is_active ?? true))
                class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
            >

            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
                Kendaraan aktif
            </span>
        </label>
    </div>
</div>

<div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end">
    <a href="{{ route('vehicles.index') }}"
       style="display:inline-flex !important;align-items:center !important;justify-content:center !important;background:#ffffff !important;color:#374151 !important;padding:10px 16px !important;border-radius:10px !important;font-size:14px !important;font-weight:600 !important;text-decoration:none !important;border:1px solid #d1d5db !important;">
        Batal
    </a>

    <button
        type="submit"
        style="display:inline-flex !important;align-items:center !important;justify-content:center !important;background:#2563eb !important;color:#ffffff !important;padding:10px 18px !important;border-radius:10px !important;font-size:14px !important;font-weight:700 !important;border:1px solid #1d4ed8 !important;box-shadow:0 4px 10px rgba(37,99,235,.25) !important;cursor:pointer !important;">
        Simpan
    </button>
</div>