@extends('layouts.layout-horizontal')

@section('title', 'Edit 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">Edit Trade Exhibition</h5>
            <a href="{{ route('trade-exhibitions.show', $exhibition->id) }}" 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>
        <form method="POST" action="{{ route('trade-exhibitions.update', $exhibition->id) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="card-body py-2">
                <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" name="exhibition_name" class="form-control form-control-sm @error('exhibition_name') is-invalid @enderror"
                            value="{{ old('exhibition_name', $exhibition->exhibition_name) }}" required>
                        @error('exhibition_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </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" name="exhibition_date" class="form-control form-control-sm @error('exhibition_date') is-invalid @enderror"
                            value="{{ old('exhibition_date', $exhibition->exhibition_date->format('Y-m-d')) }}" required>
                        @error('exhibition_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-6 col-md-3">
                        <label class="form-label small mb-1">Exhibitor Name</label>
                        <input type="text" name="exhibitor_name" class="form-control form-control-sm @error('exhibitor_name') is-invalid @enderror"
                            value="{{ old('exhibitor_name', $exhibition->exhibitor_name) }}">
                        @error('exhibitor_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </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" name="conversion_rate"
                            class="form-control form-control-sm @error('conversion_rate') is-invalid @enderror"
                            value="{{ old('conversion_rate', $exhibition->conversion_rate) }}" inputmode="decimal">
                        @error('conversion_rate')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-4">
                        <label class="form-label small mb-1">Location</label>
                        <input type="text" name="location" class="form-control form-control-sm"
                            value="{{ old('location', $exhibition->location) }}" 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" name="dealer_card" class="form-control form-control-sm @error('dealer_card') is-invalid @enderror" accept="image/*" capture="environment">
                        @error('dealer_card')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-4">
                        <label class="form-label small mb-1 d-block">Current Card</label>
                        <div class="border rounded p-2 bg-light">
                            @if ($exhibition->dealer_card_path)
                                <a href="{{ asset('storage/' . $exhibition->dealer_card_path) }}" target="_blank">
                                    <img src="{{ asset('storage/' . $exhibition->dealer_card_path) }}" alt="Dealer card" class="img-thumbnail" style="max-height: 72px;">
                                </a>
                            @else
                                <span class="text-muted small">No dealer card uploaded.</span>
                            @endif
                        </div>
                    </div>

                    <div class="col-12">
                        <label class="form-label small mb-1">Notes</label>
                        <textarea name="notes" class="form-control form-control-sm" rows="1">{{ old('notes', $exhibition->notes) }}</textarea>
                    </div>
                </div>
            </div>

            <div class="card-footer py-2 d-flex gap-2">
                <button type="submit" class="btn btn-success btn-sm flex-fill flex-md-grow-0">
                    <i class="ph-duotone ph-check me-1"></i> Update Header
                </button>
                <a href="{{ route('trade-exhibitions.show', $exhibition->id) }}" class="btn btn-outline-secondary btn-sm flex-fill flex-md-grow-0">Cancel</a>
            </div>
        </form>
    </div>

    {{-- Items Section --}}
    <div class="card mt-2">
        <div class="card-header d-flex align-items-center justify-content-between py-2">
            <h6 class="mb-0 small fw-semibold">Items (<span id="tableItemCount">{{ $exhibition->items->count() }}</span>)</h6>
            <span id="saveStatus" class="small d-none"></span>
        </div>
        <div class="card-body py-2">
            <div class="mb-2 p-2 border rounded bg-light">
                <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>

            <div class="table-responsive">
                <table class="table table-hover table-sm align-middle mb-0">
                    <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" class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody id="itemsBody">
                        @php $grandTotal = 0; @endphp
                        @foreach ($exhibition->items as $item)
                            @php
                                $convertedRate = $item->rate_in_yen * $exhibition->conversion_rate;
                                $totalRate = $item->ctn_qty * $item->pieces_per_ctn * $convertedRate;
                                $grandTotal += $totalRate;
                            @endphp
                            <tr data-item-id="{{ $item->id }}"
                                data-item-desc="{{ $item->product_description }}"
                                data-item-ctn="{{ $item->ctn_qty }}"
                                data-item-pcs="{{ $item->pieces_per_ctn }}"
                                data-item-rate="{{ $item->rate_in_yen }}"
                                data-item-total="{{ $totalRate }}"
                                data-item-image="{{ $item->image_path ? asset('storage/' . $item->image_path) : '' }}">
                                <td class="text-center idx">{{ $loop->iteration }}</td>
                                <td class="cell-desc">{{ $item->product_description }}</td>
                                <td class="text-end cell-ctn">{{ indian_number($item->ctn_qty, 2) }}</td>
                                <td class="text-end cell-pcs">{{ $item->pieces_per_ctn }}</td>
                                <td class="text-end cell-rate">{{ indian_number($item->rate_in_yen, 4) }}</td>
                                <td class="text-end cell-conv">{{ indian_number($convertedRate, 2) }}</td>
                                <td class="text-end fw-bold cell-total">{{ indian_number($totalRate, 2) }}</td>
                                <td class="text-center cell-image">
                                    @if ($item->image_path)
                                        <a href="{{ asset('storage/' . $item->image_path) }}" target="_blank">
                                            <img src="{{ asset('storage/' . $item->image_path) }}"
                                                alt="Item Image" class="img-thumbnail" style="max-height: 50px;">
                                        </a>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </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" title="Remove">
                                        <i class="ph-duotone ph-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="table-primary">
                            <th colspan="6" class="text-end">Grand Total:</th>
                            <th class="text-end" id="grandTotal">{{ indian_number($grandTotal, 2) }}</th>
                            <th colspan="2"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>

            @if ($exhibition->items->count() === 0)
                <div class="text-center text-muted py-3" id="emptyState">
                    <p class="mb-0">No items in this exhibition yet.</p>
                </div>
            @endif
        </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 addUrl     = @json(route('trade-exhibitions.add-item', $exhibition->id));
    const updateBase = @json(route('trade-exhibitions.update-item', [$exhibition->id, '__ID__']));
    const deleteBase = @json(route('trade-exhibitions.delete-item', [$exhibition->id, '__ID__']));
    const csrfToken  = document.querySelector('meta[name="csrf-token"]').content;

    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 || '',
    }));

    const status = document.getElementById('saveStatus');
    let grandTotal = {{ $grandTotal }};
    let rowCount   = {{ $exhibition->items->count() }};
    let saving = false;

    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 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 = ''; },
    });

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

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

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

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

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

    function saveItem() {
        if (!itemReady() || saving) return;
        saving = true;
        saveBtn.disabled = 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(addUrl, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
            body: formData,
        })
        .then(r => r.ok ? r.json() : r.json().then(j => { throw j; }))
        .then(data => {
            if (!data.success) throw data;
            appendRow(data.item, data.item_count);
            clearItemForm();
            showStatus('Item saved', 'success');
            setTimeout(hideStatus, 2000);
        })
        .catch(err => {
            const msg = (err && err.message) || (err && err.errors && Object.values(err.errors).flat().join(' ')) || 'Error saving item';
            showStatus(msg, 'danger');
            setTimeout(hideStatus, 3000);
        })
        .finally(() => {
            saving = false;
            saveBtn.disabled = false;
        });
    }

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

        const empty = document.getElementById('emptyState');
        if (empty) empty.remove();

        const tbody = document.getElementById('itemsBody');
        const tr = document.createElement('tr');
        tr.dataset.itemId = item.id;
        tr.dataset.itemDesc = item.product_description;
        tr.dataset.itemCtn = item.ctn_qty;
        tr.dataset.itemPcs = item.pieces_per_ctn;
        tr.dataset.itemRate = item.rate_in_yen;
        tr.dataset.itemTotal = item.total_rate;
        tr.dataset.itemImage = item.image_url || '';

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

        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" title="Remove">
                    <i class="ph-duotone ph-trash"></i>
                </button>
            </td>
        `;
        tbody.appendChild(tr);

        document.getElementById('tableItemCount').textContent = rowCount;
        document.getElementById('grandTotal').textContent = indianFmt(grandTotal, 2);
    }

    saveBtn.addEventListener('click', function() {
        if (itemReady()) {
            saveItem();
        } else {
            showStatus('Fill all required item fields', 'danger');
            setTimeout(hideStatus, 2000);
        }
    });

    document.querySelectorAll('.item-field').forEach(field => {
        field.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                saveBtn.click();
            }
        });
    });

    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 editingTr = null;
    let editingId = null;
    let editSaving = false;

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

        const imgUrl = tr.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();
    }

    document.getElementById('itemsBody').addEventListener('click', function(e) {
        const editBtn = e.target.closest('.edit-item-btn');
        if (editBtn) {
            const tr = editBtn.closest('tr');
            if (tr) openEditModal(tr);
            return;
        }
        const delBtn = e.target.closest('.delete-item-btn');
        if (delBtn) {
            const tr = delBtn.closest('tr');
            if (!tr) return;
            if (!confirm('Remove this item?')) return;
            deleteRow(tr, delBtn);
        }
    });

    function deleteRow(tr, btn) {
        const url = deleteBase.replace('__ID__', tr.dataset.itemId);
        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) throw data;
            grandTotal -= (data.deleted_total || parseFloat(tr.dataset.itemTotal) || 0);
            rowCount = data.item_count;
            tr.remove();
            renumberRows();
            document.getElementById('tableItemCount').textContent = rowCount;
            document.getElementById('grandTotal').textContent = indianFmt(grandTotal, 2);
            showStatus('Item removed', 'success');
            setTimeout(hideStatus, 2000);
        })
        .catch(() => {
            btn.disabled = false;
            showStatus('Error removing', 'danger');
            setTimeout(hideStatus, 2000);
        });
    }

    function renumberRows() {
        document.querySelectorAll('#itemsBody tr').forEach((tr, i) => {
            const idx = tr.querySelector('.idx');
            if (idx) idx.textContent = i + 1;
        });
    }

    eSaveBtn.addEventListener('click', function() {
        if (editSaving || !editingTr) 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 = updateBase.replace('__ID__', 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;
            applyItemToRow(editingTr, 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 applyItemToRow(tr, item) {
        const oldTotal = parseFloat(tr.dataset.itemTotal) || 0;
        grandTotal = grandTotal - oldTotal + item.total_rate;

        tr.dataset.itemDesc  = item.product_description;
        tr.dataset.itemCtn   = item.ctn_qty;
        tr.dataset.itemPcs   = item.pieces_per_ctn;
        tr.dataset.itemRate  = item.rate_in_yen;
        tr.dataset.itemTotal = item.total_rate;
        tr.dataset.itemImage = item.image_url || '';

        tr.querySelector('.cell-desc').textContent  = item.product_description;
        tr.querySelector('.cell-ctn').textContent   = indianFmt(item.ctn_qty, 2);
        tr.querySelector('.cell-pcs').textContent   = item.pieces_per_ctn;
        tr.querySelector('.cell-rate').textContent  = indianFmt(item.rate_in_yen, 4);
        tr.querySelector('.cell-conv').textContent  = indianFmt(item.converted_rate, 2);
        tr.querySelector('.cell-total').textContent = indianFmt(item.total_rate, 2);

        const imgCell = tr.querySelector('.cell-image');
        if (item.image_url) {
            imgCell.innerHTML = `<a href="${item.image_url}" target="_blank"><img src="${item.image_url}" alt="Item Image" class="img-thumbnail" style="max-height: 50px;"></a>`;
        } else {
            imgCell.innerHTML = '<span class="text-muted">—</span>';
        }

        document.getElementById('grandTotal').textContent = indianFmt(grandTotal, 2);
    }
})();
</script>
@endpush