@extends('webview.menset.main')

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('menset-mobile.validasi-qrcode.css') }}" />
@endpush

<!-- prettier-ignore -->
@section('content')
@include('webview.menset.components.comp-scanner-qrcode')
<div class="header content-page">
    <div class="left-container">
        <button id="btn-back" type="button" class="btn-link">
            <!-- prettier-ignore -->
            <img alt="left-white" src="{{ asset('asset-webview/menset/icons/left-white.png') }}" height="24" width="24">
            <span>Validasi QR Code</span>
        </button>
    </div>
</div>
<div class="container-information content-page">
    <div class="item-label">
        <h1 id="jumlah-aset">0</h1>
        <p>Belum divalidasi</p>
    </div>
    <button id="validation-qrcode" type="button" class="btn-secondary">
        <img alt="qrcode-icon" src="{{ asset('asset-webview/menset/icons/qrcode2-black.png') }}" height="24" width="24">
        Validasi QR
    </button>
</div>
<div class="card content-page">
    <div class="filter-container">
        <div class="filter-label inter-font">Filter</div>
        <div class="item-filter active" data-filter="">Semua</div>
        <div class="item-filter" data-filter="1">Tervalidasi</div>
        <div class="item-filter" data-filter="0">Belum validasi</div>
    </div>
    <div id="content-container" class="content-container"></div>
    <div id="card-footer" class="card-footer">
        <button id="btn-load" type="button" class="inter-font">Tampilkan selanjutnya</button>
    </div>
</div>
@endsection
<!-- prettier-ignore -->
@push('script')
<script type="text/javascript">
    $(window).on("beforeunload", function () {
        $(window).scrollTop(0);
    });

    $(document).ready(function () {
        $(window).scrollTop(0);

        window.$NAVIGATION_BOTTOM.addClass("d-none");

        const $BtnBack = $("#btn-back");

        const $ItemFilter = $('.item-filter');
        const $BtnValidationQrcode = $("#validation-qrcode");
        const $BtnCloseScanner = $("#close-scanner");
        const $ContentPage = $(".content-page");
        const $ScannerOverlay = $("#scanner-overlay");
        const $ScannerHeader = $("#scanner-header");
        const $JumlahAset = $("#jumlah-aset");
        const $ContentContainer = $("#content-container");
        const $CardFooter = $("#card-footer");
        const $BtnLoad = $("#btn-load");

        let isScannerOpen = false
        let HTML5QrcodeScanner = null
        let lastScannedCode = null;
        let isProcessing = false

        let page_number = 1
        let has_next = null
        let is_loading = false
        let filter_verified = null

        $BtnBack.click(function () {
            window.history.back();
        });

        $.ajax({
            method: "get",
            url: "{{ route('api.menset-mobile.v2.qr-validations.summary') }}",
            dataType: "json",
            async: true,
            success: function (response) {
                const data = response.data;

                const total = fn.formatRibuan(data.total);

                $JumlahAset.text(total);
            }
        });

        function onGenerateDataList(page_number, filter_verified) {
            $.ajax({
                type: "get",
                url: "{{ route('api.menset-mobile.v2.qr-validations') }}",
                data: { page: page_number, filter_verified },
                dataType: "json",
                async: true,
                beforeSend: function () {
                    is_loading = true
                    $CardFooter.removeClass('d-flex');
                },
                success: function (response) {
                    const data = response.data;

                    has_next = data.has_next;

                    data.assets.forEach(function (item) {
                        let checked = item.status_verifikasi === '1' ? "checked" : "";

                        const element = renderComponentRowListAsset(item.nama_aset, item.kode_aset, checked);

                        $ContentContainer.append(element);
                    })

                    if (has_next) {
                        $CardFooter.addClass('d-flex');
                    } else {
                        $CardFooter.removeClass('d-flex');
                    }
                },
                complete: function (response) {
                    is_loading = false
                }
            });
        }

        onGenerateDataList(page_number);

        function renderComponentRowListAsset(nama_aset, kode_aset, checked) {
            return `<div class="item-content">
                <div class="content-label">
                    <div class="label-image">
                        <img class="rounded-0" alt="gambar-23" src="{{ asset('asset-webview/menset/images/default-camera.png')}}" height="16" width="16">
                    </div>
                    <div class="label-text">
                        <div class="label-title inter-font">${nama_aset}</div>
                        <div class="label-subtitle inter-font">${kode_aset}</div>
                    </div>
                </div>
                <div class="checkbox-item">
                    <div class="custom-checkbox ${checked}"></div>
                </div>
            </div>`
        }

        $ItemFilter.click(function () {
            $ItemFilter.removeClass('active');
            $(this).addClass('active');

            // reset pagination
            page_number = 1
            const filter = $(this).data('filter');
            // kosongkan list data dulu
            $ContentContainer.empty();

            if (filter === '') {
                filter_verified = null
                onGenerateDataList(page_number);
            }

            if (filter === 1) {
                filter_verified = 1
                onGenerateDataList(page_number, 1);
            }

            if (filter === 0) {
                filter_verified = 0
                onGenerateDataList(page_number, 0);
            }
        });

        $BtnLoad.click(function () {
            page_number = page_number + 1;

            onGenerateDataList(page_number, filter_verified);
        })

        $BtnValidationQrcode.click(function () {
            onOpenScanner();
        })

        function onOpenScanner() {
            $ContentPage.addClass("d-none");
            $ScannerOverlay.addClass("active");
            $('body').css('overflow-y', 'hidden');

            if (!HTML5QrcodeScanner) {
                HTML5QrcodeScanner = new Html5Qrcode('scanner-qrcode')
            }

            Html5Qrcode
                .getCameras()
                .then(devices => {
                    if (devices && devices.length) {
                        // Gunakan kamera pertama (biasanya back camera)
                        const camera_id = devices[0].id;

                        const onSuccessCallback = (decodedText, decodedResult) => {
                            onScanSuccess(decodedText, decodedResult);
                        }

                        const options = {
                            fps: 10,
                            qrbox: { width: 250, height: 250 },
                            aspectRatio: 1.0,
                            disableFlip: false,
                        };

                        HTML5QrcodeScanner
                            .start(camera_id, options, onSuccessCallback)
                            .then(() => {
                                isScannerOpen = true
                                $ScannerHeader.text("Arahkan kamera ke QR Code");
                            })
                            .catch(error => {
                                console.error("Gagal memulai scanner:", error);
                                $ScannerHeader.text("Gagal memulai scanner. Periksa izin aplikasi", error);
                            });

                    } else {
                        console.error("Tidak ada kamera yang tersedia");
                        $ScannerHeader.text("Tidak ada kamera yang tersedia");
                    }
                })
                .catch(error => {
                    console.error("Gagal mengakses kamera:", err);
                    $ScannerHeader.text("Gagal mengakses kamera. Periksa izin aplikasi");
                })
        }

        $BtnCloseScanner.click(function () {
            onCloseScanner();
        })

        function onCloseScanner() {
            if (isScannerOpen && HTML5QrcodeScanner) {
                HTML5QrcodeScanner
                    .stop()
                    .then(() => {
                        HTML5QrcodeScanner.clear();
                        isScannerOpen = false

                        $ScannerHeader.empty();
                        $ScannerOverlay.removeClass("active");
                        $ContentPage.removeClass("d-none");
                        $('body').css('overflow-y', 'auto');
                    })
                    .catch(error => {
                        console.error("Error saat menutup scanner:", error);
                        $ScannerHeader.text("Gagal menutup scanner. Periksa izin aplikasi", error);
                    })
            } else {
                $ScannerHeader.empty();
                $ScannerOverlay.removeClass("active");
                $ContentPage.removeClass("d-none");
                $('body').css('overflow-y', 'auto');
            }
        }

        function onClearScannerInheritance() {
            if (isScannerOpen && HTML5QrcodeScanner) {
                HTML5QrcodeScanner
                    .stop()
                    .then(() => {
                        HTML5QrcodeScanner.clear();
                        isScannerOpen = false
                        $('body').css('overflow-y', 'auto');
                    })
                    .catch(error => {
                        console.error("Error saat menutup scanner:", error);
                        $ScannerHeader.text("Gagal menutup scanner. Periksa izin aplikasi", error);
                    })
            }
        }

        function onScanSuccess(decodedText, decodedResult) {
            // Cegah duplicate scan dalam waktu singkat
            if (isProcessing || lastScannedCode === decodedText) {
                return
            }

            isProcessing = true;
            lastScannedCode = decodedText;
            // proses scan
            onScanningQrcodeAsset(decodedText);
        }

        function onScanningQrcodeAsset(kode_aset) {
            $.ajax({
                method: "get",
                url: "{{ route('api.menset-mobile.v2.assets.details') }}",
                data: { kode_aset },
                dataType: "json",
                async: true,
                beforeSend: function () {
                    $BtnCloseScanner.prop('disabled', true);
                },
                success: function (response) {
                    // jika data aset tidak ditemukan
                    if (!response.status) {
                        $ScannerHeader.text("Data aset tidak ditemukan di sistem");
                        return;
                    }

                    const data = response.data;
                    // simpan di session storage karena akan digunakan di halaman detail aset
                    sessionStorage.setItem('asset', JSON.stringify(data));

                    // hapus inheritance scanner
                    onClearScannerInheritance();
                    // redirect ke halaman detail aset
                    window.location.href = "{{ route('menset-mobile.page.detail-validasi-qrcode') }}?kode_aset=" + kode_aset
                },
                complete: function () {
                    isProcessing = false;
                    lastScannedCode = null;
                    $BtnCloseScanner.prop('disabled', false);

                    setTimeout(() => {
                        $ScannerHeader.text("Arahkan kamera ke QR Code");
                    }, 5000); // reset scanner header setelah 5 detik
                }
            });
        }
    });
</script>
@endpush