@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description">
                <h1>Verify Stock - Chemical & FO</h1>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-center align-items-center">
                    <h5 class="card-title mb-0">Stock Verification Status</h5>
                    <span class="badge bg-primary ms-2">Week {{ $verifyHistory->first()->week_number ?? '-' }}</span>
                </div>
                <div class="card-body d-flex justify-content-center" style="margin-top: 2rem;">
                <style>
                        .btn-group {
                            display: flex;
                            align-items: flex-end;
                            min-height: 130px;
                        }
                        .btn-xl.podium-1 {
                            height: 130px !important;
                            margin-bottom: 0;
                        }
                        .btn-xl.podium-2 {
                            height: 100px !important;
                            margin-bottom: 0;
                        }
                        .btn-xl.podium-3 {
                            height: 70px !important;
                            margin-bottom: 0;
                        }
                        .crown-container {
                            position: relative;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                        }
                        .crown-icon {
                            position: absolute;
                            top: -35px;
                            width: 50px;
                            height: 50px;
                        }
                    </style>
                    <div class="btn-group" role="group">
                        @php
                            $accuracies = [
                                'mikro' => $verificationStatus['mikro']['accuracy'] ?? 0,
                                'mikro_supp' => $verificationStatus['mikro_supp']['accuracy'] ?? 0,
                                'cpo' => $verificationStatus['cpo']['accuracy'] ?? 0,
                                'ci' => $verificationStatus['ci']['accuracy'] ?? 0
                            ];
                            
                            // Sort accuracies in descending order
                            arsort($accuracies);
                            
                            // Get the highest accuracy
                            $highestAccuracy = max($accuracies);
                            
                            // Determine podium positions
                            $podiumPositions = [];
                            $position = 1;
                            $lastAccuracy = null;
                            
                            foreach ($accuracies as $type => $accuracy) {
                                if ($accuracy == 0) {
                                    $podiumPositions[$type] = 3;
                                } else {
                                    if ($lastAccuracy !== null && $accuracy < $lastAccuracy) {
                                        $position++;
                                    }
                                    $podiumPositions[$type] = min($position, 3);
                                    $lastAccuracy = $accuracy;
                                }
                            }
                        @endphp
                        
                        <div class="crown-container">
                            @if(($verificationStatus['mikro']['accuracy'] == 100) || ($verificationStatus['mikro']['accuracy'] == $highestAccuracy && $verificationStatus['mikro']['accuracy'] > 0))
                                <img src="{{ asset('assets/images/crown.png') }}" alt="crown" class="crown-icon">
                            @endif
                            <button type="button" class="btn-xl podium-{{ $podiumPositions['mikro'] }} {{ $verificationStatus['mikro']['verified'] ? 'btn-success' : 'btn-warning' }}">
                                <div class="d-flex flex-column align-items-center">
                                    <span>MICRO MEDIA</span>
                                    <i class="material-icons-two-tone">{{ $verificationStatus['mikro']['verified'] ? 'check_circle' : 'pending' }}</i>
                                    @if($verificationStatus['mikro']['accuracy'])
                                        @php
                                            $accuracy = $verificationStatus['mikro']['accuracy'];
                                            if ((float)$accuracy == 100) {
                                                $badgeClass = 'bg-success';
                                            } elseif ((float)$accuracy >= 80) {
                                                $badgeClass = 'bg-warning';
                                            } else {
                                                $badgeClass = 'bg-danger';
                                            }
                                        @endphp
                                        <span class="badge {{ $badgeClass }} mt-1">{{ number_format($accuracy, 2) }}%</span>
                                    @endif
                                </div>
                            </button>
                        </div>
                        <div class="crown-container">
                            @if(($verificationStatus['mikro_supp']['accuracy'] == 100) || ($verificationStatus['mikro_supp']['accuracy'] == $highestAccuracy && $verificationStatus['mikro_supp']['accuracy'] > 0))
                                <img src="{{ asset('assets/images/crown.png') }}" alt="crown" class="crown-icon">
                            @endif
                            <button type="button" class="btn-xl podium-{{ $podiumPositions['mikro_supp'] }} {{ $verificationStatus['mikro_supp']['verified'] ? 'btn-success' : 'btn-warning' }}">
                                <div class="d-flex flex-column align-items-center">
                                    <span>MICRO SUPP</span>
                                    <i class="material-icons-two-tone">{{ $verificationStatus['mikro_supp']['verified'] ? 'check_circle' : 'pending' }}</i>
                                    @if($verificationStatus['mikro_supp']['accuracy'])
                                        @php
                                            $accuracy = $verificationStatus['mikro_supp']['accuracy'];
                                            if ((float)$accuracy == 100) {
                                                $badgeClass = 'bg-success';
                                            } elseif ((float)$accuracy >= 80) {
                                                $badgeClass = 'bg-warning';
                                            } else {
                                                $badgeClass = 'bg-danger';
                                            }
                                        @endphp
                                        <span class="badge {{ $badgeClass }} mt-1">{{ number_format($accuracy, 2) }}%</span>
                                    @endif
                                </div>
                            </button>
                        </div>
                        <div class="crown-container">
                            @if(($verificationStatus['cpo']['accuracy'] == 100) || ($verificationStatus['cpo']['accuracy'] == $highestAccuracy && $verificationStatus['cpo']['accuracy'] > 0))
                                <img src="{{ asset('assets/images/crown.png') }}" alt="crown" class="crown-icon">
                            @endif
                            <button type="button" class="btn-xl podium-{{ $podiumPositions['cpo'] }} {{ $verificationStatus['cpo']['verified'] ? 'btn-success' : 'btn-warning' }}">
                                <div class="d-flex flex-column align-items-center">
                                    <span>CPO</span>
                                    <i class="material-icons-two-tone">{{ $verificationStatus['cpo']['verified'] ? 'check_circle' : 'pending' }}</i>
                                    @if($verificationStatus['cpo']['accuracy'])
                                        @php
                                            $accuracy = $verificationStatus['cpo']['accuracy'];
                                            if ((float)$accuracy == 100) {
                                                $badgeClass = 'bg-success';
                                            } elseif ((float)$accuracy >= 80) {
                                                $badgeClass = 'bg-warning';
                                            } else {
                                                $badgeClass = 'bg-danger';
                                            }
                                        @endphp
                                        <span class="badge {{ $badgeClass }} mt-1">{{ number_format($accuracy, 2) }}%</span>
                                    @endif
                                </div>
                            </button>
                        </div>
                        <div class="crown-container">
                            @if(($verificationStatus['ci']['accuracy'] == 100) || ($verificationStatus['ci']['accuracy'] == $highestAccuracy && $verificationStatus['ci']['accuracy'] > 0))
                                <img src="{{ asset('assets/images/crown.png') }}" alt="crown" class="crown-icon">
                            @endif
                            <button type="button" class="btn-xl podium-{{ $podiumPositions['ci'] }} {{ $verificationStatus['ci']['verified'] ? 'btn-success' : 'btn-warning' }}">
                                <div class="d-flex flex-column align-items-center">
                                    <span>CI</span>
                                    <i class="material-icons-two-tone">{{ $verificationStatus['ci']['verified'] ? 'check_circle' : 'pending' }}</i>
                                    @if($verificationStatus['ci']['accuracy'])
                                        @php
                                            $accuracy = $verificationStatus['ci']['accuracy'];
                                            if ((float)$accuracy == 100) {
                                                $badgeClass = 'bg-success';
                                            } elseif ((float)$accuracy >= 80) {
                                                $badgeClass = 'bg-warning';
                                            } else {
                                                $badgeClass = 'bg-danger';
                                            }
                                        @endphp
                                        <span class="badge {{ $badgeClass }} mt-1">{{ number_format($accuracy, 2) }}%</span>
                                    @endif
                                </div>
                            </button>
                        </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 mb-0">Stock Verification History</h5>
                    <div class="page-description-actions">
                        <a href="javascript:void(0)" onclick="confirmRemedialVerify()" class="btn btn-warning"><i class="material-icons">refresh</i>Remedial verify</a>
                    </div>
                </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:20%; text-align: center;">Week</th>
                                <th style="width:20%; text-align: center;">Verify Date</th>
                                <th style="width:20%; text-align: center;">Accuracy (%)</th>
                                <th style="width:20%; text-align: center;">Verified By</th>
                                <th style="width:20%; text-align: center;">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($verifyHistory as $history)
                            <tr>
                                <td style="text-align: center">W{{ $history->week_number }}</td>
                                <td style="text-align: center">{{ $history->updated_at->format('Y-m-d H:i:s') }}</td>
                                <td style="text-align: center">
                                    @php
                                        $accuracy = $history->accuracy;
                                        $displayText = '';
                                        
                                        if ($accuracy === null) {
                                            $displayText = '-';
                                        } elseif ((float)$accuracy == 100) {
                                            $displayText = '<span class="badge bg-success">' . number_format((float)$accuracy, 2) . '%</span>';
                                        } elseif ((float)$accuracy >= 80) {
                                            $displayText = '<span class="badge bg-warning">' . number_format((float)$accuracy, 2) . '%</span>';
                                        } else {
                                            $displayText = '<span class="badge bg-danger">' . number_format((float)$accuracy, 2) . '%</span>';
                                        }
                                    @endphp
                                    {!! $displayText !!}
                                </td>
                                <td style="text-align: center">{{ $history->verified_by ?? '-' }}</td>
                                <td style="text-align: center">
                                    @if($history->accuracy === null && $history->verified_by === null)
                                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#verifyModal" data-verify-id="{{ $history->id }}">Open</button>
                                    @else
                                        <span class="badge bg-dark">Done</span>
                                        <button type="button" class="btn btn-info btn-sm ms-2" onclick="showHistory('{{ $history->verify_pooling }}')">
                                            <i class="material-icons">visibility</i>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Verify Modal -->
    <div class="modal fade" id="verifyModal" tabindex="-1" aria-labelledby="verifyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="verifyModalLabel">Verify Stock</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <div class="input-group">
                            <input type="text" id="barcodeCpo" class="form-control" placeholder="Scan atau masukkan barcode" autofocus />
                            <button type="button" class="btn btn-primary" id="scanButtonCpo">
                                <i class="material-icons-two-tone">qr_code_scanner</i>
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="datatable2" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th style="width:13%">Item Code</th>
                                    <th style="width:22%">Item Description</th>
                                    <th style="width:13%">Lot Number</th>
                                    <th style="width:13%">Exp Date</th>
                                    <th style="width:13%">Quantity</th>
                                    <th style="width:13%">UOM</th>
                                    <th style="width:13%">Action</th>
                                </tr>
                            </thead>
                            <tbody id="itemTableBodyCpo">
                            </tbody>
                        </table>
                    </div>
                    <div class="text-center mt-3">
                        <button id="submitVerificationCpo" class="btn btn-success">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Scanner -->
    <div class="modal fade" id="scannerModalCpo" 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 History -->
    <div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <h5 class="modal-title mb-0 me-2" id="historyModalLabel" style="color:red">Ketidaksesuaian item saat verify</h5>
                        <span class="badge bg-primary" id="weekNumberBadge">Week -</span>
                    </div>
                    <button type="button" class="btn-close ms-3" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table" id="historyTable">
                            <thead>
                                <tr>
                                    <th>Barcode</th>
                                    <th>Item Code</th>
                                    <th>Item Description</th>
                                    <th>UOM</th>
                                    <th>Lot Number</th>
                                    <th>Exp Date</th>
                                    <th>Qty DB saat verify</th>                                    
                                    <th style="text-align: center">Qty Not Matching</th>
                                    <th>Conclusion</th>
                                </tr>
                            </thead>
                            <tbody id="historyTableBody">
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="7" class="text-center">
                                        Accuracy <span class="badge" id="accuracyBadge">-</span>
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@push('scripts')
<script src="{{ asset('assets/js/pages/datatables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/datatables.min.js') }}"></script>
<script src="https://unpkg.com/html5-qrcode"></script>
<script>
    let scannedItemsCpo = [];
    let currentVerifyId;

    document.getElementById('barcodeCpo').addEventListener('keydown', function(event) {
        // Prevent default action for scan button trigger
        if (event.key === 'Tab' || event.keyCode === 9) {
            event.preventDefault();
        }
    });

    document.getElementById('barcodeCpo').addEventListener('keypress', function(event) {
        // Delay process slightly to ensure complete barcode is captured
        setTimeout(() => {
            if (event.key === 'Enter') {
                const barcode = this.value.trim(); // Trim to remove any extra spaces
                // Remove any non-printable characters
                const cleanBarcode = barcode.replace(/[^\x20-\x7E]/g, '');
                
                if (cleanBarcode) {
                    this.value = cleanBarcode;
                    processBarcodeInputCpo(cleanBarcode);
                }
            }
        }, 50);
    });

    function processBarcodeInputCpo(barcode) {
        fetch(`/api/get-item-by-barcodecpo/${barcode}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Cek apakah item sudah ada di scannedItemsCpo
                    const existingItem = scannedItemsCpo.find(item => item.barcode === barcode);
                    
                    if (existingItem) {
                        // Jika item sudah ada, tambahkan quantity
                        existingItem.quantity += 1;
                    } else {
                        // Jika item belum ada, tambahkan item baru
                        const newItem = {
                            barcode: barcode,
                            item_code: data.item.item_code,
                            item_description: data.item.item_description,
                            lot_number: data.item.lot_number,
                            exp_date: data.item.exp_date,
                            quantity: 1,
                            uom: data.item.uom
                        };
                        scannedItemsCpo.push(newItem);
                    }
                    
                    updateItemTableCpo();
                    document.getElementById('barcodeCpo').value = '';
                    document.getElementById('barcodeCpo').focus();
                } else {
                    Swal.fire('Error', data.message, 'error');
                    document.getElementById('barcodeCpo').value = '';
                    document.getElementById('barcodeCpo').focus();
                }
            });
    }

    function updateItemTableCpo() {
        const tbody = document.getElementById('itemTableBodyCpo');
        tbody.innerHTML = '';
        scannedItemsCpo.forEach((item, index) => {
            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}</td>
                <td>${item.uom}</td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm" onclick="deleteItemCpo(${index})">
                        <i class="material-icons-two-tone">delete</i>
                    </button>
                </td>
            `;
            tbody.appendChild(row);
        });
        
        if (scannedItemsCpo.length > 0) {
            const lastItem = scannedItemsCpo[scannedItemsCpo.length - 1];
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            Toast.fire({
                icon: 'success',
                title: `Berhasil scan item: ${lastItem.item_description}`
            });
        }
    }

    function deleteItemCpo(index) {
        const deletedItem = scannedItemsCpo[index];
        scannedItemsCpo.splice(index, 1);
        updateItemTableCpo();
        
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        Toast.fire({
            icon: 'warning',
            title: `Berhasil menghapus item: ${deletedItem.item_description}`
        });
    }

    document.getElementById('submitVerificationCpo').addEventListener('click', function() {
        if (scannedItemsCpo.length === 0) {
            Swal.fire('Error', 'Belum ada item yang discan', 'error');
            return;
        }

        Swal.fire({
            title: 'Konfirmasi',
            text: "Apakah Anda yakin ingin mengirimkan verifikasi?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya',
            cancelButtonText: 'Tidak'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch('/get-stock-data-cpo')
                    .then(response => response.json())
                    .then(stockData => {
                        const scannedQuantities = {};
                        scannedItemsCpo.forEach(item => {
                            const key = `${item.item_code}-${item.lot_number}`;
                            if (scannedQuantities[key]) {
                                scannedQuantities[key] = {
                                    ...item,
                                    quantity: parseFloat(scannedQuantities[key].quantity) + parseFloat(item.quantity)
                                };
                            } else {
                                scannedQuantities[key] = {
                                    ...item,
                                    quantity: parseFloat(item.quantity)
                                };
                            }
                        });

                        // Combine stock quantities first to avoid multiple counting
                        const combinedStockData = {};
                        stockData.forEach(item => {
                            const key = `${item.item_code}-${item.lot_number}`;
                            if (combinedStockData[key]) {
                                combinedStockData[key] = {
                                    ...item,
                                    quantity: parseFloat(combinedStockData[key].quantity) + parseFloat(item.quantity)
                                };
                            } else {
                                combinedStockData[key] = {
                                    ...item,
                                    quantity: parseFloat(item.quantity)
                                };
                            }
                        });

                        let accurateCount = 0;
                        Object.entries(combinedStockData).forEach(([key, stockItem]) => {
                            const scannedItem = scannedQuantities[key];
                            
                            if (scannedItem) {
                                const stockQty = parseFloat(stockItem.quantity || 0);
                                const scannedQty = parseFloat(scannedItem.quantity || 0);
                                
                                console.log('Comparing quantities:', {
                                    key,
                                    stockQty,
                                    scannedQty
                                });
                                
                                if (scannedQty <= stockQty) {
                                    accurateCount += scannedQty;
                                    console.log(`Adding scannedQty ${scannedQty} to accurateCount`);
                                } else {
                                    accurateCount += stockQty;
                                    console.log(`Adding stockQty ${stockQty} to accurateCount`);
                                }
                            }
                        });

                        const totalStock = Object.values(combinedStockData).reduce((sum, item) => sum + parseFloat(item.quantity || 0), 0);
                        console.log('Total stock after combining:', totalStock);
                        console.log('Final accurateCount:', accurateCount);

                        const accuracy = (accurateCount / totalStock) * 100;

                        Swal.fire({
                            title: `Stock ${accuracy.toFixed(2)}% Accurate`,
                            text: `Verification Accuracy: ${accuracy.toFixed(2)}%`,
                            icon: 'success'
                        }).then(() => {
                            fetch('/save-verification-cpo', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                                },
                                body: JSON.stringify({
                                    verify_id: currentVerifyId,
                                    accuracy: accuracy,
                                    items: scannedItemsCpo
                                })
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire('Success', data.message, 'success').then(() => {
                                        location.reload();
                                    });
                                } else {
                                    throw new Error(data.message || 'Gagal menyimpan data');
                                }
                            })
                            .catch(error => {
                                Swal.fire({
                                    title: 'Error',
                                    text: error.message || 'Terjadi kesalahan saat menyimpan data',
                                    icon: 'error'
                                });
                            });
                        });
                    });
            }
        });
    });

    let html5QrcodeScanner = null;

    function startScanner() {
        if (html5QrcodeScanner === null) {
            const scannerModal = new bootstrap.Modal(document.getElementById('scannerModalCpo'));
            scannerModal.show();
            
            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);
        $('#barcodeCpo').val(decodedText);
        
        // Trigger keypress enter
        const event = new KeyboardEvent('keypress', {
            key: 'Enter',
            code: 'Enter',
            keyCode: 13,
            which: 13,
            bubbles: true
        });
        document.getElementById('barcodeCpo').dispatchEvent(event);

        if (html5QrcodeScanner) {
            html5QrcodeScanner.clear();
            html5QrcodeScanner = null;
        }
        $('#scannerModalCpo').modal('hide');
        handleBarcodeInput(decodedText);
    }

    function onScanError(err) {
        // Handle scan error
    }

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

    $(document).ready(function() {
        $('#verifyModal').on('show.bs.modal', function (event) {
            currentVerifyId = $(event.relatedTarget).data('verify-id');
        });

        $('#verifyModal').on('shown.bs.modal', function () {
            $('#barcodeCpo').focus();
        });
        
        $('#verifyModal').on('hidden.bs.modal', function () {
            $('#barcodeCpo').val('');
            $('#itemTableBodyCpo').empty();
            scannedItemsCpo = [];
            currentVerifyId = null;
        });

        $('#scanButtonCpo').on('click', function() {
            startScanner();
        });

        // Tambahkan event listener untuk membersihkan scanner saat modal scanner ditutup
        $('#scannerModalCpo').on('hidden.bs.modal', function () {
            if (html5QrcodeScanner) {
                html5QrcodeScanner.clear();
                html5QrcodeScanner = null;
            }
        });

        // Disable click on scan button when input has focus
        document.getElementById('barcodeCpo').addEventListener('focus', function() {
            document.getElementById('scanButtonCpo').style.pointerEvents = 'none';
            setTimeout(() => {
                document.getElementById('scanButtonCpo').style.pointerEvents = 'auto';
            }, 100);
        });
    });

    function showHistory(verify_pooling) {
        fetch(`/api/verificationcpo-history/${verify_pooling}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const tbody = document.getElementById('historyTableBody');
                    tbody.innerHTML = '';
                    
                    // Update week number badge
                    document.getElementById('weekNumberBadge').textContent = `Week ${data.week_number}`;
                    
                    // Update accuracy badge dengan warna sesuai nilai
                    const accuracyBadge = document.getElementById('accuracyBadge');
                    const accuracy = parseFloat(data.accuracy);
                    let badgeClass = 'bg-secondary'; // default untuk '-'
                    
                    if (!isNaN(accuracy)) {
                        if (accuracy >= 90) {
                            badgeClass = 'bg-success';
                        } else if (accuracy >= 80) {
                            badgeClass = 'bg-warning';
                        } else {
                            badgeClass = 'bg-danger';
                        }
                        accuracyBadge.textContent = `${accuracy.toFixed(2)}%`;
                    } else {
                        accuracyBadge.textContent = '-';
                    }
                    
                    // Hapus semua class bg-* yang ada
                    accuracyBadge.className = 'badge ' + badgeClass;
                    
                    data.data.forEach(item => {
                        const row = document.createElement('tr');
                        const qtyColor = item.qty_notmatching.toString().includes('+') ? 'background-color: #cce5ff' : 'background-color: #ffe5cc';
                        
                        row.innerHTML = `
                            <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>${item.qty_db}</td>
                            <td style="text-align: center; ${qtyColor}">${item.qty_notmatching}</td>
                            <td style="${qtyColor}">${item.conclusion}</td>
                        `;
                        tbody.appendChild(row);
                    });
                    
                    const historyModal = new bootstrap.Modal(document.getElementById('historyModal'));
                    historyModal.show();
                } else {
                    Swal.fire('Error', data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire('Error', 'Gagal mengambil data history', 'error');
            });
    }

    function confirmRemedialVerify() {
        // Cek verifikasi terakhir pada minggu ini
        $.ajax({
            url: '{{ route("verify.check-last-cpo") }}',
            type: 'GET',
            success: function(response) {
                if (!response.can_create) {
                    let message = '';
                    if (!response.last_verify) {
                        message = 'Verifikasi terakhir belum selesai atau belum ada verifikasi.';
                    } else if (response.last_verify.accuracy == 100) {
                        message = 'Tidak bisa membuat remedial verify karena accuracy sudah 100%.';
                    } else if (response.expired) {
                        message = 'Tidak dapat membuat remedial karena sudah melewati batas waktu verifikasi.';
                    }
                    
                    Swal.fire({
                        title: 'Tidak Dapat Membuat Remedial',
                        text: message,
                        icon: 'warning',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                Swal.fire({
                    title: 'Buat Remedial Verify?',
                    text: "Anda akan membuat verifikasi baru untuk minggu ini",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Buat!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        createRemedialVerify();
                    }
                });
            },
            error: function(xhr) {
                Swal.fire({
                    title: 'Error',
                    text: 'Terjadi kesalahan saat memeriksa status verifikasi',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        });
    }

    function createRemedialVerify() {
        $.ajax({
            url: '{{ route("verify.create-remedial-cpo") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Berhasil!',
                        text: 'Remedial verify berhasil dibuat',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.reload();
                        }
                    });
                } else {
                    Swal.fire({
                        title: 'Gagal',
                        text: response.message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            },
            error: function(xhr) {
                Swal.fire({
                    title: 'Error',
                    text: 'Terjadi kesalahan saat membuat remedial verify',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        });
    }
</script>
@endpush

@endsection