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

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

<!-- prettier-ignore -->
@section('content')
<div class="header">
    <div class="greeting">
        <p id="greeting-text" class="greeting-1">Selamat Pagi,</p>
        <div id="greeting-row" class="greeting-name-row">
            <p id="nama-user" class="greeting-2">{{ Session::get('namaUser') }}</p>
        </div>
    </div>
    <div id="header-root"></div>
</div>
<div class="card">
    <div class="service-container">
        <h6>Layanan</h6>
        <div class="service-list">
            <!-- prettier-ignore -->
            <a href="{{ route('hris-mobile.page.jadwal-kerja') }}" class="service-item">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="calendar-blue" src="{{ asset('asset-webview/hris/icons/calendar-blue.png') }}" height="24"
                        width="24">
                </div>
                <div class="service-label">Jadwal Kerja</div>
            </a>
            <!-- prettier-ignore -->
            <a href="{{ route('hris-mobile.page.slip-gaji') }}" class="service-item self-start">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="mail-blue" src="{{ asset('asset-webview/hris/icons/mail-blue.png') }}" height="24"
                        width="24">
                </div>
                <div class="service-label">Slip Gaji</div>
            </a>
            <!-- prettier-ignore -->
            <a href="{{ route('hris-mobile.page.absen-kerja') }}" class="service-item">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="shield-blue" src="{{ asset('asset-webview/hris/icons/shield-blue.png') }}" height="24"
                        width="24">
                </div>
                <div class="service-label">Ajukan Absensi</div>
            </a>
            <!-- prettier-ignore -->
            <a href="{{ route('hris-mobile.page.lembur-kerja') }}" class="service-item">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="clock-blue" src="{{ asset('asset-webview/hris/icons/clock-blue.png') }}" height="24"
                        width="24">
                </div>
                <div class="service-label">Ajukan Lembur</div>
            </a>
            <!-- prettier-ignore -->
            <a href="{{ route('hris-mobile.page.libur-kerja') }}" class="service-item">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="note-blue" src="{{ asset('asset-webview/hris/icons/note-blue.png') }}" height="24"
                        width="24">
                </div>
                <div class="service-label">Ajukan Cuti</div>
            </a>
            <!-- prettier-ignore -->
            <a href="{{ route('hris-mobile.page.riwayat-hidup') }}" class="service-item">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="note-blue" src="{{ asset('asset-webview/hris/icons/cv-blue.png') }}" height="24"
                        width="24">
                </div>
                <div class="service-label">Riwayat Hidup</div>
            </a>
            <!-- prettier-ignore -->
            <a href="{{ route('hris-mobile.page.perjalanan-dinas') }}" class="service-item align-self-start">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="note-blue" src="{{ asset('asset-webview/hris/icons/plane-ticket-blue.png') }}" height="24"
                        width="24">
                </div>
                <div class="service-label">SPPD</div>
            </a>
            <!-- prettier-ignore -->
            <a href="{{ route('hris-mobile.page.approval') }}" class="service-item align-self-start">
                <div class="service-frame">
                    <!-- prettier-ignore -->
                    <img alt="icon-approval" src="{{ asset('asset-webview/hris/icons/icon-approval.png') }}" height="24"
                        width="24">
                </div>
                <div class="service-label">Approval</div>
            </a>
        </div>
    </div>
    <div class="information-container">
        <div class="header">
            <h6>Informasi Penting</h6>
            <button type="button" class="btn-secondary">Buka Notifikasi</button>
        </div>
        <div id="information-list" class="information-list">
            <div class="text-muted text-center">Tidak ada informasi penting</div>
        </div>
    </div>
</div>
@endsection

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

    function renderStatusWFA(label) {
        const badge = `<span id="badge-wfa" class="badge-wfa">${label}</span>`;

        if ($('#badge-wfa').length) {
            $('#badge-wfa').remove();
        }

        $('#greeting-row').append(badge);
    }

    $.ajax({
        method: "get",
        url: "{{ route('api.hris-mobile.v1.check-wfa') }}",
        dataType: "json",
        async: true,
        success: function (response) {
            console.info('check wfa fetched')
            console.info(response);

            const data = response.data;

            window.localStorage.setItem('wfa', data.status_wfa);
            if (data.status_wfa !== 'WFO') {
                renderStatusWFA(data.status_wfa);
            }
        }
    });

    $(document).ready(function () {
        $(window).scrollTop(0);
        window.$NAVIGATION_BOTTOM.css("opacity", 1);
        window.$BACKGROUND_ROOT.removeClass("d-none");

        const $GreetingText = $("#greeting-text");

        function getSalam() {
            const jam = new Date().getHours();

            if (jam >= 4 && jam < 11) {
                return "Selamat Pagi,";
            } else if (jam >= 11 && jam < 15) {
                return "Selamat Siang,";
            } else if (jam >= 15 && jam < 18) {
                return "Selamat Sore,";
            } else {
                return "Selamat Malam,";
            }
        }

        $GreetingText.text(getSalam());

        function ambilNamaSaja(namaLengkap) {
            // Pisahkan berdasarkan koma
            const parts = namaLengkap.split(',');

            // Ambil bagian pertama (sebelum koma pertama)
            const bagianNama = parts[0].trim();

            // Daftar gelar depan yang umum
            const gelarDepan = ['Dr.', 'Prof.', 'Ir.', 'Drs.', 'Drg.', 'H.', 'Hj.'];

            let nama = bagianNama;

            // Hapus gelar depan jika ada
            for (const gelar of gelarDepan) {
                if (nama.startsWith(gelar)) {
                    nama = nama.substring(gelar.length).trim();
                }
            }

            return nama;
        }

        const $NamaUser = $("#nama-user");
        $NamaUser.text(ambilNamaSaja("{{ Session::get('namaUser') }}"));

        const $InformationList = $("#information-list");

        function renderComponentNotificationDetail($title, $date, $body) {
            return `<div class="notification-detail">
                <img alt="megaphone" src="{{ asset('asset-webview/hris/icons/megaphone.png') }}" height="20" width="20">
                <div class="notification-content">
                    <div class="header">
                        <h6>${$title}</h6>
                        <p>${$date}</p>
                    </div>
                    <div class="body">
                        ${$body}
                    </div>
                </div>
            </div>`
        }

        function renderComponentNotificationBasic() {
            return `<div class="notification-basic">
                <img alt="megaphone" src="{{ asset('asset-webview/hris/icons/megaphone.png') }}" height="20" width="20">
                <div>Gaji bulan September 2025 sudah dikirim</div>
            </div>`
        }

        function renderComponentEmptyList() {
            return `<div class="text-muted text-center">Tidak ada informasi penting</div>`
        }

        $.ajax({
            method: "get",
            url: "{{ route('api.hris-mobile.v1.monitor.informasi') }}",
            dataType: "json",
            success: function (response) {
                console.info('monitor informasi fetched')

                const data = response.data;

                if (data?.length) {
                    let html = '';

                    data.forEach(function (item) {
                        html += renderComponentNotificationDetail(item.keterangan, item.tanggal, item.keterangan_pengajuan);
                    })

                    $InformationList.html(html);
                }
            }
        });
    });
</script>
@endpush