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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'MSJ Absensi'])
    @php
        $dashboardDate = $dashboard_date ?? date('Y-m-d');
        $dashboardMonth = $dashboard_month ?? date('Y-m');
        $dashboardMonthLabel = $dashboard_month_label ?? date('F');
        [$dashboardMonthYear, $dashboardMonthNumber] = array_pad(explode('-', $dashboardMonth), 2, null);
        $dashboardMonthYear = (int) ($dashboardMonthYear ?? date('Y'));
        $dashboardMonthNumber = (int) ($dashboardMonthNumber ?? date('n'));
        $dashboardYear = (int) ($dashboard_year ?? date('Y'));
        $dataMissingTodayCount = $data_missing_today_count ?? 0;
        $kirimSpPendingCount = $kirim_sp_pending_count ?? 0;
        $totalKaryawanAktif = $total_karyawan_aktif ?? 0;
        $linkPinLinkedCount = (int) ($link_pin_linked_count ?? 0);
        $linkPinUnlinkedCount = (int) ($link_pin_unlinked_count ?? 0);
        $linkPinPendingCount = (int) ($link_pin_pending_count ?? 0);
        $monthlyTerlambat = $monthly_terlambat ?? array_fill(0, 12, 0);
        $monthlyIzin = $monthly_izin ?? array_fill(0, 12, 0);
        $monthlyMangkir = $monthly_mangkir ?? array_fill(0, 12, 0);
        $monthlyPieHadir = (int) ($monthly_pie_hadir ?? 0);
        $monthlyPieIzin = (int) ($monthly_pie_izin ?? 0);
        $monthlyPieMangkir = (int) ($monthly_pie_mangkir ?? 0);
        $monthlyPieTerlambat = (int) ($monthly_pie_terlambat ?? 0);
        $months = [
            1 => 'Januari',
            2 => 'Februari',
            3 => 'Maret',
            4 => 'April',
            5 => 'Mei',
            6 => 'Juni',
            7 => 'Juli',
            8 => 'Agustus',
            9 => 'September',
            10 => 'Oktober',
            11 => 'November',
            12 => 'Desember',
        ];
        $dashboardYearOptions = $dashboard_year_options ?? [$dashboardYear];
        if (empty($dashboardYearOptions)) {
            $dashboardYearOptions = [$dashboardYear];
        }
        $calendarYearOptions = $calendar_year_options ?? $dashboardYearOptions;
        if (empty($calendarYearOptions)) {
            $calendarYearOptions = $dashboardYearOptions;
        }
        // HR Dashboard new variables
        $hrUaDraft = $hr_ua_draft ?? 0;
        $hrUaPerluApproval = $hr_ua_perlu_approval ?? 0;
        $hrUaPerluEmail = $hr_ua_perlu_email ?? 0;
        $hrSpPerluEmail = $hr_sp_perlu_email ?? 0;
        $hrTotalSpBulan = $hr_total_sp_bulan ?? 0;
        $hrStPerluEmail = $hr_st_perlu_email ?? 0;
        $hrTotalStBulan = $hr_total_st_bulan ?? 0;
        $hrUaByDeptLabels = $hr_ua_by_dept_labels ?? [];
        $hrUaByDeptData = $hr_ua_by_dept_data ?? [];
        $hrSpByDeptLabels = $hr_sp_by_dept_labels ?? [];
        $hrSpByDeptData = $hr_sp_by_dept_data ?? [];
        $hrStByDeptLabels = $hr_st_by_dept_labels ?? [];
        $hrStByDeptData = $hr_st_by_dept_data ?? [];
    @endphp
<style>
        .msj-icon-green {
            background: linear-gradient(135deg, #0A9294, #087b7d) !important;
            box-shadow: 0 4px 10px rgba(10, 146, 148, 0.35) !important;
        }
        .msj-icon-red {
            background: linear-gradient(135deg, #f5365c, #d6294b) !important;
            box-shadow: 0 4px 10px rgba(245, 54, 92, 0.35) !important;
        }
        .msj-table thead.thead-light {
            background-color: #00b7bd4f;
        }
        .msj-table thead th {
            color: #5e7294 !important;
            font-weight: 700 !important;
            border-bottom: 1px solid #dee2e6 !important;
        }
        .msj-icon-flat {
            font-size: 28px;
            line-height: 1;
            display: inline-block;
        }
        .dashboard-block {
            margin-top: 0.5rem !important;
        }
        .dashboard-block .card-body {
            padding-top: 1rem !important;
            padding-bottom: 1rem !important;
        }
        .card-header-with-filter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .card-header-with-filter h6 {
            margin-bottom: 0;
        }
        .card-header-with-filter .chart-filter {
            margin-bottom: 0;
        }
        .card-header-with-filter select {
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
            min-width: 180px;
        }
        /* Fix calendar table rendering */
        #kalenderLibur {
            table-layout: fixed;
            width: 100%;
        }
        #kalenderLibur tbody tr {
            display: table-row !important;
        }
        #kalenderLibur tbody td {
            display: table-cell !important;
            width: 14.28%;
        }
        .table-responsive {
            overflow-x: visible;
        }
        /* Consistent chart card heights */
        .chart-card {
            min-height: 420px;
        }
        .chart-card .card-body {
            padding: 1rem !important;
        }
        .chart-card .chart-canvas {
            height: 280px !important;
        }
</style>
    <div class="container-fluid py-4">
        <div class="row mt-1">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">MSJ Absensi Karyawan</h6>
                        <p class="text-sm">{{ $dashboard_title ?? 'Dashboard HR MSJ Absensi' }}</p>
                    </div>
                    <div class="card-body p-3 pt-2">
                        <form method="GET" action="{{ url()->current() }}" class="row g-3 align-items-end">
                            <div class="col-md-5 col-lg-4">
                                <label for="dashboard_bulan" class="form-label text-sm font-weight-bold mb-1">Pilih Bulan</label>
                                <select class="form-select" id="dashboard_bulan" name="dashboard_bulan">
                                    @for ($i = 1; $i <= 12; $i++)
                                        <option value="{{ $i }}" {{ $dashboardMonthNumber === $i ? 'selected' : '' }}>
                                        {{ $months[$i] }}
                                        </option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-md-3 col-lg-2">
                                <label for="dashboard_tahun" class="form-label text-sm font-weight-bold mb-1">Tahun</label>
                                <select class="form-select" id="dashboard_tahun" name="dashboard_tahun">
                                    @foreach ($dashboardYearOptions as $yearOption)
                                        <option value="{{ $yearOption }}" {{ (int) $dashboardMonthYear === (int) $yearOption ? 'selected' : '' }}>
                                            {{ $yearOption }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 col-lg-2">
                                <button type="submit" class="btn btn-primary mb-0 w-100">
                                    <i class="fas fa-search me-1"></i>Tampilkan
                                </button>
                            </div>
                            <div class="col-md-12 col-lg-4">
                                <div class="text-md-end">
                                    <span class="badge bg-gradient-info px-3 py-2">
                                        Bulan aktif: {{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }}
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section 1: SP, ST & Unsafe Action -->
        <!-- Row 1: Unsafe Action Cards -->
        <div class="row mt-2 dashboard-block">
            <div class="col-12 mb-3">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Unsafe Action - {{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row">
                            <!-- Unsafe Action Draft -->
                            <div class="col-lg-4 mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-file-alt text-secondary msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">UA Draft</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $hrUaDraft }}</h2>
                                        <div class="mt-auto">
                                            <a href="{{ url('/trssua?status=draft&bulan=' . $dashboardMonthNumber . '&tahun=' . $dashboardYear) }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Unsafe Action Perlu Approval -->
                            <div class="col-lg-4 mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-clock text-primary msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">UA Perlu Approval</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $hrUaPerluApproval }}</h2>
                                        <div class="mt-auto">
                                            <a href="{{ url('/trspua?status=menunggu_approval&bulan=' . $dashboardMonthNumber . '&tahun=' . $dashboardYear) }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Unsafe Action Perlu Kirim Email -->
                            <div class="col-lg-4 mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-envelope text-info msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">UA Perlu Kirim Email</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $hrUaPerluEmail }}</h2>
                                        <div class="mt-auto">
                                            <a href="{{ url('/trspua?status=disetujui&approval_token_null=1&bulan=' . $dashboardMonthNumber . '&tahun=' . $dashboardYear) }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 2: SP & ST Cards -->
        <div class="row mt-2 dashboard-block">
            <div class="col-12 mb-3">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">SP & ST - {{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row">
                            <!-- SP Perlu Kirim Email -->
                            <div class="col-lg-3 mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-file-signature text-primary msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">SP Perlu Kirim Email</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $hrSpPerluEmail }}</h2>
                                        <div class="mt-auto">
                                            <a href="{{ url('/trssp?status=disetujui&hrd_token_null=1&bulan=' . $dashboardMonthNumber . '&tahun=' . $dashboardYear) }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Total SP Bulan Ini -->
                            <div class="col-lg-3 mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-file-contract text-primary msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">Total SP Bulan Ini</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $hrTotalSpBulan }}</h2>
                                        <div class="mt-auto">
                                            <a href="{{ url('/rptsp?tanggal_mulai=' . $dashboardYear . '-' . str_pad($dashboardMonthNumber, 2, '0', STR_PAD_LEFT) . '-01&tanggal_akhir=' . $dashboardYear . '-' . str_pad($dashboardMonthNumber, 2, '0', STR_PAD_LEFT) . '-' . date('t', strtotime($dashboardYear . '-' . $dashboardMonthNumber . '-01'))) }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- ST Perlu Kirim Email -->
                            <div class="col-lg-3 mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-file-signature text-danger msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">ST Perlu Kirim Email</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $hrStPerluEmail }}</h2>
                                        <div class="mt-auto">
                                            <a href="{{ url('/trssp?status=disetujui&atasan_token_null=1&bulan=' . $dashboardMonthNumber . '&tahun=' . $dashboardYear) }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Total ST Bulan Ini -->
                            <div class="col-lg-3 mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-file-signature text-danger msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">Total ST Bulan Ini</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $hrTotalStBulan }}</h2>
                                        <div class="mt-auto">
                                            <a href="{{ url('/rptsp?tanggal_mulai=' . $dashboardYear . '-' . str_pad($dashboardMonthNumber, 2, '0', STR_PAD_LEFT) . '-01&tanggal_akhir=' . $dashboardYear . '-' . str_pad($dashboardMonthNumber, 2, '0', STR_PAD_LEFT) . '-' . date('t', strtotime($dashboardYear . '-' . $dashboardMonthNumber . '-01'))) }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section 2: Link Pin Karyawan -->
        <div class="row mt-2 dashboard-block">
            <div class="col-12 mb-3">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Link Pin Karyawan</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row mb-3">
                            <div class="col-md-4 mb-2">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-user-check text-success msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h6 class="text-secondary mb-1">Sudah Linked</h6>
                                        <h4 class="font-weight-bolder text-dark mb-2">{{ $linkPinLinkedCount }}</h4>
                                        <div>
                                            <a href="{{ url('/mstlpk?status_link=Linked') }}" class="btn btn-primary btn-sm px-4 font-weight-bold mb-0">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-user-slash text-warning msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h6 class="text-secondary mb-1">Unlinked</h6>
                                        <h4 class="font-weight-bolder text-dark mb-2">{{ $linkPinUnlinkedCount }}</h4>
                                        <div>
                                            <a href="{{ url('/mstlpk?status_link=Unlinked') }}" class="btn btn-primary btn-sm px-4 font-weight-bold mb-0">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-users text-primary msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h6 class="text-secondary mb-1">Belum Linked (Pending)</h6>
                                        <h4 class="font-weight-bolder text-dark mb-2">{{ $linkPinPendingCount }}</h4>
                                        <div>
                                            <a href="{{ url('/mstlpk?status_link=Pending') }}" class="btn btn-primary btn-sm px-4 font-weight-bold mb-0">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mb-3">
                            <div class="mb-2">
                                <i class="fas fa-link text-danger msj-icon-flat" aria-hidden="true"></i>
                            </div>
                            <h5 class="text-danger font-weight-bold mb-1">Data yang Belum Terhubung NIK dan PIN Karyawan</h5>
                            <p class="text-sm text-secondary mb-3">({{ $linkPinPendingCount }} Data)</p>
                            <div class="mb-3">
                                <a href="{{ url('/mstlpk?status_link=Pending') }}" class="btn btn-primary px-4 font-weight-bold">Perbaiki</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section 3: Charts Row 1 - UA, SP, ST per Departemen -->
        <div class="row mt-2 dashboard-block">
            <div class="col-lg-4 mb-lg-0 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <div class="card-header-with-filter">
                            <h6 class="text-capitalize">Unsafe Action per Departemen</h6>
                        </div>
                        <p class="text-sm mb-0">
                            <span class="font-weight-bold">{{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</span>
                        </p>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="chart-hr-ua-dept" class="chart-canvas"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-lg-0 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <div class="card-header-with-filter">
                            <h6 class="text-capitalize">Surat Peringatan (SP) per Departemen</h6>
                        </div>
                        <p class="text-sm mb-0">
                            <span class="font-weight-bold">{{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</span>
                        </p>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="chart-hr-sp-dept" class="chart-canvas"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <div class="card-header-with-filter">
                            <h6 class="text-capitalize">Surat Teguran (ST) per Departemen</h6>
                        </div>
                        <p class="text-sm mb-0">
                            <span class="font-weight-bold">{{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</span>
                        </p>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="chart-hr-st-dept" class="chart-canvas"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section 4: Charts Row 2 - Rekap Terlambat, Izin, Mangkir & Status Kehadiran -->
        <div class="row mt-2 dashboard-block">
            <div class="col-lg-7 mb-lg-0 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Grafik Rekap Terlambat, Izin, dan Mangkir</h6>
                        <p class="text-sm mb-0">
                            <i class="fa fa-arrow-up text-success"></i>
                            <span class="font-weight-bold">Tahun {{ $dashboardYear }}</span> - Rekap Per Bulan
                        </p>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="chart-bar-absensi" class="chart-canvas"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Status Kehadiran Bulan {{ $months[$dashboardMonthNumber] ?? '-' }}</h6>
                        <p class="text-sm mb-0">Ringkasan per bulan terpilih</p>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="chart-pie-status" class="chart-canvas"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section 5: Kalender Cuti Bersama - Tahun 2026 -->
        <div class="row mt-2 dashboard-block">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-2">Kalender Cuti Bersama - Tahun 2026</h6>
                        <p class="text-sm mb-0">Deskripsi libur cuti bersama akan ditampilkan ketika Anda mengklik tanggal.</p>
                    </div>
                    <div class="card-body p-3">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Pilih Bulan</label>
                                <select class="form-select" id="bulanLibur">
                                    <option value="1" {{ (int) date('n', strtotime($dashboardDate)) == 1 ? 'selected' : '' }}>Januari</option>
                                    <option value="2" {{ (int) date('n', strtotime($dashboardDate)) == 2 ? 'selected' : '' }}>Februari</option>
                                    <option value="3" {{ (int) date('n', strtotime($dashboardDate)) == 3 ? 'selected' : '' }}>Maret</option>
                                    <option value="4" {{ (int) date('n', strtotime($dashboardDate)) == 4 ? 'selected' : '' }}>April</option>
                                    <option value="5" {{ (int) date('n', strtotime($dashboardDate)) == 5 ? 'selected' : '' }}>Mei</option>
                                    <option value="6" {{ (int) date('n', strtotime($dashboardDate)) == 6 ? 'selected' : '' }}>Juni</option>
                                    <option value="7" {{ (int) date('n', strtotime($dashboardDate)) == 7 ? 'selected' : '' }}>Juli</option>
                                    <option value="8" {{ (int) date('n', strtotime($dashboardDate)) == 8 ? 'selected' : '' }}>Agustus</option>
                                    <option value="9" {{ (int) date('n', strtotime($dashboardDate)) == 9 ? 'selected' : '' }}>September</option>
                                    <option value="10" {{ (int) date('n', strtotime($dashboardDate)) == 10 ? 'selected' : '' }}>Oktober</option>
                                    <option value="11" {{ (int) date('n', strtotime($dashboardDate)) == 11 ? 'selected' : '' }}>November</option>
                                    <option value="12" {{ (int) date('n', strtotime($dashboardDate)) == 12 ? 'selected' : '' }}>Desember</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Pilih Tahun</label>
                                @php $calendarYear = (int) date('Y', strtotime($dashboardDate)); @endphp
                                <select class="form-select" id="tahunLibur">
                                    @foreach ($calendarYearOptions as $yearOption)
                                        <option value="{{ $yearOption }}" {{ $calendarYear === (int) $yearOption ? 'selected' : '' }}>
                                            {{ $yearOption }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table table-bordered text-center" id="kalenderLibur">
                                <thead style="background-color: #0A9294; color: white;">
                                    <tr>
                                        <th style="color: #0A9294; background-color: #E0F7F7;">Min</th>
                                        <th style="color: #0A9294; background-color: #E0F7F7;">Sen</th>
                                        <th style="color: #0A9294; background-color: #E0F7F7;">Sel</th>
                                        <th style="color: #0A9294; background-color: #E0F7F7;">Rab</th>
                                        <th style="color: #0A9294; background-color: #E0F7F7;">Kam</th>
                                        <th style="color: #0A9294; background-color: #E0F7F7;">Jum</th>
                                        <th style="color: #0A9294; background-color: #E0F7F7;">Sab</th>
                                    </tr>
                                </thead>
                                <tbody id="kalenderBody">
                                    <!-- Calendar will be generated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script>
        // Data Hari Libur Non-Shift dari database
        const hariLibur = {!! json_encode($hari_libur ?? []) !!};

        function generateCalendar(bulan, tahun) {
            console.log('generateCalendar called:', bulan, tahun);
            const firstDay = new Date(tahun, bulan - 1, 1);
            const lastDay = new Date(tahun, bulan, 0);
            const daysInMonth = lastDay.getDate();
            const startDayOfWeek = firstDay.getDay(); // 0 = Sunday, 1 = Monday, etc.
            
            let html = '<tr>';
            
            // Fill empty cells before first day
            for (let i = 0; i < startDayOfWeek; i++) {
                html += '<td style="background-color: #f8f9fa; height: 80px;"></td>';
            }
            
            // Fill days
            let currentDay = startDayOfWeek;
            for (let day = 1; day <= daysInMonth; day++) {
                if (currentDay === 7) {
                    html += '</tr><tr>';
                    currentDay = 0;
                }
                
                const dateStr = `${tahun}-${String(bulan).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                const isLibur = hariLibur[dateStr];
                const isToday = dateStr === '{{ $dashboardDate }}';
                
                let cellStyle = 'height: 80px; vertical-align: middle; cursor: pointer; position: relative;';
                let cellClass = '';
                
                if (isLibur) {
                    cellStyle += ' background-color: #ffebee; border: 2px solid #f44336;';
                    cellClass = 'libur-cell';
                } else if (isToday) {
                    cellStyle += ' border: 3px solid #0A9294; background-color: #E0F7F7;';
                }
                
                html += `<td style="${cellStyle}" class="${cellClass}" data-date="${dateStr}" data-libur="${isLibur || ''}" onclick="showLiburInfo('${dateStr}', '${isLibur || ''}')">
                    <strong style="font-size: 16px;">${day}</strong>
                    ${isLibur ? '<br><span style="color: #f44336; font-size: 10px;">●</span>' : ''}
                </td>`;
                
                currentDay++;
            }
            
            // Fill empty cells after last day
            while (currentDay < 7 && currentDay > 0) {
                html += '<td style="background-color: #f8f9fa; height: 80px;"></td>';
                currentDay++;
            }
            
            html += '</tr>';
            
            console.log('Generated HTML:', html);
            document.getElementById('kalenderBody').innerHTML = html;
        }
        
        function showLiburInfo(dateStr, desc) {
            if (!desc) {
                return;
            }

            const parts = String(dateStr).split('-');
            const day = parts.length === 3 ? parts[2] : '-';
            const fullDate = parts.length === 3 ? `${parts[2]}/${parts[1]}/${parts[0]}` : dateStr;

            Swal.fire({
                icon: 'info',
                title: `Libur Tanggal ${day}`,
                html: `
                    <p class="mb-2">${desc}</p>
                    <p class="mb-0 text-secondary">Tanggal Lengkap: ${fullDate}</p>
                `,
                confirmButtonText: 'Ok',
                confirmButtonColor: '#028284'
            });
        }
        
        // Initialize calendar using its own filter
        document.addEventListener('DOMContentLoaded', function () {
            const bulanDefault = parseInt(document.getElementById('bulanLibur').value, 10);
            const tahunDefault = parseInt(document.getElementById('tahunLibur').value, 10);
            generateCalendar(bulanDefault, tahunDefault);
        });
        
        // Event listeners for month/year changes
        document.getElementById('bulanLibur').addEventListener('change', function() {
            const bulan = parseInt(this.value);
            const tahun = parseInt(document.getElementById('tahunLibur').value);
            generateCalendar(bulan, tahun);
        });
        
        document.getElementById('tahunLibur').addEventListener('change', function() {
            const tahun = parseInt(this.value);
            const bulan = parseInt(document.getElementById('bulanLibur').value);
            generateCalendar(bulan, tahun);
        });

        // Bar Chart - Rekap Absensi Per Bulan
        var barCanvas = document.getElementById("chart-bar-absensi");
        if (barCanvas) {
        var ctxBar = barCanvas.getContext("2d");

        new Chart(ctxBar, {
            type: "bar",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"],
                datasets: [{
                    label: "Terlambat",
                    backgroundColor: "#ffd600",
                    data: @json($monthlyTerlambat),
                    maxBarThickness: 40
                }, {
                    label: "Izin",
                    backgroundColor: "#66BB6A",
                    data: @json($monthlyIzin),
                    maxBarThickness: 40
                }, {
                    label: "Mangkir (Tanpa Keterangan)",
                    backgroundColor: "#fb6340",
                    data: @json($monthlyMangkir),
                    maxBarThickness: 40
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#9ca2b7',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                        },
                        ticks: {
                            display: true,
                            color: '#9ca2b7',
                            padding: 10,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });
        }

        // Pie Chart - Status Kehadiran Bulan Terpilih
        var pieCanvas = document.getElementById("chart-pie-status");
        if (pieCanvas) {
            const pieValues = [
                {{ $monthlyPieHadir }},
                {{ $monthlyPieIzin }},
                {{ $monthlyPieMangkir }},
                {{ $monthlyPieTerlambat }}
            ];
            const pieLabels = ["Hadir", "Izin/Cuti", "Mangkir", "Terlambat"];
            const pieColors = ["#0A9294", "#66BB6A", "#fb6340", "#ffd600"];

            new Chart(pieCanvas.getContext("2d"), {
                type: "doughnut",
                data: {
                    labels: pieLabels,
                    datasets: [{
                        label: "Status",
                        backgroundColor: pieColors,
                        data: pieValues,
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: {
                                padding: 15,
                                boxWidth: 15,
                                font: {
                                    size: 12,
                                    family: "Open Sans"
                                }
                            }
                        }
                    },
                    cutout: '70%'
                },
            });
        }

        // Bar Chart - UA per Departemen
        var uaDeptCanvas = document.getElementById("chart-hr-ua-dept");
        if (uaDeptCanvas) {
            new Chart(uaDeptCanvas.getContext("2d"), {
                type: "bar",
                data: {
                    labels: @json($hrUaByDeptLabels ?? []),
                    datasets: [{
                        label: "Total UA",
                        backgroundColor: "#f5365c",
                        data: @json($hrUaByDeptData ?? []),
                        maxBarThickness: 40
                    }]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    plugins: { legend: { display: false } },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                display: true,
                                drawOnChartArea: true,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                padding: 10,
                                color: '#9ca2b7',
                                font: { size: 11, family: "Open Sans", style: 'normal', lineHeight: 2 }
                            }
                        },
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false,
                                drawOnChartArea: false,
                                drawTicks: false,
                            },
                            ticks: {
                                display: true,
                                color: '#9ca2b7',
                                padding: 10,
                                font: { size: 11, family: "Open Sans", style: 'normal', lineHeight: 2 }
                            }
                        }
                    }
                }
            });
        }

        // Bar Chart - SP per Departemen
        var spDeptCanvas = document.getElementById("chart-hr-sp-dept");
        if (spDeptCanvas) {
            new Chart(spDeptCanvas.getContext("2d"), {
                type: "bar",
                data: {
                    labels: @json($hrSpByDeptLabels ?? []),
                    datasets: [{
                        label: "Total SP",
                        backgroundColor: "#2dce89",
                        data: @json($hrSpByDeptData ?? []),
                        maxBarThickness: 40
                    }]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    plugins: { legend: { display: false } },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                display: true,
                                drawOnChartArea: true,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                padding: 10,
                                color: '#9ca2b7',
                                font: { size: 11, family: "Open Sans", style: 'normal', lineHeight: 2 }
                            }
                        },
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false,
                                drawOnChartArea: false,
                                drawTicks: false,
                            },
                            ticks: {
                                display: true,
                                color: '#9ca2b7',
                                padding: 10,
                                font: { size: 11, family: "Open Sans", style: 'normal', lineHeight: 2 }
                            }
                        }
                    }
                }
            });
        }

        // Bar Chart - ST per Departemen
        var stDeptCanvas = document.getElementById("chart-hr-st-dept");
        if (stDeptCanvas) {
            new Chart(stDeptCanvas.getContext("2d"), {
                type: "bar",
                data: {
                    labels: @json($hrStByDeptLabels ?? []),
                    datasets: [{
                        label: "Total ST",
                        backgroundColor: "#fb6340",
                        data: @json($hrStByDeptData ?? []),
                        maxBarThickness: 40
                    }]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    plugins: { legend: { display: false } },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                display: true,
                                drawOnChartArea: true,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                padding: 10,
                                color: '#9ca2b7',
                                font: { size: 11, family: "Open Sans", style: 'normal', lineHeight: 2 }
                            }
                        },
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false,
                                drawOnChartArea: false,
                                drawTicks: false,
                            },
                            ticks: {
                                display: true,
                                color: '#9ca2b7',
                                padding: 10,
                                font: { size: 11, family: "Open Sans", style: 'normal', lineHeight: 2 }
                            }
                        }
                    }
                }
            });
        }

        // Bar Chart - Rekap Absensi Per Bulan
        var barCanvas = document.getElementById("chart-bar-absensi");
        if (barCanvas) {
        var ctxBar = barCanvas.getContext("2d");

        new Chart(ctxBar, {
            type: "bar",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"],
                datasets: [{
                    label: "Terlambat",
                    backgroundColor: "#ffd600",
                    data: @json($monthlyTerlambat),
                    maxBarThickness: 40
                }, {
                    label: "Izin",
                    backgroundColor: "#66BB6A",
                    data: @json($monthlyIzin),
                    maxBarThickness: 40
                }, {
                    label: "Mangkir (Tanpa Keterangan)",
                    backgroundColor: "#fb6340",
                    data: @json($monthlyMangkir),
                    maxBarThickness: 40
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#9ca2b7',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                        },
                        ticks: {
                            display: true,
                            color: '#9ca2b7',
                            padding: 10,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });
        }

        // Pie Chart - Status Kehadiran Bulan Terpilih
        var pieCanvas = document.getElementById("chart-pie-status");
        if (pieCanvas) {
            const pieValues = [
                {{ $monthlyPieHadir }},
                {{ $monthlyPieIzin }},
                {{ $monthlyPieMangkir }},
                {{ $monthlyPieTerlambat }}
            ];
            const pieLabels = ["Hadir", "Izin/Cuti", "Mangkir", "Terlambat"];
            const pieColors = ["#0A9294", "#66BB6A", "#fb6340", "#ffd600"];

            new Chart(pieCanvas.getContext("2d"), {
                type: "doughnut",
                data: {
                    labels: pieLabels,
                    datasets: [{
                        label: "Status",
                        backgroundColor: pieColors,
                        data: pieValues,
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: {
                                padding: 15,
                                boxWidth: 15,
                                font: {
                                    size: 12,
                                    family: "Open Sans"
                                }
                            }
                        }
                    },
                    cutout: '70%'
                },
            });
        }
    </script>
@endpush