@php
    $installation = $installation ?? null;
    $preset = $preset ?? ['customer_id' => null, 'vehicle_id' => null, 'invoice_id' => null];
    $selectedCustomer = old('customer_id', $installation?->customer_id ?? $preset['customer_id']);
    $selectedVehicle = old('vehicle_id', $installation?->vehicle_id ?? $preset['vehicle_id']);
    $selectedDevices = old('device_units', $installation?->items->pluck('device_unit_id')->all() ?? []);
@endphp

<div class="row g-3">
    <div class="col-12"><div class="form-section-title"><i class="fa-solid fa-screwdriver-wrench"></i>بيانات أمر التركيب</div></div>

    <div class="col-md-4">
        <label class="form-label">العميل <span class="req">*</span></label>
        <select name="customer_id" id="instCustomer" class="form-select select2" data-placeholder="اختر العميل" required>
            <option value="">— اختر العميل —</option>
            @foreach ($customers as $c)
                <option value="{{ $c->id }}" @selected((int) $selectedCustomer === $c->id)>{{ $c->display_name }} — {{ $c->phone }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">المركبة</label>
        <select name="vehicle_id" id="instVehicle" class="form-select select2" data-placeholder="اختر المركبة">
            <option value="">— بدون —</option>
            @foreach ($vehicles as $v)
                <option value="{{ $v->id }}" data-customer="{{ $v->customer_id }}" @selected((int) $selectedVehicle === $v->id)>
                    {{ $v->plate_number }} — {{ trim($v->make . ' ' . $v->model) }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">الفاتورة المرتبطة</label>
        <select name="invoice_id" class="form-select select2" data-placeholder="اختر الفاتورة">
            <option value="">— بدون —</option>
            @foreach ($invoices as $inv)
                <option value="{{ $inv->id }}" @selected((int) old('invoice_id', $installation?->invoice_id ?? $preset['invoice_id']) === $inv->id)>
                    {{ $inv->code }} — {{ $inv->customer?->display_name }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label">نوع الأمر <span class="req">*</span></label>
        <select name="type" class="form-select" required>
            @foreach ($types as $k => $v)
                <option value="{{ $k }}" @selected(old('type', $installation?->type ?? 'installation') === $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label">الفني المسؤول</label>
        <select name="technician_id" class="form-select select2" data-placeholder="اختر الفني">
            <option value="">— لم يُسند —</option>
            @foreach ($technicians as $k => $v)
                <option value="{{ $k }}" @selected((int) old('technician_id', $installation?->technician_id) === (int) $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label">موعد التنفيذ</label>
        <input type="datetime-local" name="scheduled_at" class="form-control"
               value="{{ old('scheduled_at', $installation?->scheduled_at?->format('Y-m-d\TH:i') ?? now()->addDay()->setTime(10, 0)->format('Y-m-d\TH:i')) }}">
    </div>

    <div class="col-md-3">
        <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', $installation?->status ?? 'pending') === $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">الموقع / المدينة</label>
        <input type="text" name="location" value="{{ old('location', $installation?->location) }}" class="form-control">
    </div>

    <div class="col-md-5">
        <label class="form-label">العنوان التفصيلي</label>
        <input type="text" name="address" value="{{ old('address', $installation?->address) }}" class="form-control">
    </div>

    <div class="col-md-3">
        <label class="form-label">تكلفة التركيب</label>
        <div class="input-group">
            <input type="number" step="0.01" min="0" name="cost" value="{{ old('cost', $installation?->cost ?? 0) }}" class="form-control">
            <span class="input-group-text">{{ setting('currency', 'ر.س') }}</span>
        </div>
    </div>

    <div class="col-12 mt-4"><div class="form-section-title"><i class="fa-solid fa-microchip"></i>الأجهزة المخصصة</div></div>

    <div class="col-12">
        <label class="form-label">اختر الأجهزة (المتاحة بالمخزن)</label>
        <select name="device_units[]" class="form-select select2" multiple data-placeholder="اختر جهازاً أو أكثر">
            @foreach ($availableDevices as $device)
                <option value="{{ $device->id }}" @selected(in_array($device->id, array_map('intval', (array) $selectedDevices), true))>
                    {{ $device->imei }} — {{ $device->product?->name }}{{ $device->sim_number ? ' — SIM: ' . $device->sim_number : '' }}
                </option>
            @endforeach
        </select>
        <div class="form-text">يتم حجز الأجهزة المختارة تلقائياً، وتتحول إلى «مركّب» عند إنهاء الأمر.</div>
    </div>

    <div class="col-md-6">
        <label class="form-label">ملاحظات الفني</label>
        <textarea name="technician_notes" class="form-control" rows="3">{{ old('technician_notes', $installation?->technician_notes) }}</textarea>
    </div>

    <div class="col-md-6">
        <label class="form-label">ملاحظات عامة</label>
        <textarea name="notes" class="form-control" rows="3">{{ old('notes', $installation?->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('installations.index') }}" class="btn btn-light">إلغاء</a>
</div>

@push('scripts')
<script>
$(function () {
    // تصفية قائمة المركبات حسب العميل المختار
    function filterVehicles() {
        const customerId = String($('#instCustomer').val() || '');
        $('#instVehicle option').each(function () {
            if (!$(this).val()) return;
            const match = !customerId || String($(this).data('customer')) === customerId;
            $(this).prop('disabled', !match);
        });
        $('#instVehicle').trigger('change.select2');
    }

    $('#instCustomer').on('change', filterVehicles);
    filterVehicles();
});
</script>
@endpush