@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="container-fluid py-4">
        @if (isset($periode_h_minus_1) && count($periode_h_minus_1) > 0)
            {{-- Card H-3: Periode akan berakhir dalam 3 hari --}}
            <div class="row">
                <div class="col-md-12 mt-3">
                    <div class="card" style="border-width: 2px; background-color: #fff6dc; border-color:#fb6340">
                        <div class="card-body py-3 px-4">
                            <div class="d-flex align-items-start gap-3">
                                <div class="flex-shrink-0">
                                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                                        style="width: 40px; height: 40px; background-color: #fb6340">
                                        <i class="fas fa-clock text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="text-warning fw-bold mb-1">
                                        {{ count($periode_h_minus_1) }} Periode Akan Berakhir (H-3)
                                    </h6>
                                    <p class="text-dark small mb-2">
                                        Akan berakhir dalam ≤3 hari:
                                        @php
                                            $namaListH3 = collect($periode_h_minus_1)->take(3)->pluck('nama')->map(fn($n) => '<strong>' . e($n) . '</strong>')->implode(', ');
                                            $sisanyaH3 = count($periode_h_minus_1) - 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 izin/tugas 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" style="border-width: 2px; background-color: #fff6dc; border-color:#fb6340">
                        <div class="card-body py-3 px-4">
                            <div class="d-flex align-items-start gap-3">
                                <div class="flex-shrink-0">
                                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                                        style="width: 40px; height: 40px; background-color: #fb6340">
                                        <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 izin/tugas sudah diproses, lalu lakukan rekapitulasi.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if (isset($periode_perlu_ditutup) && count($periode_perlu_ditutup) > 0)
            {{-- Card: periode sudah berakhir tapi belum ditutup (isactive masih 1) --}}
            <div class="row">
                <div class="col-md-12 mt-3">
                    <div class="card border-danger" style="border-width: 2px; background-color: #ffecec">
                        <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">
                                        {{ count($periode_perlu_ditutup) }} Periode Perlu Ditutup
                                    </h6>
                                    <p class="text-dark small mb-2">
                                        Sudah berakhir namun masih terbuka:
                                        @php
                                            $namaList = collect($periode_perlu_ditutup)->take(3)->pluck('nama')->map(fn($n) => '<strong>' . e($n) . '</strong>')->implode(', ');
                                            $sisanya = count($periode_perlu_ditutup) - 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 izin/tugas yang masuk.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if (isset($periode_rekap_perlu_dibuat) && count($periode_rekap_perlu_dibuat) > 0)
            {{-- Card: 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; background-color: #ffecec">
                        <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 text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="text-danger fw-bold mb-1">
                                        {{ count($periode_rekap_perlu_dibuat) }} Rekap Perlu Dibuat
                                    </h6>
                                    <p class="text-dark small mb-2">
                                        Sudah ditutup namun rekap belum dibuat:
                                        @php
                                            $namaList2 = collect($periode_rekap_perlu_dibuat)->take(3)->pluck('nama')->map(fn($n) => '<strong>' . e($n) . '</strong>')->implode(', ');
                                            $sisanya2 = count($periode_rekap_perlu_dibuat) - 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 tersalin ke periode berikutnya.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
    <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 Izin/Tugas
                                        </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="queryRekapFilterPerizinan(event, this)"
                                    disabled>

                                    <i class="fas fa-plus me-1"></i>
                                    <span class="font-weight-bold" id="filterButtonText">
                                        Buat/Update Rekap Surat Izin/Tugas
                                    </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 izin/tugas --}}
                                <button id="viewRekapButton"
                                    name="view"
                                    class="btn btn-success mb-0 w-100 w-md-auto"
                                    style="display: inline"
                                    onclick="queryRekapFilterPerizinan(event, this)">

                                    <i class="fas fa-eye me-1"></i>
                                    <span class="font-weight-bold">
                                        Lihat Rekap Surat Izin/Tugas
                                    </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">
        {{-- 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('queryRekapPerizinanSelect-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 Izin/Tugas';
                                            filterButton.classList.remove('btn-primary');
                                            filterButton.classList.add('btn-warning');
                                        } else {
                                            if (btnText) btnText.textContent = 'Buat Rekap Surat Izin/Tugas';
                                            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 Izin/Tugas</strong>
                        </h4>
                        <p class="text-white text-sm mb-0 mt-1 opacity-8">Gunakan form di bawah ini untuk melakukan rekap
                            izin/tugas</p>
                    </div>

                    @if ($authorize->add == '1')
                        <div class="card-body pb-1">
                            {{-- Progress Bar --}}
                            <div id="progress-bar"
                                class="progress mb-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>
                    @endif
                    <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">×</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')
                                                    {{-- Periode diganti dengan modal-search input (bukan dropdown) --}}
                                                    <div class="input-group">
                                                        <input type="text" id="queryRekapPerizinanSelect-{{ $filter->field }}"
                                                            class="form-control {{ $filter->class }}"
                                                            placeholder="Klik untuk memilih periode..."
                                                            readonly
                                                            style="cursor: pointer; background-color: #fff;"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#modalPilihPeriode">
                                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer;"
                                                            data-bs-toggle="modal" data-bs-target="#modalPilihPeriode">
                                                            <i class="fas fa-search"></i>
                                                        </span>
                                                    </div>
                                                    <input type="hidden" name="{{ $filter->field }}" id="hidden-periode-value" value="{{ old($filter->field) }}">
                                                @else
                                                    <select id="queryRekapPerizinanSelect-{{ $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/rpitm1/filter.blade.php</b> on line <b>820</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
                                                @endif
                                                @if ($filter->note != '')
                                                    <p class='text-secondary text-xs pt-1 px-1'>
                                                        {{ '*) ' . $filter->note }}
                                                    </p>
                                                @endif
                                            @endif
                                            @error($filter->field)
                                                <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                            @enderror
                                        </div>
                                    </div>
                                @endforeach
                            </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 ini sepertinya masih merujuk ke izin/tugas, perlu konfirmasi apakah route
                rpitm1.reject-perizinan-onprogress.personalia juga menangani izin/tugas --}}
                    <form role="form" method="POST"
                        action="{{ route('rpitm1.reject-perizinan-onprogress.personalia') }}"
                        id="{{ $dmenu }}-form-reject-all">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Tolak Semua Pengajuan Izin/Tugas yang Masih Diproses di Sisi
                                Atasan (Berdasarkan Periode)</p> {{-- ! Perubahan Teks --}}
                            <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 Izin/Tugas yang Masih Diproses di
                                Sisi
                                Personalia {{-- ! Perubahan Teks --}}
                            </p>
                            <hr class="horizontal dark mt-0">
                        </div>
                        {{-- Link ke pitkkb. Asumsi pitkkb menangani persetujuan izin/tugas juga. Jika tidak, URL
                    perlu disesuaikan. --}}
                        <div class="card-footer align-items-center pt-0 pb-2">
                            <div class="d-flex justify-content-center">
                                <a href="{{ url('/pitkkb') }}" class="btn btn-primary btn-sm algn">
                                    <i class="fas fa-arrow-right"></i> Ke Menu Persetujuan Pengajuan Izin/Tugas
                                    {{-- !
                                Perubahan Teks --}}
                                </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-3">
            <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($tokenIzinAktifList) && $tokenIzinAktifList->count() > 0)
                                        <span class="badge bg-danger ms-1">{{ $tokenIzinAktifList->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 id="list_pengajuan_to_reject">
                    @php
                        $which = '-reject';
                    @endphp
                    <div class="px-3 pt-4">
                        <h5><strong>List Pengajuan Izin/Tugas yang Masih Diproses di Sisi {{-- ! Perubahan Teks --}}
                                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;">
                                        {{-- ! Start Perubahan Header Table --}}
                                        <tr>
                                            <th>No.</th>
                                            <th>Action</th>
                                            <th>ID Izin/Tugas</th>
                                            <th>NIK</th>
                                            <th>Nama Karyawan</th>
                                            <th>Departemen</th>
                                            <th>Alasan</th>
                                            <th>Kategori Izin/Tugas</th>
                                            <th>Jenis Izin/Tugas</th>
                                            <th>Jam Masuk</th>
                                            <th>Jam Keluar</th>
                                        </tr>
                                        {{-- ! End Perubahan Header Table --}}
                                    </thead>
                                    <tbody>
                                        {{-- ! Start Perubahan Body Table --}}
                                        @foreach ($table_detail as $index => $item)
                                            @php
                                                $encryptedId = encrypt($item->id);
                                            @endphp
                                            <tr id="row-{{ $item->id }}{{ $which }}">
                                                <td>{{ $loop->iteration + ($table_detail->currentPage() - 1) * $table_detail->perPage() }}
                                                </td> {{-- ! Adjusted for pagination --}}
                                                <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 --}}
                                                    {{-- Asumsi route reject-perizinan-onprogress-one-by-one.personalia
                                            menangani
                                            izin/tugas juga --}}
                                                    <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->idperizinan }}</td>
                                                <td>{{ $item->nik }}</td>
                                                <td>{{ $item->nama }}</td>
                                                <td>{{ $item->departemen }}</td>
                                                <td>{{ $item->alasan }}</td>
                                                <td>{{ $item->kategori_perizinan }}</td>
                                                <td>{{ $item->jenis_izin }}</td>
                                                <td class="text-end">{{ $item->jam_masuk }}</td>
                                                <td class="text-end">{{ $item->jam_keluar }}</td>
                                            </tr>
                                        @endforeach
                                        {{-- ! End Perubahan Body Table --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div id="pagination-container{{ $which }}" class="d-flex justify-content-between mt-4"
                            style="overflow-x: auto;">
                            {{-- Pagination links will be loaded here by AJAX --}}
                            @include('rekap.rpitm1.partials.pagination', [
                                'paginator' => $table_detail,
                                'which' => $which,
                            ])
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function() {
                        // Initialize DataTable without pagination/searching controlled by DataTables itself
                        $('#dataTable-reject').DataTable({
                            "autoWidth": false,
                            // "responsive": true,
                            paging: false,
                            searching: false,
                            info: false,
                        });
                    });
                </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 Izin/Tugas yang Baru Saja Ditolak {{-- ! Perubahan Teks --}}
                                (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>

                                    {{-- Asumsi route rpitm1.clear.histories menangani izin/tugas juga --}}
                                    <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-clear{{ $which }}" {{-- ! Unique ID for clear spinner --}}
                                            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-history'))
                                {{-- ! Unique session key if needed --}}
                                <div class="alert alert-{{ session('class', 'info') }} alert-dismissible fade show"
                                    role="alert">
                                    {{ session('message-below-history') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            @endif
                            <div class="d-flex">
                                {{-- Asumsi route rpitm1.history_penolakan.excel.export menangani izin/tugas juga --}}
                                <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;">
                                        {{-- ! Start Perubahan Header Table --}}
                                        <tr>
                                            <th>No.</th>
                                            <th>Action</th>
                                            <th>ID Izin/Tugas</th>
                                            <th>NIK</th>
                                            <th>Nama Karyawan</th>
                                            <th>Departemen</th>
                                            <th>Alasan</th>
                                            <th>Kategori Izin/Tugas</th>
                                            <th>Jenis Izin/Tugas</th>
                                            <th>Jam Masuk</th>
                                            <th>Jam Keluar</th>
                                        </tr>
                                        {{-- ! End Perubahan Header Table --}}
                                    </thead>
                                    <tbody>
                                        {{-- ! Start Perubahan Body Table --}}
                                        @foreach ($table_history_reject as $index => $item)
                                            @php
                                                $encryptedId = encrypt($item->id);
                                            @endphp
                                            <tr id="row-{{ $item->id }}{{ $which }}">
                                                <td>{{ $loop->iteration + ($table_history_reject->currentPage() - 1) * $table_history_reject->perPage() }}
                                                </td> {{-- ! Adjusted for pagination --}}
                                                <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 --}}
                                                    {{-- Asumsi route undo-reject-perizinan-onprogress-one-by-one.personalia
                                            menangani izin/tugas juga --}}
                                                    <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->idperizinan }}</td>
                                                <td>{{ $item->nik }}</td>
                                                <td>{{ $item->nama }}</td>
                                                <td>{{ $item->departemen }}</td>
                                                <td>{{ $item->alasan }}</td>
                                                <td>{{ $item->kategori_perizinan }}</td>
                                                <td>{{ $item->jenis_izin }}</td>
                                                <td class="text-end">{{ $item->jam_masuk }}</td>
                                                <td class="text-end">{{ $item->jam_keluar }}</td>
                                            </tr>
                                        @endforeach
                                        {{-- ! End Perubahan Body Table --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div id="pagination-container{{ $which }}" class="d-flex justify-content-between mt-4"
                            style="overflow-x: auto;">
                            {{-- Pagination links will be loaded here by AJAX --}}
                            @include('rekap.rpitm1.partials.pagination', [
                                'paginator' => $table_history_reject,
                                'which' => $which,
                            ])
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function() {
                        // Initialize DataTable without pagination/searching controlled by DataTables itself
                        $('#dataTable-undoReject').DataTable({
                            "autoWidth": false,
                            // "responsive": true,
                            paging: false,
                            searching: false,
                            info: false,
                        });
                    });
                </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 IZIN/TUGAS 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 Izin/Tugas 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 izin/tugas 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 --}}
                        <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($tokenIzinAktifList) && $tokenIzinAktifList->count() > 0)
                                    <div class="table-responsive">
                                        <table class="table table-sm table-hover align-middle" id="tableTokenIzinAktif">
                                            <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 ($tokenIzinAktifList 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 izin/tugas 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 (izin/tugas) --}}
        <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
                    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;
                    $('#tableTokenIzinAktif 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)
                        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 {
                                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;
                    $('#tableTokenIzinAktif 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) {
                            $('#tableTokenIzinAktif').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>{{-- /.col-md-12 --}}
        </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');
                        // Tambah flag _ajax_generate agar store() tahu ini dari "Buat Rekap"
                        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 izin/tugas yang sedang berlangsung pada periode yang dipilih</span> di sisi atasan (permohonan yang belum di-approve oleh atasan).', //!-- Perubahan Teks --}}
                showCancelButton: true,
                // bootstrap red color
                confirmButtonColor: '#028284',
                confirmButtonText: 'OK',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Kirim form manually
                    document.getElementById("{{ $dmenu }}-form-reject-all").submit();
                }
            });
        }

        function queryRekapFilterPerizinan(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 izin/tugas.',
                    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 Izin/Tugas"</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 Izin/Tugas',
                    html: 'Aksi ini akan <span class="text-primary fw-bold">membuat lalu menampilkan data rekap surat izin/tugas</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('rpitm1.query-rekap-perizinan') }}",
                                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'
                                    }).then(function () {
                                        // Restore button SETELAH Swal ditutup
                                        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 Izin/Tugas</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 Izin/Tugas</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'
                            }).then(function () {
                                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 Izin/Tugas</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 Izin/Tugas</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 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).
         */
        function closeLeavePeriod(event) {
            if (event) event.preventDefault();

            // 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
            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) {
                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 izin/tugas</span> ' +
                '<strong>(' + escapeHtml(selectedRow.nama) + ')</strong>. ';
            if (isCloseAction) {
                confirmHtml += 'Setelah ditutup, <span class="text-primary fw-bold">tidak ada lagi pengajuan izin/tugas yang dapat dilakukan pada periode tersebut</span>.';
            } else {
                confirmHtml += 'Setelah dibuka, <span class="text-primary fw-bold">pengajuan izin/tugas 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();
                        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) => {
                // Asumsi route rpitm1.history_penolakan.excel.export menangani history izin/tugas juga
                $.ajax({
                    url: '{{ route('rpitm1.history_penolakan.excel.export') }}',
                    method: 'GET',
                    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);
            let loadingSpinner = document.getElementById('loading-spinner-clear' +
                which); //!-- Pakai ID Spinner Tombol Clear --}}
            let clearButton = document.getElementById('clearHistoriesButton'); //!-- Tombol Clear --}}
            let searchButton = document.getElementById('searchButton' + which);
            let paginationLinks = document.getElementById('pagination-links' + which);

            // Show spinner on clear button and disable it
            if (loadingSpinner) loadingSpinner.style.display = 'inline-block';
            if (clearButton) clearButton.disabled = true;
            // Optionally disable search button too during clear
            if (searchButton) searchButton.disabled = true;


            // Show loading indicator for pagination area
            if (paginationLoading) paginationLoading.style.display = 'block';
            if (paginationLinks) paginationLinks.style.display = 'none';


            // Asumsi route rpitm1.clear.histories menangani history izin/tugas juga
            $.ajax({
                url: "{{ route('rpitm1.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 ||
                                'success', // Default ke success jika status tidak ada
                            title: response.title || 'Pembersihan Histories Berhasil', // Default title
                            text: response.message,
                            confirmButtonColor: '#028284'
                        });
                    } catch (e) {
                        console.error('Swal error:', e);
                        alert(response.message || 'Histories berhasil dibersihkan.'); // Fallback alert
                    }

                    // Fetch the first page after clearing
                    fetchPage(1, which); // Muat ulang halaman pertama
                },
                error: function(xhr, status, error) {
                    let errorMsg = 'Pembersihan histories gagal.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.responseText) {
                        try {
                            errorMsg = JSON.parse(xhr.responseText).message || errorMsg;
                        } catch (e) {}
                    }

                    try {
                        // Show flash message
                        Swal.fire({
                            icon: 'error',
                            title: 'Pembersihan Histories Gagal',
                            text: errorMsg,
                            confirmButtonColor: '#F5365C' // Warna merah untuk error
                        });
                    } catch (e) {
                        console.error('Swal error:', e);
                        alert('Gagal membersihkan histories: ' + errorMsg); // Fallback alert
                    }
                },
                complete: function() {
                    // Hide spinner on clear button and re-enable it
                    if (loadingSpinner) loadingSpinner.style.display = 'none';
                    if (clearButton) clearButton.disabled = false;
                    // Re-enable search button
                    if (searchButton) searchButton.disabled = false;


                    // Hide loading indicator for pagination area (fetchPage will handle showing links)
                    // if(paginationLoading) paginationLoading.style.display = 'none';
                    // if(paginationLinks) paginationLinks.style.display = 'block'; // fetchPage should handle this
                }
            });
        }
    </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 penolakan izin/tugas yang ada</span>. Apakah Anda yakin?', //!-- Perubahan Teks --}}
                showCancelButton: true,
                confirmButtonColor: '#028284',
                confirmButtonText: 'Dengan Excel',
                cancelButtonText: 'Batal'
            }).then(async (result) => {
                if (result.isConfirmed) {
                    // Menunggu sampai proses ekspor selesai
                    await exportToExcel(event, which);

                    // Langsung panggil fungsi clear
                    await clearHistoriesAjax(which);
                }
            });
        }
    </script>

    {{-- This script is for pagination and search with ajax --}}
    <script>
        // --- Event listener untuk tombol search dan pagination ---
        $(document).on('click', '#searchButton-reject', function(event) {
            event.preventDefault();
            fetchPage(1, "-reject"); // Selalu mulai dari halaman 1 saat search baru
        });

        $(document).on('click', '#pagination-links-reject .pagination a', function(event) {
            event.preventDefault();
            let url = $(this).attr('href');
            let page = new URL(url).searchParams.get('page');
            fetchPage(page, "-reject");
        });

        $(document).on('click', '#searchButton-undoReject', function(event) {
            event.preventDefault();
            fetchPage(1, "-undoReject"); // Selalu mulai dari halaman 1 saat search baru
        });

        $(document).on('click', '#pagination-links-undoReject .pagination a', function(event) {
            event.preventDefault();
            let url = $(this).attr('href');
            let page = new URL(url).searchParams.get('page');
            fetchPage(page, "-undoReject");
        });

        // --- Fungsi untuk menolak satu data ---
        function rejectData(encryptedId, id, event) {
            event.preventDefault();

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

            // Sembunyikan teks, tampilkan spinner, disable tombol
            if (button) {
                $(button).find('.font-weight-bold').hide(); // Sembunyikan teks "Tolak"
                button.disabled = true;
            }
            if (loadingSpinner) loadingSpinner.style.display = 'inline-block';


            // Asumsi route ini menangani izin/tugas juga
            $.ajax({
                url: "{{ route('rpitm1.reject-perizinan-onprogress-one-by-one.personalia') }}",
                method: 'POST',
                data: {
                    id: encryptedId
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    try {
                        Swal.fire({
                            icon: 'success',
                            title: 'Penolakan Permohonan Izin/Tugas Berhasil', //!-- Perubahan Teks --}}
                            text: response.success || response.message ||
                                'Data berhasil ditolak.', // Cari pesan sukses
                            confirmButtonColor: '#028284'
                        });
                    } catch (e) {
                        console.error('Swal error:', e);
                        alert(response.success || response.message || 'Data berhasil ditolak.'); // Fallback
                    }

                    // Muat ulang kedua tabel setelah sukses
                    let currentPageReject = $('#pagination-links-reject .page-item.active .page-link').text() ||
                        1;
                    let currentPageUndo = $('#pagination-links-undoReject .page-item.active .page-link')
                        .text() || 1;
                    fetchPage(currentPageReject, "-reject");
                    fetchPage(currentPageUndo, "-undoReject");

                },
                error: function(xhr, status, error) {
                    let errorMsg = 'Gagal menolak data.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.responseText) {
                        try {
                            errorMsg = JSON.parse(xhr.responseText).message || errorMsg;
                        } catch (e) {}
                    }

                    try {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: errorMsg,
                            confirmButtonColor: '#F5365C'
                        });
                    } catch (e) {
                        console.error('Swal error:', e);
                        alert('Gagal menolak: ' + errorMsg); // Fallback
                    }

                    // Kembalikan tombol jika error
                    if (button) {
                        $(button).find('.font-weight-bold').show();
                        button.disabled = false;
                    }
                    if (loadingSpinner) loadingSpinner.style.display = 'none';
                }
                // Removed complete callback as success handles reload
            });
        }

        // --- Fungsi untuk undo penolakan satu data ---
        function undoRejectData(encryptedId, id, event) {
            event.preventDefault();

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

            // Sembunyikan teks, tampilkan spinner, disable tombol
            if (button) {
                $(button).find('.font-weight-bold').hide(); // Sembunyikan teks "Undo Penolakan"
                button.disabled = true;
            }
            if (loadingSpinner) loadingSpinner.style.display = 'inline-block';


            // Asumsi route ini menangani izin/tugas juga
            $.ajax({
                url: "{{ route('rpitm1.undo-reject-perizinan-onprogress-one-by-one.personalia') }}",
                method: 'POST',
                data: {
                    id: encryptedId
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    try {
                        Swal.fire({
                            icon: 'success',
                            title: 'Undo Penolakan Permohonan Izin/Tugas Berhasil', //!-- Perubahan Teks --}}
                            text: response.success || response.message ||
                                'Penolakan berhasil dibatalkan.', // Cari pesan sukses
                            confirmButtonColor: '#028284'
                        });
                    } catch (e) {
                        console.error('Swal error:', e);
                        alert(response.success || response.message ||
                            'Penolakan berhasil dibatalkan.'); // Fallback
                    }

                    // Muat ulang kedua tabel setelah sukses
                    let currentPageReject = $('#pagination-links-reject .page-item.active .page-link').text() ||
                        1;
                    let currentPageUndo = $('#pagination-links-undoReject .page-item.active .page-link')
                        .text() || 1;
                    fetchPage(currentPageReject, "-reject");
                    fetchPage(currentPageUndo, "-undoReject");

                },
                error: function(xhr, status, error) {
                    let errorMsg = 'Gagal membatalkan penolakan.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.responseText) {
                        try {
                            errorMsg = JSON.parse(xhr.responseText).message || errorMsg;
                        } catch (e) {}
                    }

                    try {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: errorMsg,
                            confirmButtonColor: '#F5365C'
                        });
                    } catch (e) {
                        console.error('Swal error:', e);
                        alert('Gagal undo: ' + errorMsg); // Fallback
                    }


                    // Kembalikan tombol jika error
                    if (button) {
                        $(button).find('.font-weight-bold').show();
                        button.disabled = false;
                    }
                    if (loadingSpinner) loadingSpinner.style.display = 'none';
                }
                // Removed complete callback as success handles reload
            });
        }

        // --- Fungsi utama untuk fetch data dan update tabel ---
        function fetchPage(page, which) {
            let search = '';

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

            let paginationLoading = document.getElementById('pagination-loading' + which);
            let loadingSpinner = document.getElementById('loading-spinner' + which); // Spinner tombol search
            let searchButton = document.getElementById('searchButton' + which);
            let paginationLinks = document.getElementById('pagination-links' + which);
            let tableBody = $("#dataTable" + which + " tbody");
            let table = $('#dataTable' + which); // Referensi ke tabel DataTable

            // Tampilkan indikator loading
            if (paginationLoading) paginationLoading.style.display = 'block';
            if (loadingSpinner) loadingSpinner.style.display = 'inline-block';
            if (searchButton) searchButton.disabled = true;
            if (paginationLinks) paginationLinks.style.display = 'none';
            // tableBody.html('<tr><td colspan="11" class="text-center">Memuat data...</td></tr>'); // Komentari atau hapus ini jika ada

            // Asumsi route rpitm1.ajax.filter menangani filter izin/tugas juga
            $.ajax({
                url: "{{ route('rpitm1.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 tbodyHtml = "";
                    let dataToIterate = null;
                    let ids = response.data.ids || []; // Ambil array ID terenkripsi

                    // Tentukan data mana yang akan diiterasi berdasarkan 'which'
                    if (which == "-reject" && response.data.table_detail && response.data.table_detail.data) {
                        dataToIterate = response.data.table_detail.data;
                        // Pasangkan ID terenkripsi ke data
                        if (dataToIterate && ids.length === dataToIterate.length) { // Pastikan jumlah ID cocok
                            dataToIterate.forEach((item, index) => item.encrypted_id = ids[index]);
                        }
                    } else if (which == "-undoReject" && response.data.table_history_reject && response.data
                        .table_history_reject.data) {
                        dataToIterate = response.data.table_history_reject.data;
                        // Pasangkan ID terenkripsi ke data
                        if (dataToIterate && ids.length === dataToIterate.length) { // Pastikan jumlah ID cocok
                            dataToIterate.forEach((item, index) => item.encrypted_id = ids[index]);
                        }
                    }

                    if (dataToIterate && dataToIterate.length > 0) {
                        // Hitung nomor urut awal berdasarkan halaman saat ini
                        let currentPage = which === "-reject" ? (response.data.table_detail.current_page || 1) :
                            (response.data.table_history_reject.current_page || 1);
                        let perPage = which === "-reject" ? (response.data.table_detail.per_page || 10) : (
                            response.data.table_history_reject.per_page || 10);
                        let startNumber = (currentPage - 1) * perPage + 1;


                        $.each(dataToIterate, function(index, row) {
                            let rowNum = startNumber + index; // Nomor urut baris
                            // Pastikan row.encrypted_id ada sebelum membuat URL
                            let viewUrl = row.encrypted_id ?
                                `{{ url($url_menu) }}/show/${row.encrypted_id}` : '#';
                            let rowId = row.id; // ID asli untuk fungsi JS
                            let encryptedIdForJs = row.encrypted_id ||
                                ''; // ID terenkripsi untuk fungsi JS, beri default jika tidak ada

                            //!-- Start Pembuatan Baris HTML (disesuaikan dengan kolom Izin/Tugas) --}}
                            tbodyHtml += `<tr id="row-${rowId}${which}">
                                    <td class="text-sm font-weight-normal">${rowNum}</td>
                                    <td class="text-sm font-weight-normal">`;

                            // Tombol View (tambahkan cek encrypted_id)
                            if (row.encrypted_id) {
                                tbodyHtml += `<div class="btn-group">
                                            <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> `;
                            } else {
                                tbodyHtml += `<div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-secondary mb-0" disabled title="View Data (ID error)">
                                                <i class="fas fa-eye"></i> <span class="font-weight-bold">View</span>
                                            </button>
                                        </div> `;
                            }


                            // Tombol Aksi (Tolak atau Undo Tolak) (tambahkan cek encrypted_id)
                            if (which == "-reject" && row.encrypted_id) {
                                tbodyHtml += `<button id="reject-button-${rowId}" type="button"
                                            class="btn btn-sm btn-danger mb-0 ms-1" title="Tolak Data"
                                            onclick="rejectData('${encryptedIdForJs}', '${rowId}', event)">
                                            <i class="fas fa-times"></i>
                                            <span class="font-weight-bold">Tolak</span>
                                            <div id="loading-spinner-${rowId}${which}"
                                                class="spinner-border spinner-border-sm text-light ms-2"
                                                role="status" style="display: none;"></div>
                                        </button>`;
                            } else if (which == "-undoReject" && row.encrypted_id) {
                                tbodyHtml += `<button id="undoReject-button-${rowId}" type="button"
                                            class="btn btn-sm btn-warning mb-0 ms-1" title="Undo Tolak Data"
                                            onclick="undoRejectData('${encryptedIdForJs}', '${rowId}', event)">
                                            <i class="fas fa-undo"></i>
                                            <span class="font-weight-bold">Undo Penolakan</span>
                                            <div id="loading-spinner-${rowId}${which}"
                                                class="spinner-border spinner-border-sm text-dark ms-2" {{-- text-dark for warning --}}
                                                role="status" style="display: none;"></div>
                                        </button>`;
                            } else if (row.encrypted_id ===
                                undefined) { // Tampilkan tombol disabled jika ID tidak ada
                                let btnClass = (which == "-reject") ? 'btn-danger' : 'btn-warning';
                                let btnTitle = (which == "-reject") ? 'Tolak Data (ID error)' :
                                    'Undo Tolak Data (ID error)';
                                let btnIcon = (which == "-reject") ? 'fa-times' : 'fa-undo';
                                let btnText = (which == "-reject") ? 'Tolak' : 'Undo Penolakan';
                                tbodyHtml += `<button type="button"
                                            class="btn btn-sm ${btnClass} mb-0 ms-1" title="${btnTitle}" disabled>
                                            <i class="fas ${btnIcon}"></i>
                                            <span class="font-weight-bold">${btnText}</span>
                                        </button>`;
                            }

                            // Kolom Data lainnya
                            tbodyHtml += `</td>
                                    <td class="text-sm font-weight-normal">${row.idperizinan || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.nik || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.nama || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.departemen || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.alasan || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.kategori_perizinan || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.jenis_izin || ''}</td>
                                    <td class="text-sm font-weight-normal text-end">${row.jam_masuk || ''}</td>
                                    <td class="text-sm font-weight-normal text-end">${row.jam_keluar || ''}</td>
                                </tr>`;
                            //!-- End Pembuatan Baris HTML --}}
                        });
                    } else {
                        // ***** PERUBAHAN 1: Jangan buat HTML untuk baris kosong di sini *****
                        tbodyHtml = ''; // Biarkan tbody kosong jika tidak ada data
                    }


                    // Hancurkan DataTable yang ada sebelum mengisi ulang
                    if ($.fn.DataTable.isDataTable('#dataTable' + which)) {
                        table.DataTable().destroy();
                    }

                    // Isi tbody dengan HTML baru (akan kosong jika tidak ada data)
                    tableBody.html(tbodyHtml);

                    // Tampilkan link pagination
                    // Pastikan response.pagination ada sebelum mencoba menambahkannya
                    if (response.pagination) {
                        $('#pagination-container' + which).html(response.pagination);
                    } else {
                        $('#pagination-container' + which).html(''); // Kosongkan jika tidak ada pagination
                    }


                    // Inisialisasi ulang DataTable (tanpa fitur bawaan DataTables)
                    table.DataTable({
                        paging: false, // Nonaktifkan paging bawaan DataTable (karena Anda handle manual)
                        searching: false, // Nonaktifkan search bawaan DataTable (karena Anda handle manual)
                        info: false, // Nonaktifkan info bawaan DataTable ("Showing x to y of z entries")
                        responsive: true,
                        // ***** PERUBAHAN 2: Tambahkan opsi language.emptyTable *****
                        "language": {
                            "emptyTable": "Tidak ada data ditemukan." // Pesan yang akan ditampilkan DataTables
                        }
                    });

                },
                error: function(xhr, status, error) {
                    console.error("Error fetching page:", status, error);
                    let errorMsg = 'Gagal memuat data.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.responseText) {
                        try {
                            errorMsg = JSON.parse(xhr.responseText).message || errorMsg;
                        } catch (e) {}
                    }
                    // Hancurkan DataTable jika ada sebelum menampilkan pesan error
                    if ($.fn.DataTable.isDataTable('#dataTable' + which)) {
                        table.DataTable().destroy();
                    }
                    // Tampilkan pesan error di tbody
                    tableBody.html(
                        `<tr><td colspan="11" class="text-center text-danger">${errorMsg}</td></tr>`
                    ); //!-- colspan disesuaikan --}}
                    // Kosongkan pagination jika error
                    $('#pagination-container' + which).html('');
                },
                complete: function() {
                    // Sembunyikan indikator loading
                    if (paginationLoading) paginationLoading.style.display = 'none';
                    if (loadingSpinner) loadingSpinner.style.display = 'none';
                    if (searchButton) searchButton.disabled = false;
                    if (paginationLinks) paginationLinks.style.display =
                        'block'; // Tampilkan kontainer pagination
                }
            });
        }
    </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>
        // Jika ada JS spesifik lain untuk halaman ini, letakkan di sini
        // $(document).ready(function() {});
    </script>
@endpush