@extends('admin.layouts.master')
@section('title', 'إضافة فاتورة مبيعات')

@section('content')
<div class="page-content-wrapper"><div class="content-container"><div class="page-content">
    <div class="content-header d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <div>
            <h4 class="mb-1"><i class="ti ti-file-invoice me-1"></i>إنشاء فاتورة مبيعات</h4>
            <p class="text-muted mb-0">واجهة احترافية لإضافة الفاتورة مع احتساب فوري للإجماليات قبل الحفظ.</p>
        </div>
        <a href="{{ route('admin.sales-invoices.index') }}" class="btn btn-outline-secondary">
            <i class="ti ti-arrow-right me-1"></i>العودة إلى الفواتير
        </a>
    </div>

    <form method="POST" action="{{ route('admin.sales-invoices.store') }}" id="invoice-form">
        @csrf

        <div class="row g-3 mb-3">
            <div class="col-lg-9">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0 pt-3 pb-0">
                        <h6 class="mb-0">معلومات الفاتورة</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">المخزن <span class="text-danger">*</span></label>
                                <select name="warehouse_id" class="form-select @error('warehouse_id') is-invalid @enderror" required>
                                    <option value="">اختر المخزن</option>
                                    @foreach($warehouses as $warehouse)
                                        <option value="{{ $warehouse->id }}" @selected(old('warehouse_id') == $warehouse->id)>{{ $warehouse->name }}</option>
                                    @endforeach
                                </select>
                                @error('warehouse_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-semibold">العميل</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') == $customer->id)>{{ $customer->name }}</option>
                                    @endforeach
                                </select>
                                @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-semibold">حالة الفاتورة</label>
                                <select name="invoice_status" class="form-select @error('invoice_status') is-invalid @enderror">
                                    <option value="completed" @selected(old('invoice_status', 'completed') === 'completed')>مكتملة</option>
                                    <option value="draft" @selected(old('invoice_status') === 'draft')>مسودة</option>
                                    <option value="cancelled" @selected(old('invoice_status') === 'cancelled')>ملغاة</option>
                                </select>
                                @error('invoice_status') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">المبلغ المدفوع</label>
                                <input type="number" step="0.01" min="0" name="paid_amount" id="paid_amount" value="{{ old('paid_amount', 0) }}" class="form-control @error('paid_amount') is-invalid @enderror">
                                @error('paid_amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">طريقة الخصم</label>
                                <select name="discount_type" id="discount_type" class="form-select @error('discount_type') is-invalid @enderror">
                                    <option value="">بدون</option>
                                    <option value="fixed" @selected(old('discount_type') === 'fixed')>قيمة ثابتة</option>
                                    <option value="percent" @selected(old('discount_type') === 'percent')>نسبة مئوية</option>
                                </select>
                                @error('discount_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">قيمة الخصم</label>
                                <input type="number" step="0.01" min="0" name="discount_value" id="discount_value" value="{{ old('discount_value', 0) }}" class="form-control @error('discount_value') is-invalid @enderror">
                                @error('discount_value') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">طريقة الدفع</label>
                                <select name="payment_method" class="form-select @error('payment_method') is-invalid @enderror">
                                    <option value="">غير محدد</option>
                                    <option value="cash" @selected(old('payment_method') === 'cash')>نقدي</option>
                                    <option value="card" @selected(old('payment_method') === 'card')>بطاقة</option>
                                    <option value="wallet" @selected(old('payment_method') === 'wallet')>محفظة</option>
                                    <option value="bank_transfer" @selected(old('payment_method') === 'bank_transfer')>تحويل بنكي</option>
                                </select>
                                @error('payment_method') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">مرجع الدفع</label>
                                <input type="text" name="payment_reference" value="{{ old('payment_reference') }}" class="form-control @error('payment_reference') is-invalid @enderror" placeholder="رقم مرجع/إيصال اختياري">
                                @error('payment_reference') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">ملاحظات</label>
                                <input type="text" name="notes" value="{{ old('notes') }}" class="form-control @error('notes') is-invalid @enderror" placeholder="ملاحظات إضافية على الفاتورة">
                                @error('notes') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-transparent border-0 pt-3 pb-0"><h6 class="mb-0">ملخص مباشر</h6></div>
                    <div class="card-body">
                        <table class="table table-sm mb-0">
                            <tr><th>الإجمالي الفرعي</th><td class="text-end" id="calc-subtotal">0.00</td></tr>
                            <tr><th>خصم الفاتورة</th><td class="text-end" id="calc-discount">0.00</td></tr>
                            <tr><th>الضرائب</th><td class="text-end" id="calc-tax">0.00</td></tr>
                            <tr><th>الإجمالي</th><td class="text-end fw-bold" id="calc-total">0.00</td></tr>
                            <tr><th>المدفوع</th><td class="text-end text-success" id="calc-paid">0.00</td></tr>
                            <tr><th>المستحق</th><td class="text-end text-danger fw-bold" id="calc-due">0.00</td></tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-transparent border-0 d-flex justify-content-between align-items-center pt-3 pb-0">
                <h6 class="mb-0">بنود الفاتورة</h6>
                <button type="button" id="add-item" class="btn btn-sm btn-outline-primary"><i class="ti ti-plus me-1"></i>إضافة بند</button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle" id="invoice-items-table">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 30%">المنتج</th>
                                <th style="width: 12%">الكمية</th>
                                <th style="width: 13%">سعر الوحدة</th>
                                <th style="width: 13%">خصم السطر</th>
                                <th style="width: 13%">ضريبة السطر</th>
                                <th style="width: 14%">الإجمالي</th>
                                <th style="width: 5%"></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                @error('items') <div class="text-danger small mt-2">{{ $message }}</div> @enderror
            </div>
        </div>

        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-1"></i>حفظ الفاتورة</button>
            <a href="{{ route('admin.sales-invoices.index') }}" class="btn btn-outline-secondary">إلغاء</a>
        </div>
    </form>
</div></div></div>
@endsection

@push('scripts')
<script>
$(function () {
    const products = @json($products->map(fn($p) => ['id' => $p->id, 'name' => $p->name, 'sku' => $p->sku, 'barcode' => $p->barcode, 'unit_id' => $p->unit_id, 'price' => (float) $p->sale_price])->values());
    let index = 0;

    function productOptions() {
        return products.map(function (p) {
            const sku = p.sku || '';
            return `<option value="${p.id}" data-sku="${sku}" data-barcode="${p.barcode || ''}" data-unit="${p.unit_id || ''}" data-price="${p.price}">${p.name} (${sku || 'بدون SKU'})</option>`;
        }).join('');
    }

    function addRow() {
        const row = `
            <tr>
                <td>
                    <select name="items[${index}][product_id]" class="form-select product-select" required>
                        <option value="">اختر منتجا</option>${productOptions()}
                    </select>
                    <input type="hidden" name="items[${index}][sku]" class="sku-field">
                    <input type="hidden" name="items[${index}][barcode]" class="barcode-field">
                    <input type="hidden" name="items[${index}][unit_id]" class="unit-field">
                </td>
                <td><input type="number" step="0.001" min="0.001" name="items[${index}][quantity]" class="form-control qty-field" value="1" required></td>
                <td><input type="number" step="0.01" min="0" name="items[${index}][unit_price]" class="form-control price-field" value="0" required></td>
                <td><input type="number" step="0.01" min="0" name="items[${index}][discount_amount]" class="form-control line-discount-field" value="0"></td>
                <td><input type="number" step="0.01" min="0" name="items[${index}][tax_amount]" class="form-control line-tax-field" value="0"></td>
                <td class="text-end fw-semibold line-total">0.00</td>
                <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="ti ti-trash"></i></button></td>
            </tr>`;

        $('#invoice-items-table tbody').append(row);
        index += 1;
        recalcTotals();
    }

    function recalcTotals() {
        let subtotal = 0;
        let lineDiscountTotal = 0;
        let taxTotal = 0;

        $('#invoice-items-table tbody tr').each(function () {
            const qty = parseFloat($(this).find('.qty-field').val() || 0);
            const price = parseFloat($(this).find('.price-field').val() || 0);
            const lineDiscount = parseFloat($(this).find('.line-discount-field').val() || 0);
            const lineTax = parseFloat($(this).find('.line-tax-field').val() || 0);

            const lineSubtotal = qty * price;
            const lineTotal = Math.max(0, lineSubtotal - lineDiscount + lineTax);

            subtotal += lineSubtotal;
            lineDiscountTotal += lineDiscount;
            taxTotal += lineTax;

            $(this).find('.line-total').text(lineTotal.toFixed(2));
        });

        const discountType = $('#discount_type').val();
        const discountValue = parseFloat($('#discount_value').val() || 0);
        let invoiceDiscount = 0;
        if (discountType === 'percent') {
            invoiceDiscount = subtotal * (discountValue / 100);
        } else if (discountType === 'fixed') {
            invoiceDiscount = discountValue;
        }

        const totalDiscount = lineDiscountTotal + invoiceDiscount;
        const total = Math.max(0, subtotal - totalDiscount + taxTotal);
        const paid = parseFloat($('#paid_amount').val() || 0);
        const due = Math.max(0, total - paid);

        $('#calc-subtotal').text(subtotal.toFixed(2));
        $('#calc-discount').text(totalDiscount.toFixed(2));
        $('#calc-tax').text(taxTotal.toFixed(2));
        $('#calc-total').text(total.toFixed(2));
        $('#calc-paid').text(paid.toFixed(2));
        $('#calc-due').text(due.toFixed(2));
    }

    $('#add-item').on('click', addRow);

    $(document).on('click', '.remove-row', function () {
        $(this).closest('tr').remove();
        recalcTotals();
    });

    $(document).on('change', '.product-select', function () {
        const selected = $(this).find(':selected');
        const row = $(this).closest('tr');
        row.find('.sku-field').val(selected.data('sku') || '');
        row.find('.barcode-field').val(selected.data('barcode') || '');
        row.find('.unit-field').val(selected.data('unit') || '');
        if (parseFloat(row.find('.price-field').val() || 0) === 0) {
            row.find('.price-field').val(selected.data('price') || 0);
        }
        recalcTotals();
    });

    $(document).on('input', '.qty-field, .price-field, .line-discount-field, .line-tax-field, #discount_type, #discount_value, #paid_amount', recalcTotals);

    $('#invoice-form').on('submit', function (e) {
        if ($('#invoice-items-table tbody tr').length === 0) {
            e.preventDefault();
            alert('يجب إضافة بند واحد على الأقل قبل حفظ الفاتورة.');
        }
    });

    addRow();
});
</script>
@endpush