@extends('webview.menset.main')

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

<!-- prettier-ignore -->
@section('content')
@include('webview.menset.components.comp-scanner-qrcode')
<div id="content-home" class="card">
    <div id="service-container" class="service-container">
        <div class="header">Layanan</div>
        <div class="body">
            <!-- prettier-ignore -->
            <a href="{{ route('menset-mobile.page.data-aset') }}" class="service-item">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="building-icon" src="{{ asset('asset-webview/menset/icons/building-icon.png') }}"
                        height="24" width="24">
                </div>
                <div class="service-label">Data Aset</div>
            </a>
            <!-- prettier-ignore -->
            <a href="{{ route('menset-mobile.page.upload-photo') }}" class="service-item">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="camera-icon" src="{{ asset('asset-webview/menset/icons/camera-icon.png') }}" height="24"
                        width="24">
                </div>
                <div class="service-label">Upload Foto</div>
            </a>
            <button id="open-scanner" type="button" class="service-item">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="notice-icon" src="{{ asset('asset-webview/menset/icons/notice-icon.png') }}" height="24"
                        width="24">
                </div>
                <div class="service-label">Lapor Kondisi</div>
            </button>
        </div>
    </div>
    <div class="information-container">
        <div class="header">Informasi Aset</div>
        <div class="body">
            <div class="information-item">
                <!-- prettier-ignore -->
                <img alt="landmark-icon" src="{{ asset('asset-webview/menset/icons/landmark-icon.png')}}" height="32"
                    width="32">
                <h6>Lahan</h6>
                <p>Informasi lahan</p>
                <h1 id="jumlah-lahan">0 Unit</h1>
            </div>
            <div class="information-item">
                <!-- prettier-ignore -->
                <img alt="office-icon" src="{{ asset('asset-webview/menset/icons/office-icon.png')}}" height="32"
                    width="32">
                <h6>Bangunan</h6>
                <p>Informasi bangunan</p>
                <h1 id="jumlah-gedung">0 Unit</h1>
            </div>
            <div class="information-item">
                <!-- prettier-ignore -->
                <img alt="workspace-icon" src="{{ asset('asset-webview/menset/icons/workspace-icon.png')}}" height="32"
                    width="32">
                <h6>Perlengkapan</h6>
                <p>Informasi perlengkapan</p>
                <h1 id="jumlah-perlengkapan">0 Unit</h1>
            </div>
        </div>
    </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.removeClass("d-none");

        const $BtnOpenScanner = $("#open-scanner");
        const $BtnCloseScanner = $("#close-scanner");
        const $ContentHome = $("#content-home");
        const $ScannerOverlay = $("#scanner-overlay");
        const $ScannerHeader = $("#scanner-header");
        const $JumlahLahan = $("#jumlah-lahan");
        const $JumlahGedung = $("#jumlah-gedung");
        const $JumlahPerlengkapan = $("#jumlah-perlengkapan");

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

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

                // jika ada progress veat
                if (data.veat_progress.total > 0) {
                    let element = renderComponentTaskContainer();
                    $ContentHome.prepend(element);

                    const persentase = fn.formatRibuan(data.veat_progress.persentase);
                    const completed = fn.formatRibuan(data.veat_progress.completed);
                    const total = fn.formatRibuan(data.veat_progress.total);

                    element = renderComponentNotificationVeatProgress(persentase, completed, total);

                    $('#task-container').find('#task-content').append(element);
                }

                // jika ada progress qrcode asset
                if (data.qrcode_assets > 0) {
                    // cek apakah element #task-container sudah dirender apa belum
                    // jika belum maka render terlebih dahulu
                    if ($('#task-container').length === 0) {
                        let element = renderComponentTaskContainer();
                        $ContentHome.prepend(element);
                    }

                    const jumlah = fn.formatRibuan(data.qrcode_assets);
                    let element = renderComponentNotificationQrcodeProgress(jumlah);
                    $('#task-container').find('#task-content').append(element);
                }

                // jika ada dokumen perlu diperbarui
                if (data.pending_documents > 0) {
                    const jumlah = fn.formatRibuan(data.pending_documents);
                    let element = renderComponentNotificationPendingDocuments(jumlah);
                    $ContentHome.prepend(element);
                }

                data.asset_informations.forEach(function (value) {
                    if (value.type === 'LAHAN') {
                        $JumlahLahan.text(`${fn.formatRibuan(value.total)} Unit`);
                        return; // continue
                    }

                    if (value.type === 'GEDUNG') {
                        $JumlahGedung.text(`${fn.formatRibuan(value.total)} Unit`);
                        return; // continue
                    }

                    if (value.type === 'PERLENGKAPAN') {
                        $JumlahPerlengkapan.text(`${fn.formatRibuan(value.total)} Unit`);
                        return; // continue
                    }
                })
            }
        });

        function renderComponentNotificationPendingDocuments(jumlah = 0) {
            return `<a href="{{ route('menset-mobile.page.pembaruan-dokumen') }}" class="btn-notification">
                <div>${jumlah} Dokumen perlu diperbarui</div>
                <img alt="angle-right" src="{{ asset('asset-webview/menset/icons/angle-right-red.png')}}" height="18" width="18">
            </a>`;
        }

        function renderComponentNotificationVeatProgress(persentase = 0, jumlah_aset = 0, jumlah_progress = 0) {
            return `<a href="{{ route('menset-mobile.page.veat') }}" class="box">
                <div class="box-header">Progress VEAT</div>
                <div class="box-body">
                    <div class="item-label">
                        Proses pengecekan aset yang harus kamu selesaikan.
                    </div>
                    <div class="item-content">
                        <h1>${persentase}%</h1>
                        <p>${jumlah_progress}/${jumlah_aset} aset</p>
                    </div>
                </div>
            </a>`;
        }

        function renderComponentNotificationQrcodeProgress(jumlah = 0) {
            return `<a href="{{ route('menset-mobile.page.validasi-qrcode') }}" class="box">
                <div class="box-header">QR Code Assets</div>
                <div class="box-body">
                    <div class="item-label">
                        Terdapat aset yang belum di labeli.
                    </div>
                    <div class="item-content">
                        <h1>${jumlah}</h1>
                        <p>Aset belum di verifikasi</p>
                    </div>
                </div>
            </a>`;
        }

        function renderComponentTaskContainer() {
            return `<div id="task-container" class="task-container">
                <div class="header">Tugas</div>
                <div id="task-content" class="body"></div>
            </div>`
        }

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

        function onOpenScanner() {
            window.$NAVIGATION_BOTTOM.addClass("d-none");
            $ContentHome.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();
                        window.$NAVIGATION_BOTTOM.removeClass("d-none");
                        $ScannerOverlay.removeClass("active");
                        $ContentHome.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");
                $ContentHome.removeClass("d-none");
                window.$NAVIGATION_BOTTOM.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;

            // hapus inheritance scanner
            onClearScannerInheritance();

            window.location.href = "{{ route('menset-mobile.page.kondisi-aset') }}?kode_aset=" + decodedText
        }
    });
</script>
@endpush