@extends('webview.menset.main')

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('menset-mobile.veat.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>Verifikasi Eksistensi Aset Tetap</span>
        </button>
    </div>
</div>
<div class="container-information content-page">
    <div class="item-label">
        <h1 id="persentase-veat">0%</h1>
        <p id="progress-veat">0/0 aset</p>
    </div>
    <button id="scanner-veat" type="button" class="btn-secondary">
        <img alt="qrcode-icon" src="{{ asset('asset-webview/menset/icons/qrcode2-black.png') }}" height="24" width="24">
        Lanjutkan VEAT
    </button>
</div>
<div class="card content-page">
    <div class="card-header">
        <div class="filter-container">
            <div class="filter-label inter-font">Filter</div>
            <div class="item-filter" data-filter="rooms">Ruangan <span>Semua</span></div>
        </div>
        <a href="{{ route('menset-mobile.page.riwayat-veat') }}" class="btn-link inter-font">Riwayat VEAT</a>
    </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 $BtnScannerVeat = $("#scanner-veat");
        const $BtnCloseScanner = $("#close-scanner");
        const $ContentPage = $(".content-page");
        const $ScannerOverlay = $("#scanner-overlay");
        const $ScannerHeader = $("#scanner-header");

        const $PersentaseVeat = $("#persentase-veat");
        const $ProgressVeat = $("#progress-veat");
        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

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

        $.ajax({
            method: "get",
            url: "{{ route('api.menset-mobile.v1.veat.progress-veat') }}",
            dataType: "json",
            async: true,
            success: function (response) {
                const data = response.data

                const jumlah_aset = fn.formatRibuan(parseInt(data.jumlah_aset));
                const jumlah_submit = fn.formatRibuan(parseInt(data.jumlah_submit));

                $PersentaseVeat.text(`${data.persentase}%`)
                $ProgressVeat.text(`${jumlah_submit}/${jumlah_aset} aset`)
            }
        });

        $ItemFilter.click(function () {
            $(this).toggleClass('active');
        });

        $BtnScannerVeat.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 renderComponentRowListAsset(kode_aset, nama_aset, gambar_aset, checked) {
            let width = 24
            let height = 24

            let default_image = "{{ asset('asset-webview/menset/images/default-image.png')}}";
            if (gambar_aset) {
                default_image = gambar_aset
                width = 42
                height = 42
            }

            return `<div class="item-content">
                <div class="content-label">
                    <div class="label-image">
                        <img alt="gambar-20" src="${default_image}" height="${height}" width="${width}">
                    </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>`;
        }

        function onGenerateDataList(page_number) {
            $.ajax({
                type: "get",
                url: "{{ route('api.menset-mobile.v2.veat.assets') }}",
                data: { page: page_number },
                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 !== null ? "checked" : "";

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

                        $ContentContainer.append(element);
                    })

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

        // initial load
        onGenerateDataList(page_number);

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

            onGenerateDataList(page_number);
        })

        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();

                    window.location.href = "{{ route('menset-mobile.page.detail-veat') }}?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