@csrf

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

        <select
            id="order_id"
            name="order_id"
            required
            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"
        >
            <option value="">Pilih order</option>

            @foreach($orders as $order)
                <option
                    value="{{ $order->id }}"
                    @selected((string) old('order_id', $deliveryNote->order_id ?? optional($selectedOrder ?? null)->id) === (string) $order->id)
                >
                    {{ $order->invoice_number }} - {{ $order->customer_name }} - Rp {{ number_format($order->total_price, 0, ',', '.') }}
                </option>
            @endforeach
        </select>

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

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

        <select
            id="vehicle_id"
            name="vehicle_id"
            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"
        >
            <option value="">Pilih kendaraan / isi manual</option>

            @foreach($vehicles as $vehicle)
                <option
                    value="{{ $vehicle->id }}"
                    data-name="{{ $vehicle->name }}"
                    data-plate="{{ $vehicle->plate_number }}"
                    data-driver="{{ $vehicle->driver_name }}"
                    data-phone="{{ $vehicle->driver_phone }}"
                    @selected((string) old('vehicle_id', $deliveryNote->vehicle_id) === (string) $vehicle->id)
                >
                    {{ $vehicle->display_name }}
                </option>
            @endforeach
        </select>

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

    <div>
        <label for="delivery_date" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
            Tanggal Kirim
        </label>

        <input
            id="delivery_date"
            type="date"
            name="delivery_date"
            value="{{ old('delivery_date', optional($deliveryNote->delivery_date)->format('Y-m-d') ?? now()->format('Y-m-d')) }}"
            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('delivery_date')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
        @enderror
    </div>

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

        <input
            id="vehicle_name"
            type="text"
            name="vehicle_name"
            value="{{ old('vehicle_name', $deliveryNote->vehicle_name) }}"
            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('vehicle_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">
            Plat Nomor
        </label>

        <input
            id="plate_number"
            type="text"
            name="plate_number"
            value="{{ old('plate_number', $deliveryNote->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', $deliveryNote->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', $deliveryNote->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>
        <label for="recipient_name" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
            Penerima
        </label>

        <input
            id="recipient_name"
            type="text"
            name="recipient_name"
            value="{{ old('recipient_name', $deliveryNote->recipient_name) }}"
            placeholder="Nama penerima barang"
            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('recipient_name')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
        @enderror
    </div>

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

        <input
            id="recipient_phone"
            type="text"
            name="recipient_phone"
            value="{{ old('recipient_phone', $deliveryNote->recipient_phone) }}"
            placeholder="No HP penerima"
            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('recipient_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="recipient_address" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
            Alamat Tujuan
        </label>

        <textarea
            id="recipient_address"
            name="recipient_address"
            rows="3"
            placeholder="Alamat tujuan pengiriman"
            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('recipient_address', $deliveryNote->recipient_address) }}</textarea>

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

    @if($deliveryNote->exists)
        <div>
            <label for="status" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                Status
            </label>

            <select
                id="status"
                name="status"
                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"
            >
                <option value="draft" @selected(old('status', $deliveryNote->status) === 'draft')>Draft</option>
                <option value="printed" @selected(old('status', $deliveryNote->status) === 'printed')>Sudah Dicetak</option>
                <option value="delivered" @selected(old('status', $deliveryNote->status) === 'delivered')>Dikirim</option>
                <option value="received" @selected(old('status', $deliveryNote->status) === 'received')>Diterima</option>
                <option value="cancelled" @selected(old('status', $deliveryNote->status) === 'cancelled')>Dibatalkan</option>
            </select>

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

    <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, 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', $deliveryNote->notes) }}</textarea>

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

<div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end">
    <a
        href="{{ route('delivery-notes.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;box-shadow:0 1px 2px rgba(0,0,0,.04) !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>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const vehicleSelect = document.getElementById('vehicle_id');

        if (!vehicleSelect) {
            return;
        }

        vehicleSelect.addEventListener('change', function () {
            const selectedOption = vehicleSelect.options[vehicleSelect.selectedIndex];

            if (!selectedOption || !selectedOption.value) {
                return;
            }

            document.getElementById('vehicle_name').value = selectedOption.dataset.name || '';
            document.getElementById('plate_number').value = selectedOption.dataset.plate || '';
            document.getElementById('driver_name').value = selectedOption.dataset.driver || '';
            document.getElementById('driver_phone').value = selectedOption.dataset.phone || '';
        });
    });
</script>