@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')
        {{-- Atau letakkan style ini di file CSS terpisah --}}
        <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;
            }

            /* KPI Card Styles */
            .border-left-warning {
                border-left: 0.25rem solid #ffc107 !important;
            }

            .border-left-success {
                border-left: 0.25rem solid #28a745 !important;
            }

            .border-left-danger {
                border-left: 0.25rem solid #dc3545 !important;
            }

            .text-warning {
                color: #ffc107 !important;
            }

            .text-success {
                color: #28a745 !important;
            }

            .text-danger {
                color: #dc3545 !important;
            }

            .text-xs {
                font-size: 0.75rem;
            }

            .font-weight-bold {
                font-weight: 700;
            }

            .text-uppercase {
                text-transform: uppercase;
            }

            .text-gray-800 {
                color: #5a5c69 !important;
            }

            .text-gray-300 {
                color: #dddfeb !important;
            }

            .h5 {
                font-size: 1.25rem;
            }

            .shadow {
                box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
            }

            .py-2 {
                padding-top: 0.5rem !important;
                padding-bottom: 0.5rem !important;
            }

            @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">
        {{-- Peringatan Periode Cuti H-1 (akan berakhir besok) --}}
        @if (isset($periodeCutiHMinus1) && $periodeCutiHMinus1->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-clock me-3 animate__animated animate__pulse animate__infinite" style="font-size: 2.5rem;color: #fb6340;"></i>
                            <div>
                                <h5 class="mb-1" style="color: #fb6340;"><strong>Periode Cuti Akan Berakhir Besok!</strong></h5>
                                @foreach ($periodeCutiHMinus1 as $periode)
                                    <p class="mb-0">
                                        Periode <strong>{{ $periode->nama }}</strong> akan berakhir pada <strong>{{ \Carbon\Carbon::parse($periode->berakhir)->format('d/m/Y') }}</strong>.
                                        Pastikan atasan telah mengambil keputusan untuk semua pengajuan cuti karyawan Anda.
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <a href="{{ url('/rpcm12') }}" class="btn btn-warning btn-sm mt-3 mt-md-0 shadow-sm">
                            <i class="fas fa-file-alt me-2"></i>Buka Rekap Cuti
                        </a>
                    </div>
                </div>
            </div>
        @endif

        {{-- Peringatan Periode Cuti Sudah Berakhir (perlu ditutup) --}}
        @if (isset($periodeCutiBerakhir) && $periodeCutiBerakhir->count() > 0)
            <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">
                            <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>Periode Cuti Perlu Ditutup!</strong></h5>
                                @foreach ($periodeCutiBerakhir as $periode)
                                    <p class="mb-0 text-white">
                                        Periode <strong>{{ $periode->nama }}</strong> telah berakhir pada <strong>{{ \Carbon\Carbon::parse($periode->berakhir)->format('d/m/Y') }}</strong>.
                                        Pastikan ulang atasan sudah mengambil keputusan untuk semua pengajuan cuti, lalu tutup periode ini di halaman Rekap Surat Cuti.
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <a href="{{ url('/rpcm12') }}" class="btn btn-light btn-sm mt-3 mt-md-0 shadow-sm">
                            <i class="fas fa-times-circle me-2"></i>Tutup Periode
                        </a>
                    </div>
                </div>
            </div>
        @endif

        {{-- Peringatan Periode Izin/Tugas H-1 (akan berakhir besok) --}}
        @if (isset($periodeIzinHMinus1) && $periodeIzinHMinus1->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-clock me-3 animate__animated animate__pulse animate__infinite" style="font-size: 2.5rem;color: #fb6340;"></i>
                            <div>
                                <h5 class="mb-1" style="color: #fb6340;"><strong>Periode Izin/Tugas Akan Berakhir Besok!</strong></h5>
                                @foreach ($periodeIzinHMinus1 as $periode)
                                    <p class="mb-0">
                                        Periode <strong>{{ $periode->nama }}</strong> akan berakhir pada <strong>{{ \Carbon\Carbon::parse($periode->berakhir)->format('d/m/Y') }}</strong>.
                                        Pastikan atasan telah mengambil keputusan untuk semua pengajuan izin/tugas karyawan Anda.
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <a href="{{ url('/rpitm1') }}" class="btn btn-warning btn-sm mt-3 mt-md-0 shadow-sm">
                            <i class="fas fa-file-alt me-2"></i>Buka Rekap Izin
                        </a>
                    </div>
                </div>
            </div>
        @endif

        {{-- Peringatan Periode Izin/Tugas Sudah Berakhir (perlu ditutup) --}}
        @if (isset($periodeIzinBerakhir) && $periodeIzinBerakhir->count() > 0)
            <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">
                            <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>Periode Izin/Tugas Perlu Ditutup!</strong></h5>
                                @foreach ($periodeIzinBerakhir as $periode)
                                    <p class="mb-0 text-white">
                                        Periode <strong>{{ $periode->nama }}</strong> telah berakhir pada <strong>{{ \Carbon\Carbon::parse($periode->berakhir)->format('d/m/Y') }}</strong>.
                                        Pastikan ulang atasan sudah mengambil keputusan untuk semua pengajuan izin/tugas, lalu tutup periode ini di halaman Rekap Surat Izin/Tugas.
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <a href="{{ url('/rpitm1') }}" class="btn btn-light btn-sm mt-3 mt-md-0 shadow-sm">
                            <i class="fas fa-times-circle me-2"></i>Tutup Periode
                        </a>
                    </div>
                </div>
            </div>
        @endif

        {{-- Notifikasi Cuti dan Izin/Tugas karyawan --}}
        @if (isset($cutiKaryawanPending) && isset($perizinanKaryawanPending))
            <div class="col-md-12 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h6>Notifikasi Cuti dan Izin/Tugas (Izin & Tugas) Pending Karyawan</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            {{-- Card Cuti Karyawan Pending --}}
                            @isset($cutiKaryawanPending)
                                @php $isCutiAlert = (int) $cutiKaryawanPending > 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 Karyawan Pending</p>
                                            <h5 class="font-weight-bolder">{{ (int) $cutiKaryawanPending }}</h5>
                                            @if ($isCutiAlert)
                                                <div class="mt-2">
                                                    <a href="{{ url('/pckbr1') }}" class="btn btn-warning btn-sm">Lihat
                                                        Sekarang</a>
                                                </div>
                                            @else
                                                <div class="mt-2">
                                                    <a href="{{ url('/pckbr1') }}" class="btn btn-primary btn-sm">Lihat</a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endisset

                            {{-- Card Izin/Tugas Karyawan Pending --}}
                            @isset($perizinanKaryawanPending)
                                @php
                                    $tIzin = 0;
                                    $tTugas = 0;
                                    if (is_iterable($perizinanKaryawanPending)) {
                                        foreach ($perizinanKaryawanPending as $row) {
                                            $tIzin += data_get($row, 'totalIzin', 0);
                                            $tTugas += data_get($row, 'totalTugas', 0);
                                        }
                                    } else {
                                        $tIzin = data_get($perizinanKaryawanPending, 'totalIzin', 0);
                                        $tTugas = data_get($perizinanKaryawanPending, '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 Karyawan 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('/pitkkb') }}" class="btn btn-warning btn-sm">Lihat
                                                        Sekarang</a>
                                                </div>
                                            @else
                                                <div class="mt-2">
                                                    <a href="{{ url('/pitkkb') }}" class="btn btn-primary btn-sm">Lihat</a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endisset
                        </div>
                    </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

        {{-- Karyawan --}}
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6>Karyawan - Tahun: {{ date('Y') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- Card Karyawan Terdaftar --}}
                        <div class="col-md-6 mb-3">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <i class="fas fa-users mb-2 text-warning" style="font-size: 24px;"></i>
                                    <p class="text-sm mb-1">Karyawan yang Terdaftar</p>
                                    <h5 class="font-weight-bolder">{{ $karyawan ?? 0 }}</h5>
                                    <p class="text-xs text-muted mb-0">
                                        ({{ $karyawanActive ?? 0 }} active + {{ $karyawanInactive ?? 0 }} inactive)
                                    </p>
                                </div>
                            </div>
                        </div>

                        {{-- Card Karyawan Punya Akun --}}
                        <div class="col-md-6 mb-3">
                            <div class="card h-100">
                                <div class="card-body text-center d-flex flex-column justify-content-between">
                                    <div>
                                        <i class="fas fa-user-check mb-2" style="font-size: 24px; color: #028284;"></i>
                                        <p class="text-sm mb-1">Karyawan yang Memiliki Akun</p>
                                        <h5 class="font-weight-bolder">{{ $karyawanPunyaAkun ?? 0 }}</h5>
                                        <p class="text-xs text-muted mb-0">
                                            ({{ $karyawanPunyaAkunActive ?? 0 }} active + {{ $karyawanPunyaAkunInactive ?? 0 }} inactive)
                                        </p>
                                    </div>

                                    <div class="mt-3">
                                        <button type="button" id="btn-sinkron-user" class="btn btn-sm btn-primary">
                                            <i class="fas fa-sync-alt mr-1"></i> Sinkron User
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 mb-3">
                            <div class="card shadow-sm">
                                <div class="card-body">
                                    <div class="text-center mb-3">
                                        <i class="fas fa-link mb-2 text-danger" style="font-size: 24px;"></i>
                                        <p class="text-sm mb-1 font-weight-bold text-danger">Akun yang Belum
                                            Terhubung
                                            dengan Profile</p>
                                        <p class="text-danger">({{ $akunBelumTerhubung->count() }} Akun)</p>
                                    </div>
                                    @if (isset($akunBelumTerhubung) && $akunBelumTerhubung->count() > 0)
                                        <div class="text-center mb-3">
                                            <a href="{{ URL::to('/mslink') }}" class="btn btn-sm btn-primary">Perbaiki</a>
                                        </div>
                                    @endif
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped" id="table-akun-belum-terhubung">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>No</th>
                                                    <th>User ID</th>
                                                    <th>Username</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($akunBelumTerhubung as $index => $akun)
                                                    <tr class="text-danger">
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>{{ $akun->id }}</td>
                                                        <td>{{ $akun->username }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            {{-- Pengajuan Cuti --}}
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h6>Pengajuan Cuti - Tahun: {{ date('Y') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            {{-- Card untuk Permohonan 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">{{ $cutiDitolak ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>

                            {{-- Card untuk Permohonan 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">{{ $cutiDisetujui ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>

                            {{-- Card untuk Permohonan Menunggu --}}
                            <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 Menunggu</p>
                                        <h5 class="font-weight-bolder">{{ $cutiMenunggu ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Izin/Tugas Section --}}
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h6>Perizinan - Tahun: {{ date('Y') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            {{-- 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">{{ $perizinanDitolak ?? 0 }}</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">{{ $perizinanDisetujui ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>

                            {{-- Card untuk Izin/Tugas Menunggu --}}
                            <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 Menunggu</p>
                                        <h5 class="font-weight-bolder">{{ $perizinanMenunggu ?? 0 }}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tabel Data Karyawan Terlambat dan Pulang Cepat --}}
        @if ($karyawanPotentialSP && $karyawanPotentialSP->isNotEmpty())
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h6>Data Karyawan Terlambat dan Pulang Cepat - {{ $currentPeriod->nama }}</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped"
                                    id="table-karyawan-terlambat-pulang-cepat">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            <th>NIK</th>
                                            <th>Nama</th>
                                            <th>Departemen</th>
                                            <th style="font-size:13px; min-width:70px;">
                                                Terlambat<br><small>(Total)</small></th>
                                            <th style="font-size:13px; min-width:70px;">Pulang
                                                Cepat<br><small>(Total)</small></th>
                                            <th style="font-size:13px; min-width:70px;">
                                                Total<br><small>Keseluruhan</small></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($karyawanPotentialSP as $index => $data)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $data->nik }}</td>
                                                <td>{{ $data->nama_user }}</td>
                                                <td>{{ $data->departemen }}</td>
                                                <td class="text-end">
                                                    {{ $data->total_terlambat }}
                                                    @if ($data->total_terlambat > 0)
                                                        <a href="{{ URL::to('/pitkhp/history/' . $data->id . '?periode=' . $currentPeriod->id . '&jenis_izin=1&status=disetujui&assignedfor=diri_sendiri') }}"
                                                            class="btn btn-sm ms-2"
                                                            style="background:#028284;color:#fff;padding:2px 8px;">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                    @endif
                                                </td>
                                                <td class="text-end">
                                                    {{ $data->total_pulang_cepat }}
                                                    @if ($data->total_pulang_cepat > 0)
                                                        <a href="{{ URL::to('/pitkhp/history/' . $data->id . '?periode=' . $currentPeriod->id . '&jenis_izin=3&status=disetujui&assignedfor=diri_sendiri') }}"
                                                            class="btn btn-sm ms-2"
                                                            style="background:#028284;color:#fff;padding:2px 8px;">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                    @endif
                                                </td>
                                                <td class="text-end">{{ $data->total }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="row mt-4 g-4">
            {{-- Cuti Hari Ini --}}
            <div class="col-12 col-md-6">

                <div class="card">
                    <div class="card-header pb-0">
                        <h6 class="mb-1">Permohonan Cuti untuk Hari Ini yang Masih dalam Status Menunggu
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="table-cuti-hari-ini">
                                <thead style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>No</th>
                                        <th>Jenis Cuti</th>
                                        <th>Nama User</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($cutiHariIni as $index => $cuti)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $cuti->jenis_cuti }}</td>
                                            <td>{{ $cuti->nama_user }}</td>
                                            <td>
                                                <a href="{{ URL::to('/pckbr1/show/' . encrypt($cuti->id)) }}"
                                                    class="btn btn-sm btn-detail" style="background:#028284;color:#fff;">
                                                    <span class="btn-text">Detail</span>
                                                    <span class="spinner-border spinner-border-sm d-none" role="status"
                                                        aria-hidden="true"></span>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Izin/Tugas Hari Ini --}}
            <div class="col-12 col-md-6">

                <div class="card">
                    <div class="card-header pb-0">
                        <h6 class="mb-1">Permohonan Izin/Tugas untuk Hari Ini yang Masih dalam Status
                            Menunggu</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="table-perizinan-hari-ini">
                                <thead style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>No</th>
                                        <th>Kategori Izin/Tugas</th>
                                        <th>Nama User</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($perizinanHariIni as $index => $perizinan)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $perizinan->kategori_perizinan }}</td>
                                            <td>{{ $perizinan->nama_user }}</td>
                                            <td>
                                                <a href="{{ URL::to('/pitkkb/show/' . encrypt($perizinan->id)) }}"
                                                    class="btn btn-sm btn-detail" style="background:#028284;color:#fff;">
                                                    <span class="btn-text">Detail</span>
                                                    <span class="spinner-border spinner-border-sm d-none" role="status"
                                                        aria-hidden="true"></span>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4 g-4">
            {{-- Karyawan Cuti Hari Ini --}}
            <div class="col-12 col-md-6">

                <div class="card">
                    <div class="card-header pb-0">
                        <h6 class="mb-1">Karyawan yang Sedang Menjalani Cuti
                            ({{ $jumlahKaryawanCutiHariIni ?? 0 }}
                            orang)
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="table-karyawan-cuti-hari-ini">
                                <thead style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>No</th>
                                        <th>NIK</th>
                                        <th>Nama</th>
                                        <th>Departemen</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($karyawanCutiHariIni as $index => $cuti)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $cuti->nik }}</td>
                                            <td>{{ $cuti->nama }}</td>
                                            <td>{{ $cuti->departemen }}</td>
                                            <td>
                                                <a href="{{ URL::to('/pcklp1/history/' . encrypt($cuti->user_id)) }}"
                                                    class="btn btn-sm btn-detail" style="background:#028284;color:#fff;">
                                                    <span class="btn-text">Detail</span>
                                                    <span class="spinner-border spinner-border-sm d-none" role="status"
                                                        aria-hidden="true"></span>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Karyawan Izin/Tugas Hari Ini --}}
            <div class="col-12 col-md-6">

                <div class="card">
                    <div class="card-header pb-0">
                        <h6 class="mb-1">Karyawan yang Sedang Melakukan Izin/Tugas Luar
                            ({{ $jumlahKaryawanIzinHariIni ?? 0 }} orang)
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="table-karyawan-izin-hari-ini">
                                <thead style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>No</th>
                                        <th>NIK</th>
                                        <th>Nama</th>
                                        <th>Departemen</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($karyawanIzinHariIni as $index => $izin)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $izin->nik }}</td>
                                            <td>{{ $izin->nama }}</td>
                                            <td>{{ $izin->departemen }}</td>
                                            <td>
                                                <a href="{{ URL::to('/pitkhp/history/' . encrypt($izin->user_id)) }}"
                                                    class="btn btn-sm btn-detail" style="background:#028284;color:#fff;">
                                                    <span class="btn-text">Detail</span>
                                                    <span class="spinner-border spinner-border-sm d-none" role="status"
                                                        aria-hidden="true"></span>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </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: <span id="calendarYear">{{ date('Y') }}</span>
                        </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-5">
                                <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-5">
                                <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>
        // Inisialisasi DataTables untuk semua tabel list
        $(document).ready(function() {
            var dtOptions = {
                pageLength: 5,
                lengthChange: false,
                ordering: true,
                autoWidth: false,
                responsive: true,
                dom: 'frtip',
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                }
            };
            $('#table-akun-belum-terhubung').DataTable(dtOptions);
            $('#table-cuti-hari-ini').DataTable(dtOptions);
            $('#table-perizinan-hari-ini').DataTable(dtOptions);
            $('#table-karyawan-cuti-hari-ini').DataTable(dtOptions);
            $('#table-karyawan-izin-hari-ini').DataTable(dtOptions);
            $('#table-karyawan-terlambat-pulang-cepat').DataTable(dtOptions);
        });
    </script>

    <script>
        // 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();
        });

        // Sinkron User handler
        document.getElementById('btn-sinkron-user')?.addEventListener('click', function() {
            Swal.fire({
                title: 'Konfirmasi Sinkronisasi',
                text: 'Apakah Anda yakin ingin menyinkronkan data user dari HRIS?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#028284',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Sinkronkan',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Menyinkronkan...',
                        text: 'Mohon tunggu, data sedang disinkronkan.',
                        allowOutsideClick: false,
                        didOpen: () => { Swal.showLoading(); }
                    });
                    fetch('{{ route("dashboard.sinkron-user") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({})
                    })
                    .then(response => response.json())
                    .then(data => {
                        Swal.close();
                        if (data.success) {
                            Swal.fire({
                                title: 'Berhasil!',
                                html: 'Sinkronisasi berhasil:<br>' +
                                'Dibuat: ' + data.created + ' user<br>' +
                                'Diperbarui: ' + data.updated + ' user<br>' +
                                'Terhubung: ' + data.linked + ' profil<br>' +
                                'Nonaktif: ' + data.deactivated + ' user<br>' +
                                'Dinonaktifkan: ' + data.deletedUsers + ' user<br>' +
                                'Link dihapus: ' + data.deletedLinks + ' profil<br>' +
                                'Link nonaktif: ' + data.deactivatedLinks + ' profil<br>' +
                                'Link duplikat: ' + data.dedupedLinks + ' profil',
                                icon: 'success',
                                confirmButtonColor: '#028284'
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'Gagal!',
                                text: data.message || 'Terjadi kesalahan saat sinkronisasi.',
                                icon: 'error',
                                confirmButtonColor: '#dc3545'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.close();
                        console.error('Error:', error);
                        Swal.fire({
                            title: 'Error!',
                            text: 'Terjadi kesalahan saat memproses permintaan.',
                            icon: 'error',
                            confirmButtonColor: '#dc3545'
                        });
                    });
                }
            });
        });
    </script>
@endpush