@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description d-flex align-items-center">
                <div class="page-description-content flex-grow-1">
                    <h1>Received Item - CPO</h1>
                </div>
                <div class="page-description-actions">
                    <a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exportModal"><i class="material-icons">print</i>Export to Excel</a>
                </div>
            </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="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Item untuk di Received</h5>
                </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:10%; text-align: center">Pooling Item</th>
                                    <th style="width:10%; text-align: center">Total Item</th>
                                    <th style="width:10%; text-align: center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($stagingHistory as $history)
                                <tr>
                                    <td style="width:15%; text-align: center">{{ $history->created_at->format('Y-m-d H:i:s') }}</td>
                                    <td style="width:15%; text-align: center">{{ $history->pooling_number }}</td>
                                    <td style="width:15%; text-align: center">{{ $history->total_items }} Item</td>
                                    <td>
                                        <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>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Received History</h5>
                </div>
                <div class="card-body">
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-3bulan-tab" data-bs-toggle="pill" data-bs-target="#pills-3bulan" type="button" role="tab" aria-controls="pills-3bulan" aria-selected="true">Last 3 Months</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-all-tab" data-bs-toggle="pill" data-bs-target="#pills-all" type="button" role="tab" aria-controls="pills-all" aria-selected="false">All History</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-3bulan" role="tabpanel" aria-labelledby="pills-3bulan-tab">
                            <div class="table-responsive">
                                <table id="datatable1" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th style="width:15%">Date</th>
                                            <th style="width:10%">Barcode</th>
                                            <th style="width:10%">Item Code</th>
                                            <th style="width:20%">Item Description</th>
                                            <th style="width:5%">UOM</th>
                                            <th style="width:10%">Lot Number</th>
                                            <th style="width:15%">Exp Date</th>
                                            <th style="width:5%" text-align="center">Quantity</th>
                                            <th style="width:10%">Input By</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $threeMonthsAgo = now()->subMonths(3); @endphp
                                        @foreach($historyCPOReceived as $item)
                                            @if($item->created_at >= $threeMonthsAgo)
                                            <tr>
                                                <td>{{ $item->created_at->format('Y-m-d H:i') }}</td>
                                                <td>{{ $item->barcode }}</td>
                                                <td>{{ $item->item_code }}</td>
                                                <td>{{ $item->item_description }}</td>
                                                <td>{{ $item->uom }}</td>
                                                <td>{{ $item->lot_number }}</td>
                                                <td>{{ $item->exp_date }}</td>
                                                <td style="text-align: center">{{ $item->quantity }}</td>
                                                <td>{{ $item->inputby }}</td> 
                                            </tr>
                                            @endif
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-all" role="tabpanel" aria-labelledby="pills-all-tab">
                            <div class="table-responsive">
                                <table id="datatable-all" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th style="width:15%">Date</th>
                                            <th style="width:10%">Barcode</th>
                                            <th style="width:10%">Item Code</th>
                                            <th style="width:20%">Item Description</th>
                                            <th style="width:5%">UOM</th>
                                            <th style="width:10%">Lot Number</th>
                                            <th style="width:15%">Exp Date</th>
                                            <th style="width:5%" text-align="center">Quantity</th>
                                            <th style="width:10%">Input By</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($historyCPOReceived as $item)
                                        <tr>
                                            <td>{{ $item->created_at->format('Y-m-d H:i') }}</td>
                                            <td>{{ $item->barcode }}</td>
                                            <td>{{ $item->item_code }}</td>
                                            <td>{{ $item->item_description }}</td>
                                            <td>{{ $item->uom }}</td>
                                            <td>{{ $item->lot_number }}</td>
                                            <td>{{ $item->exp_date }}</td>
                                            <td style="text-align: center">{{ $item->quantity }}</td>
                                            <td>{{ $item->inputby }}</td> 
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </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">
                    <form id="barcodeForm" action="{{ route('received_cpo.store') }}" method="POST">
                        @csrf
                        <input type="hidden" id="poolingNumberInput" name="pooling_number">
                        <div class="mb-3">
                            <label for="barcode" class="form-label">Barcode</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="barcode" name="barcode" required>
                                <button type="button" class="btn btn-primary" id="scanButton">
                                    <i class="material-icons-two-tone">qr_code_scanner</i>
                                </button>
                            </div>
                        </div>
                    </form>

                    <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>
                                </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>

    <!-- Modal Export -->
    <div class="modal fade" id="exportModal" tabindex="-1" aria-labelledby="exportModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exportModalLabel">Export to Excel</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 text-center">
                        <a href="{{ route('export.received_cpo') }}" class="btn btn-success w-100">
                            <i class="material-icons">download</i> Export All Data
                        </a>
                    </div>
                    <hr>
                    <p class="text-muted text-center">Atau pilih rentang tanggal:</p>
                    <form id="exportRangeForm" method="GET" action="{{ route('export.received_cpo') }}">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="start_date" class="form-label">From</label>
                                <input type="date" class="form-control" id="start_date" name="start_date" required>
                            </div>
                            <div class="col-md-6">
                                <label for="end_date" class="form-label">To</label>
                                <input type="date" class="form-control" id="end_date" name="end_date" required>
                            </div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="material-icons">date_range</i> Export by Range
                            </button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </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>
    $(document).ready(function() {
        $('#datatable-all').DataTable();

        // Export range validation
        $('#exportRangeForm').on('submit', function(e) {
            var startDate = $('#start_date').val();
            var endDate = $('#end_date').val();

            if (!startDate || !endDate) {
                e.preventDefault();
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: 'Silakan pilih tanggal From dan To.',
                    showConfirmButton: true
                });
                return false;
            }

            if (startDate > endDate) {
                e.preventDefault();
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: 'Tanggal From tidak boleh lebih besar dari tanggal To.',
                    showConfirmButton: true
                });
                return false;
            }
        });

        let html5QrcodeScanner = null;
        let isProcessing = false;
        let activeSwal = null;

        // Prevent default action for scan button trigger
        $('#barcode').on('keydown', function(event) {
            if (event.key === 'Tab' || event.keyCode === 9) {
                event.preventDefault();
            }
        });

        // Tambahkan event listener untuk keypress enter dengan delay dan cleaning
        $('#barcode').on('keypress', function(event) {
            if (event.key === 'Enter' && !isProcessing) {
                event.preventDefault();
                const barcode = this.value.trim();
                // Remove any non-printable characters
                const cleanBarcode = barcode.replace(/[^\x20-\x7E]/g, '');
                
                if (cleanBarcode) {
                    this.value = cleanBarcode;
                    processBarcodeInput(cleanBarcode);
                }
            }
        });

        // Disable click on scan button when input has focus
        $('#barcode').on('focus', function() {
            $('#scanButton').css('pointer-events', 'none');
            setTimeout(() => {
                $('#scanButton').css('pointer-events', 'auto');
            }, 100);
        });

        $('#scanButton').on('click', function() {
            $('#scannerModal').modal('show');
            if (!html5QrcodeScanner) {
                startScanner();
            }
        });

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

        // Reset processing state when modal is closed
        $('#itemsModal').on('hidden.bs.modal', function () {
            isProcessing = false;
            if (activeSwal) {
                activeSwal.close();
                activeSwal = null;
            }
        });

        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) {
            if (isProcessing) return;
            
            $('#barcode').val(decodedText);
            if (html5QrcodeScanner) {
                html5QrcodeScanner.clear();
                html5QrcodeScanner = null;
            }
            $('#scannerModal').modal('hide');
            
            // Process the barcode after scan
            processBarcodeInput(decodedText);
        }

        function onScanError(error) {
            // Handle scan error here if needed
            console.warn(`Code scan error = ${error}`);
        }

        // Function to process barcode input (from manual entry or scan)
        function processBarcodeInput(barcode) {
            if (isProcessing) return;
            isProcessing = true;

            var poolingNumber = $('#poolingNumberInput').val();

            if (!barcode) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Please enter a barcode.',
                    showConfirmButton: true
                }).then(() => {
                    isProcessing = false;
                    $('#barcode').focus();
                });
                return;
            }

            // First get item details
            $.ajax({
                url: `/item-details-cpo/${barcode}`,
                type: 'GET',
                data: {
                    pooling_number: poolingNumber
                },
                success: function(response) {
                    var itemName = response.item_name;

                    // Close any existing SweetAlert
                    if (activeSwal) {
                        activeSwal.close();
                    }

                    // Create new SweetAlert
                    activeSwal = Swal.fire({
                        title: 'Are you sure?',
                        text: `Do you want to receive ${itemName}?`,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, receive it!',
                        cancelButtonText: 'No, cancel!',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        focusConfirm: true
                    });

                    activeSwal.then((result) => {
                        if (result.isConfirmed) {
                            // Submit the form via AJAX
                            $.ajax({
                                url: '{{ route("received_cpo.store") }}',
                                type: 'POST',
                                data: {
                                    barcode: barcode,
                                    pooling_number: poolingNumber,
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Success',
                                        text: response.success,
                                        showConfirmButton: false,
                                        timer: 1000
                                    });

                                    // Clear barcode input
                                    $('#barcode').val('');
                                    
                                    // Refresh the items table
                                    loadItems(poolingNumber);
                                    
                                    // If all items are received, update the main table status
                                    if (response.status === 'Received') {
                                        location.reload(); // Only reload if all items are received
                                    }
                                    
                                    // Reset processing state
                                    isProcessing = false;
                                    activeSwal = null;
                                    
                                    // Focus back to barcode input
                                    setTimeout(() => {
                                        $('#barcode').focus();
                                    }, 1100);
                                },
                                error: function(xhr) {
                                    var errorMessage = xhr.responseJSON.error || 'Failed to record barcode.';
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: errorMessage,
                                        showConfirmButton: true
                                    }).then(() => {
                                        // Reset processing state
                                        isProcessing = false;
                                        activeSwal = null;
                                        
                                        // Clear and focus barcode input
                                        $('#barcode').val('').focus();
                                    });
                                }
                            });
                        } else {
                            // Reset processing state
                            isProcessing = false;
                            activeSwal = null;
                            
                            // Clear and focus barcode input
                            $('#barcode').val('').focus();
                        }
                    });
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Item not found.',
                        showConfirmButton: true
                    }).then(() => {
                        // Reset processing state
                        isProcessing = false;
                        
                        // Clear and focus barcode input
                        $('#barcode').val('').focus();
                    });
                }
            });
        }

        // Remove form submit handler and use the processBarcodeInput function
        $('#barcodeForm').on('submit', function(e) {
            e.preventDefault();
            if (!isProcessing) {
                const barcode = $('#barcode').val().trim();
                processBarcodeInput(barcode);
            }
        });

        // Function to load items for a pooling number
        function loadItems(poolingNumber) {
            fetch(`/staging-cpo/items/${poolingNumber}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const tbody = document.getElementById('modalItemsBody');
                        tbody.innerHTML = '';
                        
                        data.items.forEach(item => {
                            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_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>
                                </tr>
                            `;
                            tbody.innerHTML += row;
                        });

                        // Clear dan autofocus input barcode
                        $('#barcode').val('').focus();
                    }
                });
        }

        // Handle view items button
        document.querySelectorAll('.view-items').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const poolingNumber = this.getAttribute('data-pooling');
                document.getElementById('modalPoolingNumber').textContent = poolingNumber;
                document.getElementById('poolingNumberInput').value = poolingNumber;
                
                // Reset processing state
                isProcessing = false;
                if (activeSwal) {
                    activeSwal.close();
                    activeSwal = null;
                }
                
                loadItems(poolingNumber);
                $('#itemsModal').modal('show');

                // Tambahkan event listener untuk modal shown
                $('#itemsModal').on('shown.bs.modal', function () {
                    $('#barcode').focus();
                });
            });
        });
    });
</script>
@endpush
@endsection