@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @push('css')
        <style>
            /* Tab styling untuk List sections di halaman rekap (konsisten dengan MSJ framework) */
            #rekapListTabs .nav-link {
                border: 1px solid transparent;
                border-top-left-radius: 0.375rem;
                border-top-right-radius: 0.375rem;
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
                color: #495057;
                font-weight: 500;
            }
            #rekapListTabs .nav-link:hover {
                border-color: #e9ecef #e9ecef #dee2e6;
                isolation: isolate;
            }
            #rekapListTabs .nav-link.active {
                color: #028284;
                background-color: #fff;
                border-color: #dee2e6 #dee2e6 #fff;
                border-bottom: 2px solid #028284;
                font-weight: 600;
            }
            #rekapListTabsContent {
                padding: 1rem 0;
            }
            #rekapListTabsContent .tab-pane {
                display: none;
            }
            #rekapListTabsContent .tab-pane.active {
                display: block;
            }
        </style>
    @endpush
    @if (session('message'))
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Masalah Umum',
                    text: @json(session('message')),
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
    @if (session('errorplus'))
        {{-- Additional for error message from Mspp12Controller --}}
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Masalah Umum',
                    text: @json(session('errorplus')),
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
    @if (session('success'))
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Update Berhasil',
                    text: @json(session('success')),
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
    @if (session('error'))
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: @json(session('error')),
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">

                    <div class="nav-wrapper d-flex flex-column flex-md-row justify-content-between gap-3">

                        {{-- BAGIAN KIRI --}}
                        <div class="d-flex flex-column flex-md-row gap-2 w-100 w-md-auto">

                            @php
                                $idPeriode = '';
                            @endphp

                            {{-- check authorize add --}}
                            @if ($authorize->add == '1')

                                {{-- tombol hanya tampil ketika id tidak null --}}
                                <form role="form"
                                    method="POST"
                                    action="{{ URL::to('mspp12/' . $idPeriode) }}"
                                    id="form-close-periode"
                                    style="display: none;">

                                    @csrf
                                    <input type="hidden" name="_method" value="DELETE">
                                    <input type="hidden" name="_page" value="{{ $dmenu }}">

                                    <button id="closeButton"
                                        name="close"
                                        type="button"
                                        class="btn btn-danger mb-0 w-100 w-md-auto"
                                        onclick="closeLeavePeriod(event)">

                                        <i class="fas fa-lock me-1"></i>
                                        <span class="font-weight-bold">
                                            Tutup Periode Cuti
                                        </span>
                                    </button>
                                </form>

                                {{-- button query --}}
                                <button id="filterButton"
                                    name="query"
                                    class="btn btn-primary mb-0 w-100 w-md-auto"
                                    style="display: inline"
                                    onclick="queryRekapFilterCuti(event, this)"
                                    disabled>

                                    <i class="fas fa-plus me-1"></i>
                                    <span class="font-weight-bold" id="filterButtonText">
                                        Buat/Update Rekap Surat Cuti
                                    </span>
                                </button>

                                <span id="selectedPeriodeLabel" class="text-sm text-muted ms-2"></span>

                            @endif

                        </div>

                        {{-- BAGIAN KANAN --}}
                        <div
                            class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-2 w-100 w-md-auto">

                            @if ($authorize->add == '1')

                                {{-- button lihat rekap surat cuti --}}
                                <button id="viewRekapButton"
                                    name="view"
                                    class="btn btn-success mb-0 w-100 w-md-auto"
                                    style="display: inline"
                                    onclick="queryRekapFilterCuti(event, this)">

                                    <i class="fas fa-eye me-1"></i>
                                    <span class="font-weight-bold">
                                        Lihat Rekap Surat Cuti
                                    </span>
                                </button>

                            @endif

                        </div>

                    </div>

                    {{-- Progress Bar --}}
                    <div id="progress-bar"
                        class="progress mt-3"
                        style="display: none; height: 30px;">

                        <div id="loading-bar"
                            class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                            role="progressbar"
                            style="width: 0%; height: 30px;"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100">

                            0%
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        @if (isset($periode_h_minus_1) && $periode_h_minus_1->isNotEmpty())
            {{-- Card H-3: Periode akan berakhir dalam 3 hari --}}
            <div class="row">
                <div class="col-md-12 mt-3">
                    <div class="card border-warning" style="border-width: 2px;">
                        <div class="card-body py-3 px-4">
                            <div class="d-flex align-items-start gap-3">
                                <div class="flex-shrink-0">
                                    <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center"
                                        style="width: 40px; height: 40px;">
                                        <i class="fas fa-clock text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="text-warning fw-bold mb-1">
                                        {{ $periode_h_minus_1->count() }} Periode Akan Berakhir (H-3)
                                    </h6>
                                    <p class="text-dark small mb-2">
                                        Akan berakhir dalam ≤3 hari:
                                        @php
                                            $namaListH3 = $periode_h_minus_1->take(3)->pluck('nama')->map(fn($n) => '<strong>' . e($n) . '</strong>')->implode(', ');
                                            $sisanyaH3 = $periode_h_minus_1->count() - 3;
                                        @endphp
                                        {!! $namaListH3 !!}
                                        @if ($sisanyaH3 > 0)
                                            <span class="text-muted">+{{ $sisanyaH3 }} lainnya</span>
                                        @endif
                                    </p>
                                    <p class="text-muted small mb-0">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Pastikan tidak ada permohonan cuti yang masih diproses (nyangkut) sebelum periode berakhir.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if (isset($ini_saatnya_rekap) && $ini_saatnya_rekap == true)
            {{-- Card H-0: Hari ini adalah hari terakhir / saatnya rekap --}}
            <div class="row">
                <div class="col-md-12 mt-3">
                    <div class="card border-warning" style="border-width: 2px;">
                        <div class="card-body py-3 px-4">
                            <div class="d-flex align-items-start gap-3">
                                <div class="flex-shrink-0">
                                    <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center"
                                        style="width: 40px; height: 40px;">
                                        <i class="fas fa-exclamation-circle text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="text-warning fw-bold mb-1">
                                        Hari Ini Saatnya Rekap
                                    </h6>
                                    <p class="text-dark small mb-2">
                                        Periode <strong>{{ $periode_berakhir->nama }}</strong> berakhir hari ini
                                        ({{ \Carbon\Carbon::parse($periode_berakhir->berakhir)->format('d/m/Y') }}).
                                    </p>
                                    <p class="text-muted small mb-0">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Pastikan semua permohonan cuti sudah diproses, lalu lakukan rekapitulasi.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if (isset($periode_perlu_ditutup) && $periode_perlu_ditutup->isNotEmpty())
            {{-- Card 1: Periode sudah berakhir tapi belum ditutup --}}
            <div class="row">
                <div class="col-md-12 mt-3">
                    <div class="card border-danger" style="border-width: 2px;">
                        <div class="card-body py-3 px-4">
                            <div class="d-flex align-items-start gap-3">
                                <div class="flex-shrink-0">
                                    <div class="bg-danger rounded-circle d-flex align-items-center justify-content-center"
                                        style="width: 40px; height: 40px;">
                                        <i class="fas fa-lock-open text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="text-danger fw-bold mb-1">
                                        {{ $periode_perlu_ditutup->count() }} Periode Perlu Ditutup
                                    </h6>
                                    <p class="text-dark small mb-2">
                                        Sudah berakhir namun masih terbuka:
                                        @php
                                            $namaList = $periode_perlu_ditutup->take(3)->pluck('nama')->map(fn($n) => '<strong>' . e($n) . '</strong>')->implode(', ');
                                            $sisanya = $periode_perlu_ditutup->count() - 3;
                                        @endphp
                                        {!! $namaList !!}
                                        @if ($sisanya > 0)
                                            <span class="text-muted">+{{ $sisanya }} lainnya</span>
                                        @endif
                                    </p>
                                    <p class="text-muted small mb-0">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Tutup melalui tombol
                                        <span class="badge bg-danger"><i class="fas fa-lock me-1"></i>Tutup Periode</span>
                                        agar tidak ada lagi pengajuan cuti yang masuk.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if (isset($periode_rekap_perlu_dibuat) && $periode_rekap_perlu_dibuat->isNotEmpty())
            {{-- Card 2: Periode sudah ditutup tapi rekap belum dibuat --}}
            <div class="row">
                <div class="col-md-12 mt-3">
                    <div class="card border-danger" style="border-width: 2px;">
                        <div class="card-body py-3 px-4">
                            <div class="d-flex align-items-start gap-3">
                                <div class="flex-shrink-0">
                                    <div class="bg-danger rounded-circle d-flex align-items-center justify-content-center"
                                        style="width: 40px; height: 40px;">
                                        <i class="fas fa-file-circle-plus text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="text-danger fw-bold mb-1">
                                        {{ $periode_rekap_perlu_dibuat->count() }} Rekap Perlu Dibuat
                                    </h6>
                                    <p class="text-dark small mb-2">
                                        Sudah ditutup namun rekap belum dibuat:
                                        @php
                                            $namaList2 = $periode_rekap_perlu_dibuat->take(3)->pluck('nama')->map(fn($n) => '<strong>' . e($n) . '</strong>')->implode(', ');
                                            $sisanya2 = $periode_rekap_perlu_dibuat->count() - 3;
                                        @endphp
                                        {!! $namaList2 !!}
                                        @if ($sisanya2 > 0)
                                            <span class="text-muted">+{{ $sisanya2 }} lainnya</span>
                                        @endif
                                    </p>
                                    <p class="text-muted small mb-0">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Buat melalui tombol
                                        <span class="badge bg-primary"><i class="fas fa-plus me-1"></i>Buat Rekap</span>
                                        agar data sisa cuti tersalin ke periode berikutnya.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Modal: Pilih Periode untuk Rekap --}}
        <div class="modal fade" id="modalPilihPeriode" tabindex="-1" aria-labelledby="modalPilihPeriodeLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalPilihPeriodeLabel">Pilih Periode</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @php
                            $periodeAll = DB::table('mst_periode_permohonan')->orderBy('mulai', 'desc')->get();
                            $tahunList = $periodeAll->map(function($p) {
                                return \Carbon\Carbon::parse($p->mulai)->year;
                            })->unique()->sortDesc()->values();
                        @endphp
                        <div class="row mb-3">
                            <div class="col-md-5">
                                <label class="form-control-label text-sm">Filter Tahun</label>
                                <select id="filterTahunPilih" class="form-select form-select-sm" onchange="filterTablePilihPeriode()">
                                    <option value="">Semua Tahun</option>
                                    @foreach ($tahunList as $thn)
                                        <option value="{{ $thn }}">{{ $thn }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-7">
                                <label class="form-control-label text-sm">Pencarian Bebas</label>
                                <div class="input-group input-group-sm">
                                    <input type="text" id="searchPilihPeriode" class="form-control form-control-sm" placeholder="Cari nama periode..." onkeyup="filterTablePilihPeriode()">
                                    <span class="input-group-text bg-primary text-light" style="cursor:pointer;" onclick="filterTablePilihPeriode()">
                                        <i class="fas fa-search"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-hover mb-0" id="tablePilihPeriode">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th width="50" class="text-center">#</th>
                                        <th>Periode</th>
                                        <th class="text-center">Mulai</th>
                                        <th class="text-center">Berakhir</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">Rekap</th>
                                        <th width="80" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="tbodyPilihPeriode">
                                    @foreach ($periodeAll as $index => $prd)
                                        @php
                                            $thn = \Carbon\Carbon::parse($prd->mulai)->year;
                                            $hasRekap = in_array($prd->nama, $existingRekap ?? []);
                                        @endphp
                                        <tr data-tahun="{{ $thn }}" data-nama="{{ strtolower($prd->nama) }}"
                                            data-id="{{ $prd->id }}" data-isactive="{{ $prd->isactive }}"
                                            data-mulai="{{ $prd->mulai }}" data-rekap-exists="{{ $hasRekap ? '1' : '0' }}">
                                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                                            <td class="font-weight-bold">{{ $prd->nama }}</td>
                                            <td class="text-center">{{ \Carbon\Carbon::parse($prd->mulai)->format('d/m/Y') }}</td>
                                            <td class="text-center">{{ \Carbon\Carbon::parse($prd->berakhir)->format('d/m/Y') }}</td>
                                            <td class="text-center">
                                                @if ($prd->isactive == '1')
                                                    <span class="badge bg-success">Aktif</span>
                                                @else
                                                    <span class="badge bg-secondary">Nonaktif</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                @if ($hasRekap)
                                                    <span class="badge bg-info">Ada</span>
                                                @else
                                                    <span class="badge bg-light text-muted">Belum</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-primary mb-0"
                                                    onclick="selectPeriode({{ $prd->id }}, '{{ $prd->nama }}', '{{ $prd->isactive }}', {{ $hasRekap ? '1' : '0' }})"
                                                    title="Pilih Periode">
                                                    <i class="fas fa-check"></i> <span class="font-weight-bold">Pilih</span>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <span id="infoPilihPeriode" class="text-sm text-muted"></span>
                            <div id="paginationPilihPeriode"></div>
                        </div>
                        <script>
                            let pilihCurrentPage = 1;
                            const pilihPerPage = 10;

                            function filterTablePilihPeriode() {
                                pilihCurrentPage = 1;
                                renderPilihTable();
                            }

                            function renderPilihTable() {
                                const filterTahun = document.getElementById('filterTahunPilih').value;
                                const searchText = document.getElementById('searchPilihPeriode').value.toLowerCase();
                                const rows = document.querySelectorAll('#tbodyPilihPeriode tr');
                                let visibleRows = [];
                                rows.forEach(function(row) {
                                    const rowTahun = row.getAttribute('data-tahun');
                                    const rowNama = row.getAttribute('data-nama');
                                    let match = true;
                                    if (filterTahun && rowTahun !== filterTahun) match = false;
                                    if (searchText && !rowNama.includes(searchText)) match = false;
                                    if (match) visibleRows.push(row);
                                    row.style.display = 'none';
                                });
                                const totalVisible = visibleRows.length;
                                const totalPages = Math.ceil(totalVisible / pilihPerPage);
                                if (pilihCurrentPage > totalPages) pilihCurrentPage = 1;
                                const start = (pilihCurrentPage - 1) * pilihPerPage;
                                const end = Math.min(start + pilihPerPage, totalVisible);
                                for (let i = start; i < end; i++) visibleRows[i].style.display = '';
                                const infoEl = document.getElementById('infoPilihPeriode');
                                if (totalVisible === 0) {
                                    infoEl.innerHTML = '<span class="text-danger">Tidak ada data yang cocok.</span>';
                                } else {
                                    infoEl.textContent = 'Menampilkan ' + (start + 1) + ' - ' + end + ' dari ' + totalVisible + ' periode';
                                }
                                const pagEl = document.getElementById('paginationPilihPeriode');
                                let pagHtml = '<nav><ul class="pagination pagination-sm mb-0">';
                                pagHtml += '<li class="page-item ' + (pilihCurrentPage === 1 ? 'disabled' : '') + '"><a class="page-link" href="javascript:void(0)" onclick="pilihGoToPage(' + (pilihCurrentPage - 1) + ')">&laquo;</a></li>';
                                for (let p = 1; p <= totalPages; p++) {
                                    pagHtml += '<li class="page-item ' + (p === pilihCurrentPage ? 'active' : '') + '"><a class="page-link" href="javascript:void(0)" onclick="pilihGoToPage(' + p + ')">' + p + '</a></li>';
                                }
                                pagHtml += '<li class="page-item ' + (pilihCurrentPage === totalPages ? 'disabled' : '') + '"><a class="page-link" href="javascript:void(0)" onclick="pilihGoToPage(' + (pilihCurrentPage + 1) + ')">&raquo;</a></li>';
                                pagHtml += '</ul></nav>';
                                pagEl.innerHTML = totalPages > 0 ? pagHtml : '';
                            }

                            function pilihGoToPage(page) {
                                pilihCurrentPage = page;
                                renderPilihTable();
                            }

                            document.getElementById('modalPilihPeriode').addEventListener('shown.bs.modal', function () {
                                pilihCurrentPage = 1;
                                renderPilihTable();
                            });

                            function selectPeriode(id, nama, isactive, rekapExists) {
                                var modal = bootstrap.Modal.getInstance(document.getElementById('modalPilihPeriode'));
                                if (modal) modal.hide();

                                // Set hidden input value
                                var hiddenInput = document.getElementById('hidden-periode-value');
                                if (hiddenInput) hiddenInput.value = id;

                                // Set input display text
                                var inputDisplay = document.getElementById('queryRekapCutiSelect-periode');
                                if (inputDisplay) inputDisplay.value = nama;

                                // Update label
                                var label = document.getElementById('selectedPeriodeLabel');
                                if (label) label.innerHTML = '<span class="badge bg-primary">' + nama + '</span>';

                                // Set form-close-periode action
                                var closeForm = document.getElementById('form-close-periode');
                                if (closeForm) {
                                    closeForm.setAttribute('action', '{{ url("mspp12") }}/' + id);
                                    closeForm.style.display = 'inline';
                                }

                                var closeButton = document.getElementById('closeButton');
                                var filterButton = document.getElementById('filterButton');
                                var viewButton = document.getElementById('viewRekapButton');

                                if (isactive == '1' || isactive == 1) {
                                    // STATE 1: Periode AKTIF
                                    if (closeButton) {
                                        closeButton.classList.remove('btn-success');
                                        closeButton.classList.add('btn-danger');
                                        closeButton.innerHTML = '<i class="fas fa-lock me-1"></i> Tutup Periode';
                                        closeButton.disabled = false;
                                    }
                                    if (filterButton) filterButton.disabled = true;
                                    if (viewButton) viewButton.disabled = true;
                                } else {
                                    // STATE 2 & 3: Periode NONAKTIF
                                    if (closeButton) {
                                        closeButton.classList.remove('btn-danger');
                                        closeButton.classList.add('btn-success');
                                        closeButton.innerHTML = '<i class="fas fa-unlock me-1"></i> Buka Periode';
                                        closeButton.disabled = false;
                                    }
                                    if (filterButton) {
                                        filterButton.disabled = false;
                                        var btnText = filterButton.querySelector('#filterButtonText');
                                        if (rekapExists == '1' || rekapExists == 1) {
                                            if (btnText) btnText.textContent = 'Update Rekap Surat Cuti';
                                            filterButton.classList.remove('btn-primary');
                                            filterButton.classList.add('btn-warning');
                                        } else {
                                            if (btnText) btnText.textContent = 'Buat Rekap Surat Cuti';
                                            filterButton.classList.remove('btn-warning');
                                            filterButton.classList.add('btn-primary');
                                        }
                                    }
                                    if (viewButton) {
                                        viewButton.disabled = !(rekapExists == '1' || rekapExists == 1);
                                    }
                                }
                            }
                        </script>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12 mt-3">
                <div class="card border-primary shadow-lg" style="border-width: 2px;">
                    <div class="card-header bg-gradient-primary py-3">
                        <h4 class="text-white mb-0">
                            <i class="fas fa-chart-line me-2"></i><strong>Filter Rekap Surat Cuti</strong>
                        </h4>
                        <p class="text-white text-sm mb-0 mt-1 opacity-8">Gunakan form di bawah ini untuk melakukan rekap
                            cuti</p>
                    </div>
                    <div class="card-body">
                        <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                            @csrf
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                {{-- retrieve table filter --}}
                                @foreach ($table_filter as $filter)
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            {{-- display label alias on type field not hidden --}}
                                            @if ($filter->type != 'hidden')
                                                <label for="example-text-input"
                                                    class="form-control-label">{{ $filter->alias }}</label>
                                            @endif
                                            {{-- field type char and string --}}
                                            @if ($filter->type == 'char' || $filter->type == 'string')
                                                <input class="form-control  {{ $filter->class }}" type="text"
                                                    value="{{ old($filter->field) }}" name="{{ $filter->field }}"
                                                    maxlength="{{ $filter->length }}">
                                                @if ($filter->note != '')
                                                    <p class='text-secondary text-xs pt-1 px-1'>
                                                        {{ '*) ' . $filter->note }}
                                                    </p>
                                                @endif
                                                {{-- field type email --}}
                                            @elseif ($filter->type == 'email')
                                                <input class="form-control {{ $filter->class }}" type="email"
                                                    value="{{ old($filter->field) }}" name="{{ $filter->field }}"
                                                    maxlength="{{ $filter->length }}">
                                                @if ($filter->note != '')
                                                    <p class='text-secondary text-xs pt-1 px-1'>
                                                        {{ '*) ' . $filter->note }}
                                                    </p>
                                                @endif
                                                {{-- field type hidden --}}
                                            @elseif ($filter->type == 'hidden')
                                                <input class="form-control {{ $filter->class }}" type="hidden"
                                                    value="{{ old($filter->field) }}" name="{{ $filter->field }}">
                                                {{-- field type date --}}
                                            @elseif ($filter->type == 'date')
                                                <input class="form-control {{ $filter->class }}" type="date"
                                                    value="{{ old($filter->field) }}" name="{{ $filter->field }}">
                                                @if ($filter->note != '')
                                                    <p class='text-secondary text-xs pt-1 px-1'>
                                                        {{ '*) ' . $filter->note }}
                                                    </p>
                                                @endif
                                                {{-- field type date2 on between format --}}
                                            @elseif ($filter->type == 'date2')
                                                <div class="row">
                                                    <div class="col-6">
                                                        <input class="form-control {{ $filter->class }}" type="date"
                                                            value="{{ old($filter->field) }}" name="fr{{ $filter->field }}">
                                                    </div>
                                                    <div class="col-6">
                                                        <input class="form-control {{ $filter->class }}" type="date"
                                                            value="{{ old($filter->field) }}" name="to{{ $filter->field }}">
                                                    </div>
                                                </div>
                                                @if ($filter->note != '')
                                                    <p class='text-secondary text-xs pt-1 px-1'>
                                                        {{ '*) ' . $filter->note }}
                                                    </p>
                                                @endif
                                                {{-- field type text --}}
                                            @elseif ($filter->type == 'text')
                                                <textarea class="form-control {{ $filter->class }}" name="{{ $filter->field }}"
                                                    maxlength="{{ $filter->length }}">{{ old($filter->field) }}</textarea>
                                                @if ($filter->note != '')
                                                    <p class='text-secondary text-xs pt-1 px-1'>
                                                        {{ '*) ' . $filter->note }}
                                                    </p>
                                                @endif
                                                {{-- field type number --}}
                                            @elseif ($filter->type == 'number')
                                                <input class="form-control {{ $filter->class }}" type="number"
                                                    value="{{ old($filter->field) }}" name="{{ $filter->field }}"
                                                    max="{{ $filter->length }}">
                                                @if ($filter->note != '')
                                                    <p class='text-secondary text-xs pt-1 px-1'>
                                                        {{ '*) ' . $filter->note }}
                                                    </p>
                                                @endif
                                                {{-- field type search --}}
                                            @elseif ($filter->type == 'search')
                                                <div class="flex flex-col mb-2 input-group">
                                                    <input type="text" name="{{ $filter->field }}"
                                                        class="form-control {{ $filter->class }}"
                                                        value="{{ old($filter->field) ? old($filter->field) : $filter->default }}">
                                                    <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                                        data-bs-target="#searchModal{{ $filter->field }}"
                                                        style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;"><i
                                                            class="fas fa-search"></i></span>
                                                </div>
                                                <!-- Modal -->
                                                <div class="modal fade" id="searchModal{{ $filter->field }}" tabindex="-1"
                                                    role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="searchModalLabel">
                                                                        List Data
                                                                    </h5>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                        aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </div>
                                                                @if ($filter->query != '')
                                                                    @php
                                                                        $table_result = DB::select($filter->query);
                                                                    @endphp
                                                                @endif
                                                                <div class="modal-body">
                                                                    <table class="table display"
                                                                        id="list_{{ $dmenu }}_{{ $filter->field }}">
                                                                        @if ($table_result)
                                                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                                                <tr>
                                                                                    <th width="20px">Action</th>
                                                                                    @foreach ($table_result as $result)
                                                                                        @php
                                                                                            $sAsArray = array_keys(
                                                                                                (array) $result,
                                                                                            );
                                                                                        @endphp
                                                                                    @endforeach
                                                                                    @foreach ($sAsArray as $modal_h)
                                                                                        <th>{{ $modal_h }}
                                                                                        </th>
                                                                                    @endforeach
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach ($table_result as $modal_d)
                                                                                    <tr>
                                                                                        @foreach ($table_result as $result)
                                                                                            @php
                                                                                                $field = array_keys(
                                                                                                    (array) $result,
                                                                                                );
                                                                                            @endphp
                                                                                        @endforeach
                                                                                        <td width="20px"><span
                                                                                                class="btn badge bg-primary badge-lg"
                                                                                                onclick="select_modal{{ $filter->field }}('{{ $modal_d->{$field[0]} }}')"><i
                                                                                                    class="bi bi-check-circle me-1"></i>
                                                                                                Select</span>
                                                                                        </td>
                                                                                        @foreach ($field as $filter_field)
                                                                                            @php
                                                                                                $string = $filter_field;
                                                                                            @endphp
                                                                                            <td class="text-sm font-weight-normal">
                                                                                                {{ $modal_d->$string }}
                                                                                            </td>
                                                                                        @endforeach
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        @endif
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @if ($filter->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $filter->note }}
                                                        </p>
                                                    @endif
                                                    <script>
                                                        $('document').ready(function () {
                                                            $('#list_{{ @$dmenu }}_{{ $filter->field }}').DataTable();
                                                        })

                                                        function select_modal{{ $filter->field }}(id, name) {
                                                            $('input[name="{{ $filter->field }}"]').val(id);
                                                            $('#searchModal{{ $filter->field }}').modal('hide');
                                                        }
                                                    </script>
                                                    {{-- field type enum --}}
                                                @elseif ($filter->type == 'enum')
                                                    @if ($filter->field == 'periode')
                                                        {{-- Input periode yang buka modal search (bukan dropdown) --}}
                                                        <div class="input-group" style="cursor: pointer;" data-bs-toggle="modal"
                                                            data-bs-target="#modalPilihPeriode">
                                                            <input type="text" id="queryRekapCutiSelect-periode"
                                                                class="form-control {{ $filter->class }}"
                                                                placeholder="Klik untuk pilih periode..."
                                                                readonly>
                                                            <span class="input-group-text bg-primary text-light"
                                                                style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;">
                                                                <i class="fas fa-search"></i>
                                                            </span>
                                                        </div>
                                                        {{-- Hidden input untuk menyimpan nilai periode yang dipilih --}}
                                                        <input type="hidden" name="{{ $filter->field }}" id="hidden-periode-value" value="{{ old($filter->field) }}">
                                                        @if ($filter->note != '')
                                                            <p class='text-secondary text-xs pt-1 px-1'>
                                                                {{ '*) ' . $filter->note }}
                                                            </p>
                                                        @endif
                                                    @else
                                                        {{-- Dropdown biasa untuk field enum lainnya --}}
                                                        <select id="queryRekapCutiSelect-{{ $filter->field }}"
                                                            class="form-select {{ $filter->class }}" name="{{ $filter->field }}">
                                                            <option value=""></option>
                                                            @if ($filter->query != '')
                                                                @php
                                                                    $data_query = DB::select($filter->query);
                                                                @endphp
                                                                @foreach ($data_query as $q)
                                                                    <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjhris/resources/views/rekap/rpcm12/filter.blade.php</b> on line <b>801</b><br />
                                                                    <option value="{{ $sAsArray[0] }}" {{ old($filter->field) == $sAsArray[0] ? 'selected' : '' }} where="{{ $filter->sub != '' ? $sAsArray[2] : '' }}">
                                                                        {{ $sAsArray[0] }} - {{ $sAsArray[1] }}
                                                                    </option>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                        @if ($filter->sub != '')
                                                            <script>
                                                                $('select[name="{{ $filter->field }}"] option').hide();
                                                                $('select[name="{{ $filter->field }}"] option[where="' + $('select[name="{{ $filter->sub }}"]').val() + '"]')
                                                                    .show();
                                                                $('select[name="{{ $filter->sub }}"]').change(function () {
                                                                    $('select[name="{{ $filter->field }}"] option').hide();
                                                                    $('select[name="{{ $filter->field }}"] option[where="' + $(this).val() + '"]').show();
                                                                });
                                                            </script>
                                                        @endif
                                                        @if ($filter->note != '')
                                                            <p class='text-secondary text-xs pt-1 px-1'>
                                                                {{ '*) ' . $filter->note }}
                                                            </p>
                                                        @endif
                                                    @endif
                                                @endif
                                                @error($filter->field)
                                                    <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <hr class="horizontal dark">
                                <div class="card-footer align-items-center pt-0 pb-2">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card "Tolak Semua" dan "Atasi Masalah" tetap di luar tab (di atas) --}}
            <div class="row">
                <div class="col-md-6 col-12 mt-3">
                    <div class="card h-100">
                        <form role="form" method="POST" action="{{ route('rpcm12.reject-cuti-onprogress.personalia') }}"
                            id="{{ $dmenu }}-form-reject-all">
                            @csrf
                            <div class="card-body">
                                <p class="text-uppercase text-sm">Tolak Semua Pengajuan yang Masih Diproses di Sisi Atasan
                                    (Berdasarkan Periode)</p>
                                <hr class="horizontal dark mt-0">
                                {{-- Input enum untuk periode --}}
                                @foreach ($table_filter as $filter)
                                    @if ($filter->type == 'enum')
                                        {{-- Make only periode thats made in this loop --}}
                                        @if ($filter->field == 'periode')
                                            {{-- display label alias on type field not hidden --}}
                                            @if ($filter->type != 'hidden')
                                                <label for="example-text-input" class="form-control-label">{{ $filter->alias }}</label>
                                            @endif
                                            <select class="form-select {{ $filter->class }}" name="{{ $filter->field }}">
                                                <option value=""></option>
                                                @if ($filter->query != '')
                                                    @php
                                                        $data_query = DB::select($filter->query);
                                                    @endphp
                                                    @foreach ($data_query as $q)
                                                        @php
                                                            $sAsArray = array_values((array) $q);
                                                        @endphp
                                                        <option value="{{ $sAsArray[0] }}" {{ old($filter->field) == $sAsArray[0] ? 'selected' : '' }}
                                                            where="{{ $filter->sub != '' ? $sAsArray[2] : '' }}">
                                                            {{ $sAsArray[0] }} - {{ $sAsArray[1] }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>

                                            @if ($filter->sub != '')
                                                <script>
                                                    $(document).ready(function () {
                                                        let targetSelect = $('select[name="{{ $filter->field }}"]');
                                                        let subSelect = $('select[name="{{ $filter->sub }}"]');

                                                        targetSelect.find('option').hide();
                                                        targetSelect.find('option[where="' + subSelect.val() + '"]').show();

                                                        subSelect.change(function () {
                                                            targetSelect.find('option').hide();
                                                            targetSelect.find('option[where="' + $(this).val() + '"]').show();
                                                        });
                                                    });
                                                </script>
                                            @endif

                                            @if ($filter->note != '')
                                                <p class='text-secondary text-xs pt-1 px-1'>
                                                    {{ '*) ' . $filter->note }}
                                                </p>
                                            @endif
                                        @endif
                                    @endif
                                @endforeach
                                @if (session('error-right'))
                                    <div class="alert alert-danger text-white alert-dismissible fade show" role="alert">
                                        {{ session('error-right') }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                @endif
                                <div class="d-flex justify-content-center">
                                    <button type="submit" class="btn btn-danger btn-sm me-2" onclick="submitForm(event)"><i
                                            class="fas fa-times-circle"></i> Tolak
                                        Semua</button>
                                    <button id="scrollButton" type="submit" class="btn btn-primary btn-sm"
                                        onclick="event.preventDefault()"><i class="fas fa-arrow-down"></i> Cek
                                        Permohonan</button>
                                </div>
                                @if (session('success-right'))
                                    <div class="alert alert-success text-white alert-dismissible fade show" role="alert">
                                        {{ session('success-right') }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                @endif
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-6 col-12 mt-3">
                    <div class="card h-100">
                        <form role="form" method="POST" action="#">
                            @csrf
                            <div class="card-body">
                                <p class="text-uppercase text-sm">Atasi Masalah Pengajuan yang Masih Diproses di Sisi
                                    Personalia
                                </p>
                                <hr class="horizontal dark mt-0">
                            </div>
                            {{-- Link ke pckbr1 --}}
                            <div class="card-footer align-items-center pt-0 pb-2">
                                <div class="d-flex justify-content-center">
                                    <a href="{{ url('/pckbr1') }}" class="btn btn-primary btn-sm algn">
                                        <i class="fas fa-arrow-right"></i> Ke Menu Persetujuan Pengajuan Cuti
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- === TAB NAVIGATION untuk List sections === --}}
            {{-- Hanya 3 list table yang masuk tab: List Pengajuan Diproses, Daftar Ditolak, Token Aktif.
                Background putih hanya sampai batas menu (tab buttons), tidak full card width. --}}
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body p-0">
                            <ul class="nav nav-tabs" id="rekapListTabs" role="tablist" style="border-bottom: 1px solid #dee2e6;">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active py-3" id="tab-pengajuan-diproses" data-bs-toggle="tab" data-bs-target="#pane-pengajuan-diproses" type="button" role="tab" aria-selected="true">
                                        <i class="fas fa-list me-1"></i>Pengajuan Diproses
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link py-3" id="tab-pengajuan-ditolak" data-bs-toggle="tab" data-bs-target="#pane-pengajuan-ditolak" type="button" role="tab" aria-selected="false">
                                        <i class="fas fa-history me-1"></i>Pengajuan Ditolak
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link py-3" id="tab-token-aktif" data-bs-toggle="tab" data-bs-target="#pane-token-aktif" type="button" role="tab" aria-selected="false">
                                        <i class="fas fa-envelope me-1"></i>Token Email Aktif
                                        @if (isset($tokenCutiAktifList) && $tokenCutiAktifList->count() > 0)
                                            <span class="badge bg-danger ms-1">{{ $tokenCutiAktifList->count() }}</span>
                                        @endif
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content pt-0" id="rekapListTabsContent">
                                {{-- TAB 1: List Pengajuan Diproses --}}
                                <div class="tab-pane fade show active" id="pane-pengajuan-diproses" role="tabpanel" aria-labelledby="tab-pengajuan-diproses">

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="card border-dashed" id="list_pengajuan_to_reject">
                                                @php
                                                    $which = '-reject';
                                                @endphp
                                                <div class="px-3 pt-4">
                                                    <h5><strong>List Pengajuan yang Masih Diproses di Sisi
                                                            Atasan</strong></h5>
                                                    <hr class="horizontal dark mt-0">
                                                </div>
                                                <div class="pt-0">
                                                    {{-- Table with datatables to show all pengajuan based on periode dna department --}}
                                                    <div class="row px-4 py-2">
                                                        @foreach ($table_filter as $filter)
                                                            @if ($filter->type == 'enum')
                                                                <div class="col-md-6">
                                                                    {{-- display label alias on type field not hidden --}}
                                                                    @if ($filter->type != 'hidden')
                                                                        <label for="example-text-input" class="form-control-label">{{ $filter->alias }}</label>
                                                                    @endif
                                                                    <select id="{{ $filter->field }}-select{{ $which }}"
                                                                        class="form-select {{ $filter->class }}" name="{{ $filter->field }}">
                                                                        <option value=""></option>
                                                                        @if ($filter->query != '')
                                                                            @php
                                                                                $data_query = DB::select($filter->query);
                                                                            @endphp
                                                                            @foreach ($data_query as $q)
                                                                                @php
                                                                                    $sAsArray = array_values((array) $q);
                                                                                @endphp
                                                                                <option value="{{ $sAsArray[0] }}" {{ old($filter->field) == $sAsArray[0] ? 'selected' : '' }} where="{{ $filter->sub != '' ? $sAsArray[2] : '' }}">
                                                                                    {{ $sAsArray[0] }} - {{ $sAsArray[1] }}
                                                                                </option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>
                                                                    <p class='text-secondary text-xs pt-1 px-1'>
                                                                        {{ '*) Kosongkan untuk melihat semua' . $filter->field }}
                                                                    </p>
                                                                </div>

                                                                @if ($filter->sub != '')
                                                                    <script>
                                                                        $(document).ready(function () {
                                                                            let targetSelect = $('select[name="{{ $filter->field }}"]');
                                                                            let subSelect = $('select[name="{{ $filter->sub }}"]');

                                                                            targetSelect.find('option').hide();
                                                                            targetSelect.find('option[where="' + subSelect.val() + '"]').show();

                                                                            subSelect.change(function () {
                                                                                targetSelect.find('option').hide();
                                                                                targetSelect.find('option[where="' + $(this).val() + '"]').show();
                                                                            });
                                                                        });
                                                                    </script>
                                                                @endif
                                                            @endif
                                                        @endforeach
                                                        <div class="mt-3">
                                                            <label for="example-text-input" class="form-control-label">Pencarian Bebas</label>
                                                            <input type="text" class="form-control" placeholder="Cari sesuatu..."
                                                                id="searchInput{{ $which }}" name="search" value="{{ old('search') }}">
                                                        </div>
                                                        <div class="mt-3">
                                                            <button class="btn btn-primary me-3 mb-2 mt-2 d-flex align-items-center"
                                                                id="searchButton{{ $which }}">
                                                                <i class="fas fa-search me-1"></i>
                                                                <span class="font-weight-bold">Cari</span>
                                                                <div id="loading-spinner{{ $which }}"
                                                                    class="spinner-border spinner-border-sm text-light ms-2" role="status"
                                                                    style="display: none;">
                                                                    <span class="sr-only">Loading...</span>
                                                                </div>
                                                            </button>
                                                            <script>
                                                                $(document).ready(function () {
                                                                    $('#searchInput-reject').on('keypress', function (e) {
                                                                        if (e.which == 13) { // Enter key pressed
                                                                            $('#searchButton-reject').click(); // Trigger the button click event
                                                                        }
                                                                    });
                                                                });
                                                            </script>
                                                        </div>
                                                    </div>
                                                    <div class="row px-4 py-2">
                                                        @if (session()->has('message-below'))
                                                            <div class="alert alert-{{ session('class', 'info') }} alert-dismissible fade show"
                                                                role="alert">
                                                                {{ session('message-below') }}
                                                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                                            </div>
                                                        @endif
                                                        <div class="table-responsive">
                                                            <table id="dataTable{{ $which }}" class="table table-striped">
                                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                                    <tr>
                                                                        <th>No.</th>
                                                                        <th>Action</th>
                                                                        <th>ID Cuti</th>
                                                                        <th>NIK</th>
                                                                        <th>Nama Karyawan</th>
                                                                        <th>Departemen</th>
                                                                        <th>Alasan</th>
                                                                        <th>Jenis Cuti</th>
                                                                        <th>Tanggal Mulai</th>
                                                                        <th>Tanggal Selesai</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($table_detail as $index => $item)
                                                                        @php
                                                                            $encryptedId = encrypt($item->id);
                                                                        @endphp
                                                                        <tr id="row-{{ $item->id }}{{ $which }}">
                                                                            <td>{{ $index + 1 }}</td>
                                                                            <td class="text-sm font-weight-normal">
                                                                                <div class="btn-group">
                                                                                    <!-- Tombol utama -->
                                                                                    <button type="button" class="btn btn-sm btn-primary mb-0"
                                                                                        title="View Data"
                                                                                        onclick="window.location='{{ url($url_menu . '/show/' . $encryptedId) }}'">
                                                                                        <i class="fas fa-eye"></i> <span class="font-weight-bold">
                                                                                            View</span>
                                                                                    </button>
                                                                                </div>

                                                                                {{-- Tombol tolak --}}
                                                                                <button id="reject-button-{{ $item->id }}" type="button"
                                                                                    class="btn btn-sm btn-danger mb-0" title="Reject Data"
                                                                                    onclick="rejectData('{{ $encryptedId }}', '{{ $item->id }}', event)">
                                                                                    <i class="fas fa-times"></i>
                                                                                    <span class="font-weight-bold">Tolak</span>
                                                                                    <div id="loading-spinner-{{ $item->id }}{{ $which }}"
                                                                                        class="spinner-border spinner-border-sm text-light ms-2"
                                                                                        role="status" style="display: none;">
                                                                                    </div>
                                                                                </button>
                                                                            </td>
                                                                            <td>{{ $item->idcuti }}</td>
                                                                            <td>{{ $item->nik }}</td>
                                                                            <td>{{ $item->nama }}</td>
                                                                            <td>{{ $item->departemen }}</td>
                                                                            <td>{{ $item->alasan }}</td>
                                                                            <td>{{ $item->jenis_cuti }}</td>
                                                                            <td class="text-end">
                                                                                {{ \Carbon\Carbon::parse($item->tanggal_mulai)->format('d/m/Y') }}
                                                                            </td>
                                                                            <td class="text-end">
                                                                                {{ \Carbon\Carbon::parse($item->tanggal_berakhir)->format('d/m/Y') }}
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                    <div id="pagination-container{{ $which }}" class="d-flex justify-content-between mt-4"
                                                        style="overflow-x: auto;">
                                                        @include('rekap.rpcm12.partials.pagination')
                                                    </div>
                                                </div>
                                            </div>
                                            <script>
                                                $(document).ready(function () {
                                                    $('#dataTable-reject').DataTable({
                                                        "autoWidth": false,
                                                        "responsive": true, // Tambahkan ini agar tabel tetap fleksibel
                                                        paging: false, // Menonaktifkan pagination
                                                        searching: false, // Menonaktifkan search/filter
                                                        info: false, // Menonaktifkan informasi "Showing x of y"
                                                    });
                                                });
                                            </script>
                                        </div>
                                    </div>

                                {{-- CLOSE TAB 1 + OPEN TAB 2: Daftar Pengajuan Ditolak --}}
                                </div>{{-- /.tab-pane #pane-pengajuan-diproses --}}
                                <div class="tab-pane fade" id="pane-pengajuan-ditolak" role="tabpanel" aria-labelledby="tab-pengajuan-ditolak">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div>
                                                @php
                                                    $which = '-undoReject';
                                                @endphp
                                                <div class="px-3 pt-4">
                                                    <h5><strong>Daftar Pengajuan yang Baru Saja Ditolak
                                                            (Histories)</strong></h5>
                                                    <hr class="horizontal dark mt-0">
                                                </div>
                                                <div class="pt-0">
                                                    {{-- Table with datatables to show all pengajuan based on periode dna department --}}
                                                    <div class="row px-4 py-2">
                                                        @foreach ($table_filter as $filter)
                                                            @if ($filter->type == 'enum')
                                                                <div class="col-md-6">
                                                                    {{-- display label alias on type field not hidden --}}
                                                                    @if ($filter->type != 'hidden')
                                                                        <label for="example-text-input" class="form-control-label">{{ $filter->alias }}</label>
                                                                    @endif
                                                                    <select id="{{ $filter->field }}-select{{ $which }}"
                                                                        class="form-select {{ $filter->class }}" name="{{ $filter->field }}">
                                                                        <option value=""></option>
                                                                        @if ($filter->query != '')
                                                                            @php
                                                                                $data_query = DB::select($filter->query);
                                                                            @endphp
                                                                            @foreach ($data_query as $q)
                                                                                @php
                                                                                    $sAsArray = array_values((array) $q);
                                                                                @endphp
                                                                                <option value="{{ $sAsArray[0] }}" {{ old($filter->field) == $sAsArray[0] ? 'selected' : '' }} where="{{ $filter->sub != '' ? $sAsArray[2] : '' }}">
                                                                                    {{ $sAsArray[0] }} - {{ $sAsArray[1] }}
                                                                                </option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>
                                                                    <p class='text-secondary text-xs pt-1 px-1'>
                                                                        {{ '*) Kosongkan untuk melihat semua' . $filter->field }}
                                                                    </p>
                                                                </div>

                                                                @if ($filter->sub != '')
                                                                    <script>
                                                                        $(document).ready(function () {
                                                                            let targetSelect = $('select[name="{{ $filter->field }}"]');
                                                                            let subSelect = $('select[name="{{ $filter->sub }}"]');

                                                                            targetSelect.find('option').hide();
                                                                            targetSelect.find('option[where="' + subSelect.val() + '"]').show();

                                                                            subSelect.change(function () {
                                                                                targetSelect.find('option').hide();
                                                                                targetSelect.find('option[where="' + $(this).val() + '"]').show();
                                                                            });
                                                                        });
                                                                    </script>
                                                                @endif
                                                            @endif
                                                        @endforeach
                                                        <div class="mt-3">
                                                            <label for="example-text-input" class="form-control-label">Pencarian Bebas</label>
                                                            <input type="text" class="form-control" placeholder="Cari sesuatu..."
                                                                id="searchInput{{ $which }}" name="search" value="{{ old('search') }}">
                                                        </div>
                                                        <div class="mt-3">
                                                            <div class="d-flex mb-2 mt-2">
                                                                <button class="btn btn-primary me-3" id="searchButton{{ $which }}">
                                                                    <i class="fas fa-search me-1"></i>
                                                                    <span class="font-weight-bold">Cari</span>
                                                                    <div id="loading-spinner{{ $which }}"
                                                                        class="spinner-border spinner-border-sm text-light ms-2" role="status"
                                                                        style="display: none;">
                                                                        <span class="sr-only">Loading...</span>
                                                                    </div>
                                                                </button>



                                                                <button class="btn btn-danger" id="clearHistoriesButton"
                                                                    onclick="clearHistories(event, '{{ $which }}')">
                                                                    <i class="fas fa-trash me-1"></i>
                                                                    <span class="font-weight-bold">Bersihkan Histories</span>
                                                                    <div id="loading-spinner{{ $which }}"
                                                                        class="spinner-border spinner-border-sm text-light ms-2" role="status"
                                                                        style="display: none;">
                                                                        <span class="sr-only">Loading...</span>
                                                                    </div>
                                                                </button>
                                                            </div>
                                                            <script>
                                                                $(document).ready(function () {
                                                                    $('#searchInput-undoReject').on('keypress', function (e) {
                                                                        if (e.which == 13) { // Enter key pressed
                                                                            $('#searchButton-undoReject').click(); // Trigger the button click event
                                                                        }
                                                                    });
                                                                });
                                                            </script>
                                                        </div>
                                                    </div>
                                                    <div class="row px-4 py-2">
                                                        @if (session()->has('message-below'))
                                                            <div class="alert alert-{{ session('class', 'info') }} alert-dismissible fade show"
                                                                role="alert">
                                                                {{ session('message-below') }}
                                                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                                            </div>
                                                        @endif
                                                        <div class="d-flex">
                                                            <button onclick="exportToExcel(event, '{{ $which }}')"
                                                                class="btn btn-secondary btn-sm mb-3 me-2">
                                                                <i class="fas fa-file-excel me-1 text-lg text-success"></i>
                                                                <span class="font-weight-bold">Excel</span>
                                                            </button>
                                                            {{-- <button class="btn btn-secondary btn-sm mb-3">
                                                                <i class="fas fa-file-pdf me-1 text-lg text-danger"></i>
                                                                <span class="font-weight-bold">PDF</span>
                                                            </button> --}}
                                                        </div>
                                                        <p>*) Excel akan menghiraukan filter yang ada (export semua data)</p>
                                                        <div class="table-responsive">
                                                            <table id="dataTable{{ $which }}" class="table table-striped">
                                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                                    <tr>
                                                                        <th>No.</th>
                                                                        <th>Action</th>
                                                                        <th>ID Cuti</th>
                                                                        <th>NIK</th>
                                                                        <th>Nama Karyawan</th>
                                                                        <th>Departemen</th>
                                                                        <th>Alasan</th>
                                                                        <th>Jenis Cuti</th>
                                                                        <th>Tanggal Mulai</th>
                                                                        <th>Tanggal Selesai</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($table_history_reject as $index => $item)
                                                                        @php
                                                                            $encryptedId = encrypt($item->id);
                                                                        @endphp
                                                                        <tr id="row-{{ $item->id }}{{ $which }}">
                                                                            <td>{{ $index + 1 }}</td>
                                                                            <td class="text-sm font-weight-normal">
                                                                                <div class="btn-group">
                                                                                    <!-- Tombol utama -->
                                                                                    <button type="button" class="btn btn-sm btn-primary mb-0"
                                                                                        title="View Data"
                                                                                        onclick="window.location='{{ url($url_menu . '/show/' . $encryptedId) }}'">
                                                                                        <i class="fas fa-eye"></i> <span class="font-weight-bold">
                                                                                            View</span>
                                                                                    </button>
                                                                                </div>

                                                                                {{-- Tombol undo penolakan --}}
                                                                                <button id="undoReject-button-{{ $item->id }}" type="button"
                                                                                    class="btn btn-sm btn-warning mb-0" title="Undo Reject Data"
                                                                                    onclick="undoRejectData('{{ $encryptedId }}', '{{ $item->id }}', event)">
                                                                                    <i class="fas fa-undo"></i>
                                                                                    <span class="font-weight-bold">Undo Penolakan</span>
                                                                                    <div id="loading-spinner-{{ $item->id }}{{ $which }}"
                                                                                        class="spinner-border spinner-border-sm text-light ms-2"
                                                                                        role="status" style="display: none;">
                                                                                    </div>
                                                                                </button>
                                                                            </td>
                                                                            <td>{{ $item->idcuti }}</td>
                                                                            <td>{{ $item->nik }}</td>
                                                                            <td>{{ $item->nama }}</td>
                                                                            <td>{{ $item->departemen }}</td>
                                                                            <td>{{ $item->alasan }}</td>
                                                                            <td>{{ $item->jenis_cuti }}</td>
                                                                            <td class="text-end">
                                                                                {{ \Carbon\Carbon::parse($item->tanggal_mulai)->format('d/m/Y') }}
                                                                            </td>
                                                                            <td class="text-end">
                                                                                {{ \Carbon\Carbon::parse($item->tanggal_berakhir)->format('d/m/Y') }}
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                    <div id="pagination-container{{ $which }}" class="d-flex justify-content-between mt-4"
                                                        style="overflow-x: auto;">
                                                        @include('rekap.rpcm12.partials.pagination')
                                                    </div>
                                                </div>
                                            </div>
                                            <script>
                                                $(document).ready(function () {
                                                    $('#dataTable-undoReject').DataTable({
                                                        "autoWidth": false,
                                                        "responsive": true, // Tambahkan ini agar tabel tetap fleksibel
                                                        paging: false, // Menonaktifkan pagination
                                                        searching: false, // Menonaktifkan search/filter
                                                        info: false, // Menonaktifkan informasi "Showing x of y"
                                                    });
                                                });
                                            </script>
                                        </div>
                                    </div>

                                {{-- CLOSE TAB 2 + OPEN TAB 3: List Token Email Aktif --}}
                                </div>{{-- /.tab-pane #pane-pengajuan-ditolak --}}
                                <div class="tab-pane fade" id="pane-token-aktif" role="tabpanel" aria-labelledby="tab-token-aktif">

            {{-- === LIST TOKEN EMAIL CUTI AKTIF === --}}
            <div class="row">
                <div class="col-md-12">
                    <div>
                        @php
                            $which = '-tokenAktif';
                        @endphp
                        <div class="px-3 pt-4">
                            <h5><strong>List Token Email Cuti Aktif</strong></h5>
                            <p class="text-muted text-sm mb-0 mt-1">
                                <i class="fas fa-info-circle me-1"></i>
                                Token email aktif yang belum digunakan. Karyawan belum submit pengajuan cuti via link email.
                                Tutup periode akan diblokir selama masih ada token aktif.
                            </p>
                            <hr class="horizontal dark mt-2">
                        </div>
                        <div class="pt-0">
                            {{-- Filter form: Periode + Departemen + Pencarian Bebas --}}
                            {{-- Gunakan name unik (token_periode, token_departemen) untuk hindari
                                konflik dgn select di tab lain yang juga pakai name="periode"/"departemen". --}}
                            <div class="row px-4 py-2">
                                @foreach ($table_filter as $filter)
                                    @if ($filter->type == 'enum')
                                        @if ($filter->field == 'periode' || $filter->field == 'departemen')
                                            <div class="col-md-6">
                                                @if ($filter->type != 'hidden')
                                                    <label for="example-text-input" class="form-control-label">{{ $filter->alias }}</label>
                                                @endif
                                                <select id="{{ $filter->field }}-select{{ $which }}"
                                                    class="form-select {{ $filter->class }}" name="token_{{ $filter->field }}">
                                                    <option value=""></option>
                                                    @if ($filter->query != '')
                                                        @php
                                                            $data_query = DB::select($filter->query);
                                                        @endphp
                                                        @foreach ($data_query as $q)
                                                            @php
                                                                $sAsArray = array_values((array) $q);
                                                            @endphp
                                                            <option value="{{ $sAsArray[0] }}" where="{{ $filter->sub != '' ? $sAsArray[2] : '' }}">
                                                                {{ $sAsArray[0] }} - {{ $sAsArray[1] }}
                                                            </option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                                <p class='text-secondary text-xs pt-1 px-1'>
                                                    {{ '*) Kosongkan untuk melihat semua' }}
                                                </p>
                                            </div>
                                        @endif
                                    @endif
                                @endforeach
                                <div class="mt-3">
                                    <label for="example-text-input" class="form-control-label">Pencarian Bebas</label>
                                    <input type="text" class="form-control" placeholder="Cari sesuatu..."
                                        id="searchInput{{ $which }}" name="search" value="{{ old('search') }}">
                                </div>
                                <div class="mt-3">
                                    <button class="btn btn-primary me-3 mb-2 mt-2 d-flex align-items-center"
                                        id="searchButton{{ $which }}">
                                        <i class="fas fa-search me-1"></i>
                                        <span class="font-weight-bold">Cari</span>
                                        <div id="loading-spinner{{ $which }}"
                                            class="spinner-border spinner-border-sm text-light ms-2" role="status"
                                            style="display: none;">
                                            <span class="sr-only">Loading...</span>
                                        </div>
                                    </button>
                                </div>
                            </div>

                            {{-- Token table (rendered via AJAX) --}}
                            <div id="pagination-container{{ $which }}" class="card-body d-flex justify-content-between"
                                style="overflow-x: auto;">
                                <div id="loading{{ $which }}" style="display: none;" class="text-center py-4">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                    <p class="mt-2 text-muted">Memuat data...</p>
                                </div>
                                <div id="table-container{{ $which }}" style="width: 100%;">
                                    @if (isset($tokenCutiAktifList) && $tokenCutiAktifList->count() > 0)
                                        <div class="table-responsive">
                                            <table class="table table-sm table-hover align-middle" id="tableTokenCutiAktif">
                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                    <tr>
                                                        <th width="50" class="text-center">#</th>
                                                        <th>NIK</th>
                                                        <th>Nama Karyawan</th>
                                                        <th>Departemen</th>
                                                        <th>Email</th>
                                                        <th>Tanggal Kirim</th>
                                                        <th>Dikirim Oleh</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="table-body{{ $which }}">
                                                    @foreach ($tokenCutiAktifList as $idx => $token)
                                                        <tr>
                                                            <td class="text-center text-muted">{{ $idx + 1 }}</td>
                                                            <td class="font-weight-bold">{{ $token->nik }}</td>
                                                            <td>{{ $token->nama_karyawan ?? '-' }}</td>
                                                            <td>{{ $token->departemen ?? '-' }}</td>
                                                            <td>{{ $token->email ?? '-' }}</td>
                                                            <td>{{ $token->tanggal_kirim ? \Carbon\Carbon::parse($token->tanggal_kirim)->format('d/m/Y H:i') : '-' }}</td>
                                                            <td>{{ $token->dikirim_oleh ?? '-' }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @else
                                        <div class="text-center py-4 text-muted">
                                            <i class="fas fa-check-circle fa-3x mb-3 text-success opacity-50"></i>
                                            <p class="mb-0">Tidak ada token email cuti yang aktif.</p>
                                        </div>
                                    @endif
                                </div>
                                <div id="pagination-links{{ $which }}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Client-side search/filter untuk Token Email Aktif --}}
            <script>
                $(document).ready(function () {
                    // Indonesian month names → number mapping
                    const monthMap = {
                        'januari': '01', 'februari': '02', 'maret': '03', 'april': '04',
                        'mei': '05', 'juni': '06', 'juli': '07', 'agustus': '08',
                        'september': '09', 'oktober': '10', 'november': '11', 'desember': '12'
                    };

                    // Search/filter handler untuk Token Email Aktif
                    function filterTokenTable() {
                        // Gunakan option TEXT (bukan value) untuk dapat nama periode
                        const periodeText = ($('#periode-select-tokenAktif option:selected').text() || '').trim();
                        const searchDepartemen = ($('#departemen-select-tokenAktif option:selected').text() || '').trim();
                        const searchText = ($('#searchInput-tokenAktif').val() || '').toLowerCase().trim();

                        // Parse periode text → month number + year
                        // Contoh: "September 2026 - Periode September 2026" → month="09", year="2026"
                        let matchMonth = '';
                        let matchYear = '';
                        if (periodeText) {
                            for (const [monthName, num] of Object.entries(monthMap)) {
                                if (periodeText.toLowerCase().includes(monthName)) {
                                    matchMonth = num;
                                    break;
                                }
                            }
                            const yearMatch = periodeText.match(/(\d{4})/);
                            if (yearMatch) matchYear = yearMatch[1];
                        }

                        let visibleCount = 0;
                        $('#tableTokenCutiAktif tbody tr').each(function () {
                            const $row = $(this);
                            const nik = ($row.find('td:eq(1)').text() || '').toLowerCase();
                            const nama = ($row.find('td:eq(2)').text() || '').toLowerCase();
                            const departemen = ($row.find('td:eq(3)').text() || '').toLowerCase();
                            const email = ($row.find('td:eq(4)').text() || '').toLowerCase();
                            const tglKirim = ($row.find('td:eq(5)').text() || '').toLowerCase();
                            const dikirimOleh = ($row.find('td:eq(6)').text() || '').toLowerCase();

                            // Filter periode: match month+year dari tgl_kirim (format dd/mm/yyyy)
                            // Contoh: tglKirim="24/09/2026 15:08", matchMonth="09", matchYear="2026"
                            // → check tglKirim.includes("/09/2026") → true
                            let matchPeriode = true;
                            if (periodeText) {
                                if (matchMonth && matchYear) {
                                    matchPeriode = tglKirim.includes('/' + matchMonth + '/' + matchYear);
                                } else if (matchMonth) {
                                    matchPeriode = tglKirim.includes('/' + matchMonth + '/');
                                } else if (matchYear) {
                                    matchPeriode = tglKirim.includes(matchYear);
                                } else {
                                    // Fallback: tidak ada month/year di periode text, skip filter
                                    matchPeriode = true;
                                }
                            }

                            // Filter departemen: match departemen text (case-insensitive)
                            const matchDepartemen = !searchDepartemen || departemen.includes(searchDepartemen.toLowerCase());
                            // Filter search text: cari di semua kolom
                            const allText = nik + ' ' + nama + ' ' + departemen + ' ' + email + ' ' + tglKirim + ' ' + dikirimOleh;
                            const matchSearch = !searchText || allText.includes(searchText);

                            if (matchPeriode && matchDepartemen && matchSearch) {
                                $row.show();
                                visibleCount++;
                            } else {
                                $row.hide();
                            }
                        });

                        // Update nomor urut
                        let no = 1;
                        $('#tableTokenCutiAktif tbody tr:visible').each(function () {
                            $(this).find('td:eq(0)').text(no++);
                        });

                        // Tampilkan pesan jika tidak ada hasil
                        if (visibleCount === 0) {
                            if ($('#tokenNoResult').length === 0) {
                                $('#tableTokenCutiAktif').after('<div id="tokenNoResult" class="text-center py-4 text-muted"><i class="fas fa-search fa-3x mb-3 opacity-50"></i><p class="mb-0">Tidak ada data yang cocok dengan filter.</p></div>');
                            }
                        } else {
                            $('#tokenNoResult').remove();
                        }
                    }

                    // Trigger search on button click
                    $('#searchButton-tokenAktif').on('click', function (e) {
                        e.preventDefault();
                        const $btn = $(this);
                        const $spinner = $('#loading-spinner-tokenAktif');
                        $btn.prop('disabled', true);
                        $spinner.show();
                        setTimeout(function () {
                            filterTokenTable();
                            $spinner.hide();
                            $btn.prop('disabled', false);
                        }, 300);
                    });

                    // Trigger search on Enter key
                    $('#searchInput-tokenAktif').on('keypress', function (e) {
                        if (e.which == 13) {
                            e.preventDefault();
                            $('#searchButton-tokenAktif').click();
                        }
                    });

                    // Trigger filter on periode/departemen change
                    $('#periode-select-tokenAktif, #departemen-select-tokenAktif').on('change', function () {
                        filterTokenTable();
                    });
                });
            </script>

                                {{-- CLOSE TAB 3 + CLOSE tab-content + CLOSE wrapper --}}
                                </div>{{-- /.tab-pane #pane-token-aktif --}}
                            </div>{{-- /.tab-content --}}
                        {{-- (no card-body / card to close — pakai plain div) --}}
                </div>{{-- /.col-md-12 --}}
                    </div>
            </div>{{-- /.row --}}

        </div>
        {{-- check flag js on dmenu --}}
        @if ($jsmenu == '1')
            @if (view()->exists("js.{$dmenu}"))
                @push('addjs')
                    {{-- file js in folder (resources/views/js) --}}
                    @include('js.' . $dmenu);
                @endpush
            @else
                @push('addjs')
                    <script>
                        Swal.fire({
                            title: 'JS Not Found!!',
                            text: 'Please Create File JS',
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    </script>
                @endpush
            @endif
        @endif

        <script>
            // Global variables untuk tracking progress
            let currentProcessId = null;
            let progressCheckInterval = null;
            let tabId = sessionStorage.getItem('rekap_tab_id');

            // Generate unique tab ID jika belum ada
            if (!tabId) {
                tabId = 'tab_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                sessionStorage.setItem('rekap_tab_id', tabId);
            }

            // Untuk reset progress
            function resetProgress() {
                return fetch("{{ url('/reset-progress') }}?tab_id=" + tabId)
                    .then(response => response.json())
                    .then(data => {
                        currentProcessId = data.process_id;
                        return data;
                    });
            }

            // Untuk finish progress
            function finishProgress() {
                const url = currentProcessId ?
                    "{{ url('/finish-progress') }}?process_id=" + currentProcessId :
                    "{{ url('/finish-progress') }}?tab_id=" + tabId;

                return fetch(url)
                    .then(response => response.json());
            }

            // Untuk cek progress
            function checkProgress() {
                // Progress bar blocked
                document.getElementById('progress-bar').style.display = "block";

                const url = currentProcessId ?
                    "{{ url('/check-progress') }}?process_id=" + currentProcessId :
                    "{{ url('/check-progress') }}?tab_id=" + tabId;

                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        const progress = data.progress_loading_bar_query_rekap;
                        updateLoadingBar(progress);

                        if (progress < 100) {
                            // Gunakan setTimeout untuk polling berikutnya
                            progressCheckInterval = setTimeout(checkProgress, 500);
                        } else {
                            // Clear interval jika sudah 100%
                            if (progressCheckInterval) {
                                clearTimeout(progressCheckInterval);
                                progressCheckInterval = null;
                            }
                            // Tampilkan data
                            var form = document.getElementById('{{ $dmenu }}-form');
                            var flagInput = document.createElement('input');
                            flagInput.type = 'hidden';
                            flagInput.name = '_ajax_generate';
                            flagInput.value = '1';
                            form.appendChild(flagInput);
                            form.submit();
                        }
                    })
                    .catch(error => {
                        console.error('Error checking progress:', error);
                        // Clear interval on error
                        if (progressCheckInterval) {
                            clearTimeout(progressCheckInterval);
                            progressCheckInterval = null;
                        }
                    });
            }

            // Untuk loading bar
            function updateLoadingBar(progress) {
                const loadingBar = document.getElementById('loading-bar');
                // Menggunakan toFixed(2) untuk membatasi angka desimal menjadi 2
                const formattedProgress = (progress).toFixed(2);

                // Memperbarui lebar dan teks loading bar
                loadingBar.style.width = formattedProgress + '%';
                loadingBar.innerText = formattedProgress + '%';
            }

            // Cleanup function untuk dipanggil saat halaman di-unload
            window.addEventListener('beforeunload', function () {
                if (progressCheckInterval) {
                    clearTimeout(progressCheckInterval);
                }
            });
        </script>

        <script>
            $("#scrollButton").click(function () {
                $("html, body").animate({
                    scrollTop: $("#list_pengajuan_to_reject").offset().top
                }, 100);
            });
        </script>

        <script>
            function submitForm(event) {
                event.preventDefault(); // Mencegah form langsung terkirim

                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan: Aksi Penolakan Tidak Dapat Dikembalikan',
                    html: 'Aksi ini akan <span class="text-danger fw-bold">menolak semua permohonan cuti yang sedang berlangsung pada periode yang dipilih</span> di sisi atasan (permohonan yang belum di-approve oleh atasan).',
                    showCancelButton: true,
                    // bootstrap red color
                    confirmButtonColor: '#F5365C',
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Kirim form manually
                        document.getElementById("{{ $dmenu }}-form-reject-all").submit();
                    }
                });
            }

            function queryRekapFilterCuti(event, that) {
                event.preventDefault();

                const selectedPeriode = document.getElementById('hidden-periode-value') ? document.getElementById('hidden-periode-value').value : '';
                const periodsIsactive = @json($periode);

                // Validasi: Cek apakah periode sudah dipilih
                if (!selectedPeriode || selectedPeriode === 'null') {
                    Swal.fire({
                        icon: 'info',
                        title: 'Periode Belum Dipilih',
                        text: 'Silakan pilih bulan/periode terlebih dahulu untuk melihat rekap cuti.',
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // Validasi: Cek apakah periode masih aktif (hanya untuk tombol view)
                const period = periodsIsactive.find(p => p.id === parseInt(selectedPeriode));
                if (period && period.isactive == 1 && that.name == 'view') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Periode Masih Terbuka',
                        html: '<span class="text-danger fw-bold">Periode masih aktif/terbuka.</span> Anda harus membuat rekap terlebih dahulu dengan tombol <span class="text-primary fw-bold">"Buat dan Lihat Rekap Cuti"</span> untuk menutup periode dan melihat data rekap.',
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // Change the action form to different url based on event
                if (that.name == 'query') {
                    document.getElementById('{{ $dmenu }}-form').action = "{{ URL::to($url_menu) }}";

                    // Swal fire to show alert before submiting
                    Swal.fire({
                        icon: 'info',
                        title: 'Informasi: Aksi Pembuatan dan Penampilan Data Rekap Surat Cuti',
                        html: 'Aksi ini akan <span class="text-primary fw-bold">membuat lalu menampilkan data rekap surat cuti</span> sesuai dengan periode dan departemen yang dipilih. Aksi ini akan memerlukan waktu lama jika anda belum melakukan rekap pada periode yang dipilih.',
                        showCancelButton: true,
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'OK',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            event.preventDefault();

                            let periode = document.getElementById('hidden-periode-value') ? document.getElementById('hidden-periode-value').value : '';

                            let button = document.getElementById('filterButton');

                            // Adding spinner to button when request is submited
                            button.innerHTML =
                                '<i class="fas fa-spinner fa-spin me-1"></i> Memuat... (Tunggu hingga selesai)';
                            button.disabled = true;

                            // Mulai reset progress lalu cek progress
                            resetProgress().then(function (resetData) {
                                // Simpan process ID dari response reset
                                currentProcessId = resetData.process_id;

                                // Kirim AJAX request DULU, baru start checkProgress saat berhasil
                                $.ajax({
                                    url: "{{ route('rpcm12.query-rekap-cuti') }}",
                                    method: 'POST',
                                    data: {
                                        periode: periode,
                                        tab_id: tabId
                                    },
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                    success: function (response) {
                                        if (response.status === 'success') {
                                            // Update process ID dari response
                                            if (response.process_id) {
                                                currentProcessId = response.process_id;
                                            }
                                            // Baru mulai check progress setelah server konfirmasi generate dimulai
                                            checkProgress();
                                        }
                                    },
                                    error: function (xhr, status, error) {
                                        // Clear progress checking interval
                                        if (progressCheckInterval) {
                                            clearTimeout(progressCheckInterval);
                                            progressCheckInterval = null;
                                        }

                                        // Tindakan jika ada error
                                        let errorMessage = 'Terjadi kesalahan saat memproses rekap.';
                                        if (xhr.responseJSON && xhr.responseJSON.error) {
                                            errorMessage = xhr.responseJSON.error;
                                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                                            errorMessage = xhr.responseJSON.message;
                                        }

                                        Swal.fire({
                                            icon: 'error',
                                            title: 'Masalah Umum',
                                            text: errorMessage,
                                            confirmButtonColor: '#028284',
                                            confirmButtonText: 'OK'
                                        });

                                        // Mengembalikan status progress bar dan tombol setelah permintaan selesai
                                        document.getElementById('progress-bar').style.display = "none";
                                        var selectedPeriode = document.getElementById('hidden-periode-value') ? document.getElementById('hidden-periode-value').value : '';
                                        var periodsInfo = @json($periode);
                                        var periodInfo = periodsInfo.find(function(p) { return p.id === parseInt(selectedPeriode); });
                                        if (periodInfo && periodInfo.rekap_exists) {
                                            button.innerHTML = '<i class="fas fa-plus me-1"></i><span class="font-weight-bold" id="filterButtonText">Update Rekap Surat Cuti</span>';
                                            button.classList.remove('btn-primary');
                                            button.classList.add('btn-warning');
                                        } else {
                                            button.innerHTML = '<i class="fas fa-plus me-1"></i><span class="font-weight-bold" id="filterButtonText">Buat Rekap Surat Cuti</span>';
                                            button.classList.remove('btn-warning');
                                            button.classList.add('btn-primary');
                                        }
                                        button.disabled = false;

                                        // Reset process ID
                                        currentProcessId = null;
                                    }
                                });
                            }).catch(function (error) {
                                console.error('Error resetting progress:', error);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal Reset Progress',
                                    text: 'Terjadi kesalahan saat mereset progress bar',
                                    confirmButtonColor: '#028284',
                                    confirmButtonText: 'OK'
                                });
                                var selectedPeriode2 = document.getElementById('hidden-periode-value') ? document.getElementById('hidden-periode-value').value : '';
                                var periodsInfo2 = @json($periode);
                                var periodInfo2 = periodsInfo2.find(function(p) { return p.id === parseInt(selectedPeriode2); });
                                if (periodInfo2 && periodInfo2.rekap_exists) {
                                    button.innerHTML = '<i class="fas fa-plus me-1"></i><span class="font-weight-bold" id="filterButtonText">Update Rekap Surat Cuti</span>';
                                    button.classList.remove('btn-primary');
                                    button.classList.add('btn-warning');
                                } else {
                                    button.innerHTML = '<i class="fas fa-plus me-1"></i><span class="font-weight-bold" id="filterButtonText">Buat Rekap Surat Cuti</span>';
                                    button.classList.remove('btn-warning');
                                    button.classList.add('btn-primary');
                                }
                                button.disabled = false;
                            });
                        }
                    });
                } else if (that.name == 'view') {
                    // Lihat Rekap — submit form dengan hidden periode
                    document.getElementById('{{ $dmenu }}-form').action = "{{ URL::to($url_menu) }}";
                    document.getElementById('{{ $dmenu }}-form').submit();
                }
            }
        </script>

        {{-- For closing / opening period (Tutup / Buka Periode) --}}
        <script>
            /**
             * Tombol Tutup/Buka Periode.
             *
             * idPeriode tidak lagi diterima dari parameter tombol (bug lama:
             * onclick hanya mengirim `event` sehingga idPeriode selalu undefined
             * dan tombol selalu gagal). idPeriode dibaca dari hidden input yang
             * diisi oleh selectPeriode().
             *
             * Aturan replikasi master (Mspp12Controller::destroy):
             *   - BUKA (aktifkan): tidak boleh jika ada periode setelahnya
             *     (mulai > selected.mulai) yang masih TERTUTUP (isactive = 0).
             *   - TUTUP (nonaktifkan): tidak boleh jika ada periode sebelumnya
             *     (mulai < selected.mulai) yang masih TERBUKA (isactive = 1).
             *
             * Validasi sisi klien memberi feedback instan via Sweet Alert.
             * Server tetap menjadi sumber kebenaran (mem-flash errorplus/success
             * yang juga ditampilkan via Sweet Alert).
             */
            function closeLeavePeriod(event) {
                if (event) event.preventDefault(); // Cegah submit langsung

                // 1. Ambil idPeriode dari hidden input (diisi oleh selectPeriode)
                var hiddenInput = document.getElementById('hidden-periode-value');
                var idPeriode = hiddenInput ? hiddenInput.value : '';

                if (!idPeriode || idPeriode === '0' || idPeriode === '') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Periode Belum Dipilih',
                        text: 'Silakan pilih periode terlebih dahulu melalui tombol "Pilih Periode" sebelum menutup / membuka periode.',
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // 2. Deteksi aksi dari state tombol saat ini
                //    btn-danger  + "Tutup Periode" -> aksi TUTUP (nonaktifkan)
                //    btn-success + "Buka Periode" -> aksi BUKA (aktifkan)
                var closeButton = document.getElementById('closeButton');
                var isCloseAction = false;
                if (closeButton) {
                    isCloseAction = closeButton.classList.contains('btn-danger');
                }
                var actionVerb = isCloseAction ? 'menutup' : 'membuka';
                var actionNoun = isCloseAction ? 'penutupan' : 'pembukaan';

                // 3. Validasi aturan master (replikasi sisi klien)
                var rows = document.querySelectorAll('#tbodyPilihPeriode tr');
                var selectedRow = null;
                var allPeriode = [];
                rows.forEach(function(row) {
                    var pid = row.getAttribute('data-id');
                    var pMulai = row.getAttribute('data-mulai');
                    var pActive = String(row.getAttribute('data-isactive'));
                    var pNama = row.querySelector('td:nth-child(2)') ? row.querySelector('td:nth-child(2)').textContent.trim() : '';
                    var obj = { id: pid, mulai: pMulai, isactive: pActive, nama: pNama };
                    allPeriode.push(obj);
                    if (String(pid) === String(idPeriode)) selectedRow = obj;
                });

                if (!selectedRow) {
                    // Fallback: tetap submit, biarkan server menangani
                    document.getElementById('form-close-periode').submit();
                    return;
                }

                // Aturan master:
                //  BUKA -> blokir jika ada periode setelahnya (mulai >) yg TERTUTUP (isactive='0')
                //  TUTUP -> blokir jika ada periode sebelumnya (mulai <) yg TERBUKA (isactive='1')
                if (!isCloseAction) {
                    // Aksi BUKA
                    var blocker = null;
                    for (var i = 0; i < allPeriode.length; i++) {
                        var p = allPeriode[i];
                        if (p.id === selectedRow.id) continue;
                        if (p.mulai > selectedRow.mulai && String(p.isactive) === '0') {
                            blocker = p;
                            break;
                        }
                    }
                    if (blocker) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Aturan Periode Tidak Terpenuhi',
                            html: 'Periode <strong>' + escapeHtml(selectedRow.nama) +
                                '</strong> tidak dapat dibuka karena terdapat periode setelahnya (<strong>' +
                                escapeHtml(blocker.nama) + '</strong>) yang masih tertutup. Buka/tutup periode harus berurutan.',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return;
                    }
                } else {
                    // Aksi TUTUP
                    var blocker2 = null;
                    for (var j = 0; j < allPeriode.length; j++) {
                        var q = allPeriode[j];
                        if (q.id === selectedRow.id) continue;
                        if (q.mulai < selectedRow.mulai && String(q.isactive) === '1') {
                            blocker2 = q;
                            break;
                        }
                    }
                    if (blocker2) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Aturan Periode Tidak Terpenuhi',
                            html: 'Periode <strong>' + escapeHtml(selectedRow.nama) +
                                '</strong> tidak dapat ditutup karena terdapat periode sebelumnya (<strong>' +
                                escapeHtml(blocker2.nama) + '</strong>) yang masih terbuka. Buka/tutup periode harus berurutan.',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return;
                    }
                }

                // 4. Konfirmasi Sweet Alert, lalu submit form
                var confirmHtml = 'Aksi ini akan ' +
                    '<span class="text-' + (isCloseAction ? 'danger' : 'primary') + ' fw-bold">' + actionVerb + ' periode permohonan cuti</span> ' +
                    '<strong>(' + escapeHtml(selectedRow.nama) + ')</strong>. ';
                if (isCloseAction) {
                    confirmHtml += 'Setelah ditutup, <span class="text-primary fw-bold">tidak ada lagi pengajuan cuti yang dapat dilakukan pada periode tersebut</span>.';
                } else {
                    confirmHtml += 'Setelah dibuka, <span class="text-primary fw-bold">pengajuan cuti dapat dilakukan kembali pada periode tersebut</span>.';
                }

                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan: Aksi ' + actionNoun.charAt(0).toUpperCase() + actionNoun.slice(1) + ' Periode',
                    html: confirmHtml,
                    showCancelButton: true,
                    confirmButtonColor: '#028284',
                    cancelButtonText: 'Batal',
                    confirmButtonText: 'Ya, ' + actionVerb,
                    allowOutsideClick: false,
                    showLoaderOnConfirm: true,
                    preConfirm: function () {
                        return new Promise(function (resolve) {
                            document.getElementById('form-close-periode').submit();
                            // form submit akan navigasi penuh; beri jeda agar loader terlihat
                            setTimeout(resolve, 800);
                        });
                    }
                });
            }

            // Helper kecil untuk escape HTML agar nama periode aman dirender
            function escapeHtml(str) {
                if (str === null || str === undefined) return '';
                return String(str)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }
        </script>

        {{-- Ajax for exporting histories --}}
        <script>
            function exportToExcel(event, which) {
                event.preventDefault();

                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: '{{ route('rpcm12.history_penolakan.excel.export') }}',
                        method: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {
                            var fileUrl = response.fileUrl;
                            var link = document.createElement('a');
                            link.href = fileUrl;
                            link.download = fileUrl.substring(fileUrl.lastIndexOf('/') + 1);
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);

                            resolve(); // Beri tahu bahwa proses selesai
                        },
                        error: function (xhr, status, error) {
                            console.error('Error:', error);
                            let errorMessage = 'Terjadi kesalahan server saat mendownload Excel.';

                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }

                            try {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Export Excel Gagal',
                                    text: errorMessage,
                                    confirmButtonColor: '#028284'
                                });
                            } catch (e) {
                                console.error('Swal is not defined', e);
                            }

                            reject(error); // Tandai error agar bisa ditangkap di `.catch()`
                        }
                    });
                });
            }
        </script>

        <script>
            function clearHistoriesAjax(which) {
                let paginationLoading = document.getElementById('pagination-loading' + which); // For pagination
                let loadingSpinner = document.getElementById('loading-spinner' + which); // For search button
                let searchButton = document.getElementById('searchButton' + which);
                let paginationLinks = document.getElementById('pagination-links' + which);

                // Make it block
                paginationLoading.style.display = 'block';

                // Make it block
                loadingSpinner.style.display = 'inline-block';

                // Make the search button Disable
                searchButton.disabled = true;

                // Hide pagination links
                paginationLinks.style.display = 'none';

                $.ajax({
                    url: "{{ route('rpcm12.clear.histories') }}",
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        try {
                            // Show flash message
                            Swal.fire({
                                icon: response.status,
                                title: 'Pembersihan histories berhasil',
                                text: response.message,
                                confirmButtonColor: '#028284' // Gunakan confirmButtonColor, bukan buttonColor
                            });
                        } catch (e) {
                            console.error('Swal is not defined', e);
                        }

                        // Make it none
                        paginationLoading.style.display = 'none';

                        // Make it none
                        loadingSpinner.style.display = 'none';

                        // Make the search button Enable
                        searchButton.disabled = false;

                        // Show pagination links
                        paginationLinks.style.display = 'block';

                        // Get current page
                        page = $(
                            '#pagination-container-undoReject #pagination-links-undoReject li.page-item.active span.page-link'
                        ).text().trim();

                        // Fetch the data
                        fetchPage(page, which);
                    },
                    error: function (xhr, status, error) {
                        try {
                            // Show flash message
                            Swal.fire({
                                icon: response.status,
                                title: 'Pembersihan histories Gagal',
                                text: response.message,
                                confirmButtonColor: '#028284' // Gunakan confirmButtonColor, bukan buttonColor
                            });
                        } catch (e) {
                            console.error('Swal is not defined', e);
                        }

                        // Make it none
                        paginationLoading.style.display = 'none';

                        // Make it none
                        loadingSpinner.style.display = 'none';

                        // Make the search button Enable
                        searchButton.disabled = false;

                        // Show pagination links
                        paginationLinks.style.display = 'block';
                    }
                });
            }
        </script>

        {{-- Ajax for clearing histories --}}
        <script>
            async function clearHistories(event, which) {
                event.preventDefault();

                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan: Aksi Pembersihan Tidak Dapat Dikembalikan, Apakah anda ingin Export Excel terlebih dahulu?',
                    html: 'Aksi ini akan <span class="text-danger fw-bold">membersihkan semua histories yang ada</span>.',
                    showCancelButton: true,
                    // showDenyButton: true,
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'Dengan Excel',
                    // denyButtonColor: '#F5365C',
                    // denyButtonText: 'Tanpa Excel',
                    cancelButtonText: 'Batal'
                }).then(async (result) => {
                    if (result.isConfirmed) {
                        // Menunggu sampai proses ekspor selesai
                        await exportToExcel(event, which);

                        await clearHistoriesAjax(which);
                        // } else if (result.isDenied) {
                        //     clearHistoriesAjax(which);
                    }
                });
            }
        </script>

        {{-- This script is for pagination and search with ajax --}}
        <script>
            $(document).on('click', '#searchButton-reject', function (event) {
                event.preventDefault();

                // Get current page
                let page = $('#pagination-container-reject #pagination-links-reject li.page-item.active span.page-link')
                    .text().trim();

                // Declare which table
                let which = "-reject";

                // Fetch the data
                fetchPage(page, which);
            })

            $(document).on('click', '#pagination-links-reject .pagination a', function (event) {
                event.preventDefault();

                // Get clicked page
                let url = $(this).attr('href'); // Ambil URL dari tombol yang diklik
                let page = new URL(url).searchParams.get('page'); // Ambil nilai page dari URL

                // Declare which table
                let which = "-reject";

                // Fetch the data
                fetchPage(page, which);
            });

            $(document).on('click', '#searchButton-undoReject', function (event) {
                event.preventDefault();

                // Get current page
                let page = $(
                    '#pagination-container-undoReject #pagination-links-undoReject li.page-item.active span.page-link'
                ).text().trim();
                // Declare which table
                let which = "-undoReject";

                // Fetch the data
                fetchPage(page, which);
            })

            $(document).on('click', '#pagination-links-undoReject .pagination a', function (event) {
                event.preventDefault();

                // Get clicked page
                let url = $(this).attr('href'); // Ambil URL dari tombol yang diklik
                let page = new URL(url).searchParams.get('page'); // Ambil nilai page dari URL
                // Declare which table
                let which = "-undoReject";

                // Fetch the data
                fetchPage(page, which);
            });

            function rejectData(encryptedId, id, event) {
                event.preventDefault();

                button = document.getElementById('reject-button-' + id);
                loadingSpinner = document.getElementById('loading-spinner-' + id + "-reject");

                // Sembunyikan tombol dan tampilkan spinner
                button.disabled = true;
                loadingSpinner.style.display = 'inline-block';

                $.ajax({
                    url: "{{ route('rpcm12.reject-cuti-onprogress-one-by-one.personalia') }}",
                    method: 'POST',
                    data: {
                        id: encryptedId
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        try {
                            // Show flash message
                            Swal.fire({
                                icon: 'success',
                                title: 'Penolakan Permohonan Cuti Berhasil',
                                text: response.success,
                                confirmButtonColor: '#028284' // Gunakan confirmButtonColor, bukan buttonColor
                            });
                        } catch (e) {
                            console.error('Swal is not defined', e);
                        }
                    },
                    complete: function () {
                        // Get current page
                        let page = $(
                            '#pagination-container-reject #pagination-links-reject li.page-item.active span.page-link'
                        ).text().trim();

                        // Declare which table
                        let which = "-reject";

                        // Fetch the data
                        fetchPage(page, which);

                        // Get current page
                        page = $(
                            '#pagination-container-undoReject #pagination-links-undoReject li.page-item.active span.page-link'
                        ).text().trim();
                        // Declare which table
                        which = "-undoReject";

                        // Fetch the data
                        fetchPage(page, which);
                    },
                    error: function (xhr, status, error) {
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            alert(xhr.responseJSON.message); // Tampilkan pesan error dari server
                        } else {
                            alert('Terjadi kesalahan yang tidak diketahui.'); // Pesan default jika tidak ada detail
                        }

                        // Tampilkan tombol dan sembunyikan spinner
                        button.disabled = false;
                        loadingSpinner.style.display = 'none';
                    }
                });
            }

            function undoRejectData(encryptedId, id, event) {
                event.preventDefault();

                button = document.getElementById('undoReject-button-' + id);
                loadingSpinner = document.getElementById('loading-spinner-' + id + "-undoReject");

                // Sembunyikan tombol dan tampilkan spinner
                button.disabled = true;
                loadingSpinner.style.display = 'inline-block';

                $.ajax({
                    url: "{{ route('rpcm12.undo-reject-cuti-onprogress-one-by-one.personalia') }}",
                    method: 'POST',
                    data: {
                        id: encryptedId
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        try {
                            // Show flash message
                            Swal.fire({
                                icon: 'success',
                                title: 'Undo Penolakan Permohonan Cuti Berhasil',
                                text: response.success,
                                confirmButtonColor: '#028284' // Gunakan confirmButtonColor, bukan buttonColor
                            });
                        } catch (e) {
                            console.error('Swal is not defined', e);
                        }
                    },
                    complete: function () {
                        // Get current page
                        let page = $(
                            '#pagination-container-reject #pagination-links-reject li.page-item.active span.page-link'
                        ).text().trim();

                        // Declare which table
                        let which = "-reject";

                        // Fetch the data
                        fetchPage(page, which);

                        // Get current page
                        page = $(
                            '#pagination-container-undoReject #pagination-links-undoReject li.page-item.active span.page-link'
                        ).text().trim();
                        // Declare which table
                        which = "-undoReject";

                        // Fetch the data
                        fetchPage(page, which);
                    },
                    error: function (xhr, status, error) {
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            alert(xhr.responseJSON.message); // Tampilkan pesan error dari server
                        } else {
                            alert('Terjadi kesalahan yang tidak diketahui.'); // Pesan default jika tidak ada detail
                        }

                        // Tampilkan tombol dan sembunyikan spinner
                        button.disabled = false;
                        loadingSpinner.style.display = 'none';
                    }
                });
            }

            function fetchPage(page, which) {
                let search = '';

                // Get all val
                periode = $('#periode-select' + which).val();
                departemen = $('#departemen-select' + which).val();
                search = $('#searchInput' + which).val();

                let paginationLoading = document.getElementById('pagination-loading' + which); // For pagination
                let loadingSpinner = document.getElementById('loading-spinner' + which); // For search button
                let searchButton = document.getElementById('searchButton' + which);
                let paginationLinks = document.getElementById('pagination-links' + which);

                // Make it block
                paginationLoading.style.display = 'block';

                // Make it block
                loadingSpinner.style.display = 'inline-block';

                // Make the search button Disable
                searchButton.disabled = true;

                // Hide pagination links
                paginationLinks.style.display = 'none';

                $.ajax({
                    url: "{{ route('rpcm12.ajax.filter') }}?page=" + page,
                    method: 'GET',
                    data: {
                        which: which,
                        search: search,
                        periode: periode,
                        departemen: departemen
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        let tbody = "";

                        if (which == "-reject") {
                            // Merge response.data.table_detail.data dengan response.data.ids
                            response.data.table_detail.data = response.data.table_detail.data.map((item, index) => {
                                item.row_num = index + 1; // Menghitung row_num
                                item.ids = response.data.ids[index]; // Menambahkan ids
                                return item;
                            });

                            $.each(response.data.table_detail.data, function (index, row) {
                                let viewUrl = `{{ url('/rpcm12/show') }}/${row.ids}`;
                                let rejectUrl = `{{ url('/rpcm12/reject') }}/${row.ids}`;


                                // Format tanggal dengan JavaScript
                                let tanggalMulai = new Date(row.tanggal_mulai).toLocaleDateString('id-ID', {
                                    day: '2-digit',
                                    month: '2-digit',
                                    year: 'numeric'
                                });
                                let tanggalBerakhir = new Date(row.tanggal_berakhir).toLocaleDateString(
                                    'id-ID', {
                                    day: '2-digit',
                                    month: '2-digit',
                                    year: 'numeric'
                                });

                                tbody += `<tr id="${row.id}${which}">
                                            <td class="text-sm font-weight-normal">${row.row_num}</td>
                                            <td class="text-sm font-weight-normal">
                                                <div class="btn-group">
                                                    <!-- Tombol utama -->
                                                    <button type="button" class="btn btn-sm btn-primary mb-0"
                                                        title="View Data"
                                                        onclick="window.location='${viewUrl}'">
                                                        <i class="fas fa-eye"></i> <span class="font-weight-bold">
                                                            View</span>
                                                    </button>
                                                </div>

                                                {{-- Tombol tolak --}}
                                                <button id="reject-button-${row.id}" type="button"
                                                    class="btn btn-sm btn-danger mb-0" title="Reject Data"
                                                    onclick="rejectData('${row.ids}', '${row.id}', event)">
                                                    <i class="fas fa-times"></i>
                                                    <span class="font-weight-bold">Tolak</span>
                                                    <div id="loading-spinner-${row.id}${which}"
                                                        class="spinner-border spinner-border-sm text-light ms-2"
                                                        role="status" style="display: none;">
                                                    </div>
                                                </button>
                                            </td>
                                            <td class="text-sm font-weight-normal">${row.idcuti !== null ? row.idcuti : ''}</td>
                                            <td class="text-sm font-weight-normal">${row.nik !== null ? row.nik : ''}</td>
                                            <td class="text-sm font-weight-normal">${row.nama !== null ? row.nama : ''}</td>
                                            <td class="text-sm font-weight-normal">${row.departemen !== null ? row.departemen : ''}</td>
                                            <td class="text-sm font-weight-normal">${row.alasan !== null ? row.alasan : ''}</td>
                                            <td class="text-sm font-weight-normal">${row.jenis_cuti !== null ? row.jenis_cuti : ''}</td>
                                            <td class="text-sm font-weight-normal text-end">${tanggalMulai !== null ? tanggalMulai : ''}</td>
                                            <td class="text-sm font-weight-normal text-end">${tanggalBerakhir !== null ? tanggalBerakhir : ''}</td>
                                        </tr>`;
                            });

                            try {
                                // Delete dataTable
                                $('#dataTable' + which).DataTable().destroy();
                            } catch (e) {
                                console.error('DataTable is not defined', e);
                            }

                            $("#dataTable" + which + " tbody").html(tbody);

                            // pagination view
                            $('#pagination-container' + which).html(response.pagination);

                            // Re-initiate the DataTable
                            $('#dataTable' + which).DataTable({
                                "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)"
                                },
                                paging: false, // Menonaktifkan pagination
                                searching: false, // Menonaktifkan search/filter
                                info: false, // Menonaktifkan informasi "Showing x of y"
                                responsive: true,
                                dom: 'frtip',
                            });
                        } else if (which == "-undoReject") {
                            // Merge response.data.table_history_reject dengan response.data.ids
                            response.data.table_history_reject.data = response.data.table_history_reject.data.map((
                                item, index) => {
                                item.row_num = index + 1; // Menghitung row_num
                                item.ids = response.data.ids[index]; // Menambahkan ids
                                return item;
                            });

                            $.each(response.data.table_history_reject.data, function (index, row) {
                                let viewUrl = `{{ url('/rpcm12/show') }}/${row.ids}`;
                                let rejectUrl = `{{ url('/rpcm12/undoReject') }}/${row.ids}`;

                                // Format tanggal dengan JavaScript
                                let tanggalMulai = new Date(row.tanggal_mulai).toLocaleDateString('id-ID', {
                                    day: '2-digit',
                                    month: '2-digit',
                                    year: 'numeric'
                                });
                                let tanggalBerakhir = new Date(row.tanggal_berakhir).toLocaleDateString(
                                    'id-ID', {
                                    day: '2-digit',
                                    month: '2-digit',
                                    year: 'numeric'
                                });

                                tbody += `<tr id="${row.id}${which}">
                                            <td class="text-sm font-weight-normal">${row.row_num}</td>
                                            <td class="text-sm font-weight-normal">
                                                <div class="btn-group">
                                                    <!-- Tombol utama -->
                                                    <button type="button" class="btn btn-sm btn-primary mb-0"
                                                        title="View Data"
                                                        onclick="window.location='${viewUrl}'">
                                                        <i class="fas fa-eye"></i> <span class="font-weight-bold">
                                                            View</span>
                                                    </button>
                                                </div>

                                                {{-- Tombol undo penolakan --}}
                                                <button id="undoReject-button-${row.id}" type="button"
                                                    class="btn btn-sm btn-warning mb-0" title="Undo Reject Data"
                                                    onclick="undoRejectData('${row.ids}', '${row.id}', event)">
                                                    <i class="fas fa-undo"></i>
                                                    <span class="font-weight-bold">Undo Penolakan</span>
                                                    <div id="loading-spinner-${row.id}${which}"
                                                        class="spinner-border spinner-border-sm text-light ms-2"
                                                        role="status" style="display: none;">
                                                    </div>
                                                </button>
                                            </td>
                                            <td class="text-sm font-weight-normal">${row.idcuti !== null ? row.idcuti : ''}</td>
                                            <td class="text-sm font-weight-normal">${row.nik !== null ? row.nik : ''}</td>
                                            <td class="text-sm font-weight-normal">${row.nama !== null ? row.nama : ''}</td>
                                            <td class="text-sm font-weight-normal">${row.departemen !== null ? row.departemen : ''}</td>
                                            <td class="text-sm font-weight-normal">${row.alasan !== null ? row.alasan : ''}</td>
                                            <td class="text-sm font-weight-normal">${row.jenis_cuti !== null ? row.jenis_cuti : ''}</td>
                                            <td class="text-sm font-weight-normal text-end">${tanggalMulai !== null ? tanggalMulai : ''}</td>
                                            <td class="text-sm font-weight-normal text-end">${tanggalBerakhir !== null ? tanggalBerakhir : ''}</td>
                                        </tr>`;
                            });

                            try {
                                // Delete dataTable
                                $('#dataTable' + which).DataTable().destroy();
                            } catch (e) {
                                console.error('DataTable is not defined', e);
                            }

                            $("#dataTable" + which + " tbody").html(tbody);

                            // pagination view
                            $('#pagination-container' + which).html(response.pagination);

                            // Re-initiate the DataTable
                            $('#dataTable' + which).DataTable({
                                "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)"
                                },
                                paging: false, // Menonaktifkan pagination
                                searching: false, // Menonaktifkan search/filter
                                info: false, // Menonaktifkan informasi "Showing x of y"
                                responsive: true,
                                dom: 'frtip',
                            });
                        }

                        // Make it none
                        paginationLoading.style.display = 'none';

                        // Make it none
                        loadingSpinner.style.display = 'none';

                        // Make the search button Enable
                        searchButton.disabled = false;

                        // Show pagination links
                        paginationLinks.style.display = 'block';
                    },
                    error: function (xhr, status, error) {
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            alert(xhr.responseJSON.message); // Tampilkan pesan error dari server
                        } else {
                            alert('Terjadi kesalahan yang tidak diketahui.'); // Pesan default jika tidak ada detail
                        }

                        // Make it none
                        paginationLoading.style.display = 'none';

                        // Make it none
                        loadingSpinner.style.display = 'none';

                        // Make the search button Enable
                        searchButton.disabled = false;

                        // Show pagination links
                        paginationLinks.style.display = 'block';
                    }
                });
            }
        </script>

    @endsection

    @push('css')
        <style>
            /* Gradient background untuk header */
            .bg-gradient-primary {
                background: linear-gradient(135deg, #028284 0%, #0396A6 100%) !important;
            }

            /* Card utama dengan border mencolok */
            .card.border-primary.shadow-lg {
                box-shadow: 0 0.5rem 1.5rem rgba(2, 130, 132, 0.3) !important;
                transition: all 0.3s ease;
            }

            /* Hover effect untuk card */
            .card.border-primary.shadow-lg:hover {
                box-shadow: 0 0.75rem 2rem rgba(2, 130, 132, 0.4) !important;
                transform: translateY(-2px);
            }

            /* Responsive fixes */
            @media (max-width: 768px) {
                .card.border-primary.shadow-lg {
                    border-width: 1px !important;
                }

                .card-header h4 {
                    font-size: 1rem !important;
                }

                .card-header p {
                    font-size: 0.75rem !important;
                }
            }
        </style>
    @endpush

    @push('js')
        <script>
            $(document).ready(function () { });
        </script>
    @endpush