@csrf
@php
    $isEdit = isset($invoice);
    $model = $isEdit ? $invoice : null;

    $existingItems = $isEdit
        ? $invoice->items->map(fn($item) => [
            'line_type' => $item->line_type,
            'product_id' => $item->product_id,
            'service_type_id' => $item->service_type_id,
            'unit_id' => $item->unit_id,
            'unit_name' => $item->unit?->name_ar ?? '',
            'description_ar' => $item->description_ar,
            'quantity' => (float) $item->quantity,
            'unit_price' => (float) $item->unit_price,
            'discount_amount' => (float) $item->discount_amount,
            'line_total' => (float) $item->line_total,
            'notes_ar' => $item->notes_ar,
        ])
        : collect();

    $existingPayments = $isEdit
        ? $invoice->customerPayments->map(fn($pay) => [
            'payment_account_id' => $pay->payment_account_id,
            'payment_method' => $pay->payment_method,
            'amount' => (float) $pay->amount,
            'reference_number' => $pay->reference_number,
            'notes_ar' => $pay->notes_ar,
        ])
        : collect();
@endphp

<div class="row g-3 mb-3">
    <div class="col-md-4">
        <label class="form-label">العميل <span class="text-danger">*</span></label>
        <select name="customer_id" class="form-select @error('customer_id') is-invalid @enderror">
            <option value="">-- اختر --</option>
            @foreach($customers as $customer)
                <option value="{{ $customer->id }}" @selected(old('customer_id', $model?->customer_id) == $customer->id)>
                    {{ $customer->name_ar }}
                </option>
            @endforeach
        </select>
        @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">المخزن <span class="text-danger">*</span></label>
        <select name="warehouse_id" class="form-select @error('warehouse_id') is-invalid @enderror">
            <option value="">-- اختر --</option>
            @foreach($warehouses as $warehouse)
                <option value="{{ $warehouse->id }}" @selected(old('warehouse_id', $model?->warehouse_id) == $warehouse->id)>
                    {{ $warehouse->name_ar }}
                </option>
            @endforeach
        </select>
        @error('warehouse_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

    <div class="col-md-2">
        <label class="form-label">تاريخ الفاتورة <span class="text-danger">*</span></label>
        <input type="date" name="invoice_date" class="form-control @error('invoice_date') is-invalid @enderror"
               value="{{ old('invoice_date', $model?->invoice_date?->format('Y-m-d') ?? now()->format('Y-m-d')) }}">
        @error('invoice_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">الاستحقاق</label>
        <input type="date" name="due_date" class="form-control"
               value="{{ old('due_date', $model?->due_date?->format('Y-m-d')) }}">
    </div>

    <div class="col-md-3">
        <label class="form-label">نوع السداد <span class="text-danger">*</span></label>
        <select name="payment_terms" id="payment_terms" class="form-select">
            @foreach(\App\Models\SalesInvoice::PAYMENT_TERMS as $k => $v)
                <option value="{{ $k }}" @selected(old('payment_terms', $model?->payment_terms ?? 'cash') === $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label">عرض السعر</label>
        <select name="quotation_id" class="form-select">
            <option value="">-- بدون --</option>
            @foreach($quotations as $quotation)
                <option value="{{ $quotation->id }}" @selected(old('quotation_id', $model?->quotation_id) == $quotation->id)>
                    {{ $quotation->quotation_number }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="col-md-2">
        <label class="form-label">نوع الخصم</label>
        <select name="discount_type" id="discount_type" class="form-select">
            <option value="fixed" @selected(old('discount_type', $model?->discount_type ?? 'fixed') === 'fixed')>مبلغ</option>
            <option value="percentage" @selected(old('discount_type', $model?->discount_type ?? 'fixed') === 'percentage')>نسبة %</option>
        </select>
    </div>

    <div class="col-md-2">
        <label class="form-label">قيمة الخصم</label>
        <input type="number" id="discount_value" name="discount_value" step="0.01" min="0" class="form-control"
               value="{{ old('discount_value', $model?->discount_value ?? 0) }}">
    </div>

    <div class="col-md-2">
        <label class="form-label">نسبة الضريبة %</label>
        <input type="number" id="tax_percentage" name="tax_percentage" step="0.01" min="0" max="100" class="form-control"
               value="{{ old('tax_percentage', $model?->tax_percentage ?? 0) }}">
    </div>

    <div class="col-12">
        <label class="form-label">ملاحظات</label>
        <textarea name="notes_ar" rows="2" class="form-control">{{ old('notes_ar', $model?->notes_ar) }}</textarea>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="mb-0">بنود الفاتورة</h6>
        <button type="button" class="btn btn-sm btn-outline-primary" id="add-item-row">إضافة بند</button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-bordered table-sm mb-0" id="items-table">
                <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>نوع البند</th>
                    <th>الصنف / الخدمة</th>
                    <th>الوصف</th>
                    <th>الوحدة</th>
                    <th>الكمية</th>
                    <th>سعر الوحدة</th>
                    <th>خصم</th>
                    <th>الإجمالي</th>
                    <th></th>
                </tr>
                </thead>
                <tbody id="items-body"></tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mb-3" id="payments-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="mb-0">طرق السداد</h6>
        <button type="button" class="btn btn-sm btn-outline-success" id="add-payment-row">إضافة طريقة سداد</button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-bordered table-sm mb-0" id="payments-table">
                <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>الطريقة</th>
                    <th>حساب السداد</th>
                    <th>القيمة</th>
                    <th>المرجع</th>
                    <th>ملاحظات</th>
                    <th></th>
                </tr>
                </thead>
                <tbody id="payments-body"></tbody>
            </table>
        </div>
    </div>
</div>

<div class="row justify-content-end mb-3">
    <div class="col-md-5">
        <table class="table table-bordered table-sm">
            <tr><th class="bg-light">الإجمالي قبل الخصم</th><td class="text-end" id="t-subtotal">0.00</td></tr>
            <tr><th class="bg-light">الخصم</th><td class="text-end" id="t-discount">0.00</td></tr>
            <tr><th class="bg-light">بعد الخصم</th><td class="text-end" id="t-after-discount">0.00</td></tr>
            <tr><th class="bg-light">الضريبة</th><td class="text-end" id="t-tax">0.00</td></tr>
            <tr class="table-primary"><th>الإجمالي النهائي</th><td class="text-end fw-bold" id="t-grand">0.00</td></tr>
            <tr><th class="bg-light">إجمالي المدفوع</th><td class="text-end text-success" id="t-paid">0.00</td></tr>
            <tr><th class="bg-light">المتبقي</th><td class="text-end text-danger" id="t-remaining">0.00</td></tr>
        </table>
    </div>
</div>

<div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary">حفظ الفاتورة</button>
    <a href="{{ route('admin.sales_invoices.index') }}" class="btn btn-light">إلغاء</a>
</div>

<template id="item-row-template">
    <tr class="item-row">
        <td class="row-no"></td>
        <td>
            <select class="form-select form-select-sm line-type">
                <option value="product">صنف</option>
                <option value="service">خدمة</option>
            </select>
        </td>
        <td>
            <select class="form-select form-select-sm product-select">
                <option value="">-- اختر --</option>
                @foreach($products as $product)
                    <option value="{{ $product->id }}">{{ $product->name_ar }}</option>
                @endforeach
            </select>
            <select class="form-select form-select-sm service-select d-none mt-1">
                <option value="">-- اختر --</option>
                @foreach($serviceTypes as $service)
                    <option value="{{ $service->id }}">{{ $service->name_ar }}</option>
                @endforeach
            </select>
        </td>
        <td><input type="text" class="form-control form-control-sm description"></td>
        <td>
            <input type="hidden" class="unit-id">
            <input type="text" class="form-control form-control-sm unit-name" readonly>
        </td>
        <td><input type="number" min="0.0001" step="0.01" value="1" class="form-control form-control-sm qty"></td>
        <td><input type="number" min="0" step="0.01" value="0" class="form-control form-control-sm price"></td>
        <td><input type="number" min="0" step="0.01" value="0" class="form-control form-control-sm line-discount"></td>
        <td><input type="number" value="0" class="form-control form-control-sm line-total" readonly></td>
        <td><button type="button" class="btn btn-sm btn-outline-danger remove-item">حذف</button></td>
    </tr>
</template>

<template id="payment-row-template">
    <tr class="payment-row">
        <td class="row-no"></td>
        <td>
            <select class="form-select form-select-sm payment-method">
                <option value="cash">كاش</option>
                <option value="bank_transfer">تحويل بنكي</option>
                <option value="card">بطاقة</option>
                <option value="wallet">محفظة</option>
                <option value="instapay">انستاباي</option>
                <option value="check">شيك</option>
            </select>
        </td>
        <td>
            <select class="form-select form-select-sm payment-account">
                <option value="">-- بدون --</option>
                @foreach($paymentAccounts as $acc)
                    <option value="{{ $acc->id }}">{{ $acc->name_ar }}</option>
                @endforeach
            </select>
        </td>
        <td><input type="number" min="0" step="0.01" value="0" class="form-control form-control-sm payment-amount"></td>
        <td><input type="text" class="form-control form-control-sm payment-ref"></td>
        <td><input type="text" class="form-control form-control-sm payment-notes"></td>
        <td><button type="button" class="btn btn-sm btn-outline-danger remove-payment">حذف</button></td>
    </tr>
</template>

<script>
(function () {
    const productMap = @json($productJson);
    const serviceMap = @json($serviceJson);
    const existingItems = @json($existingItems);
    const existingPayments = @json($existingPayments);

    let itemIndex = 0;
    let paymentIndex = 0;

    function to2(n) { return (parseFloat(n || 0)).toFixed(2); }

    function refreshNames() {
        document.querySelectorAll('#items-body .item-row').forEach((row, i) => {
            row.querySelector('.row-no').textContent = i + 1;
            row.querySelector('.line-type').setAttribute('name', `items[${i}][line_type]`);
            row.querySelector('.product-select').setAttribute('name', `items[${i}][product_id]`);
            row.querySelector('.service-select').setAttribute('name', `items[${i}][service_type_id]`);
            row.querySelector('.description').setAttribute('name', `items[${i}][description_ar]`);
            row.querySelector('.unit-id').setAttribute('name', `items[${i}][unit_id]`);
            row.querySelector('.qty').setAttribute('name', `items[${i}][quantity]`);
            row.querySelector('.price').setAttribute('name', `items[${i}][unit_price]`);
            row.querySelector('.line-discount').setAttribute('name', `items[${i}][discount_amount]`);
            row.querySelector('.line-total').setAttribute('name', `items[${i}][line_total]`);
            row.querySelector('.description').setAttribute('required', 'required');
        });

        document.querySelectorAll('#payments-body .payment-row').forEach((row, i) => {
            row.querySelector('.row-no').textContent = i + 1;
            row.querySelector('.payment-method').setAttribute('name', `payments[${i}][payment_method]`);
            row.querySelector('.payment-account').setAttribute('name', `payments[${i}][payment_account_id]`);
            row.querySelector('.payment-amount').setAttribute('name', `payments[${i}][amount]`);
            row.querySelector('.payment-ref').setAttribute('name', `payments[${i}][reference_number]`);
            row.querySelector('.payment-notes').setAttribute('name', `payments[${i}][notes_ar]`);
        });
    }

    function calcLine(row) {
        const qty = parseFloat(row.querySelector('.qty').value || 0);
        const price = parseFloat(row.querySelector('.price').value || 0);
        const discount = parseFloat(row.querySelector('.line-discount').value || 0);
        const total = Math.max(0, (qty * price) - discount);
        row.querySelector('.line-total').value = total.toFixed(4);
        return total;
    }

    function recalcTotals() {
        let subtotal = 0;
        document.querySelectorAll('#items-body .item-row').forEach((row) => subtotal += calcLine(row));

        const discountType = document.getElementById('discount_type').value;
        const discountValue = parseFloat(document.getElementById('discount_value').value || 0);
        const discountAmount = discountType === 'percentage' ? (subtotal * discountValue / 100) : discountValue;
        const afterDiscount = Math.max(0, subtotal - discountAmount);

        const taxPercentage = parseFloat(document.getElementById('tax_percentage').value || 0);
        const taxAmount = afterDiscount * taxPercentage / 100;
        const grand = afterDiscount + taxAmount;

        let paid = 0;
        document.querySelectorAll('#payments-body .payment-row .payment-amount').forEach((input) => {
            paid += parseFloat(input.value || 0);
        });

        const remaining = Math.max(0, grand - paid);

        document.getElementById('t-subtotal').textContent = to2(subtotal);
        document.getElementById('t-discount').textContent = to2(discountAmount);
        document.getElementById('t-after-discount').textContent = to2(afterDiscount);
        document.getElementById('t-tax').textContent = to2(taxAmount);
        document.getElementById('t-grand').textContent = to2(grand);
        document.getElementById('t-paid').textContent = to2(paid);
        document.getElementById('t-remaining').textContent = to2(remaining);
    }

    function addItemRow(data = null) {
        const tpl = document.getElementById('item-row-template').content.cloneNode(true);
        const row = tpl.querySelector('tr');
        document.getElementById('items-body').appendChild(row);
        itemIndex++;

        if (data) {
            row.querySelector('.line-type').value = data.line_type || 'product';
            row.querySelector('.description').value = data.description_ar || '';
            row.querySelector('.qty').value = data.quantity || 1;
            row.querySelector('.price').value = data.unit_price || 0;
            row.querySelector('.line-discount').value = data.discount_amount || 0;
            row.querySelector('.line-total').value = data.line_total || 0;
            row.querySelector('.unit-id').value = data.unit_id || '';
            row.querySelector('.unit-name').value = data.unit_name || '';

            if (data.line_type === 'service') {
                row.querySelector('.product-select').classList.add('d-none');
                row.querySelector('.service-select').classList.remove('d-none');
                row.querySelector('.service-select').value = data.service_type_id || '';
            } else {
                row.querySelector('.product-select').value = data.product_id || '';
            }
        }

        refreshNames();
        recalcTotals();
    }

    function addPaymentRow(data = null) {
        const tpl = document.getElementById('payment-row-template').content.cloneNode(true);
        const row = tpl.querySelector('tr');
        document.getElementById('payments-body').appendChild(row);
        paymentIndex++;

        if (data) {
            row.querySelector('.payment-method').value = data.payment_method || 'cash';
            row.querySelector('.payment-account').value = data.payment_account_id || '';
            row.querySelector('.payment-amount').value = data.amount || 0;
            row.querySelector('.payment-ref').value = data.reference_number || '';
            row.querySelector('.payment-notes').value = data.notes_ar || '';
        }

        refreshNames();
        recalcTotals();
    }

    document.getElementById('add-item-row').addEventListener('click', () => addItemRow());
    document.getElementById('add-payment-row').addEventListener('click', () => addPaymentRow());

    document.addEventListener('change', function (e) {
        const row = e.target.closest('.item-row');
        if (row && e.target.classList.contains('line-type')) {
            const isService = e.target.value === 'service';
            row.querySelector('.product-select').classList.toggle('d-none', isService);
            row.querySelector('.service-select').classList.toggle('d-none', !isService);
            row.querySelector('.product-select').value = '';
            row.querySelector('.service-select').value = '';
            row.querySelector('.description').value = '';
            row.querySelector('.unit-id').value = '';
            row.querySelector('.unit-name').value = '';
            row.querySelector('.price').value = 0;
            recalcTotals();
        }

        if (row && e.target.classList.contains('product-select')) {
            const p = productMap[e.target.value];
            if (p) {
                row.querySelector('.description').value = p.name_ar;
                row.querySelector('.unit-id').value = p.unit_id || '';
                row.querySelector('.unit-name').value = p.unit_name || '';
                row.querySelector('.price').value = p.prices.retail || 0;
                recalcTotals();
            }
        }

        if (row && e.target.classList.contains('service-select')) {
            const s = serviceMap[e.target.value];
            if (s) {
                row.querySelector('.description').value = s.name_ar;
                row.querySelector('.unit-id').value = s.unit_id || '';
                row.querySelector('.unit-name').value = s.unit_name || '';
                row.querySelector('.price').value = s.default_price || 0;
                recalcTotals();
            }
        }

        if (e.target.id === 'payment_terms') {
            document.getElementById('payments-card').classList.toggle('d-none', e.target.value === 'credit');
        }
    });

    document.addEventListener('input', function (e) {
        if (e.target.closest('.item-row') || e.target.closest('.payment-row') || ['discount_value', 'tax_percentage'].includes(e.target.id)) {
            recalcTotals();
        }
    });

    document.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-item')) {
            const rows = document.querySelectorAll('#items-body .item-row');
            if (rows.length <= 1) {
                alert('يجب وجود بند واحد على الأقل.');
                return;
            }
            e.target.closest('.item-row').remove();
            refreshNames();
            recalcTotals();
        }

        if (e.target.classList.contains('remove-payment')) {
            e.target.closest('.payment-row').remove();
            refreshNames();
            recalcTotals();
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        if (existingItems.length > 0) {
            existingItems.forEach((it) => addItemRow(it));
        } else {
            addItemRow();
        }

        if (existingPayments.length > 0) {
            existingPayments.forEach((pay) => addPaymentRow(pay));
        } else {
            addPaymentRow();
        }

        const paymentTerms = document.getElementById('payment_terms').value;
        document.getElementById('payments-card').classList.toggle('d-none', paymentTerms === 'credit');

        refreshNames();
        recalcTotals();
    });
})();
</script>