@extends('layouts.dashboard')

@section('content')
<div class="max-w-7xl mx-auto p-6 space-y-6">

    @if(session('success'))
        <div class="rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-5 py-4">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="rounded-2xl bg-red-50 border border-red-200 text-red-800 px-5 py-4">
            {{ session('error') }}
        </div>
    @endif

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black">My Inventory Check</h1>
            <p class="text-slate-500">
                Check your van stock with photos, SKU, barcode, and quantity.
            </p>
        </div>

        <div class="flex flex-wrap gap-2">
            <form method="POST" action="{{ route('salesman.inventory-check.start') }}">
                @csrf
                <button class="btn btn-primary">🚀 Start New Check</button>
            </form>

            @if($openCheck)
                <form method="POST" action="{{ route('salesman.inventory-check.finish') }}">
                    @csrf
                    <button class="btn btn-success">✅ Finish Check</button>
                </form>
            @endif
        </div>
    </div>

    @if(!$latestImport)
        <div class="rounded-3xl bg-white border border-slate-200 p-12 text-center">
            <div class="text-6xl mb-4">🚚</div>
            <h2 class="text-2xl font-black">No van stock uploaded yet</h2>
            <p class="text-slate-500 mt-2">Ask admin to upload your inventory file.</p>
        </div>
    @else

        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="rounded-3xl bg-white border border-slate-200 p-5">
                <div class="text-xs text-slate-500">Current File</div>
                <div class="font-black truncate">{{ $latestImport->original_file }}</div>
            </div>

            <div class="rounded-3xl bg-white border border-slate-200 p-5">
                <div class="text-xs text-slate-500">Products</div>
                <div class="text-2xl font-black text-indigo-600">{{ number_format($items->count()) }}</div>
            </div>

            <div class="rounded-3xl bg-white border border-slate-200 p-5">
                <div class="text-xs text-slate-500">Total Qty</div>
                <div class="text-2xl font-black text-emerald-600">{{ number_format($items->sum('qty')) }}</div>
            </div>

            <div class="rounded-3xl bg-white border border-slate-200 p-5">
                <div class="text-xs text-slate-500">Check Status</div>
                <div class="text-2xl font-black {{ $openCheck ? 'text-emerald-600' : 'text-orange-600' }}">
                    {{ $openCheck ? 'Open' : 'Not Started' }}
                </div>
            </div>
        </div>

        <div class="rounded-3xl bg-white border border-slate-200 p-4 space-y-3">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                <input id="inventorySearch"
                       type="text"
                       placeholder="Search SKU, barcode, product..."
                       class="input input-bordered bg-white text-black md:col-span-3">

                <button type="button"
                        onclick="openScanner()"
                        class="btn btn-primary w-full">
                    📷 Scan Barcode
                </button>

                <button type="button"
                        onclick="startWarehouseMode()"
                        class="btn btn-success w-full md:col-span-4">
                    ⚡ Warehouse Scan Mode
                </button>
            </div>

            <div id="scanResult" class="hidden rounded-3xl bg-indigo-50 border border-indigo-100 text-indigo-900 p-4">
                <div class="text-xs font-black uppercase opacity-60">Scanned Product</div>
                <div id="scanProductName" class="text-lg font-black mt-1"></div>
                <div id="scanProductMeta" class="text-sm mt-1"></div>

                <div class="grid grid-cols-3 gap-2 mt-4">
                    <button type="button" id="scanCorrectBtn" class="btn btn-success btn-sm">✅ Correct</button>
                    <button type="button" id="scanWrongBtn" class="btn btn-warning btn-sm">⚠ Wrong</button>
                    <button type="button" id="scanMissingBtn" class="btn btn-error btn-sm">❌ Missing</button>
                </div>
            </div>

            <div id="warehouseModePanel" class="hidden rounded-3xl bg-emerald-50 border border-emerald-100 text-emerald-900 p-4">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <div class="text-xs font-black uppercase opacity-60">Warehouse Mode Active</div>
                        <div class="font-black text-lg">Scan items continuously</div>
                        <div id="warehouseLastScan" class="text-sm mt-1">No scan yet.</div>
                    </div>

                    <button type="button" onclick="stopWarehouseMode()" class="btn btn-error btn-sm">
                        Stop
                    </button>
                </div>
            </div>
        </div>

        <dialog id="scannerModal" class="modal">
            <div class="modal-box max-w-lg rounded-3xl bg-white text-slate-900">
                <form method="dialog">
                    <button onclick="stopScanner()" class="btn btn-sm btn-circle absolute right-4 top-4">✕</button>
                </form>

                <h3 class="font-black text-2xl mb-2">📷 Scan Barcode</h3>
                <p class="text-sm text-slate-500 mb-4">Point the mobile camera at the product barcode.</p>

                <div id="barcode-reader" class="rounded-3xl overflow-hidden border border-slate-200 bg-slate-100"></div>

                <button type="button" onclick="stopScanner(); scannerModal.close();" class="btn btn-error w-full mt-4">
                    Stop Scanner
                </button>
            </div>
        </dialog>

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
            @foreach($items as $item)
                @php
                    $check = $checked[$item->id] ?? null;
                    $status = $check->status ?? 'unchecked';
                @endphp

                <div class="inventory-card rounded-3xl bg-white border border-slate-200 shadow-sm overflow-hidden"
                     data-id="{{ $item->id }}"
                     data-sku="{{ $item->sku }}"
                     data-barcode="{{ $item->barcode }}"
                     data-name="{{ e($item->display_name) }}"
                     data-qty="{{ $item->qty }}"
                     data-search="{{ strtolower(($item->sku ?? '') . ' ' . ($item->barcode ?? '') . ' ' . ($item->display_name ?? '') . ' ' . ($item->category ?? '')) }}">

                    <div class="h-44 bg-slate-50 flex items-center justify-center">
                        @if($item->image)
                            <img src="{{ asset('storage/'.$item->image) }}" class="max-h-40 max-w-full object-contain p-3">
                        @else
                            <div class="text-center text-slate-400">
                                <div class="text-5xl">🖼</div>
                                <div class="text-xs font-bold mt-1">No Image</div>
                            </div>
                        @endif
                    </div>

                    <div class="p-5 space-y-3">
                        <div class="flex items-start justify-between gap-2">
                            <h2 class="font-black leading-tight">{{ $item->display_name }}</h2>

                            <span id="status-badge-{{ $item->id }}"
                                  class="badge
                                  {{ $status === 'correct' ? 'badge-success' : '' }}
                                  {{ $status === 'wrong' ? 'badge-warning' : '' }}
                                  {{ $status === 'missing' ? 'badge-error' : '' }}
                                  {{ $status === 'unchecked' ? 'badge-ghost' : '' }}">
                                {{ $status }}
                            </span>
                        </div>

                        <div class="text-sm text-slate-600 space-y-1">
                            <div><b>SKU:</b> {{ $item->sku ?: '-' }}</div>
                            <div><b>Barcode:</b> {{ $item->barcode ?: '-' }}</div>
                            <div><b>System Qty:</b> {{ number_format($item->qty) }}</div>
                        </div>

                        <div class="grid grid-cols-2 gap-2">
                            <input id="counted-{{ $item->id }}"
                                   type="number"
                                   step="1"
                                   value="{{ $check->counted_qty ?? $item->qty }}"
                                   class="input input-bordered bg-white text-black"
                                   placeholder="Counted Qty">

                            <input id="note-{{ $item->id }}"
                                   type="text"
                                   value="{{ $check->note ?? '' }}"
                                   class="input input-bordered bg-white text-black"
                                   placeholder="Note">
                        </div>

                        <div class="grid grid-cols-3 gap-2">
                            <button type="button" class="btn btn-success btn-sm" onclick="markItem({{ $item->id }}, 'correct')">
                                ✅ Correct
                            </button>

                            <button type="button" class="btn btn-warning btn-sm" onclick="markItem({{ $item->id }}, 'wrong')">
                                ⚠ Wrong
                            </button>

                            <button type="button" class="btn btn-error btn-sm" onclick="markItem({{ $item->id }}, 'missing')">
                                ❌ Missing
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

    @endif

</div>

<script src="https://unpkg.com/html5-qrcode"></script>

<script>
let html5QrCode = null;
let scannerRunning = false;
let warehouseMode = false;
let audioCtx = null;

function scanFeedback(type = 'success') {
    try {
        if (!audioCtx) {
            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }

        const oscillator = audioCtx.createOscillator();
        const gain = audioCtx.createGain();

        oscillator.connect(gain);
        gain.connect(audioCtx.destination);

        oscillator.frequency.value = type === 'success' ? 880 : 220;
        gain.gain.value = 0.08;

        oscillator.start();

        setTimeout(() => {
            oscillator.stop();
        }, type === 'success' ? 120 : 300);
    } catch (e) {}

    if (navigator.vibrate) {
        navigator.vibrate(type === 'success' ? 80 : [150, 80, 150]);
    }
}

function openScanner() {
    scannerModal.showModal();

    setTimeout(() => {
        startScanner();
    }, 300);
}

function startScanner() {
    if (scannerRunning) return;

    html5QrCode = new Html5Qrcode("barcode-reader");

    html5QrCode.start(
        { facingMode: "environment" },
        {
            fps: 10,
            qrbox: { width: 260, height: 140 },
            aspectRatio: 1.777
        },
        (decodedText) => {
            stopScanner();
            scannerModal.close();

            const search = document.getElementById('inventorySearch');
            search.value = decodedText;
            applyInventorySearch(decodedText);

            if (warehouseMode) {
                processWarehouseScan(decodedText);
            } else {
                showScannedProduct(decodedText);
            }
        },
        () => {}
    ).then(() => {
        scannerRunning = true;
    }).catch(err => {
        alert('Camera could not start. Please allow camera permission.');
        console.error(err);
    });
}

function stopScanner() {
    if (html5QrCode && scannerRunning) {
        html5QrCode.stop().then(() => {
            scannerRunning = false;
            html5QrCode.clear();
        }).catch(() => {
            scannerRunning = false;
        });
    }
}

function applyInventorySearch(value) {
    const q = value.toLowerCase().trim();

    document.querySelectorAll('.inventory-card').forEach(card => {
        card.style.display = card.dataset.search.includes(q) ? '' : 'none';
    });
}

let scannedItemId = null;

function showScannedProduct(scannedValue) {
    const q = scannedValue.toLowerCase().trim();

    const matchedCard = [...document.querySelectorAll('.inventory-card')]
        .find(card =>
            (card.dataset.barcode || '').toLowerCase() === q ||
            (card.dataset.sku || '').toLowerCase() === q ||
            (card.dataset.search || '').includes(q)
        );

    const result = document.getElementById('scanResult');
    result.classList.remove('hidden');

    if (!matchedCard) {
        scannedItemId = null;
        document.getElementById('scanProductName').innerText = 'No product found';
        document.getElementById('scanProductMeta').innerText = 'Scanned: ' + scannedValue;
        document.getElementById('scanCorrectBtn').disabled = true;
        document.getElementById('scanWrongBtn').disabled = true;
        document.getElementById('scanMissingBtn').disabled = true;
        alert('No product found for barcode: ' + scannedValue);
        return;
    }

    scannedItemId = matchedCard.dataset.id;

    document.getElementById('scanProductName').innerText = matchedCard.dataset.name || '-';
    document.getElementById('scanProductMeta').innerText =
        'SKU: ' + (matchedCard.dataset.sku || '-') +
        ' | Barcode: ' + (matchedCard.dataset.barcode || '-') +
        ' | System Qty: ' + (matchedCard.dataset.qty || '-');

    document.getElementById('scanCorrectBtn').disabled = false;
    document.getElementById('scanWrongBtn').disabled = false;
    document.getElementById('scanMissingBtn').disabled = false;

    matchedCard.style.display = '';
    matchedCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
    matchedCard.classList.add('ring-4', 'ring-indigo-400');

    setTimeout(() => {
        matchedCard.classList.remove('ring-4', 'ring-indigo-400');
    }, 2500);
}

document.getElementById('scanCorrectBtn')?.addEventListener('click', () => {
    if (scannedItemId) markItem(scannedItemId, 'correct');
});

document.getElementById('scanWrongBtn')?.addEventListener('click', () => {
    if (scannedItemId) markItem(scannedItemId, 'wrong');
});

document.getElementById('scanMissingBtn')?.addEventListener('click', () => {
    if (scannedItemId) markItem(scannedItemId, 'missing');
});

document.getElementById('inventorySearch')?.addEventListener('input', function () {
    applyInventorySearch(this.value);
});

function markItem(itemId, status) {
    const countedQty = document.getElementById('counted-' + itemId)?.value || null;
    const note = document.getElementById('note-' + itemId)?.value || '';

    return fetch("{{ route('salesman.inventory-check.mark') }}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': "{{ csrf_token() }}",
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            van_stock_item_id: itemId,
            status: status,
            counted_qty: countedQty,
            note: note
        })
    })
    .then(r => r.json())
    .then(data => {
        if (!data.ok) {
            alert(data.message || 'Error');
            return false;
        }

        const badge = document.getElementById('status-badge-' + itemId);

        if (badge) {
            badge.innerText = status;
            badge.className = 'badge';

            if (status === 'correct') badge.classList.add('badge-success');
            if (status === 'wrong') badge.classList.add('badge-warning');
            if (status === 'missing') badge.classList.add('badge-error');
            if (status === 'unchecked') badge.classList.add('badge-ghost');
        }

        return true;
    })
    .catch(() => {
        alert('Failed to save.');
        return false;
    });
}

function startWarehouseMode() {
    warehouseMode = true;

    document.getElementById('warehouseModePanel')?.classList.remove('hidden');
    document.getElementById('scanResult')?.classList.add('hidden');

    openScanner();
}

function stopWarehouseMode() {
    warehouseMode = false;

    document.getElementById('warehouseModePanel')?.classList.add('hidden');
    stopScanner();
}

function processWarehouseScan(scannedValue) {
    const q = scannedValue.toLowerCase().trim();

    const matchedCard = [...document.querySelectorAll('.inventory-card')]
        .find(card =>
            (card.dataset.barcode || '').toLowerCase() === q ||
            (card.dataset.sku || '').toLowerCase() === q ||
            (card.dataset.search || '').includes(q)
        );

    const lastScan = document.getElementById('warehouseLastScan');

    if (!matchedCard) {
        if (lastScan) {
            lastScan.innerText = '❌ Not found: ' + scannedValue;
        }

        scanFeedback('error');
        alert('No product found for barcode: ' + scannedValue);
        openScanner();
        return;
    }

    const itemId = matchedCard.dataset.id;
    const countedInput = document.getElementById('counted-' + itemId);
    const systemQty = Number(matchedCard.dataset.qty || 0);

    let currentCount = Number(countedInput.value || 0);
    currentCount = currentCount + 1;
    countedInput.value = currentCount;

    const newStatus = currentCount === systemQty ? 'correct' : 'wrong';

    markItem(itemId, newStatus).then(() => {
        scanFeedback('success');

        if (lastScan) {
            lastScan.innerText =
                '✅ ' + (matchedCard.dataset.name || '-') +
                ' | Counted: ' + currentCount +
                ' / System: ' + systemQty;
        }

        matchedCard.style.display = '';
        matchedCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
        matchedCard.classList.add('ring-4', 'ring-emerald-400');

        setTimeout(() => {
            matchedCard.classList.remove('ring-4', 'ring-emerald-400');
        }, 1800);

        setTimeout(() => {
            if (warehouseMode) openScanner();
        }, 600);
    });
}

</script>
@endsection