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

<!-- prettier-ignore -->
@push('style')
<!-- prettier-ignore -->
<link rel="stylesheet" href="{{ route('hris-mobile.perjalanan-dinas.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>Pengajuan SPPD</span>
    </button>
    <a href="{{ route('hris-mobile.page.tambah-perjalanan-dinas') }}" type="button" id="btn-tambah"
        class="btn btn-secondary">
        <!-- prettier-ignore -->
        <img alt="circle-add" src="{{ asset('asset-webview/hris/icons/circle-plus.png')}}" height="16" width="16">
        <span>Tambah</span>
    </a>
</div>
<div class="card">
    <div class="header">
        <div class="form-group">
            <div class="filter-label">Daftar SPPD</div>
            <select id="filter" class="filter-data"></select>
            <!-- prettier-ignore -->
            <img alt="up-down" src="{{ asset('asset-webview/hris/icons/up-down.png') }}" height="24" width="16" />
        </div>
    </div>
    <div class="body">
        <div id="data-list" class="data-list">
            <div class="text-muted text-center">Belum ada pengajuan</div>
        </div>
    </div>
</div>
@endsection

<!-- prettier-ignore -->
@push('script')
<script type="text/javascript">
    $(window).on("beforeunload", function () {
        $(window).scrollTop(0);
    });

    $(document).ready(function () {
        // Konstanta untuk key local storage
        const LOCAL_STORAGE_KEY = 'temp-sppd';

        $(window).scrollTop(0);

        window.$NAVIGATION_BOTTOM.css("opacity", 0);
        window.$BACKGROUND_ROOT.removeClass("d-none");

        window.localStorage.removeItem(LOCAL_STORAGE_KEY)

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

        $BtnBack.click(function () {
            window.location.href = "{{ url('/hris-mobile/home') }}";
        });

        function truncateString(str, maxLength = 20) {
            if (str.length <= maxLength) {
                return str;
            }
            return str.slice(0, maxLength) + '...';
        }

        const $Filter = $("#filter");

        // Untuk tahun sekarang
        const periode = "{{ date('Ym') }}";

        // Array nama bulan Indonesia
        const bulanIndonesia = [
            'Januari', 'Februari', 'Maret', 'April',
            'Mei', 'Juni', 'Juli', 'Agustus',
            'September', 'Oktober', 'November', 'Desember'
        ];

        function generatePeriodeByYear() {
            console.info('Generate periode by year');
            const year = "{{ date('Y') }}";
            const periods = [];

            for (let month = 1; month <= 12; month++) {
                // Format bulan dengan padding 0 di depan jika < 10
                const monthStr = month.toString().padStart(2, '0');
                periods.push(`${year}${monthStr}`);
            }

            return periods;
        }

        function renderComponentOption(text, value, selected = false) {
            console.info('Render component option:', { text, value, selected });
            return `<option value="${value}" ${selected ? 'selected' : ''}>${text}</option>`
        }

        function generateOptionsFilter() {
            console.info('Generate options filter');
            const periods = generatePeriodeByYear();
            let html = '';

            periods.forEach((period) => {
                const year = period.slice(0, 4);
                const month = parseInt(period.substring(4, 6));
                const nama_bulan = bulanIndonesia[month - 1];
                const is_selected = period === periode;

                html += renderComponentOption(`${nama_bulan} ${year}`, period, is_selected);
            });

            $Filter.html(html);
        }

        // Generate options filter saat halaman dimuat
        generateOptionsFilter();

        $Filter.on('change', function () {
            console.info('Periode berubah:', $(this).val());
            const selectedPeriode = $(this).val();
            loadData(selectedPeriode);
        });

        function getFileIcon(status_progress) {
            console.info('Get file icon for status_progress:', status_progress);
            switch (status_progress) {
                case 'U':
                    return "{{ asset('asset-webview/hris/icons/blue-document.png') }}";
                case 'P':
                    return "{{ asset('asset-webview/hris/icons/reload-orange.png') }}";
                case 'A':
                    return "{{ asset('asset-webview/hris/icons/checkmark-green.png') }}";
                default:
                    return "{{ asset('asset-webview/hris/icons/cross-circle-red.png') }}";
            }

        }

        function renderEmptyListPengajuan() {
            console.info('Render empty list pengajuan');
            return `<div class="text-muted text-center">Belum ada pengajuan</div>`
        }

        function renderComponentListItem(tanggal, keterangan, status_icon, time_label) {
            console.info('Render component list item:', { tanggal, keterangan, status_icon, time_label });
            return `<div class="data-item">
                <img alt="plane-ticket" src="{{ asset('asset-webview/hris/icons/plane-ticket.png') }}" height="30" width="30" />
                <div class="item-label">
                    <div>
                        <h6>${tanggal}</h6>
                        <img alt="icon-status" src="${status_icon}" height="16" width="16" />
                    </div>
                    <p>${keterangan}</p>
                </div>
                <div class="time-label">${time_label}</div>
            </div>`
        }

        const $ListData = $("#data-list");

        function loadData(periode) {
            console.info('Load data for periode:', periode);
            $.ajax({
                type: "get",
                url: "{{ route('api.hris-mobile.v1.data-aju-sppd') }}",
                dataType: "json",
                data: { periode },
                async: true,
                success: function (response) {
                    const data = response.data;

                    if (data.length === 0) {
                        const element = renderEmptyListPengajuan();
                        $ListData.html(element);

                        return
                    }

                    let html = '';
                    data.forEach(function (item) {
                        const icon = getFileIcon(item.status_progress);
                        const keterangan = truncateString(item.keterangan, 30);

                        const element = renderComponentListItem(item.tanggal, keterangan, icon, item.waktu);

                        html += element;
                    })

                    $ListData.html(html);
                }
            });
        }

        // Muat data saat halaman dimuat
        loadData(periode);
    });
</script>
@endpush