@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@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">
                    {{-- Mencari data secara async --}}
                    <div class="card mb-4">
                        <div class="card-header col-md-auto"> {{-- Menyelaraskan judul --}}
                            <h5 class="mb-0">Pencarian</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="card-body">
                            <div class="row">
                                {{-- Tahun --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="tahun">Tahun</label>
                                        <select name="tahun" id="tahun-select" class="form-select">
                                            <option value="" {{ empty($yearByPeriode->tahun) ? 'selected' : '' }}>
                                                Perlihatkan Semua
                                            </option>
                                            @foreach ($tahun as $thn)
                                                <option value="{{ $thn->value }}"
                                                    {{ isset($yearByPeriode->tahun) && $yearByPeriode->tahun == $thn->value ? 'selected' : '' }}>
                                                    {{ $thn->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="periode">Periode</label>
                                        <select name="periode" id="periode-select" class="form-select">
                                            <option value="" {{ empty($IdPeriode) ? 'selected' : '' }}>Perlihatkan
                                                Semua
                                            </option>
                                            @foreach ($periode as $prd)
                                                <option value="{{ $prd->id }}"
                                                    {{ isset($IdPeriode) && $IdPeriode == $prd->id ? 'selected' : '' }}>
                                                    {{ $prd->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="departemen">Departemen</label>
                                        <select name="departemen" id="departemen-select" class="form-select">
                                            <option value="" {{ empty($IdDepartemen) ? 'selected' : '' }}>Perlihatkan
                                                Semua
                                            </option>
                                            @foreach ($departemen as $dep)
                                                <option value="{{ $dep->id }}"
                                                    {{ isset($IdDepartemen) && $IdDepartemen == $dep->id ? 'selected' : '' }}>
                                                    {{ $dep->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="free_search">Pencarian Bebas</label>
                                        <input type="text" id="searchInput" class="form-control"
                                            placeholder="Pencarian Bebas...">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button class="btn btn-primary" id="searchButton">
                                        Cari
                                        <!-- Spinner (hidden by default) -->
                                        <div id="loading-spinner" class="spinner-border spinner-border-sm text-light"
                                            role="status" style="display: none; margin-left: 10px;">
                                            <span class="sr-only">Loading...</span>
                                        </div>
                                    </button>
                                    <script>
                                        $(document).ready(function() {
                                            $('#searchInput').on('keypress', function(e) {
                                                if (e.which == 13) { // Enter key pressed
                                                    $('#searchButton').click(); // Trigger the button click event
                                                }
                                            });
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">
                                    <div class="col">
                                        {{-- button back --}}
                                        <button class="btn btn-secondary mb-0"
                                            onclick="window.location.href='{{ url('/rpitm1') }}'"><i
                                                class="fas fa-circle-left me-1"> </i><span
                                                class="font-weight-bold">Kembali</button>
                                    </div>
                                    <div class="col-md-3 md-auto justify-content-end row">
                                        <div class="col">
                                            {{-- set value filter --}}
                                                                                        @foreach ($filter as $key => $value)
                                                <input type="hidden" name="f{{ $key }}"
                                                    value="{{ $value }}" />
                                                @php
                                                    if (
                                                        preg_replace('/\s+/', '', strtolower(@$table_class->alias)) ==
                                                        preg_replace('/\s+/', '', strtolower($key))
                                                    ) {
                                                        $check_filter = $value == '%' ? '' : $value;
                                                    }
                                                @endphp
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="d-flex">
                                <button onclick="exportToExcel(event)" 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 export data dengan menyesuaikan dengan filter yang dipilih (pastikan untuk
                                memilih
                                filter
                                yang di inginkan)</p>
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    {{-- check result data --}}
                                    @if ($table_result)
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                {{-- set table header --}}
                                                @foreach ($table_result as $result)
                                                    @php
                                                        $sAsArray = array_keys((array) $result);
                                                        $i = 0;
                                                    @endphp
                                                @endforeach
                                                <th>No</th>
                                                @foreach ($sAsArray as $header)
                                                    @if (substr($header, 0, 3) == 'IMG')
                                                        <th>{{ substr($header, 4) }}</th>
                                                    @elseif (substr($header, 0, 3) == 'CDT')
                                                        <th>{{ substr($header, 6) . '-' . substr($header, 3, 2) }}</th>
                                                    @else
                                                        <th>{{ $header }}</th>
                                                    @endif
                                                    @php
                                                        $i++;
                                                    @endphp
                                                @endforeach
                                                <!-- Tambahkan kolom Action -->
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- retrieve table result --}}
                                            @foreach ($table_result as $detail)
                                                <tr
                                                    {{ @$detail->isactive == '0' || @$detail->ISACTIVE == '0' ? 'style=background-color:#ffe9ed;' : '' }}>
                                                    @foreach ($table_result as $result)
                                                        @php
                                                            $field = array_keys((array) $result);
                                                            $i = 0;
                                                        @endphp
                                                    @endforeach
                                                    <td>{{ $loop->iteration }}</td>
                                                    @foreach ($field as $header)
                                                        @php
                                                            $string = $header;
                                                            $img_id = '';
                                                            $characters =
                                                                'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
                                                            for ($i = 0; $i < 10; $i++) {
                                                                $img_id .=
                                                                    $characters[mt_rand(0, strlen($characters) - 1)];
                                                        } @endphp @if (substr($string, 0, 3) == 'IMG')
                                                            <td class="text-sm font-weight-normal">
                                                                <span class="my-2 text-xs">
                                                                    <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                        alt="image" style="height: 40px;"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#{{ $img_id }}">
                                                                </span>
                                                                <span
                                                                    style="display: none;">{{ asset('/storage' . '/' . $detail->$string) }}
                                                                </span>
                                                                <!-- Modal -->
                                                                <div class="modal fade" id="{{ $img_id }}"
                                                                    tabindex="-1" role="dialog"
                                                                    aria-labelledby="imageModalLabel" 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="imageModalLabel">
                                                                                    Preview Image
                                                                                </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">
                                                                                <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                                    id="preview" alt="image"
                                                                                    class="w-100 border-radius-lg shadow-sm">
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        @elseif (substr($string, 0, 3) == 'CDT')
                                                            <td class="text-sm font-weight-normal {{ $detail->$string }}">
                                                                {{ $detail->$string }}
                                                            </td>
                                                            <script>
                                                                var inputDate = new Date('{{ $detail->$string }}');
                                                                var currentDate = new Date();
                                                                var futureDate = new Date(currentDate.setDate(currentDate.getDate() + parseInt('{{ substr($string, 3, 2) }}')));

                                                                if (inputDate <= futureDate) {
                                                                    $('.{{ $detail->$string }}').parents('tr').addClass('exp');
                                                                    $('.{{ $detail->$string }}').parents('tr').css('background-color', '#ffe768');
                                                                }
                                                            </script>
                                                        @else
                                                            @if (
                                                                $header == 'Total Permohonan' ||
                                                                    $header == 'Jumlah Izin <= 3 Jam' ||
                                                                    $header == 'Jumlah Izin > 3 Jam < 6 Jam' ||
                                                                    $header == 'Jumlah Izin >= 6 Jam' ||
                                                                    $header == 'Jumlah Tugas' ||
                                                                    $header == 'Jumlah Izin' ||
                                                                    $header == 'Total Potongan (Hari)')
                                                                <td class="text-sm font-weight-normal text-end">
                                                                    {{ $detail->$string }} </td>
                                                            @else
                                                                <td class="text-sm font-weight-normal">
                                                                    {{ $detail->$string }}
                                                                </td>
                                                            @endif
                                                        @endif
                                                        @php
                                                            $i++;
                                                        @endphp
                                                    @endforeach
                                                    <!-- Tambahkan kolom Action -->
                                                    <td>
                                                        <form action="{{ url('/rpitm1/result/redirect') }}"
                                                            method="GET" style="display:inline;">
                                                            <input type="hidden" name="search-periode"
                                                                value="{{ $detail->ID }}">
                                                            <button type="submit" class="btn btn-sm btn-primary"
                                                                id="action-btn-history-{{ $detail->ID }}">
                                                                Lihat history permohonan
                                                            </button>
                                                        </form>

                                                        <button type="button" class="btn btn-sm btn-primary"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#offsetModal{{ $detail->ID }}">
                                                            Lihat permohonan offset
                                                        </button>

                                                        <!-- Modal for Offset -->
                                                        <div class="modal fade" id="offsetModal{{ $detail->ID }}"
                                                            tabindex="-1"
                                                            aria-labelledby="offsetModalLabel{{ $detail->ID }}"
                                                            aria-hidden="true">
                                                            <div class="modal-dialog">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title"
                                                                            id="offsetModalLabel{{ $detail->ID }}">
                                                                            Masukkan Offset Waktu</h5>
                                                                        <button type="button" class="btn-close"
                                                                            data-bs-dismiss="modal"
                                                                            aria-label="Close"></button>
                                                                    </div>
                                                                    <form action="{{ url('/rpitm1/result/redirect') }}"
                                                                        method="GET">
                                                                        <div class="modal-body">
                                                                            <input type="hidden" name="search-periode"
                                                                                value="{{ $detail->ID }}">
                                                                            <div class="form-group">
                                                                                <label
                                                                                    for="offset{{ $detail->ID }}">Offset
                                                                                    Waktu (dalam
                                                                                    menit)</label>
                                                                                <input type="number" class="form-control"
                                                                                    id="offset{{ $detail->ID }}"
                                                                                    name="offset"
                                                                                    placeholder="Contoh: 15, 30, 60"
                                                                                    min="0" step="1"
                                                                                    required>
                                                                                <small class="text-muted">Masukkan nilai
                                                                                    dalam menit untuk
                                                                                    filter offset waktu</small>
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button"
                                                                                class="btn btn-secondary"
                                                                                data-bs-dismiss="modal">Batal</button>
                                                                            <button type="submit"
                                                                                class="btn btn-primary">Lihat</button>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <form action="{{ url('/rpitm1/result/redirect') }}"
                                                            method="GET" style="display:inline;">
                                                            <input type="hidden" name="search-periode"
                                                                value="{{ $detail->ID }}">
                                                            <input type="hidden" name="jenis_izin" value="terlambat">
                                                            <button type="submit" class="btn btn-sm btn-primary"
                                                                id="action-btn-terlambat-{{ $detail->ID }}">
                                                                Lihat permohonan terlambat
                                                            </button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @endif
                                </table>
                            </div>
                        </div>
                        <div id="pagination-container" class="d-flex justify-content-between mt-4"
                            style="overflow-x: auto;">
                            @include('rekap.rpitm1.partials.result_pagination')
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                @if ($table_result)
                                    {{-- <div class="nav-wrapper" id="noted">
                                <code>Note : <i aria-hidden="true"
                                                style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                            </div> --}}
                                @else
                                    <div class="nav-wrapper">
                                        <code> Sepertinya anda belum melakukan eksekusi rekap surat izin/tugas dari semua
                                            pengajuan
                                            dengan departemen dan periode yang dipilih!</code>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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>
        document.addEventListener("DOMContentLoaded", function() {
            const tahunSelect = document.getElementById("tahun-select");
            const periodeSelect = document.getElementById("periode-select");
            const allPeriodeOptions = @json($periode);

            function filterPeriode() {
                const selectedTahun = tahunSelect.value;

                periodeSelect.innerHTML = ""; // Hapus semua opsi
                const defaultOption = document.createElement('option');
                defaultOption.value = "";
                defaultOption.text = "Perlihatkan Semua";
                periodeSelect.appendChild(defaultOption); // Tambah opsi "Perlihatkan Semua"

                allPeriodeOptions.forEach(option => {
                    if (option.tahun == selectedTahun || selectedTahun === "") {
                        const newOption = document.createElement('option');
                        newOption.value = option.id;
                        newOption.text = option.nama;
                        periodeSelect.appendChild(newOption);
                    }
                });
            }

            tahunSelect.addEventListener("change", filterPeriode);

            // First load fetch
            fetchPage();
        });
    </script>

    <script>
        function exportToExcel(event) {
            event.preventDefault();

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

            $.ajax({
                url: '{{ route('rpitm1.excel.export') }}', // Correct route syntax in Blade
                method: 'GET', // The HTTP method (GET)
                data: {
                    tahun: tahun,
                    search: search,
                    periode: periode,
                    departemen: departemen
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF token for security
                },
                success: function(response) {
                    // Assuming server returns the URL for downloading the file
                    var fileUrl = response.fileUrl;

                    // Create a temporary link element
                    var link = document.createElement('a');

                    // Set the download attribute with the filename you want
                    link.href = fileUrl;
                    link.download = fileUrl.substring(fileUrl.lastIndexOf('/') +
                        1); // Extract filename from URL

                    // Append the link to the body (required for Firefox)
                    document.body.appendChild(link);

                    // Trigger the click event to start the download
                    link.click();

                    // Remove the link from the DOM after download
                    document.body.removeChild(link);
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error); // Log any errors
                }
            });
        }
    </script>

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

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

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

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

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

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

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

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

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

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

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

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

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

            $.ajax({
                url: "{{ route('rpitm1.ajax2.filter') }}?page=" + page,
                method: 'GET',
                data: {
                    tahun: tahun,
                    search: search,
                    periode: periode,
                    departemen: departemen
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    let tbody = "";
                    $.each(response.data.table_result.data, function(index, row) {
                        tbody += `<tr>
                                <td class="text-sm font-weight-normal">${row.row_num}</td>
                                <td class="text-sm font-weight-normal">${row.id}</td>
                                <td class="text-sm font-weight-normal">${row.nama_periode}</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 text-end">${row.jumlah_izin_kurang_sama_3_jam}</td>
                                <td class="text-sm font-weight-normal text-end">${row.jumlah_izin_lebih_3_kurang_6_jam}</td>
                                <td class="text-sm font-weight-normal text-end">${row.jumlah_izin_lebih_sama_6_jam}</td>
                                <td class="text-sm font-weight-normal text-end">${row.jumlah_izin}</td>
                                <td class="text-sm font-weight-normal text-end">${row.jumlah_tugas}</td>
                                <td class="text-sm font-weight-normal text-end">${row.total_permohonan}</td>
                                <td class="text-sm font-weight-normal text-end">${row.total_potongan_hari}</td>
                                <td>
                                    <form action="{{ url('/rpitm1/result/redirect') }}" method="GET" style="display:inline;">
                                        <input type="hidden" name="search-periode" value="${row.id || ''}">
                                        <button type="submit" class="btn btn-sm btn-primary" id="action-btn-history-${row.id || ''}">Lihat history permohonan</button>
                                    </form>
                                    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#offsetModal${row.id || ''}">
                                        Lihat permohonan offset
                                    </button>
                                    <div class="modal fade" id="offsetModal${row.id || ''}" tabindex="-1" aria-labelledby="offsetModalLabel${row.id || ''}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="offsetModalLabel${row.id || ''}">Masukkan Offset Waktu</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <form action="{{ url('/rpitm1/result/redirect') }}" method="GET">
                                                    <div class="modal-body">
                                                        <input type="hidden" name="search-periode" value="${row.id || ''}">
                                                        <div class="form-group">
                                                            <label for="offset${row.id || ''}">Offset Waktu (dalam menit)</label>
                                                            <input type="number" class="form-control" id="offset${row.id || ''}" name="offset" placeholder="Contoh: 15, 30, 60" min="0" step="1" required>
                                                            <small class="text-muted">Masukkan nilai dalam menit untuk filter offset waktu</small>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                                        <button type="submit" class="btn btn-primary">Lihat</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <form action="{{ url('/rpitm1/result/redirect') }}" method="GET" style="display:inline;">
                                        <input type="hidden" name="search-periode" value="${row.id || ''}">
                                        <input type="hidden" name="jenis_izin" value="terlambat">
                                        <button type="submit" class="btn btn-sm btn-primary" id="action-btn-terlambat-${row.id || ''}">Lihat permohonan terlambat</button>
                                    </form>
                                </td>
                            </tr>`;
                    });

                    // Delete dataTables
                    $('#list_{{ $dmenu }}').DataTable().destroy();

                    $("#list_{{ $dmenu }} tbody").html(tbody);

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

                    // Re-initiate the DataTable
                    $('#list_{{ $dmenu }}').DataTable({
                        "language": {
                            "search": "Cari :",
                            "lengthMenu": "Tampilkan _MENU_ baris",
                            "zeroRecords": "Maaf - Data tidak ada",
                            "info": "Data _START_ - _END_ dari _TOTAL_",
                            "infoEmpty": "Tidak ada data",
                            "infoFiltered": "(pencarian dari _MAX_ data)"
                        },
                        paging: false, // Menonaktifkan pagination
                        searching: false, // Menonaktifkan search/filter
                        info: false, // Menonaktifkan informasi "Showing x of y"
                        responsive: true,
                        dom: 'frtip',
                        // buttons: [{
                        //         extend: 'excelHtml5',
                        //         text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                        //         autoFilter: true,
                        //         sheetName: 'Exported data',
                        //         // title: 'Nama File Excel',
                        //         customize: function(xlsx) {
                        //             var sheet = xlsx.xl.worksheets['sheet1.xml'];
                        //             // Loop over the cells in column
                        //             sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((row) => {
                        //                 // Get the value
                        //                 let cell = row.querySelector('is t');
                        //                 if (cell && cell.textContent === 'Not Active') {
                        //                     row.setAttribute('s', '10'); //red background
                        //                 }
                        //             });
                        //         },
                        //         exportOptions: {
                        //             columns: ':visible:not(:last-child)'
                        //         },
                        //     },
                        //     {
                        //         extend: 'pdfHtml5',
                        //         text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                        //         orientation: 'landscape',
                        //         pageSize: 'A4',
                        //         exportOptions: {
                        //             columns: ':visible:not(:last-child)'
                        //         },
                        //     },
                        //     {
                        //         extend: 'print',
                        //         text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                        //         orientation: 'landscape',
                        //         pageSize: 'A4',
                        //         exportOptions: {
                        //             columns: ':visible:not(:last-child)'
                        //         },
                        //     },
                        // ]
                    });
                    //set color button datatables
                    // $('.dt-button').addClass('btn btn-secondary');
                    // $('.dt-button').removeClass('dt-button');
                },
                complete: function() {
                    // Make it none
                    document.getElementById('pagination-loading').style.display = 'none';

                    // Make it none
                    document.getElementById('loading-spinner').style.display = 'none';

                    // Make the search button Enable
                    document.getElementById('searchButton').disabled = false;

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

@endsection
@push('js')
    <script>
        // let columnAbjad = '';
        //     $(document).ready(function() {
        //         let table = $('#list_{{ $dmenu }}').DataTable();
        //         let indexStatus = 0;
        //         let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
        //         let columnNames = '';
        //         let filter = '{{ @$table_class->alias }}'.toLowerCase();
        //         for (let index = 0; index < numColumns; index++) {
        //             columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
        //             filtercolom = columnNames.toLowerCase();
        //             if (columnNames == 'Status' || columnNames == 'status' || columnNames == 'STATUS') {
        //                 columnAbjad = String.fromCharCode(65 + index);
        //             }
        //             if (filtercolom == filter) {
        //                 indexStatus = index;
        //             }
        //         }
        //         //redraw table where filter
        //         $('#{{ @$table_class->field }}').change(function() {
        //             table.column(indexStatus).search($(this).val()).draw();
        //         })
        //         //check class exp
        //         if ($('*').hasClass('exp')) {
        //             $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
    //             class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
    //             style="color: #ffe768;" class="fas fa-circle"></i> Data Expired )</code>`)
        //         }
        //     });

        //set table into datatables
        $('#list_{{ $dmenu }}').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Data _START_ - _END_ dari _TOTAL_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            paging: false, // Menonaktifkan pagination
            searching: false, // Menonaktifkan search/filter
            info: false, // Menonaktifkan informasi "Showing x of y"
            responsive: true,
            dom: 'frtip',
            //     buttons: [{
            //             extend: 'excelHtml5',
            //             text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
            //             autoFilter: true,
            //             sheetName: 'Exported data',
            //             // title: 'Nama File Excel',
            //             customize: function(xlsx) {
            //                 var sheet = xlsx.xl.worksheets['sheet1.xml'];
            //                 // Loop over the cells in column
            //                 sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((row) => {
            //                     // Get the value
            //                     let cell = row.querySelector('is t');
            //                     if (cell && cell.textContent === 'Not Active') {
            //                         row.setAttribute('s', '10'); //red background
            //                     }
            //                 });
            //             },
            //             exportOptions: {
            //                 columns: ':visible:not(:last-child)'
            //             },
            //         },
            //         {
            //             extend: 'pdfHtml5',
            //             text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
            //             orientation: 'landscape',
            //             pageSize: 'A4',
            //             exportOptions: {
            //                 columns: ':visible:not(:last-child)'
            //             },
            //         },
            //         {
            //             extend: 'print',
            //             text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
            //             orientation: 'landscape',
            //             pageSize: 'A4',
            //             exportOptions: {
            //                 columns: ':visible:not(:last-child)'
            //             },
            //         },
            //     ]
        });
        //set color button datatables
        // $('.dt-button').addClass('btn btn-secondary');
        // $('.dt-button').removeClass('dt-button');
        //check authorize button datatables
        // <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjhris/resources/views/rekap/rpitm1/result.blade.php</b> on line <b>792</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjhris/resources/views/rekap/rpitm1/result.blade.php</b> on line <b>792</b><br />
        // <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjhris/resources/views/rekap/rpitm1/result.blade.php</b> on line <b>793</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjhris/resources/views/rekap/rpitm1/result.blade.php</b> on line <b>793</b><br />
        // <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjhris/resources/views/rekap/rpitm1/result.blade.php</b> on line <b>794</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjhris/resources/views/rekap/rpitm1/result.blade.php</b> on line <b>794</b><br />
        //function delete
        function deleteData(name, msg) {
            pesan = confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
            if (pesan) return true
            else return false
        }
    </script>
@endpush