@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('css')
    <!-- Animate.css CDN for animation -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @push('css')
        <style>
            .calendar-real-container {
                display: grid;

                grid-template-columns: repeat(7, 1fr);
                gap: 6px;
                margin-top: 10px;
                background: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
                padding: 10px;
            }

            .calendar-header-day {
                text-align: center;
                font-weight: bold;
                color: #028284;
                padding: 4px 0 8px 0;
                font-size: 15px;
                background: #f3f6f9;
                border-radius: 4px;
            }

            .calendar-real-day {
                min-height: 60px;
                background: #f8f9fa;
                border-radius: 6px;
                border: 1px solid #e3e3e3;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                font-size: 14px;
                padding: 4px 2px 2px 2px;
                cursor: pointer;
                transition: background 0.2s, box-shadow 0.2s;
                position: relative;
            }

            .calendar-real-day.holiday {
                background: #ffeaea;
                border: 1.5px solid #f53939;
                color: #f53939;
                font-weight: bold;
                box-shadow: 0 2px 8px rgba(245, 57, 57, 0.08);
            }

            .calendar-real-day.today {
                border: 2px solid #028284;
                background: #e6f7f4;
            }

            .calendar-real-day .date-number {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 2px;
            }

            .calendar-real-day .holiday-dot {
                width: 7px;
                height: 7px;
                background: #f53939;
                border-radius: 50%;
                position: absolute;
                bottom: 6px;
                left: 50%;
                transform: translateX(-50%);
            }

            .calendar-real-day .holiday-desc {
                font-size: 11px;
                color: #f53939;
                margin-top: 2px;
                text-align: center;
                font-weight: 400;
            }

            .calendar-real-day.empty {
                background: transparent;
                border: none;
                cursor: default;
            }

            @media (max-width: 768px) {
                .calendar-real-container {
                    grid-template-columns: repeat(7, 1fr);
                }

                .calendar-real-day {
                    min-height: 40px;
                    font-size: 12px;
                }
            }
        </style>
    @endpush

    <div class="container-fluid py-4">
        {{-- Sisa Cuti di pojok kanan atas, sejajar --}}
        <div class="row justify-content-end">
            <div class="col-12 col-md-6 mb-4 d-flex flex-column flex-md-row gap-3 justify-content-end">
                <div class="card flex-fill" style="min-width: 220px;">
                    <div class="card-body text-center">
                        <i class="fas fa-calendar-day mb-2 text-primary" style="font-size: 24px;"></i>
                        <p class="text-sm mb-1">Sisa Cuti Pribadi / Tahunan {{ date('Y') }}</p>
                        @if ($sisaCuti == null)
                            <div class="spinner-grow text-danger me-2" role="status" style="width: 16px; height: 16px;">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mb-0 text-danger">Anda tidak bisa
                                mengajukan cuti pribadi untuk saat ini. Hubungi personalia untuk mengatur sisa cuti pribadi
                                anda.</p>
                        @else
                            <h5 class="font-weight-bolder">{{ $sisaCuti->jumlah }} Hari</h5>
                        @endif
                    </div>
                </div>
                @if ($sisaCuti && $sisaCuti->jumlah_bersama > 0)
                    <div class="card flex-fill" style="min-width: 220px;">
                        <div class="card-body text-center">
                            <i class="fas fa-users mb-2 text-primary" style="font-size: 24px;"></i>
                            <p class="text-sm mb-1">Sisa Cuti Bersama {{ date('Y') }}</p>
                            <h5 class="font-weight-bolder">{{ $sisaCuti->jumlah_bersama }} Hari</h5>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Notifikasi user profile link belum tertautkan --}}
        @if (isset($isLinkUserProfile) && !$isLinkUserProfile)
            <div class="col-md-12 mb-4">
                <div class="card border-danger" style="background-color: #dc3545; color: white;">
                    <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between py-3">
                        <div class="d-flex align-items-center">
                            {{-- Ikon dengan animasi --}}
                            <i class="fas fa-exclamation-triangle me-3 animate__animated animate__pulse animate__infinite"
                                style="font-size: 2.5rem;"></i>

                            <div>
                                <h5 class="mb-1 text-white"><strong>Anda belum tertaut dengan profil HRIS anda!</strong>
                                </h5>
                                <p class="mb-0 text-white">
                                    Anda belum menautkan akun anda dengan profil yang ada di aplikasi HRIS.
                                    Silahkah tautkan sekarang agar pengajuan dapat diproses.
                                </p>
                            </div>
                        </div>
                        <a href="{{ url('/mslink') }}" class="btn btn-primary btn-sm btn-md-lg mt-3 mt-md-0 ms-md-4 shadow-sm">
                            <i class="fas fa-pen me-2"></i>Tautkan Sekarang
                        </a>
                    </div>
                </div>
            </div>
        @endif

        {{-- Notifikasi Tanda Tangan Belum Ada --}}
        @if (isset($isSignature) && !$isSignature)
            <div class="col-md-12 mb-4">
                <div class="card border-danger" style="background-color: #dc3545; color: white;">
                    <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between py-3">

                        <div class="d-flex align-items-center">
                            {{-- Ikon dengan animasi --}}
                            <i class="fas fa-exclamation-triangle me-3 animate__animated animate__pulse animate__infinite"
                                style="font-size: 2.5rem;"></i>

                            <div>
                                <h5 class="mb-1 text-white"><strong>Tanda Tangan Belum Diatur!</strong></h5>
                                <p class="mb-0 text-white">
                                    Anda belum memiliki tanda tangan untuk pengajuan cuti/perizinan.
                                    Silakan set tanda tangan sekarang agar pengajuan dapat diproses.
                                </p>
                            </div>
                        </div>
                        <a href="{{ url('/profile') }}"
                        class="btn btn-primary btn-sm btn-md-lg
                                mt-3 mt-md-0
                                mx-auto mx-md-0
                                shadow-sm">
                            <i class="fas fa-pen me-2"></i>Set Sekarang
                        </a>

                    </div>
                </div>
            </div>
        @endif

        {{-- Notifikasi hierarki belum ada --}}
        @if (isset($isHierarchy) && !$isHierarchy && !(isset($skipHierarchyNotif) && $skipHierarchyNotif))
            <div class="col-md-12 mb-4">
                <div class="card border-danger" style="background-color: #dc3545; color: white;">
                    <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between py-3">

                        <div class="d-flex align-items-center">
                            {{-- Ikon dengan animasi --}}
                            <i class="fas fa-exclamation-triangle me-3 animate__animated animate__pulse animate__infinite"
                                style="font-size: 2.5rem;"></i>

                            <div>
                                <h5 class="mb-1 text-white"><strong>Hierarki Karyawan (Set Atasan) Anda Belum
                                        Diatur!</strong></h5>
                                <p class="mb-0 text-white">
                                    Anda belum memiliki hierarki untuk pengajuan cuti/perizinan.
                                    Silakan set hierarki sekarang agar pengajuan dapat diproses.
                                    Hierarki digunakan untuk alur pengajuan, Menentukan kepada siapa surat anda akan di
                                    kirimkan.
                                </p>
                            </div>
                        </div>
                        <div class="d-flex flex-column gap-2 mt-3 mt-md-0 ms-md-4 w-100 w-md-auto">

                            <a href="{{ url('/mshk12') }}" class="btn btn-primary btn-sm btn-md-lg shadow-sm w-100 w-md-auto">

                                <i class="fas fa-pen me-2"></i>Set Sekarang
                            </a>
                            <button type="button" class="btn btn-light btn-sm btn-md-lg shadow-sm w-100 w-md-auto"
                                onclick="skipHierarchyNotification()">
                                <i class="fas fa-user-slash me-2"></i>Tidak Punya Atasan
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Peringatan H-3 untuk Atasan: ada surat cuti nyangkut di periode yang akan berakhir --}}
        @if (isset($isAtasan) && $isAtasan && isset($periodeCutiAtasanH3) && $periodeCutiAtasanH3->count() > 0)
            <div class="col-md-12 mb-4">
                <div class="card" style="border-width: 2px;background-color: #fff6dc; border-color:#fb6340;">
                    <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between py-3">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-user-clock me-3 animate__animated animate__pulse animate__infinite" style="font-size: 2.5rem; color: #fb6340;"></i>
                            <div>
                                <h5 class="mb-1 text-warning"><strong>Segera Ambil Keputusan Cuti Bawahan Anda!</strong></h5>
                                @foreach ($periodeCutiAtasanH3 as $periode)
                                    <p class="mb-0">
                                        Periode <strong>{{ $periode->nama }}</strong> akan berakhir dalam
                                        <strong>{{ $periode->hari_lagi }}</strong> hari
                                        ({{ $periode->berakhir_format }}).
                                        Masih ada pengajuan cuti bawahan Anda yang belum diputuskan.
                                        Segera ambil keputusan agar periode dapat direkap tepat waktu.
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <a href="{{ url('/pckbbr') }}" class="btn btn-warning btn-sm mt-3 mt-md-0 shadow-sm">
                            <i class="fas fa-gavel me-2"></i>Putuskan Sekarang
                        </a>
                    </div>
                </div>
            </div>
        @endif

        {{-- Peringatan H-3 untuk Atasan: ada surat izin/tugas nyangkut di periode yang akan berakhir --}}
        @if (isset($isAtasan) && $isAtasan && isset($periodeIzinAtasanH3) && $periodeIzinAtasanH3->count() > 0)
            <div class="col-md-12 mb-4">
                <div class="card" style="border-width: 2px;background-color: #fff6dc; border-color:#fb6340;">
                    <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between py-3">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-user-clock me-3 animate__animated animate__pulse animate__infinite" style="font-size: 2.5rem; color: #fb6340;"></i>
                            <div>
                                <h5 class="mb-1 text-warning"><strong>Segera Ambil Keputusan Izin/Tugas Bawahan Anda!</strong></h5>
                                @foreach ($periodeIzinAtasanH3 as $periode)
                                    <p class="mb-0">
                                        Periode <strong>{{ $periode->nama }}</strong> akan berakhir dalam
                                        <strong>{{ $periode->hari_lagi }}</strong> hari
                                        ({{ $periode->berakhir_format }}).
                                        Masih ada pengajuan izin/tugas bawahan Anda yang belum diputuskan.
                                        Segera ambil keputusan agar periode dapat direkap tepat waktu.
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <a href="{{ url('/pitkbr') }}" class="btn btn-warning btn-sm mt-3 mt-md-0 shadow-sm">
                            <i class="fas fa-gavel me-2"></i>Putuskan Sekarang
                        </a>
                    </div>
                </div>
            </div>
        @endif

        {{-- Notifikasi Cuti dan Izin/Tugas bawahan --}}
        @if (isset($cutiBawahanPending) && isset($perizinanBawahanPending))
            <div class="col-md-12 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h6>Notifikasi Cuti dan Izin/Tugas (Izin & Tugas) Pending Bawahan</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            {{-- Card Cuti Bawahan Pending --}}
                            @isset($cutiBawahanPending)
                                @php $isCutiAlert = (int) $cutiBawahanPending > 0; @endphp
                                <div class="col-md-6 mb-3">
                                    <div class="card {{ $isCutiAlert ? 'border-warning' : '' }}">
                                        <div class="card-body text-center">
                                            <i class="fas fa-user-clock mb-2 {{ $isCutiAlert ? 'text-warning' : 'text-primary' }}"
                                                style="font-size: 24px;"></i>
                                            <p class="text-sm mb-1">Cuti Bawahan Pending</p>
                                            <h5 class="font-weight-bolder">{{ (int) $cutiBawahanPending }}</h5>
                                            @if ($isCutiAlert)
                                                <div class="mt-2">
                                                    <a href="{{ url('/pckbbr') }}" class="btn btn-warning btn-sm">Lihat
                                                        Sekarang</a>
                                                </div>
                                            @else
                                                <div class="mt-2">
                                                    <a href="{{ url('/pckbbr') }}" class="btn btn-primary btn-sm">Lihat</a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endisset

                            {{-- Card Izin/Tugas Bawahan Pending --}}
                            @isset($perizinanBawahanPending)
                                @php
                                    $tIzin = 0;
                                    $tTugas = 0;
                                    if (is_iterable($perizinanBawahanPending)) {
                                        foreach ($perizinanBawahanPending as $row) {
                                            $tIzin += data_get($row, 'totalIzin', 0);
                                            $tTugas += data_get($row, 'totalTugas', 0);
                                        }
                                    } else {
                                        $tIzin = data_get($perizinanBawahanPending, 'totalIzin', 0);
                                        $tTugas = data_get($perizinanBawahanPending, 'totalTugas', 0);
                                    }
                                    $totalPendingPerizinan = (int) ($tIzin + $tTugas);
                                    $isPerizinanAlert = $totalPendingPerizinan > 0;
                                @endphp
                                <div class="col-md-6 mb-3">
                                    <div class="card {{ $isPerizinanAlert ? 'border-warning' : '' }}">
                                        <div class="card-body text-center">
                                            <i class="fas fa-clipboard-list mb-2 {{ $isPerizinanAlert ? 'text-warning' : 'text-primary' }}"
                                                style="font-size: 24px;"></i>
                                            <p class="text-sm mb-1">Perizinan Bawahan Pending</p>
                                            <h5 class="font-weight-bolder">{{ $totalPendingPerizinan }}</h5>
                                            <p class="text-xs text-muted mb-2">Izin: {{ $tIzin }} | Tugas:
                                                {{ $tTugas }}</p>
                                            @if ($isPerizinanAlert)
                                                <div class="mt-2">
                                                    <a href="{{ url('/pitkbr') }}" class="btn btn-warning btn-sm">Lihat
                                                        Sekarang</a>
                                                </div>
                                            @else
                                                <div class="mt-2">
                                                    <a href="{{ url('/pitkbr') }}" class="btn btn-primary btn-sm">Lihat</a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endisset
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Upload Nota Reimbursement Pending (hanya tampil jika ada data) --}}
        @if (isset($uploadNotaNotif) && count($uploadNotaNotif) > 0)
            <div class="col-md-12 mb-4">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">Upload Nota Reimbursement Pending</h6>
                        <span class="badge bg-secondary">{{ count($uploadNotaNotif) }} Menunggu</span>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped align-items-center mb-0" id="tbl-upload-nota">
                                <thead class="table-info">
                                    <tr>
                                        <th class="text-uppercase text-xs font-weight-bolder">No</th>
                                        <th class="text-uppercase text-xs font-weight-bolder text-center">Aksi</th>
                                        <th class="text-uppercase text-xs font-weight-bolder">ID Reimburse</th>
                                        <th class="text-uppercase text-xs font-weight-bolder">ID Izin/Tugas</th>
                                        <th class="text-uppercase text-xs font-weight-bolder">Keterangan</th>
                                        <th class="text-uppercase text-xs font-weight-bolder">Status</th>
                                        <th class="text-uppercase text-xs font-weight-bolder">Jam Keluar</th>
                                        <th class="text-uppercase text-xs font-weight-bolder">Jam Masuk</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($uploadNotaNotif as $idx => $row)
                                        <tr>
                                            <td>{{ $idx + 1 }}</td>
                                            <td class="text-center">
                                                <a href="{{ url('/rbstpj/edit/' . $row->id) }}"
                                                    class="btn btn-sm btn-primary">Upload Nota</a>
                                            </td>
                                            <td>{{ $row->idreimburse }}</td>
                                            <td>{{ $row->idperizinan }}</td>
                                            <td style="max-width:250px; white-space:normal;">{{ $row->keterangan }}</td>
                                            <td>
                                                <span class="badge bg-secondary">{{ $row->status }}</span>
                                            </td>
                                            <td>{{ \Carbon\Carbon::parse($row->jam_keluar)->format('d/m/Y H:i') }}</td>
                                            <td>{{ \Carbon\Carbon::parse($row->jam_masuk)->format('d/m/Y H:i') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Status Pengajuan Cuti --}}
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6>Status Pengajuan Cuti - Tahun: {{ date('Y') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- Card untuk Cuti Diproses --}}
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-clock mb-2 text-warning" style="font-size: 24px;"></i>
                                    <p class="text-sm mb-1">Cuti Diproses</p>
                                    <h5 class="font-weight-bolder">{{ $jumlahCUtiMenunggu }}</h5>
                                </div>
                            </div>
                        </div>

                        {{-- Card untuk Cuti Disetujui --}}
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-check-circle mb-2" style="font-size: 24px; color: #028284;"></i>
                                    <p class="text-sm mb-1">Cuti Disetujui</p>
                                    <h5 class="font-weight-bolder">{{ $jumlahCutiDisetujui }}</h5>
                                </div>
                            </div>
                        </div>

                        {{-- Card untuk Cuti Ditolak --}}
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-times-circle mb-2 text-danger" style="font-size: 24px;"></i>
                                    <p class="text-sm mb-1">Cuti Ditolak</p>
                                    <h5 class="font-weight-bolder">{{ $jumlahCutiDitolak }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Cuti Berdasarkan Jenis --}}
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6>Cuti Berdasarkan Jenis - Tahun: {{ date('Y') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- Card untuk Cuti Pribadi --}}
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-list-alt mb-2 text-primary" style="font-size: 24px;"></i>
                                    <p class="text-sm mb-1">Cuti Pribadi</p>
                                    <h5 class="font-weight-bolder">{{ $jumlahJenisCutiPribadi }}</h5>
                                </div>
                            </div>
                        </div>

                        {{-- Card untuk Cuti Khusus --}}
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-list-alt mb-2 text-primary" style="font-size: 24px;"></i>
                                    <p class="text-sm mb-1">Cuti Khusus</p>
                                    <h5 class="font-weight-bolder">{{ $jumlahJenisCutiKhusus }}</h5>
                                </div>
                            </div>
                        </div>

                        {{-- Card untuk Cuti Melahirkan --}}
                        @if ($jenisKelamin == 'N/A' || !$jenisKelamin)
                            <!-- Tampilkan card ini jika jenis kelamin tidak tersedia -->
                        @elseif($jenisKelamin->jk == 'P')
                            <div class="col-md-4 mb-3">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <i class="fas fa-list-alt mb-2 text-primary" style="font-size: 24px;"></i>
                                        <p class="text-sm mb-1">Cuti Melahirkan</p>
                                        <h5 class="font-weight-bolder">{{ $jumlahJenisCutiMelahirkan }}</h5>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- Card untuk Cuti Panjang --}}
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-list-alt mb-2 text-primary" style="font-size: 24px;"></i>
                                    <p class="text-sm mb-1">Cuti Panjang</p>
                                    <h5 class="font-weight-bolder">{{ $jumlahJenisCutiPanjang }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            @if ($potentialSP && $potentialSP->total != 0)
                {{-- Potensi SP oleh personalia --}}
                <div class="col-md-4 mb-4">
                    <div class="card h-100">
                        <div class="card-header">
                            <h6>Potensi SP oleh Personalia - {{ $currentPeriod->nama }}</h6>
                        </div>
                        <div class="card-body text-center d-flex flex-column justify-content-center">
                            <i class="fas fa-exclamation-triangle mb-2 text-danger" style="font-size: 24px;"></i>
                            <p class="text-sm mb-1">Potensi SP oleh Personalia</p>
                            <p class="text-sm mb-1">Anda telah mengajukan permohonan izin terlambat/pulang
                                cepat lebih dari 3 kali, dengan total yang telah anda ajukan (telah disetujui):
                            </p>
                            <h5 class="font-weight-bolder mb-2">{{ $potentialSP->total }} Total</h5>
                            <table class="table table-bordered mb-2">
                                <thead>
                                    <tr>
                                        <th class="bg-info text-light text-center">Terlambat</th>
                                        <th class="bg-info text-light text-center">Pulang Cepat</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="text-center">{{ $potentialSP->total_terlambat }}</td>
                                        <td class="text-center">{{ $potentialSP->total_pulang_cepat }}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="d-flex justify-content-center gap-2 mt-2">
                                <a href="{{ url('/pitphp?search-periode=' . $currentPeriod->id . '&assigned-for=diri_sendiri&status=disetujui&jenis_izin=1') }}"
                                    class="btn btn-primary btn-sm">Lihat Permohonan Terlambat</a>
                                <a href="{{ url('/pitphp?search-periode=' . $currentPeriod->id . '&assigned-for=diri_sendiri&status=disetujui&jenis_izin=3') }}"
                                    class="btn btn-primary btn-sm">Lihat Permohonan Pulang Cepat</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 mb-4">
                @else
                    <div class="col-md-12 mb-4">
            @endif
            {{-- Status Pengajuan Izin/Tugas --}}
            <div class="card h-100">
                <div class="card-header">
                    <h6>Status Pengajuan Izin/Tugas - Tahun: {{ date('Y') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- Card untuk Izin/Tugas Diproses --}}
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-clock mb-2 text-warning" style="font-size: 24px;"></i>
                                    <p class="text-sm mb-1">Perizinan Diproses</p>
                                    <h5 class="font-weight-bolder">{{ $jumlahPerizinanMenunggu }}</h5>
                                </div>
                            </div>
                        </div>
                        {{-- Card untuk Izin/Tugas Disetujui --}}
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-check-circle mb-2" style="font-size: 24px; color: #028284;"></i>
                                    <p class="text-sm mb-1">Perizinan Disetujui</p>
                                    <h5 class="font-weight-bolder">{{ $jumlahPerizinanDisetujui }}</h5>
                                </div>
                            </div>
                        </div>
                        {{-- Card untuk Izin/Tugas Ditolak --}}
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-times-circle mb-2 text-danger" style="font-size: 24px;"></i>
                                    <p class="text-sm mb-1">Perizinan Ditolak</p>
                                    <h5 class="font-weight-bolder">{{ $jumlahPerizinanDitolak }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Kategori Izin/Tugas --}}
    <div class="col-md-12 mb-4">
        <div class="card">
            <div class="card-header">
                <h6>Perizinan Berdasarkan Kategori - Tahun: {{ date('Y') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    {{-- Card untuk Izin/Tugas Tugas --}}
                    <div class="col-md-6 mb-3">
                        <div class="card">
                            <div class="card-body text-center">
                                <i class="fas fa-briefcase mb-2 text-primary" style="font-size: 24px;"></i>
                                <p class="text-sm mb-1">Perizinan Tugas</p>
                                <h5 class="font-weight-bolder">{{ $JumlahKategoriPerizinanTugas }}</h5>
                            </div>
                        </div>
                    </div>

                    {{-- Card untuk Izin/Tugas Izin --}}
                    <div class="col-md-6 mb-3">
                        <div class="card">
                            <div class="card-body text-center">
                                <i class="fas fa-user-check mb-2 text-primary" style="font-size: 24px;"></i>
                                <p class="text-sm mb-1">Perizinan Izin</p>
                                <h5 class="font-weight-bolder">{{ $JumlahKategoriPerizinanIzin }}</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Jenis Izin --}}
    <div class="col-md-12 mb-4">
        <div class="card">
            <div class="card-header">
                <h6>Izin Berdasarkan Jenis - Tahun: {{ date('Y') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    {{-- Card untuk Izin Terlambat --}}
                    <div class="col-md-6 mb-3">
                        <div class="card">
                            <div class="card-body text-center">
                                <i class="fas fa-clock mb-2 text-primary" style="font-size: 24px;"></i>
                                <p class="text-sm mb-1">Izin Terlambat</p>
                                <h5 class="font-weight-bolder">{{ $JumlahPerizinanIzinTerlambat }}</h5>
                            </div>
                        </div>
                    </div>

                    {{-- Card untuk Izin Pulang Cepat --}}
                    <div class="col-md-6 mb-3">
                        <div class="card">
                            <div class="card-body text-center">
                                <i class="fas fa-home mb-2 text-primary" style="font-size: 24px;"></i>
                                <p class="text-sm mb-1">Izin Pulang Cepat</p>
                                <h5 class="font-weight-bolder">{{ $JumlahJenisPerizinanIzinPulangCepat }}</h5>
                            </div>
                        </div>
                    </div>

                    {{-- Card untuk Izin Keluar Tengah --}}
                    <div class="col-md-6 mb-3">
                        <div class="card">
                            <div class="card-body text-center">
                                <i class="fas fa-door-open mb-2 text-primary" style="font-size: 24px;"></i>
                                <p class="text-sm mb-1">Izin Keluar Tengah</p>
                                <h5 class="font-weight-bolder">{{ $JumlahJenisPerizinanIzinKeluarTengah }}</h5>
                            </div>
                        </div>
                    </div>

                    {{-- Card untuk Izin Acara Khusus --}}
                    <div class="col-md-6 mb-3">
                        <div class="card">
                            <div class="card-body text-center">
                                <i class="fas fa-calendar-alt mb-2 text-primary" style="font-size: 24px;"></i>
                                <p class="text-sm mb-1">Izin Acara Khusus</p>
                                <h5 class="font-weight-bolder">{{ $JumlahJenisPerizinanIzinAcaraKhusus }}</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Kalender Libur Cuti Bersama --}}
    <div class="row mt-4">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h6>Kalender Cuti Bersama - Tahun: {{ date('Y') }}</h6>
                    <p class="text-sm">Deskripsi libur cuti bersama akan ditampilkan ketika Anda mengklik tanggal.</p>
                </div>
                <div class="card-body">
                    {{-- Dropdown untuk memilih bulan dan tahun --}}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="bulan">Pilih Bulan</label>
                            <select id="bulan" class="form-select" onchange="updateCalendar()">
                                @foreach (range(1, 12) as $month)
                                    <option value="{{ $month }}" {{ $month == now()->month ? 'selected' : '' }}>
                                        {{ DateTime::createFromFormat('!m', $month)->format('F') }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="tahunKalender">Pilih Tahun</label>
                            <select id="tahunKalender" class="form-select" onchange="updateCalendar()">
                                @php
                                    $currentYear = now()->year;
                                @endphp
                                @foreach (range($currentYear - 2, $currentYear + 2) as $year)
                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>
                                        {{ $year }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="calendar-real-container" id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@push('js')
    <script>
        // Function untuk skip hierarchy notification
        function skipHierarchyNotification() {
            Swal.fire({
                title: 'Konfirmasi',
                text: 'Apakah Anda yakin tidak memiliki atasan? Notifikasi ini tidak akan muncul lagi.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#028284',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Saya Tidak Punya Atasan',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('{{ route("dashboard.skip-hierarchy") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({})
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: 'Notifikasi hierarki tidak akan muncul lagi.',
                                icon: 'success',
                                confirmButtonColor: '#028284'
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'Gagal!',
                                text: data.message || 'Terjadi kesalahan.',
                                icon: 'error',
                                confirmButtonColor: '#dc3545'
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        Swal.fire({
                            title: 'Error!',
                            text: 'Terjadi kesalahan saat memproses permintaan.',
                            icon: 'error',
                            confirmButtonColor: '#dc3545'
                        });
                    });
                }
            });
        }

        // Kalender asli dengan grid hari dan highlight libur
        function updateCalendar() {
            const selectedMonth = parseInt(document.getElementById('bulan').value);
            const selectedYear = parseInt(document.getElementById('tahunKalender').value);
            const holidays = @json($liburCutiBersama);
            const calendarContainer = document.getElementById('calendar');
            calendarContainer.innerHTML = '';

            // Hari-hari dalam seminggu
            const daysOfWeek = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
            // Header hari
            daysOfWeek.forEach(day => {
                const header = document.createElement('div');
                header.className = 'calendar-header-day';
                header.innerText = day;
                calendarContainer.appendChild(header);
            });

            // Hitung jumlah hari dalam bulan dan hari pertama
            const firstDay = new Date(selectedYear, selectedMonth - 1, 1).getDay();
            const daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate();
            const today = new Date();

            // Buat array libur untuk lookup cepat
            const holidayMap = {};
            holidays.forEach(h => {
                const d = new Date(h.tanggal);
                if (d.getFullYear() === selectedYear && d.getMonth() + 1 === selectedMonth) {
                    holidayMap[d.getDate()] = h;
                }
            });

            // Render grid kalender
            let gridCount = 0;
            // Kosongkan hari sebelum tanggal 1
            for (let i = 0; i < firstDay; i++) {
                const empty = document.createElement('div');
                empty.className = 'calendar-real-day empty';
                calendarContainer.appendChild(empty);
                gridCount++;
            }
            // Render hari-hari bulan ini
            for (let day = 1; day <= daysInMonth; day++) {
                const cell = document.createElement('div');
                cell.className = 'calendar-real-day';
                // Highlight hari ini
                if (
                    day === today.getDate() &&
                    selectedMonth === today.getMonth() + 1 &&
                    selectedYear === today.getFullYear()
                ) {
                    cell.classList.add('today');
                }
                // Jika libur
                if (holidayMap[day]) {
                    cell.classList.add('holiday');
                    cell.innerHTML = `<span class="date-number">${day}</span><div class="holiday-dot"></div>`;
                    cell.title = holidayMap[day].deskripsi;
                    cell.addEventListener('click', function() {
                        Swal.fire({
                            title: `Libur Tanggal ${day < 10 ? '0' + day : day}`,
                            html: `<p>${holidayMap[day].deskripsi}</p><p>Tanggal Lengkap: ${new Date(holidayMap[day].tanggal).toLocaleDateString('id-ID', {day: '2-digit', month: '2-digit', year: 'numeric'})}</p>`,
                            icon: 'info',
                            confirmButtonText: 'OK',
                            confirmButtonColor: '#028284'
                        });
                    });
                } else {
                    cell.innerHTML = `<span class="date-number">${day}</span>`;
                }
                calendarContainer.appendChild(cell);
                gridCount++;
            }
            // Kosongkan sisa grid agar kelipatan 7
            while (gridCount % 7 !== 0) {
                const empty = document.createElement('div');
                empty.className = 'calendar-real-day empty';
                calendarContainer.appendChild(empty);
                gridCount++;
            }
        }
        document.addEventListener('DOMContentLoaded', function() {
            updateCalendar();
            // Inisialisasi DataTables jika elemen ada
            if (window.jQuery && $('#tbl-upload-nota').length) {
                $('#tbl-upload-nota').DataTable({
                    pageLength: 5,
                    lengthChange: false,
                    ordering: true,
                    order: [
                        [0, 'asc']
                    ],
                    language: {
                        search: 'Cari:',
                        paginate: {
                            previous: 'Sebelumnya',
                            next: 'Berikutnya'
                        },
                        info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ data',
                        infoEmpty: 'Tidak ada data',
                        zeroRecords: 'Data tidak ditemukan'
                    }
                });
            }
        });
    </script>
@endpush