@php $device = $device ?? null; @endphp

<div class="row g-3">
    <div class="col-12"><div class="form-section-title"><i class="fa-solid fa-microchip"></i>بيانات الجهاز</div></div>

    <div class="col-md-4">
        <label class="form-label">المنتج <span class="req">*</span></label>
        <select name="product_id" class="form-select select2" data-placeholder="اختر المنتج" required>
            <option value="">— اختر المنتج —</option>
            @foreach ($products as $k => $v)
                <option value="{{ $k }}" @selected((int) old('product_id', $device?->product_id) === (int) $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">رقم الـ IMEI <span class="req">*</span></label>
        <input type="text" name="imei" value="{{ old('imei', $device?->imei) }}" class="form-control font-monospace" dir="ltr" required>
    </div>

    <div class="col-md-4">
        <label class="form-label">الرقم التسلسلي</label>
        <input type="text" name="serial_number" value="{{ old('serial_number', $device?->serial_number) }}" class="form-control font-monospace" dir="ltr">
    </div>

    <div class="col-md-4">
        <label class="form-label">رقم الشريحة (SIM)</label>
        <input type="text" name="sim_number" value="{{ old('sim_number', $device?->sim_number) }}" class="form-control" dir="ltr">
    </div>

    <div class="col-md-4">
        <label class="form-label">مشغّل الشبكة</label>
        <input type="text" name="sim_operator" value="{{ old('sim_operator', $device?->sim_operator) }}" class="form-control" placeholder="STC / Mobily / Zain">
    </div>

    <div class="col-md-4">
        <label class="form-label">أمر الشراء</label>
        <select name="purchase_id" class="form-select select2" data-placeholder="اختر أمر الشراء">
            <option value="">— غير مرتبط —</option>
            @foreach ($purchases as $k => $v)
                <option value="{{ $k }}" @selected((int) old('purchase_id', $device?->purchase_id) === (int) $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-12 mt-4"><div class="form-section-title"><i class="fa-solid fa-location-crosshairs"></i>الحالة والارتباط</div></div>

    <div class="col-md-4">
        <label class="form-label">الحالة <span class="req">*</span></label>
        <select name="status" class="form-select" required>
            @foreach ($statuses as $k => $v)
                <option value="{{ $k }}" @selected(old('status', $device?->status ?? 'in_stock') === $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">العميل</label>
        <select name="customer_id" id="deviceCustomer" class="form-select select2" data-placeholder="اختر العميل">
            <option value="">— غير مرتبط —</option>
            @foreach ($customers as $c)
                <option value="{{ $c->id }}" @selected((int) old('customer_id', $device?->customer_id) === $c->id)>{{ $c->display_name }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">المركبة</label>
        <select name="vehicle_id" id="deviceVehicle" class="form-select" data-selected="{{ old('vehicle_id', $device?->vehicle_id) }}">
            <option value="">— غير مرتبط —</option>
            @if ($device?->vehicle)
                <option value="{{ $device->vehicle_id }}" selected>{{ $device->vehicle->full_name }}</option>
            @endif
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">انتهاء الضمان</label>
        <input type="date" name="warranty_end" value="{{ old('warranty_end', $device?->warranty_end?->format('Y-m-d')) }}" class="form-control">
    </div>

    <div class="col-12">
        <label class="form-label">ملاحظات</label>
        <textarea name="notes" class="form-control" rows="2">{{ old('notes', $device?->notes) }}</textarea>
    </div>
</div>

<div class="d-flex gap-2 mt-4">
    <button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk ms-2"></i>حفظ</button>
    <a href="{{ route('devices.index') }}" class="btn btn-light">إلغاء</a>
</div>

@push('scripts')
<script>
$(function () {
    const vehicleSelect = $('#deviceVehicle');

    $('#deviceCustomer').on('change', function () {
        const customerId = $(this).val();
        vehicleSelect.html('<option value="">— غير مرتبط —</option>');

        if (!customerId) return;

        $.getJSON('{{ url('api/customers') }}/' + customerId + '/vehicles', function (data) {
            const selected = vehicleSelect.data('selected');
            data.forEach(v => {
                vehicleSelect.append($('<option>', { value: v.id, text: v.text, selected: String(v.id) === String(selected) }));
            });
        });
    });
});
</script>
@endpush