@extends('layouts.mobile.app')
@section('content')
    <style>
        /* :root variables moved to layout for dynamic theming */

        .bg-header-curve {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 320px;
            background-color: var(--color-nav);
            border-bottom-left-radius: 40px;
            border-bottom-right-radius: 40px;
            z-index: 0;
        }

        #header-section {
            height: auto;
            padding: 20px;
            position: relative;
            z-index: 1;

        }

        #section-logout {
            position: absolute;
            right: 15px;
            top: 15px;
            z-index: 2;
        }

        .logout-btn {
            color: #fff;
            font-size: 30px;
            text-decoration: none;
        }

        .logout-btn:hover {
            color: #e0e0e0;

        }

        #section-notification {
            position: absolute;
            left: 15px;
            top: 15px;
            z-index: 2;
        }

        .notification-btn {
            color: #fff;
            font-size: 30px;
            text-decoration: none;
            position: relative;
            display: inline-block;
        }

        .notification-btn:hover {
            color: #e0e0e0;
        }

        .notif-badge {
            position: absolute;
            top: 2px;
            right: -6px;
            background: #e74c3c;
            color: #fff;
            font-size: 11px;
            font-weight: bold;
            line-height: 1;
            padding: 3px 5px;
            border-radius: 50px;
            min-width: 18px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            border: 1.5px solid var(--color-nav);
        }



        #section-user {
            margin-top: 50px;
            display: flex;
            justify-content: space-between
        }

        #user-info {
            margin-left: 0px !important;
            line-height: 2px;
        }

        #user-info h3 {
            color: #fff;
        }

        #user-info span {
            color: #f0f0f0;
        }

        #section-presensi {
            margin-top: 5px;
            padding: 0 15px;
        }

        #presensi-today {
            display: flex;
            justify-content: space-between
        }

        #presensi-today h4 {
            color: var(--color-nav);
            font-weight: bold;
            margin: 0
        }

        #presensi-today #presensi-text {
            color: var(--color-nav-active);
        }

        #presensi-data {
            display: flex;
            justify-content: space-around
        }

        #presensi-icon {
            font-size: 30px;
            margin-right: 10px;
        }


        #rekap-section {

            margin-top: 50px;
            padding: 20px;
            position: relative;
        }

        #rekap-section #title {
            color: var(--bg-indicator);
        }

        #histori-section {
            padding: 0px 20px;
            position: relative;
        }

        #app-section {
            padding: 0px 20px 20px 20px;
        }

        #app-section #title {
            color: var(--bg-indicator);
        }

        .iconpresence {
            color: var(--color-nav);
        }

        #jam {
            color: #ffffff;
            font-weight: bold;
            font-size: 48px;

        }

        /* Skeleton Loader Styles */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s ease-in-out infinite;
            border-radius: 4px;
        }

        @keyframes skeleton-loading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        .skeleton-card {
            background: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .skeleton-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 15px;
        }

        .skeleton-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }

        .skeleton-text {
            height: 16px;
            margin-bottom: 8px;
        }

        .skeleton-text-short {
            width: 60%;
        }

        .skeleton-text-long {
            width: 90%;
        }

        .skeleton-presensi-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .skeleton-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
        }

        .skeleton-hide {
            display: none !important;
        }

        .content-hide {
            display: none !important;
        }

        /* Additional skeleton styles */
        .skeleton-user-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding: 0 20px;
            margin-bottom: 15px;
        }

        .skeleton-section-presensi {
            margin-top: 5px;
            padding: 0 15px;
            margin-bottom: 20px;
        }

        .skeleton-user-info {
            flex: 1;
        }

        .skeleton-avatar-large {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }

        .skeleton-menu-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .skeleton-menu-item {
            background: white;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
        }

        .skeleton-menu-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            margin: 0 auto 8px;
        }
    </style>
    <div class="bg-header-curve"></div>
    <div id="header-section">
        <div id="section-notification">
            <a href="{{ route('karyawan-approval.index') }}" class="notification-btn">
                <ion-icon name="notifications-outline"></ion-icon>
                @if (isset($pendingApprovalCount) && $pendingApprovalCount > 0)
                    <span class="notif-badge">{{ $pendingApprovalCount }}</span>
                @endif
            </a>
        </div>
        <div id="section-logout">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <a href="#" class="logout-btn"
                    onclick="event.preventDefault();
                                                this.closest('form').submit();">
                    <ion-icon name="exit-outline"></ion-icon>
                </a>
            </form>
        </div>
        <!-- Skeleton Loader for Header Section -->
        <div class="skeleton-loader">
            <!-- User Header Skeleton -->
            <div class="skeleton-user-header">
                <div class="skeleton-user-info">
                    <div class="skeleton skeleton-text" style="width: 150px; height: 24px; margin-bottom: 8px;"></div>
                    <div class="skeleton skeleton-text" style="width: 120px; height: 16px; margin-bottom: 4px;"></div>
                    <div class="skeleton skeleton-text" style="width: 100px; height: 16px;"></div>
                </div>
                <div class="skeleton skeleton-avatar-large"></div>
            </div>

            <!-- Clock Skeleton -->
            <div class="text-center mt-1 mb-2">
                <div class="skeleton skeleton-text" style="width: 200px; height: 48px; margin: 0 auto 10px;"></div>
                <div class="skeleton skeleton-text" style="width: 250px; height: 16px; margin: 0 auto;"></div>
            </div>
        </div>

        <div id="section-user" class="content-hide">
            <div id="user-info">
                <h3 id="user-name">{{ $karyawan->nama_karyawan }}👋</h3>
                <span id="user-role">{{ $karyawan->nama_jabatan }}</span>
                <span id="user-role">({{ $karyawan->nama_dept }})</span>

            </div>
            <a href="{{ route('profile.index') }}">
                @if (!empty($karyawan->foto))
                    @if (Storage::disk('public')->exists('/karyawan/' . $karyawan->foto))
                        <div
                            style="width: 80px; height: 80px; background-image: url({{ getfotoKaryawan($karyawan->foto) }}); background-size: cover; background-position: center; border-radius: 50%;">


                        </div>
                    @else
                        <div class="avatar avatar-xs me-2">
                            <img src="{{ asset('assets/template/img/sample/avatar/avatar1.jpg') }}" alt="avatar"
                                class="imaged w64 rounded">
                        </div>
                    @endif
                @else
                    <div class="avatar avatar-xs me-2">
                        <img src="{{ asset('assets/template/img/sample/avatar/avatar1.jpg') }}" alt="avatar"
                            class="imaged w64 rounded">
                    </div>
                @endif
            </a>
        </div>
        <div id="section-jam" class="text-center mt-1 mb-2 content-hide">
            <h2 id="jam" class="mb-2" style="text-shadow: 0px 0px 2px var(--color-nav); line-height: 1rem"></h2>
            <span style="color: #ffffff;">Hari ini : {{ getNamaHari(date('D')) }}, {{ DateToIndo(date('Y-m-d')) }}</span>
        </div>


        <!-- ALERT SECTION (CAROUSEL / SINGLE) -->
        @php
            $activeAlerts = [];
            // Prioritas urutan: Pengumuman, Kontrak, SP
            if (!empty($pengumuman)) {
                $activeAlerts[] = 'pengumuman';
            }
            if (!empty($notif_kontrak)) {
                $activeAlerts[] = 'kontrak';
            }
            if (!empty($notif_sp)) {
                $activeAlerts[] = 'sp';
            }
        @endphp

        @if (count($activeAlerts) > 0)
            @if (count($activeAlerts) > 1)
                <!-- Styles for Carousel -->
                <style>
                    .carousel-indicators {
                        bottom: -35px;
                        /* Adjust position further down */
                    }

                    .carousel-indicators li {
                        width: 10px;
                        height: 10px;
                        border-radius: 100%;
                        background-color: #cbd5e0;
                        border: none;
                        opacity: 1;
                        margin: 0 4px;
                        transition: all 0.3s ease;
                    }

                    .carousel-indicators li.active {
                        width: 25px;
                        /* Pill shape for active */
                        border-radius: 5px;
                        background-color: var(--bg-indicator);
                        /* Theme color */
                    }
                </style>
                <div id="alertCarousel" class="carousel slide" data-ride="carousel"
                    style="margin-top: 10px; margin-bottom: 10px;">
                    <ol class="carousel-indicators">
                        @foreach ($activeAlerts as $index => $type)
                            <li data-target="#alertCarousel" data-slide-to="{{ $index }}"
                                class="{{ $index == 0 ? 'active' : '' }}"></li>
                        @endforeach
                    </ol>
                    <div class="carousel-inner" style="border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
                        @foreach ($activeAlerts as $index => $type)
                            <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                @if ($type == 'kontrak')
                                    <div class="alert alert-warning fade show mb-0" role="alert"
                                        style="border: 1px solid #ffeeba; background-color: #fff3cd; color: #856404; border-radius: 15px;">
                                        <div style="display: flex; align-items: start;">
                                            <div
                                                style="background: rgba(255, 193, 7, 0.2); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
                                                <ion-icon name="alert-circle"
                                                    style="font-size: 24px; color: #ffc107;"></ion-icon>
                                            </div>
                                            <div>
                                                <h4
                                                    style="margin: 0 0 5px 0; font-weight: 700; color: #856404; font-size: 15px;">
                                                    Masa Kontrak Segera Berakhir</h4>
                                                <p
                                                    style="font-size: 12px; margin-bottom: 0; line-height: 1.4; opacity: 0.9;">
                                                    Kontrak kerja Anda tersisa <strong>{{ $notif_kontrak['sisa_hari'] }}
                                                        hari</strong> lagi (Berakhir:
                                                    {{ $notif_kontrak['tanggal_akhir'] }}).
                                                    <br><span
                                                        style="font-size: 11px; margin-top: 4px; display: inline-block; opacity: 0.8;">Silakan
                                                        hubungi HRD / Personalia.</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                @elseif($type == 'sp')
                                    <div class="alert alert-danger fade show mb-0" role="alert"
                                        style="border: 1px solid #f5c6cb; background-color: #f8d7da; color: #721c24; border-radius: 15px;">
                                        <div style="display: flex; align-items: start;">
                                            <div
                                                style="background: rgba(220, 53, 69, 0.2); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
                                                <ion-icon name="warning"
                                                    style="font-size: 24px; color: #dc3545;"></ion-icon>
                                            </div>
                                            <div>
                                                <h4
                                                    style="margin: 0 0 5px 0; font-weight: 700; color: #721c24; font-size: 15px;">
                                                    Status Dalam Masa SP</h4>
                                                <p
                                                    style="font-size: 12px; margin-bottom: 0; line-height: 1.4; opacity: 0.9;">
                                                    Anda sedang dalam masa <strong>{{ $notif_sp->jenis_sp }}</strong><br>
                                                    Berlaku hingga:
                                                    <strong>{{ \Carbon\Carbon::parse($notif_sp->sampai)->translatedFormat('d F Y') }}</strong>
                                                    <br><span
                                                        style="font-size: 11px; margin-top: 4px; display: inline-block; opacity: 0.8;">Harap
                                                        tingkatkan kinerja & kedisiplinan Anda.</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                @elseif($type == 'pengumuman')
                                    <div class="alert alert-info fade show mb-0" role="alert"
                                        style="border: 1px solid #b8daff; background-color: #e3f2fd; color: #0c5460; border-radius: 15px;">
                                        <div style="display: flex; align-items: start;">
                                            <div
                                                style="background: rgba(12, 84, 96, 0.15); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
                                                <ion-icon name="megaphone"
                                                    style="font-size: 24px; color: #0c5460;"></ion-icon>
                                            </div>
                                            <div>
                                                <h4
                                                    style="margin: 0 0 0 0; font-weight: 700; color: #0c5460; font-size: 15px;">
                                                    {{ $pengumuman->judul }}</h4>
                                                <span
                                                    style="font-size: 10px;">{{ \Carbon\Carbon::parse($pengumuman->created_at)->translatedFormat('d F Y') }}</span>
                                                <div
                                                    style="font-size: 12px; margin-top: 5px; line-height: 1.4; opacity: 0.9;">
                                                    {{ $pengumuman->isi }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @else
                <!-- Single Alert -->
                <div class="row" style="margin-top: 10px;">
                    <div class="col-12">
                        @php $type = $activeAlerts[0]; @endphp
                        @if ($type == 'kontrak')
                            <div class="alert alert-warning fade show mb-0" role="alert"
                                style="border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #ffeeba; background-color: #fff3cd; color: #856404;">
                                <div style="display: flex; align-items: start;">
                                    <div
                                        style="background: rgba(255, 193, 7, 0.2); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
                                        <ion-icon name="alert-circle" style="font-size: 24px; color: #ffc107;"></ion-icon>
                                    </div>
                                    <div>
                                        <h4 style="margin: 0 0 5px 0; font-weight: 700; color: #856404; font-size: 15px;">
                                            Masa Kontrak Segera Berakhir</h4>
                                        <p style="font-size: 12px; margin-bottom: 0; line-height: 1.4; opacity: 0.9;">
                                            Kontrak kerja Anda tersisa <strong>{{ $notif_kontrak['sisa_hari'] }}
                                                hari</strong> lagi (Berakhir: {{ $notif_kontrak['tanggal_akhir'] }}).
                                            <br><span
                                                style="font-size: 11px; margin-top: 4px; display: inline-block; opacity: 0.8;">Silakan
                                                hubungi HRD / Personalia.</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @elseif($type == 'sp')
                            <div class="alert alert-danger fade show mb-0" role="alert"
                                style="border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #f5c6cb; background-color: #f8d7da; color: #721c24;">
                                <div style="display: flex; align-items: start;">
                                    <div
                                        style="background: rgba(220, 53, 69, 0.2); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
                                        <ion-icon name="warning" style="font-size: 24px; color: #dc3545;"></ion-icon>
                                    </div>
                                    <div>
                                        <h4 style="margin: 0 0 5px 0; font-weight: 700; color: #721c24; font-size: 15px;">
                                            Status Dalam Masa SP</h4>
                                        <p style="font-size: 12px; margin-bottom: 0; line-height: 1.4; opacity: 0.9;">
                                            Anda sedang dalam masa <strong>{{ $notif_sp->jenis_sp }}</strong><br>
                                            Berlaku hingga:
                                            <strong>{{ \Carbon\Carbon::parse($notif_sp->sampai)->translatedFormat('d F Y') }}</strong>
                                            <br><span
                                                style="font-size: 11px; margin-top: 4px; display: inline-block; opacity: 0.8;">Harap
                                                tingkatkan kinerja & kedisiplinan Anda.</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @elseif($type == 'pengumuman')
                            <div class="alert alert-info fade show mb-0" role="alert"
                                style="border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #b8daff; background-color: #e3f2fd; color: #0c5460;">
                                <div style="display: flex; align-items: start;">
                                    <div
                                        style="background: rgba(12, 84, 96, 0.15); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
                                        <ion-icon name="megaphone" style="font-size: 24px; color: #0c5460;"></ion-icon>
                                    </div>
                                    <div>
                                        <h4 style="margin: 0 0 0 0; font-weight: 700; color: #0c5460; font-size: 15px;">
                                            {{ $pengumuman->judul }}</h4>
                                        <span
                                            style="font-size: 10px;">{{ \Carbon\Carbon::parse($pengumuman->created_at)->translatedFormat('d F Y') }}</span>
                                        <div style="font-size: 12px; margin-top: 5px; line-height: 1.4; opacity: 0.9;">
                                            {{ $pengumuman->isi }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @endif
        @endif
    </div>
    </div>

    <!-- Skeleton Loader for Presensi -->
    <div class="skeleton-loader skeleton-section-presensi">

        <div class="card">
            <div class="card-body" style="display: flex; justify-content: space-between;">
                <div id="presensi-data">
                    <div id="presensi-icon">
                        <div class="skeleton skeleton-icon"></div>
                    </div>
                    <div id="presensi-detail">
                        <div class="skeleton skeleton-text" style="width: 80px; height: 16px; margin-bottom: 5px;"></div>
                        <div class="skeleton skeleton-text" style="width: 60px; height: 24px;"></div>
                    </div>
                </div>
                <div class="outer">
                    <div class="inner"></div>
                </div>
                <div id="presensi-data">
                    <div id="presensi-icon">
                        <div class="skeleton skeleton-icon"></div>
                    </div>
                    <div id="presensi-detail">
                        <div class="skeleton skeleton-text" style="width: 80px; height: 16px; margin-bottom: 5px;"></div>
                        <div class="skeleton skeleton-text" style="width: 60px; height: 24px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="section-presensi" style="margin-bottom: 10px;" class="content-hide">
        <div class="card">
            <div class="card-body" id="presensi-today">
                <div id="presensi-data">
                    <div id="presensi-icon">
                        @php
                            $jam_in = $presensi && $presensi->jam_in != null ? $presensi->jam_in : null;
                        @endphp
                        @if ($presensi && $presensi->foto_in != null)
                            @php
                                $path = Storage::url('uploads/absensi/' . $presensi->foto_in . '?v=' . time());
                            @endphp
                            <img src="{{ url($path) }}" alt="" class="imaged w48">
                        @else
                            <ion-icon name="camera-outline" style="font-size: 30px; color: var(--color-nav);"></ion-icon>
                        @endif
                    </div>
                    <div id="presensi-detail">
                        <h4>Jam Masuk</h4>
                        <span class="presensi-text">
                            @if ($jam_in != null)
                                {{ date('H:i', strtotime($jam_in)) }}
                            @else
                                __:__
                            @endif
                        </span>
                    </div>

                </div>
                <div class="outer">
                    <div class="inner"></div>
                </div>
                <div id="presensi-data">
                    <div id="presensi-icon">
                        @php
                            $jam_out = $presensi && $presensi->jam_out != null ? $presensi->jam_out : null;
                        @endphp
                        @if ($presensi && $presensi->foto_out != null)
                            @php
                                $path = Storage::url('uploads/absensi/' . $presensi->foto_out . '?v=' . time());
                            @endphp
                            <img src="{{ url($path) }}" alt="" class="imaged w48">
                        @else
                            <ion-icon name="camera-outline" style="font-size: 30px; color: var(--color-nav);"></ion-icon>
                        @endif
                    </div>
                    <div id="presensi-detail">
                        <h4>Jam Pulang</h4>
                        <span class="presensi-text">
                            @if ($jam_out != null)
                                {{ date('H:i', strtotime($jam_out)) }}
                            @else
                                __:__
                            @endif
                        </span>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- Skeleton Loader for Stats and Menu -->
    <div class="skeleton-loader" style="padding: 0 15px;">
        <!-- Stats Card Skeleton -->
        <div class="skeleton-card" style="margin-bottom: 15px;">
            <div class="skeleton skeleton-text" style="width: 200px; height: 20px; margin: 0 auto 10px;"></div>
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 15px;">
                <div style="text-align: center;">
                    <div class="skeleton skeleton-text"
                        style="width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 8px;"></div>
                    <div class="skeleton skeleton-text" style="width: 30px; height: 12px; margin: 0 auto;"></div>
                </div>
                <div style="text-align: center;">
                    <div class="skeleton skeleton-text"
                        style="width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 8px;"></div>
                    <div class="skeleton skeleton-text" style="width: 30px; height: 12px; margin: 0 auto;"></div>
                </div>
                <div style="text-align: center;">
                    <div class="skeleton skeleton-text"
                        style="width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 8px;"></div>
                    <div class="skeleton skeleton-text" style="width: 30px; height: 12px; margin: 0 auto;"></div>
                </div>
                <div style="text-align: center;">
                    <div class="skeleton skeleton-text"
                        style="width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 8px;"></div>
                    <div class="skeleton skeleton-text" style="width: 30px; height: 12px; margin: 0 auto;"></div>
                </div>
            </div>
        </div>

        <!-- Menu Grid Skeleton -->
        <div class="skeleton-menu-grid">
            <div class="skeleton-menu-item">
                <div class="skeleton skeleton-menu-icon"></div>
                <div class="skeleton skeleton-text" style="width: 50px; height: 12px; margin: 0 auto;"></div>
            </div>
            <div class="skeleton-menu-item">
                <div class="skeleton skeleton-menu-icon"></div>
                <div class="skeleton skeleton-text" style="width: 50px; height: 12px; margin: 0 auto;"></div>
            </div>
            <div class="skeleton-menu-item">
                <div class="skeleton skeleton-menu-icon"></div>
                <div class="skeleton skeleton-text" style="width: 50px; height: 12px; margin: 0 auto;"></div>
            </div>
            <div class="skeleton-menu-item">
                <div class="skeleton skeleton-menu-icon"></div>
                <div class="skeleton skeleton-text" style="width: 50px; height: 12px; margin: 0 auto;"></div>
            </div>
            <div class="skeleton-menu-item">
                <div class="skeleton skeleton-menu-icon"></div>
                <div class="skeleton skeleton-text" style="width: 50px; height: 12px; margin: 0 auto;"></div>
            </div>
            <div class="skeleton-menu-item">
                <div class="skeleton skeleton-menu-icon"></div>
                <div class="skeleton skeleton-text" style="width: 50px; height: 12px; margin: 0 auto;"></div>
            </div>
            <div class="skeleton-menu-item">
                <div class="skeleton skeleton-menu-icon"></div>
                <div class="skeleton skeleton-text" style="width: 50px; height: 12px; margin: 0 auto;"></div>
            </div>
            <div class="skeleton-menu-item">
                <div class="skeleton skeleton-menu-icon"></div>
                <div class="skeleton skeleton-text" style="width: 50px; height: 12px; margin: 0 auto;"></div>
            </div>
        </div>
    </div>

    <div id="app-section" class="content-hide">
        <!-- Floating Stats Card -->
        <div class="row" style="margin-bottom: 15px;">
            <div class="col-12">
                <div class="card" style="border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-12 text-center" style="margin-bottom: 15px;">
                                <h4 style="font-size: 14px; font-weight: 600; color: #555; margin: 0;">Rekap Presensi Bulan
                                    {{ $bulan_skrg }} {{ $tahun_skrg }}</h4>
                                <span style="font-size: 11px; color: #999;">Update Terakhir: {{ date('H:i') }}
                                    WIB</span>
                            </div>
                        </div>
                        <div class="row text-center">
                            <div class="col-3" style="border-right: 1px solid #f0f0f0;">
                                <h4 class="mb-0" style="font-weight: 700; font-size: 24px; color: var(--color-nav);">
                                    {{ $rekappresensi ? $rekappresensi->hadir : 0 }}</h4>
                                <span style="font-size: 11px; color: #888;">Hadir</span>
                            </div>
                            <div class="col-3" style="border-right: 1px solid #f0f0f0;">
                                <h4 class="mb-0" style="font-weight: 700; font-size: 24px; color: #ff9800;">
                                    {{ $rekappresensi ? $rekappresensi->sakit : 0 }}</h4>
                                <span style="font-size: 11px; color: #888;">Sakit</span>
                            </div>
                            <div class="col-3" style="border-right: 1px solid #f0f0f0;">
                                <h4 class="mb-0" style="font-weight: 700; font-size: 24px; color: #1e90ff;">
                                    {{ $rekappresensi ? $rekappresensi->izin : 0 }}</h4>
                                <span style="font-size: 11px; color: #888;">Izin</span>
                            </div>
                            <div class="col-3">
                                <h4 class="mb-0" style="font-weight: 700; font-size: 24px; color: #ff6384;">
                                    {{ $rekappresensi ? $rekappresensi->cuti : 0 }}</h4>
                                <span style="font-size: 11px; color: #888;">Cuti</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @php
            $scheme = $namasettings->mobile_theme_scheme ?? 'green';
        @endphp
        <div class="row mt-2">
            <div class="col-3">
                <a href="{{ route('karyawan.idcard', Crypt::encrypt($karyawan->nik)) }}">
                    <div class="card">
                        <div class="card-body text-center" style="padding: 5px 5px !important; line-height:0.8rem">
                            @if ($scheme == 'green')
                                <img src="{{ asset('assets/template/img/3d/card.webp') }}" alt=""
                                    style="width: 40px; margin-bottom: 5px;">
                            @else
                                <ion-icon name="id-card-outline"
                                    style="font-size: 40px; color: var(--color-nav); margin-bottom: 5px;"></ion-icon>
                            @endif
                            <br>
                            <span style="font-size: 0.8rem; font-weight:500" class="mb-2">
                                ID Card
                            </span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-3">
                <a href="{{ route('presensiistirahat.create') }}">
                    <div class="card">
                        <div class="card-body text-center" style="padding: 5px 5px !important; line-height:0.8rem">
                            @if ($scheme == 'green')
                                <img src="{{ asset('assets/template/img/3d/praying.png') }}" alt=""
                                    style="width: 40px; margin-bottom: 5px;">
                            @else
                                <ion-icon name="cafe-outline"
                                    style="font-size: 40px; color: var(--color-nav); margin-bottom: 5px;"></ion-icon>
                            @endif
                            <br>
                            <span style="font-size: 0.8rem; font-weight:500" class="mb-2">
                                Istirahat
                            </span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-3">
                <a href="{{ route('lembur.index') }}">
                    <div class="card">
                        <div class="card-body text-center" style="padding: 5px 5px !important; line-height:0.8rem">
                            @if ($scheme == 'green')
                                <img src="{{ asset('assets/template/img/3d/clock.png') }}" alt=""
                                    style="width: 40px; margin-bottom: 5px;">
                            @else
                                <ion-icon name="time-outline"
                                    style="font-size: 40px; color: var(--color-nav); margin-bottom: 5px;"></ion-icon>
                            @endif
                            <br>
                            <span style="font-size: 0.8rem; font-weight:500" class="mb-2">
                                Lembur
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-3">
                <a href="{{ route('slipgaji.index') }}">
                    <div class="card">
                        <div class="card-body text-center" style="padding: 5px 5px !important; line-height:0.8rem">
                            @if ($scheme == 'green')
                                <img src="{{ asset('assets/template/img/3d/slipgaji.png') }}" alt=""
                                    style="width: 40px; margin-bottom: 5px;">
                            @else
                                <ion-icon name="cash-outline"
                                    style="font-size: 40px; color: var(--color-nav); margin-bottom: 5px;"></ion-icon>
                            @endif
                            <br>
                            <span style="font-size: 0.8rem; font-weight:500" class="mb-2">
                                Slip Gaji
                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="row mt-2">
            @can('aktivitaskaryawan.index')
                <div class="col-3">
                    <a href="{{ route('aktivitaskaryawan.index') }}">
                        <div class="card">
                            <div class="card-body text-center" style="padding: 5px 5px !important; line-height:0.8rem">
                                @if ($scheme == 'green')
                                    <img src="{{ asset('assets/template/img/3d/activity.png') }}" alt=""
                                        style="width: 40px; margin-bottom: 5px;">
                                @else
                                    <ion-icon name="pulse-outline"
                                        style="font-size: 40px; color: var(--color-nav); margin-bottom: 5px;"></ion-icon>
                                @endif
                                <br>
                                <span style="font-size: 0.8rem; font-weight:500" class="mb-2">
                                    Aktivitas
                                </span>
                            </div>
                        </div>
                    </a>
                </div>
            @endcan
            @can('kunjungan.index')
                <div class="col-3">
                    <a href="{{ route('kunjungan.index') }}">
                        <div class="card">
                            <div class="card-body text-center" style="padding: 5px 5px !important; line-height:0.8rem">
                                @if ($scheme == 'green')
                                    <img src="{{ asset('assets/template/img/3d/maps.png') }}" alt=""
                                        style="width: 40px; margin-bottom: 5px;">
                                @else
                                    <ion-icon name="map-outline"
                                        style="font-size: 40px; color: var(--color-nav); margin-bottom: 5px;"></ion-icon>
                                @endif
                                <br>
                                <span style="font-size: 0.8rem; font-weight:500" class="mb-2">
                                    Visit
                                </span>
                            </div>
                        </div>
                    </a>
                </div>
            @endcan
            <div class="col-3">
                <a href="javascript:void(0)" id="btnDaftarkanWajah">
                    <div class="card">
                        <div class="card-body text-center" style="padding: 5px 5px !important; line-height:0.8rem">
                            @if ($scheme == 'green')
                                <img src="{{ asset('assets/template/img/3d/scanwajah.png') }}" alt=""
                                    style="width: 40px; margin-bottom: 5px;">
                            @else
                                <ion-icon name="scan-outline"
                                    style="font-size: 40px; color: var(--color-nav); margin-bottom: 5px;"></ion-icon>
                            @endif
                            <br>
                            <span style="font-size: 0.8rem; font-weight:500" class="mb-2">
                                Wajah
                            </span>
                        </div>
                    </div>
                </a>
            </div>


            <div class="col-3">
                <a href="{{ route('shortcut.index') }}">
                    <div class="card">
                        <div class="card-body text-center" style="padding: 5px 5px !important; line-height:0.8rem">
                            <ion-icon name="apps-outline"
                                style="font-size: 40px; color: var(--color-nav); margin-bottom: 5px;"></ion-icon>
                            <br>
                            <span style="font-size: 0.8rem; font-weight:500" class="mb-2">
                                Lainnya
                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    </div>

    <div id="histori-section">
        <div class="tab-pane fade show active" id="pilled" role="tabpanel">
            <ul class="nav nav-tabs style1" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#historipresensi" role="tab">
                        30 Hari terakhir
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#lembur" role="tab">
                        Lembur <span class="badge badge-danger ml-1">{{ $notiflembur }}</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-content mt-2" style="margin-bottom:100px;">
            <div class="tab-pane fade show active" id="historipresensi" role="tabpanel">
                <div class="row mb-1">
                    <div class="col">
                        <!-- Skeleton Loader for History Cards -->
                        <div class="skeleton-loader">
                            <div class="skeleton-card">
                                <div class="skeleton-header">
                                    <div class="skeleton skeleton-avatar"></div>
                                    <div style="flex: 1;">
                                        <div class="skeleton skeleton-text skeleton-text-long"></div>
                                        <div class="skeleton skeleton-text skeleton-text-short"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skeleton-card">
                                <div class="skeleton-header">
                                    <div class="skeleton skeleton-avatar"></div>
                                    <div style="flex: 1;">
                                        <div class="skeleton skeleton-text skeleton-text-long"></div>
                                        <div class="skeleton skeleton-text skeleton-text-short"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skeleton-card">
                                <div class="skeleton-header">
                                    <div class="skeleton skeleton-avatar"></div>
                                    <div style="flex: 1;">
                                        <div class="skeleton skeleton-text skeleton-text-long"></div>
                                        <div class="skeleton skeleton-text skeleton-text-short"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="content-hide">
                            {{-- {{ $d->jam_out != null ? 'historibordergreen' : 'historiborderred' }} --}}
                            @foreach ($datapresensi as $d)
                                <div class="card mb-1 card-hover"
                                    style="border: 1px solid var(--color-nav); border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.02);">
                                    <div class="card-body p-1 d-flex align-items-center">
                                        <div class="icon-container mr-1 d-flex align-items-center justify-content-center"
                                            style="width: 45px; height: 45px; border-radius: 12px; flex-shrink: 0; 
                                        background-color: {{ $d->status == 'h' ? 'rgba(var(--color-nav-rgb), 0.1)' : ($d->status == 'i' ? 'rgba(30, 144, 255, 0.1)' : ($d->status == 's' ? 'rgba(255, 99, 132, 0.1)' : ($d->status == 'c' ? 'rgba(255, 159, 64, 0.1)' : 'rgba(231, 76, 60, 0.1)'))) }};">
                                            @php
                                                $namahari = [
                                                    'Sun' => 'Minggu',
                                                    'Mon' => 'Senin',
                                                    'Tue' => 'Selasa',
                                                    'Wed' => 'Rabu',
                                                    'Thu' => 'Kamis',
                                                    'Fri' => 'Jumat',
                                                    'Sat' => 'Sabtu',
                                                ];
                                                $day_eng = date('D', strtotime($d->tanggal));
                                                $day_indo = isset($namahari[$day_eng]) ? $namahari[$day_eng] : $day_eng;
                                                $day_short = strtoupper(substr($day_indo, 0, 3));
                                                $tgl = date('d', strtotime($d->tanggal));

                                                $text_color =
                                                    $d->status == 'h'
                                                        ? 'var(--color-nav)'
                                                        : ($d->status == 'i'
                                                            ? '#1e90ff'
                                                            : ($d->status == 's'
                                                                ? '#ff6384'
                                                                : ($d->status == 'c'
                                                                    ? '#ff9f40'
                                                                    : '#e74c3c')));
                                            @endphp
                                            <div style="text-align: center; line-height: 1;">
                                                <span
                                                    style="font-size: 10px; font-weight: 700; display: block; color: {{ $text_color }};">{{ $day_short }}</span>
                                                <span
                                                    style="font-size: 16px; font-weight: 800; display: block; margin-top: 1px; color: {{ $text_color }};">{{ $tgl }}</span>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <div class="row align-items-center">
                                                <div class="col-12">
                                                    <div class="d-flex justify-content-between align-items-center mb-0">
                                                        <h5 class="mb-0 text-truncate"
                                                            style="font-size: 14px; font-weight: 600; color: #333;">
                                                            {{ DateToIndo($d->tanggal) }}</h5>
                                                        <span class="badge"
                                                            style="background-color: #f8f9fa; color: #666; font-weight: normal; font-size: 10px; border: 1px solid #eee;">
                                                            {{ $d->nama_jam_kerja }}
                                                            ({{ date('H:i', strtotime($d->jam_masuk)) }} -
                                                            {{ date('H:i', strtotime($d->jam_pulang)) }})
                                                        </span>
                                                    </div>
                                                    <div class="mb-1">
                                                        @if ($d->status == 'h')
                                                            @php
                                                                $jam_in_ts = strtotime($d->jam_in);
                                                                $jam_masuk_ts = strtotime(
                                                                    $d->tanggal . ' ' . $d->jam_masuk,
                                                                );
                                                                $is_late = $jam_in_ts > $jam_masuk_ts;
                                                                $jam_telat = 0;
                                                                $menit_telat = 0;
                                                                $desimal_terlambat = 0;

                                                                if ($is_late) {
                                                                    $terlambat_selisih = $jam_in_ts - $jam_masuk_ts;
                                                                    $jam_telat = floor($terlambat_selisih / 3600);
                                                                    $sisa = $terlambat_selisih % 3600;
                                                                    $menit_telat = floor($sisa / 60);
                                                                    $desimal_terlambat =
                                                                        $jam_telat + round($menit_telat / 60, 2);
                                                                }

                                                                // Logic Penjagaan Konsistensi dengan Laporan Cetak
                                                                $denda_display = 0;
                                                                $potongan_jam = 0;
                                                                $potongan_jam_terlambat = 0;
                                                                $pulangcepat = 0;
                                                                $potongan_tidak_scan = 0;

                                                                // Cek apakah denda sudah dikunci (ada di database)
                                                                $denda_dari_db = !empty($d->denda) ? $d->denda : null;

                                                                if ($denda_dari_db !== null) {
                                                                    // Gunakan denda dari database
                                                                    $denda_display = $denda_dari_db;
                                                                    if ($is_late) {
                                                                        if ($desimal_terlambat >= 1) {
                                                                            $potongan_jam_terlambat =
                                                                                $desimal_terlambat > $d->total_jam
                                                                                    ? $d->total_jam
                                                                                    : $desimal_terlambat;
                                                                        }
                                                                    }
                                                                } else {
                                                                    // Hitung manual
                                                                    if ($is_late) {
                                                                        if ($desimal_terlambat < 1) {
                                                                            $denda_display = hitungdenda(
                                                                                $denda_list,
                                                                                $menit_telat,
                                                                            );
                                                                            $potongan_jam_terlambat = 0;
                                                                        } else {
                                                                            $denda_display = 0;
                                                                            $potongan_jam_terlambat =
                                                                                $desimal_terlambat > $d->total_jam
                                                                                    ? $d->total_jam
                                                                                    : $desimal_terlambat;
                                                                        }
                                                                    }
                                                                }

                                                                $pulangcepat = hitungpulangcepat(
                                                                    $d->tanggal,
                                                                    $d->jam_out,
                                                                    $d->jam_pulang,
                                                                    $d->istirahat,
                                                                    $d->jam_awal_istirahat,
                                                                    $d->jam_akhir_istirahat,
                                                                    $d->lintashari,
                                                                );
                                                                $pulangcepat =
                                                                    $pulangcepat > $d->total_jam
                                                                        ? $d->total_jam
                                                                        : $pulangcepat;

                                                                // Khusus Dashboard: Jangan hitung tidak scan jika hari ini (presensi berjalan)
                                                                if ($d->tanggal != date('Y-m-d')) {
                                                                    if (empty($d->jam_out) || empty($d->jam_in)) {
                                                                        $potongan_tidak_scan = $d->total_jam;
                                                                    }
                                                                }

                                                                if ($potongan_tidak_scan > 0) {
                                                                    $potongan_jam = $potongan_tidak_scan;
                                                                } else {
                                                                    $potongan_jam =
                                                                        $pulangcepat + $potongan_jam_terlambat;
                                                                }

                                                                // Cek Status Potongan (Toggle)
                                                                // Prioritas: Row level status > Global Setting
                                                                $status_potongan_row = isset($d->status_potongan)
                                                                    ? $d->status_potongan
                                                                    : $namasettings->status_potongan_jam;

                                                                if ($status_potongan_row == 0) {
                                                                    $potongan_jam = 0;
                                                                    $denda_display = 0; // Usually hidden if toggle off, per logic in report? Report hides PJ, does it hide Denda?
                                                                    // Report Logic: $denda calculated regardless but logic implies hiding might be desired.
                                                                    // Actually report only specifically zeroes $potongan_jam. Denda remains in $denda variable but maybe not shown?
                                                                    // Re-reading report: $ket_denda... shown. $pjl... shown based on toggle.
                                                                    // So Denda usually stays. But let's keep it safe.
                                                                }
                                                            @endphp
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <span
                                                                    style="color: #555; font-size: 12px; font-weight: 500;">
                                                                    {{ $d->jam_in != null ? date('H:i', strtotime($d->jam_in)) : '__:__' }}
                                                                    <span style="color: #ccc; margin: 0 5px;">-</span>
                                                                    {{ $d->jam_out != null ? date('H:i', strtotime($d->jam_out)) : '__:__' }}
                                                                </span>
                                                                @if ($is_late)
                                                                    <span class="badge bg-danger"
                                                                        style="font-size: 10px;">
                                                                        Telat
                                                                        {{ $jam_telat > 0 ? $jam_telat . 'j ' : '' }}{{ $menit_telat }}m
                                                                    </span>
                                                                @else
                                                                    <span class="badge bg-success"
                                                                        style="font-size: 10px;">Tepat Waktu</span>
                                                                @endif
                                                            </div>
                                                        @elseif ($d->status == 'i')
                                                            <span style="color: #1e90ff; font-size: 12px;">Izin:
                                                                {{ $d->keterangan_izin }}</span>
                                                        @elseif ($d->status == 's')
                                                            <span style="color: #ff6384; font-size: 12px;">Sakit:
                                                                {{ $d->keterangan_izin_sakit }}</span>
                                                        @elseif ($d->status == 'c')
                                                            <span style="color: #ff9f40; font-size: 12px;">Cuti:
                                                                {{ $d->keterangan_izin_cuti }}</span>
                                                        @elseif ($d->status == 'a')
                                                            @php
                                                                $potongan_jam = $d->total_jam;
                                                                $denda_display = !empty($d->denda) ? $d->denda : 0;

                                                                $status_potongan_row = isset($d->status_potongan)
                                                                    ? $d->status_potongan
                                                                    : $namasettings->status_potongan_jam;
                                                                if ($status_potongan_row == 0) {
                                                                    $potongan_jam = 0;
                                                                }
                                                            @endphp
                                                            <span style="color: #e74c3c; font-size: 12px;">Alpha: Tanpa
                                                                Keterangan</span>
                                                        @endif
                                                    </div>

                                                    <div class="d-flex flex-wrap gap-1">
                                                        @if ($d->status == 'h' && $d->jam_in != null)
                                                            @if ($denda_display > 0)
                                                                <span class="badge bg-danger" style="font-size: 10px;">
                                                                    Denda Rp. {{ number_format($denda_display) }}
                                                                </span>
                                                            @endif

                                                            @if ($pulangcepat > 0)
                                                                <span class="badge bg-danger" style="font-size: 10px;">
                                                                    Pulang Cepat
                                                                </span>
                                                            @endif

                                                            @if ($potongan_jam > 0 && ($d->jam_out != null || $d->tanggal != date('Y-m-d')))
                                                                @if ($namasettings->status_potongan_jam == 1 || (isset($d->status_potongan) && $d->status_potongan == 1))
                                                                    <span class="badge bg-danger"
                                                                        style="font-size: 10px;">
                                                                        PJ: {{ number_format($potongan_jam, 2) }} Jam
                                                                    </span>
                                                                @endif
                                                            @endif
                                                        @elseif ($d->status == 'a')
                                                            @if ($denda_display > 0)
                                                                <span class="badge bg-danger" style="font-size: 10px;">
                                                                    Denda Rp. {{ number_format($denda_display) }}
                                                                </span>
                                                            @endif
                                                            @if ($potongan_jam > 0 && ($d->jam_out != null || $d->tanggal != date('Y-m-d')))
                                                                @if ($namasettings->status_potongan_jam == 1 || (isset($d->status_potongan) && $d->status_potongan == 1))
                                                                    <span class="badge bg-danger"
                                                                        style="font-size: 10px;">
                                                                        PJ: {{ number_format($potongan_jam, 2) }} Jam
                                                                    </span>
                                                                @endif
                                                            @endif
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="lembur" role="tabpanel">
                @foreach ($lembur as $d)
                    <a href="{{ route('lembur.createpresensi', Crypt::encrypt($d->id)) }}">
                        <div class="card historicard historibordergreen mb-1">
                            <div class="historicontent">
                                <div class="historidetail1">
                                    <div class="iconpresence">
                                        <ion-icon name="timer-outline" style="font-size: 48px; color: #1f7ee4"></ion-icon>
                                    </div>
                                    <div class="datepresence">
                                        <h4>{{ DateToIndo($d->tanggal) }}</h4>
                                        <h4 class="timepresence">
                                            Lembur
                                        </h4>

                                        <p>{{ $d->keterangan }}</p>
                                        @if ($d->lembur_in != null)
                                            <span class="badge badge-success">
                                                <ion-icon name="timer-outline"></ion-icon>
                                                {{ date('H:i', strtotime($d->lembur_in)) }}
                                            </span>
                                        @else
                                            <span class="badge badge-danger">
                                                <ion-icon name="timer-outline"></ion-icon>
                                                Belum Absen
                                            </span>
                                        @endif
                                        -
                                        @if ($d->lembur_out != null)
                                            <span class="badge badge-success">
                                                <ion-icon name="timer-outline"></ion-icon>
                                                {{ date('H:i', strtotime($d->lembur_out)) }}
                                            </span>
                                        @else
                                            <span class="badge badge-danger">
                                                <ion-icon name="timer-outline"></ion-icon>
                                                Belum Absen
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="historidetail2">
                                    {{-- <h4>{{ $d->nama_jam_kerja }}</h4>

                                    {{ date('H:i', strtotime($d->jam_masuk)) }} -
                                    {{ date('H:i', strtotime($d->jam_pulang)) }}
                                </span> --}}
                                    <span class="timepresence">
                                        {{ date('H:i', strtotime($d->lembur_mulai)) }} -
                                        {{ date('H:i', strtotime($d->lembur_selesai)) }}
                                        @if (date('Y-m-d', strtotime($d->lembur_selesai)) > date('Y-m-d', strtotime($d->lembur_mulai)))
                                            <ion-icon name="caret-up-outline" style="color: green"></ion-icon>
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Modal Ucapan Ulang Tahun -->
    @if (isset($is_birthday) && $is_birthday)
        <!-- Custom Overlay Backdrop -->
        <div class="birthday-overlay" id="birthdayOverlay"></div>

        <!-- Confetti Container -->
        <div id="confetti-container"></div>

        <div class="modal fade" id="birthdayModal" tabindex="-1" role="dialog" aria-labelledby="birthdayModalLabel"
            aria-hidden="true" data-bs-backdrop="false" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content birthday-modal-content">
                    <!-- Close Button -->
                    <button type="button" class="birthday-close-btn" data-bs-dismiss="modal" aria-label="Close">
                        <ion-icon name="close-circle-outline"></ion-icon>
                    </button>

                    <div class="modal-body birthday-modal-body">
                        <!-- Icons Section -->
                        <div class="birthday-icons">
                            <span
                                style="font-size: 70px; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); animation: bounce 2s infinite;">🎂</span>
                            {{-- <ion-icon name="balloon-outline" class="birthday-icon birthday-icon-balloon"></ion-icon> --}}
                        </div>

                        <!-- Title Section -->
                        <div class="birthday-title-section">

                            <h2 class="birthday-title">Selamat Ulang Tahun!</h2>
                            <h3 class="birthday-name">{{ $karyawan->nama_karyawan }}</h3>
                            @if ($umur)
                                <p class="birthday-age">Selamat ulang tahun yang ke-<strong>{{ $umur }}</strong>
                                    tahun! 🎊</p>
                            @endif
                        </div>

                        <!-- Wishes Section -->
                        <div class="birthday-wishes">
                            <div class="birthday-wish-item">
                                <ion-icon name="star" class="wish-icon"></ion-icon>
                                <span>Panjang umur & sehat selalu</span>
                            </div>
                            <div class="birthday-wish-item">
                                <ion-icon name="star" class="wish-icon"></ion-icon>
                                <span>Bahagia selalu dalam pekerjaan</span>
                            </div>
                            <div class="birthday-wish-item">
                                <ion-icon name="star" class="wish-icon"></ion-icon>
                                <span>Sukses dalam karir</span>
                            </div>
                            <div class="birthday-wish-item">
                                <ion-icon name="star" class="wish-icon"></ion-icon>
                                <span>Diberkahi rezeki yang berlimpah</span>
                            </div>
                        </div>

                        <!-- Button Section -->
                        <button type="button" class="btn btn-light btn-lg birthday-button" data-bs-dismiss="modal">
                            Terima Kasih! 🙏
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <style>
        /* Confetti Styles */
        #confetti-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1060;
            overflow: hidden;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #ffd700;
            position: absolute;
            animation: confetti-fall linear forwards;
        }

        .confetti:nth-child(1n) {
            background: #ffd700;
        }

        .confetti:nth-child(2n) {
            background: #ff6b6b;
        }

        .confetti:nth-child(3n) {
            background: #4ecdc4;
        }

        .confetti:nth-child(4n) {
            background: #95e1d3;
        }

        .confetti:nth-child(5n) {
            background: #ffe66d;
        }

        @keyframes confetti-fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }

        /* Birthday Modal Styles */
        .birthday-modal-content {
            border-radius: 20px !important;
            border: none !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
            overflow: hidden;
        }

        .birthday-modal-body {
            padding: 40px 30px !important;
            background: linear-gradient(135deg, #32745e 0%, #58907D 100%) !important;
            border-radius: 20px !important;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* Close Button */
        .birthday-close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .birthday-close-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .birthday-close-btn ion-icon {
            font-size: 28px;
            color: #fff;
            filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
        }

        /* Icons Section */
        .birthday-icons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin: 0 auto 25px auto;
            width: 100%;
            text-align: center;
            padding: 0;
            position: relative;
        }

        .birthday-icon {
            font-size: 70px;
            filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
            animation: bounce 2s infinite;
            flex-shrink: 0;
            display: block;
            margin: 0;
            line-height: 1;
        }

        .birthday-icon-cake {
            color: #fff;
        }

        .birthday-icon-balloon {
            font-size: 70px;
            color: #ff6b6b;
            animation-delay: 0.2s;
        }

        /* Pastikan icons benar-benar centered */
        @media (max-width: 575px) {
            .birthday-icons {
                justify-content: center;
                align-items: center;
                gap: 15px;
                padding: 0;
                margin: 0 auto 20px auto;
                width: 100%;
            }

            .birthday-icon {
                font-size: 60px;
                margin: 0;
            }
        }

        /* Title Section */
        .birthday-title-section {
            margin-bottom: 25px;
        }

        .birthday-title {
            color: #fff;
            font-weight: bold;
            font-size: 28px;
            margin-bottom: 12px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        .birthday-name {
            color: #fff;
            font-weight: 600;
            font-size: 22px;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        .birthday-age {
            color: #fff;
            font-size: 18px;
            margin-bottom: 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }

        /* Wishes Section */
        .birthday-wishes {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 25px;
            backdrop-filter: blur(10px);
        }

        .birthday-wish-item {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            font-size: 16px;
            margin: 8px 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            justify-content: flex-start;
        }

        .wish-icon {
            font-size: 18px;
            color: #ffd700;
            flex-shrink: 0;
        }

        /* Button Section */
        .birthday-button {
            border-radius: 25px !important;
            padding: 12px 40px !important;
            font-weight: 600 !important;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
        }

        /* Bounce Animation */
        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        /* Modal Dialog */
        #birthdayModal .modal-dialog {
            max-width: 90%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            min-height: 100%;
            padding: 15px;
        }

        /* Memastikan modal benar-benar centered di mobile */
        @media (max-width: 575px) {
            #birthdayModal .modal-dialog {
                max-width: 90%;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: calc(100vh - 30px);
                padding: 15px;
                position: relative;
            }

            #birthdayModal.modal.show .modal-dialog {
                transform: translateY(0);
                margin: auto;
            }

            .birthday-modal-body {
                padding: 30px 20px !important;
            }
        }

        @media (min-width: 576px) {
            #birthdayModal .modal-dialog {
                max-width: 500px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                min-height: calc(100vh - 60px);
                padding: 30px;
            }

            .birthday-title {
                font-size: 32px;
            }

            .birthday-name {
                font-size: 24px;
            }
        }

        /* Custom Overlay Backdrop untuk modal ulang tahun */
        .birthday-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 100vh !important;
            min-height: -webkit-fill-available !important;
            z-index: 1040 !important;
            background-color: rgba(0, 0, 0, 0.6) !important;
            margin: 0 !important;
            padding: 0 !important;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            cursor: pointer;
        }

        .birthday-overlay.show {
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Pastikan modal muncul DI ATAS overlay */
        #birthdayModal {
            z-index: 1050 !important;
            position: fixed !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
        }

        #birthdayModal.show {
            z-index: 1050 !important;
            display: flex !important;
        }

        #birthdayModal .modal-dialog {
            z-index: 1051 !important;
            position: relative !important;
            margin: auto !important;
        }

        #birthdayModal .modal-content {
            z-index: 1052 !important;
            position: relative !important;
        }

        /* Pastikan backdrop menutupi semua elemen termasuk status bar dan bottom nav */
        body.modal-open {
            overflow: hidden !important;
            padding-right: 0 !important;
        }

        body.modal-open .appHeader,
        body.modal-open .bottomMenu,
        body.modal-open #appCapsule {
            position: relative;
            z-index: 1 !important;
        }

        /* Untuk mobile, pastikan overlay menutupi seluruh viewport termasuk safe area */
        @media (max-width: 768px) {
            .birthday-overlay {
                height: 100vh !important;
                height: -webkit-fill-available !important;
                min-height: 100vh !important;
                min-height: -webkit-fill-available !important;
            }

            /* Pastikan modal tetap di atas overlay */
            #birthdayModal {
                z-index: 1050 !important;
                position: fixed !important;
            }

            #birthdayModal.show {
                z-index: 1050 !important;
            }

            #birthdayModal .modal-dialog {
                z-index: 1051 !important;
                position: relative !important;
            }

            #birthdayModal .modal-content {
                z-index: 1052 !important;
                position: relative !important;
            }
        }
    </style>
@endsection
@push('myscript')
    <!-- Preload Face Recognition Models dengan IndexedDB Caching -->
    {{-- <script src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
    <script src="{{ asset('js/face-model-cache.js') }}"></script>
    <script>
        // Auto preload models dan descriptors di background saat dashboard load (non-blocking)
        (function() {
            function startPreload() {
                if (typeof faceapi !== 'undefined' && window.FaceModelCache) {
                    // Delay 1 detik agar tidak blocking render halaman
                    setTimeout(async () => {
                        // Preload models dulu
                        await window.FaceModelCache.preloadFaceModels();
                        console.log('[Dashboard] Face models preloaded in background');

                        // Setelah models loaded, preload descriptors
                        @if (isset($karyawan) && $karyawan)
                            const nik = "{{ $karyawan->nik }}";
                            const label = "{{ $karyawan->nik }}-{{ getNamaDepan(strtolower($karyawan->nama_karyawan)) }}";

                            // Preload descriptors di background (non-blocking, delay 2 detik setelah models loaded)
                            setTimeout(() => {
                                window.FaceModelCache.preloadFaceDescriptors(nik, label).then((success) => {
                                    if (success) {
                                        console.log('[Dashboard] Face descriptors preloaded in background');
                                    }
                                }).catch(err => {
                                    console.warn('[Dashboard] Failed to preload descriptors:', err);
                                });
                            }, 2000);
                        @endif
                    }, 1000);
                } else {
                    // Retry jika face-api.js belum loaded
                    setTimeout(startPreload, 500);
                }
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', startPreload);
            } else {
                startPreload();
            }
        })();
    </script> --}}

    <script type="text/javascript">
        window.onload = function() {
            jam();
        }

        function jam() {
            var e = document.getElementById('jam');
            if (!e) return;

            var d = new Date(),
                h, m, s;
            h = d.getHours();
            m = set(d.getMinutes());
            s = set(d.getSeconds());

            e.innerHTML = h + ':' + m + ':' + s;

            setTimeout(jam, 1000);
        }

        function set(e) {
            e = e < 10 ? '0' + e : e;
            return e;
        }

        // Tampilkan modal ulang tahun jika ada
        @if (isset($is_birthday) && $is_birthday)
            $(document).ready(function() {
                // Fungsi untuk membuat confetti
                function createConfetti() {
                    var container = $('#confetti-container');
                    if (container.length === 0) return;

                    var colors = ['#ffd700', '#ff6b6b', '#4ecdc4', '#95e1d3', '#ffe66d'];
                    var confettiCount = 100;

                    for (var i = 0; i < confettiCount; i++) {
                        var confetti = $('<div class="confetti"></div>');
                        var left = Math.random() * 100;
                        var delay = Math.random() * 3;
                        var duration = 3 + Math.random() * 2;
                        var size = 8 + Math.random() * 8;
                        var color = colors[Math.floor(Math.random() * colors.length)];

                        confetti.css({
                            'left': left + '%',
                            'background': color,
                            'width': size + 'px',
                            'height': size + 'px',
                            'animation-delay': delay + 's',
                            'animation-duration': duration + 's',
                            'border-radius': Math.random() > 0.5 ? '50%' : '0%'
                        });

                        container.append(confetti);

                        // Hapus confetti setelah animasi selesai
                        setTimeout(function() {
                            confetti.remove();
                        }, (duration + delay) * 1000);
                    }
                }

                // Fungsi untuk menampilkan custom overlay
                function showBirthdayOverlay() {
                    var overlay = $('#birthdayOverlay');
                    if (overlay.length > 0) {
                        // Gunakan window.innerHeight untuk mendapatkan tinggi layar yang tepat
                        var screenHeight = window.innerHeight || document.documentElement.clientHeight || document
                            .body.clientHeight;

                        overlay.css({
                            'position': 'fixed',
                            'top': '0',
                            'left': '0',
                            'right': '0',
                            'bottom': '0',
                            'width': '100%',
                            'height': screenHeight + 'px',
                            'min-height': '100vh',
                            'z-index': '1040'
                        });
                        overlay.addClass('show');
                    }
                }

                // Fungsi untuk menyembunyikan custom overlay
                function hideBirthdayOverlay() {
                    $('#birthdayOverlay').removeClass('show');
                    $('#confetti-container').empty();
                }

                // Fungsi untuk menutup modal - metode langsung dan sederhana
                function closeBirthdayModal() {
                    var modal = $('#birthdayModal');
                    var modalElement = document.getElementById('birthdayModal');

                    // Sembunyikan overlay terlebih dahulu
                    hideBirthdayOverlay();

                    // Metode langsung: sembunyikan semua dengan cara yang pasti
                    // 1. Hapus semua class Bootstrap modal
                    modal.removeClass('show fade in');
                    modal.addClass('fade');

                    // 2. Sembunyikan modal dengan CSS langsung
                    modal.css({
                        'display': 'none !important',
                        'visibility': 'hidden',
                        'opacity': '0',
                        'padding-right': ''
                    });

                    // 3. Sembunyikan modal dialog
                    modal.find('.modal-dialog').css('display', 'none');
                    modal.find('.modal-content').css('display', 'none');

                    // 4. Hapus class modal-open dari body
                    $('body').removeClass('modal-open');
                    $('body').css({
                        'padding-right': '',
                        'overflow': ''
                    });

                    // 5. Hapus semua backdrop
                    $('.modal-backdrop').remove();
                    $('#birthdayOverlay').removeClass('show');

                    // 6. Set atribut style langsung pada element
                    if (modalElement) {
                        modalElement.style.display = 'none';
                        modalElement.style.visibility = 'hidden';
                        modalElement.style.opacity = '0';
                        modalElement.classList.remove('show');
                        modalElement.classList.remove('fade');
                    }

                    // 7. Trigger event hidden untuk kompatibilitas
                    modal.trigger('hidden.bs.modal');

                    // 8. Pastikan sekali lagi setelah beberapa saat
                    setTimeout(function() {
                        modal.hide();
                        modal.css('display', 'none');
                        if (modalElement) {
                            modalElement.style.display = 'none';
                        }
                    }, 50);
                }

                // Event handler menggunakan event delegation untuk memastikan terikat
                $(document).on('click', '.birthday-close-btn', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    closeBirthdayModal();
                });

                // Event handler untuk klik overlay/backdrop - tutup modal saat klik di overlay
                $(document).on('click', '#birthdayOverlay', function(e) {
                    if (e.target === this) {
                        closeBirthdayModal();
                    }
                });

                // Mencegah modal tutup saat klik di dalam modal content
                $(document).on('click', '#birthdayModal .modal-content', function(e) {
                    e.stopPropagation();
                });

                // Event handler untuk tombol "Terima Kasih"
                $(document).on('click', '.birthday-button', function(e) {
                    e.preventDefault();
                    closeBirthdayModal();
                });

                // Coba Bootstrap 5 API dulu, jika tidak ada gunakan jQuery
                if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                    var birthdayModal = new bootstrap.Modal(document.getElementById('birthdayModal'), {
                        backdrop: false,
                        keyboard: false
                    });

                    // Tampilkan overlay sebelum modal
                    showBirthdayOverlay();

                    // Buat confetti
                    createConfetti();

                    // Tampilkan modal
                    birthdayModal.show();

                    // Pastikan overlay tetap muncul setelah modal muncul
                    $('#birthdayModal').on('shown.bs.modal', function() {
                        showBirthdayOverlay();
                        // Buat confetti lagi setelah beberapa detik
                        setTimeout(function() {
                            createConfetti();
                        }, 2000);
                    });

                    // Sembunyikan overlay saat modal ditutup
                    $('#birthdayModal').on('hidden.bs.modal', function() {
                        hideBirthdayOverlay();
                    });
                } else {
                    $('#birthdayModal').modal({
                        backdrop: false,
                        keyboard: false
                    });

                    // Tampilkan overlay sebelum modal
                    showBirthdayOverlay();

                    // Buat confetti
                    createConfetti();

                    // Tampilkan modal
                    $('#birthdayModal').modal('show');

                    // Pastikan overlay tetap muncul setelah modal muncul
                    $('#birthdayModal').on('shown.bs.modal', function() {
                        showBirthdayOverlay();
                        // Buat confetti lagi setelah beberapa detik
                        setTimeout(function() {
                            createConfetti();
                        }, 2000);
                    });

                    // Sembunyikan overlay saat modal ditutup
                    $('#birthdayModal').on('hidden.bs.modal', function() {
                        hideBirthdayOverlay();
                    });
                }

                // Update overlay saat window resize
                $(window).on('resize', function() {
                    if ($('#birthdayModal').hasClass('show')) {
                        showBirthdayOverlay();
                    }
                });
            });
        @endif

        // Handler untuk tombol Daftarkan Wajah - redirect ke halaman baru
        $("#btnDaftarkanWajah").click(function(e) {
            e.preventDefault();
            window.location.href = "{{ route('facerecognition.karyawan.create') }}";
        });

        // Hide skeleton loaders when page is fully loaded
        $(window).on('load', function() {
            setTimeout(function() {
                $('.skeleton-loader').fadeOut(200, function() {
                    $(this).remove();
                });
                $('.content-hide').removeClass('content-hide').hide().fadeIn(300);
            }, 100);
        });
    </script>
@endpush