@extends('webview.menset.main')

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

<!-- prettier-ignore -->
@section('content')
<div id="header-page" class="header">
    <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</span>
        </button>
    </div>
</div>
<div class="card">
    <div class="card-header inter-font">
        Informasi Aset
    </div>
    <div id="card-body" class="card-body"></div>
    <div class="card-footer">
        <button id="submit-validation" type="button" class="btn-primary">QR Code Valid</button>
    </div>
</div>
@endsection

<!-- prettier-ignore -->
@section('additional-content')
<div id="alert-submit" class="alert alert-primary fade" role="alert">
    Aset QR Code berhasil diverifikasi
</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 $CardBody = $("#card-body");
        const $SubmitValidation = $("#submit-validation");

        const $AlertSubmit = $("#alert-submit");
        const bsAlert = new bootstrap.Alert('#alert-submit')

        $BtnBack.click(function () {
            sessionStorage.removeItem('asset')
            window.location.href = "{{ route('menset-mobile.page.home') }}"
        });

        const data = JSON.parse(sessionStorage.getItem('asset'))

        function renderComponentPhotosContainer() {
            return `<div id="photo-container" class="photo-container"></div>`
        }

        function renderComponentPhoto(name, url) {
            return `<img alt="${name}" src="${url}" height="100" width="100">`
        }

        function renderComponentListItem(value) {
            return `<div class="item-container">
                <div class="item-label inter-font">Nama Aset</div>
                <div class="item-value inter-font">${value.nama_aset}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Kode Aset</div>
                <div class="item-value inter-font">${value.kode_aset}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Lokasi Sekarang</div>
                <div class="item-value inter-font">${value.nama_gedung} ${value.nama_lantai} ${value.nama_ruang}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Kondisi</div>
                <div class="item-value inter-font">${value.kondisi_aset}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Jenis</div>
                <div class="item-value inter-font">${value.nama_kategori}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Merk</div>
                <div class="item-value inter-font">${value.merk_aset}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Warna</div>
                <div class="item-value inter-font">${value.warna_aset}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Periode Beli</div>
                <div class="item-value inter-font">${value.tahun_aset}</div>
            </div>`
        }

        // jika data aset memiliki foto
        if (data.photos.length > 0) {
            // render container foto
            let element = renderComponentPhotosContainer()
            $(element).insertAfter('#header-page')

            data.photos.forEach(function (item) {
                element = renderComponentPhoto(item.file_dok, item.url)
                // tambahkan element ke photo container
                $('#photo-container').append(element)
            })
        }

        const asset = data.assets
        let kode_aset = asset.kode_aset
        let element = renderComponentListItem(asset)
        $('#card-body').append(element)

        if (asset.status_verifikasi) {
            $SubmitValidation.prop('disabled', true);
            $SubmitValidation.text('QR Code Sudah Diverifikasi');
        }

        $SubmitValidation.click(function () {
            onSubmitVerification()
        })

        function onSubmitVerification() {
            $.ajax({
                type: "post",
                url: "{{ route('api.menset-mobile.v2.qr-validations.verification') }}",
                data: { kode_aset },
                dataType: "json",
                beforeSend: function () {
                    $SubmitValidation.prop('disabled', true);
                    $SubmitValidation.text('Tunggu sebentar...');
                },
                success: function (response) {
                    $SubmitValidation.prop('disabled', true);
                    $SubmitValidation.text('QR Code Sudah Diverifikasi');


                    $AlertSubmit.addClass('show');

                    // redirect ke halaman validasi qrcode setelah 2 detik
                    setTimeout(() => {
                        // redirect ke halaman validasi qrcode
                        window.location.href = "{{ route('menset-mobile.page.validasi-qrcode') }}"
                    }, 2000);
                },
                complete: function () {
                    setTimeout(() => {
                        bsAlert.close()
                    }, 1500); // close alert after 2.5 seconds
                }
            });
        }
    })
</script>
@endpush