@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('styles')
<style>
    #scanInput {
        font-size: 1.25rem;
        padding: 0.75rem 1rem;
    }
    .scan-result-item {
        transition: all 0.3s ease;
    }
    .scan-result-item.new {
        animation: highlight 1s ease;
    }
    @keyframes highlight {
        0% { background-color: #d4edda; }
        100% { background-color: transparent; }
    }
    .badge-match { background-color: #28a745; }
    .badge-found { background-color: #ffc107; color: #212529; }
    .stats-card {
        transition: all 0.3s ease;
    }
    #qr-reader {
        width: 100%;
        margin: 0 auto;
    }
    #qr-reader__dashboard_section_swaplink {
        display: none !important;
    }
</style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Stock Opname'])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ route('trsso.index') }}'"><i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">

        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between">
                            <h6 class="mb-0">
                                Scan Stock Opname - {{ $session->so_session_id }}
                            </h6>
                            <div>
                                <form action="{{ route('trsso.finish-scan', $session->so_session_id) }}" method="POST" class="d-inline" id="finishScanForm">
                                    @csrf
                                    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-original-title="Selesaikan Scan"
                                        onclick="confirmFinishScan()">
                                        <i class="fas fa-check me-1"></i> Selesaikan Scan
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-body py-3 pt-0">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <span class="badge bg-info me-2">{{ $session->status }}</span>
                                <span class="text-sm">
                                    Periode: {{ \Carbon\Carbon::parse($session->periode_start)->format('d/m/Y') }} -
                                    {{ \Carbon\Carbon::parse($session->periode_end)->format('d/m/Y') }}
                                </span>
                            </div>
                            <div class="col-md-6 text-end">
                                <span class="text-sm text-muted">
                                    PIC: {{ trim($session->pic_name) ?: $session->pic_username }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card shadow-sm h-100 border-radius-lg">
                    <div class="card-body p-3 text-center">
                        <p class="text-xs font-weight-bold text-muted text-uppercase mb-1">Total Snapshot</p>
                        <h3 class="font-weight-bolder text-dark mb-0" id="statSnapshot">
                            {{ number_format($stats['total_snapshot']) }}
                        </h3>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card shadow-sm h-100 border-radius-lg">
                    <div class="card-body p-3 text-center">
                        <p class="text-xs font-weight-bold text-muted text-uppercase mb-1">Match</p>
                        <h3 class="font-weight-bolder text-success mb-0" id="statMatch">
                            {{ number_format($stats['total_scanned']) }}
                        </h3>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card shadow-sm h-100 border-radius-lg">
                    <div class="card-body p-3 text-center">
                        <p class="text-xs font-weight-bold text-muted text-uppercase mb-1">Found</p>
                        <h3 class="font-weight-bolder text-warning mb-0" id="statFound">
                            {{ number_format($stats['total_found']) }}
                        </h3>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6">
                <div class="card shadow-sm h-100 border-radius-lg">
                    <div class="card-body p-3 text-center">
                        <p class="text-xs font-weight-bold text-muted text-uppercase mb-1">Progress</p>
                        <h3 class="font-weight-bolder text-info mb-0" id="statProgress">
                            {{ $stats['scan_progress'] }}%
                        </h3>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-5 mb-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">
                            Input Barcode
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Pilih Layout <span class="text-danger">*</span></label>
                            <select id="layoutSelect" class="form-select form-select-lg" required>
                                <option value="">Pilih Layout</option>
                                @foreach($layouts as $layout)
                                    <option value="{{ $layout->id_layout }}">{{ $layout->nama_layout }}{{ $layout->baris ? ' - BARIS ' . $layout->baris : '' }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Scan Barcode</label>
                            <!-- <div class="input-group">
                                <input type="text" id="scanInput" class="form-control form-control-sm"
                                    placeholder="Scan atau ketik barcode..." autofocus disabled>
                                <button class="btn btn-outline-primary mb-0" type="button" id="btnSubmitScan" disabled>
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div> -->
                            <div class="input-group">
                                <input type="text" id="scanInput" class="form-control text-xs"
                                       placeholder="Ketik atau scan barcode..."
                                       autofocus disabled>
                                <button type="button" class="btn btn-primary mb-0" id="btnSubmitScan">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>

                        <div class="text-center mb-3 mt-3">
                            <span class="text-muted">— atau —</span>
                        </div>
                        <div class="d-grid">
                            <button type="button" class="btn btn-outline-primary" id="btnOpenScanner" disabled>
                                <i class="fas fa-camera me-2"></i> Buka Kamera Scanner
                            </button>
                        </div>
                        <div id="scannerContainer" class="mt-4" style="display: none;">
                            <div id="qr-reader"></div>
                            <div class="text-center mt-2">
                                <button type="button" class="btn btn-sm btn-danger" id="btnStopScanner">
                                    <i class="fas fa-stop me-1"></i> Stop Scanner
                                </button>
                            </div>
                        </div>

                        <div id="lastScanResult" class="mt-4" style="display: none;">
                            <hr>
                            <h6 class="text-sm text-uppercase text-muted">Hasil Scan Terakhir</h6>
                            <div id="lastScanContent"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-7 mb-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                Hasil Scan
                                {{-- <span class="badge bg-primary ms-2" id="scanCount">{{ count($scans) }}</span> --}}
                            </h6>
                            <div>
                                <select id="filterResult" class="form-select form-select-sm" style="width: auto; display: inline-block;">
                                    <option value="">All</option>
                                    <option value="MATCH">Match Only</option>
                                    <option value="FOUND">Found Only</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                            <table class="table align-items-center mb-0">
                                <thead class="sticky-top thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>Bag ID</th>
                                        <th>Material</th>
                                        <th class="text-center">Hasil</th>
                                        <th>Waktu</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="scanResultsBody">
                                    @forelse($scans as $scan)
                                        <tr class="scan-result-item" data-result="{{ $scan->scan_result }}">
                                            <td>
                                                <div class="d-flex px-3 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm">{{ $scan->bag_id }}</h6>
                                                        <p class="text-xs text-secondary mb-0">{{ $scan->barcode_scanned }}</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <p class="text-sm mb-0">{{ $scan->nama_material ?? '-' }}</p>
                                                <p class="text-xs text-secondary mb-0">{{ $scan->nama_layout }}</p>
                                            </td>
                                            <td class="text-center">
                                                @if($scan->scan_result == 'MATCH')
                                                    <span class="badge badge-sm badge-match">MATCH</span>
                                                @else
                                                    <span class="badge badge-sm badge-found">FOUND</span>
                                                @endif
                                            </td>
                                            <td>
                                                <p class="text-xs mb-0">
                                                    {{ \Carbon\Carbon::parse($scan->scan_timestamp)->format('H:i:s') }}
                                                </p>
                                            </td>
                                            <td class="align-middle text-center">
                                                <button class="btn btn-link text-danger text p-0 mb-0 btn-delete-scan"
                                                    data-id="{{ $scan->scan_id }}">
                                                    <i class="fas fa-trash text-sm"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr id="emptyRow">
                                            <td colspan="5" class="text-center py-4">
                                                <div class="text-muted">
                                                    <i class="fas fa-qrcode fa-2x mb-2"></i>
                                                    <p class="mb-0">Belum ada hasil scan</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    @if(session('success'))
    Swal.fire({
        icon: 'success',
        title: 'Berhasil',
        text: '{{ session('success') }}',
        confirmButtonColor: '#028284'
    });
    @endif
    @if($errors->any())
    Swal.fire({
        icon: 'error',
        title: 'Error',
        text: '{{ $errors->first() }}',
        confirmButtonColor: '#028284'
    });
    @endif

    const layoutSelect = document.getElementById('layoutSelect');
    const scanInput = document.getElementById('scanInput');
    const scanResultsBody = document.getElementById('scanResultsBody');
    const lastScanResult = document.getElementById('lastScanResult');
    const lastScanContent = document.getElementById('lastScanContent');
    const filterResult = document.getElementById('filterResult');
    const emptyRow = document.getElementById('emptyRow');

    const btnSubmitScan = document.getElementById('btnSubmitScan');
    const btnOpenScanner = document.getElementById('btnOpenScanner');
    const btnStopScanner = document.getElementById('btnStopScanner');
    const scannerContainer = document.getElementById('scannerContainer');

    let scanTimeout = null;
    let html5QrcodeScanner = null;
    let isProcessing = false;
    let lastScannedBarcode = '';
    let lastScanTime = 0;
    const sessionId = '{{ $session->so_session_id }}';
    const scanProcessUrl = `{{ url('/trsso') }}/${sessionId}/scan`;
    const scanDestroyUrlBase = `{{ url('/trsso') }}/${sessionId}/scan`;

    if (layoutSelect.value) {
        scanInput.disabled = false;
        if (btnOpenScanner) btnOpenScanner.disabled = false;
        scanInput.focus();
    }

    layoutSelect.addEventListener('change', function() {
        if (this.value) {
            scanInput.disabled = false;
            btnSubmitScan.disabled = false;
            btnOpenScanner.disabled = false;
            scanInput.focus();
        } else {
            scanInput.disabled = true;
            btnSubmitScan.disabled = true;
            btnOpenScanner.disabled = true;
            stopScanner();
            scannerContainer.style.display = 'none';
        }
    });

    btnSubmitScan.addEventListener('click', function() {
        const barcode = scanInput.value.trim();
        if (barcode.length >= 3) {
            processScan(barcode);
        } else {
            scanInput.focus();
        }
    });

    scanInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            if (this.value.trim().length >= 3) {
                processScan(this.value.trim());
            }
        }
    });

    scanResultsBody.addEventListener('click', function(e) {
        const btn = e.target.closest('.btn-delete-scan');
        if (!btn) return;

        const scanId = btn.dataset.id;

        Swal.fire({
            title: 'Hapus data scan?',
            text: "Data yang dihapus akan dikembalikan ke status belum scan (jika match).",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                deleteScan(scanId, btn.closest('tr'));
            }
        });
    });

    function deleteScan(scanId, rowElement) {
        fetch(`${scanDestroyUrlBase}/${scanId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                rowElement.style.opacity = '0';
                setTimeout(() => {
                    rowElement.remove();
                    if (scanResultsBody.children.length === 0) {
                        const emptyTr = document.createElement('tr');
                        emptyTr.id = 'emptyRow';
                        emptyTr.innerHTML = `
                            <td colspan="5" class="text-center py-4">
                                <div class="text-muted">
                                    <i class="fas fa-qrcode fa-2x mb-2"></i>
                                    <p class="mb-0">Belum ada hasil scan</p>
                                </div>
                            </td>
                        `;
                        scanResultsBody.appendChild(emptyTr);
                    }
                }, 300);

                updateStats(data.stats);

                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: 'Data scan berhasil dihapus',
                    showConfirmButton: false,
                    timer: 3000
                });
            } else {
                showAlert(data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('Gagal menghapus data scan', 'danger');
        });
    }

    filterResult.addEventListener('change', function() {
        const filterValue = this.value;
        const rows = scanResultsBody.querySelectorAll('.scan-result-item');

        rows.forEach(row => {
            if (!filterValue || row.dataset.result === filterValue) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });

    function processScan(barcode) {
        const layoutId = layoutSelect.value;

        if (!layoutId) {
            showAlert('Pilih layout terlebih dahulu!', 'warning');
            return;
        }

        if (isProcessing) {
            return;
        }

        isProcessing = true;
        scanInput.disabled = true;

        fetch(scanProcessUrl, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: new URLSearchParams({
                barcode: barcode,
                layout_id: layoutId
            })
        })
        .then(response => {
            const contentType = response.headers.get('content-type') || '';
            if (!contentType.includes('application/json')) {
                // Server returned non-JSON (HTML error page, redirect, etc.)
                if (response.status === 419) {
                    showLastResult({ message: 'Sesi telah berakhir (CSRF token expired). Silakan refresh halaman.' }, false);
                } else if (response.status === 401 || response.status === 302) {
                    showLastResult({ message: 'Sesi login telah berakhir. Silakan login kembali.' }, false);
                    setTimeout(() => { window.location.href = '/login'; }, 2000);
                } else {
                    showLastResult({ message: 'Terjadi kesalahan pada server (status: ' + response.status + '). Silakan refresh halaman dan coba lagi.' }, false);
                }
                return null;
            }
            return response.json().then(data => {
                if (!response.ok) {
                    // Handle validation errors (422) or server errors (500)
                    const errorMsg = data.message || data.errors
                        ? (data.message || Object.values(data.errors).flat().join(', '))
                        : 'Terjadi kesalahan pada server';
                    showLastResult({ message: errorMsg }, false);
                    return;
                }
                return data;
            });
        })
        .then(data => {
            if (!data) return; // Already handled as error

            if (data.success) {
                updateStats(data.stats);

                addScanResult(data.data);

                showLastResult(data);

            } else {
                showLastResult(data, false);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('Terjadi kesalahan saat memproses scan: ' + error.message, 'danger');
        })
        .finally(() => {
            scanInput.value = '';
            scanInput.disabled = false;
            scanInput.focus();
            isProcessing = false;
        });
    }

    function updateStats(stats) {
        document.getElementById('statSnapshot').textContent = formatNumber(stats.total_snapshot);
        document.getElementById('statMatch').textContent = formatNumber(stats.total_scanned);
        document.getElementById('statFound').textContent = formatNumber(stats.total_found);
        document.getElementById('statProgress').textContent = stats.scan_progress + '%';
    }

    function addScanResult(data) {
        if (emptyRow) {
            emptyRow.remove();
        }

        const resultClass = data.scan_result === 'MATCH' ? 'badge-match' : 'badge-found';
        const materialName = data.bag_details ? data.bag_details.nama_material : '-';
        const layoutName = layoutSelect.options[layoutSelect.selectedIndex].text;
        const scanId = data.scan_id || ''; // Ensure scan_id is returned from backend

        const newRow = document.createElement('tr');
        newRow.className = 'scan-result-item new';
        newRow.dataset.result = data.scan_result;
        newRow.innerHTML = `
            <td>
                <div class="d-flex px-3 py-1">
                    <div class="d-flex flex-column justify-content-center">
                        <h6 class="mb-0 text-sm">${data.bag_id}</h6>
                        <p class="text-xs text-secondary mb-0">${data.barcode}</p>
                    </div>
                </div>
            </td>
            <td>
                <p class="text-sm mb-0">${materialName}</p>
                <p class="text-xs text-secondary mb-0">${layoutName}</p>
            </td>
            <td class="text-center">
                <span class="badge badge-sm ${resultClass}">${data.scan_result}</span>
            </td>
            <td>
                <p class="text-xs mb-0">${new Date().toLocaleTimeString()}</p>
            </td>
            <td class="align-middle text-center">
                <button class="btn btn-link text-danger text p-0 mb-0 btn-delete-scan"
                    data-id="${scanId}">
                    <i class="fas fa-trash text-sm"></i>
                </button>
            </td>
        `;

        scanResultsBody.insertBefore(newRow, scanResultsBody.firstChild);

        setTimeout(() => {
            newRow.classList.remove('new');
        }, 1000);
    }

    function showLastResult(data, success = true) {
        lastScanResult.style.display = 'block';

        if (success) {
            const resultClass = data.data.scan_result === 'MATCH' ? 'alert-success' : 'alert-warning';
            const icon = data.data.scan_result === 'MATCH' ? 'fa-check-circle' : 'fa-exclamation-triangle';

            let details = '';
            if (data.data.bag_details) {
                details = `
                    <p class="mb-1"><strong>Material:</strong> ${data.data.bag_details.nama_material || '-'}</p>
                    <p class="mb-1"><strong>Berat:</strong> ${data.data.bag_details.berat || '-'} ${data.data.bag_details.satuan || 'kg'}</p>
                    <p class="mb-0"><strong>Layout:</strong> ${data.data.bag_details.nama_layout || '-'}</p>
                `;
            }

            lastScanContent.innerHTML = `
                <div class="alert ${resultClass} mb-0">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas ${icon} me-2 fa-lg"></i>
                        <strong>${data.message}</strong>
                    </div>
                    <hr class="my-2">
                    <p class="mb-1"><strong>Bag ID:</strong> ${data.data.bag_id}</p>
                    <p class="mb-1"><strong>Barcode:</strong> ${data.data.barcode}</p>
                    ${details}
                </div>
            `;
        } else {
            lastScanContent.innerHTML = `
                <div class="alert alert-danger mb-0">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-times-circle me-2 fa-lg"></i>
                        <strong>${data.message}</strong>
                    </div>
                </div>
            `;
        }
    }

    function showAlert(message, type) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        document.querySelector('.container-fluid').insertBefore(alertDiv, document.querySelector('.container-fluid').firstChild);

        setTimeout(() => alertDiv.remove(), 3000);
    }

    function formatNumber(num) {
        return new Intl.NumberFormat().format(num);
    }

    btnOpenScanner.addEventListener('click', function() {
        scannerContainer.style.display = 'block';
        startScanner();
    });

    btnStopScanner.addEventListener('click', function() {
        stopScanner();
        scannerContainer.style.display = 'none';
    });

    function startScanner() {
        if (html5QrcodeScanner) {
            try {
                html5QrcodeScanner.clear();
            } catch (e) {
                console.warn('Could not clear previous scanner:', e);
            }
        }

        html5QrcodeScanner = new Html5Qrcode("qr-reader");
        const config = {
            fps: 10,
            qrbox: { width: 250, height: 250 },
            aspectRatio: 1.0
        };

        html5QrcodeScanner.start(
            { facingMode: "environment" },
            config,
            onScanSuccess,
            onScanError
        ).catch(err => {
            console.error('Scanner error:', err);
            showAlert('Gagal mengakses kamera. Pastikan browser memiliki izin kamera.', 'danger');
        });
    }

    function onScanSuccess(decodedText, decodedResult) {
        const now = Date.now();
        // Debounce: ignore same barcode scanned within 3 seconds
        if (decodedText === lastScannedBarcode && (now - lastScanTime) < 3000) {
            return;
        }
        lastScannedBarcode = decodedText;
        lastScanTime = now;

        scanInput.value = decodedText;
        processScan(decodedText);

    }

    function onScanError(errorMessage) {
    }

    function stopScanner() {
        if (html5QrcodeScanner) {
            html5QrcodeScanner.stop().then(() => {
                console.log('Scanner stopped');
            }).catch(err => {
                console.error('Error stopping scanner:', err);
            });
        }
    }

    window.addEventListener('beforeunload', function() {
        stopScanner();
    });
});

function confirmFinishScan() {
    Swal.fire({
        icon: 'question',
        title: 'Selesaikan Scan?',
        text: 'Anda akan diarahkan ke halaman ringkasan. Pastikan semua bag sudah di-scan.',
        showCancelButton: true,
        confirmButtonText: 'Ya, Selesaikan',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#028284'
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('finishScanForm').submit();
        }
    });
}
</script>
@endpush