@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script>
@endpush

@section('content')
<div style="padding: 2rem;">
    <h1 style="color: #d4af37; margin-bottom: 2rem;">إنشاء فاتورة جديدة</h1>

    @if($errors->any())
    <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; padding: 1rem; border-radius: 0.5rem; margin-bottom: 2rem;">
        <ul>
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form method="POST" action="{{ route('admin.invoices.store') }}" style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem;">
        @csrf

        <div style="display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem;">
            <div>
                <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">نوع الفاتورة *</label>
                <select name="type" id="invoiceType" required style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                    <option value="" {{ (!isset($rental) || !$rental) ? 'selected' : '' }} disabled>-- اختر النوع --</option>
                    <option value="rental" {{ (isset($rental) && $rental) ? 'selected' : '' }}>إيجار سيارة</option>
                    <option value="sale">بيع سيارة</option>
                    <option value="service">خدمات</option>
                    <option value="other">أخرى</option>
                </select>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
            <div id="rentalSection" style="grid-column: span 2; display: none;">
                <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">عقد الإيجار *</label>
                <select name="rental_id" id="rentalSelect" style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                    <option value="" {{ (!isset($rental) || !$rental) ? 'selected' : '' }}>-- اختر عقد إيجار --</option>
                    @foreach($rentals as $rentalOption)
                    <option value="{{ $rentalOption->id }}" data-rental="{{ json_encode([
                        'id' => $rentalOption->id, 
                        'contract_number' => $rentalOption->contract_number, 
                        'customer_id' => $rentalOption->customer_id, 
                        'customer_name' => $rentalOption->customer->name, 
                        'customer_phone' => $rentalOption->customer->phone, 
                        'customer_email' => $rentalOption->customer->email, 
                        'car_id' => $rentalOption->car_id, 
                        'car_title' => $rentalOption->car->title, 
                        'car_plate' => $rentalOption->car->plate_number, 
                        'daily_price' => $rentalOption->daily_price, 
                        'start_date' => $rentalOption->start_date->format('Y-m-d'), 
                        'end_date' => $rentalOption->end_date->format('Y-m-d'), 
                        'total_amount' => $rentalOption->total_amount,
                        'taxable_amount' => $rentalOption->taxable_amount,
                        'insurance_amount' => $rentalOption->insurance_amount,
                        'paid_amount' => $rentalOption->paid_amount,
                        'vouchers' => $rentalOption->receipts->map(fn($r) => [
                            'id' => $r->id,
                            'number' => $r->receipt_number,
                            'amount' => $r->amount,
                            'date' => $r->receipt_date->format('Y-m-d'),
                            'method' => $r->payment_method_label,
                            'invoice_id' => $r->invoice_id
                        ])->concat($rentalOption->paymentVouchers->map(fn($v) => [
                            'id' => $v->id,
                            'number' => $v->voucher_number,
                            'amount' => $v->amount_paid,
                            'date' => $v->voucher_date->format('Y-m-d'),
                            'method' => $v->payment_method,
                            'invoice_id' => $v->invoice_id
                        ]))
                    ]) }}" {{ (isset($rental) && $rental && $rentalOption->id == $rental->id) ? 'selected' : '' }}>
                        {{ $rentalOption->contract_number }} - {{ $rentalOption->customer->name }} - {{ $rentalOption->car->title }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div id="branchSection" style="display: none;">
                <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">الفرع *</label>
                <select name="branch_id" required style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                    <option value="">-- اختر فرع --</option>
                    @foreach($branches as $branch)
                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>

            <div id="customerSection" style="display: none;">
                <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">العميل *</label>
                <select name="customer_id" required style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                    <option value="">-- اختر عميل --</option>
                    @foreach($customers as $customer)
                    <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem;">
            <div>
                <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">تاريخ الفاتورة *</label>
                <input type="text" id="invoiceDatePicker" name="invoice_date" value="{{ date('Y-m-d') }}" placeholder="اختر التاريخ" required style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
            </div>

            <div>
                <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">تاريخ الاستحقاق</label>
                <input type="text" id="dueDatePicker" name="due_date" placeholder="اختر التاريخ" style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
            </div>
        </div>

        <div style="margin-top: 2rem;">
            <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">الوصف / الملاحظات</label>
            <textarea name="description" style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem; resize: vertical; min-height: 80px;"></textarea>
        </div>

        <div id="summarySection" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem;">
            <!-- Box 1: Contract Summary (Base Price) -->
            <div id="contractSummaryBox" style="display: none; background: #1a1a1a; border: 1px solid #333; border-radius: 0.5rem; padding: 1.5rem;">
                <h3 style="color: #d4af37; margin-bottom: 1.5rem; font-size: 1.1rem; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">📋 السعر الأساسي حسب العقد</h3>
                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                    <span style="color: #999;">رقم العقد:</span>
                    <span id="summaryContractNumber" style="color: white; font-weight: bold;">-</span>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                    <span style="color: #999;">إجمالي العقد:</span>
                    <span id="summaryContractTotal" style="color: #d4af37; font-weight: bold; font-size: 1.1rem;">0.00 ر.س</span>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                    <span style="color: #999;">المبلغ المدفوع:</span>
                    <span id="summaryContractPaid" style="color: #10b981;">0.00 ر.س</span>
                </div>
            </div>

            <!-- Box 2: New Invoice Calculation -->
            <div style="background: #1a1a1a; border: 1px solid #333; border-radius: 0.5rem; padding: 1.5rem;">
                <h3 style="color: #d4af37; margin-bottom: 1.5rem; font-size: 1.1rem; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">💰 الحساب الجديد الخاص بالفاتورة</h3>
                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                    <span style="color: #999;">الإجمالي الجزئي:</span>
                    <span id="subtotal" style="color: white; font-weight: bold;">0.00 ر.س</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
                        <span style="color: #999;">الضريبة:</span>
                        <select name="vat_percentage" id="vatPercentage" onchange="calculateTotal()" 
                                style="background: #222; border: 1px solid #444; color: #d4af37; border-radius: 0.4rem; padding: 0.2rem 0.5rem; font-size: 0.8rem; cursor: pointer; outline: none;">
                            <option value="0">0%</option>
                            <option value="5">5%</option>
                            <option value="10">10%</option>
                            <option value="14">14%</option>
                            <option value="15" selected>15%</option>
                        </select>
                    </div>
                    <span id="tax" style="color: white; font-weight: bold;">0.00 ر.س</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding-top: 1rem; border-top: 2px solid #333; margin-bottom: 1rem;">
                    <span style="color: #d4af37; font-weight: bold;">إجمالي الفاتورة:</span>
                    <span id="total" style="color: #d4af37; font-weight: bold; font-size: 1.25rem;">0.00 ر.س</span>
                </div>
                
                <div id="appliedPaymentsRow" style="display: none; justify-content: space-between; margin-bottom: 1rem; color: #10b981;">
                    <span>المدفوع:</span>
                    <span id="appliedAmountText">0.00 ر.س</span>
                </div>
            </div>
        </div>

        <div id="rentalDetails" style="display: none; background: #1a1a1a; border: 1px solid #333; border-radius: 0.5rem; padding: 1.5rem; margin-top: 2rem;">
            <h3 style="color: #d4af37; margin-bottom: 1rem;">📋 تفاصيل العقد كاملة</h3>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
                <div style="background: #111; padding: 1rem; border-radius: 0.5rem;">
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">رقم العقد</div>
                    <div id="detailContractNumber" style="color: #d4af37; font-weight: bold; font-size: 1.1rem;">-</div>
                </div>
                <div style="background: #111; padding: 1rem; border-radius: 0.5rem;">
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">العميل</div>
                    <div id="detailCustomerName" style="color: white; font-weight: bold;">-</div>
                    <div id="detailCustomerPhone" style="color: #999; font-size: 0.875rem; margin-top: 0.25rem;">-</div>
                </div>
                <div style="background: #111; padding: 1rem; border-radius: 0.5rem;">
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">السيارة</div>
                    <div id="detailCarTitle" style="color: white; font-weight: bold;">-</div>
                    <div id="detailCarPlate" style="color: #999; font-size: 0.875rem; margin-top: 0.25rem;">-</div>
                </div>
            </div>
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem;">
                <div style="background: #111; padding: 1rem; border-radius: 0.5rem; text-align: center;">
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">تاريخ البداية</div>
                    <div id="detailStartDate" style="color: white; font-weight: bold;">-</div>
                </div>
                <div style="background: #111; padding: 1rem; border-radius: 0.5rem; text-align: center;">
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">تاريخ النهاية</div>
                    <div id="detailEndDate" style="color: white; font-weight: bold;">-</div>
                </div>
                <div style="background: #111; padding: 1rem; border-radius: 0.5rem; text-align: center;">
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">السعر اليومي</div>
                    <div id="detailDailyPrice" style="color: #10b981; font-weight: bold;">-</div>
                </div>
                <div style="background: #111; padding: 1rem; border-radius: 0.5rem; text-align: center;">
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">إجمالي العقد</div>
                    <div id="detailTotal" style="color: #d4af37; font-weight: bold; font-size: 1.1rem;">-</div>
                </div>
            </div>

            <div style="margin-top: 2rem; border-top: 1px solid #333; padding-top: 1.5rem;">
                <h4 style="color: #d4af37; font-size: 0.9rem; margin-bottom: 1rem;">🧾 سندات القبض المدفوعة</h4>
                <div id="vouchersTableContainer" style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse; font-size: 0.8rem; text-align: right;">
                        <thead>
                            <tr style="color: #999; border-bottom: 1px solid #333;">
                                <th style="padding: 0.5rem;">رقم السند</th>
                                <th style="padding: 0.5rem;">التاريخ</th>
                                <th style="padding: 0.5rem;">الطريقة</th>
                                <th style="padding: 0.5rem;">المبلغ</th>
                                <th style="padding: 0.5rem;">الحالة</th>
                            </tr>
                        </thead>
                        <tbody id="vouchersListBody">
                            <!-- سيتم ملؤها عبر JavaScript -->
                        </tbody>
                        <tfoot>
                            <tr style="border-top: 2px solid #333; font-weight: bold; color: #10b981;">
                                <td colspan="3" style="padding: 0.5rem; text-align: left;">إجمالي السندات غير المفوترة:</td>
                                <td id="totalPaidVouchers" colspan="2" style="padding: 0.5rem;">0.00 ر.س</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <div id="itemsSection" style="display: none; margin-bottom: 2rem; margin-top: 2rem;">
            <div id="linkedReceiptsContainer"></div>
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <h3 style="color: #d4af37;">البنود</h3>
                <label style="color: white; font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; background: #222; padding: 0.4rem 0.8rem; border-radius: 0.5rem; border: 1px solid #333;">
                    <input type="checkbox" id="taxIncluded" name="tax_included" value="1" onchange="calculateTotal()" style="accent-color: #d4af37;">
                    المبالغ تشمل الضريبة
                </label>
            </div>
            <div id="itemsContainer" style="border: 1px solid #333; border-radius: 0.5rem; padding: 1.5rem;">
                <div class="item-row" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 1rem; margin-bottom: 1rem;">
                    <div>
                        <input type="text" name="items[0][description]" placeholder="الوصف" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                    </div>
                    <div>
                        <input type="number" name="items[0][quantity]" placeholder="الكمية" step="0.01" value="1" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;" onchange="calculateTotal()">
                    </div>
                    <div>
                        <input type="number" name="items[0][unit_price]" placeholder="السعر" step="0.01" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;" onchange="calculateTotal()">
                    </div>
                    <div>
                        <input type="number" name="items[0][amount]" placeholder="الإجمالي" step="0.01" readonly style="width: 100%; padding: 0.5rem; background: #1a1a1a; border: 1px solid #333; color: #999; border-radius: 0.5rem;">
                    </div>
                    <button type="button" onclick="removeItem(this)" style="background: #ef4444; color: white; padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; cursor: pointer;">
                        ✕
                    </button>
                </div>
            </div>
            <button type="button" onclick="addItem()" style="background: #3b82f6; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; cursor: pointer; margin-top: 1rem;">
                + إضافة بند
            </button>
        </div>

        <div id="applyPaymentsSection" style="display: none; background: #1a1a1a; border: 1px solid #333; border-radius: 0.5rem; padding: 1.5rem; margin-top: 2rem;">
            <h4 style="color: #d4af37; font-size: 0.9rem; margin-bottom: 1rem;">💰 تسوية من سندات سابقة</h4>
            <p style="color: #999; font-size: 0.8rem; margin-bottom: 1rem;">
                يوجد مبالغ مدفوعة مسبقاً لهذا العقد بقيمة 
                <span id="availableVoucherAmount" style="color: #10b981; font-weight: bold;">0.00</span> ر.س
            </p>
            <label style="display: flex; align-items: center; gap: 0.75rem; color: white; cursor: pointer; font-size: 0.85rem;">
                <input type="checkbox" name="apply_previous_payments" value="1" style="width: 1.2rem; height: 1.2rem; accent-color: #d4af37;">
                تطبيق السندات السابقة لتسوية الفاتورة (كاملة أو جزئياً)
            </label>
        </div>

        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <button type="submit" style="background: #10b981; color: white; padding: 0.75rem 2rem; border: none; border-radius: 0.5rem; font-weight: bold; cursor: pointer;">
                ✓ إنشاء الفاتورة
            </button>
            <a href="{{ route('admin.invoices.index') }}" style="background: #6b7280; color: white; padding: 0.75rem 2rem; border: none; border-radius: 0.5rem; font-weight: bold; text-decoration: none; display: inline-flex; align-items: center;">
                ← العودة
            </a>
        </div>
    </form>
</div>

<script>
    let itemCount = 1;

    document.getElementById('invoiceType').addEventListener('change', function() {
        const value = this.value;
        const isRental = value === 'rental';
        const isManual = ['sale', 'service', 'other'].includes(value);
        
        const hasSelectedReceipts = document.querySelectorAll('.receipt-checkbox:checked').length > 0;

        document.getElementById('rentalSection').style.display = isRental ? 'block' : 'none';
        document.getElementById('branchSection').style.display = isManual ? 'block' : 'none';
        document.getElementById('customerSection').style.display = isManual ? 'block' : 'none';
        
        // إظهار البنود إذا كان يدوياً أو إذا كان إيجاراً وتم اختيار سندات
        document.getElementById('itemsSection').style.display = (isManual || (isRental && hasSelectedReceipts)) ? 'block' : 'none';
        
        if (isRental) {
            document.getElementById('rentalSelect').required = true;
            document.querySelectorAll('#branchSection select, #customerSection select').forEach(s => s.required = false);
            
            // تمكين البنود فقط إذا كانت هناك سندات مختارة
            document.querySelectorAll('#itemsSection input, #itemsSection select').forEach(i => {
                if (hasSelectedReceipts) {
                    i.disabled = false;
                    if (i.name && (i.name.includes('[description]') || i.name.includes('[unit_price]') || i.name.includes('[quantity]'))) {
                        i.required = true;
                    }
                } else {
                    i.required = false;
                    i.disabled = true;
                }
            });
            document.querySelectorAll('#branchSection select, #customerSection select').forEach(s => s.disabled = true);
        } else if (isManual) {
            document.getElementById('rentalSelect').required = false;
            document.querySelectorAll('#branchSection select, #customerSection select').forEach(s => {
                s.required = true;
                s.disabled = false;
            });
            // إعادة تفعيل الحقول المطلوبة
            document.querySelectorAll('#itemsSection input, #itemsSection select').forEach(i => {
                if (i.name && (i.name.includes('[description]') || i.name.includes('[unit_price]') || i.name.includes('[quantity]'))) {
                    i.required = true;
                }
                i.disabled = false;
            });
        } else {
            document.getElementById('rentalSelect').required = false;
            document.querySelectorAll('#branchSection select, #customerSection select, #itemsSection input, #itemsSection select').forEach(s => {
                s.required = false;
                s.disabled = false;
            });
        }
        calculateTotal();
    });

    function addItem() {
        const container = document.getElementById('itemsContainer');
        const html = `
            <div class="item-row" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <input type="text" name="items[${itemCount}][description]" placeholder="الوصف" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
                <div>
                    <input type="number" name="items[${itemCount}][quantity]" placeholder="الكمية" step="0.01" value="1" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;" onchange="calculateTotal()">
                </div>
                <div>
                    <input type="number" name="items[${itemCount}][unit_price]" placeholder="السعر" step="0.01" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;" onchange="calculateTotal()">
                </div>
                <div>
                    <input type="number" name="items[${itemCount}][amount]" placeholder="الإجمالي" step="0.01" readonly style="width: 100%; padding: 0.5rem; background: #1a1a1a; border: 1px solid #333; color: #999; border-radius: 0.5rem;">
                </div>
                <button type="button" onclick="removeItem(this)" style="background: #ef4444; color: white; padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; cursor: pointer;">
                    ✕
                </button>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
        itemCount++;
    }

    function removeItem(btn) {
        const rows = document.querySelectorAll('.item-row');
        if (rows.length > 1) {
            btn.closest('.item-row').remove();
            calculateTotal();
        }
    }

    function calculateTotal() {
        let subtotal = 0;
        let tax = 0;
        let total = 0;
        const typeSelect = document.getElementById('invoiceType');
        const type = typeSelect ? typeSelect.value : '';
        const taxIncludedEl = document.getElementById('taxIncluded');
        const taxIncluded = taxIncludedEl ? taxIncludedEl.checked : false;
        
        const vatPercentageEl = document.getElementById('vatPercentage');
        const vatPercent = vatPercentageEl ? parseFloat(vatPercentageEl.value) : 15;
        const vatMultiplier = 1 + (vatPercent / 100);
        const vatFactor = vatPercent / 100;
        
        document.getElementById('taxLabelPercent').textContent = vatPercent;

        // التحقق أولاً من السندات المختارة (رقم 2)
        const selectedReceipts = document.querySelectorAll('.receipt-checkbox:checked');
        const applyPaymentsSection = document.getElementById('applyPaymentsSection');

        if (selectedReceipts.length > 0) {
            // الحالة 1: تم اختيار سندات - الإجمالي هو مجموع السندات المختارة (رقم 3 يصبح 500)
            let receiptsTotal = 0;
            selectedReceipts.forEach(cb => {
                receiptsTotal += parseFloat(cb.dataset.amount || 0);
            });

            total = receiptsTotal;
            subtotal = total / vatMultiplier; 
            tax = total - subtotal; 
            
            if (applyPaymentsSection) applyPaymentsSection.style.display = 'none';
            const appliedPaymentsRow = document.getElementById('appliedPaymentsRow');
            if (appliedPaymentsRow) appliedPaymentsRow.style.display = 'flex';
            const appliedAmountText = document.getElementById('appliedAmountText');
            if (appliedAmountText) appliedAmountText.textContent = total.toFixed(2) + ' ر.س';
        } else {
            // الحالة 2: لا توجد سندات مختارة - حسابات عادية
            if (type === 'rental') {
                const rentalSelect = document.getElementById('rentalSelect');
                if (rentalSelect && rentalSelect.selectedIndex !== -1) {
                    const option = rentalSelect.options[rentalSelect.selectedIndex];
                    const rentalData = option && option.dataset.rental ? JSON.parse(option.dataset.rental) : null;
                    if (rentalData) {
                        const taxableSubtotal = parseFloat(rentalData.taxable_amount || 0);
                        const insurance = parseFloat(rentalData.insurance_amount || 0);
                        
                        tax = taxableSubtotal * vatFactor;
                        total = taxableSubtotal + tax + insurance;
                        subtotal = taxableSubtotal + insurance;
                    }
                }
            } else {
                const items = document.querySelectorAll('.item-row');
                items.forEach((row) => {
                    const quantityInput = row.querySelector('input[name*="[quantity]"]');
                    const priceInput = row.querySelector('input[name*="[unit_price]"]');
                    const amountInput = row.querySelector('input[name*="[amount]"]');
                    const quantity = parseFloat(quantityInput?.value || 0);
                    const price = parseFloat(priceInput?.value || 0);
                    const amount = quantity * price;
                    if (amountInput) amountInput.value = amount.toFixed(2);
                    subtotal += amount;
                });

                if (taxIncluded) {
                    total = subtotal;
                    subtotal = total / vatMultiplier;
                    tax = total - subtotal;
                } else {
                    tax = subtotal * vatFactor;
                    total = subtotal + tax;
                }
            }

            // إظهار صندوق التسوية (رقم 1) إذا كان متاحاً
            const availableVoucherAmountEl = document.getElementById('availableVoucherAmount');
            const available = availableVoucherAmountEl ? parseFloat(availableVoucherAmountEl.textContent || 0) : 0;
            if (available > 0 && applyPaymentsSection) applyPaymentsSection.style.display = 'block';

            const applyCheckbox = document.querySelector('input[name="apply_previous_payments"]');
            if (applyCheckbox && applyCheckbox.checked) {
                const applied = Math.min(available, total);
                const appliedPaymentsRow = document.getElementById('appliedPaymentsRow');
                if (appliedPaymentsRow) appliedPaymentsRow.style.display = 'flex';
                const appliedAmountText = document.getElementById('appliedAmountText');
                if (appliedAmountText) appliedAmountText.textContent = applied.toFixed(2) + ' ر.س';
            } else {
                const appliedPaymentsRow = document.getElementById('appliedPaymentsRow');
                if (appliedPaymentsRow) appliedPaymentsRow.style.display = 'none';
            }
        }
        
        // تحديث المربع رقم 3 بالقيم النهائية
        const subtotalEl = document.getElementById('subtotal');
        const taxEl = document.getElementById('tax');
        const totalEl = document.getElementById('total');
        if (subtotalEl) subtotalEl.textContent = subtotal.toFixed(2) + ' ر.س';
        if (taxEl) taxEl.textContent = tax.toFixed(2) + ' ر.س';
        if (totalEl) totalEl.textContent = total.toFixed(2) + ' ر.س';

        // ملخص العقد (Box 1)
        const contractBox = document.getElementById('contractSummaryBox');
        if (contractBox) {
            if (type === 'rental' || type === 'sale' || (type === 'service' && selectedReceipts.length > 0)) {
                contractBox.style.display = 'block';
            } else {
                contractBox.style.display = 'none';
            }
        }
    }

    // معالج تغيير حالة التشيك بوكس
    document.addEventListener('change', function(e) {
        if (e.target && e.target.name === 'apply_previous_payments') {
            calculateTotal();
        }
    });

    // معالج اختيار العقد
    document.getElementById('rentalSelect').addEventListener('change', function() {
        const option = this.options[this.selectedIndex];
        const rentalData = option && option.dataset.rental ? JSON.parse(option.dataset.rental) : null;
        
        if (rentalData) {
            // عرض ملخص العقد (الصندوق الجديد)
            document.getElementById('contractSummaryBox').style.display = 'block';
            document.getElementById('summaryContractNumber').textContent = rentalData.contract_number;
            document.getElementById('summaryContractTotal').textContent = parseFloat(rentalData.total_amount).toFixed(2) + ' ر.س';
            document.getElementById('summaryContractPaid').textContent = parseFloat(rentalData.paid_amount).toFixed(2) + ' ر.س';

            // عرض تفاصيل العقد كاملة
            document.getElementById('rentalDetails').style.display = 'block';
            document.getElementById('detailContractNumber').textContent = rentalData.contract_number;
            document.getElementById('detailCustomerName').textContent = rentalData.customer_name;
            document.getElementById('detailCustomerPhone').textContent = rentalData.customer_phone;
            document.getElementById('detailCarTitle').textContent = rentalData.car_title;
            document.getElementById('detailCarPlate').textContent = rentalData.car_plate;
            document.getElementById('detailStartDate').textContent = rentalData.start_date;
            document.getElementById('detailEndDate').textContent = rentalData.end_date;
            document.getElementById('detailDailyPrice').textContent = parseFloat(rentalData.daily_price).toFixed(2) + ' ر.س';
            document.getElementById('detailTotal').textContent = parseFloat(rentalData.total_amount).toFixed(2) + ' ر.س';

            // عرض سندات القبض
            const vouchersListBody = document.getElementById('vouchersListBody');
            vouchersListBody.innerHTML = '';
            let totalPaid = 0;

            if (rentalData.vouchers && rentalData.vouchers.length > 0) {
                rentalData.vouchers.forEach(v => {
                    const isInvoiced = v.invoice_id != null;
                    const row = document.createElement('tr');
                    row.style.borderBottom = '1px solid #222';
                    row.style.opacity = isInvoiced ? '0.5' : '1';
                    row.innerHTML = `
                        <td style="padding: 0.5rem;">${v.number}</td>
                        <td style="padding: 0.5rem;">${v.date}</td>
                        <td style="padding: 0.5rem;">${v.method}</td>
                        <td style="padding: 0.5rem;">${parseFloat(v.amount).toFixed(2)} ر.س</td>
                        <td style="padding: 0.5rem;">
                            ${isInvoiced 
                                ? '<span style="color: #666;">مفوتر ✓</span>' 
                                : `<input type="checkbox" class="receipt-checkbox" data-id="${v.id}" data-number="${v.number}" data-amount="${v.amount}" onchange="toggleReceipt(this)" style="width: 1.2rem; height: 1.2rem; cursor: pointer; accent-color: #d4af37;">`}
                        </td>
                    `;
                    vouchersListBody.appendChild(row);
                    if (!isInvoiced) {
                        totalPaid += parseFloat(v.amount);
                    }
                });
            } else {
                vouchersListBody.innerHTML = '<tr><td colspan="4" style="padding: 1rem; text-align: center; color: #666;">لا توجد سندات قبض مسجلة لهذا العقد</td></tr>';
            }
            document.getElementById('totalPaidVouchers').textContent = totalPaid.toFixed(2) + ' ر.س';
            
            // إضافة خيار تطبيق الدفعات
            if (totalPaid > 0) {
                document.getElementById('applyPaymentsSection').style.display = 'block';
                document.getElementById('availableVoucherAmount').textContent = totalPaid.toFixed(2);
            } else {
                document.getElementById('applyPaymentsSection').style.display = 'none';
            }

            calculateTotal();

        } else {
            document.getElementById('contractSummaryBox').style.display = 'none';
            document.getElementById('rentalDetails').style.display = 'none';
        }
    });

    function toggleReceipt(checkbox) {
        const id = checkbox.dataset.id;
        const number = checkbox.dataset.number;
        const amount = checkbox.dataset.amount;
        
        const container = document.getElementById('linkedReceiptsContainer');
        const itemsContainer = document.getElementById('itemsContainer');
        
        if (checkbox.checked) {
            // إضافة حقل مخفي للمعرف
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'linked_receipt_ids[]';
            hiddenInput.value = id;
            hiddenInput.id = 'hidden_receipt_' + id;
            container.appendChild(hiddenInput);
            
            // تفعيل شامل الضريبة
            document.getElementById('taxIncluded').checked = true;
            
            // إضافة بند للفاتورة
            const html = `
                <div class="item-row receipt-item" id="item_receipt_${id}" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 1rem; margin-bottom: 1rem;">
                    <div>
                        <input type="text" name="items[${itemCount}][description]" value="سند قبض رقم ${number}" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                    </div>
                    <div>
                        <input type="number" name="items[${itemCount}][quantity]" value="1" step="0.01" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;" onchange="calculateTotal()">
                    </div>
                    <div>
                        <input type="number" name="items[${itemCount}][unit_price]" value="${amount}" step="0.01" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;" onchange="calculateTotal()">
                    </div>
                    <div>
                        <input type="number" name="items[${itemCount}][amount]" value="${amount}" step="0.01" readonly style="width: 100%; padding: 0.5rem; background: #1a1a1a; border: 1px solid #333; color: #999; border-radius: 0.5rem;">
                    </div>
                    <button type="button" onclick="uncheckReceipt('${id}')" style="background: #ef4444; color: white; padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; cursor: pointer;">
                        ✕
                    </button>
                </div>
            `;
            
            // إذا كان هناك بند واحد فارغ، قم بإزالته
            const firstRow = itemsContainer.querySelector('.item-row');
            if (firstRow && !firstRow.classList.contains('receipt-item')) {
                const desc = firstRow.querySelector('input[name*="[description]"]').value;
                const price = firstRow.querySelector('input[name*="[unit_price]"]').value;
                if (!desc && !price) {
                    firstRow.remove();
                }
            }
            
            itemsContainer.insertAdjacentHTML('beforeend', html);
            itemCount++;
        } else {
            // إزالة الحقل المخفي والبند
            const hidden = document.getElementById('hidden_receipt_' + id);
            if (hidden) hidden.remove();
            
            const item = document.getElementById('item_receipt_' + id);
            if (item) item.remove();
            
            // إذا فرغت البنود، أضف بنداً فارغاً
            if (itemsContainer.querySelectorAll('.item-row').length === 0) {
                addItem();
            }
        }
        
        // تحديث حالة العرض للبنود بناءً على السندات المختارة
        document.getElementById('invoiceType').dispatchEvent(new Event('change'));
        
        calculateTotal();
    }

    function uncheckReceipt(id) {
        const checkbox = document.querySelector(`.receipt-checkbox[data-id="${id}"]`);
        if (checkbox) {
            checkbox.checked = false;
            toggleReceipt(checkbox);
        } else {
            // في حال تم حذف البند مباشرة
            const hidden = document.getElementById('hidden_receipt_' + id);
            if (hidden) hidden.remove();
            const item = document.getElementById('item_receipt_' + id);
            if (item) item.remove();
            calculateTotal();
        }
    }

    // تحديث الحقول المخفية عند التحميل
    document.getElementById('invoiceType').dispatchEvent(new Event('change'));
    
    // تحديث تفاصيل العقد عند التحميل إذا كان هناك عقد مختار
    document.getElementById('rentalSelect').dispatchEvent(new Event('change'));

    // تفعيل التقويم
    flatpickr('#invoiceDatePicker', {
        mode: 'single',
        dateFormat: 'Y-m-d',
        locale: 'ar',
        defaultDate: document.getElementById('invoiceDatePicker').value || new Date(),
        allowInput: true,
    });

    flatpickr('#dueDatePicker', {
        mode: 'single',
        dateFormat: 'Y-m-d',
        locale: 'ar',
        allowInput: true,
    });
</script>
@endsection