@extends(auth()->user()->role == 'admin' ? 'layouts.admin' : 'layouts.petugas')

@section('title', 'Rekap Absensi Harian')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    :root {
        --primary:       #4f46e5;
        --primary-soft:  #eef2ff;
        --border:        #e2e8f0;
        --bg-soft:       #f8fafc;
        --text-dark:     #1e293b;
        --text-muted:    #64748b;
    }

    body {
        background: var(--bg-soft);
        color: var(--text-dark);
    }

    /* ── Cards ── */
    .card-main {
        background: #fff;
        border-radius: 20px;
        border: 1px solid var(--border);
        box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }

    /* ── Table ── */
    .table thead th {
        background: var(--bg-soft);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-weight: 700;
        color: var(--text-muted);
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .table tbody td {
        padding: 14px 16px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .table tbody tr:last-child td { border-bottom: none; }

    .sticky-col {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 5;
        border-right: 1px solid var(--border);
    }

    .table tbody tr:hover .sticky-col { background: var(--bg-soft); }

    /* ── Status Badges ── */
    .status-badge {
        display: inline-block;
        border-radius: 10px;
        padding: 7px 12px;
        min-width: 115px;
        border: 1px solid transparent;
        text-align: center;
    }

    .st-hadir { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
    .st-tidak  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
    .st-izin   { background: #fffbeb; border-color: #fef3c7; color: #92400e; }

    .badge-status-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
    }

    .badge-status-time {
        font-size: 10px;
        font-family: 'Consolas', 'Monaco', monospace;
        opacity: .75;
        margin-top: 2px;
    }

    /* ── Avatar ── */
    .avatar-circle {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-soft);
        color: var(--primary);
        font-weight: 700;
        font-size: 14px;
        flex-shrink: 0;
    }

    .avatar-guru {
        background: #fff7ed;
        color: #c2410c;
    }

    /* ── Tab Pills ── */
    .nav-pills-custom {
        background: #fff;
        padding: 5px;
        border-radius: 14px;
        border: 1px solid var(--border);
        gap: 4px;
    }

    .nav-pills-custom .nav-link {
        border-radius: 10px;
        padding: 9px 22px;
        color: var(--text-muted);
        font-weight: 600;
        font-size: 13px;
        transition: background .15s, color .15s;
    }

    .nav-pills-custom .nav-link:hover:not(.active) {
        background: var(--bg-soft);
        color: var(--primary);
    }

    .nav-pills-custom .nav-link.active {
        background: var(--primary);
        color: #fff;
    }

    /* ── Action Buttons ── */
    .btn-action {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: background .15s, color .15s;
        font-size: 14px;
    }

    .btn-action-edit   { background: var(--primary-soft); color: var(--primary); }
    .btn-action-delete { background: #fef2f2; color: #991b1b; }
    .btn-action-edit:hover   { background: var(--primary); color: #fff; }
    .btn-action-delete:hover { background: #ef4444; color: #fff; }

    /* ── Close Button (Modal) ── */
    .btn-close-custom {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: #f1f5f9;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .15s;
        flex-shrink: 0;
    }
    .btn-close-custom:hover { background: var(--border); color: var(--text-dark); }

    /* ── Modal ── */
    .modal-content {
        border-radius: 24px;
        border: none;
    }

    /* ── Form Inputs ── */
    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
    }

    /* ── Holiday Banner ── */
    .holiday-banner {
        padding: 64px 24px;
        text-align: center;
    }

    .holiday-icon {
        font-size: 64px;
        color: #ef4444;
        opacity: .2;
        display: block;
        margin-bottom: 16px;
    }

    /* ── Misc ── */
    .id-tag {
        display: inline-block;
        padding: 1px 5px;
        background: #f1f5f9;
        color: #475569;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 700;
        margin-right: 4px;
    }
    
    .filter-group { width: 170px; }

    /* ==========================================================
       TAMPILAN MOBILE (ANTI-SCROLL HORIZONTAL)
    ========================================================== */
    @media (max-width: 768px) {
        /* Filter form full width */
        .filter-form-container { width: 100%; flex-direction: column; align-items: stretch !important; }
        .filter-group { width: 100%; }
        
        /* Table to Card layout */
        .table thead { display: none; }
        .table tbody tr {
            display: block;
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,.03);
            background: #fff;
        }
        .table tbody tr:hover td { background: transparent; }
        .table tbody td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border: none;
            border-bottom: 1px solid #f1f5f9;
            font-size: 13px;
            gap: 12px;
            text-align: right;
        }
        .table tbody td:last-child { border-bottom: none; }
        
        /* Matikan fungsi sticky agar selaras dengan kartu */
        .sticky-col { position: static !important; background: transparent !important; }

        /* Pengaturan label baris (Otomatis ambil dari atribut data-label) */
        .table tbody td::before {
            content: attr(data-label);
            font-size: 11px; font-weight: 700; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: .04em;
            flex-shrink: 0; min-width: 80px; text-align: left;
        }

        /* Khusus Baris Judul (Nama/Identitas) */
        .table tbody td[data-label="Nama Siswa"],
        .table tbody td[data-label="Nama Guru & Staff"] {
            flex-direction: column; align-items: flex-start; gap: 8px;
            background: #f8fafc; border-radius: 12px 12px 0 0; text-align: left;
        }
        .table tbody td[data-label="Nama Siswa"]::before,
        .table tbody td[data-label="Nama Guru & Staff"]::before { display: none; }

        .table tbody td .d-flex { width: 100%; align-items: center; }
        .table tbody td .d-flex > div { flex: 1; min-width: 0; }
        .table tbody td .fw-semibold { white-space: normal; word-break: break-word; }

        /* Penyesuaian Kolom Aksi */
        .table tbody td[data-label="Aksi"] { justify-content: flex-end; }
        .table tbody td[data-label="Aksi"]::before { display: none; }

        /* Penyesuaian Baris Kosong */
        .table tbody tr.empty-row td {
            display: block; text-align: center; padding: 40px 16px;
        }
        .table tbody tr.empty-row td::before { display: none; }
    }
</style>

<div class="container-fluid py-4">

    {{-- Header --}}
    <div class="card card-main mb-4">
        <div class="card-body p-4">
            <div class="row align-items-center g-3">
                <div class="col-xl-6">
                    <div class="d-flex align-items-center gap-3">
                        <div class="p-3 bg-primary rounded-4 text-white">
                            <i class="bi bi-shield-check fs-4"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-1">Rekap Presensi Harian</h5>
                            <p class="text-muted small mb-0">
                                <i class="bi bi-calendar3 me-1 text-primary"></i>
                                {{ $namaHari }}, {{ \Carbon\Carbon::parse($tanggal)->translatedFormat('d F Y') }}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6">
                    <div class="d-flex flex-wrap justify-content-xl-end align-items-center gap-2 filter-form-container">
                        @if(auth()->user()->role === 'admin')
                        <button class="btn btn-danger rounded-pill px-4 fw-semibold w-sm-100 mb-2 mb-xl-0"
                                style="font-size: 13px;"
                                data-bs-toggle="modal"
                                data-bs-target="#modalHariLibur">
                            <i class="bi bi-calendar-x me-2"></i>Kelola Libur
                        </button>
                        @endif

                        <form method="GET" class="d-flex gap-2 flex-wrap filter-form-container">
                            <div class="input-group filter-group">
                                <span class="input-group-text bg-white"><i class="bi bi-door-open text-muted"></i></span>
                                <select name="kelas" class="form-select" style="font-size: 13px;" onchange="this.form.submit()">
                                    <option value="">Semua Kelas</option>
                                    @foreach(['VII-A','VII-B','VII-C','VII-D','VIII-A','VIII-B','VIII-C','VIII-D','IX-A','IX-B','IX-C','IX-D'] as $k)
                                        <option value="{{ $k }}" {{ request('kelas') === $k ? 'selected' : '' }}>Kelas {{ $k }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="input-group filter-group">
                                <span class="input-group-text bg-white"><i class="bi bi-calendar-event text-muted"></i></span>
                                <input type="date" name="tanggal" value="{{ $tanggal }}"
                                       class="form-control" style="font-size: 13px;" onchange="this.form.submit()">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Libur Banner atau Konten Rekap --}}
    @if(!empty($keteranganLibur))
        <div class="card card-main">
            <div class="holiday-banner">
                <i class="bi bi-calendar2-x holiday-icon"></i>
                <h4 class="fw-bold mb-2">Tidak Ada Jadwal Presensi</h4>
                <p class="text-muted mb-3">
                    Hari ini libur: <strong class="text-danger">{{ $keteranganLibur }}</strong>
                </p>
                <span class="badge bg-danger-subtle text-danger px-3 py-2 rounded-pill fw-semibold">
                    Sistem Dinonaktifkan
                </span>
            </div>
        </div>

    @else

        {{-- Tab Navigation --}}
        <div class="d-flex justify-content-center mb-4">
            <ul class="nav nav-pills nav-pills-custom d-flex" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#pills-siswa" type="button">
                        <i class="bi bi-people-fill me-2"></i>Siswa
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-guru" type="button">
                        <i class="bi bi-person-badge-fill me-2"></i>Guru & Staff
                    </button>
                </li>
            </ul>
        </div>

        <div class="tab-content">

            {{-- Panel Siswa --}}
            <div class="tab-pane fade show active" id="pills-siswa" role="tabpanel">
                <div class="card card-main">
                    <div class="table-responsive" style="max-height: 70vh;">
                        <table class="table align-middle text-center mb-0">
                            <thead class="sticky-top" style="z-index: 11;">
                                <tr>
                                    <th class="text-start ps-4 sticky-col" style="min-width: 270px;">Nama Siswa</th>
                                    <th style="min-width: 100px;">Kelas</th>
                                    @foreach($jadwal as $j)
                                        <th style="min-width: 150px;">{{ $j }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($rekap as $r)
                                <tr>
                                    <td class="text-start ps-4 sticky-col" data-label="Nama Siswa">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="avatar-circle">{{ substr($r['nama'], 0, 1) }}</div>
                                            <div>
                                                <div class="fw-semibold" style="font-size: 13px;">{{ $r['nama'] }}</div>
                                                <div class="text-muted" style="font-size: 11px;">
                                                    <span class="id-tag">NISN</span>{{ $r['nisn'] }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td data-label="Kelas">
                                        <span class="badge bg-white text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-semibold" style="font-size: 12px;">
                                            {{ $r['kelas'] }}
                                        </span>
                                    </td>
                                    @foreach($jadwal as $ibadah)
                                        @php
                                            $st      = $r['ibadah'][$ibadah] ?? null;
                                            $status  = $st['status'] ?? 'Alpa';
                                            $jam     = $st['jam_scan'] ?? '--:--';
                                            $cls     = match($status) { 'Hadir' => 'st-hadir', 'Alpa' => 'st-tidak', default => 'st-izin' };
                                            $icon    = match($status) { 'Hadir' => 'bi-check-circle-fill', 'Alpa' => 'bi-x-circle-fill', default => 'bi-info-circle-fill' };
                                        @endphp
                                        <td data-label="{{ $ibadah }}">
                                            <div class="status-badge {{ $cls }}">
                                                <div class="badge-status-label">
                                                    <i class="bi {{ $icon }}"></i>
                                                    {{ strtoupper($status) }}
                                                </div>
                                                <div class="badge-status-time">
                                                    <i class="bi bi-clock"></i> {{ $jam }}
                                                </div>
                                            </div>
                                        </td>
                                    @endforeach
                                </tr>
                                @empty
                                <tr class="empty-row">
                                    <td colspan="{{ count($jadwal) + 2 }}" class="text-muted">
                                        <i class="bi bi-inbox fs-3 d-block mb-2 text-black-50"></i>
                                        Belum ada data absensi untuk filter ini.
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Panel Guru --}}
            <div class="tab-pane fade" id="pills-guru" role="tabpanel">
                <div class="card card-main">
                    <div class="table-responsive">
                        <table class="table align-middle text-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-start ps-4 sticky-col" style="min-width: 280px;">Nama Guru & Staff</th>
                                    <th style="min-width: 180px;">Jam Masuk</th>
                                    <th style="min-width: 180px;">Jam Pulang</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($rekapGuru as $rg)
                                @php
                                    $masuk    = $rg['kegiatan']['Masuk']  ?? null;
                                    $pulang   = $rg['kegiatan']['Pulang'] ?? null;

                                    $statusMasuk  = $masuk['status']  ?? 'Alpa';
                                    $statusPulang = $pulang['status'] ?? 'Alpa';

                                    $clsMasuk  = match($statusMasuk)  { 'Hadir' => 'st-hadir', 'Alpa' => 'st-tidak', default => 'st-izin' };
                                    $clsPulang = match($statusPulang) { 'Hadir' => 'st-hadir', 'Alpa' => 'st-tidak', default => 'st-izin' };

                                    $labelMasuk  = match($statusMasuk)  { 'Hadir' => 'Sudah Masuk', 'Alpa' => 'Belum Scan', default => $statusMasuk };
                                    $labelPulang = match($statusPulang) { 'Hadir' => 'Sudah Pulang', 'Alpa' => 'Belum Scan', default => $statusPulang };

                                    $iconMasuk  = match($statusMasuk)  { 'Hadir' => 'bi-box-arrow-in-right', 'Alpa' => 'bi-dash-circle', default => 'bi-info-circle-fill' };
                                    $iconPulang = match($statusPulang) { 'Hadir' => 'bi-box-arrow-right', 'Alpa' => 'bi-dash-circle', default => 'bi-info-circle-fill' };
                                @endphp
                                <tr>
                                    <td class="text-start ps-4 sticky-col" data-label="Nama Guru & Staff">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="avatar-circle avatar-guru">
                                                <i class="bi bi-person-fill"></i>
                                            </div>
                                            <div>
                                                <div class="fw-semibold" style="font-size: 13px;">{{ $rg['nama'] }}</div>
                                                <div class="text-muted" style="font-size: 11px;">
                                                    <span class="id-tag">{{ $rg['jenis_identitas'] ?? 'ID' }}</span>
                                                    {{ $rg['nomor_identitas'] ?? '-' }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td data-label="Jam Masuk">
                                        <div class="status-badge {{ $clsMasuk }}">
                                            <div class="badge-status-label">
                                                <i class="bi {{ $iconMasuk }}"></i>
                                                {{ strtoupper($labelMasuk) }}
                                            </div>
                                            <div class="badge-status-time">{{ $masuk['jam_scan'] ?? '--:--' }}</div>
                                        </div>
                                    </td>
                                    <td data-label="Jam Pulang">
                                        <div class="status-badge {{ $clsPulang }}">
                                            <div class="badge-status-label">
                                                <i class="bi {{ $iconPulang }}"></i>
                                                {{ strtoupper($labelPulang) }}
                                            </div>
                                            <div class="badge-status-time">{{ $pulang['jam_scan'] ?? '--:--' }}</div>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr class="empty-row">
                                    <td colspan="3" class="text-muted">
                                        <i class="bi bi-inbox fs-3 d-block mb-2 text-black-50"></i>
                                        Data guru tidak ditemukan.
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>{{-- end tab-content --}}
    @endif
</div>

{{-- Modal Hari Libur (admin only) --}}
@if(auth()->user()->role === 'admin')
<div class="modal fade" id="modalHariLibur" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content shadow-sm">

            <div class="modal-header border-0 p-4 pb-2">
                <div class="d-flex align-items-center gap-3">
                    <div class="p-2 bg-danger-subtle rounded-3">
                        <i class="bi bi-calendar-plus text-danger fs-5"></i>
                    </div>
                    <div>
                        <h5 class="fw-bold mb-0">Kelola Hari Libur</h5>
                        <p class="text-muted small mb-0">Daftarkan tanggal libur agar absensi otomatis nonaktif.</p>
                    </div>
                </div>
                <button class="btn-close-custom ms-auto" data-bs-dismiss="modal">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <div class="modal-body p-4">

                {{-- Form Tambah/Edit --}}
                <form id="formHariLibur"
                      action="{{ route('admin.hari-libur.store') }}"
                      method="POST"
                      class="bg-light rounded-4 p-4 mb-4">
                    @csrf
                    <div id="methodField"></div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-muted">Tanggal Mulai</label>
                            <input type="date" name="tanggal_mulai" id="input_mulai"
                                   class="form-control rounded-3" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-muted">Tanggal Selesai</label>
                            <input type="date" name="tanggal_selesai" id="input_selesai"
                                   class="form-control rounded-3" required>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label small fw-semibold text-muted">Keterangan</label>
                            <input type="text" name="keterangan" id="input_keterangan"
                                   class="form-control rounded-3"
                                   placeholder="Contoh: Libur Idul Fitri" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted">Tipe</label>
                            <select name="tipe" id="input_tipe" class="form-select rounded-3">
                                <option value="nasional">Nasional</option>
                                <option value="semester">Semester</option>
                                <option value="agenda_sekolah">Agenda Sekolah</option>
                            </select>
                        </div>
                        <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mt-3 gap-2">
                            <button type="button" id="btnBatalEdit"
                                    class="btn btn-light rounded-pill px-4 fw-semibold d-none w-sm-100"
                                    onclick="resetFormLibur()">
                                Batal Edit
                            </button>
                            <button type="submit" id="btnSubmitLibur"
                                    class="btn btn-primary rounded-pill px-4 fw-semibold ms-auto w-sm-100">
                                <i class="bi bi-plus-lg me-1"></i> Simpan Libur
                            </button>
                        </div>
                    </div>
                </form>

                {{-- Daftar Hari Libur --}}
                <h6 class="fw-bold mb-3">
                    <i class="bi bi-list-check me-2"></i>Daftar Hari Libur
                </h6>
                <div class="table-responsive rounded-3 border border-bottom-0">
                    <table class="table table-sm align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3 py-3" style="font-size: 11px;">Tanggal</th>
                                <th class="py-3"      style="font-size: 11px;">Keterangan</th>
                                <th class="py-3"      style="font-size: 11px;">Tipe</th>
                                <th class="text-end pe-3 py-3" style="font-size: 11px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($hari_libur as $libur)
                            <tr>
                                <td data-label="Tanggal" class="ps-3 fw-semibold" style="font-size: 13px;">
                                    {{ \Carbon\Carbon::parse($libur->tanggal_mulai)->format('d/m/Y') }}
                                    @if($libur->tanggal_selesai !== $libur->tanggal_mulai)
                                        &ndash; {{ \Carbon\Carbon::parse($libur->tanggal_selesai)->format('d/m/Y') }}
                                    @endif
                                </td>
                                <td data-label="Keterangan" style="font-size: 13px;">{{ $libur->keterangan }}</td>
                                <td data-label="Tipe">
                                    <span class="badge bg-info-subtle text-info rounded-pill px-3" style="font-size: 11px;">
                                        {{ ucfirst($libur->tipe) }}
                                    </span>
                                </td>
                                <td data-label="Aksi" class="text-end pe-3">
                                    <div class="d-flex justify-content-end gap-2">
                                        <button type="button"
                                                class="btn-action btn-action-edit"
                                                onclick="editLibur('{{ $libur->id }}','{{ $libur->tanggal_mulai }}','{{ $libur->tanggal_selesai }}','{{ addslashes($libur->keterangan) }}','{{ $libur->tipe }}')">
                                            <i class="bi bi-pencil-square"></i>
                                        </button>
                                        <form id="delete-form-{{ $libur->id }}"
                                              action="{{ route('admin.hari-libur.destroy', $libur->id) }}"
                                              method="POST"
                                              class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button"
                                                    class="btn-action btn-action-delete"
                                                    onclick="confirmDelete('{{ $libur->id }}')">
                                                <i class="bi bi-trash3"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr class="empty-row">
                                <td colspan="4" class="text-center py-4 text-muted" style="font-size: 13px;">
                                    Tidak ada hari libur yang terdaftar.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

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

<script>
    const swalBase = { customClass: { popup: 'rounded-4' } };

    @if(session('success'))
        Swal.fire({ ...swalBase, icon: 'success', title: 'Berhasil!', text: @json(session('success')), timer: 2500, showConfirmButton: false, timerProgressBar: true });
    @endif

    @if(session('error'))
        Swal.fire({ ...swalBase, icon: 'error', title: 'Terjadi Kesalahan', text: @json(session('error')), confirmButtonColor: '#4f46e5' });
    @endif

    function editLibur(id, mulai, selesai, keterangan, tipe) {
        const form = document.getElementById('formHariLibur');
        form.action = `/admin/hari-libur/${id}`;
        document.getElementById('methodField').innerHTML = '<input type="hidden" name="_method" value="PUT">';
        document.getElementById('input_mulai').value       = mulai;
        document.getElementById('input_selesai').value     = selesai;
        document.getElementById('input_keterangan').value  = keterangan;
        document.getElementById('input_tipe').value        = tipe;

        const btn = document.getElementById('btnSubmitLibur');
        btn.textContent = 'Update Libur';
        btn.classList.replace('btn-primary', 'btn-success');
        document.getElementById('btnBatalEdit').classList.remove('d-none');
        form.scrollIntoView({ behavior: 'smooth' });
    }

    function resetFormLibur() {
        const form = document.getElementById('formHariLibur');
        form.action = "{{ route('admin.hari-libur.store') }}";
        document.getElementById('methodField').innerHTML = '';
        form.reset();

        const btn = document.getElementById('btnSubmitLibur');
        btn.innerHTML = '<i class="bi bi-plus-lg me-1"></i> Simpan Libur';
        btn.classList.replace('btn-success', 'btn-primary');
        document.getElementById('btnBatalEdit').classList.add('d-none');
    }

    function confirmDelete(id) {
        Swal.fire({
            ...swalBase,
            title: 'Hapus data ini?',
            text: 'Data libur tidak bisa dikembalikan setelah dihapus.',
            icon: 'warning',
            showCancelButton: true,
            reverseButtons: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Ya, hapus',
            cancelButtonText: 'Batal',
        }).then(r => { if (r.isConfirmed) document.getElementById('delete-form-' + id).submit(); });
    }
</script>
@endif

@endsection