@extends('admin.hris.mobile.main')

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

<!-- prettier-ignore -->
@section('content')
<div class="header">
    <button id="btn-back" class="btn-link">
        <!-- prettier-ignore -->
        <img alt="left-black" src="{{ asset('asset-webview/hris/icons/left-black.png') }}" height="24" width="24">
        <span>Riwayat Approval</span>
    </button>
</div>
<div class="card">
    <div class="header">Daftar Pengajuan</div>
    <div id="list-pengajuan" class="body">
        <div class="text-muted text-center w-100">Belum ada pengajuan</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.css("opacity", 0);
        window.$BACKGROUND_ROOT.removeClass("d-none");

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

        $BtnBack.click(function () {
            window.location.href = "{{ route('hris-mobile.page.approval') }}"
        });

        /**
         * Get icon by jenis
         * @param {string} jenis
         * @return {string} icon url
         */
        function onLoadIconByJenis(jenis) {
            if (jenis === 'SPPD' || jenis === 'ABSEN') {
                return "{{ asset('asset-webview/hris/icons/note-blue.png') }}";
            } else {
                return "{{ asset('asset-webview/hris/icons/plane-ticket.png') }}";
            }
        }

        /**
         * Mengembalikan nama pengajuan berdasarkan jenis pengajuan
         * @param {string} jenis - jenis pengajuan (SPPD, ABSEN, CUTI)
         * @returns {string} Nama pengajuan
         */
        function onLoadNamaPengajuanByJenis(jenis) {
            if (jenis === 'SPPD') {
                return "Pengajuan SPPD";
            } else if (jenis === 'ABSEN') {
                return "Pengajuan Absen";
            } else {
                return "Pengajuan Cuti";
            }
        }
        /**
         * Mengembalikan komponen untuk menampilkan pesan bahwa belum ada pengajuan
         * @returns {string} Komponen berisi pesan
         */

        function renderEmptyPengajuan() {
            return `<div class="text-muted text-center w-100">Belum ada pengajuan</div>`
        }

        /**
         * Mengembalikan komponen untuk menampilkan item pengajuan
         * @param {string} no_bukti - nomor bukti
         * @param {string} tanggal - tanggal pengajuan
         * @param {string} nama_pengajuan - nama pengajuan
         * @param {string} jenis_pengajuan - jenis pengajuan
         * @returns {string} Komponen berisi item pengajuan
         */
        function renderComponentList(no_bukti, tanggal, nama_pengajuan, jenis_pengajuan) {
            const _nama_pengajuan = onLoadNamaPengajuanByJenis(jenis_pengajuan);
            const icon = onLoadIconByJenis(jenis_pengajuan);

            return `<a href="{{ route('hris-mobile.page.approval-riwayat-detail') }}?no_bukti=${no_bukti}&jenis=${jenis_pengajuan}" class="data-item">
                <div class="item">
                    <div class="icon-container">
                        <img alt="note-blue" src="${icon}" height="24" width="24" />
                    </div>
                    <div class="item-label">
                        <h6>${_nama_pengajuan}</h6>
                        <p>di ajukan oleh ${nama_pengajuan}</p>
                    </div>
                </div>
                <div class="date text-end">${tanggal}</div>
            </a>`;
        }

        const $ListPengajuan = $("#list-pengajuan");

        function onLoadData() {
            $.ajax({
                method: "get",
                url: "{{ route('api.hris-mobile.v1.apv-history') }}",
                dataType: "json",
                async: true,
                success: function (response) {
                    console.log(response);
                    const data = response.data;

                    if (data.length) {
                        let html = '';
                        data.forEach(function (item) {
                            const element = renderComponentList(item.no_bukti, item.tanggal, item.nama_aju, item.jenis_apv);
                            html += element;
                        })

                        $ListPengajuan.html(html);
                    } else {
                        const element = renderEmptyPengajuan();
                        $ListPengajuan.html(element);
                    }
                }
            });
        }

        onLoadData();
    })
</script>
@endpush