@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description d-flex align-items-center">
                <div class="page-description-content flex-grow-1">
                    <h1>Usage Item - Microbiology</h1>
                </div>
                <div class="page-description-actions">
                    <a href="#" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#vizModal"><i class="material-icons">bar_chart</i>Visualization</a>
                    <a href="#" class="btn btn-success ms-2" data-bs-toggle="modal" data-bs-target="#exportModal"><i class="material-icons">print</i>Export to Excel</a>
                </div>
            </div>
        </div>
    </div>

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

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

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Record Usage</h5>
                </div>
                <div class="card-body">
                    <form id="barcodeForm" action="{{ route('expense_mikro.store') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="barcode" class="form-label">Barcode</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="barcode" name="barcode" required>
                                <button type="button" class="btn btn-primary" id="scanButton">
                                    <i class="material-icons-two-tone">qr_code_scanner</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Usage History</h5>
                </div>
                <div class="card-body">
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-3bulan-tab" data-bs-toggle="pill" data-bs-target="#pills-3bulan" type="button" role="tab" aria-controls="pills-3bulan" aria-selected="true">Last 3 Months</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-all-tab" data-bs-toggle="pill" data-bs-target="#pills-all" type="button" role="tab" aria-controls="pills-all" aria-selected="false">All History</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-3bulan" role="tabpanel" aria-labelledby="pills-3bulan-tab">
                            <div class="table-responsive">
                                <table id="datatable1" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th style="width:15%">Date</th>
                                            <th style="width:10%">Barcode</th>
                                            <th style="width:10%">Item Code</th>
                                            <th style="width:20%">Item Description</th>
                                            <th style="width:5%">UOM</th>
                                            <th style="width:10%">Lot Number</th>
                                            <th style="width:15%">Exp Date</th>
                                            <th style="width:5%" text-align="center">Quantity</th>
                                            <th style="width:10%">Input By</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $threeMonthsAgo = now()->subMonths(3); @endphp
                                        @foreach($historyMikroExpense as $item)
                                            @if($item->created_at >= $threeMonthsAgo)
                                            <tr>
                                                <td>{{ $item->created_at->format('Y-m-d H:i') }}</td>
                                                <td>
                                                    {{ $item->barcode }}
                                                    @if($item->notes)
                                                        <span class="badge bg-danger">{{ $item->notes }}</span>
                                                    @endif
                                                </td>
                                                <td>{{ $item->item_code }}</td>
                                                <td>{{ $item->item_description }}</td>
                                                <td>{{ $item->uom }}</td>
                                                <td>{{ $item->lot_number }}</td>
                                                <td>{{ $item->exp_date }}</td>
                                                <td style="text-align: center">{{ $item->quantity }}</td>
                                                <td>{{ $item->inputby }}</td> 
                                            </tr>
                                            @endif
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-all" role="tabpanel" aria-labelledby="pills-all-tab">
                            <div class="table-responsive">
                                <table id="datatable-all" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th style="width:15%">Date</th>
                                            <th style="width:10%">Barcode</th>
                                            <th style="width:10%">Item Code</th>
                                            <th style="width:20%">Item Description</th>
                                            <th style="width:5%">UOM</th>
                                            <th style="width:10%">Lot Number</th>
                                            <th style="width:15%">Exp Date</th>
                                            <th style="width:5%" text-align="center">Quantity</th>
                                            <th style="width:10%">Input By</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($historyMikroExpense as $item)
                                        <tr>
                                            <td>{{ $item->created_at->format('Y-m-d H:i') }}</td>
                                            <td>
                                                {{ $item->barcode }}
                                                @if($item->notes)
                                                    <span class="badge bg-danger">{{ $item->notes }}</span>
                                                @endif
                                            </td>
                                            <td>{{ $item->item_code }}</td>
                                            <td>{{ $item->item_description }}</td>
                                            <td>{{ $item->uom }}</td>
                                            <td>{{ $item->lot_number }}</td>
                                            <td>{{ $item->exp_date }}</td>
                                            <td style="text-align: center">{{ $item->quantity }}</td>
                                            <td>{{ $item->inputby }}</td> 
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

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

    <!-- Modal Visualization -->
    <div class="modal fade" id="vizModal" tabindex="-1" aria-labelledby="vizModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="vizModalLabel">Usage Visualization - Microbiology</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label for="vizStartDate" class="form-label">From</label>
                            <input type="date" class="form-control" id="vizStartDate">
                        </div>
                        <div class="col-md-3">
                            <label for="vizEndDate" class="form-label">To</label>
                            <input type="date" class="form-control" id="vizEndDate">
                        </div>
                        <div class="col-md-3">
                            <label for="vizInputBy" class="form-label">Input By</label>
                            <select class="form-select" id="vizInputBy">
                                <option value="">All</option>
                                @php
                                    $uniqueUsers = $historyMikroExpense->pluck('inputby')->unique()->sort();
                                @endphp
                                @foreach($uniqueUsers as $user)
                                    <option value="{{ $user }}">{{ $user }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="button" class="btn btn-primary w-100" id="vizApplyFilter">
                                <i class="material-icons">filter_list</i> Apply Filter
                            </button>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <label for="vizSortOrder" class="form-label">Sort</label>
                            <select class="form-select" id="vizSortOrder">
                                <option value="desc">Qty Terbanyak → Terkecil</option>
                                <option value="asc">Qty Terkecil → Terbanyak</option>
                                <option value="alpha">A-Z (Item Description)</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="vizTopN" class="form-label">Tampilkan</label>
                            <select class="form-select" id="vizTopN">
                                <option value="10">Top 10</option>
                                <option value="20">Top 20</option>
                                <option value="50">Top 50</option>
                                <option value="0">Semua</option>
                            </select>
                        </div>
                    </div>
                    <hr>
                    <div style="position: relative; min-height: 400px;">
                        <canvas id="vizChart"></canvas>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
<script src="https://unpkg.com/html5-qrcode"></script>
<script src="{{ asset('assets/js/pages/datatables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/datatables.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(document).ready(function() {
        $('#datatable-all').DataTable();

        // === Visualization Chart ===
        var vizChart = null;
        @php
            $vizData = $historyMikroExpense->map(function($item) {
                return [
                    'item_description' => $item->item_description,
                    'item_code' => $item->item_code,
                    'quantity' => $item->quantity,
                    'inputby' => $item->inputby,
                    'created_at' => $item->created_at->format('Y-m-d'),
                ];
            })->values();
        @endphp
        var allExpenseData = {!! json_encode($vizData) !!};

        function buildChart() {
            var startDate = $('#vizStartDate').val();
            var endDate = $('#vizEndDate').val();
            var inputBy = $('#vizInputBy').val();
            var sortOrder = $('#vizSortOrder').val();
            var topN = parseInt($('#vizTopN').val());

            var filtered = allExpenseData.filter(function(item) {
                if (startDate && item.created_at < startDate) return false;
                if (endDate && item.created_at > endDate) return false;
                if (inputBy && item.inputby !== inputBy) return false;
                return true;
            });

            var grouped = {};
            filtered.forEach(function(item) {
                var key = item.item_description;
                if (!grouped[key]) {
                    grouped[key] = { label: key, code: item.item_code, qty: 0 };
                }
                grouped[key].qty += item.quantity;
            });

            var items = Object.values(grouped);

            if (sortOrder === 'desc') {
                items.sort(function(a, b) { return b.qty - a.qty; });
            } else if (sortOrder === 'asc') {
                items.sort(function(a, b) { return a.qty - b.qty; });
            } else {
                items.sort(function(a, b) { return a.label.localeCompare(b.label); });
            }

            if (topN > 0) {
                items = items.slice(0, topN);
            }

            var labels = items.map(function(i) { return i.label.length > 30 ? i.label.substring(0, 30) + '...' : i.label; });
            var data = items.map(function(i) { return i.qty; });
            var colors = items.map(function(_, idx) {
                var hue = (idx * 37) % 360;
                return 'hsl(' + hue + ', 70%, 55%)';
            });

            if (vizChart) { vizChart.destroy(); }

            var ctx = document.getElementById('vizChart').getContext('2d');
            vizChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Total Qty Usage',
                        data: data,
                        backgroundColor: colors,
                        borderColor: colors.map(function(c) { return c.replace('55%', '40%'); }),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    indexAxis: items.length > 15 ? 'y' : 'x',
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                title: function(ctx) { return items[ctx[0].dataIndex].label; },
                                label: function(ctx) { return 'Qty: ' + ctx.raw + ' | Code: ' + items[ctx.dataIndex].code; }
                            }
                        }
                    },
                    scales: {
                        x: { ticks: { maxRotation: items.length > 15 ? 0 : 45, font: { size: 11 } } },
                        y: { beginAtZero: true }
                    }
                }
            });
        }

        $('#vizApplyFilter, #vizSortOrder, #vizTopN').on('change click', function() { buildChart(); });
        $('#vizModal').on('shown.bs.modal', function() { buildChart(); });

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

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

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

        let html5QrcodeScanner = null;
        let isProcessing = false;

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

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

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

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

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

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

                html5QrcodeScanner.render(onScanSuccess, onScanError);
            }
        }

        function onScanSuccess(decodedText) {
            if (isProcessing) return;
            isProcessing = true;

            const cleanBarcode = decodedText.replace(/[^\x20-\x7E]/g, '');
            $('#barcode').val(cleanBarcode);
            if (html5QrcodeScanner) {
                html5QrcodeScanner.clear();
                html5QrcodeScanner = null;
            }
            $('#scannerModal').modal('hide');
            $('#barcodeForm').submit();
        }

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

        $('#barcodeForm').on('submit', function(e) {
            e.preventDefault();

            var barcode = $('#barcode').val();

            if (barcode === '') {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Please enter a barcode.',
                    showConfirmButton: true
                });
                return;
            }

            $.ajax({
                url: `/expense-item-details-mikro/${barcode}`,
                type: 'GET',
                success: function(response) {
                    var itemName = response.item_name;
                    var expDate = new Date(response.exp_date);
                    var today = new Date();
                    
                    if (expDate < today) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Item Kadaluarsa',
                            text: 'Item ini sudah kadaluarsa (ED)! Silahkan lakukan pemusnahan.',
                            showConfirmButton: true
                        });
                        $('#barcode').val('');
                        $('#barcode').focus();
                        return;
                    }

                    Swal.fire({
                        title: 'Are you sure?',
                        text: `Do you want to record usage for ${itemName}?`,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, record it!',
                        cancelButtonText: 'No, cancel!',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: '{{ route("expense_mikro.store") }}',
                                type: 'POST',
                                data: {
                                    barcode: barcode,
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Success',
                                        text: response.success,
                                        showConfirmButton: false,
                                        timer: 1000
                                    });
                                    $('#barcode').val('');
                                    $('#barcode').focus();
                                    location.reload();
                                },
                                error: function(xhr) {
                                    var errorMessage = xhr.responseJSON.error || 'Failed to record barcode.';
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: errorMessage,
                                        showConfirmButton: true
                                    });
                                    $('#barcode').val('');
                                    $('#barcode').focus();
                                }
                            });
                        } else {
                            $('#barcode').val('');
                            $('#barcode').focus();
                        }
                    });
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Item not found.',
                        showConfirmButton: true
                    });
                    $('#barcode').val('');
                    $('#barcode').focus();
                }
            });
        });
    });
</script>
@endpush
@endsection