@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description">
                <h1>Staging Item - Other</h1>
            </div>
        </div>
    </div>

    @if(session('success'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: '{{ session('success') }}',
                showConfirmButton: false,
                timer: 1000
            });
        });
    </script>
    @endif

    @if(session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: '{{ session('error') }}',
                    showConfirmButton: false,
                    timer: 1000
                });
            });
        </script>
    @endif

    <div class="padding">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label for="barcodeStagingInline" class="form-label">Scan Barcode</label>
                                <div class="input-group">
                                    <input type="text" id="barcodeStagingInline" class="form-control" placeholder="Scan atau masukkan barcode">
                                    <button class="btn btn-primary" type="button" id="startButton">
                                        <i class="material-icons-two-tone">qr_code_scanner</i>
                                    </button>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table ui-jp="dataTable" class="table table-striped b-t b-b">
                                        <thead>
                                            <tr>
                                                <th style="width:10%">Item Code</th>
                                                <th style="width:30%">Item Description</th>
                                                <th style="width:10%">Lot Number</th>
                                                <th style="width:10%">Exp Date</th>
                                                <th style="width:10%">Quantity</th>
                                                <th style="width:10%">UOM</th>
                                            </tr>
                                        </thead>
                                        <tbody id="itemTableBodyStagingInline">
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td colspan="5" style="text-align: right;"><strong>Total Item</strong></td>
                                                <td id="totalQuantityStagingInline"><strong></strong></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>

                            <div class="col-md-12 text-center">
                                <button type="button" class="btn btn-primary" id="submitStagingInline">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title">Pengurangan Item History</h5>
                    <form method="GET" action="{{ route('inline_staging') }}" class="d-flex">
                        <input type="text" name="search" class="form-control me-2" placeholder="Search items..." value="{{ request('search') }}">
                        <button type="submit" class="btn btn-primary me-2">Search</button>
                        <button type="button" class="btn btn-secondary" onclick="clearSearch()">All</button>
                    </form>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table ui-jp="dataTable" class="table table-striped b-t b-b">
                            <thead>
                                <tr>
                                    <th style="width:15%; text-align: center">Date</th>
                                    <th style="width:25%; text-align: center">Pooling Item</th>
                                    <th style="width:25%; text-align: center">Total Item</th>
                                    <th style="width:20%; text-align: center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($stagingHistory as $history)
                                <tr data-modal-items="{{ json_encode($history->items) }}">
                                    <td style="width:15%; text-align: center">{{ $history->created_at->format('Y-m-d H:i') }}</td>
                                    <td style="width:25%; text-align: center">
                                        @if(str_contains(strtoupper($history->pooling_number), 'ADMMUSNAH'))
                                            <span class="badge bg-danger badge-pill fs-6">{{ $history->pooling_number }}</span>
                                        @else
                                            {{ $history->pooling_number }}
                                        @endif
                                    </td>
                                    <td style="width:25%; text-align: center">{{ $history->total_items }} Item</td>
                                    <td style="width:20%; text-align: center">
                                        <div class="d-flex align-items-center justify-content-center gap-2">
                                            <a href="#" class="btn btn-primary btn-sm view-items" data-pooling="{{ $history->pooling_number }}">
                                                View More
                                            </a>
                                        </div>
                                    </td>
                                </tr> 
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

        <!-- Modal Items -->
        <div class="modal fade" id="itemsModal" tabindex="-1" aria-labelledby="itemsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="itemsModalLabel">Detail Items - <span id="modalPoolingNumber"></span></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Item Code</th>
                                        <th>Description</th>
                                        <th>Lot Number</th>
                                        <th>Exp Date</th>
                                        <th>Qty</th>
                                        <th>UOM</th>
                                    </tr>
                                </thead>
                                <tbody id="modalItemsBody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

            <!-- Modal Scanner -->
            <div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg ">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="scannerModalLabel">Scan Barcode</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div id="reader"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
<script src="https://unpkg.com/html5-qrcode"></script>
<script src="{{ asset('assets/js/pages/datatables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/datatables.min.js') }}"></script>
<script>
    let scannedItemsStagingInline = [];
    let itemQuantityMap = new Map();
    let html5QrcodeScanner = null;

    $(document).ready(function() {
        const barcodeInput = document.getElementById('barcodeStagingInline');
        const submitButton = document.getElementById('submitStagingInline');
        
        // Set focus ke input barcode
        barcodeInput.focus();

        // Handle barcode input when Enter is pressed
        barcodeInput.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                const barcode = this.value;
                handleBarcodeInput(barcode);
            }
        });

        // Handle view items button
            document.querySelectorAll('.view-items').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const poolingNumber = this.getAttribute('data-pooling');
                loadItems(poolingNumber);
            });
        });

        // Handle submit button
        submitButton.addEventListener('click', function() {
            if (scannedItemsStagingInline.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Belum ada item yang di-scan'
                });
                return;
            }

            Swal.fire({
                title: 'Konfirmasi',
                text: "Apakah Anda yakin ingin mengirim item ke untuk di ambil QC Inline?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya',
                cancelButtonText: 'Tidak'
            }).then((result) => {
                if (result.isConfirmed) {
                    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                    
                    // Kirim data ke server
                    fetch('{{ route("staging.inline.store") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': token,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            items: scannedItemsStagingInline
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.text().then(text => {
                                throw new Error(text);
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: `Item berhasil dikirim ke staging dengan Pooling Number: ${data.pooling_number}`,
                                showConfirmButton: false,
                                timer: 2000
                            }).then(() => {
                                // Reset semua data
                                scannedItemsStagingInline = [];
                                itemQuantityMap.clear();
                                updateItemTableStagingInline();
                                document.getElementById('barcodeStagingInline').focus();
                                // Reload halaman untuk memperbarui history
                                window.location.reload();
                            });
                        } else {
                            throw new Error(data.message || 'Terjadi kesalahan');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: error.message || 'Terjadi kesalahan saat menyimpan data'
                        });
                    });
                }
            });
        });

        $('#startButton').on('click', function() {
            $('#scannerModal').modal('show');
            startScanner();
        });

        function startScanner() {
            if (html5QrcodeScanner === null) {
                html5QrcodeScanner = new Html5QrcodeScanner("reader", {
                    fps: 30,
                            qrbox: {width: 200, height: 200},
                            aspectRatio: 1.5,
                            formatsToSupport: [
                                Html5QrcodeSupportedFormats.DATA_MATRIX,
                                Html5QrcodeSupportedFormats.QR_CODE,
                                Html5QrcodeSupportedFormats.EAN_13,
                                Html5QrcodeSupportedFormats.CODE_128
                            ],
                            experimentalFeatures: {
                                useBarCodeDetectorIfSupported: true
                            },
                            videoConstraints: {
                                focusMode: "continuous",
                                facingMode: "environment",
                                frameRate: { ideal: 30, min: 15 },
                                width: { min: 640, ideal: 1280 },
                                height: { min: 480, ideal: 720 }
                            },
                            showTorchButtonIfSupported: true,
                            defaultZoomValueIfSupported: 1
                        }
                    );

                html5QrcodeScanner.render(onScanSuccess, onScanError);
            }
        }

        function onScanSuccess(decodedText, decodedResult) {
            console.log(`Code scanned = ${decodedText}`, decodedResult);
            $('#barcodeStagingInline').val(decodedText);
            if (html5QrcodeScanner) {
                html5QrcodeScanner.clear();
                html5QrcodeScanner = null;
            }
            $('#scannerModal').modal('hide');
            handleBarcodeInput(decodedText);
        }

        function onScanError(err) {
            // console.warn(`Code scan error = ${err}`);
        }

        $('#scannerModal').on('hidden.bs.modal', function() {
            if (html5QrcodeScanner) {
                html5QrcodeScanner.clear();
                html5QrcodeScanner = null;
            }
        });
    });

    function loadItems(poolingNumber) {
        fetch(`/staging-inline/items/${poolingNumber}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const modalBody = document.getElementById('modalItemsBody');
                    modalBody.innerHTML = '';
                    document.getElementById('modalPoolingNumber').textContent = poolingNumber;

                    data.items.forEach(item => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${item.item_code}</td>
                            <td>${item.item_description}</td>
                            <td>${item.lot_number}</td>
                            <td>${item.exp_date}</td>
                            <td>${item.quantity_history}</td>
                            <td>${item.uom}</td>
                        `;
                        modalBody.appendChild(row);
                    });

                    $('#itemsModal').modal('show');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Gagal memuat data item'
                });
            });
    }


    function handleBarcodeInput(barcode) {
        if (!barcode) return;

        // Lakukan AJAX untuk mendapatkan data item berdasarkan barcode
        fetch(`/api/get-item-by-barcodesystem/${barcode}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    const item = data.item;
                    
                    // Validasi tanggal kadaluarsa
                    const today = new Date();
                    const expDate = new Date(item.exp_date);
                    if (expDate < today) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Item ED',
                            text: `${item.item_description} (Lot: ${item.lot_number}), Exp date: ${item.exp_date}`
                        });
                        return;
                    }

                    // Buat unique key berdasarkan kombinasi item_code, lot_number, dan exp_date
                    const itemKey = `${item.barcode}_${item.item_code}_${item.lot_number}_${item.exp_date}`;
                    
                    // Cek apakah item sudah pernah di-scan
                    const currentScannedQuantity = itemQuantityMap.get(itemKey) || 0;
                    
                    // Tentukan increment quantity berdasarkan item code
                    const incrementQuantity = (item.item_code === 'LMLEYE07' || item.item_code === 'LMLEYE06') ? 2 : 1;
                    
                    // Validasi stok tersedia
                    if (currentScannedQuantity >= item.available_quantity) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Stok Tidak Mencukupi',
                            text: `Stok ${item.item_description} (Lot: ${item.lot_number}) hanya tersedia: ${item.available_quantity}`
                        });
                        return;
                    }

                    // Update quantity map dengan unique key
                    itemQuantityMap.set(itemKey, currentScannedQuantity + incrementQuantity);

                    // Cek apakah item dengan kombinasi yang sama sudah ada di tabel
                    const existingItemIndex = scannedItemsStagingInline.findIndex(
                        existingItem => 
                            existingItem.barcode === item.barcode &&
                            existingItem.item_code === item.item_code &&
                            existingItem.lot_number === item.lot_number &&
                            existingItem.exp_date === item.exp_date
                    );

                    if (existingItemIndex !== -1) {
                        // Update quantity item yang sudah ada berdasarkan item code
                        if (scannedItemsStagingInline[existingItemIndex].item_code === 'LMLEYE07' || 
                            scannedItemsStagingInline[existingItemIndex].item_code === 'LMLEYE06') {
                            scannedItemsStagingInline[existingItemIndex].quantity += 2;
                        } else {
                            scannedItemsStagingInline[existingItemIndex].quantity += 1;
                        }
                    } else {
                        // Tambah item baru dengan quantity berdasarkan item code
                        const initialQuantity = (item.item_code === 'LMLEYE07' || item.item_code === 'LMLEYE06') ? 2 : 1;
                        
                        scannedItemsStagingInline.push({ 
                            item_code: item.item_code,
                            item_description: item.item_description, 
                            lot_number: item.lot_number,
                            exp_date: item.exp_date,
                            uom: item.uom,
                            quantity: initialQuantity,
                            available_quantity: item.available_quantity,
                            barcode: item.barcode
                        });
                    }

                    updateItemTableStagingInline();
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message || 'Item tidak ditemukan'
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Terjadi kesalahan saat memproses barcode'
                });
            })
            .finally(() => {
                document.getElementById('barcodeStagingInline').value = '';
                document.getElementById('barcodeStagingInline').focus();
            });
    }

    function updateItemTableStagingInline() {
        const tableBody = document.getElementById('itemTableBodyStagingInline');
        if (!tableBody) return;

        tableBody.innerHTML = '';
        let totalQuantity = 0;

        scannedItemsStagingInline.forEach(item => {
            totalQuantity += item.quantity;
            const row = `<tr>
                            <td>${item.item_code}</td>
                            <td>${item.item_description}</td>
                            <td>${item.lot_number}</td>
                            <td>${item.exp_date}</td>
                            <td>${item.quantity}</td>
                            <td>${item.uom}</td>
                        </tr>`;
            tableBody.innerHTML += row;
        });

        const totalQuantityElement = document.getElementById('totalQuantityStagingInline');
        if (totalQuantityElement) {
            totalQuantityElement.innerHTML = `<strong>${totalQuantity}</strong>`;
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Clear the search input field on page load
        const searchInput = document.querySelector('input[name="search"]');
        if (searchInput) {
            searchInput.value = '';
        }
    });

    function clearSearch() {
        const searchInput = document.querySelector('input[name="search"]');
        if (searchInput) {
            searchInput.value = ''; // Clear the search input
        }
        document.querySelector('form').submit(); // Submit the form
    }
</script>
@endpush
@endsection