@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>
        <p class="greeting-2">{{ Session::get('namaUser') }}</p>
    </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>
        </div>
    </div>
    <div class="information-container">
        <div class="header">
            <h6>Informasi Penting</h6>
            <button type="button" class="btn-secondary">Buka Notifikasi</button>
        </div>
        <div class="information-list">
            <div class="notification-basic">
                <!-- prettier-ignore -->
                <img alt="megaphone" src="{{ asset('asset-webview/hris/icons/megaphone.png') }}" height="20" width="20">
                <div>Gaji bulan September 2025 sudah dikirim</div>
            </div>
            <div class="notification-detail">
                <!-- prettier-ignore -->
                <img alt="avatar" src="{{ asset('asset-webview/hris/images/avatar5.png') }}" height="25" width="25">
                <div class="notification-content">
                    <div class="header">
                        <h6>Perubahan SOP Klaim Kesehatan</h6>
                        <p>12 Agustus 2025</p>
                    </div>
                    <div class="body">
                        Lorem ipsum dolor sit amet consectetur. Iaculis nulla
                        diam molestie molestie. Id enim in sit nec...
                    </div>
                </div>
            </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.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());
    });
</script>
@endpush