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

@section('content')
<div class="page-content-wrapper">
    <div class="content-container">
        <div class="page-content">

            {{-- HEADER --}}
            <div class="content-header d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
                <div>
                    <h4 class="mb-1"><i class="ti ti-arrow-back-up me-1 text-danger"></i>إضافة مرتجع جديد</h4>
                    <p class="text-muted mb-0">اختر الفاتورة، حدد المنتجات المُرجَعة، وسجّل المبلغ المسترد.</p>
                </div>
                <a href="{{ route('admin.sale-returns.index') }}" class="btn btn-outline-secondary">
                    <i class="ti ti-arrow-right me-1"></i>رجوع للقائمة
                </a>
            </div>

            <form method="POST" action="{{ route('admin.sale-returns.store') }}" id="return-form">
                @csrf
                <div class="row g-4">

                    {{-- ===== STEP 1: INVOICE SELECTION ===== --}}
                    <div class="col-12">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-transparent border-bottom-0 pt-3 pb-0">
                                <h6 class="mb-0"><span class="badge bg-danger rounded-circle me-2">١</span>اختيار الفاتورة</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3 align-items-end">
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">رقم الفاتورة <span class="text-danger">*</span></label>
                                        <select id="sales-invoice-id" name="sales_invoice_id"
                                            class="form-select @error('sales_invoice_id') is-invalid @enderror" required>
                                            <option value="">— ابحث واختر الفاتورة —</option>
                                            @foreach($invoices as $invoice)
                                                <option value="{{ $invoice->id }}" @selected(old('sales_invoice_id') == $invoice->id)>
                                                    {{ $invoice->invoice_number ?? ('#' . $invoice->id) }}
                                                    @if($invoice->customer) — {{ $invoice->customer->name }} @endif
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('sales_invoice_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label fw-semibold">العميل</label>
                                        <input type="text" id="display-customer" class="form-control bg-light" readonly placeholder="سيظهر تلقائياً">
                                        <input type="hidden" name="customer_id" id="input-customer-id">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label fw-semibold">المخزن</label>
                                        <input type="text" id="display-warehouse" class="form-control bg-light" readonly placeholder="سيظهر تلقائياً">
                                        <input type="hidden" name="warehouse_id" id="input-warehouse-id">
                                    </div>
                                </div>

                                {{-- Loading indicator --}}
                                <div id="invoice-loading" class="d-none mt-3">
                                    <div class="d-flex align-items-center gap-2 text-primary">
                                        <div class="spinner-border spinner-border-sm"></div>
                                        <span>جاري تحميل بنود الفاتورة...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ===== STEP 2: RETURN ITEMS ===== --}}
                    <div class="col-12">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-transparent border-bottom-0 pt-3 pb-0 d-flex justify-content-between align-items-center">
                                <h6 class="mb-0"><span class="badge bg-danger rounded-circle me-2">٢</span>بنود المرتجع</h6>
                                <button type="button" id="btn-add-row" class="btn btn-sm btn-outline-danger" disabled>
                                    <i class="ti ti-plus me-1"></i>إضافة بند
                                </button>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-bordered align-middle mb-0" id="return-items-table">
                                        <thead class="table-light text-center">
                                            <tr>
                                                <th style="width:35%">المنتج</th>
                                                <th style="width:12%">الكمية المُرجَعة</th>
                                                <th style="width:13%">سعر الوحدة</th>
                                                <th style="width:10%">الضريبة</th>
                                                <th style="width:10%">الخصم</th>
                                                <th style="width:13%" class="text-end">إجمالي البند</th>
                                                <th style="width:7%"></th>
                                            </tr>
                                        </thead>
                                        <tbody id="items-tbody">
                                            <tr id="empty-row">
                                                <td colspan="7" class="text-center text-muted py-5">
                                                    <i class="ti ti-package-off fs-2 d-block mb-2 opacity-50"></i>
                                                    اختر الفاتورة أولاً لتظهر المنتجات
                                                </td>
                                            </tr>
                                        </tbody>
                                        <tfoot id="items-tfoot" class="d-none">
                                            <tr class="table-light fw-semibold">
                                                <td colspan="4"></td>
                                                <td class="text-end">الإجمالي الفرعي</td>
                                                <td class="text-end" id="foot-subtotal">0.00</td>
                                                <td></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                        @error('items')
                            <div class="text-danger small mt-1"><i class="ti ti-alert-circle me-1"></i>{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- ===== STEP 3: DETAILS ===== --}}
                    <div class="col-12">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-transparent border-bottom-0 pt-3 pb-0">
                                <h6 class="mb-0"><span class="badge bg-danger rounded-circle me-2">٣</span>تفاصيل المرتجع</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label fw-semibold">حالة المرتجع</label>
                                        <select name="status" class="form-select @error('status') is-invalid @enderror">
                                            <option value="completed" @selected(old('status', 'completed') === 'completed')>✅ مكتمل</option>
                                            <option value="draft"     @selected(old('status') === 'draft')>📝 مسودة</option>
                                            <option value="cancelled" @selected(old('status') === 'cancelled')>❌ ملغى</option>
                                        </select>
                                        @error('status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label fw-semibold">المبلغ المسترد</label>
                                        <div class="input-group">
                                            <input type="number" step="0.01" min="0" name="refund_amount"
                                                id="refund-amount"
                                                value="{{ old('refund_amount') }}"
                                                class="form-control @error('refund_amount') is-invalid @enderror"
                                                placeholder="0.00">
                                            <span class="input-group-text"><i class="ti ti-cash"></i></span>
                                        </div>
                                        @error('refund_amount')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">ملاحظات</label>
                                        <textarea name="notes" rows="2"
                                            class="form-control @error('notes') is-invalid @enderror"
                                            placeholder="سبب الإرجاع أو أي ملاحظات إضافية...">{{ old('notes') }}</textarea>
                                        @error('notes')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- TOTALS SUMMARY --}}
                                    <div class="col-12">
                                        <div class="row justify-content-end">
                                            <div class="col-md-4">
                                                <div class="card bg-light border-0">
                                                    <div class="card-body py-3">
                                                        <div class="d-flex justify-content-between mb-2">
                                                            <span class="text-muted">الإجمالي الفرعي</span>
                                                            <span id="summary-subtotal" class="fw-semibold">0.00</span>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-2">
                                                            <span class="text-muted">إجمالي الضرائب</span>
                                                            <span id="summary-tax" class="fw-semibold">0.00</span>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-2">
                                                            <span class="text-muted">إجمالي الخصومات</span>
                                                            <span id="summary-discount" class="fw-semibold">0.00</span>
                                                        </div>
                                                        <hr class="my-2">
                                                        <div class="d-flex justify-content-between">
                                                            <span class="fw-bold fs-6">الإجمالي النهائي</span>
                                                            <span id="summary-total" class="fw-bold fs-5 text-danger">0.00</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ACTION BUTTONS --}}
                    <div class="col-12">
                        <div class="d-flex gap-2 justify-content-end">
                            <a href="{{ route('admin.sale-returns.index') }}" class="btn btn-outline-secondary px-4">
                                <i class="ti ti-x me-1"></i>إلغاء
                            </a>
                            <button type="submit" class="btn btn-danger px-5" id="btn-submit">
                                <i class="ti ti-device-floppy me-1"></i>حفظ المرتجع
                            </button>
                        </div>
                    </div>

                </div>{{-- /row --}}
            </form>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
(() => {
    // ── Init Select2 ──────────────────────────────────────────────────────────
    $('#sales-invoice-id').select2({
        theme: 'bootstrap-5',
        placeholder: '— ابحث واختر الفاتورة —',
        allowClear: true,
        width: '100%',
        dir: 'rtl',
    });

    const ITEMS_ENDPOINT = '{{ url('admin/sale-returns/invoice') }}';
    const tbody    = document.getElementById('items-tbody');
    const tfoot    = document.getElementById('items-tfoot');
    const emptyRow = document.getElementById('empty-row');
    const addBtn   = document.getElementById('btn-add-row');
    const submitBtn = document.getElementById('btn-submit');
    let invoiceItems = [];
    let rowIndex = 0;

    // ── Load invoice items via AJAX ───────────────────────────────────────────
    $('#sales-invoice-id').on('change', function () {
        const invoiceId = $(this).val();

        // reset
        tbody.innerHTML = '';
        rowIndex = 0;
        invoiceItems = [];
        addBtn.disabled = true;
        tfoot.classList.add('d-none');
        updateTotals();

        if (!invoiceId) {
            tbody.innerHTML = `
                <tr id="empty-row">
                    <td colspan="7" class="text-center text-muted py-5">
                        <i class="ti ti-package-off fs-2 d-block mb-2 opacity-50"></i>
                        اختر الفاتورة أولاً لتظهر المنتجات
                    </td>
                </tr>`;
            document.getElementById('display-customer').value = '';
            document.getElementById('display-warehouse').value = '';
            document.getElementById('input-customer-id').value = '';
            document.getElementById('input-warehouse-id').value = '';
            return;
        }

        document.getElementById('invoice-loading').classList.remove('d-none');

        fetch(`${ITEMS_ENDPOINT}/${invoiceId}/items`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(data => {
            document.getElementById('invoice-loading').classList.add('d-none');
            invoiceItems = data.items || [];

            document.getElementById('display-customer').value  = data.customer  || '';
            document.getElementById('display-warehouse').value = data.warehouse || '';
            document.getElementById('input-customer-id').value  = data.customer_id  || '';
            document.getElementById('input-warehouse-id').value = data.warehouse_id || '';

            if (invoiceItems.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            <i class="ti ti-alert-circle me-1"></i>لا توجد بنود في هذه الفاتورة.
                        </td>
                    </tr>`;
            } else {
                tbody.innerHTML = '';
                addBtn.disabled = false;
                tfoot.classList.remove('d-none');
                // Auto-add all items
                invoiceItems.forEach(() => addRow());
            }
        })
        .catch(() => {
            document.getElementById('invoice-loading').classList.add('d-none');
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" class="text-center text-danger py-4">
                        <i class="ti ti-alert-triangle me-1"></i>حدث خطأ أثناء تحميل البنود.
                    </td>
                </tr>`;
        });
    });

    // ── Build one row ─────────────────────────────────────────────────────────
    function optionsHtml() {
        return invoiceItems.map(item =>
            `<option value="${item.id}"
                data-product="${item.product_id}"
                data-unit="${item.unit_price}"
                data-tax="${item.tax_amount}"
                data-discount="${item.discount_amount}"
                data-maxqty="${item.qty}">${item.label}</option>`
        ).join('');
    }

    function addRow(autoIndex) {
        const idx = rowIndex++;
        const item = invoiceItems[typeof autoIndex !== 'undefined' ? autoIndex : 0];
        const tr   = document.createElement('tr');
        tr.dataset.rowIndex = idx;
        tr.innerHTML = `
            <td>
                <select name="items[${idx}][sales_invoice_item_id]"
                    class="form-select item-select" required>
                    <option value="">— اختر المنتج —</option>
                    ${optionsHtml()}
                </select>
                <input type="hidden" name="items[${idx}][product_id]" class="product-id-field">
            </td>
            <td>
                <input type="number" min="0.001" step="0.001"
                    name="items[${idx}][quantity]"
                    class="form-control qty-field text-center" required
                    placeholder="0">
                <small class="text-muted max-qty-hint d-none"></small>
            </td>
            <td>
                <input type="number" min="0" step="0.01"
                    name="items[${idx}][unit_price]"
                    class="form-control unit-field text-end" required placeholder="0.00">
            </td>
            <td>
                <input type="number" min="0" step="0.01"
                    name="items[${idx}][tax_amount]"
                    class="form-control tax-field text-end" value="0" placeholder="0.00">
            </td>
            <td>
                <input type="number" min="0" step="0.01"
                    name="items[${idx}][discount_amount]"
                    class="form-control discount-field text-end" value="0" placeholder="0.00">
            </td>
            <td class="text-end">
                <span class="line-total fw-semibold text-danger">0.00</span>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-outline-danger remove-row" title="حذف البند">
                    <i class="ti ti-trash"></i>
                </button>
            </td>`;
        tbody.appendChild(tr);

        // Auto-select item for auto-added rows
        if (item && typeof autoIndex !== 'undefined') {
            const sel = tr.querySelector('.item-select');
            sel.value = item.id;
            fillRowFromItem(tr, item);
        }

        // Validate & show max-qty hint on qty change
        updateTotals();
    }

    addBtn.addEventListener('click', () => addRow());

    // ── Fill row from selected item ───────────────────────────────────────────
    function fillRowFromItem(tr, item) {
        tr.querySelector('.product-id-field').value = item.product_id || '';
        tr.querySelector('.unit-field').value       = item.unit_price;
        tr.querySelector('.tax-field').value        = item.tax_amount;
        tr.querySelector('.discount-field').value   = item.discount_amount;
        tr.querySelector('.qty-field').max          = item.qty;
        tr.querySelector('.qty-field').value        = item.qty;
        const hint = tr.querySelector('.max-qty-hint');
        hint.textContent = `الحد الأقصى: ${item.qty}`;
        hint.classList.remove('d-none');
        updateRowTotal(tr);
    }

    // ── Delegate: item-select change ─────────────────────────────────────────
    tbody.addEventListener('change', function (e) {
        const select = e.target.closest('.item-select');
        if (!select) return;
        const tr  = select.closest('tr');
        const opt = select.options[select.selectedIndex];
        if (!opt.value) return;
        const item = {
            product_id:      opt.dataset.product || '',
            unit_price:      parseFloat(opt.dataset.unit)     || 0,
            tax_amount:      parseFloat(opt.dataset.tax)      || 0,
            discount_amount: parseFloat(opt.dataset.discount) || 0,
            qty:             parseFloat(opt.dataset.maxqty)   || 0,
        };
        fillRowFromItem(tr, item);
        updateTotals();
    });

    // ── Delegate: numeric field input ────────────────────────────────────────
    tbody.addEventListener('input', function (e) {
        const field = e.target.closest('.qty-field, .unit-field, .tax-field, .discount-field');
        if (!field) return;
        updateRowTotal(field.closest('tr'));
        updateTotals();
    });

    // ── Delegate: remove row ──────────────────────────────────────────────────
    tbody.addEventListener('click', function (e) {
        const btn = e.target.closest('.remove-row');
        if (!btn) return;
        btn.closest('tr').remove();
        if (tbody.querySelectorAll('tr').length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" class="text-center text-muted py-4">
                        لا توجد بنود — أضف بنداً جديداً.
                    </td>
                </tr>`;
        }
        updateTotals();
    });

    // ── Update single row total ───────────────────────────────────────────────
    function updateRowTotal(tr) {
        const qty      = parseFloat(tr.querySelector('.qty-field')?.value)      || 0;
        const unit     = parseFloat(tr.querySelector('.unit-field')?.value)     || 0;
        const tax      = parseFloat(tr.querySelector('.tax-field')?.value)      || 0;
        const discount = parseFloat(tr.querySelector('.discount-field')?.value) || 0;
        const total    = (qty * unit) + tax - discount;
        const span     = tr.querySelector('.line-total');
        if (span) span.textContent = total.toFixed(2);
    }

    // ── Recalculate all totals ────────────────────────────────────────────────
    function updateTotals() {
        let subtotal = 0, totalTax = 0, totalDiscount = 0;
        tbody.querySelectorAll('tr[data-row-index]').forEach(tr => {
            const qty      = parseFloat(tr.querySelector('.qty-field')?.value)      || 0;
            const unit     = parseFloat(tr.querySelector('.unit-field')?.value)     || 0;
            const tax      = parseFloat(tr.querySelector('.tax-field')?.value)      || 0;
            const discount = parseFloat(tr.querySelector('.discount-field')?.value) || 0;
            subtotal      += qty * unit;
            totalTax      += tax;
            totalDiscount += discount;
        });
        const total = subtotal + totalTax - totalDiscount;
        document.getElementById('foot-subtotal').textContent    = subtotal.toFixed(2);
        document.getElementById('summary-subtotal').textContent = subtotal.toFixed(2);
        document.getElementById('summary-tax').textContent      = totalTax.toFixed(2);
        document.getElementById('summary-discount').textContent = totalDiscount.toFixed(2);
        document.getElementById('summary-total').textContent    = total.toFixed(2);

        // auto-fill refund amount if empty
        const refundInput = document.getElementById('refund-amount');
        if (!refundInput.dataset.userEdited) {
            refundInput.value = total.toFixed(2);
        }
    }

    document.getElementById('refund-amount').addEventListener('input', function () {
        this.dataset.userEdited = '1';
    });

    // ── Confirm before submit ─────────────────────────────────────────────────
    document.getElementById('return-form').addEventListener('submit', function (e) {
        const rows = tbody.querySelectorAll('tr[data-row-index]');
        if (rows.length === 0) {
            e.preventDefault();
            alert('يرجى إضافة بند واحد على الأقل قبل الحفظ.');
        }
    });

})();
</script>
@endpush