@extends('layouts.layout-horizontal')

@section('title', 'New OTC Sale')

@section('css')
<style>
    #itemsTable tbody tr:nth-child(even) { background: #f8f9fa; }
    #itemsTable tbody tr:nth-child(odd) { background: #fff; }
    #itemsTable thead th { position: sticky; top: 0; z-index: 2; background: #eef1f5; border-bottom: 2px solid #dee2e6; font-size: .825rem; text-transform: uppercase; letter-spacing: .3px; color: #6c757d; padding: 6px 4px; white-space: nowrap; }
    #itemsTable td { padding: 3px 4px; vertical-align: middle; font-size: .925rem; border: none; border-bottom: 1px solid #f0f0f0; }
    #itemsTable .row-num { color: #adb5bd; font-size: .825rem; text-align: center; width: 24px; user-select: none; }
    #itemsTable .form-control-sm { padding: 2px 4px; font-size: .925rem; height: 30px; border: 1px solid transparent; background: transparent; border-radius: 3px; transition: border-color .15s, background .15s; }
    #itemsTable .form-control-sm:focus { border-color: #86b7fe; background: #fff; box-shadow: 0 0 0 2px rgba(13,110,253,.12); }
    #itemsTable .form-control-sm:hover:not(:focus) { background: #f0f4f8; }
    #itemsTable .qty, #itemsTable .rate, #itemsTable .line-amt, #itemsTable .line-tot { font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; }
    #itemsTable .line-amt { color: #495057; }
    #itemsTable .line-tot { color: #0d6efd; font-weight: 600; }
    #itemsTable tbody tr.row-empty td:not(:nth-child(2)) { opacity: .35; transition: opacity .2s; }
    #itemsTable tbody tr.row-empty:hover td, #itemsTable tbody tr.row-empty:focus-within td { opacity: 1; }
    #itemsTable tbody tr.row-filled td { opacity: 1; }
    #itemsTable tbody tr:focus-within { background: #e8f0fe !important; }
    #itemsTable .remove { opacity: 0; transition: opacity .15s; }
    #itemsTable tbody tr:hover .remove, #itemsTable tbody tr:focus-within .remove { opacity: 1; }
    #itemsTable .ts-wrapper { font-size: .875rem; }
    #itemsTable .ts-wrapper .ts-control { padding: 0 6px !important; min-height: 0 !important; height: 36px; line-height: 36px; border: 1px solid #dee2e6; background: #fff; box-shadow: none; border-radius: 3px; display: flex; align-items: center; }
    #itemsTable .ts-wrapper .ts-control > input { padding: 0 !important; margin: 0 !important; height: 34px; line-height: 34px; font-size: .875rem; }
    #itemsTable .ts-wrapper .ts-control .item { padding: 0 4px; font-size: .875rem; line-height: 34px; }
    #itemsTable .ts-wrapper.focus .ts-control { border-color: #86b7fe; box-shadow: 0 0 0 2px rgba(13,110,253,.12); }
    #itemsTable .ts-wrapper .ts-dropdown { font-size: .875rem; }
    #itemsTable .ts-wrapper .ts-dropdown .option { padding: 3px 6px; }
    .items-scroll { max-height: 65vh; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 6px; }
</style>
@endsection

@section('content')
<div class="card">
    <form method="POST" action="{{ route('otc-sales.store') }}" id="saleForm">
        @csrf

        <div class="card-header" style="padding:10px 16px;background:#f8f9fb;border-bottom:1px solid #e9ecef;">
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <a href="{{ route('otc-sales.index') }}" class="text-muted" style="font-size:.85rem"><i class="ph-duotone ph-arrow-left"></i></a>
                <span style="font-weight:700;font-size:.95rem;color:#1e293b">New OTC Sale</span>

                <div style="width:1px;height:24px;background:#dee2e6"></div>

                <div class="d-flex align-items-center gap-1">
                    <label style="font-size:.825rem;color:#6c757d">Date</label>
                    <input type="date" name="invoice_date" class="form-control" value="{{ old('invoice_date', now()->toDateString()) }}" required style="width:160px;height:40px;font-size:.975rem">
                </div>

                <div class="ms-auto d-flex align-items-center gap-2">
                    <span style="font-size:.825rem;color:#6c757d;text-transform:uppercase;letter-spacing:.3px">Bill #</span>
                    <span style="font-weight:700;font-size:1rem;color:#1e293b">{{ $nextBillNo }}</span>
                </div>
            </div>
        </div>

        <div class="card-body" style="padding:10px 16px;">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span style="font-weight:600;font-size:.85rem;color:#334155">Line Items</span>
                <div class="d-flex gap-2">
                    <a class="btn btn-sm btn-outline-success" href="{{ route('products.create') }}?from_dropdown=1" target="_blank" style="font-size:.75rem;padding:3px 10px"><i class="ph-duotone ph-plus me-1"></i>New Product</a>
                    <button class="btn btn-sm btn-primary" type="button" id="addRowBtn" title="Alt+A" style="font-size:.75rem;padding:3px 10px">+ Row <kbd class="ms-1 bg-light text-dark border" style="font-size:.6rem">Alt+A</kbd></button>
                </div>
            </div>

            <div class="items-scroll">
                <table class="table table-sm align-middle mb-0" id="itemsTable">
                    <thead>
                        <tr>
                            <th style="width:24px">#</th>
                            <th style="min-width:200px">Product</th>
                            {{-- HSN hidden in OTC (cash mode) --}}
                            <th style="width:75px">Unit</th>
                            <th style="width:145px" class="text-center">Qty</th>
                            <th style="width:165px" class="text-center">Rate</th>
                            <th style="width:190px" class="text-center">Amount</th>
                            <th style="width:28px"></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </form>
</div>

{{-- Sticky bottom bar --}}
<div style="position:fixed;bottom:0;left:0;right:0;z-index:1050;background:linear-gradient(180deg,#1a2332 0%,#0f172a 100%);border-top:3px solid #3b82f6;padding:0;box-shadow:0 -8px 30px rgba(0,0,0,.35);">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2" style="max-width:1400px;margin:0 auto;padding:10px 20px;">
        <div class="d-flex align-items-center gap-4 flex-wrap">
            <div class="d-flex flex-column align-items-end"><span style="color:#64748b;font-size:.6rem;text-transform:uppercase;letter-spacing:.5px">Amount</span><input name="amount_total" id="amount_total" form="saleForm" readonly style="background:transparent;border:none;color:#cbd5e1;font-size:.95rem;width:100px;text-align:right;font-weight:500" /></div>
            <div style="width:1px;height:32px;background:#2d3a4d"></div>
            <div class="d-flex flex-column align-items-end"><span style="color:#64748b;font-size:.6rem;text-transform:uppercase;letter-spacing:.5px">Roundoff</span><input name="roundoff" id="roundoff" value="0" form="saleForm" style="background:#1e293b;border:1px solid #334155;border-radius:4px;color:#e2e8f0;font-size:.95rem;width:80px;text-align:right;padding:2px 6px;height:30px" /></div>
            <div style="width:2px;height:36px;background:#3b82f6;border-radius:1px"></div>
            <div class="d-flex flex-column align-items-end"><span style="color:#3b82f6;font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;font-weight:700">Grand Total</span><input name="grand_total" id="grand_total" form="saleForm" readonly style="background:transparent;border:none;color:#f8fafc;font-size:1.5rem;width:150px;text-align:right;font-weight:800;letter-spacing:-.5px" /></div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <button class="btn btn-success" id="btnSave" form="saleForm" style="padding:8px 20px;font-weight:600;font-size:.85rem">Save OTC <kbd class="ms-1 bg-success-subtle text-success-emphasis border-0" style="font-size:.65rem;opacity:.7">Alt+S</kbd></button>
        </div>
    </div>
</div>
<div style="height:80px"></div>

@endsection

@push('scripts')
<script>
(function () {
    const itemsTbody = document.querySelector('#itemsTable tbody');
    const amtTotalEl = document.getElementById('amount_total');
    const roundoffEl = document.getElementById('roundoff');
    const grandEl = document.getElementById('grand_total');

    const productOptions = @json($products).map(p => ({
        value: String(p.id), text: (p.product_id || '') + ' — ' + p.name,
        name: p.name, hsn: p.hsn || '', stock: String(p.stock ?? '0'), pid: p.product_id || ''
    }));

    const rowTomSelects = new Map(); let rowCounter = 0;

    function addEmptyRow() {
        const idx = rowCounter++, rowNum = itemsTbody.querySelectorAll('tr').length + 1;
        const row = document.createElement('tr'); row.dataset.rowIdx = idx; row.className = 'row-empty';
        row.innerHTML = `
            <td class="row-num">${rowNum}</td>
            <td><select class="row-product-select" id="prod_select_${idx}"><option value=""></option></select></td>
            <input type="hidden" name="items[${idx}][hsn]" value="">
            <td><input class="form-control form-control-sm" name="items[${idx}][unit]" value=""></td>
            <td><input type="number" step="0.001" class="form-control form-control-sm text-end qty" name="items[${idx}][qty]" value="" data-stock="0"></td>
            <td><input type="number" step="0.01" class="form-control form-control-sm text-end rate" name="items[${idx}][rate]" value=""></td>
            <td><input type="number" step="0.01" class="form-control form-control-sm text-end line-amt" name="items[${idx}][line_amount]" value="">
                <input type="hidden" name="items[${idx}][product_id]" value="" class="row-product-id">
                <input type="hidden" name="items[${idx}][line_total]" value="0">
            </td>
            <td><button type="button" class="btn btn-sm btn-outline-danger remove">×</button></td>`;
        itemsTbody.appendChild(row); initRowTomSelect(row, idx); return row;
    }

    const addProductUrl = `{{ route('products.create') }}?from_dropdown=1`;
    function initRowTomSelect(row, idx) {
        const ts = new TomSelect(row.querySelector(`#prod_select_${idx}`), {
            dropdownParent: 'body',
            maxOptions: 50, allowEmptyOption: true, closeAfterSelect: true, placeholder: 'Search name, ID or HSN...',
            options: JSON.parse(JSON.stringify(productOptions)), items: [], highlight: true,
            searchField: ['text', 'hsn', 'pid', 'name'],
            onDropdownOpen: function() { this.setActiveOption(null); this.control_input.value = ''; },
            render: { option: (data, escape) => { const hsn = data.hsn ? `<span style="color:#999;font-size:.7rem"> HSN:${escape(data.hsn)}</span>` : ''; return `<div>${escape(data.text)}${hsn}</div>`; }, no_results: () => `<div class="no-results" style="padding:6px 10px;font-size:.8rem">No match — <a href="${addProductUrl}" target="_blank" style="color:#0d6efd">+ Add new product</a></div>` },
            onItemAdd: function() { this.control_input.value = ''; }
        });
        ts.on('change', async function(value) {
            const pid = row.querySelector('.row-product-id');
            if (!value) { pid.value = ''; row.classList.remove('row-filled'); row.classList.add('row-empty'); ['[hsn]','[unit]'].forEach(s => row.querySelector(`input[name$="${s}"]`).value = ''); row.querySelector('.qty').value = ''; row.querySelector('.rate').value = ''; row.querySelector('.line-amt').value = ''; recalcRow(row); return; }
            row.classList.remove('row-empty'); row.classList.add('row-filled'); maybeAutoAddRows(); pid.value = value;
            try {
                const res = await fetch(`{{ url('api/products') }}/${value}/metrics?company_id={{ currentCompanyId() }}`);
                const d = await res.json();
                row.querySelector('input[name$="[hsn]"]').value = d.hsn || '';
                row.querySelector('input[name$="[unit]"]').value = d.unit || '';
                row.querySelector('.qty').dataset.stock = d.stock || '0';
                if (d.last && d.last.length > 0) { const r = parseFloat(d.last[0].rate) || 0; if (r > 0) row.querySelector('.rate').value = r.toFixed(2); }
                if (!row.querySelector('.qty').value) row.querySelector('.qty').value = 1;
                recalcRow(row); row.querySelector('.qty').focus(); row.querySelector('.qty').select();
            } catch (err) { console.error(err); }
        });
        rowTomSelects.set(idx, ts);
    }

    function recalcRow(tr) {
        const qty = parseFloat(tr.querySelector('.qty')?.value) || 0, rate = parseFloat(tr.querySelector('.rate')?.value) || 0;
        const amount = +(qty * rate).toFixed(2);
        tr.querySelector('.line-amt').value = amount ? amount.toFixed(2) : '';
        tr.querySelector('input[name$="[line_total]"]').value = amount.toFixed(2);
        recalcTotals();
    }
    function reverseFromAmount(tr) {
        const qty = parseFloat(tr.querySelector('.qty')?.value) || 0, amount = parseFloat(tr.querySelector('.line-amt')?.value) || 0;
        if (qty > 0) tr.querySelector('.rate').value = +(amount / qty).toFixed(2);
        tr.querySelector('input[name$="[line_total]"]').value = amount.toFixed(2);
        recalcTotals();
    }
    function reindexRows() { itemsTbody.querySelectorAll('tr').forEach((row, i) => { const n = row.querySelector('.row-num'); if (n) n.textContent = i + 1; row.querySelectorAll('input[name]').forEach(inp => { inp.name = inp.name.replace(/items\[\d+\]/, `items[${i}]`); }); }); }

    document.getElementById('addRowBtn').addEventListener('click', function() { const row = addEmptyRow(); const ts = rowTomSelects.get(parseInt(row.dataset.rowIdx)); if (ts) setTimeout(() => ts.focus(), 50); });
    document.addEventListener('keydown', function(e) { if (!e.altKey) return; if (e.key === 'a') { e.preventDefault(); document.getElementById('addRowBtn').click(); } if (e.key === 's') { e.preventDefault(); document.getElementById('btnSave').click(); } });

    for (let i = 0; i < 10; i++) addEmptyRow();
    function maybeAutoAddRows() { if (itemsTbody.querySelectorAll('tr.row-empty').length <= 1) { for (let i = 0; i < 5; i++) addEmptyRow(); } }

    itemsTbody.addEventListener('input', function (e) { const tr = e.target.closest('tr'); if (!tr) return; const q = tr.querySelector('.qty'); if (q && e.target === q) { const s = parseFloat(q.dataset.stock) || 0; if ((parseFloat(q.value) || 0) > s) q.classList.add('bg-danger-subtle'); else q.classList.remove('bg-danger-subtle'); } if (e.target.classList.contains('line-amt')) reverseFromAmount(tr); else recalcRow(tr); });
    itemsTbody.addEventListener('click', function (e) { if (e.target.classList.contains('remove')) { const row = e.target.closest('tr'), idx = parseInt(row.dataset.rowIdx), ts = rowTomSelects.get(idx); if (ts) { ts.destroy(); rowTomSelects.delete(idx); } row.remove(); reindexRows(); recalcTotals(); } });
    document.getElementById('saleForm').addEventListener('submit', function() { itemsTbody.querySelectorAll('tr').forEach(row => { const p = row.querySelector('.row-product-id'); if (!p || !p.value) row.querySelectorAll('input[name]').forEach(inp => inp.removeAttribute('name')); }); reindexRows(); });

    roundoffEl.addEventListener('input', () => { roundoffEl.dataset.manual = '1'; recalcTotals(); });
    function recalcTotals() { let amt = 0; itemsTbody.querySelectorAll('tr').forEach(tr => { amt += parseFloat(tr.querySelector('.line-amt')?.value) || 0; }); amt = +amt.toFixed(2); amtTotalEl.value = amt.toFixed(2); if (!roundoffEl.dataset.manual) { roundoffEl.value = (Math.round(amt) - amt).toFixed(2); } const grand = amt + (parseFloat(roundoffEl.value) || 0); grandEl.value = grand.toFixed(2); }

    const productChannel = new BroadcastChannel('product_created');
    productChannel.onmessage = function (event) { const product = event.data; if (!product || !product.id) return; const newOpt = { value: String(product.id), text: (product.product_id || '') + ' — ' + product.name, name: product.name, hsn: product.hsn || '', stock: '0', pid: product.product_id || '' }; productOptions.push(newOpt); rowTomSelects.forEach(ts => { if (!ts.options[String(product.id)]) ts.addOption(newOpt); }); };
})();
</script>
@endpush