@extends('layouts.authUser')

@section('content')
<h2>Inventori / Pengimbas QR kod</h2>
    
<script src="{{ asset('lib/bootstrap.bundle.min.js') }}"></script>
<!-- HTML5 QR Code Library -->
<script src="{{ asset('lib/html5-qrcode.min.js') }}"></script>

<style>
    main {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #reader {
        width: 600px;
        margin-top: 30px;
    }
    #result {
        text-align: center;
        font-size: 1.5rem;
        margin-top: 20px;
    }
</style>

<main>
    <div id="reader"></div>
    <div id="result"></div>
</main>

<!-- Modal Structure -->
<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="itemModalLabel"><b>Butiran peralatan makmal</b></h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="itemDetails">
                <!-- Item details will be dynamically populated here -->
            </div>
        </div>
    </div>
</div>
<script>
    const scanner = new Html5QrcodeScanner('reader', {
    qrbox: {
        width: 250,
        height: 250,
    },
    fps: 20,
});

scanner.render(success, error);

function success(result) {
    fetch(result)
        .then(response => {
            if (!response.ok) {
                throw new Error('Respons rangkaian tidak baik');
            }
            return response.json();
        })
        .then(item => {
            console.log(item);
            // Access related data safely
            const supplierName = item.supplier ? item.supplier.name : 'N/A'; // Adjust based on your Supplier model field
            const locationName = item.item_location ? item.item_location.storageRoomNo : 'N/A'; // Adjust based on your ItemLocation model field
            const categoryName = item.item_category ? item.item_category.itemCategory_name : 'N/A'; // Adjust based on your ItemCategory model field
            
            const expiredDate = item.expired_date === null 
                ? 'TIADA' 
                : new Date(item.expired_date).toLocaleDateString('ms-MY', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });

            const itemName = item.item_measurement === null 
                ? item.item_name 
                : `${item.item_name} [${item.item_measurement}]`;

            // Populate the modal with item details
            const itemDetails = `
                <p><b>Nama alat radas:</b> ${itemName}</p>
                <p><b>No. kod:</b> ${item.item_series_num}</p>
                <p><b>No. bilik penyediaan:</b> ${locationName}</p>
                <p><b>Kategori:</b> ${categoryName}</p>
                <p><b>Kuantiti terima:</b> ${item.item_quantity}</p>
                <p><b>Kuantiti baki:</b> ${item.item_currentQuantity}</p>
                <p><b>Harga seunit:</b> RM ${item.item_price}</p>
                <p><b>Tarikh luput:</b> ${expiredDate}</p>
                <p><b>Pembekal:</b> ${supplierName}</p>
            `;

            // Populate the modal with item details
            document.getElementById('itemDetails').innerHTML = itemDetails;

            // Show the modal using Bootstrap's modal method
            const itemModal = new bootstrap.Modal(document.getElementById('itemModal'));
            itemModal.show();
        })
        .catch(error => {
            console.error('Error fetching item details:', error);
        });

    // Stop the scanner
    scanner.clear();
}

function error(err) {
    console.error(err);
}

// Listen for the modal close event
const itemModalElement = document.getElementById('itemModal');
itemModalElement.addEventListener('hidden.bs.modal', function () {
    // Restart the scanner when the modal is closed
    scanner.render(success, error);
});
</script>
@endsection