@php
    $isEdit = $order->exists;
    $action = $isEdit ? route('admin.installations.update', $order) : route('admin.installations.store');
@endphp

<form action="{{ $action }}" method="POST" id="installationForm">
    @csrf
    @if($isEdit) @method('PUT') @endif

    @if($errors->any())
        <div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
    @endif

    <div class="card">
        <div class="card-header"><h3 class="card-title">بيانات أمر التركيب</h3></div>
        <div class="card-body">
            <div class="row">
                <div class="form-group col-md-3">
                    <label>الرقم</label>
                    <input type="text" value="{{ $isEdit ? $order->number : ($next_number ?? '') }}" class="form-control" readonly>
                </div>
                <div class="form-group col-md-3">
                    <label>موعد التركيب *</label>
                    <input type="datetime-local" name="scheduled_at"
                           value="{{ old('scheduled_at', $isEdit ? $order->scheduled_at?->format('Y-m-d\TH:i') : ($order->scheduled_at ?? '')) }}"
                           class="form-control" required>
                </div>
                <div class="form-group col-md-3">
                    <label>المدة المتوقعة (دقيقة)</label>
                    <input type="number" name="estimated_duration_minutes" min="30" max="1440"
                           value="{{ old('estimated_duration_minutes', $order->estimated_duration_minutes ?? 240) }}"
                           class="form-control">
                </div>
                <div class="form-group col-md-3">
                    <label>أمر البيع المرتبط</label>
                    <input type="text" value="{{ $order->salesOrder?->number ?? '—' }}" class="form-control" readonly>
                    <input type="hidden" name="sales_order_id" value="{{ $order->sales_order_id }}">
                </div>

                <div class="form-group col-md-6">
                    <label>العميل *</label>
                    <select name="customer_id" class="form-control select2" required>
                        <option value="">—</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->id }}" @selected(old('customer_id', $order->customer_id) == $c->id)>
                                {{ $c->name_ar }} ({{ $c->code }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <label>فريق التركيب</label>
                    <select name="installation_team_id" class="form-control select2">
                        <option value="">— غير معيّن —</option>
                        @foreach($teams as $t)
                            <option value="{{ $t->id }}" @selected(old('installation_team_id', $order->installation_team_id) == $t->id)>
                                {{ $t->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group col-md-6">
                    <label>اسم السائق</label>
                    <input type="text" name="driver_name" value="{{ old('driver_name', $order->driver_name) }}" class="form-control">
                </div>
                <div class="form-group col-md-6">
                    <label>رقم السيارة</label>
                    <input type="text" name="vehicle_plate" value="{{ old('vehicle_plate', $order->vehicle_plate) }}" class="form-control">
                </div>

                <div class="form-group col-md-6">
                    <label>الأدوات المطلوبة</label>
                    <textarea name="tools_required" class="form-control" rows="2">{{ old('tools_required', $order->tools_required) }}</textarea>
                </div>
                <div class="form-group col-md-6">
                    <label>ملاحظات الموقع</label>
                    <textarea name="site_notes" class="form-control" rows="2">{{ old('site_notes', $order->site_notes) }}</textarea>
                </div>
                <div class="form-group col-md-12">
                    <label>ملاحظات داخلية</label>
                    <textarea name="internal_notes" class="form-control" rows="2">{{ old('internal_notes', $order->internal_notes) }}</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">بنود التركيب</h3>
            <div class="card-tools">
                <button type="button" id="addRowBtn" class="btn btn-info btn-sm"><i class="fas fa-plus"></i> سطر</button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="itemsTable">
                    <thead class="bg-light">
                        <tr>
                            <th style="width:30%">المنتج</th>
                            <th style="width:35%">الوصف *</th>
                            <th style="width:10%">الكمية *</th>
                            <th style="width:20%">ملاحظات</th>
                            <th style="width:5%"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($isEdit && $order->items->isNotEmpty())
                            @foreach($order->items as $i => $item)
                                <tr>
                                    <td>
                                        <select name="items[{{ $i }}][product_id]" class="form-control form-control-sm product-picker" style="width:100%">
                                            @if($item->product)
                                                <option value="{{ $item->product_id }}" selected>[{{ $item->product->sku }}] {{ $item->product->name_ar }}</option>
                                            @endif
                                        </select>
                                    </td>
                                    <td><input type="text" name="items[{{ $i }}][description]" class="form-control form-control-sm desc" value="{{ $item->description }}" required></td>
                                    <td><input type="number" step="0.001" min="0.001" name="items[{{ $i }}][quantity]" class="form-control form-control-sm" value="{{ (float) $item->quantity }}" required></td>
                                    <td><input type="text" name="items[{{ $i }}][notes]" class="form-control form-control-sm" value="{{ $item->notes }}"></td>
                                    <td><button type="button" class="btn btn-sm btn-danger remove-row"><i class="fas fa-times"></i></button></td>
                                </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="text-center">
        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> {{ __('admin.save') }}</button>
        <a href="{{ route('admin.installations.index') }}" class="btn btn-secondary">{{ __('admin.cancel') }}</a>
    </div>
</form>

@push('scripts')
<script>
$(function () {
    $('.select2').select2({ width: '100%' });

    const $body = $('#itemsTable tbody');
    const url = '{{ route('admin.stock.product-search') }}';

    function rowHtml(idx) {
        return `
            <tr>
                <td><select name="items[${idx}][product_id]" class="form-control form-control-sm product-picker" style="width:100%"></select></td>
                <td><input type="text" name="items[${idx}][description]" class="form-control form-control-sm desc" required></td>
                <td><input type="number" step="0.001" min="0.001" name="items[${idx}][quantity]" class="form-control form-control-sm" value="1" required></td>
                <td><input type="text" name="items[${idx}][notes]" class="form-control form-control-sm"></td>
                <td><button type="button" class="btn btn-sm btn-danger remove-row"><i class="fas fa-times"></i></button></td>
            </tr>`;
    }

    function bindPicker($select) {
        $select.select2({
            placeholder: 'ابحث عن منتج…',
            ajax: {
                url, dataType: 'json', delay: 250,
                data: params => ({ q: params.term }),
                processResults: data => ({ results: data.map(p => ({ id: p.id, text: '['+p.sku+'] '+p.name, raw: p })) })
            },
            width: '100%', allowClear: true,
        }).on('select2:select', function (e) {
            const $row = $(this).closest('tr');
            const raw = e.params.data.raw;
            if (! $row.find('.desc').val()) $row.find('.desc').val(raw.name);
        });
    }

    function addRow() {
        const idx = $body.find('tr').length;
        const $row = $(rowHtml(idx));
        $body.append($row);
        bindPicker($row.find('.product-picker'));
    }

    $body.find('.product-picker').each(function () { bindPicker($(this)); });
    if ($body.find('tr').length === 0) addRow();

    $('#addRowBtn').on('click', addRow);
    $('#itemsTable').on('click', '.remove-row', function () { $(this).closest('tr').remove(); });
});
</script>
@endpush