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

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

    $existingPayments = $isEdit
        ? $invoice->supplierPayments->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="supplier_id" class="form-select @error('supplier_id') is-invalid @enderror">
            <option value="">-- اختر --</option>
            @foreach($suppliers as $supplier)
                <option value="{{ $supplier->id }}" @selected(old('supplier_id', $model?->supplier_id) == $supplier->id)>
                    {{ $supplier->name_ar }}
                </option>
            @endforeach
        </select>
        @error('supplier_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\PurchaseInvoice::PAYMENT_TERMS as $k => $v)
                <option value="{{ $k }}" @selected(old('payment_terms', $model?->payment_terms ?? 'credit') === $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label">رقم فاتورة المورد</label>
        <input type="text" name="supplier_invoice_number" class="form-control"
               value="{{ old('supplier_invoice_number', $model?->supplier_invoice_number) }}">
    </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-md-2">
        <label class="form-label">المصاريف الإضافية</label>
        <input type="number" id="additional_expenses_total" name="additional_expenses_total" step="0.01" min="0" class="form-control"
               value="{{ old('additional_expenses_total', $model?->additional_expenses_total ?? 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">
                <thead class="table-light">
                    <tr>
                        <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">
                <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>إجمالي البنود</th><td class="text-end" id="t-subtotal">0.00</td></tr>
            <tr><th>الخصم</th><td class="text-end" id="t-discount">0.00</td></tr>
            <tr><th>بعد الخصم</th><td class="text-end" id="t-after-discount">0.00</td></tr>
            <tr><th>الضريبة</th><td class="text-end" id="t-tax">0.00</td></tr>
            <tr><th>المصاريف الإضافية</th><td class="text-end" id="t-expenses">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>إجمالي المدفوع</th><td class="text-end text-success" id="t-paid">0.00</td></tr>
            <tr><th>المتبقي</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.purchase_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 product-select">
                <option value="">-- اختر --</option>
                @foreach($products as $product)
                    <option value="{{ $product->id }}">{{ $product->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 unit-cost"></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 existingItems = @json($existingItems);
    const existingPayments = @json($existingPayments);

    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('.product-select').setAttribute('name', `items[${i}][product_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('.unit-cost').setAttribute('name', `items[${i}][unit_cost]`);
            row.querySelector('.line-discount').setAttribute('name', `items[${i}][discount_amount]`);
            row.querySelector('.line-total').setAttribute('name', `items[${i}][line_total]`);
        });

        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 cost = parseFloat(row.querySelector('.unit-cost').value || 0);
        const discount = parseFloat(row.querySelector('.line-discount').value || 0);
        const total = Math.max(0, (qty * cost) - 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 expenses = parseFloat(document.getElementById('additional_expenses_total').value || 0);

        const grand = afterDiscount + taxAmount + expenses;

        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-expenses').textContent = to2(expenses);
        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);

        if (data) {
            row.querySelector('.product-select').value = data.product_id || '';
            row.querySelector('.description').value = data.description_ar || '';
            row.querySelector('.unit-id').value = data.unit_id || '';
            row.querySelector('.unit-name').value = data.unit_name || '';
            row.querySelector('.qty').value = data.quantity || 1;
            row.querySelector('.unit-cost').value = data.unit_cost || 0;
            row.querySelector('.line-discount').value = data.discount_amount || 0;
            row.querySelector('.line-total').value = data.line_total || 0;
        }

        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);

        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) {
        if (e.target.classList.contains('product-select')) {
            const row = e.target.closest('.item-row');
            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 || '';
                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', 'additional_expenses_total'].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>