@extends('webview.menset.main')

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('menset-mobile.detail-aset.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>Detail Aset</span>
        </button>
    </div>
</div>
<div class="card">
    <div class="card-header">
        <button type="button" id="data-informasi" class="navigation-item btn-link active">Informasi</button>
        <button type="button" id="data-veat" class="navigation-item btn-link">Riwayat VEAT</button>
    </div>
    <div class="card-body">
        <div id="content-data-informasi" class="d-flex data-content" data-id="data-informasi"></div>
        <div id="content-data-veat" class="data-content" data-id="data-veat">
            <div class="text-muted text-center">Tidak ada histori VEAT</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.addClass("d-none");

        // Atau langsung dari query string
        const params = new URLSearchParams(window.location.search);
        const kode_aset = params.get('kode_aset');

        const $BtnBack = $("#btn-back");
        const $NavigationItem = $(".navigation-item");
        const $DataContent = $(".data-content");
        const $ContentDataInformasi = $("#content-data-informasi");
        const $ContentDataVeat = $("#content-data-veat");

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

        $NavigationItem.click(function () {
            const id = $(this).attr("id");

            $NavigationItem.removeClass("active");
            $(this).addClass("active");

            $DataContent.each(function () {
                const $this = $(this);
                const konten = $this.data("id");

                // Atau kondisional
                if (id === konten) {
                    $this.addClass("d-flex");
                } else {
                    $this.removeClass("d-flex");
                }
            });
        })

        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>`
        }

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

                // 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)
                    })
                }

                let element = renderComponentListItem(data.assets)
                $ContentDataInformasi.append(element)
            },
        });

        function renderComponentBoxHistoryVeat(tahun_veat, url_image, tanggal, kondisi, gedung, alamat, nik) {
            return `<div class="box">
                <div class="box-content">
                    <div class="box-header">
                        <h1 class="box-title inter-font">VEAT ${tahun_veat}</h1>
                        <img alt="foto-bukti" src="${url_image}" height="97" width="69">
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">Tanggal</div>
                        <div class="info-value inter-font">${tanggal}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">Kondisi</div>
                        <div class="info-value inter-font">${kondisi}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">Lokasi</div>
                        <div class="info-value inter-font">${gedung}</div>
                    </div>
                    <div class="info-row mt-24">
                        <div class="info-label inter-font">Alamat</div>
                        <div class="info-value inter-font">${alamat}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">User</div>
                        <div class="info-value inter-font">${nik}</div>
                    </div>
                </div>
            </div>`
        }

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

                // jika data aset memiliki history veat
                if (data.length > 0) {
                    data.forEach(function (item) {
                        const details = item.details
                        let element = renderComponentBoxHistoryVeat(item.tahun_veat, details.url, details.tanggal_verifikasi, details.kondisi_aset, details.nama_gedung, details.alamat_gedung, details.nik_verifikasi)
                        // tambahkan element container
                        $ContentDataVeat.append(element)
                    })
                }
            },
        });
    })
</script>
@endpush