@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
@push('css')
{{-- Flatpickr --}}
<link rel="stylesheet" href="{{ asset('/') }}assets/css/flatpickr.min.css">
@endpush
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            {{-- 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">
                        <!-- Sampai Tanggal -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tanggal_mulai">Dari Tanggal</label>
                                <input type="text" id="tanggal_mulai" class="form-control"
                                    placeholder="Pilih rentan tanggal">
                                <input type="hidden" name="tanggal_mulai" id="tanggal_mulai_hidden">
                            </div>
                        </div>

                        <!-- Dari Tanggal -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tanggal_berakhir">Sampai Tanggal</label>
                                <input type="text" id="tanggal_berakhir" class="form-control"
                                    placeholder="Pilih rentan tanggal">
                                <input type="hidden" name="tanggal_berakhir" id="tanggal_berakhir_hidden">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="kategori_perizinan_id">Kategori Izin/Tugas</label>
                                <select name="kategori_perizinan_id" id="kategori_perizinan_id" class="form-select">
                                    <option value="">Perlihatkan Semua</option>
                                    @foreach ($kategori_perizinan as $kategori)
                                    <option value="{{ $kategori->id }}">{{ $kategori->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="jenis_izin_id">Jenis Izin</label>
                                <select name="jenis_izin_id" id="jenis_izin_id" class="form-select">
                                    <option value="">Perlihatkan Semua</option>
                                    @foreach ($jenis_izin as $jenis)
                                    <option value="{{ $jenis->id }}">{{ $jenis->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="periode">Periode</label>
                                <select name="periode" id="periode" class="form-select">
                                    <option value="">Perlihatkan Semua</option>
                                    @foreach ($periode as $prd)
                                    <option value="{{ $prd->id }}"
                                        {{ isset($set_periode) && $set_periode == $prd->id ? 'selected' : '' }}>
                                        {{ $prd->nama }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="assignedfor">Diajukan Untuk</label>
                                <select name="assignedfor" id="assignedfor" class="form-select">
                                    <option value="">Perlihatkan Semua</option>
                                    <option value="diri_sendiri"
                                        {{ isset($set_assignedfor) && $set_assignedfor == 'diri_sendiri' ? 'selected' : '' }}>
                                        Diri Sendiri</option>
                                    <option value="orang_lain"
                                        {{ isset($set_assignedfor) && $set_assignedfor == 'orang_lain' ? 'selected' : '' }}>
                                        Orang Lain</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="status">Status Permohonan</label>
                                <select name="status" id="status" class="form-select">
                                    <option value="">Perlihatkan Semua</option>
                                    <option value="disetujui"
                                        {{ isset($set_status) && $set_status == 'disetujui' ? 'selected' : '' }}>
                                        Disetujui</option>
                                    <option value="ditolak"
                                        {{ isset($set_status) && $set_status == 'ditolak' ? 'selected' : '' }}>
                                        Ditolak</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="offset">Offset Waktu (Lebih dari ... menit)</label>
                                <input type="number" class="form-control" id="offset" name="offset"
                                    placeholder="Contoh: 15, 30, 60" min="0" step="1"
                                    value="{{ isset($set_offset) ? $set_offset : '' }}">
                                <small class="text-muted">Masukkan nilai dalam menit untuk filter offset waktu
                                    check-in/check-out</small>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        {{-- Add pencarian bebas --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="search">Pencarian Bebas</label>
                                <input type="text" class="form-control" id="search" name="search"
                                    placeholder="Pencarian Bebas">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <button class="btn btn-primary" id="btn_cari">
                                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() {
                                $('#search').on('keypress', function(e) {
                                    if (e.which == 13) { // Enter key pressed
                                        $('#btn_cari').click(); // Trigger the button click event
                                    }
                                });
                            });
                            </script>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4"> {{-- Menambahkan margin bawah untuk jarak antar card --}}
                <div class="card-header col-md-auto"> {{-- Menyelaraskan judul --}}
                    <h5 class="mb-0">List {{ $title_menu }}</h5>
                </div>
                <div class="col">
                    {{-- alert --}}
                    @include('components.alert')
                </div>
                <hr class="horizontal dark mt-0">
                <div class="row px-4 py-2 mt-2">
                    <div class="col-lg">
                        <button class="btn btn-secondary mb-2" onclick="window.history.back()">
                            <i class="fas fa-arrow-left me-1"></i> Kembali
                        </button>
                    </div>
                </div>
                <div class="card-header col-md-auto">
                    <div class="col-md-12">
                        <p class="text-muted mb-0">Anda dapat memantau status check-in dan check-out dari satpam pada
                            tabel dibawah.
                        </p>
                    </div>
                </div>
                <div class="row px-4 py-2">
                    <div class="col-lg">
                        <div class="nav-wrapper">
                            {{-- check authorize add --}}
                            @if ($authorize->add == '1')
                            {{-- button add --}}
                            <button class="btn btn-primary mb-0"
                                onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                    class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                            @endif
                        </div>
                    </div>
                </div>
                <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>
                                    <th>No</th>
                                    <th>Action</th>
                                    {{-- retrieve table header --}}
                                    @foreach ($table_header as $header)
                                    <th>{{ $header->alias }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                {{-- retrieve table detail --}}
                                @foreach ($table_detail as $detail)
                                @php
                                $primary = '';
                                foreach ($table_primary as $p) {
                                $primary == ''
                                ? ($primary = $detail->{$p->field})
                                : ($primary = $primary . ':' . $detail->{$p->field});
                                }
                                $vcount = $loop->iteration;
                                @endphp
                                <tr {{ $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                    <td>{{ $vcount }}</td>
                                    <td class="text-sm font-weight-normal">
                                        {{-- button view --}}
                                        <button type="button" class="btn btn-sm btn-primary mb-0" title="View Data"
                                            onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                            <i class="fas fa-eye"> </i><span class="font-weight-bold">
                                                View</span>
                                        </button>
                                        {{-- check authorize edit --}}
                                        @if ($authorize->edit == '1')
                                        {{-- check status active --}}
                                        @if ($detail->isactive == 1)
                                        {{-- button edit --}}
                                        <button type="button" class="btn btn-sm btn-warning mb-0" title="Edit Data"
                                            onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($primary)) }}'">
                                            <i class="fas fa-edit"></i><span class="font-weight-bold">
                                                Edit</span>
                                        </button>
                                        @endif
                                        @endif
                                        {{-- check authorize delete and data primary key not "msjit" --}}
                                        @if ($authorize->delete == '1' && $primary != 'msjit')
                                        <form action="{{ url($url_menu . '/' . encrypt($primary)) }}" method="POST"
                                            style="display: inline">
                                            @csrf
                                            @method('DELETE')
                                            {{-- button delete --}}
                                            <button type="submit"
                                                class="btn btn-sm btn-{{ $detail->isactive == '0' ? 'success' : 'danger' }} mb-0"
                                                title="Hapus Data"
                                                onclick="return deleteData(event, '{{ $primary }}','{{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}')">
                                                <i class="fas fa-trash"></i><span class="font-weight-bold">
                                                    Delete</span>
                                            </button>
                                        </form>
                                        @endif
                                    </td>
                                    @foreach ($table_header as $field)
                                    @php
                                    $string = $field->field;
                                    @endphp
                                    {{-- field type enum --}}
                                    @if ($field->type == 'enum')
                                        {{-- Khusus kolom user_id (Nama Karyawan) pada acara khusus: tampilkan semua nama karyawan --}}
                                        @if ($field->field == 'user_id' && $detail->jenis_izin_id == 4 && !empty($detail->nama_karyawan_list))
                                        <td class="text-sm font-weight-normal align-top">
                                            @include('pitk12.partials._nama_karyawan_list', [
                                                'namaKaryawanList' => $detail->nama_karyawan_list,
                                                'vcount' => $vcount,
                                            ])
                                        </td>
                                        @else
                                    <td
                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                        @if ($field->link != '')
                                        <a target="_blank"
                                            href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                            @if ($field->query != '')
                                            @php
                                            $data_query = DB::select($field->query);
                                            @endphp
                                            @foreach ($data_query as $q)
                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkb1/pitbhp/list.blade.php</b> on line <b>278</b><br />
                                            {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                            @endforeach
                                            @endif
                                            &nbsp;&nbsp;
                                            <i aria-hidden="true" class="fas fa-external-link-alt">
                                            </i>
                                        </a>
                                        @else
                                        @if ($field->query != '')
                                        @php
                                        $data_query = DB::select($field->query);
                                        @endphp
                                        @foreach ($data_query as $q)
                                        <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkb1/pitbhp/list.blade.php</b> on line <b>292</b><br />
                                        {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                        @endforeach
                                        @endif
                                        @endif
                                    </td>
                                        @endif
                                    {{-- field type file --}}
                                    @elseif ($field->type == 'file')
                                    <td
                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                        @if ($detail->$string)
                                        <a target="_blank" class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                                            href="{{ asset('/storage' . '/' . $detail->$string) }}">
                                            <i aria-hidden="true" class="fas fa-file-lines text-lg">
                                            </i>
                                            {{ $field->alias }}</a>
                                        @endif
                                    </td>
                                    {{-- field type image --}}
                                    @elseif($field->type == 'image')
                                    <td
                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                        <span class="my-2 text-xs">
                                            <img src="{{ asset('/storage' . '/' . $detail->$string) }}" alt="image"
                                                style="height: 35px;" data-bs-toggle="modal"
                                                data-bs-target="#imageModal{{ $field->field }}{{ $vcount }}">
                                        </span>
                                        <span style="display: none;">{{ asset('/storage' . '/' . $detail->$string) }}
                                        </span>
                                        <!-- Modal -->
                                        <div class="modal fade" id="imageModal{{ $field->field }}{{ $vcount }}"
                                            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>
                                    {{-- field type join --}}
                                    @elseif($field->type == 'join')
                                    <td
                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                        @if ($field->query != '')
                                        @php
                                        $query = $field->query . "'" . $detail->$string . "'";
                                        $data_query = DB::select($query);
                                        @endphp
                                        @foreach ($data_query as $q)
                                        <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkb1/pitbhp/list.blade.php</b> on line <b>358</b><br />
                                        @if ($field->default != 'image')
                                        {{ $sAsArray[0] != '' ? $sAsArray[0] : '' }}
                                        @else
                                        <span class="my-2 text-xs">
                                            <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}" alt="image"
                                                style="height: 40px;" data-bs-toggle="modal"
                                                data-bs-target="#imageModalJoin{{ $field->field }}{{ $vcount }}">
                                        </span>
                                        <span style="display: none;">{{ asset('/storage' . '/' . $sAsArray[0]) }}
                                        </span>
                                        <!-- Modal -->
                                        <div class="modal fade" id="imageModalJoin{{ $field->field }}{{ $vcount }}"
                                            tabindex="-1" role="dialog" aria-labelledby="imageModalJoinLabel"
                                            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="imageModalJoinLabel">
                                                            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' . '/' . $sAsArray[0]) }}"
                                                            id="preview" alt="image"
                                                            class="w-100 border-radius-lg shadow-sm">
                                                    </div>
                                                    <div class="modal-footer">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        @endforeach
                                        @endif
                                    </td>
                                    {{-- field type currency --}}
                                    @elseif ($field->type == 'currency')
                                    <td
                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                        {{ $format->CurrencyFormat($detail->$string, $field->decimals, $field->sub) }}
                                    </td>
                                    {{-- field type date --}}
                                    @elseif ($field->type == 'date')
                                    @php
                                    if ($detail->$string != '') {
                                    $dateValue = $detail->$string;
                                    // Check if $dateValue is a valid date string and parse it accordingly
                                    $formattedDate = \Carbon\Carbon::parse($dateValue)->format(
                                    'd-m-Y H:i',
                                    );
                                    } else {
                                    $formattedDate = '';
                                    }
                                    @endphp
                                    <td
                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} {{ $field->class == 'check-date' ? $detail->$string : '' }} text-end">
                                        {{ $formattedDate }}
                                    </td>
                                    @if ($field->note != '')
                                    <p id="datenote" style="display: none">
                                        {{ $field->note }}
                                    </p>
                                    @else
                                    <p id="datenote" style="display: none">Date Expired <= {{ $field->length }} Day </p>
                                            @endif
                                            @if ($field->class == 'check-date')
                                            <script>
                                            var inputDate = new Date('{{ $detail->$string }}');
                                            var currentDate = new Date();
                                            var futureDate = new Date(currentDate.setDate(currentDate.getDate() +
                                                parseInt('{{ $field->length }}')));

                                            if (inputDate <= futureDate) {
                                                $('.{{ $detail->$string }}').parents('tr').addClass('exp');
                                                $('.{{ $detail->$string }}').parents('tr').css('background-color',
                                                    '#ffe768');
                                            }
                                            </script>
                                            @endif
                                            @elseif ($field->type == 'number')
                                            <td
                                                class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} text-end">
                                                {{ $detail->$string }}
                                            </td>
                                            @else
                                            <td
                                                class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                @if ($field->link != '')
                                                <a target="_blank"
                                                    href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                                    {{ $detail->$string }}&nbsp;&nbsp;
                                                    <i aria-hidden="true" class="fas fa-external-link-alt">
                                                    </i>
                                                </a>
                                                @else
                                                @if ($detail->$string == 'disetujui')
                                                <p class="text-success font-weight-bold">
                                                    {{ $detail->$string }}
                                                </p>
                                                @elseif ($detail->$string == 'ditolak')
                                                <p class="text-danger font-weight-bold">
                                                    {{ $detail->$string }}
                                                </p>
                                                @else
                                                {{ $detail->$string }}
                                                @endif
                                                @endif
                                            </td>
                                            @endif
                                            @endforeach
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div id="pagination-container" class="d-flex justify-content-between mt-4"
                        style="overflow-x: auto;">
                        @include('pitkb1.pitbhp.partials.pagination')
                    </div>
                </div>
                <div class="row px-4 py-2">
                    {{-- Karena tidak butuh jadi tidak saya pake --}}
                    {{-- <div class="col-lg">
                        <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>
                    </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


{{-- Flatpicker for "tanggal_mulai" and "tanggal_berakhir" filters --}}
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Datepicker untuk Tanggal Mulai
    flatpickr("#tanggal_mulai", {
        dateFormat: "Y-m-d", // Format yang disimpan
        altInput: true,
        altFormat: "d/m/Y", // Format yang ditampilkan
        onChange: function(selectedDates, dateStr, instance) {
            // Menggunakan instance.dateStr untuk mendapatkan nilai dengan format dateFormat
            document.getElementById("tanggal_mulai_hidden").value = dateStr;
            tanggalBerakhir.set("minDate", dateStr) // Set batas minDate untuk tanggal berakhir
        }
    });

    // Datepicker untuk Tanggal Berakhir
    let tanggalBerakhir = flatpickr("#tanggal_berakhir", {
        dateFormat: "Y-m-d", // Format yang disimpan
        altInput: true,
        altFormat: "d/m/Y", // Format yang ditampilkan
        onChange: function(selectedDates, dateStr, instance) {
            // Menggunakan instance.dateStr untuk mendapatkan nilai dengan format dateFormat
            document.getElementById("tanggal_berakhir_hidden").value = dateStr;
        }
    });

    // Search on first load
    fetchPage();
});
</script>

{{-- Mencari data berdasarkan filter search AJAX --}}
<script>
$(document).on('click', '#btn_cari', 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 tbody = "";

    // Tampilkan spinner dan disable button ketika tombol "Cari" diklik
    $('#loading-spinner').show();
    $('#btn_cari').prop('disabled', true); // Menonaktifkan tombol

    // Pagination make pagination none
    $('#pagination-links').css('display', 'none'); // Menyembunyikan pagination
    $('#pagination-loading').css('display', 'block'); // Menampilkan loading

    // Ambil data dari form
    const periode_id = $('#periode').val();
    const kategori_perizinan_id = $('#kategori_perizinan_id').val();
    const jenis_izin_id = $('#jenis_izin_id').val();
    const tanggal_mulai = $('#tanggal_mulai_hidden').val();
    const tanggal_berakhir = $('#tanggal_berakhir_hidden').val();
    const assignedfor = $('#assignedfor').val();
    const status = $('#status').val();
    const offset = $('#offset').val();
    const search = $('#search').val();

    // Get user_id
    const user_id = @json($user_id);

    console.log(user_id);

    // Get baseurl
    const baseurl = "{{ url('/') }}";

    // Helper: escape HTML agar nama karyawan tidak inject HTML
    function escapeHtmlHistory(str) {
        const div = document.createElement('div');
        div.textContent = str ?? '';
        return div.innerHTML;
    }

    // Helper: render cell "Nama Karyawan" untuk acara khusus (multi nama + lihat lainnya)
    function buildNamaKaryawanCellHistory(row, rowNum) {
        if (row.jenis_izin_id == 4 && row.nama_karyawan_list) {
            const names = String(row.nama_karyawan_list).split('||').filter(n => n.trim() !== '');
            if (names.length > 0) {
                const maxPreview = 5;
                const isExpandable = names.length > maxPreview;
                const previewNames = isExpandable ? names.slice(0, maxPreview) : names;
                const remaining = isExpandable ? (names.length - maxPreview) : 0;
                const toggleId = 'karyawanToggle_' + rowNum + '_' + Math.floor(Math.random() * 10000);

                let html = '<div class="d-flex flex-column gap-1 py-1">';
                html += '<div id="' + toggleId + '_preview">';
                previewNames.forEach(function(nama) {
                    html += '<div class="text-sm">' + escapeHtmlHistory(nama) + '</div>';
                });
                html += '</div>';

                if (isExpandable) {
                    html += '<div id="' + toggleId + '_rest" style="display: none;">';
                    names.slice(maxPreview).forEach(function(nama) {
                        html += '<div class="text-sm">' + escapeHtmlHistory(nama) + '</div>';
                    });
                    html += '</div>';
                    html += '<a href="javascript:void(0)" class="text-sm text-primary text-decoration-underline fw-bold mt-1 toggle-karyawan-btn" data-toggle-id="' + toggleId + '" data-remaining="' + remaining + '">';
                    html += '<i class="fas fa-chevron-down me-1"></i><span class="toggle-text">Lihat ' + remaining + ' lainnya</span>';
                    html += '</a>';
                }

                html += '</div>';
                return html;
            }
        }
        return '<span class="text-sm">' + escapeHtmlHistory(row.nama ?? '') + '</span>';
    }


    // Mengirimkan ajax request
    $.ajax({
        url: "{{ url($url_menu) . '/ajax/filter' }}?page=" + page,
        method: 'GET',
        data: {
            user_id: user_id,
            periode_id: periode_id,
            kategori_perizinan_id: kategori_perizinan_id,
            jenis_izin_id: jenis_izin_id,
            tanggal_mulai: tanggal_mulai,
            tanggal_berakhir: tanggal_berakhir,
            assignedfor: assignedfor,
            status: status,
            offset: offset,
            search: search
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            // Merge response.data.table_detail.data dengan response.data.ids
            response.data.table_detail.data = response.data.table_detail.data.map((item, index) => {
                item.ids = response.data.ids[index]; // Menambahkan ids
                return item;
            });

            // Ambil data dmenu
            const dmenui = @json($dmenu);

            // Inisiasi ulang dataTable
            let columnAbjad = '';

            let tbody = '';

            if (response.data.table_detail.data.length === 0) {
                tbody = `<tr>
                                    <td colspan="11" class="text-center text-muted py-3">
                                        Maaf - Data tidak ada.
                                    </td>
                                </tr>`;
            } else {
                $.each(response.data.table_detail.data, function(index, row) {
                    console.log(row.row_num);
                    tbody += `<tr>
                                        <td class="text-sm font-weight-normal">${row.row_num ?? ''}</td>
                                        <td class="text-sm font-weight-normal">
                                            <div class="btn-group">
                                                {{-- button view --}}
                                                <button type="button" class="btn btn-sm btn-primary mb-0" title="View Data"
                                                    onclick="window.location='${baseurl}/pitbhp/show/${row.ids}'">
                                                    <i class="fas fa-eye"> </i><span class="font-weight-bold">
                                                        View</span>
                                                </button>
                                            </div>
                                        </td>
                                        <td class="text-sm font-weight-normal">${row.idperizinan ?? ''}</td>
                                        <td class="text-sm font-weight-normal align-top">${buildNamaKaryawanCellHistory(row, row.row_num ?? 0)}</td>
                                        <td class="text-sm font-weight-normal">${row.kategori_perizinan ?? ''}</td>
                                        <td class="text-sm font-weight-normal">${row.jenis_izin ?? ''}</td>
                                        <td class="text-sm font-weight-normal">${row.alasan ?? ''}</td>
                                        <td class="text-sm font-weight-normal text-end">${row.jam_keluar ?? ''}</td>
                                        <td class="text-sm font-weight-normal text-end">${row.jam_masuk ?? ''}</td>
                                        <td class="text-sm font-weight-normal text-end">${row.check_out ?? ''}</td>
                                        <td class="text-sm font-weight-normal text-end">${row.check_in ?? ''}</td>
                                        <td class="text-sm font-weight-normal text-end">${row.offset_jam_masuk ?? ''}</td>
                                        <td class="text-sm font-weight-normal text-end">${row.offset_jam_keluar ?? ''}</td>
                                        <td class="text-sm font-weight-normal text-end">${row.durasi ?? ''}</td>
                                        <td class="text-sm font-weight-normal">${row.catatan_dari_personalia ?? ''}</td>
                                        <td class="text-sm font-weight-normal">
                                            <span class="${row.status === 'ditolak' ? 'text-danger' : row.status === 'disetujui' ? 'text-success' : ''} font-weight-bold">
                                                ${row.status ?? ''}
                                            </span>
                                        </td>
                                    </tr>`;
                });
            }

            $('#tbody_id').html(tbody);

            // Ganti konten tabel dengan data baru
            $('#list_' + dmenui + ' tbody').html(tbody);

            // Change the pagination links
            $('#pagination-container').html(response.pagination);
        },
        complete: function() {
            // Sembunyikan spinner setelah menerima respons dan nyalakan button lagi
            $('#loading-spinner').hide();
            $('#btn_cari').prop('disabled', false); // Menonaktifkan tombol

            // Pagination make pagination block
            $('#pagination-links').css('display', 'block'); // Menyembunyikan pagination
            $('#pagination-loading').css('display', 'none'); // Menampilkan loading
        },
        error: function(xhr, status, error) {
            console.log('Error status: ' + status);
            console.log('Error responseText: ' + xhr.responseText);
            console.log('Error message: ' + error);

            // Sembunyikan spinner setelah menerima respons dan nyalakan button lagi
            $('#loading-spinner').hide();
            $('#btn_cari').prop('disabled', false); // Menonaktifkan tombol

            // Pagination make pagination block
            $('#pagination-links').css('display', 'block'); // Menyembunyikan pagination
            $('#pagination-loading').css('display', 'none'); // Menampilkan loading

            // Display error message
            Swal.fire({
                title: 'Error',
                text: 'Terjadi kesalahan: ' + error,
                icon: 'error',
                confirmButtonColor: '#028284'
            });
        }
    });
}
</script>
@endsection
@push('js')
{{-- Flatpickr --}}
<script src="{{ asset('/') }}assets/js/flatpickr.min.js"></script>
<script>
flatpickr(".datepicker"); // Flatpicker initinalization
</script>

<script>
let columnAbjad = '';
$(document).ready(function() {
    let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
    let columnNames = '';
    for (let index = 0; index < numColumns; index++) {
        columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
        if (columnNames == 'Status' || columnNames == 'status') {
            columnAbjad = String.fromCharCode(65 + index);
        }
    }
    //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> ` + $('#datenote').text() + ` )</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)"
    },
    responsive: true,
    "paging": false,
    "searching": false,
    "info": false,
    dom: 'frtip'
});

//function delete
function deleteData(event, name, msg) {
    event.preventDefault(); // Prevent default form submission
    Swal.fire({
        title: 'Konfirmasi',
        text: `Apakah Anda Yakin Ingin Menghapus Permohonan ${name} Ini?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: `Ya, Hapus`,
        cancelButtonText: 'Batal',
        confirmButtonColor: '#028284'
    }).then((result) => {
        if (result.isConfirmed) {
            // Find the closest form element and submit it manually
            event.target.closest('form').submit();
        }
    });
}
</script>
@endpush