@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }} : <span style="color: #008384;">
                                        @if (request()->has('periode') && request('periode'))
                                            Periode {{ request('periode') }}
                                        @else
                                            Periode {{ $active_periode }}
                                        @endif
                                    </span></h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        {{-- Tabel --}}
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            @php
                                                $filtered = $beasiswa; // Initialize with the original query/collection

                                                if ($user->idroles == 'hrdcek' || $user->idroles == 'admins') {
                                                    $filtered = $beasiswa
                                                        ->whereIn('trs_status', ['entry', 'rejected'])
                                                        ->where('flag_view', '1')
                                                        ->where('periode_status', '1');
                                                } elseif ($user->idroles == 'headhr') {
                                                    $filtered = $beasiswa
                                                        ->where('trs_status', 'posting')
                                                        ->where('flag_view', '1')
                                                        ->where('periode_status', '1')
                                                        ->where('is_approved_by_headhrd', '0');
                                                } elseif ($user->idroles == 'sp') {
                                                    $filtered = $beasiswa
                                                        ->where('trs_status', 'posting')
                                                        ->where('flag_view', '1')
                                                        ->where('periode_status', '1')
                                                        ->where('is_approved_by_sp', '0');
                                                }

                                                $hasFlagViewOne = $filtered->isNotEmpty();

                                                // dd($collection)

                                            @endphp
                                            <th>
                                                @if ($hasFlagViewOne)
                                                    <input type="checkbox" id="checkAll"
                                                        style="transform: scale(1.5); margin: 5px;">
                                                @endif
                                            </th>
                                            <th>No</th>
                                            <th style="display:none;">Periode</th>
                                            <th width="110">Action</th>
                                            @if ($user->idroles === 'admins')
                                                <th class="text-center">Apprv. Admin HRD</th>
                                                <th class="text-center">Apprv. Head HRD</th>
                                                <th class="text-center">Apprv. SP</th>
                                            @else
                                                <th class="text-center">Apprv. {{ $user->name }}</th>
                                            @endif
                                            <th>ID Pengajuan</th>
                                            <th>Nama Ortu/Wali</th>
                                            <th>Dept</th>
                                            <th>Nama Anak</th>
                                            <th>Jenjang</th>
                                            <th>Jenis Pend</th>
                                            <th>Nominal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $no = 1; @endphp
                                        @foreach ($beasiswa as $dt)
                                            @php
                                                $isProcessed = match ($user->idroles) {
                                                    'hrdcek' => in_array($dt->is_approved_by_hrd ?? '', ['1', '2']),

                                                    'headhr' => in_array($dt->is_approved_by_headhrd ?? '', ['1', '2']),

                                                    'sp' => in_array($dt->is_approved_by_sp ?? '', ['1', '2']),

                                                    default => in_array($dt->is_approved_by_hrd ?? '', ['1', '2']),
                                                };

                                                $isFlagViewOne = $dt->flag_view == '1';

                                                /*
                                                |--------------------------------------------------------------------------
                                                | STATUS REVISI USER
                                                |--------------------------------------------------------------------------
                                                */

                                                $revisionStatus = strtolower(
                                                    trim((string) ($dt->revision_status ?? 'none')),
                                                );

                                                $revisionEmailSent = !empty($dt->revision_email_sent_at);

                                                /*
                                                 * Artinya:
                                                 * HRD sudah mengirim permintaan revisi
                                                 * dan sekarang menunggu karyawan.
                                                 */
                                                $isWaitingRevision =
                                                    $revisionStatus === 'requested' && $revisionEmailSent;
                                            @endphp
                                            <tr
                                                style="
                                                @if ($isWaitingRevision) background-color: #f3e8ff;
                                        
                                                @elseif ($dt->isactive == '0')
                                        
                                                    background-color: #ffe9ed;
                                        
                                                @elseif ($user->idroles == 'hrdcek' && @$dt->trs_status == 'rejected' && @$dt->is_rejected_by_finance == '1')
                                        
                                                    background-color: #fff3cd;
                                        
                                                @elseif ($dt->is_approved_by_headhrd == '2')
                                        
                                                    background-color: #eafaf3;
                                        
                                                @elseif ($dt->is_approved_by_sp == '2')
                                        
                                                    background-color: #EEF3FF; @endif
                                            ">
                                                <td>
                                                    @if ($dt->flag_view == '1' && $dt->isactive == '1' && $dt->periode_status == '1' && !$isWaitingRevision)
                                                        @php
                                                            $canShowCheckbox = false;
                                                            $userRole = $user->idroles; // atau cara lain untuk mendapatkan role user

                                                            if (in_array($userRole, ['hrdcek', 'admins'])) {
                                                                // HRD atau Admin: bisa approve/reject jika belum di-approve HRD
                                                                $canShowCheckbox =
                                                                    $dt->is_approved_by_hrd == '0' ||
                                                                    ($dt->trs_status == 'rejected' &&
                                                                        $dt->is_rejected_by_finance == '1');
                                                            } elseif (in_array($userRole, ['headhr', 'admins'])) {
                                                                // Head HR: bisa approve/reject jika sudah di-approve HRD tapi belum Head HRD
                                                                $canShowCheckbox =
                                                                    $dt->is_approved_by_hrd == '1' &&
                                                                    $dt->is_approved_by_headhrd == '0';
                                                            } elseif (in_array($userRole, ['sp', 'admins'])) {
                                                                // SP: bisa approve/reject jika sudah di-approve Head HRD tapi belum SP
                                                                $canShowCheckbox =
                                                                    $dt->is_approved_by_headhrd == '1' &&
                                                                    $dt->is_approved_by_sp == '0';
                                                            }
                                                        @endphp

                                                        @if ($canShowCheckbox)
                                                            <input type="checkbox" class="row-checkbox"
                                                                value="{{ $dt->id_trs_beasiswa }}"
                                                                style="transform: scale(1.5); margin: 5px;"
                                                                data-row-index="{{ $loop->index }}"
                                                                data-id="{{ encrypt($dt->id_trs_beasiswa) }}"
                                                                data-nama="{{ $dt->nama_karyawan ?? 'N/A' }}"
                                                                data-nominal="Rp {{ number_format($dt->nominal_beasiswa, 2, ',', '.') }}"
                                                                data-status-hrd="{{ $dt->is_approved_by_hrd }}"
                                                                data-status-headhrd="{{ $dt->is_approved_by_headhrd }}"
                                                                data-status-sp="{{ $dt->is_approved_by_sp }}"
                                                                title="Bisa diproses berdasarkan status approval">
                                                        @endif
                                                    @endif
                                                </td>
                                                <td>{{ $loop->index + 1 }}</td>
                                                <td style="display:none;">{{ $dt->nama_periode }}</td>
                                                <td class="action-buttons">

                                                    <button type="submit" class="btn btn-primary mb-0 py-1 px-2 action-btn"
                                                        title="View Data" data-processed="{{ $isProcessed ? '1' : '0' }}"
                                                        onclick="updateFlagAndRedirect(
                                                            '{{ encrypt($dt->id_trs_beasiswa) }}',
                                                            'view'
                                                        )">
                                                        <i class="fas fa-eye"></i>
                                                    </button>


                                                    @if ($isWaitingRevision)
                                                        <span class="badge ms-1"
                                                            style="
                                                            background-color: #7e22ce;
                                                            color: #ffffff;
                                                            font-size: 10px;
                                                            padding: 6px 8px;
                                                        "
                                                            title="Sedang menunggu revisi dari karyawan">
                                                            <i class="fas fa-user-pen me-1"></i>

                                                            PROSES REVISI USER
                                                        </span>
                                                    @endif


                                                    {{-- EDIT --}}
                                                    @if (
                                                        $authorize->edit == '1' &&
                                                            ($dt->trs_status == 'entry' || $dt->trs_status == 'rejected') &&
                                                            $dt->isactive == '1' &&
                                                            $dt->periode_status == '1' &&
                                                            !$isWaitingRevision)
                                                        <button type="button"
                                                            class="btn btn-warning mb-0 py-1 px-2 action-btn"
                                                            title="Edit Data"
                                                            data-processed="{{ $isProcessed ? '1' : '0' }}"
                                                            onclick="updateFlagAndRedirect(
                                                                '{{ encrypt($dt->id_trs_beasiswa) }}',
                                                                'edit'
                                                            )">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                    @endif
                                                    @if ($user->idroles === 'admins')
                                                        {{-- Approval Admin/HRD --}}
                                                <td class="text-center">
                                                    @if ($isWaitingRevision)
                                                        <span class="badge"
                                                            style="
            color: white;
            background-color: #7e22ce;
        ">
                                                            <i class="fas fa-user-pen me-1"></i>
                                                            REVISI USER
                                                        </span>
                                                    @elseif ($dt->is_approved_by_hrd == '1')
                                                        <span class="badge bg-success">
                                                            SETUJU
                                                        </span>
                                                    @elseif ($dt->is_approved_by_hrd == '2')
                                                        <span class="badge bg-danger">
                                                            TOLAK
                                                        </span>
                                                    @else
                                                        <span class="badge"
                                                            style="
            color:white;
            background-color:#ff9800;
        ">
                                                            PENDING
                                                        </span>
                                                    @endif
                                                </td>

                                                {{-- Approval Head HRD --}}
                                                <td class="text-center">
                                                    @if ($dt->is_approved_by_headhrd == '1')
                                                        <span class="badge bg-success">SETUJU</span>
                                                    @elseif ($dt->is_approved_by_headhrd == '2')
                                                        <span class="badge bg-danger">TOLAK</span>
                                                    @else
                                                        <span class="badge" style="color:white; background-color:#ff9800;">
                                                            PENDING
                                                        </span>
                                                    @endif
                                                </td>

                                                {{-- Approval SP --}}
                                                <td class="text-center">
                                                    @if ($dt->is_approved_by_sp == '1')
                                                        <span class="badge bg-success">SETUJU</span>
                                                    @elseif ($dt->is_approved_by_sp == '2')
                                                        <span class="badge bg-danger">TOLAK</span>
                                                    @else
                                                        <span class="badge" style="color:white; background-color:#ff9800;">
                                                            PENDING
                                                        </span>
                                                    @endif
                                                </td>
                                            @else
                                                <td class="text-center">
                                                    @if ($user->idroles === 'hrdcek')
                                                        @if ($isWaitingRevision)
                                                            <span class="badge"
                                                                style="
                                                            color: white;
                                                            background-color: #7e22ce;
                                                        ">
                                                                <i class="fas fa-user-pen me-1"></i>
                                                                REVISI USER
                                                            </span>
                                                        @elseif ($dt->is_approved_by_hrd == '1')
                                                            <span class="badge bg-success">
                                                                SETUJU
                                                            </span>
                                                        @elseif ($dt->is_approved_by_hrd == '2')
                                                            <span class="badge bg-danger">
                                                                TOLAK
                                                            </span>
                                                        @else
                                                            <span class="badge"
                                                                style="
                                                            color:white;
                                                            background-color:#ff9800;
                                                        ">
                                                                PENDING
                                                            </span>
                                                        @endif
                                                    @elseif ($user->idroles === 'headhr')
                                                        @if ($dt->is_approved_by_headhrd == '1')
                                                            <span class="badge bg-success">SETUJU</span>
                                                        @elseif ($dt->is_approved_by_headhrd == '2')
                                                            <span class="badge bg-danger">TOLAK</span>
                                                        @else
                                                            <span class="badge"
                                                                style="color:white; background-color:#ff9800;">
                                                                PENDING
                                                            </span>
                                                        @endif
                                                    @elseif ($user->idroles === 'sp')
                                                        @if ($dt->is_approved_by_sp == '1')
                                                            <span class="badge bg-success">SETUJU</span>
                                                        @elseif ($dt->is_approved_by_sp == '2')
                                                            <span class="badge bg-danger">TOLAK</span>
                                                        @else
                                                            <span class="badge"
                                                                style="color:white; background-color:#ff9800;">
                                                                PENDING
                                                            </span>
                                                        @endif
                                                    @endif
                                                </td>
                                        @endif
                                        <td>{{ $dt->id_trs_beasiswa }}</td>
                                        <td>{{ $dt->nama_karyawan }}</td>
                                        <td>{{ $dt->dept }}</td>
                                        <td>{{ $dt->nama_anak_kk }}</td>
                                        <td>{{ $dt->jenjang_name ?? $dt->jenjang_pendidikan }}</td>
                                        <td>{{ $dt->jenis_pendidikan_name ?? $dt->jenis_pendidikan }}</td>
                                        <td style="text-align:right;">Rp
                                            {{ number_format($dt->nominal_beasiswa, 2, ',', '.') }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="d-flex justify-content-between align-items-center">
                                    {{-- <div>
                                        Data 1 - {{ count($beasiswa) }} dari {{ count($beasiswa) }} data.
                                    </div> --}}
                                    {{-- <div>
                                        {{ $beasiswa->appends(request()->query())->links('pagination::bootstrap-4') }}
                                    </div> --}}
                                </div>
                            </div>
                        </div>

                        {{-- Note --}}
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted">
                                    <code>
                                        Note :

                                        <i aria-hidden="true" style="color: #d8b4fe;" class="fas fa-circle"></i>
                                        Proses Revisi User |

                                        <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i>
                                        Data not active |

                                        <i aria-hidden="true" style="color: #eafaf3;" class="fas fa-circle"></i>
                                        Rejected by Head of HRD |

                                        <i aria-hidden="true" style="color: #EEF3FF;" class="fas fa-circle"></i>
                                        Rejected by Ketua Serikat Pekerja

                                        @if ($user->idroles == 'hrdcek')
                                            |

                                            <i aria-hidden="true" style="color: #fff3cd;" class="fas fa-circle"></i>

                                            Rejected by Finance
                                        @endif
                                    </code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Filter Periode --}}
    <div class="modal fade" id="periodeModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalLabel">Pilih Periode Beasiswa</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-hover display" id="list_periode">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="20px">Action</th>
                                    <th>Nama Periode</th>
                                    <th>Tanggal Mulai</th>
                                    <th>Tanggal Selesai</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($filter as $periode)
                                    <tr data-periode-id="{{ $periode->id_periode }}"
                                        data-periode-name="{{ $periode->nama_periode }}">
                                        <td width="20px">
                                            <span class="btn badge bg-primary select-periode-btn"
                                                style="cursor: pointer;">
                                                <i class="bi bi-check-circle me-1"></i>
                                                Select
                                            </span>
                                        </td>
                                        <td>{{ $periode->nama_periode }}</td>
                                        <td>{{ \Carbon\Carbon::parse($periode->tanggal_mulai)->format('d/m/Y') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($periode->tanggal_berakhir)->format('d/m/Y') }}</td>
                                        <td>
                                            @if ($periode->isactive == '1')
                                                <span class="badge bg-success">Aktif</span>
                                            @else
                                                <span class="badge bg-secondary">Non-Aktif</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Bulk Action Modal --}}
    <div class="modal fade" id="bulkActionModal" tabindex="-1" role="dialog" 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="bulkActionModalLabel">Konfirmasi Aprroval</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="bulkActionForm" method="POST">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="action" id="bulkActionType">
                        <input type="hidden" id="bulkSelectedIds">

                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="form-label">Jumlah Pengajuan Terpilih:</label>
                                <span class="badge bg-primary fs-6" id="selectedCount">0</span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="bulkNotes" class="form-label">Silakan masukkan catatan sebagai alasan keputusan
                                Anda</label>
                            <textarea name="notes" id="bulkNotes" class="form-control" rows="3" maxlength="200"
                                placeholder="Tulis alasan Anda...">

                            </textarea>
                            <div class="form-text">Maksimal 200 karakter</div>
                        </div>

                        <div id="notesRequiredAlert" class="alert alert-warning d-none mt-2">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Catatan wajib diisi untuk tindakan penolakan.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-2"></i>Batal
                        </button>
                        <button type="submit" class="btn btn-primary" id="confirmBulkBtn" disabled>
                            <i class="fas fa-check me-2"></i><span id="confirmBtnText">Konfirmasi</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        let isCheckAllActive = false;
        let selectedCheckboxes = {};
        let table;

        // Document ready
        $(document).ready(function() {
            const tableId = '#list_{{ $dmenu }}';
            table = initializeDataTable();

            // Handle individual checkbox change
            $(document).on('change', '.row-checkbox', function() {
                const id = $(this).val();
                const encryptedId = $(this).data('id');
                const nama = $(this).data('nama');
                const nominal = $(this).data('nominal');

                if (this.checked) {
                    selectedCheckboxes[id] = {
                        encryptedId: encryptedId,
                        nama: nama,
                        nominal: nominal
                    };
                } else {
                    selectedCheckboxes = {};
                    table.rows().every(function() {
                        const row = this.node();
                        const $checkbox = $(row).find('.row-checkbox');
                        if ($checkbox.length) {
                            $checkbox.prop('checked', false);
                        }
                    });
                    sessionStorage.setItem('selectedCheckboxes', JSON.stringify(selectedCheckboxes));
                    isCheckAllActive = false;
                }

                updateActionButtons();
                updateButtonState();
                updateCheckAllStatus();


            });

            // Handle check all
            $(document).on('change', '#checkAll', function() {
                if ($(this).is(':disabled')) return;

                isCheckAllActive = this.checked;

                if (this.checked) {
                    // Clear previous selections
                    selectedCheckboxes = {};

                    // Loop through all rows in DataTable
                    table.rows().every(function() {
                        const row = this.node();
                        const $checkbox = $(row).find('.row-checkbox');
                        if ($checkbox.length) {
                            const id = $checkbox.val();
                            const encryptedId = $checkbox.data('id');
                            const nama = $checkbox.data('nama');
                            const nominal = $checkbox.data('nominal');

                            selectedCheckboxes[id] = {
                                encryptedId: encryptedId,
                                nama: nama,
                                nominal: nominal
                            };
                            $checkbox.prop('checked', true);
                        }
                    });
                } else {
                    // Uncheck all
                    selectedCheckboxes = {};
                    $('.row-checkbox').prop('checked', false);
                    sessionStorage.setItem('selectedCheckboxes', JSON.stringify(selectedCheckboxes));
                    isCheckAllActive = false;
                }

                // Save to sessionStorage
                sessionStorage.setItem('selectedCheckboxes', JSON.stringify(selectedCheckboxes));

                updateActionButtons();
                updateButtonState();
                updateCheckAllStatus();


            });

            // Restore checkbox state on page change
            $(document).on('draw.dt', tableId, function() {
                updateActionButtons();
                restoreCheckboxState();
                updateCheckAllStatus();
                updateButtonState();
            });

            // Handle select periode button click
            $(document).on('click', '.select-periode-btn', function() {
                const $row = $(this).closest('tr');
                const id = $row.data('periode-id');
                const name = $row.data('periode-name');
                selectPeriode(id, name);
            });

            // Handle modal shown event
            $('#periodeModal').on('shown.bs.modal', function() {
                initializePeriodeModalTable();
            });

            // Bulk action button handlers
            $(document).on('click', '#approveAllBtn', function(e) {
                e.preventDefault();
                handleBulkAction('approve');
            });

            $(document).on('click', '#rejectAllBtn', function(e) {
                e.preventDefault();
                handleBulkAction('reject');
            });

            // Handle notes input for reject action
            $(document).on('input', '#bulkNotes', function() {
                const actionType = $('#bulkActionType').val();
                console.log('Input event triggered, actionType:', actionType, 'Notes:', $(this)
                    .val()); // Debug
                if (actionType === 'reject') {
                    const notesValue = $(this).val().trim();
                    const isValid = notesValue.length > 0;
                    console.log('Notes value:', notesValue, 'Is valid:', isValid); // Debug
                    $('#confirmBulkBtn').prop('disabled', !isValid);
                    $('#notesRequiredAlert').toggleClass('d-none', isValid);

                    // Update character count
                    const remaining = 200 - $(this).val().length;
                    $(this).next('.form-text').html(`Maksimal 200 karakter | Tersisa: ${remaining}`);
                }
            });

            // Handle bulk form submission
            $('#bulkActionForm').on('submit', function(e) {
                e.preventDefault();

                const form = $(this);
                const actionType = $('#bulkActionType').val();
                const selectedCount = $('#selectedCount').text();
                const notes = $('#bulkNotes').val().trim();

                // Final validation
                if (actionType === 'reject' && !notes) {
                    $('#notesRequiredAlert').removeClass('d-none');
                    $('#bulkNotes').focus();
                    return;
                }

                // Confirmation dialog
                Swal.fire({
                    title: `Konfirmasi ${actionType === 'approve' ? 'Approve' : 'Reject'} Semua`,
                    html: `
                        <div class="text-center">
                            <p>Apakah Anda yakin ingin <strong>${actionType === 'approve' ? 'menyetujui' : 'menolak'}</strong> <strong>${selectedCount}</strong> pengajuan sekaligus?</p>
                            ${actionType === 'reject' ? `<p class="text-danger mt-2"><small>Catatan: "${notes.substring(0, 50)}${notes.length > 50 ? '...' : ''}"</small></p>` : ''}
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: `Ya, ${actionType === 'approve' ? 'Setujui' : 'Tolak'} Semua`,
                    cancelButtonText: 'Batal',
                    confirmButtonColor: actionType === 'approve' ? '#28a745' : '#dc3545',
                    reverseButtons: true,
                    customClass: {
                        confirmButton: 'btn btn-success',
                        cancelButton: 'btn btn-secondary'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Show loading
                        Swal.fire({
                            title: 'Memproses...',
                            html: `
                                <div class="text-center">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p class="mt-2">Mohon tunggu, sedang memproses ${selectedCount} pengajuan...</p>
                                </div>
                            `,
                            allowOutsideClick: false,
                            showConfirmButton: false,
                            allowEscapeKey: false
                        });

                        // Prepare form data
                        const formData = new FormData(form[0]);
                        const url = "{{ url($url_menu . '/approve-all') }}";

                        // Submit via AJAX
                        $.ajax({
                            url: url,
                            method: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                let icon = 'success';
                                let title = 'Selesai!';
                                let html = `
                                    <div class="text-center">
                                        <h6 class="text-success mb-3">${response.message}</h6>
                                `;

                                if (response.success_count > 0) {
                                    html +=
                                        `<p class="text-success mb-2"><i class="fas fa-check-circle me-1"></i>Berhasil: <strong>${response.success_count}</strong></p>`;
                                }

                                if (response.error_count > 0) {
                                    html +=
                                        `<p class="text-danger mb-0"><i class="fas fa-exclamation-triangle me-1"></i>Gagal: <strong>${response.error_count}</strong></p>`;
                                    if (response.errors && response.errors.length > 0) {
                                        html +=
                                            `<div class="mt-2"><small class="text-muted">Detail error:</small><ul class="small mt-1 mb-0">`;
                                        response.errors.slice(0, 5).forEach(function(
                                            error) {
                                            html +=
                                                `<li class="text-danger">${error}</li>`;
                                        });
                                        if (response.errors.length > 5) {
                                            html +=
                                                `<li class="text-danger">... dan ${response.errors.length - 5} error lainnya</li>`;
                                        }
                                        html += `</ul></div>`;
                                    }
                                }

                                html += `</div>`;

                                Swal.fire({
                                    icon: icon,
                                    title: title,
                                    html: html,
                                    confirmButtonText: 'OK',
                                    confirmButtonColor: '#028284',
                                    allowOutsideClick: false
                                }).then(() => {
                                    // Close modal
                                    $('#bulkActionModal').modal('hide');

                                    // Reset checkboxes and sessionStorage
                                    selectedCheckboxes = {};
                                    sessionStorage.setItem('selectedCheckboxes',
                                        JSON.stringify(selectedCheckboxes));
                                    $('.row-checkbox').prop('checked', false);
                                    $('#checkAll').prop('checked', false);
                                    isCheckAllActive = false;

                                    // Update button states
                                    updateButtonState();
                                    updateActionButtons();

                                    // Reload table data
                                    location.reload();
                                });
                            },
                            error: function(xhr, status, error) {
                                console.error('AJAX Error:', xhr.responseText);

                                let errorMessage =
                                    'Terjadi kesalahan saat memproses data';
                                let errorTitle = 'Error!';

                                try {
                                    const response = JSON.parse(xhr.responseText);
                                    errorMessage = response.message || errorMessage;

                                    if (response.errors) {
                                        const errors = Object.values(response.errors)
                                            .flat();
                                        errorMessage += '<br><ul class="mt-2 mb-0">' +
                                            errors.slice(0, 3).map(err =>
                                                `<li>${err}</li>`).join('') +
                                            (errors.length > 3 ?
                                                `<li>... dan ${errors.length - 3} error lainnya</li>` :
                                                '') +
                                            '</ul>';
                                    }
                                } catch (e) {
                                    if (xhr.status === 422) {
                                        errorTitle = 'Validasi Error';
                                        errorMessage =
                                            'Data yang dimasukkan tidak valid. Silakan periksa kembali.';
                                    } else if (xhr.status === 401) {
                                        errorTitle = 'Unauthorized';
                                        errorMessage =
                                            'Sesi Anda telah berakhir. Silakan login kembali.';
                                        setTimeout(() => {
                                            window.location.href =
                                                "{{ url('/login') }}";
                                        }, 2000);
                                    }
                                }

                                Swal.fire({
                                    icon: 'error',
                                    title: errorTitle,
                                    html: errorMessage,
                                    confirmButtonText: 'OK',
                                    confirmButtonColor: '#dc3545'
                                });
                            }
                        });
                    }
                });
            });

            // Handle back button for view/edit pages
            $(document).on('click', '.back-btn', function(e) {
                e.preventDefault();
                window.location.href = "{{ url($url_menu) }}"; // Redirect to default page
            });

            // Delete confirmation
            window.deleteData = function(event, name, msg) {
                event.preventDefault();
                Swal.fire({
                    title: 'Konfirmasi',
                    text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: `Ya, ${msg}`,
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#028284'
                }).then((result) => {
                    if (result.isConfirmed) {
                        event.target.closest('form').submit();
                    }
                });
            }
        });

        function rollbackApproval(encryptedId) {
            Swal.fire({
                title: 'Kembalikan Approval',
                html: `
                    <p class="mb-1">
                        Approval terakhir akan dikembalikan menjadi
                        <strong>pending</strong>.
                    </p>
                    <p class="mb-0 text-muted">
                        Tahap approval sebelumnya tidak akan berubah.
                    </p>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Kembalikan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284',
                cancelButtonColor: '#6c757d',
                reverseButtons: true,
                width: 480
            }).then((result) => {
                if (!result.isConfirmed) {
                    return;
                }

                Swal.fire({
                    title: 'Memproses...',
                    text: 'Mohon tunggu.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: "{{ url($url_menu . '/rollback-approval') }}/" +
                        encodeURIComponent(encryptedId),

                    type: 'POST',

                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },

                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: response.message,
                            confirmButtonColor: '#028284'
                        }).then(() => {
                            location.reload();
                        });
                    },

                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: xhr.responseJSON?.message ||
                                'Gagal mengembalikan approval.',
                            confirmButtonColor: '#028284'
                        });
                    }
                });
            });
        }

        // Restore checkbox state
        function restoreCheckboxState() {
            $('.row-checkbox').each(function() {
                const id = $(this).val();
                $(this).prop('checked', !!selectedCheckboxes[id]);
            });
            updateCheckAllStatus();

        }

        // Update check all status
        function updateCheckAllStatus() {
            if ($('#checkAll').length === 0) return;

            const visibleCheckboxes = $('.row-checkbox:visible');
            const checkedCount = $('.row-checkbox:visible:checked').length;
            const totalVisible = visibleCheckboxes.length;
            const totalSelected = Object.keys(selectedCheckboxes).length;

            if (totalVisible === 0) {
                $('#checkAll').prop('checked', false);
                isCheckAllActive = false;
                return;
            }

            // If all visible checkboxes are checked and there are selections across pages
            if (checkedCount === totalVisible && totalVisible > 0 && totalSelected >= totalVisible) {
                $('#checkAll').prop('checked', true);
            }
            // If there are selections (either on current page or other pages), but not all visible are checked
            else if (totalSelected > 0) {
                $('#checkAll').prop('checked', true);
                // $('#checkAll').prop('indeterminate', checkedCount > 0 && checkedCount < totalVisible);
            } else {
                $('#checkAll').prop('checked', false);
                isCheckAllActive = false;
            }
        }

        function initializeDataTable() {
            const tableId = '#list_{{ $dmenu }}';

            if ($.fn.DataTable.isDataTable(tableId)) {
                $(tableId).DataTable().destroy();
            }

            // Initialize DataTable
            table = $(tableId).DataTable({
                paging: true,
                info: true,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                columnDefs: [{
                        orderable: false,
                        targets: [0]
                    }, // Disable sorting on checkbox and action columns
                    {
                        targets: 1
                    } // Ensure sorting respects hidden periode column
                ],
                order: [
                    [1, 'asc']
                ], // Default sort by No column
                dom: '<"row mb-2 d-flex justify-content-between align-items-center"' +
                    '<"col-md-6 d-flex align-items-center"B>' +
                    '<"col-md-6 d-flex justify-content-end custom-filter">' +
                    '>' +
                    '<"row mb-2 d-flex justify-content-between align-items-center"' +
                    '<"col-md-6 d-flex align-items-center custom-approve">' +
                    '<"col-md-6 d-flex justify-content-end custom-search">' +
                    '>' +
                    'rtip',
                buttons: [{
                        text: '<i class="fas fa-file-excel me-2 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                        action: function() {
                            const url = new URL(window.location.href);
                            url.searchParams.set('export', 'excel');
                            window.location.href = url.toString();
                        },
                        className: 'btn btn-secondary'
                    },
                    {
                        text: '<i class="fas fa-file-pdf me-2 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                        action: function() {
                            const url = new URL(window.location.href);
                            url.searchParams.set('export', 'pdf');
                            window.location.href = url.toString();
                        },
                        className: 'btn btn-secondary'
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print</span>',
                        orientation: 'landscape',
                        pageSize: 'A4',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        },
                        className: 'btn btn-secondary'
                    }
                ],
                initComplete: function() {
                    // console.log('DataTable initialized for', tableId);

                    // Inject filter dengan modal
                    var filterHtml = `
                        <div class="d-flex align-items-center">
                            <label class="form-label mb-0 me-2">Filter Periode</label>
                            <div class="input-group" style="width: 250px;">
                                <input type="search" name="periode" id="periode_input"
                                    class="form-control border-2" placeholder="Pilih periode..."
                                    value="{{ $active_periode }}" readonly required>
                                <input type="hidden" name="id_periode" id="id_periode"
                                    value="{{ $activePeriod->id_periode ?? '' }}">
                                <span class="input-group-text bg-primary text-light"
                                    data-bs-toggle="modal" data-bs-target="#periodeModal"
                                    style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </div>
                    `;
                    $('.custom-filter').empty().append(filterHtml);

                    // Inject approve/reject buttons
                    var actionBtns = `
                        <div class="d-flex align-items-center">
                            <button id="approveAllBtn" class="btn btn-primary me-2" disabled title="Approve Selected">
                                <i class="fas fa-check me-1"></i>Approve All
                            </button>
                            <button id="rejectAllBtn" class="btn btn-danger me-2" disabled title="Reject Selected">
                                <i class="fas fa-times me-1"></i>Reject All
                            </button>
                            <span id="selectedCountDisplay" class="badge bg-secondary ms-2" style="display: none;">
                                <span id="selectedCountNum">0</span> terpilih
                            </span>
                        </div>
                    `;
                    $('.custom-approve').empty().append(actionBtns);

                    // Add custom search bar
                    var searchBarHtml = `
                        <div class="dataTables_filter d-flex justify-content-end">
                            <form method="GET" action="{{ url($url_menu) }}" class="d-flex">
                                <input type="text" name="search" id="customSearch" class="form-control me-2" placeholder="Search..." value="{{ request('search') }}">
                            </form>
                        </div>
                    `;
                    $('.dataTables_filter').remove();
                    $('.custom-search').empty().append(searchBarHtml);

                    // Handle search input
                    $('#customSearch').on('change keyup', function() {
                        table.search(this.value).draw();
                        restoreCheckboxState();
                        updateButtonState();
                    });

                    // Initialize periode modal DataTable
                    initializePeriodeModalTable();
                }
            });

            // Ensure buttons are styled correctly
            table.buttons().container().find('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
            console.log('DataTable buttons styled');
            return table;
        }

        // Initialize Periode Modal DataTable
        function initializePeriodeModalTable() {
            if ($.fn.DataTable.isDataTable('#list_periode')) {
                $('#list_periode').DataTable().destroy();
            }
            $('#list_periode').DataTable({
                searching: true,
                info: true,
                paging: true
            });
        }

        // Select periode function
        function selectPeriode(id, name) {
            $('#periode_input').val(name);
            $('#id_periode').val(id);

            // Close modal
            $('#periodeModal').modal('hide');

            // Clear selections before applying filter
            selectedCheckboxes = {};
            sessionStorage.setItem('selectedCheckboxes', JSON.stringify(selectedCheckboxes));
            applyPeriodeFilter(id, name);
        }

        // Apply periode filter
        function applyPeriodeFilter(id, name) {
            let url = "{{ url($url_menu) }}";
            let search = $('#customSearch').val();
            let queryParams = {};

            if (id && name) {
                queryParams.periode = name;
                queryParams.id_periode = id;
            }
            if (search) {
                queryParams.search = search;
            }

            // Redirect to URL with query parameters
            window.location.href = url + (Object.keys(queryParams).length ? '?' + $.param(queryParams) : '');
        }

        // Update button state and selection display
        function updateButtonState() {
            const totalSelected = Object.keys(selectedCheckboxes).length;
            const visibleCheckboxes = $('.row-checkbox:visible').length;

            $('#approveAllBtn, #rejectAllBtn').prop('disabled', totalSelected === 0);

            if (totalSelected > 0) {
                $('#selectedCountDisplay').removeClass('d-none').find('#selectedCountNum').text(totalSelected);
            } else {
                $('#selectedCountDisplay').addClass('d-none');
            }
        }

        // Update action buttons based on selection
        function updateActionButtons() {
            const totalSelected = Object.keys(selectedCheckboxes).length;
            // const allChecked = $('#checkAll').length && $('#checkAll').is(':checked');
            const allChecked = isCheckAllActive;

            if (allChecked == true || totalSelected > 1) {
                $('.action-btn').prop('disabled', true);
            } else if (totalSelected === 1) {
                $('.row-checkbox:checked').closest('tr').find('.action-btn').prop('disabled', false);
                $('.row-checkbox:not(:checked)').closest('tr').find('.action-btn').prop('disabled', true);
            } else {
                $('.action-btn').prop('disabled', false);
            }
        }

        // Handle bulk action
        function handleBulkAction(actionType) {
            const checkedIds = Object.keys(selectedCheckboxes);

            if (checkedIds.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Pilih minimal 1 pengajuan untuk diproses',
                    timer: 2000,
                    showConfirmButton: false
                });
                return;
            }

            // Set modal data
            $('#bulkActionType').val(actionType);
            $('#bulkSelectedIds').empty();

            // Add each encrypted ID as a separate input field
            checkedIds.forEach(function(id) {
                const item = selectedCheckboxes[id];
                if (item && item.encryptedId) {
                    const input = $('<input>').attr({
                        type: 'hidden',
                        name: 'ids[]',
                        value: item.encryptedId
                    });
                    $('#bulkSelectedIds').append(input);
                }
            });

            $('#selectedCount').text(checkedIds.length);

            const defaultNotes = actionType === 'approve' ?
                `Approved by {{ $user->firstname }}{{ $user->lastname ? ' ' . $user->lastname : '' }}` :
                '';

            $('#bulkNotes').val(defaultNotes);

            // Show/hide notes field based on action
            const $notesSection = $('#bulkNotes').closest('.mb-3');
            const $alert = $('#notesRequiredAlert');

            if (actionType === 'approve') {
                $('#bulkNotes').prop('required', false);
                $notesSection.show();
                $alert.addClass('d-none');
                $('#confirmBulkBtn').prop('disabled', false);
                $('#confirmBtnText').text('Setujui Semua');
            } else {
                $('#bulkNotes').prop('required', true);
                $notesSection.show();
                const notesValue = $('#bulkNotes').val().trim();
                const isValid = notesValue.length > 0;
                $('#confirmBulkBtn').prop('disabled', !isValid); // Enable if notes exist
                $alert.toggleClass('d-none', isValid);
                $('#confirmBtnText').text('Tolak Semua');
            }

            // Show modal
            $('#bulkActionModal').modal('show');

            // Ensure button state is updated when modal is shown
            $('#bulkActionModal').on('shown.bs.modal', function() {
                console.log('Bulk action modal shown, actionType:', actionType); // Debug
                if (actionType === 'reject') {
                    const notesValue = $('#bulkNotes').val().trim();
                    const isValid = notesValue.length > 0;
                    console.log('Modal shown, Notes:', notesValue, 'Is valid:', isValid); // Debug
                    $('#confirmBulkBtn').prop('disabled', !isValid);
                    $('#notesRequiredAlert').toggleClass('d-none', isValid);
                }
            });
        }

        // Helper function to handle encrypted IDs
        function encryptIdForForm(id) {
            return encodeURIComponent(id);
        }

        function updateFlagAndRedirect(idencrypt, action) {
            // Ambil tombol yang diklik
            const button = $(`button[onclick="updateFlagAndRedirect('${idencrypt}', '${action}')"]`);
            const isAlreadyProcessed = button.data('processed') == '1'; // Ini yang bener!
            const isFlagViewOne = button.data('flag-view') == '1';

            console.log('isAlreadyProcessed:', isAlreadyProcessed);

            // Tentukan URL tujuan
            const viewUrl = '{{ url($url_menu . '/show') }}/' + encodeURIComponent(idencrypt);
            const editUrl = '{{ url($url_menu . '/edit') }}/' + encodeURIComponent(idencrypt);
            const redirectUrl = action === 'view' ? viewUrl : editUrl;

            // Kalau sudah diproses → langsung redirect
            if (isAlreadyProcessed || isFlagViewOne) {
                console.log('Sudah diproses → langsung ke:', redirectUrl);
                window.location.href = redirectUrl;
                return;
            }

            // // Kalau belum → update flag dulu
            // button.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Loading...');

            $.ajax({
                url: '{{ url($url_menu . '/update-flag-view') }}/' + encodeURIComponent(idencrypt),
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log('Flag updated');
                    window.location.href = redirectUrl;
                },
                error: function(xhr) {
                    button.prop(' Hide disabled', false).html(action === 'view' ? 'View' : 'Edit');
                    Swal.fire('Error', xhr.responseJSON?.error || 'Gagal update flag', 'error');
                }
            });
        }
    </script>
@endpush