@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description">
                <h1>Verify Stock - Microbiology</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">
                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-media-tab" data-bs-toggle="pill" data-bs-target="#pills-media" type="button" role="tab" aria-controls="pills-media" aria-selected="true">
                                Verify Media
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-supp-tab" data-bs-toggle="pill" data-bs-target="#pills-supp" type="button" role="tab" aria-controls="pills-supp" aria-selected="false">
                                Verify Supplement
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="pills-tabContent">
                        <!-- Media Stock History Tab -->
                        <div class="tab-pane fade show active" id="pills-media" role="tabpanel" aria-labelledby="pills-media-tab">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="card-title mb-0">Media - 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="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>

                        <!-- Supplement Stock History Tab -->
                        <div class="tab-pane fade" id="pills-supp" role="tabpanel" aria-labelledby="pills-supp-tab">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="card-title mb-0">Supplement - Verification History</h5>
                                <div class="page-description-actions">
                                    <a href="javascript:void(0)" onclick="confirmRemedialVerifySupp()" class="btn btn-warning">
                                        <i class="material-icons">refresh</i>Remedial verify
                                    </a>
                                </div>
                            </div>
                            <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($verifyHistorySupp 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="#verifyModalSupp" 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="showHistorySupp('{{ $history->verify_pooling }}')">
                                                    <i class="material-icons">visibility</i>
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            </div>
                        </div>
                    </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="barcodeMikro" class="form-control" placeholder="Scan atau masukkan barcode" autofocus />
                            <button type="button" class="btn btn-primary" id="scanButtonMikro">
                                <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="itemTableBodyMikro">
                            </tbody>
                        </table>
                    </div>
                    <div class="text-center mt-3">
                        <button id="submitVerificationMikro" class="btn btn-success">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Scanner -->
    <div class="modal fade" id="scannerModalMikro" 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>

    <!-- Verify Modal Supplement -->
    <div class="modal fade" id="verifyModalSupp" tabindex="-1" aria-labelledby="verifyModalSuppLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="verifyModalSuppLabel">Verify Stock - Supplement</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="barcodeMikroSupp" class="form-control" placeholder="Scan atau masukkan barcode" autofocus />
                            <button type="button" class="btn btn-primary" id="scanButtonMikroSupp">
                                <i class="material-icons-two-tone">qr_code_scanner</i>
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="datatable3" 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="itemTableBodyMikroSupp">
                            </tbody>
                        </table>
                    </div>
                    <div class="text-center mt-3">
                        <button id="submitVerificationMikroSupp" class="btn btn-success">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Scanner Supplement -->
    <div class="modal fade" id="scannerModalMikroSupp" tabindex="-1" aria-labelledby="scannerModalSuppLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="scannerModalSuppLabel">Scan Barcode - Supplement</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="readerSupp"></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>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="historyTableBody">
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="10" class="text-center">
                                        Accuracy <span class="badge" id="accuracyBadge">-</span>
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal History Supplement -->
    <div class="modal fade" id="historyModalSupp" tabindex="-1" aria-labelledby="historyModalSuppLabel" 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="historyModalSuppLabel" style="color:red">Ketidaksesuaian item saat verify - Supplement</h5>
                        <span class="badge bg-primary" id="weekNumberBadgeSupp">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="historyTableSupp">
                            <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>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="historyTableBodySupp">
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="10" class="text-center">
                                        Accuracy <span class="badge" id="accuracyBadgeSupp">-</span>
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@push('scripts')
{{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}}
<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 scannedItemsMikro = [];
    let currentVerifyId;
    let scannedItemsMikroSupp = [];
    let html5QrcodeScannerSupp = null;

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

    document.getElementById('barcodeMikro').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;
                    processBarcodeInput(cleanBarcode);
                }
            }
        }, 50);
    });

    function processBarcodeInput(barcode) {
        fetch(`/api/get-item-by-barcodemikro/${barcode}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Cek apakah item sudah ada di scannedItemsMikro
                    const existingItem = scannedItemsMikro.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
                        };
                        scannedItemsMikro.push(newItem);
                    }
                    
                    updateItemTableMikro();
                    document.getElementById('barcodeMikro').value = '';
                    document.getElementById('barcodeMikro').focus();
                } else {
                    Swal.fire('Error', data.message, 'error');
                    document.getElementById('barcodeMikro').value = '';
                    document.getElementById('barcodeMikro').focus();
                }
            });
    }

    function updateItemTableMikro() {
        const tbody = document.getElementById('itemTableBodyMikro');
        tbody.innerHTML = '';
        scannedItemsMikro.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="deleteItemMikro(${index})">
                        <i class="material-icons-two-tone">delete</i>
                    </button>
                </td>
            `;
            tbody.appendChild(row);
        });
        
        if (scannedItemsMikro.length > 0) {
            const lastItem = scannedItemsMikro[scannedItemsMikro.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 deleteItemMikro(index) {
        const deletedItem = scannedItemsMikro[index];
        scannedItemsMikro.splice(index, 1);
        updateItemTableMikro();
        
        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('submitVerificationMikro').addEventListener('click', function() {
        if (scannedItemsMikro.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-mikro')
                    .then(response => response.json())
                    .then(stockData => {
                        // 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)
                                };
                            }
                        });

                        const totalStock = Object.values(combinedStockData).reduce((sum, item) => sum + parseFloat(item.quantity || 0), 0);
                        
                        const scannedQuantities = {};
                        scannedItemsMikro.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)
                                };
                            }
                        });

                        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);
                                
                                if (scannedQty <= stockQty) {
                                    accurateCount += scannedQty;
                                } else {
                                    accurateCount += stockQty;
                                }
                            }
                        });

                        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-mikro', {
                                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: scannedItemsMikro
                                })
                            })
                            .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('scannerModalMikro'));
            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);
        $('#barcodeMikro').val(decodedText);
        
        // Trigger keypress enter
        const event = new KeyboardEvent('keypress', {
            key: 'Enter',
            code: 'Enter',
            keyCode: 13,
            which: 13,
            bubbles: true
        });
        document.getElementById('barcodeMikro').dispatchEvent(event);

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

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

    $('#scannerModalMikro').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 () {
            $('#barcodeMikro').focus();
        });
        
        $('#verifyModal').on('hidden.bs.modal', function () {
            $('#barcodeMikro').val('');
            $('#itemTableBodyMikro').empty();
            scannedItemsMikro = [];
            currentVerifyId = null;
        });

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

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

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

        $('#verifyModalSupp').on('shown.bs.modal', function () {
            $('#barcodeMikroSupp').focus();
        });
        
        $('#verifyModalSupp').on('hidden.bs.modal', function () {
            $('#barcodeMikroSupp').val('');
            $('#itemTableBodyMikroSupp').empty();
            scannedItemsMikroSupp = [];
            currentVerifyId = null;
        });

        $('#scanButtonMikroSupp').on('click', function() {
            startScannerSupp();
        });

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

    function showHistory(verify_pooling) {
        fetch(`/api/verificationmikro-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>
                            <td>
                                ${parseInt(item.qty_notmatching) > 0 ? `
                                    <button class="btn btn-warning btn-sm double-scan" data-id="${item.id}" title="Double Scan">
                                        <i class="material-icons">content_copy</i>
                                    </button>
                                    <button class="btn btn-info btn-sm register-item" data-id="${item.id}" title="Register Item">
                                        <i class="material-icons">add_circle</i>
                                    </button>
                                ` : `
                                    <button class="btn btn-danger btn-sm missed-verify" data-id="${item.id}" title="Terlewat Verify">
                                        <i class="material-icons">error</i>
                                    </button>
                                    <button class="btn btn-primary btn-sm record-usage" data-id="${item.id}" title="Record Usage">
                                        <i class="material-icons">assignment</i>
                                    </button>
                                `}
                            </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 showHistorySupp(verify_pooling) {
        fetch(`/api/verificationmikro-historysupp/${verify_pooling}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const tbody = document.getElementById('historyTableBodySupp');
                    tbody.innerHTML = '';
                    
                    // Update week number badge
                    document.getElementById('weekNumberBadgeSupp').textContent = `Week ${data.week_number}`;
                    
                    // Update accuracy badge dengan warna sesuai nilai
                    const accuracyBadgeSupp = document.getElementById('accuracyBadgeSupp');
                    const accuracySupp = parseFloat(data.accuracy);
                    let badgeClassSupp = 'bg-secondary'; // default untuk '-'
                    
                    if (!isNaN(accuracySupp)) {
                        if (accuracySupp >= 90) {
                            badgeClassSupp = 'bg-success';
                        } else if (accuracySupp >= 80) {
                            badgeClassSupp = 'bg-warning';
                        } else {
                            badgeClassSupp = 'bg-danger';
                        }
                        accuracyBadgeSupp.textContent = `${accuracySupp.toFixed(2)}%`;
                    } else {
                        accuracyBadgeSupp.textContent = '-';
                    }
                    
                    // Hapus semua class bg-* yang ada
                    accuracyBadgeSupp.className = 'badge ' + badgeClassSupp;
                    
                    data.data.forEach(item => {
                        const row = document.createElement('tr');
                        const qtyColorSupp = 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; ${qtyColorSupp}">${item.qty_notmatching}</td>
                            <td style="${qtyColorSupp}">${item.conclusion}</td>
                            <td>
                                ${parseInt(item.qty_notmatching) > 0 ? `
                                    <button class="btn btn-warning btn-sm double-scan" data-id="${item.id}" title="Double Scan">
                                        <i class="material-icons">content_copy</i>
                                    </button>
                                    <button class="btn btn-info btn-sm register-item" data-id="${item.id}" title="Register Item">
                                        <i class="material-icons">add_circle</i>
                                    </button>
                                ` : `
                                    <button class="btn btn-danger btn-sm missed-verify" data-id="${item.id}" title="Terlewat Verify">
                                        <i class="material-icons">error</i>
                                    </button>
                                    <button class="btn btn-primary btn-sm record-usage" data-id="${item.id}" title="Record Usage">
                                        <i class="material-icons">assignment</i>
                                    </button>
                                `}
                            </td>
                        `;
                        tbody.appendChild(row);
                    });
                    
                    const historyModalSupp = new bootstrap.Modal(document.getElementById('historyModalSupp'));
                    historyModalSupp.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-mikro") }}',
            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-mikro") }}',
            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'
                });
            }
        });
    }

    // Add event listener for supplement barcode input
    document.getElementById('barcodeMikroSupp').addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            const barcode = document.getElementById('barcodeMikroSupp').value;
            fetch(`/api/get-item-by-barcodemikrosupp/${barcode}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const existingItem = scannedItemsMikroSupp.find(item => item.barcode === barcode);
                        
                        if (existingItem) {
                            // Increment quantity berdasarkan item code
                            if (existingItem.item_code === 'LMLEYE07' || existingItem.item_code === 'LMLEYE06') {
                                existingItem.quantity += 2;
                            } else {
                                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: (data.item.item_code === 'LMLEYE07' || data.item.item_code === 'LMLEYE06') ? 2 : 1,
                                uom: data.item.uom
                            };
                            scannedItemsMikroSupp.push(newItem);
                        }
                        
                        updateItemTableMikroSupp();
                        document.getElementById('barcodeMikroSupp').value = '';
                        document.getElementById('barcodeMikroSupp').focus();
                    } else {
                        Swal.fire('Error', data.message, 'error');
                        document.getElementById('barcodeMikroSupp').value = '';
                        document.getElementById('barcodeMikroSupp').focus();
                    }
                });
        }
    });

    function updateItemTableMikroSupp() {
        const tbody = document.getElementById('itemTableBodyMikroSupp');
        tbody.innerHTML = '';
        scannedItemsMikroSupp.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="deleteItemMikroSupp(${index})">
                        <i class="material-icons-two-tone">delete</i>
                    </button>
                </td>
            `;
            tbody.appendChild(row);
        });
        
        if (scannedItemsMikroSupp.length > 0) {
            const lastItem = scannedItemsMikroSupp[scannedItemsMikroSupp.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 deleteItemMikroSupp(index) {
        const deletedItem = scannedItemsMikroSupp[index];
        scannedItemsMikroSupp.splice(index, 1);
        updateItemTableMikroSupp();
        
        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}`
        });
    }

    // Add event listener for supplement verification submission
    document.getElementById('submitVerificationMikroSupp').addEventListener('click', function() {
        if (scannedItemsMikroSupp.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-mikrosupp')
                    .then(response => response.json())
                    .then(stockData => {
                        // 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)
                                };
                            }
                        });

                        const totalStock = Object.values(combinedStockData).reduce((sum, item) => sum + parseFloat(item.quantity || 0), 0);
                        
                        const scannedQuantities = {};
                        scannedItemsMikroSupp.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)
                                };
                            }
                        });

                        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);
                                
                                if (scannedQty <= stockQty) {
                                    accurateCount += scannedQty;
                                } else {
                                    accurateCount += stockQty;
                                }
                            }
                        });

                        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-mikrosupp', {
                                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: scannedItemsMikroSupp
                                })
                            })
                            .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'
                                });
                            });
                        });
                    });
            }
        });
    });

    // Add scanner functionality for supplement
    function startScannerSupp() {
        if (html5QrcodeScannerSupp === null) {
            const scannerModal = new bootstrap.Modal(document.getElementById('scannerModalMikroSupp'));
            scannerModal.show();
            
            html5QrcodeScannerSupp = new Html5QrcodeScanner("readerSupp", {
                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
            });

            html5QrcodeScannerSupp.render(onScanSuccessSupp, onScanErrorSupp);
        }
    }

    function onScanSuccessSupp(decodedText, decodedResult) {
        $('#barcodeMikroSupp').val(decodedText);
        
        const event = new KeyboardEvent('keypress', {
            key: 'Enter',
            code: 'Enter',
            keyCode: 13,
            which: 13,
            bubbles: true
        });
        document.getElementById('barcodeMikroSupp').dispatchEvent(event);

        if (html5QrcodeScannerSupp) {
            html5QrcodeScannerSupp.clear();
            html5QrcodeScannerSupp = null;
        }
        $('#scannerModalMikroSupp').modal('hide');
    }

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

    function confirmRemedialVerifySupp() {
        // Cek verifikasi terakhir pada minggu ini
        $.ajax({
            url: '{{ route("verify.check-last-mikrosupp") }}',
            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 Supplement',
                        text: message,
                        icon: 'warning',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

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

    function createRemedialVerifySupp() {
        $.ajax({
            url: '{{ route("verify.create-remedial-mikrosupp") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Berhasil!',
                        text: 'Remedial verify supplement 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 supplement',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        });
    }
</script>
@endpush

@endsection