@php
    /** @var \App\Models\Invoice|null $invoice */
    $isEdit = isset($invoice) && $invoice;
    $clientValue = old('client_id', $invoice->client_id ?? ($selectedClientId ?? null));
    $projectValue = old('project_id', $invoice->project_id ?? ($selectedProjectId ?? null));
    $amountValue = old('amount', $invoice->amount ?? null);
    $paidValue = old('paid_amount', $invoice->paid_amount ?? 0);
    $statusValue = old('status', $invoice->status ?? \App\Models\Invoice::STATUS_UNPAID);
    $issueDateValue = old('issue_date', isset($invoice) && $invoice->issue_date ? $invoice->issue_date->format('Y-m-d') : now()->toDateString());
    $dueDateValue = old('due_date', isset($invoice) && $invoice->due_date ? $invoice->due_date->format('Y-m-d') : null);
    $invoiceNumberValue = old('invoice_number', $invoice->invoice_number ?? ($defaultInvoiceNumber ?? ''));
@endphp

<form action="{{ $action }}" method="POST" id="invoice-form" class="row g-3">
    @csrf
    @if(($method ?? 'POST') !== 'POST')
        @method($method)
    @endif

    <div class="col-md-6">
        <label class="form-label">{{ __('العميل') }} <span class="text-danger">*</span></label>
        <select name="client_id" class="form-select @error('client_id') is-invalid @enderror" required>
            <option value="">{{ __('اختر العميل') }}</option>
            @foreach($clients as $client)
                <option value="{{ $client->id }}" @selected((string) $clientValue === (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" class="form-select @error('project_id') is-invalid @enderror">
            <option value="">{{ __('بدون مشروع') }}</option>
            @foreach($projects as $project)
                <option value="{{ $project->id }}" data-client-id="{{ $project->client_id }}" @selected((string) $projectValue === (string) $project->id)>
                    {{ $project->project_name ?: __('مشروع بدون اسم') }}
                </option>
            @endforeach
        </select>
        @error('project_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <small class="text-muted">{{ __('سيتم إظهار مشاريع العميل المختار فقط.') }}</small>
    </div>

    <div class="col-md-4">
        <label class="form-label">{{ __('رقم الفاتورة') }} <span class="text-danger">*</span></label>
        <input
            type="text"
            name="invoice_number"
            value="{{ $invoiceNumberValue }}"
            class="form-control @error('invoice_number') is-invalid @enderror"
            required
        >
        @error('invoice_number')<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="date" name="issue_date" value="{{ $issueDateValue }}" class="form-control @error('issue_date') is-invalid @enderror" required>
        @error('issue_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-4">
        <label class="form-label">{{ __('تاريخ الاستحقاق') }}</label>
        <input type="date" name="due_date" value="{{ $dueDateValue }}" class="form-control @error('due_date') is-invalid @enderror">
        @error('due_date')<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="number" step="0.01" min="0" name="amount" value="{{ $amountValue }}" class="form-control @error('amount') is-invalid @enderror" required>
        @error('amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-4">
        <label class="form-label">{{ __('المدفوع') }}</label>
        <input type="number" step="0.01" min="0" name="paid_amount" value="{{ $paidValue }}" class="form-control @error('paid_amount') is-invalid @enderror">
        @error('paid_amount')<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(\App\Models\Invoice::statuses() as $value => $label)
                <option value="{{ $value }}" @selected($statusValue === $value)>{{ $label }}</option>
            @endforeach
        </select>
        @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <small class="text-muted" id="status-helper">{{ __('الحالة تتحدث تلقائياً بناء على المدفوع ما لم تختار ملغاة.') }}</small>
    </div>

    <div class="col-12">
        <label class="form-label">{{ __('ملاحظات تشغيلية') }}</label>
        <textarea name="notes" rows="4" class="form-control @error('notes') is-invalid @enderror" placeholder="{{ __('مثال: دفعة أولى من تشطيبات الدور الأرضي.') }}">{{ old('notes', $invoice->notes ?? '') }}</textarea>
        @error('notes')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-12">
        <div class="border rounded p-3 bg-light d-flex flex-wrap gap-3 align-items-center justify-content-between">
            <div>
                <span class="text-muted small d-block">{{ __('المتبقي للتحصيل') }}</span>
                <strong id="remaining-preview" class="fs-5">0.00 {{ __('ر.س') }}</strong>
            </div>
            @if(! $isEdit)
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="save_and_add_another" id="save_and_add_another" value="1" {{ old('save_and_add_another') ? 'checked' : '' }}>
                    <label class="form-check-label" for="save_and_add_another">{{ __('حفظ وإضافة فاتورة جديدة') }}</label>
                </div>
            @endif
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-1"></i>{{ $submitLabel }}</button>
                <a href="{{ route('admin.invoices.index') }}" class="btn btn-outline-secondary">{{ __('إلغاء') }}</a>
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
    $(function () {
        const $clientSelect = $('select[name="client_id"]');
        const $projectSelect = $('select[name="project_id"]');
        const $amount = $('input[name="amount"]');
        const $paid = $('input[name="paid_amount"]');
        const $status = $('select[name="status"]');
        const $remainingPreview = $('#remaining-preview');
        const $statusHelper = $('#status-helper');

        function filterProjectsByClient() {
            const selectedClientId = $clientSelect.val();
            const currentProjectId = $projectSelect.val();

            $projectSelect.find('option').each(function () {
                const $option = $(this);
                const clientId = $option.data('client-id');

                if (!clientId) {
                    $option.prop('hidden', false);
                    return;
                }

                $option.prop('hidden', selectedClientId && String(clientId) !== String(selectedClientId));
            });

            const selectedOption = $projectSelect.find('option:selected');
            if (selectedOption.prop('hidden')) {
                $projectSelect.val('');
            } else {
                $projectSelect.val(currentProjectId);
            }
        }

        function refreshFinancialPreview() {
            const amount = parseFloat($amount.val() || 0);
            const paid = parseFloat($paid.val() || 0);
            const remaining = Math.max(amount - paid, 0);
            const manuallyCancelled = $status.val() === 'cancelled';

            $remainingPreview.text(remaining.toFixed(2) + ' {{ __('ر.س') }}');

            if (!manuallyCancelled) {
                if (paid <= 0) {
                    $status.val('unpaid');
                } else if (paid >= amount && amount > 0) {
                    $status.val('paid');
                } else {
                    $status.val('partial');
                }
            }

            const statusText = $status.find('option:selected').text();
            $statusHelper.text('{{ __('الحالة الحالية:') }} ' + statusText);
        }

        $clientSelect.on('change', filterProjectsByClient);
        $amount.on('input', refreshFinancialPreview);
        $paid.on('input', refreshFinancialPreview);
        $status.on('change', refreshFinancialPreview);

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