@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description">
                <h1>Staging Item - Chemical & FO</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="barcodeStagingCPO" class="form-label">Scan Barcode</label>
                                <div class="input-group">
                                    <input type="text" id="barcodeStagingCPO" 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:25%">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>
                                                <th style="width:10%">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="itemTableBodyStagingCPO">
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td colspan="4" style="text-align: right;"><strong>Total Item</strong></td>
                                                <td id="totalQuantityStagingCPO"><strong>0</strong></td>
                                                <td colspan="2"></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>

                            <div class="col-md-12 text-center">
                                <button type="button" class="btn btn-primary" id="submitStagingCPO">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">Pengambilan Item History</h5>
                    <form method="GET" action="{{ route('cpo_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">{{ $history->pooling_number }}</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>
                                            @if($history->status === 'received')
                                                <i class="material-icons-two-tone text-success">done</i>
                                            @elseif($history->status === 'pending' || $history->status === 'partial')
                                                <i class="material-icons-two-tone text-warning">schedule</i>
                                            @endif
                                        </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 MO</th>
                                    <th>Qty belum received</th>
                                    <th>UOM</th>
                                    <th>Status</th>
                                    <th>Action</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>

@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>
    let scannedItemsStagingCPO = [];
    let itemQuantityMap = new Map();
    let html5QrcodeScanner = null;

    $(document).ready(function() {
        const barcodeInput = document.getElementById('barcodeStagingCPO');
        const submitButton = document.getElementById('submitStagingCPO');
        
        // 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 (scannedItemsStagingCPO.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 staging?",
                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.cpo.store") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': token,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            items: scannedItemsStagingCPO
                        })
                    })
                    .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
                                scannedItemsStagingCPO = [];
                                itemQuantityMap.clear();
                                updateItemTableStagingCPO();
                                document.getElementById('barcodeStagingCPO').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);
            $('#barcodeStagingCPO').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-cpo/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.quantity_actual}</td>
                            <td>${item.uom}</td>
                            <td>${item.quantity_actual > 0 ? '<span class="badge badge-warning">not yet received</span>' : '<span class="badge badge-success">Received</span>'}</td>
                            <td>
                                ${item.quantity_actual > 0 ? `
                                <button type="button" class="btn btn-sm btn-danger btn-delete-staging" data-id="${item.id}" title="Delete Item">
                                    <i class="material-icons-two-tone" style="font-size: 16px;">delete</i>
                                </button>
                                ` : ''}
                            </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;
                    
                    // 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 + 1);

                    // Cek apakah item dengan kombinasi yang sama sudah ada di tabel
                    const existingItemIndex = scannedItemsStagingCPO.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
                        scannedItemsStagingCPO[existingItemIndex].quantity += 1;
                    } else {
                        // Tambah item baru
                        scannedItemsStagingCPO.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: 1,
                            available_quantity: item.available_quantity,
                            barcode: item.barcode
                        });
                    }

                    updateItemTableStagingCPO();
                } 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('barcodeStagingCPO').value = '';
                document.getElementById('barcodeStagingCPO').focus();
            });
    }

    function updateItemTableStagingCPO() {
        const tableBody = document.getElementById('itemTableBodyStagingCPO');
        if (!tableBody) return;

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

        scannedItemsStagingCPO.forEach((item, index) => {
            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>
                            <td>
                                <button type="button" class="btn btn-sm btn-danger btn-delete-item" data-index="${index}" title="Remove Item">
                                    <i class="material-icons-two-tone" style="font-size: 16px;">delete</i>
                                </button>
                            </td>
                        </tr>`;
            tableBody.innerHTML += row;
        });

        const totalQuantityElement = document.getElementById('totalQuantityStagingCPO');
        if (totalQuantityElement) {
            totalQuantityElement.innerHTML = `<strong>${totalQuantity}</strong>`;
        }
        
        // Bind delete events
        $('.btn-delete-item').on('click', function() {
            const index = $(this).data('index');
            const itemToRemove = scannedItemsStagingCPO[index];
            const itemKey = `${itemToRemove.barcode}_${itemToRemove.item_code}_${itemToRemove.lot_number}_${itemToRemove.exp_date}`;
            
            // Konfirmasi penghapusan
            Swal.fire({
                title: 'Hapus Item',
                text: `Apakah Anda yakin ingin menghapus ${itemToRemove.item_description}? dari staging?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, hapus!'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Update the Map first to reduce or remove tracking logic
                    // Because user can delete, we remove it from Map
                    itemQuantityMap.delete(itemKey);
                    
                    // Remove from array and update table
                    scannedItemsStagingCPO.splice(index, 1);
                    updateItemTableStagingCPO();
                }
            });
        });
    }

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

    $(document).on('click', '.btn-delete-staging', function() {
        const id = $(this).data('id');
        
        Swal.fire({
            title: 'Hapus Item',
            text: `Apakah Anda yakin ingin menghapus item ini?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                fetch(`/staging-cpo/delete/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': token,
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Terhapus!',
                            text: 'Item berhasil dihapus.',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        const poolingNumber = document.getElementById('modalPoolingNumber').textContent;
                        loadItems(poolingNumber);
                        
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        Swal.fire('Error!', data.message || 'Gagal menghapus item', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire('Error!', 'Terjadi kesalahan sistem', 'error');
                });
            }
        });
    });

</script>
@endpush
@endsection