@php
    $isEdit = isset($quote);
    $quoteStatuses = \App\Models\Quote::statuses();

    $defaultQuoteNumber = 'QT-'.now()->format('Ymd').'-'.str_pad((string) random_int(1, 999), 3, '0', STR_PAD_LEFT);
    $selectedClient = old('client_id', $isEdit ? $quote->client_id : ($selectedClientId ?? null));
    $selectedProject = old('project_id', $isEdit ? $quote->project_id : ($selectedProjectId ?? null));

    $existingItems = old('items');
    if ($existingItems === null) {
        $existingItems = $isEdit
            ? $quote->items->map(fn ($item) => [
                'title' => $item->title,
                'description' => $item->description,
                'quantity' => (float) $item->quantity,
                'unit' => $item->unit,
                'unit_price' => (float) $item->unit_price,
            ])->values()->all()
            : [];
    }

    if (count($existingItems) === 0) {
        $existingItems[] = ['title' => '', 'description' => '', 'quantity' => 1, 'unit' => '', 'unit_price' => 0];
    }
@endphp

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

    <div class="row g-3">
        <div class="col-md-6">
            <label class="form-label">{{ __('العميل') }} <span class="text-danger">*</span></label>
            <select name="client_id" id="quote-client" class="form-select @error('client_id') is-invalid @enderror" required>
                <option value="">-- {{ __('اختر العميل') }} --</option>
                @foreach($clients as $client)
                    <option value="{{ $client->id }}" @selected((string) $selectedClient === (string) $client->id)>{{ $client->name }}</option>
                @endforeach
            </select>
            @error('client_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-md-6">
            <label class="form-label">{{ __('المشروع') }}</label>
            <select name="project_id" id="quote-project" class="form-select @error('project_id') is-invalid @enderror" data-selected-project="{{ $selectedProject }}">
                <option value="">-- {{ __('بدون مشروع') }} --</option>
                @foreach($projects as $project)
                    <option value="{{ $project->id }}" data-client="{{ $project->client_id }}" @selected((string) $selectedProject === (string) $project->id)>{{ $project->project_name }}</option>
                @endforeach
            </select>
            @error('project_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-md-4">
            <label class="form-label">{{ __('رقم العرض') }} <span class="text-danger">*</span></label>
            <input type="text" name="quote_number" class="form-control @error('quote_number') is-invalid @enderror"
                   value="{{ old('quote_number', $isEdit ? $quote->quote_number : $defaultQuoteNumber) }}" required>
            @error('quote_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-md-4">
            <label class="form-label">{{ __('الحالة') }} <span class="text-danger">*</span></label>
            <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                @foreach($quoteStatuses as $statusValue => $statusLabel)
                    <option value="{{ $statusValue }}" @selected(old('status', $isEdit ? $quote->status : \App\Models\Quote::STATUS_DRAFT) === $statusValue)>{{ $statusLabel }}</option>
                @endforeach
            </select>
            @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-md-4">
            <label class="form-label">{{ __('صالح حتى') }}</label>
            <input type="date" name="valid_until" class="form-control @error('valid_until') is-invalid @enderror"
                   value="{{ old('valid_until', $isEdit && $quote->valid_until ? $quote->valid_until->format('Y-m-d') : null) }}">
            @error('valid_until')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-transparent d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h5 class="mb-1">{{ __('بنود عرض السعر') }}</h5>
                        <p class="text-muted mb-0 small">{{ __('أضف البنود ليتم احتساب الإجمالي تلقائياً بشكل احترافي.') }}</p>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="add-quote-item">
                        <i class="ti ti-plus me-1"></i>{{ __('إضافة بند') }}
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered align-middle" id="quote-items-table">
                            <thead>
                            <tr>
                                <th style="min-width: 220px;">{{ __('البند') }}</th>
                                <th style="min-width: 180px;">{{ __('الوصف') }}</th>
                                <th style="min-width: 110px;">{{ __('الكمية') }}</th>
                                <th style="min-width: 110px;">{{ __('الوحدة') }}</th>
                                <th style="min-width: 130px;">{{ __('سعر الوحدة') }}</th>
                                <th style="min-width: 130px;">{{ __('الإجمالي') }}</th>
                                <th style="width: 50px;"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($existingItems as $i => $item)
                                <tr class="quote-item-row">
                                    <td>
                                        <input type="text" name="items[{{ $i }}][title]" class="form-control @error('items.'.$i.'.title') is-invalid @enderror" value="{{ $item['title'] ?? '' }}" required>
                                        @error('items.'.$i.'.title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </td>
                                    <td>
                                        <input type="text" name="items[{{ $i }}][description]" class="form-control @error('items.'.$i.'.description') is-invalid @enderror" value="{{ $item['description'] ?? '' }}">
                                        @error('items.'.$i.'.description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0.01" name="items[{{ $i }}][quantity]" class="form-control js-item-quantity @error('items.'.$i.'.quantity') is-invalid @enderror" value="{{ $item['quantity'] ?? 1 }}" required>
                                        @error('items.'.$i.'.quantity')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </td>
                                    <td>
                                        <input type="text" name="items[{{ $i }}][unit]" class="form-control @error('items.'.$i.'.unit') is-invalid @enderror" value="{{ $item['unit'] ?? '' }}" placeholder="{{ __('م2 / بند / يوم') }}">
                                        @error('items.'.$i.'.unit')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0" name="items[{{ $i }}][unit_price]" class="form-control js-item-price @error('items.'.$i.'.unit_price') is-invalid @enderror" value="{{ $item['unit_price'] ?? 0 }}" required>
                                        @error('items.'.$i.'.unit_price')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </td>
                                    <td>
                                        <input type="text" class="form-control js-item-total" value="0.00" readonly>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-danger js-remove-item"><i class="ti ti-trash"></i></button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <div class="text-end">
                            <p class="text-muted mb-1">{{ __('إجمالي العرض') }}</p>
                            <h4 class="mb-0 text-success"><span id="quote-grand-total">0.00</span> {{ __('ر.س') }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <label class="form-label">{{ __('الإجمالي المعتمد') }}</label>
            <input type="number" step="0.01" min="0" id="quote-amount-input" name="amount" class="form-control @error('amount') is-invalid @enderror"
                   value="{{ old('amount', $isEdit ? (float) $quote->amount : 0) }}" readonly>
            <small class="text-muted">{{ __('يتم احتساب الإجمالي تلقائياً من البنود.') }}</small>
            @error('amount')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        </div>

        <div class="col-md-6">
            <label class="form-label">{{ __('ملاحظات العرض') }}</label>
            <textarea name="notes" rows="3" class="form-control @error('notes') is-invalid @enderror">{{ old('notes', $isEdit ? $quote->notes : null) }}</textarea>
            @error('notes')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 d-flex gap-2 flex-wrap">
            <button type="submit" class="btn btn-primary">
                <i class="ti ti-device-floppy me-1"></i>{{ $isEdit ? __('تحديث عرض السعر') : __('حفظ عرض السعر') }}
            </button>
            @if(!$isEdit)
                <button type="submit" name="save_and_add_another" value="1" class="btn btn-outline-primary">{{ __('حفظ وإضافة عرض آخر') }}</button>
            @endif
            <a href="{{ route('admin.quotes.index') }}" class="btn btn-outline-secondary">{{ __('إلغاء') }}</a>
        </div>
    </div>
</form>

@push('scripts')
<script>
    $(function () {
        var $clientSelect = $('#quote-client');
        var $projectSelect = $('#quote-project');
        var $tableBody = $('#quote-items-table tbody');
        var $amountInput = $('#quote-amount-input');
        var $grandTotal = $('#quote-grand-total');

        function filterProjectsByClient() {
            var selectedClient = String($clientSelect.val() || '');
            var currentProject = String($projectSelect.val() || '');
            var selectedExists = false;

            $projectSelect.find('option').each(function () {
                var clientId = String($(this).data('client') || '');
                var isDefaultOption = $(this).val() === '';
                var shouldShow = isDefaultOption || selectedClient === '' || clientId === selectedClient;

                $(this).prop('hidden', !shouldShow);

                if (shouldShow && String($(this).val()) === currentProject) {
                    selectedExists = true;
                }
            });

            if (!selectedExists) {
                $projectSelect.val('');
            }
        }

        function normalizeIndexes() {
            $tableBody.find('tr.quote-item-row').each(function (rowIndex, row) {
                $(row).find('input[name]').each(function () {
                    var currentName = $(this).attr('name') || '';
                    $(this).attr('name', currentName.replace(/items\[\d+]/, 'items[' + rowIndex + ']'));
                });
            });
        }

        function updateTotals() {
            var grandTotal = 0;

            $tableBody.find('tr.quote-item-row').each(function () {
                var quantity = parseFloat($(this).find('.js-item-quantity').val() || 0);
                var unitPrice = parseFloat($(this).find('.js-item-price').val() || 0);
                var lineTotal = quantity * unitPrice;

                if (!isFinite(lineTotal)) {
                    lineTotal = 0;
                }

                $(this).find('.js-item-total').val(lineTotal.toFixed(2));
                grandTotal += lineTotal;
            });

            $grandTotal.text(grandTotal.toFixed(2));
            $amountInput.val(grandTotal.toFixed(2));
        }

        function createNewRow(index) {
            return '' +
                '<tr class="quote-item-row">' +
                '  <td><input type="text" name="items[' + index + '][title]" class="form-control" required></td>' +
                '  <td><input type="text" name="items[' + index + '][description]" class="form-control"></td>' +
                '  <td><input type="number" step="0.01" min="0.01" name="items[' + index + '][quantity]" class="form-control js-item-quantity" value="1" required></td>' +
                '  <td><input type="text" name="items[' + index + '][unit]" class="form-control" placeholder="{{ __('م2 / بند / يوم') }}"></td>' +
                '  <td><input type="number" step="0.01" min="0" name="items[' + index + '][unit_price]" class="form-control js-item-price" value="0" required></td>' +
                '  <td><input type="text" class="form-control js-item-total" value="0.00" readonly></td>' +
                '  <td><button type="button" class="btn btn-sm btn-outline-danger js-remove-item"><i class="ti ti-trash"></i></button></td>' +
                '</tr>';
        }

        $('#add-quote-item').on('click', function () {
            $tableBody.append(createNewRow($tableBody.find('tr.quote-item-row').length));
            normalizeIndexes();
            updateTotals();
        });

        $tableBody.on('click', '.js-remove-item', function () {
            if ($tableBody.find('tr.quote-item-row').length <= 1) {
                return;
            }

            $(this).closest('tr').remove();
            normalizeIndexes();
            updateTotals();
        });

        $tableBody.on('input', '.js-item-quantity, .js-item-price', updateTotals);
        $clientSelect.on('change', filterProjectsByClient);

        filterProjectsByClient();
        updateTotals();
    });
</script>
@endpush