@extends('layouts.app')

@section('page_title', 'New Manifest')
@section('page_subtitle', 'Scan AWB / order numbers, then click Manifest to mark all shipped')

@push('head')
<style type="text/tailwindcss">
    @layer components {
        .scan-count-pill {
            @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full font-semibold text-sm;
            background: var(--color-brand-soft);
            color: var(--color-brand-strong);
        }
        #manifest-btn:disabled { opacity: .4; cursor: not-allowed; }
        #scan-toast {
            @apply fixed bottom-8 right-8 px-4 py-3 rounded-xl font-medium text-sm z-50;
            box-shadow: 0 8px 24px rgba(16,24,38,.14);
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 260ms ease, transform 260ms ease;
            pointer-events: none;
            max-width: 340px;
        }
        #scan-toast.show { opacity: 1; transform: translateY(0); }
        #scan-toast.toast-success { background: var(--color-brand-soft); color: var(--color-brand-strong); border: 1px solid #b3d9c5; }
        #scan-toast.toast-error   { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid #f5b8b5; }
        .pulse-dot {
            @apply inline-block w-2 h-2 rounded-full;
            background: var(--color-brand);
            animation: pdot 1.4s ease-in-out infinite;
        }
        @keyframes pdot {
            0%,100% { opacity:1; transform:scale(1); }
            50%      { opacity:.4; transform:scale(1.5); }
        }
        kbd {
            @apply px-2 py-0.5 rounded text-xs font-mono border;
            background: var(--color-surface-alt);
            border-color: var(--color-border);
            color: var(--color-muted);
        }
    }
</style>
@endpush

@section('content')
<div class="grid" style="gap: 18px;">

    {{-- Scanner --}}
    <div class="card card-pad" id="scan-card">
        <div class="section-head" style="margin: 0 0 14px;">
            <div>
                <h2>Scan AWB / Order Number</h2>
                <p>Type or scan the barcode — press <kbd>Enter</kbd> or click <strong>Scan</strong> to add.</p>
            </div>
            <span class="scan-count-pill">
                <span class="pulse-dot"></span>
                <span id="scan-counter">0</span> scanned
            </span>
        </div>
        <div style="display:flex; gap:10px; align-items:flex-end;">
            <label style="flex:1; margin:0;">
                <span>AWB / Order Number</span>
                <input type="text" id="awb-input" placeholder="Scan or type order number…" autocomplete="off">
            </label>
            <button class="btn btn-primary" id="scan-btn" type="button" style="white-space:nowrap; align-self:flex-end;">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2"/><rect x="7" y="7" width="10" height="10" rx="1"/></svg>
                Scan
            </button>
        </div>
    </div>

    {{-- Scan results table --}}
    <div id="table-head" class="section-head" style="display:none;">
        <div>
            <h2>Scanned Orders</h2>
            <p>Review the list below before finalizing.</p>
        </div>
    </div>

    <div class="card table-wrap" id="scan-table-wrap" style="display:none;">
        <table id="scan-table">
            <thead>
            <tr>
                <th>#</th>
                <th>Order ID</th>
                <th>Customer Name</th>
                <th>AWB Number</th>
                <th>Courier Partner</th>
                <th>Packaging Status</th>
                <th>Scan Time</th>
            </tr>
            </thead>
            <tbody id="scan-tbody"></tbody>
        </table>
    </div>

    {{-- Finalize --}}
    <form method="POST" action="{{ route('manifest.store') }}" id="manifest-form">
        @csrf
        <input type="hidden" name="manifest_id" id="manifest-id-input" value="">
        <div style="display:flex; justify-content:flex-end; gap:10px;">
            <a class="btn" href="{{ route('manifest.index') }}">Cancel</a>
            <button class="btn btn-primary" id="manifest-btn" type="submit" disabled style="padding-left:20px; padding-right:20px;">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8h14M5 8a2 2 0 1 0 0-4h14a2 2 0 1 0 0 4M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8"/></svg>
                Manifest — Handover Orders
            </button>
        </div>
    </form>

</div>

{{-- Toast --}}
<div id="scan-toast"></div>
@endsection

@push('scripts')
<script>
(function () {
    const csrfToken   = document.querySelector('meta[name="csrf-token"]').content;
    const scanUrl     = "{{ route('manifest.scan') }}";

    const scanCard        = document.getElementById('scan-card');
    const awbInput        = document.getElementById('awb-input');
    const scanBtn         = document.getElementById('scan-btn');
    const scanTbody       = document.getElementById('scan-tbody');
    const scanCounter     = document.getElementById('scan-counter');
    const scanTableWrap   = document.getElementById('scan-table-wrap');
    const tableHead       = document.getElementById('table-head');
    const manifestForm    = document.getElementById('manifest-form');
    const manifestBtn     = document.getElementById('manifest-btn');
    const manifestIdInput = document.getElementById('manifest-id-input');
    const toast           = document.getElementById('scan-toast');

    let manifestId  = null;
    let scanCount   = 0;
    const scannedAwbs = new Set();

    // Auto-focus input on page load
    awbInput.focus();

    awbInput.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); doScan(); } });
    scanBtn.addEventListener('click', doScan);

    // Finalize Handover with custom confirmation modal
    manifestForm.addEventListener('submit', function (e) {
        e.preventDefault();
        if (!manifestIdInput.value || scanCount === 0) {
            showToast('Please scan at least one order before finalizing.', 'error');
            return;
        }

        const countText = scanCount === 1 ? '1 scanned order' : `${scanCount} scanned orders`;
        window.customConfirm({
            title: 'Finalize Manifest & Handover',
            message: `Are you sure you want to finalize this manifest and mark ${countText} as manifested?`,
            confirmText: 'Yes, Finalize & Handover',
            cancelText: 'Cancel'
        }, function () {
            manifestForm.submit();
        });
    });

    function doScan() {
        const awb = awbInput.value.trim();
        if (!awb) { showToast('Please enter an AWB / order number.', 'error'); return; }
        if (scannedAwbs.has(awb)) { showToast(`Order "${awb}" has already been scanned.`, 'error'); awbInput.select(); return; }

        scanBtn.disabled = true;
        scanBtn.textContent = 'Scanning…';

        fetch(scanUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ awb, manifest_id: manifestId }),
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                manifestId = data.manifest_id;
                manifestIdInput.value = manifestId;
                appendRow(data.item);
                scannedAwbs.add(awb);
                showToast(`✓ Order #${data.item.order_number} added.`, 'success');
                awbInput.value = '';
            } else {
                showToast(data.message || 'Unknown error.', 'error');
            }
        })
        .catch(() => showToast('Network error — please try again.', 'error'))
        .finally(() => {
            scanBtn.disabled = false;
            scanBtn.innerHTML = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2"/><rect x="7" y="7" width="10" height="10" rx="1"/></svg> Scan`;
            awbInput.focus();
        });
    }

    const statusBadge = {
        booked:     'badge-warning',
        manifested: 'badge-success',
    };

    function appendRow(item) {
        scanCount++;
        scanCounter.textContent = scanCount;
        scanTableWrap.style.display = '';
        tableHead.style.display = '';
        manifestBtn.disabled = false;

        let displayStatus = item.shipment_status.replace(/_/g, ' ');
        if (item.shipment_status === 'booked') {
            displayStatus = 'Pending';
        }

        const cls = statusBadge[item.shipment_status] ?? 'badge-warning';
        const tr = document.createElement('tr');
        tr.style.cssText = 'opacity:0; transition: opacity 220ms ease;';
        tr.innerHTML = `
            <td>${scanCount}</td>
            <td><strong>${esc(item.order_number)}</strong></td>
            <td>${esc(item.customer_name)}</td>
            <td><code style="font-family:'IBM Plex Mono',monospace;font-size:.85em;background:var(--color-surface-alt);padding:2px 8px;border-radius:6px;">${esc(item.awb_number)}</code></td>
            <td>${esc(item.courier_name)}</td>
            <td><span class="badge ${cls}">${esc(displayStatus)}</span></td>
            <td class="muted" style="font-size:.85rem;">${esc(item.scanned_at)}</td>
        `;
        scanTbody.prepend(tr);
        requestAnimationFrame(() => tr.style.opacity = '1');
    }

    function showToast(msg, type) {
        toast.textContent = msg;
        toast.className = `show toast-${type}`;
        clearTimeout(toast._t);
        toast._t = setTimeout(() => { toast.className = ''; }, 3500);
    }

    function esc(s) {
        return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
})();
</script>
@endpush