@csrf
@php
    $isEdit = isset($quotation);
    $q = $isEdit ? $quotation : null;
    $existingItems = $isEdit
        ? $quotation->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,
            'board_portion'    => $item->board_portion ?? '',
            '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();
@endphp

{{-- ── HEADER ────────────────────────────────────────────────────────────── --}}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <label class="form-label">العميل <span class="text-danger">*</span></label>
        <select id="customer_id" name="customer_id" class="form-select @error('customer_id') is-invalid @enderror">
            <option value="">-- اختر العميل --</option>
            @foreach($customers as $c)
                <option value="{{ $c->id }}"
                    @selected(old('customer_id', $q?->customer_id) == $c->id)>
                    {{ $c->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 id="price_type" name="price_type" class="form-select @error('price_type') is-invalid @enderror">
            @foreach(\App\Models\Quotation::PRICE_TYPES as $val => $lbl)
                <option value="{{ $val }}" @selected(old('price_type', $q?->price_type ?? 'retail') === $val)>{{ $lbl }}</option>
            @endforeach
        </select>
        @error('price_type') <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="quotation_date" class="form-control @error('quotation_date') is-invalid @enderror"
               value="{{ old('quotation_date', $q?->quotation_date?->format('Y-m-d') ?? now()->format('Y-m-d')) }}">
        @error('quotation_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">صلاحية العرض</label>
        <input type="date" name="valid_until_date" class="form-control"
               value="{{ old('valid_until_date', $q?->valid_until_date?->format('Y-m-d')) }}">
    </div>

    <div class="col-md-4">
        <label class="form-label">المخزن</label>
        <select name="warehouse_id" class="form-select">
            <option value="">-- اختر المخزن --</option>
            @foreach($warehouses as $w)
                <option value="{{ $w->id }}" @selected(old('warehouse_id', $q?->warehouse_id) == $w->id)>
                    {{ $w->name_ar }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label">نوع الخصم</label>
        <select id="discount_type" name="discount_type" class="form-select">
            <option value="fixed"      @selected(old('discount_type', $q?->discount_type ?? 'fixed') === 'fixed')>مبلغ ثابت</option>
            <option value="percentage" @selected(old('discount_type', $q?->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', $q?->discount_value ?? 0) }}">
    </div>

    <div class="col-md-3">
        <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', $q?->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', $q?->notes_ar) }}</textarea>
    </div>
</div>

{{-- ── ITEMS TABLE ──────────────────────────────────────────────────────────── --}}
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center py-2">
        <h6 class="mb-0">بنود عرض السعر</h6>
        <button type="button" id="add-row-btn" class="btn btn-sm btn-outline-primary">
            <i class="ti ti-plus"></i> إضافة بند
        </button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-bordered table-sm mb-0 align-middle" id="items-table">
                <thead class="table-light">
                    <tr>
                        <th style="width:40px">#</th>
                        <th style="width:90px">النوع</th>
                        <th style="width:200px">الصنف / الخدمة</th>
                        <th>الوصف</th>
                        <th style="width:80px">نسبة</th>
                        <th style="width:80px">الكمية</th>
                        <th style="width:90px">الوحدة</th>
                        <th style="width:110px">سعر الوحدة</th>
                        <th style="width:100px">الخصم</th>
                        <th style="width:110px">الإجمالي</th>
                        <th style="width:40px"></th>
                    </tr>
                </thead>
                <tbody id="items-tbody"></tbody>
            </table>
        </div>
    </div>
</div>

{{-- ── TOTALS ───────────────────────────────────────────────────────────────── --}}
<div class="row justify-content-end mb-4">
    <div class="col-md-5">
        <table class="table table-bordered table-sm">
            <tr>
                <th class="bg-light">الإجمالي قبل الخصم</th>
                <td class="text-end fw-bold" id="display-subtotal">0.00</td>
            </tr>
            <tr>
                <th class="bg-light">الخصم</th>
                <td class="text-end text-danger" id="display-discount">0.00</td>
            </tr>
            <tr>
                <th class="bg-light">بعد الخصم</th>
                <td class="text-end" id="display-after-discount">0.00</td>
            </tr>
            <tr>
                <th class="bg-light">الضريبة</th>
                <td class="text-end text-warning" id="display-tax">0.00</td>
            </tr>
            <tr class="table-primary">
                <th>الإجمالي النهائي</th>
                <td class="text-end fw-bold fs-5" id="display-grand">0.00</td>
            </tr>
        </table>
    </div>
</div>

{{-- Hidden calculated fields --}}
<input type="hidden" id="hd-subtotal" name="_subtotal">
<input type="hidden" id="hd-discount-amount" name="_discount_amount">
<input type="hidden" id="hd-tax-amount" name="_tax_amount">
<input type="hidden" id="hd-grand-total" name="_grand_total">

@if($errors->has('items'))
    <div class="alert alert-danger">
        {{ $errors->first('items') }}
    </div>
@endif

<div class="d-flex gap-2 mt-3">
    <button type="submit" class="btn btn-primary">
        <i class="ti ti-device-floppy"></i> حفظ عرض السعر
    </button>
    <a href="{{ route('admin.quotations.index') }}" class="btn btn-light">إلغاء</a>
</div>

{{-- Row template (hidden, cloned by JS) --}}
<template id="row-tpl">
    <tr class="item-row">
        <td class="text-center row-num fw-bold text-muted"></td>
        <td>
            <select name="items[__IDX__][line_type]" class="form-select form-select-sm line-type-sel">
                <option value="product">صنف</option>
                <option value="service">خدمة</option>
            </select>
        </td>
        <td>
            <div class="product-section">
                <select name="items[__IDX__][product_id]" class="form-select form-select-sm product-sel">
                    <option value="">-- اختر --</option>
                    @foreach($products as $p)
                        <option value="{{ $p->id }}"
                            data-unit-id="{{ $p->unit_id }}"
                            data-unit-name="{{ $p->unit?->name_ar ?? '' }}"
                            data-sku="{{ $p->sku ?? '' }}">{{ $p->name_ar }}</option>
                    @endforeach
                </select>
            </div>
            <div class="service-section d-none">
                <select name="items[__IDX__][service_type_id]" class="form-select form-select-sm service-sel">
                    <option value="">-- اختر --</option>
                    @foreach($serviceTypes as $s)
                        <option value="{{ $s->id }}"
                            data-price="{{ $s->default_price }}"
                            data-unit-id="{{ $s->unit_id }}"
                            data-unit-name="{{ $s->unit?->name_ar ?? '' }}">{{ $s->name_ar }}</option>
                    @endforeach
                </select>
            </div>
        </td>
        <td>
            <input type="text" name="items[__IDX__][description_ar]" class="form-control form-control-sm desc-inp" placeholder="الوصف">
        </td>
        <td>
            <input type="text" name="items[__IDX__][board_portion]" class="form-control form-control-sm bp-inp" placeholder="مثال: 1/4">
        </td>
        <td>
            <input type="number" name="items[__IDX__][quantity]" step="0.01" min="0.01" value="1"
                   class="form-control form-control-sm qty-inp">
        </td>
        <td>
            <input type="hidden" name="items[__IDX__][unit_id]" class="unit-id-inp">
            <input type="text" class="form-control form-control-sm unit-disp" readonly placeholder="—">
        </td>
        <td>
            <input type="number" name="items[__IDX__][unit_price]" step="0.0001" min="0" value="0"
                   class="form-control form-control-sm price-inp">
        </td>
        <td>
            <input type="number" name="items[__IDX__][discount_amount]" step="0.01" min="0" value="0"
                   class="form-control form-control-sm disc-inp">
        </td>
        <td>
            <input type="number" name="items[__IDX__][line_total]" class="form-control form-control-sm line-total-inp" readonly value="0">
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-danger remove-row-btn" title="حذف البند">
                <i class="ti ti-trash"></i>
            </button>
        </td>
    </tr>
</template>

<script>
(function () {
    'use strict';

    /* ── Embedded data from PHP ── */
    const productMap   = @json($productJson);   // keyed by product id
    const serviceMap   = @json($serviceJson);   // keyed by service type id
    const customerMap  = @json($customerJson);  // keyed by customer id
    const existingItems = @json($existingItems);

    let rowIndex = 0;

    /* ── Formatting helper ── */
    function fmt(n) { return parseFloat(n || 0).toFixed(2); }

    /* ── Create a row from template ── */
    function addRow(prefill) {
        prefill = prefill || {};
        const idx   = rowIndex++;
        const tpl   = document.getElementById('row-tpl').content.cloneNode(true);
        const tr    = tpl.querySelector('tr');

        // Replace placeholder indices
        tr.innerHTML = tr.innerHTML.replace(/__IDX__/g, idx);
        tr.dataset.index = idx;

        document.getElementById('items-tbody').appendChild(tr);

        // Prefill values
        if (prefill.line_type && prefill.line_type === 'service') {
            tr.querySelector('.line-type-sel').value = 'service';
            tr.querySelector('.product-section').classList.add('d-none');
            tr.querySelector('.service-section').classList.remove('d-none');
        }
        if (prefill.product_id)      tr.querySelector('.product-sel').value     = prefill.product_id;
        if (prefill.service_type_id) tr.querySelector('.service-sel').value     = prefill.service_type_id;
        if (prefill.description_ar)  tr.querySelector('.desc-inp').value        = prefill.description_ar;
        if (prefill.board_portion)   tr.querySelector('.bp-inp').value          = prefill.board_portion;
        if (prefill.quantity)        tr.querySelector('.qty-inp').value          = prefill.quantity;
        if (prefill.unit_id)         tr.querySelector('.unit-id-inp').value     = prefill.unit_id;
        if (prefill.unit_name)       tr.querySelector('.unit-disp').value       = prefill.unit_name;
        if (prefill.unit_price !== undefined) tr.querySelector('.price-inp').value  = prefill.unit_price;
        if (prefill.discount_amount !== undefined) tr.querySelector('.disc-inp').value = prefill.discount_amount;
        if (prefill.line_total !== undefined) tr.querySelector('.line-total-inp').value = prefill.line_total;

        updateRowNumbers();
        calcTotals();
    }

    /* ── Numbering ── */
    function updateRowNumbers() {
        document.querySelectorAll('#items-tbody .item-row').forEach((tr, i) => {
            tr.querySelector('.row-num').textContent = i + 1;
        });
    }

    /* ── Per-line total ── */
    function calcLine(tr) {
        const qty   = parseFloat(tr.querySelector('.qty-inp').value)   || 0;
        const price = parseFloat(tr.querySelector('.price-inp').value) || 0;
        const disc  = parseFloat(tr.querySelector('.disc-inp').value)  || 0;
        const total = Math.max(0, qty * price - disc);
        tr.querySelector('.line-total-inp').value = total.toFixed(4);
        return total;
    }

    /* ── Grand totals ── */
    function calcTotals() {
        let subtotal = 0;
        document.querySelectorAll('#items-tbody .item-row').forEach(tr => {
            subtotal += calcLine(tr);
        });

        const discType  = document.getElementById('discount_type').value;
        const discVal   = parseFloat(document.getElementById('discount_value').value) || 0;
        const discAmt   = discType === 'percentage' ? subtotal * discVal / 100 : discVal;
        const taxPct    = parseFloat(document.getElementById('tax_percentage').value) || 0;
        const afterDisc = subtotal - discAmt;
        const taxAmt    = afterDisc * taxPct / 100;
        const grand     = afterDisc + taxAmt;

        document.getElementById('display-subtotal').textContent     = fmt(subtotal);
        document.getElementById('display-discount').textContent     = fmt(discAmt);
        document.getElementById('display-after-discount').textContent = fmt(afterDisc);
        document.getElementById('display-tax').textContent          = fmt(taxAmt);
        document.getElementById('display-grand').textContent        = fmt(grand);

        document.getElementById('hd-subtotal').value        = subtotal.toFixed(4);
        document.getElementById('hd-discount-amount').value = discAmt.toFixed(4);
        document.getElementById('hd-tax-amount').value      = taxAmt.toFixed(4);
        document.getElementById('hd-grand-total').value     = grand.toFixed(4);
    }

    /* ── Fill product details into a row ── */
    function fillProduct(tr, productId) {
        const p        = productMap[productId];
        const priceType = document.getElementById('price_type').value;
        if (!p) return;
        tr.querySelector('.desc-inp').value     = p.name_ar;
        tr.querySelector('.unit-id-inp').value  = p.unit_id || '';
        tr.querySelector('.unit-disp').value    = p.unit_name || '';
        const priceObj = p.prices || {};
        tr.querySelector('.price-inp').value    = priceObj[priceType] || priceObj['retail'] || 0;
    }

    /* ── Fill service details into a row ── */
    function fillService(tr, serviceId) {
        const s = serviceMap[serviceId];
        if (!s) return;
        tr.querySelector('.desc-inp').value     = s.name_ar;
        tr.querySelector('.unit-id-inp').value  = s.unit_id || '';
        tr.querySelector('.unit-disp').value    = s.unit_name || '';
        tr.querySelector('.price-inp').value    = s.default_price || 0;
    }

    /* ── Event delegation on tbody ── */
    document.getElementById('items-tbody').addEventListener('change', function (e) {
        const tr = e.target.closest('.item-row');
        if (!tr) return;

        if (e.target.classList.contains('line-type-sel')) {
            const isService = e.target.value === 'service';
            tr.querySelector('.product-section').classList.toggle('d-none', isService);
            tr.querySelector('.service-section').classList.toggle('d-none', !isService);
            tr.querySelector('.product-sel').value  = '';
            tr.querySelector('.service-sel').value  = '';
            tr.querySelector('.desc-inp').value      = '';
            tr.querySelector('.unit-id-inp').value   = '';
            tr.querySelector('.unit-disp').value     = '';
            tr.querySelector('.price-inp').value     = 0;
            tr.querySelector('.disc-inp').value      = 0;
        }

        if (e.target.classList.contains('product-sel')) {
            if (e.target.value) fillProduct(tr, e.target.value);
        }

        if (e.target.classList.contains('service-sel')) {
            if (e.target.value) fillService(tr, e.target.value);
        }

        calcTotals();
    });

    document.getElementById('items-tbody').addEventListener('input', function (e) {
        const tr = e.target.closest('.item-row');
        if (!tr) return;
        if (e.target.classList.contains('qty-inp') ||
            e.target.classList.contains('price-inp') ||
            e.target.classList.contains('disc-inp')) {
            calcTotals();
        }
    });

    document.getElementById('items-tbody').addEventListener('click', function (e) {
        const btn = e.target.closest('.remove-row-btn');
        if (!btn) return;
        const rows = document.querySelectorAll('#items-tbody .item-row');
        if (rows.length <= 1) {
            alert('يجب إبقاء بند واحد على الأقل.');
            return;
        }
        btn.closest('.item-row').remove();
        updateRowNumbers();
        calcTotals();
    });

    /* ── Add row button ── */
    document.getElementById('add-row-btn').addEventListener('click', function () {
        addRow();
    });

    /* ── Customer change → auto set price_type ── */
    document.getElementById('customer_id').addEventListener('change', function () {
        const c = customerMap[this.value];
        if (c && c.customer_type) {
            document.getElementById('price_type').value = c.customer_type;
            /* Re-fill product prices */
            document.querySelectorAll('#items-tbody .item-row').forEach(tr => {
                const pid = tr.querySelector('.product-sel').value;
                if (pid) fillProduct(tr, pid);
            });
            calcTotals();
        }
    });

    /* ── Header discount/tax changes ── */
    ['discount_type', 'discount_value', 'tax_percentage', 'price_type'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.addEventListener('change', calcTotals);
        if (el) el.addEventListener('input',  calcTotals);
    });

    /* ── price_type change → refill product prices ── */
    document.getElementById('price_type').addEventListener('change', function () {
        document.querySelectorAll('#items-tbody .item-row').forEach(tr => {
            const pid = tr.querySelector('.product-sel').value;
            if (pid) fillProduct(tr, pid);
        });
        calcTotals();
    });

    /* ── Initialise rows on load ── */
    document.addEventListener('DOMContentLoaded', function () {
        if (existingItems && existingItems.length > 0) {
            existingItems.forEach(item => addRow(item));
        } else {
            addRow();
        }
        calcTotals();
    });

})();
</script>