@extends('layouts.layout-horizontal')

@section('title', 'New Trade Exhibition')

@section('content')
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between py-2">
            <h5 class="mb-0 fs-6">New Trade Exhibition</h5>
            <div class="d-flex align-items-center gap-2">
                <span id="saveStatus" class="small d-none"></span>
                <a href="{{ route('trade-exhibitions.index') }}" class="btn btn-secondary btn-sm"><i class="ph-duotone ph-arrow-left"></i><span class="d-none d-sm-inline ms-1">Back</span></a>
            </div>
        </div>

        <div class="card-body py-2">
            {{-- Exhibition Header --}}
            <div class="row g-2">
                <div class="col-8 col-md-3">
                    <label class="form-label small mb-1">Exhibition Name <span class="text-danger">*</span></label>
                    <input type="text" id="h_name" class="form-control form-control-sm header-field" placeholder="e.g. Gujarat Trade Fair 2026">
                </div>
                <div class="col-4 col-md-2">
                    <label class="form-label small mb-1">Date <span class="text-danger">*</span></label>
                    <input type="date" id="h_date" class="form-control form-control-sm header-field" value="{{ now()->toDateString() }}">
                </div>
                <div class="col-6 col-md-3">
                    <label class="form-label small mb-1">Exhibitor Name</label>
                    <input type="text" id="h_exhibitor" class="form-control form-control-sm header-field" placeholder="Company / Stall Owner">
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label small mb-1">Conv. Rate (1¥=?₹)</label>
                    <input type="number" step="0.0001" id="h_conv_rate" class="form-control form-control-sm header-field" placeholder="0.5600" inputmode="decimal">
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label small mb-1">Location</label>
                    <input type="text" id="h_location" class="form-control form-control-sm header-field" placeholder="Exhibition Center, Ahmedabad">
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label small mb-1">Dealer Card</label>
                    <input type="file" id="h_dealer_card" class="form-control form-control-sm" accept="image/*" capture="environment">
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label small mb-1 d-block">Card Preview</label>
                    <div class="border rounded p-2 bg-light min-h-100">
                        <a id="dealerCardPreviewLink" href="#" target="_blank" class="d-none">
                            <img id="dealerCardPreviewImage" src="" alt="Dealer card" class="img-thumbnail" style="max-height: 72px;">
                        </a>
                        <span id="dealerCardEmpty" class="text-muted small">Upload dealer card with the header.</span>
                    </div>
                </div>
                <div class="col-12">
                    <label class="form-label small mb-1">Notes</label>
                    <textarea id="h_notes" class="form-control form-control-sm header-field" rows="1" placeholder="Any additional notes..."></textarea>
                </div>
            </div>

            <hr class="my-2">

            {{-- Items Section --}}
            <div class="d-flex align-items-center justify-content-between mb-2">
                <h6 class="mb-0 small fw-semibold">Items (<span id="tableItemCount">0</span>)</h6>
            </div>

            {{-- Add Item Row --}}
            <div id="addItemSection" class="mb-2 p-2 border rounded bg-light" style="opacity: 0.5; pointer-events: none;">
                <small class="text-muted d-block mb-2" id="itemHint">Fill exhibition name & date first to start adding items</small>

                {{-- Mobile: stacked card layout | Desktop: row layout --}}
                <div class="row g-2 align-items-end">
                    <div class="col-12 col-md-3">
                        <label class="form-label small mb-1">Product Description <span class="text-danger">*</span></label>
                        <select id="ai_description" placeholder="Search or type new..."></select>
                    </div>
                    <div class="col-4 col-md-1">
                        <label class="form-label small mb-1">CTN Qty</label>
                        <input type="number" step="0.01" id="ai_ctn_qty" class="form-control form-control-sm item-field" inputmode="decimal">
                    </div>
                    <div class="col-4 col-md-1">
                        <label class="form-label small mb-1">Pcs/CTN</label>
                        <input type="number" step="1" id="ai_pieces" class="form-control form-control-sm item-field" inputmode="numeric">
                    </div>
                    <div class="col-4 col-md-2">
                        <label class="form-label small mb-1">Rate (¥)</label>
                        <input type="number" step="0.0001" id="ai_rate" class="form-control form-control-sm item-field" inputmode="decimal">
                    </div>
                    <div class="col-8 col-md-2">
                        <label class="form-label small mb-1">Image</label>
                        <input type="file" id="ai_image" class="form-control form-control-sm" accept="image/*" capture="environment">
                    </div>
                    <div class="col-4 col-md-1">
                        <button type="button" class="btn btn-success btn-sm w-100" id="manualSaveBtn" title="Save item">
                            <i class="ph-duotone ph-plus me-1 d-md-none"></i><span class="d-md-none">Add</span>
                            <i class="ph-duotone ph-plus d-none d-md-inline"></i>
                        </button>
                    </div>
                </div>
            </div>

            {{-- Items Table (desktop) --}}
            <div class="d-none d-md-block">
                <div class="table-responsive">
                    <table class="table table-hover table-sm align-middle mb-0" id="itemsTable" style="display: none;">
                        <thead class="table-light text-center">
                            <tr>
                                <th style="width:40px">#</th>
                                <th class="text-start">Product Description</th>
                                <th>CTN Qty</th>
                                <th>Pcs/CTN</th>
                                <th>Rate (¥)</th>
                                <th>Conv. Rate (₹)</th>
                                <th>Total (₹)</th>
                                <th>Image</th>
                                <th style="width:90px"></th>
                            </tr>
                        </thead>
                        <tbody id="itemsBody"></tbody>
                        <tfoot>
                            <tr class="table-primary">
                                <th colspan="6" class="text-end">Grand Total:</th>
                                <th class="text-end" id="grandTotal">0.00</th>
                                <th colspan="2"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            {{-- Items Cards (mobile) --}}
            <div class="d-md-none" id="itemsCards"></div>
            <div class="d-md-none mt-2 d-none border rounded p-2 bg-primary-subtle text-end" id="mobileGrandTotal">
                <strong>Grand Total: ₹<span id="grandTotalMobile">0.00</span></strong>
            </div>
        </div>
    </div>

    {{-- Edit Item Modal --}}
    <div class="modal fade" id="editItemModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h6 class="modal-title mb-0">Edit Item</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-2">
                        <div class="col-md-6">
                            <label class="form-label small mb-1">Product Description <span class="text-danger">*</span></label>
                            <input type="text" id="ei_description" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small mb-1">CTN Qty</label>
                            <input type="number" step="0.01" id="ei_ctn_qty" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small mb-1">Pcs/CTN</label>
                            <input type="number" step="1" id="ei_pieces" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small mb-1">Rate (¥)</label>
                            <input type="number" step="0.0001" id="ei_rate" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small mb-1">Replace Image</label>
                            <input type="file" id="ei_image" class="form-control form-control-sm" accept="image/*" capture="environment">
                            <small class="text-muted">Leave empty to keep current image.</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small mb-1 d-block">Current Image</label>
                            <div id="ei_current_image_wrap">
                                <img id="ei_current_image" src="" alt="" class="img-thumbnail" style="max-height:80px; display:none;">
                                <span id="ei_no_image" class="text-muted small">No image</span>
                            </div>
                            <div class="form-check mt-1" id="ei_remove_wrap" style="display:none;">
                                <input class="form-check-input" type="checkbox" id="ei_remove_image">
                                <label class="form-check-label small" for="ei_remove_image">Remove current image</label>
                            </div>
                        </div>
                    </div>
                    <div id="ei_error" class="alert alert-danger small mt-2 d-none"></div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success btn-sm" id="ei_save_btn">
                        <i class="ph-duotone ph-check me-1"></i>Save Changes
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function() {
    const storeUrl  = @json(route('trade-exhibitions.store'));
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    // Product options for TomSelect
    const productOptions = @json($products).map(p => ({
        value: (p.product_id || '') + ' \u2014 ' + p.name,
        text: (p.product_id || '') + ' \u2014 ' + p.name,
        name: p.name,
        pid: p.product_id || '',
    }));

    // Header fields
    const hName     = document.getElementById('h_name');
    const hExhibitor= document.getElementById('h_exhibitor');
    const hDate     = document.getElementById('h_date');
    const hConvRate = document.getElementById('h_conv_rate');
    const hLocation = document.getElementById('h_location');
    const hDealerCard = document.getElementById('h_dealer_card');
    const hNotes    = document.getElementById('h_notes');
    const dealerCardPreviewLink = document.getElementById('dealerCardPreviewLink');
    const dealerCardPreviewImage = document.getElementById('dealerCardPreviewImage');
    const dealerCardEmpty = document.getElementById('dealerCardEmpty');

    // Item fields
    const fDescEl   = document.getElementById('ai_description');
    const fCtn      = document.getElementById('ai_ctn_qty');
    const fPcs      = document.getElementById('ai_pieces');
    const fRate     = document.getElementById('ai_rate');
    const fImage    = document.getElementById('ai_image');
    const saveBtn   = document.getElementById('manualSaveBtn');
    const status    = document.getElementById('saveStatus');
    const itemSection = document.getElementById('addItemSection');
    const itemHint  = document.getElementById('itemHint');

    // TomSelect on description — allows selecting existing products OR typing new
    const tsDesc = new TomSelect(fDescEl, {
        dropdownParent: 'body',
        maxOptions: 50,
        create: true,
        createOnBlur: true,
        allowEmptyOption: true,
        closeAfterSelect: true,
        placeholder: 'Search product or type new...',
        options: productOptions,
        items: [],
        highlight: true,
        searchField: ['text', 'name', 'pid'],
        onDropdownOpen: function() { this.setActiveOption(null); this.control_input.value = ''; },
        render: {
            option_create: function(data, escape) {
                return '<div class="create" style="padding:6px 10px;font-size:.8rem;border-top:1px solid #eee"><i class="ph-duotone ph-plus-circle me-1"></i>Add: <strong>' + escape(data.input) + '</strong></div>';
            },
        },
        onItemAdd: function() { this.control_input.value = ''; },
    });

    let exhibitionId = null;
    let addItemUrl   = null;
    let deleteItemBase = null;
    let headerTimer  = null;
    let saving       = false;
    let rowCount     = 0;
    let grandTotal   = 0;

    function getDescValue() {
        return tsDesc.getValue().trim();
    }

    function indianFmt(num, dec) {
        num = parseFloat(num) || 0;
        let parts = num.toFixed(dec).split('.');
        let whole = parts[0];
        let decimal = parts[1] || '';
        if (whole.length > 3) {
            let last3 = whole.slice(-3);
            let rest = whole.slice(0, -3).replace(/\B(?=(\d{2})+(?!\d))/g, ',');
            whole = rest + ',' + last3;
        }
        return decimal ? whole + '.' + decimal : whole;
    }

    function showStatus(text, type) {
        status.textContent = text;
        status.className = 'small text-' + type;
        status.classList.remove('d-none');
    }

    function hideStatus() {
        status.classList.add('d-none');
    }

    // ─── Phase 1: Header auto-save ───────────────────────────

    function headerReady() {
        return hName.value.trim() !== '' && hDate.value !== '';
    }

    function setDealerCardPreview(url) {
        if (!url) {
            dealerCardPreviewLink.classList.add('d-none');
            dealerCardPreviewLink.removeAttribute('href');
            dealerCardPreviewImage.removeAttribute('src');
            dealerCardEmpty.classList.remove('d-none');
            return;
        }

        dealerCardPreviewLink.href = url;
        dealerCardPreviewImage.src = url;
        dealerCardPreviewLink.classList.remove('d-none');
        dealerCardEmpty.classList.add('d-none');
    }

    function getHeaderData(isUpdate) {
        const formData = new FormData();
        formData.append('exhibition_name', hName.value.trim());
        formData.append('exhibitor_name', hExhibitor.value.trim());
        formData.append('exhibition_date', hDate.value);
        formData.append('conversion_rate', hConvRate.value || '');
        formData.append('location', hLocation.value.trim());
        formData.append('notes', hNotes.value.trim());
        if (hDealerCard.files[0]) {
            formData.append('dealer_card', hDealerCard.files[0]);
        }
        if (isUpdate) {
            formData.append('_method', 'PUT');
        }
        return formData;
    }

    function saveHeader() {
        if (!headerReady() || saving) return;
        saving = true;
        showStatus('Saving...', 'warning');

        const isUpdate = exhibitionId !== null;
        const url = isUpdate
            ? @json(route('trade-exhibitions.update', ['trade_exhibition' => '__ID__'])).replace('__ID__', exhibitionId)
            : storeUrl;

        const body = getHeaderData(isUpdate);

        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body,
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                if (!isUpdate) {
                    exhibitionId = data.id;
                    addItemUrl = data.add_item_url;
                    deleteItemBase = data.delete_item_url;
                    enableItemSection();
                }
                if (data.dealer_card_url) {
                    setDealerCardPreview(data.dealer_card_url);
                }
                hDealerCard.value = '';
                showStatus('Saved', 'success');
                setTimeout(hideStatus, 2000);
            }
        })
        .catch(() => showStatus('Error saving', 'danger'))
        .finally(() => { saving = false; });
    }

    function enableItemSection() {
        itemSection.style.opacity = '1';
        itemSection.style.pointerEvents = 'auto';
        itemHint.textContent = 'Fill the row and click the green + button (or press Enter) to add an item';
        tsDesc.focus();
    }

    document.querySelectorAll('.header-field').forEach(field => {
        field.addEventListener('input', function() {
            clearTimeout(headerTimer);
            if (headerReady()) {
                showStatus('Will save in 2s...', 'muted');
                headerTimer = setTimeout(saveHeader, 2000);
            }
        });
    });

    hDealerCard.addEventListener('change', function() {
        if (hDealerCard.files[0]) {
            setDealerCardPreview(URL.createObjectURL(hDealerCard.files[0]));
        }
        clearTimeout(headerTimer);
        if (headerReady()) {
            showStatus('Will save in 2s...', 'muted');
            headerTimer = setTimeout(saveHeader, 2000);
        }
    });

    // ─── Phase 2: Item auto-save ─────────────────────────────

    function itemReady() {
        return exhibitionId &&
               getDescValue() !== '' &&
               fCtn.value !== '' && parseFloat(fCtn.value) >= 0 &&
               fPcs.value !== '' && parseInt(fPcs.value) >= 0 &&
               fRate.value !== '' && parseFloat(fRate.value) >= 0;
    }

    function saveItem() {
        if (!itemReady() || saving) return;
        saving = true;
        showStatus('Saving item...', 'warning');

        const formData = new FormData();
        formData.append('product_description', getDescValue());
        formData.append('ctn_qty', fCtn.value);
        formData.append('pieces_per_ctn', fPcs.value);
        formData.append('rate_in_yen', fRate.value);
        if (fImage.files[0]) {
            formData.append('image', fImage.files[0]);
        }

        fetch(addItemUrl, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: formData,
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                appendRow(data.item, data.item_count);
                clearItemForm();
                showStatus('Item saved', 'success');
                setTimeout(hideStatus, 2000);
            }
        })
        .catch(() => showStatus('Error saving item', 'danger'))
        .finally(() => { saving = false; });
    }

    function escapeHtml(s) {
        return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }

    function setRowDataset(el, item) {
        el.dataset.itemId    = item.id;
        el.dataset.itemDesc  = item.product_description;
        el.dataset.itemCtn   = item.ctn_qty;
        el.dataset.itemPcs   = item.pieces_per_ctn;
        el.dataset.itemRate  = item.rate_in_yen;
        el.dataset.itemTotal = item.total_rate;
        el.dataset.itemImage = item.image_url || '';
    }

    function appendRow(item, count) {
        rowCount = count;
        grandTotal += item.total_rate;

        // Desktop table row
        const table = document.getElementById('itemsTable');
        table.style.display = 'table';
        const tbody = document.getElementById('itemsBody');
        const tr = document.createElement('tr');
        tr.style.animation = 'fadeIn 0.3s ease';
        setRowDataset(tr, item);

        const imgCell = item.image_url
            ? `<a href="${item.image_url}" target="_blank"><img src="${item.image_url}" class="img-thumbnail" style="max-height:40px"></a>`
            : '<span class="text-muted">\u2014</span>';

        const deleteUrl = deleteItemBase.replace('__ID__', item.id);

        tr.innerHTML = `
            <td class="text-center idx">${rowCount}</td>
            <td class="cell-desc">${escapeHtml(item.product_description)}</td>
            <td class="text-end cell-ctn">${indianFmt(item.ctn_qty, 2)}</td>
            <td class="text-end cell-pcs">${item.pieces_per_ctn}</td>
            <td class="text-end cell-rate">${indianFmt(item.rate_in_yen, 4)}</td>
            <td class="text-end cell-conv">${indianFmt(item.converted_rate, 2)}</td>
            <td class="text-end fw-bold cell-total">${indianFmt(item.total_rate, 2)}</td>
            <td class="text-center cell-image">${imgCell}</td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-outline-primary edit-item-btn" title="Edit">
                    <i class="ph-duotone ph-pencil-simple"></i>
                </button>
                <button type="button" class="btn btn-sm btn-outline-danger delete-item-btn" data-url="${deleteUrl}" title="Remove">
                    <i class="ph-duotone ph-trash"></i>
                </button>
            </td>`;
        tbody.appendChild(tr);

        // Mobile card
        const cards = document.getElementById('itemsCards');
        const card = document.createElement('div');
        card.className = 'border rounded p-2 mb-2';
        card.style.animation = 'fadeIn 0.3s ease';
        setRowDataset(card, item);
        card.innerHTML = `
            <div class="d-flex justify-content-between align-items-start mb-1">
                <div>
                    <span class="badge bg-secondary me-1">${rowCount}</span>
                    <strong class="small cell-desc">${escapeHtml(item.product_description)}</strong>
                </div>
                <div class="d-flex gap-1">
                    <button type="button" class="btn btn-sm btn-outline-primary py-0 px-1 edit-item-btn">
                        <i class="ph-duotone ph-pencil-simple"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 delete-item-btn" data-url="${deleteUrl}">
                        <i class="ph-duotone ph-trash"></i>
                    </button>
                </div>
            </div>
            <div class="d-flex flex-wrap gap-2 small text-muted">
                <span>CTN: ${indianFmt(item.ctn_qty, 2)}</span>
                <span>Pcs: ${item.pieces_per_ctn}</span>
                <span>¥${indianFmt(item.rate_in_yen, 4)}</span>
                <span>₹${indianFmt(item.converted_rate, 2)}</span>
            </div>
            <div class="d-flex justify-content-between align-items-center mt-1">
                <div>${item.image_url ? `<a href="${item.image_url}" target="_blank"><img src="${item.image_url}" style="max-height:35px;border-radius:4px"></a>` : ''}</div>
                <strong class="text-success">\u20b9${indianFmt(item.total_rate, 2)}</strong>
            </div>`;
        cards.appendChild(card);

        // Update totals
        document.getElementById('tableItemCount').textContent = rowCount;
        document.getElementById('grandTotal').textContent = indianFmt(grandTotal, 2);
        document.getElementById('grandTotalMobile').textContent = indianFmt(grandTotal, 2);
        document.getElementById('mobileGrandTotal').classList.remove('d-none');
    }

    // Delete item (event delegation)
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.delete-item-btn');
        if (!btn) return;
        if (!confirm('Remove this item?')) return;

        const url = btn.dataset.url;
        btn.disabled = true;

        fetch(url, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                // Remove desktop row
                const tr = btn.closest('tr');
                if (tr) tr.remove();

                // Remove mobile card
                const card = btn.closest('[data-item-id]');
                if (card) card.remove();

                // Recalculate
                grandTotal -= data.deleted_total || 0;
                rowCount = data.item_count || (rowCount - 1);
                document.getElementById('tableItemCount').textContent = rowCount;
                document.getElementById('grandTotal').textContent = indianFmt(grandTotal, 2);
                document.getElementById('grandTotalMobile').textContent = indianFmt(grandTotal, 2);

                if (rowCount === 0) {
                    document.getElementById('itemsTable').style.display = 'none';
                    document.getElementById('mobileGrandTotal').classList.add('d-none');
                }

                showStatus('Item removed', 'success');
                setTimeout(hideStatus, 2000);
            }
        })
        .catch(() => { btn.disabled = false; showStatus('Error removing', 'danger'); });
    });

    function clearItemForm() {
        tsDesc.clear();
        fCtn.value = '';
        fPcs.value = '';
        fRate.value = '';
        fImage.value = '';
        tsDesc.focus();
    }

    // Save only on button click
    saveBtn.addEventListener('click', function() {
        if (itemReady()) {
            saveItem();
        } else if (!exhibitionId) {
            showStatus('Fill exhibition name & date first', 'danger');
            setTimeout(hideStatus, 2000);
        } else {
            showStatus('Fill all required item fields', 'danger');
            setTimeout(hideStatus, 2000);
        }
    });

    // Enter key in any item field triggers the same save
    document.querySelectorAll('.item-field').forEach(field => {
        field.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                saveBtn.click();
            }
        });
    });

    // Listen for newly created products from the product form (BroadcastChannel)
    const productChannel = new BroadcastChannel('product_created');
    productChannel.onmessage = function(event) {
        const p = event.data;
        if (!p || !p.id) return;
        const label = (p.product_id || '') + ' \u2014 ' + p.name;
        if (!tsDesc.options[label]) {
            tsDesc.addOption({ value: label, text: label, name: p.name, pid: p.product_id || '' });
        }
    };

    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Edit Item Modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    const updateItemBase = @json(route('trade-exhibitions.update-item', ['id' => '__EID__', 'itemId' => '__IID__']));

    const editModalEl = document.getElementById('editItemModal');
    const editModal   = new bootstrap.Modal(editModalEl);
    const eDesc       = document.getElementById('ei_description');
    const eCtn        = document.getElementById('ei_ctn_qty');
    const ePcs        = document.getElementById('ei_pieces');
    const eRate       = document.getElementById('ei_rate');
    const eImage      = document.getElementById('ei_image');
    const eCurImg     = document.getElementById('ei_current_image');
    const eNoImg      = document.getElementById('ei_no_image');
    const eRemoveWrap = document.getElementById('ei_remove_wrap');
    const eRemoveChk  = document.getElementById('ei_remove_image');
    const eErr        = document.getElementById('ei_error');
    const eSaveBtn    = document.getElementById('ei_save_btn');

    let editingEl = null;
    let editingId = null;
    let editSaving = false;

    function openEditModal(el) {
        editingEl = el;
        editingId = el.dataset.itemId;
        eDesc.value = el.dataset.itemDesc || '';
        eCtn.value  = el.dataset.itemCtn || '';
        ePcs.value  = el.dataset.itemPcs || '';
        eRate.value = el.dataset.itemRate || '';
        eImage.value = '';
        eRemoveChk.checked = false;
        eErr.classList.add('d-none');

        const imgUrl = el.dataset.itemImage || '';
        if (imgUrl) {
            eCurImg.src = imgUrl;
            eCurImg.style.display = 'inline-block';
            eNoImg.style.display = 'none';
            eRemoveWrap.style.display = 'block';
        } else {
            eCurImg.removeAttribute('src');
            eCurImg.style.display = 'none';
            eNoImg.style.display = 'inline';
            eRemoveWrap.style.display = 'none';
        }
        editModal.show();
    }

    // Delegate edit clicks for desktop rows + mobile cards
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.edit-item-btn');
        if (!btn) return;
        const el = btn.closest('[data-item-id]');
        if (el) openEditModal(el);
    });

    eSaveBtn.addEventListener('click', function() {
        if (editSaving || !editingEl || !exhibitionId) return;

        const desc = eDesc.value.trim();
        const ctn  = eCtn.value;
        const pcs  = ePcs.value;
        const rate = eRate.value;
        if (!desc || ctn === '' || pcs === '' || rate === '' ||
            parseFloat(ctn) < 0 || parseInt(pcs) < 0 || parseFloat(rate) < 0) {
            eErr.textContent = 'Fill all required fields with valid values.';
            eErr.classList.remove('d-none');
            return;
        }

        editSaving = true;
        eSaveBtn.disabled = true;
        eErr.classList.add('d-none');

        const fd = new FormData();
        fd.append('product_description', desc);
        fd.append('ctn_qty', ctn);
        fd.append('pieces_per_ctn', pcs);
        fd.append('rate_in_yen', rate);
        if (eImage.files[0]) {
            fd.append('image', eImage.files[0]);
        } else if (eRemoveChk.checked) {
            fd.append('remove_image', '1');
        }

        const url = updateItemBase.replace('__EID__', exhibitionId).replace('__IID__', editingId);

        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
            body: fd,
        })
        .then(r => r.ok ? r.json() : r.json().then(j => { throw j; }))
        .then(data => {
            if (!data.success) throw data;
            applyItemUpdate(data.item);
            editModal.hide();
            showStatus('Item updated', 'success');
            setTimeout(hideStatus, 2000);
        })
        .catch(err => {
            const msg = (err && err.message) || (err && err.errors && Object.values(err.errors).flat().join(' ')) || 'Error saving changes';
            eErr.textContent = msg;
            eErr.classList.remove('d-none');
        })
        .finally(() => {
            editSaving = false;
            eSaveBtn.disabled = false;
        });
    });

    function applyItemUpdate(item) {
        // Update both the desktop row and mobile card for this item
        const matches = document.querySelectorAll(`[data-item-id="${item.id}"]`);
        matches.forEach(el => {
            const oldTotal = parseFloat(el.dataset.itemTotal) || 0;
            grandTotal = grandTotal - oldTotal + item.total_rate;
            setRowDataset(el, item);

            // Desktop row uses .cell-* classes
            const desc  = el.querySelector('.cell-desc');
            const ctn   = el.querySelector('.cell-ctn');
            const pcs   = el.querySelector('.cell-pcs');
            const rate  = el.querySelector('.cell-rate');
            const conv  = el.querySelector('.cell-conv');
            const total = el.querySelector('.cell-total');
            const img   = el.querySelector('.cell-image');

            if (desc) desc.textContent = item.product_description;
            if (ctn)  ctn.textContent  = indianFmt(item.ctn_qty, 2);
            if (pcs)  pcs.textContent  = item.pieces_per_ctn;
            if (rate) rate.textContent = indianFmt(item.rate_in_yen, 4);
            if (conv) conv.textContent = indianFmt(item.converted_rate, 2);
            if (total) total.textContent = indianFmt(item.total_rate, 2);
            if (img) {
                img.innerHTML = item.image_url
                    ? `<a href="${item.image_url}" target="_blank"><img src="${item.image_url}" class="img-thumbnail" style="max-height:40px"></a>`
                    : '<span class="text-muted">\u2014</span>';
            }

            // Mobile-card variants
            const ctnM = el.querySelector('.cell-ctn-mob');
            const pcsM = el.querySelector('.cell-pcs-mob');
            const rateM = el.querySelector('.cell-rate-mob');
            const convM = el.querySelector('.cell-conv-mob');
            const totalM = el.querySelector('.cell-total-mob');
            const imgM   = el.querySelector('.cell-image-mob');
            if (ctnM)  ctnM.textContent  = 'CTN: ' + indianFmt(item.ctn_qty, 2);
            if (pcsM)  pcsM.textContent  = 'Pcs: ' + item.pieces_per_ctn;
            if (rateM) rateM.textContent = '\u00a5' + indianFmt(item.rate_in_yen, 4);
            if (convM) convM.textContent = '\u20b9' + indianFmt(item.converted_rate, 2);
            if (totalM) totalM.textContent = '\u20b9' + indianFmt(item.total_rate, 2);
            if (imgM) {
                imgM.innerHTML = item.image_url
                    ? `<a href="${item.image_url}" target="_blank"><img src="${item.image_url}" style="max-height:35px;border-radius:4px"></a>`
                    : '';
            }
        });

        document.getElementById('grandTotal').textContent = indianFmt(grandTotal, 2);
        document.getElementById('grandTotalMobile').textContent = indianFmt(grandTotal, 2);
    }
})();
</script>
<style>
@keyframes fadeIn { from { opacity: 0; background: #d1e7dd; } to { opacity: 1; background: transparent; } }
</style>
@endpush