@extends('layouts.layout-horizontal')

@section('title', 'Exhibition Details')

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

        <div class="card-body">
            {{-- Editable Header --}}
            <div class="row g-2 mb-3">
                <div class="col-md-4">
                    <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" value="{{ $exhibition->exhibition_name }}">
                </div>
                <div class="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" value="{{ $exhibition->exhibition_date->format('Y-m-d') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label small mb-1">Exhibitor</label>
                    <input type="text" id="h_exhibitor" class="form-control form-control-sm" value="{{ $exhibition->exhibitor_name }}">
                </div>
                <div class="col-md-3">
                    <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" value="{{ $exhibition->conversion_rate }}" inputmode="decimal">
                </div>
                <div class="col-md-6">
                    <label class="form-label small mb-1">Location</label>
                    <input type="text" id="h_location" class="form-control form-control-sm" value="{{ $exhibition->location }}">
                </div>
                <div class="col-md-3">
                    <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-md-3">
                    <label class="form-label small mb-1 d-block">Current Card</label>
                    <div class="border rounded p-2 bg-light">
                        <a id="dealerCardPreviewLink" href="{{ $exhibition->dealer_card_path ? asset('storage/' . $exhibition->dealer_card_path) : '#' }}" target="_blank" class="{{ $exhibition->dealer_card_path ? '' : 'd-none' }}">
                            <img id="dealerCardPreviewImage" src="{{ $exhibition->dealer_card_path ? asset('storage/' . $exhibition->dealer_card_path) : '' }}" alt="Dealer card" class="img-thumbnail" style="max-height: 72px;">
                        </a>
                        <span id="dealerCardEmpty" class="text-muted small {{ $exhibition->dealer_card_path ? 'd-none' : '' }}">No dealer card uploaded.</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label small mb-1">Notes</label>
                    <input type="text" id="h_notes" class="form-control form-control-sm" value="{{ $exhibition->notes }}">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="button" class="btn btn-success btn-sm w-100" id="saveHeaderBtn">
                        <i class="ph-duotone ph-check me-1"></i>Save Header
                    </button>
                </div>
            </div>
            <div class="text-muted small mb-3">
                Total Items: <span class="fw-bold" id="itemCount">{{ $exhibition->items->count() }}</span>
            </div>

            <hr>

            {{-- Add Item Form --}}
            <div class="mb-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="mb-0">Add New Item</h6>
                    <span id="saveStatus" class="small d-none"></span>
                </div>
                <div class="row g-2 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label">Product Description <span class="text-danger">*</span></label>
                        <input type="text" id="ai_description" class="form-control auto-save-field" placeholder="Enter product description">
                    </div>
                    <div class="col-md-1">
                        <label class="form-label">CTN Qty</label>
                        <input type="number" step="0.01" id="ai_ctn_qty" class="form-control auto-save-field" value="">
                    </div>
                    <div class="col-md-1">
                        <label class="form-label">Pcs/CTN</label>
                        <input type="number" step="1" id="ai_pieces" class="form-control auto-save-field" value="">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Rate in Yen (¥)</label>
                        <input type="number" step="0.0001" id="ai_rate" class="form-control auto-save-field" value="">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Image</label>
                        <input type="file" id="ai_image" class="form-control" accept="image/*" capture="environment">
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-success w-100" id="manualSaveBtn" title="Save now">
                            <i class="ph-duotone ph-plus"></i>
                        </button>
                    </div>
                </div>
            </div>

            <hr>

            {{-- Items Table --}}
            <h6 class="mb-3">Exhibition Items (<span id="tableItemCount">{{ $exhibition->items->count() }}</span>)</h6>

            <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:60px" 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>
                                    <form action="{{ route('trade-exhibitions.delete-item', [$exhibition->id, $item->id]) }}"
                                        method="POST" class="d-inline" onsubmit="return confirm('Remove this item?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-outline-danger" title="Remove">
                                            <i class="ph-duotone ph-trash"></i>
                                        </button>
                                    </form>
                                </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-4" id="emptyState">
                    <p>No items added to 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 updateUrl  = @json(route('trade-exhibitions.update', $exhibition->id));
    const deleteBase = @json(route('trade-exhibitions.delete-item', [$exhibition->id, '__ID__']));
    const csrfToken  = document.querySelector('meta[name="csrf-token"]').content;
    let convRate     = {{ $exhibition->conversion_rate }};

    // Form fields
    const fDesc   = 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');

    let saving = false;
    let rowCount = {{ $exhibition->items->count() }};
    let grandTotal = {{ $grandTotal }};

    // Indian number format
    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');
    }

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

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

        const formData = new FormData();
        formData.append('product_description', fDesc.value.trim());
        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',
            },
            body: formData,
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                appendRow(data.item, data.item_count);
                clearForm();
                showStatus('Saved', 'success');
                setTimeout(hideStatus, 2000);
            }
        })
        .catch(() => showStatus('Error saving', 'danger'))
        .finally(() => { saving = false; });
    }

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

        // Remove empty state if exists
        const empty = document.getElementById('emptyState');
        if (empty) empty.remove();

        const tbody = document.getElementById('itemsBody');
        const tr = document.createElement('tr');
        tr.style.animation = 'fadeIn 0.3s ease';
        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>';

        const deleteUrl = deleteBase.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>
                <form action="${deleteUrl}" method="POST" class="d-inline" onsubmit="return confirm('Remove this item?')">
                    <input type="hidden" name="_token" value="${csrfToken}">
                    <input type="hidden" name="_method" value="DELETE">
                    <button class="btn btn-sm btn-outline-danger" title="Remove">
                        <i class="ph-duotone ph-trash"></i>
                    </button>
                </form>
            </td>
        `;
        tbody.appendChild(tr);

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

    function clearForm() {
        fDesc.value = '';
        fCtn.value = '';
        fPcs.value = '';
        fRate.value = '';
        fImage.value = '';
        fDesc.focus();
    }

    // Save only on button click
    saveBtn.addEventListener('click', function() {
        if (isReady()) {
            saveItem();
        } else {
            showStatus('Fill all required fields', 'danger');
            setTimeout(hideStatus, 2000);
        }
    });

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

    // ───────── Header Save ─────────
    const hName     = document.getElementById('h_name');
    const hDate     = document.getElementById('h_date');
    const hExhibitor= document.getElementById('h_exhibitor');
    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 saveHdrBtn = document.getElementById('saveHeaderBtn');
    const hStatus   = document.getElementById('headerStatus');
    const dealerCardPreviewLink = document.getElementById('dealerCardPreviewLink');
    const dealerCardPreviewImage = document.getElementById('dealerCardPreviewImage');
    const dealerCardEmpty = document.getElementById('dealerCardEmpty');

    function showHdrStatus(text, type) {
        hStatus.textContent = text;
        hStatus.className = 'small text-' + type;
        hStatus.classList.remove('d-none');
    }
    function hideHdrStatus() { hStatus.classList.add('d-none'); }
    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');
    }

    hDealerCard.addEventListener('change', function() {
        if (hDealerCard.files[0]) {
            setDealerCardPreview(URL.createObjectURL(hDealerCard.files[0]));
        }
    });

    saveHdrBtn.addEventListener('click', function() {
        if (!hName.value.trim() || !hDate.value) {
            showHdrStatus('Name and Date are required', 'danger');
            setTimeout(hideHdrStatus, 2500);
            return;
        }
        const newConv = parseFloat(hConvRate.value) || 0;
        const body = new FormData();
        body.append('exhibition_name', hName.value.trim());
        body.append('exhibitor_name', hExhibitor.value.trim());
        body.append('exhibition_date', hDate.value);
        body.append('conversion_rate', newConv || '');
        body.append('location', hLocation.value.trim());
        body.append('notes', hNotes.value.trim());
        body.append('_method', 'PUT');
        if (hDealerCard.files[0]) {
            body.append('dealer_card', hDealerCard.files[0]);
        }

        saveHdrBtn.disabled = true;
        showHdrStatus('Saving...', 'warning');

        fetch(updateUrl, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
            body,
        })
        .then(r => r.ok ? r.json() : r.json().then(j => { throw j; }))
        .then(data => {
            if (!data.success) throw data;
            if (data.dealer_card_url) {
                setDealerCardPreview(data.dealer_card_url);
            }
            hDealerCard.value = '';
            // If conversion rate changed, recalculate all rows' converted_rate, total, and grand total.
            if (newConv !== convRate) {
                convRate = newConv;
                grandTotal = 0;
                document.querySelectorAll('#itemsBody tr').forEach(tr => {
                    const rate = parseFloat(tr.dataset.itemRate) || 0;
                    const ctn  = parseFloat(tr.dataset.itemCtn) || 0;
                    const pcs  = parseInt(tr.dataset.itemPcs)  || 0;
                    const newConverted = rate * convRate;
                    const newTotal = ctn * pcs * newConverted;
                    tr.dataset.itemTotal = newTotal;
                    tr.querySelector('.cell-conv').textContent  = indianFmt(newConverted, 2);
                    tr.querySelector('.cell-total').textContent = indianFmt(newTotal, 2);
                    grandTotal += newTotal;
                });
                document.getElementById('grandTotal').textContent = indianFmt(grandTotal, 2);
            }
            showHdrStatus('Header saved', 'success');
            setTimeout(hideHdrStatus, 2000);
        })
        .catch(err => {
            const msg = (err && err.message) || (err && err.errors && Object.values(err.errors).flat().join(' ')) || 'Error saving header';
            showHdrStatus(msg, 'danger');
            setTimeout(hideHdrStatus, 3000);
        })
        .finally(() => {
            saveHdrBtn.disabled = false;
        });
    });

    // ───────── Edit Item Modal ─────────
    const updateBase = @json(route('trade-exhibitions.update-item', [$exhibition->id, '__ID__']));

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

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

    // Delegate edit button clicks (works for existing & newly added rows)
    document.getElementById('itemsBody').addEventListener('click', function(e) {
        const btn = e.target.closest('.edit-item-btn');
        if (!btn) return;
        const tr = btn.closest('tr');
        if (tr) openEditModal(tr);
    });

    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>
<style>
@keyframes fadeIn { from { opacity: 0; background: #d1e7dd; } to { opacity: 1; background: transparent; } }
</style>
@endpush