@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

{{-- Section Content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @push('css')
        {{-- Manual: Dependesi modal manual --}}
        {{-- Flatpickr --}}
        <link rel="stylesheet" href="{{ asset('/') }}assets/css/flatpickr.min.css">

        {{-- Photoswipe --}}
        <link rel="stylesheet" href="{{ asset('/') }}assets/css/photoswipe.css">

        {{-- Form Lampiran --}}
        <link rel="stylesheet" href="{{ asset('/') }}assets/css/form_lampiran_styles.css">
    @endpush

    <div class="container-fluid py-4">
        {{-- Jatah Cuti di pojok kanan atas sejajar --}}
        <div class="row justify-content-end">
            <div class="col-md-6 mb-4 d-flex flex-column flex-md-row gap-3 align-items-stretch">
                <div class="card flex-fill" style="min-width: 220px;">
                    <div class="card-body text-center">
                        <i class="fas fa-calendar-day mb-2 text-primary" style="font-size: 24px;"></i>
                        <p class="text-sm mb-1">Sisa Cuti Pribadi / Tahunan Karyawan Pemohon {{ date('Y') }}</p>
                        <h5 id="jatahCuti" class="font-weight-bolder" style="display: block;">Pilih Karyawan Pemohon</h5>
                        <div id="dangerAnim" class="spinner-grow text-danger mx-auto" role="status"
                            style="width: 16px; height: 16px; display: none;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p id="dangerDesc" class="mb-0 text-danger" style="display: none;">Pemohon belum memiliki jatah
                            cuti. Anda dapat mengatur jatah cuti pribadi pada menu Master Jatah Cuti.</p>
                    </div>
                </div>
                <div id="jatahCutiBersamaCard" class="card flex-fill" style="min-width: 220px;">
                    <div class="card-body text-center">
                        <i class="fas fa-users mb-2 text-primary" style="font-size: 24px;"></i>
                        <p class="text-sm mb-1">Sisa Cuti Bersama {{ date('Y') }}</p>
                        <h5 id="jatahCutiBersama" class="font-weight-bolder">Pilih Karyawan Pemohon</h5>
                        <p id="jatahCutiBersamaDesc" class="mb-0 text-muted small" style="display: none;"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Form Pengajuan Cuti</h5>
                    </div>
                    <div class="card-body">
                        {{-- Card untuk Aturan Permohonan Cuti --}}
                        <div class="card mb-4">
                            <div class="card-header">
                                Aturan Permohonan Cuti
                            </div>
                            <div class="card-body">
                                <p><strong>Judul:</strong> <span id="aturanJudul">Belum Memilih Jenis Cuti</span></p>
                                <p><strong>Isi:</strong> <span id="aturanIsi">Silakan pilih jenis cuti untuk melihat
                                        aturan.</span></p>
                                <p><strong>Jumlah Cuti / Total Hari:</strong> <span id="aturanJumlah">-</span></p>
                            </div>
                        </div>

                        {{-- Form pengajuan cuti --}}
                        <form role="form" method="POST" action="{{ route('permohonan.cuti.personalia.store') }}"
                            id="{{ $dmenu }}-form" enctype="multipart/form-data">
                            @csrf

                            {{-- Hidden input untuk total hari pada aturan cuti --}}
                            <input type="hidden" name="jumlah_cuti" id="jumlah_cuti" value="{{ old('jumlah_cuti') }}">
                            <input type="hidden" name="tanggal_array_melahirkan" id="tanggal_array_melahirkan" value="">
                            <input type="hidden" name="jumlah_hari_melahirkan_hidden" id="jumlah_hari_melahirkan_hidden" value="">
                            <input type="hidden" name="tanggal_array_haji" id="tanggal_array_haji" value="">
                            <input type="hidden" name="jumlah_hari_haji_hidden" id="jumlah_hari_haji_hidden" value="">

                            <div class="row">
                                {{-- Search field karyawan pemohon --}}
                                {{-- retrieve table header --}}
                                @php
                                    foreach ($table_header as $p) {
                                        if ($p->field == 'nik_karyawan_pengganti' && $p->type == 'search') {
                                            $header = $p;
                                        }
                                    }
                                    $primary = false;
                                    $generateid = false;
                                    foreach ($table_primary as $p) {
                                        $primary == false
                                            ? ($p->field == $header->field
                                                ? ($primary = true)
                                                : ($primary = false))
                                            : '';
                                        $generateid == false
                                            ? ($p->generateid != ''
                                                ? ($generateid = true)
                                                : ($generateid = false))
                                            : '';
                                    }
                                @endphp
                                <div id="nik_karyawan_pemohon_group" class="col-md-6 mb-3" style="display: none;">
                                    @if ($header->type == 'search')
                                        <label for="Karyawan Pemohon" class="form-label">Karyawan Pemohon</label>
                                        {{-- Ambil userid --}}
                                        <div class="flex flex-col input-group">
                                            <input type="text" id="nik_karyawan_pemohon_display"
                                                class="form-control {{ $header->class }}" readonly
                                                value="{{ old('nik_karyawan_pemohon') ? old('nik_karyawan_pemohon') . (old('nama_karyawan_pemohon') ? ' - ' . old('nama_karyawan_pemohon') : '') : $header->default }}">
                                            <input type="hidden" name="nik_karyawan_pemohon" id="nik_karyawan_pemohon_hidden"
                                                value="{{ old('nik_karyawan_pemohon') ? old('nik_karyawan_pemohon') : $header->default }}">
                                            <input type="hidden" name="nama_karyawan_pemohon" id="nama_karyawan_pemohon"
                                                value="{{ old('nama_karyawan_pemohon') }}">
                                            <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                                data-bs-target="#searchModalnik_karyawan_pemohon"
                                                style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;"><i
                                                    class="fas fa-search"></i></span>
                                        </div>
                                        {{-- Note --}}
                                        <small class="form-text text-muted">Wajib diisi</small>
                                        @error('nik_karyawan_pemohon')
                                            <span class="text-danger d-block">{{ $message }}</span>
                                        @enderror
                                        <!-- Modal -->
                                        <div class="modal fade" id="searchModalnik_karyawan_pemohon" tabindex="-1"
                                            role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="searchModalLabel">
                                                            List Data
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    @if ($header->query != '')
                                                        @php
                                                            // $table_result = DB::select($header->query);
                                                        @endphp
                                                    @endif
                                                    <div class="search-group d-flex justify-content-end align-items-center">
                                                        <input type="text" id="search_input_nik_karyawan_pemohon"
                                                            class="form-control me-3 mb-2 mt-2" style="width: 200px;"
                                                            placeholder="Cari...">
                                                        <button
                                                            class="btn btn-primary me-3 mb-2 mt-2 d-flex align-items-center"
                                                            id="search_button_nik_karyawan_pemohon">
                                                            <i class="fas fa-search me-1"></i>
                                                            <span class="font-weight-bold">Cari</span>
                                                            <div id="loading-spinner_nik_karyawan_pemohon"
                                                                class="spinner-border spinner-border-sm text-light ms-2"
                                                                role="status" style="display: none;">
                                                                <span class="sr-only">Loading...</span>
                                                            </div>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body table-responsive">
                                                        <table class="table display table-bordered table-striped"
                                                            id="list_{{ $dmenu }}_nik_karyawan_pemohon">
                                                            @if ($table_result)
                                                                <thead class="thead-light"
                                                                    style="background-color: #00b7bd4f;">
                                                                    <tr>
                                                                        <th width="20px">Action</th>
                                                                        @foreach ($table_result as $result)
                                                                            @php
                                                                                $sAsArray = array_keys((array) $result);
                                                                            @endphp
                                                                        @endforeach
                                                                        @foreach ($sAsArray as $modal_h)
                                                                            <th>{{ $modal_h }}
                                                                            </th>
                                                                        @endforeach
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($table_result as $modal_d)
                                                                        <tr>
                                                                            @foreach ($table_result as $result)
                                                                                @php
                                                                                    $field = array_keys(
                                                                                        (array) $result,
                                                                                    );
                                                                                @endphp
                                                                            @endforeach
                                                                            <td width="20px"><span
                                                                                    class="btn badge bg-primary badge-lg"
                                                                                    onclick="select_modalnik_karyawan_pemohon('{{ $modal_d->{$field[0]} }}', '{{ isset($field[1]) ? $modal_d->{$field[1]} : '' }}')"><i
                                                                                        class="bi bi-check-circle me-1"></i>
                                                                                    Select</span>
                                                                            </td>
                                                                            @foreach ($field as $header_field)
                                                                                @php
                                                                                    $string = $header_field;
                                                                                @endphp
                                                                                <td class="text-sm font-weight-normal">
                                                                                    {{ $modal_d->$string }}
                                                                                </td>
                                                                            @endforeach
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            @endif
                                                        </table>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <div id="pagination-container_nik_karyawan_pemohon"
                                                            class="d-flex justify-content-between mt-4"
                                                            style="overflow-x: auto;">
                                                            @include('pck123.pckbr1.partials.pagination', [
                                                                'idmodal' => 'nik_karyawan_pemohon',
                                                            ])
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                <script>
                                    $('document').ready(function() {
                                        $('#list_{{ @$dmenu }}_nik_karyawan_pemohon').DataTable({
                                            searching: false, // Menonaktifkan search bar
                                            paging: false, // Menonaktifkan pagination
                                            ordering: false, // Menonaktifkan sorting kolom
                                            info: false // Menyembunyikan info jumlah data
                                        });
                                    })

                                    // Manual to get jatah cuti for user thats selected
                                    var jatahCutiData = @json($jatahCuti); // Mengubah PHP array menjadi JavaScript object

                                    function select_modalnik_karyawan_pemohon(id, name) {
                                        var penggantiId = $('#nik_karyawan_pengganti_hidden').val();
                                        if (id && penggantiId && id === penggantiId) {
                                            Swal.fire({
                                                icon: 'error',
                                                title: 'Peringatan',
                                                text: 'Karyawan pemohon tidak boleh sama dengan karyawan pengganti.'
                                            });
                                            return;
                                        }
                                        $('#nik_karyawan_pemohon_hidden').val(id);
                                        $('#nik_karyawan_pemohon_display').val(id + ' - ' + name);
                                        $('#nama_karyawan_pemohon').val(name);
                                        $('#searchModalnik_karyawan_pemohon').modal('hide');

                                        // Manual to get jatah cuti for user thats selected
                                        if (id) {
                                            var jatahCutiObj = jatahCutiData.find(item => item.nik === id);
                                            if (jatahCutiObj) {
                                                var jatahCuti = jatahCutiObj.jumlah;
                                                $('#jatahCuti').text(jatahCuti);
                                                $('#jatahCuti').css('display', 'block');
                                                $('#dangerAnim').css('display', 'none');
                                                $('#dangerDesc').css('display', 'none');

                                                // Selalu tampilkan card Cuti Bersama
                                                var jatahBersama = jatahCutiObj.jumlah_bersama || 0;
                                                $('#jatahCutiBersamaCard').css('display', 'block');
                                                $('#jatahCutiBersama').text(jatahBersama + ' hari');

                                                if (jatahBersama <= 0) {
                                                    // Sisa 0 atau tidak ada - tampilkan peringatan
                                                    $('#jatahCutiBersama').removeClass('text-success').addClass('text-danger');
                                                    $('#jatahCutiBersamaDesc').text('Sisa cuti bersama tidak tersedia. Pengajuan cuti bersama tidak dapat dilakukan.').removeClass('text-muted').addClass('text-danger');
                                                    $('#jatahCutiBersamaDesc').css('display', 'block');
                                                } else {
                                                    $('#jatahCutiBersama').removeClass('text-danger').addClass('text-success');
                                                    $('#jatahCutiBersamaDesc').text('Sisa cuti bersama tersedia untuk digunakan.').removeClass('text-danger').addClass('text-success');
                                                    $('#jatahCutiBersamaDesc').css('display', 'block');
                                                }
                                            } else {
                                                $('#jatahCuti').css('display', 'none');
                                                $('#jatahCutiBersamaCard').css('display', 'none');
                                                $('#jatahCutiBersamaDesc').css('display', 'none');
                                                $('#dangerAnim').css('display', 'block');
                                                $('#dangerDesc').css('display', 'block');
                                            }
                                        } else {
                                            $('#jatahCuti').text('Anda harus mengatur jatah cuti untuk karyawan ini terlebih dahulu');
                                        }
                                    }
                                </script>
                            </div>

                            <div class="row">
                                {{-- Jenis Cuti --}}
                                <div class="col-md-6 mb-3">
                                    <label for="jenis_cuti_id" class="form-label">Jenis Cuti</label>
                                    <select name="jenis_cuti_id" id="jenis_cuti_id" class="form-select"
                                        onchange="updateFields(this)" value="{{ old('jenis_cuti_id') }}" required>
                                        <option value="">Pilih Jenis Cuti</option>
                                        @foreach ($jenisCuti as $cuti)
                                            <option value="{{ $cuti->id }}"
                                                @if (old('jenis_cuti_id') == $cuti->id) selected @endif>
                                                {{ $cuti->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                    {{-- Note --}}
                                    <small class="form-text text-muted">Pilih untuk menampilkan field lain</small>
                                    @error('jenis_cuti_id')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Karyawan Pengganti --}}
                                {{-- retrieve table header --}}
                                @php
                                    foreach ($table_header as $p) {
                                        if ($p->field == 'nik_karyawan_pengganti' && $p->type == 'search') {
                                            $header = $p;
                                        }
                                    }
                                    $primary = false;
                                    $generateid = false;
                                    foreach ($table_primary as $p) {
                                        $primary == false
                                            ? ($p->field == $header->field
                                                ? ($primary = true)
                                                : ($primary = false))
                                            : '';
                                        $generateid == false
                                            ? ($p->generateid != ''
                                                ? ($generateid = true)
                                                : ($generateid = false))
                                            : '';
                                    }
                                    $namaField = str_replace('nik_', 'nama_', $header->field);
                                @endphp
                                <div id="nik_karyawan_pengganti_group" class="col-md-6 mb-3" style="display: none;">
                                    @if ($header->type == 'search')
                                        <label for="Karyawan Pengganti" class="form-label">Karyawan Pengganti</label>
                                        {{-- Ambil userid --}}
                                        <div class="flex flex-col input-group">
                                            <input type="text" id="{{ $header->field }}_display"
                                                class="form-control {{ $header->class }}" readonly
                                                value="{{ old($header->field) ? old($header->field) . (old($namaField) ? ' - ' . old($namaField) : '') : $header->default }}">
                                            <input type="hidden" name="{{ $header->field }}" id="{{ $header->field }}_hidden"
                                                value="{{ old($header->field) ? old($header->field) : $header->default }}">
                                            <input type="hidden" name="{{ $namaField }}" id="{{ $namaField }}"
                                                value="{{ old($namaField) }}">
                                            <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                                data-bs-target="#searchModal{{ $header->field }}"
                                                style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;"><i
                                                    class="fas fa-search"></i></span>
                                        </div>
                                        {{-- Note --}}
                                        <small class="form-text text-muted">Dapat dikosongkan</small>
                                        @error($header->field)
                                            <span class="text-danger d-block">{{ $message }}</span>
                                        @enderror
                                        <!-- Modal -->
                                        <div class="modal fade" id="searchModal{{ $header->field }}" tabindex="-1"
                                            role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="searchModalLabel">
                                                            List Data
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    @if ($header->query != '')
                                                        @php
                                                            // $table_result = DB::select($header->query);
                                                        @endphp
                                                    @endif
                                                    <div
                                                        class="search-group d-flex justify-content-end align-items-center">
                                                        <input type="text" id="search_input_{{ $header->field }}"
                                                            class="form-control me-3 mb-2 mt-2" style="width: 200px;"
                                                            placeholder="Cari...">
                                                        <button
                                                            class="btn btn-primary me-3 mb-2 mt-2 d-flex align-items-center"
                                                            id="search_button_{{ $header->field }}">
                                                            <i class="fas fa-search me-1"></i>
                                                            <span class="font-weight-bold">Cari</span>
                                                            <div id="loading-spinner_{{ $header->field }}"
                                                                class="spinner-border spinner-border-sm text-light ms-2"
                                                                role="status" style="display: none;">
                                                                <span class="sr-only">Loading...</span>
                                                            </div>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body table-responsive">
                                                        <table class="table display table-bordered table-striped"
                                                            id="list_{{ $dmenu }}_{{ $header->field }}">
                                                            @if ($table_result)
                                                                <thead class="thead-light"
                                                                    style="background-color: #00b7bd4f;">
                                                                    <tr>
                                                                        <th width="20px">Action</th>
                                                                        @foreach ($table_result as $result)
                                                                            @php
                                                                                $sAsArray = array_keys((array) $result);
                                                                            @endphp
                                                                        @endforeach
                                                                        @foreach ($sAsArray as $modal_h)
                                                                            <th>{{ $modal_h }}
                                                                            </th>
                                                                        @endforeach
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($table_result as $modal_d)
                                                                        <tr>
                                                                            @foreach ($table_result as $result)
                                                                                @php
                                                                                    $field = array_keys(
                                                                                        (array) $result,
                                                                                    );
                                                                                @endphp
                                                                            @endforeach
                                                                            <td width="20px"><span
                                                                                    class="btn badge bg-primary badge-lg"
                                                                                    onclick="select_modal{{ $header->field }}('{{ $modal_d->{$field[0]} }}', '{{ isset($field[1]) ? $modal_d->{$field[1]} : '' }}')"><i
                                                                                        class="bi bi-check-circle me-1"></i>
                                                                                    Select</span>
                                                                            </td>
                                                                            @foreach ($field as $header_field)
                                                                                @php
                                                                                    $string = $header_field;
                                                                                @endphp
                                                                                <td class="text-sm font-weight-normal">
                                                                                    {{ $modal_d->$string }}
                                                                                </td>
                                                                            @endforeach
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            @endif
                                                        </table>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <div id="pagination-container_{{ $header->field }}"
                                                            class="d-flex justify-content-between mt-4"
                                                            style="overflow-x: auto;">
                                                            @include('pck123.pckbr1.partials.pagination', [
                                                                'idmodal' => $header->field,
                                                            ])
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <script>
                                        $('document').ready(function() {
                                            $('#list_{{ @$dmenu }}_{{ $header->field }}').DataTable({
                                                searching: false, // Menonaktifkan search bar
                                                paging: false, // Menonaktifkan pagination
                                                ordering: false, // Menonaktifkan sorting kolom
                                                info: false // Menyembunyikan info jumlah data
                                            });
                                        })

                                        function select_modal{{ $header->field }}(id, name) {
                                            var pemohonId = $('#nik_karyawan_pemohon_hidden').val();
                                            if (id && pemohonId && id === pemohonId) {
                                                Swal.fire({
                                                    icon: 'error',
                                                    title: 'Peringatan',
                                                    text: 'Karyawan pengganti tidak boleh sama dengan karyawan pemohon.'
                                                });
                                                return;
                                            }
                                            $('#{{ $header->field }}_hidden').val(id);
                                            $('#{{ $header->field }}_display').val(id + ' - ' + name);
                                            $('#{{ $namaField }}').val(name);
                                            $('#searchModal{{ $header->field }}').modal('hide');
                                        }
                                    </script>
                                </div>
                            </div>

                            <div class="row">
                                {{-- Alasan Cuti --}}
                                <div class="col-md-6 mb-3" id="alasan_group" style="display: none;">
                                    <label for="alasan" class="form-label">Alasan Cuti</label>
                                    <textarea id="alasan" placeholder="Contoh: Mengurus keperluan pribadi"
                                        class="form-control @error('alasan') is-invalid @enderror" name="alasan">{{ old('alasan') }}</textarea>
                                    {{-- Note --}}
                                    <small class="form-text text-muted">Dapat dikosongkan</small>
                                    @error('alasan')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Pekerjaan yang Belum Diselesaikan --}}
                                <div class="col-md-6 mb-3" id="pekerjaan_yang_belum_diselesaikan_group"
                                    style="display: none;">
                                    <label for="pekerjaan_yang_belum_diselesaikan" class="form-label">Pekerjaan yang Belum
                                        Diselesaikan</label>
                                    <textarea id="pekerjaan_yang_belum_diselesaikan" placeholder="Contoh: Laporan mingguan masih perlu dikumpulkan"
                                        class="form-control" name="pekerjaan_yang_belum_diselesaikan">{{ old('pekerjaan_yang_belum_diselesaikan') }}</textarea>
                                    {{-- Note --}}
                                    <small class="form-text text-muted">Dapat dikosongkan</small>
                                    @error('pekerjaan_yang_belum_diselesaikan')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                {{-- Tanggal Mulai --}}
                                <div class="col-md-6 mb-3" id="tanggal_mulai_group" style="display: none;">
                                    <label for="tanggal_mulai" class="form-label">Tanggal Mulai</label>
                                    <div class="input-group">
                                        <input type="text" id="tanggal_mulai"
                                            class="form-control text-end pe-3 @error('tanggal_mulai') is-invalid @enderror"
                                            name="tanggal_mulai" value="{{ old('tanggal_mulai') }}" required>
                                        <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                    </div>
                                    <small class="form-text text-muted">Tekan pada field untuk memilih
                                        tanggal</small>
                                    @error('tanggal_mulai')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Tanggal Berakhir --}}
                                <div class="col-md-6 mb-3" id="tanggal_berakhir_group" style="display: none;">
                                    <label for="tanggal_berakhir" class="form-label">Tanggal
                                        Berakhir</label>
                                    <div class="input-group">
                                        <input type="text" id="tanggal_berakhir"
                                            class="form-control text-end pe-3 @error('tanggal_berakhir') is-invalid @enderror"
                                            name="tanggal_berakhir" value="{{ old('tanggal_berakhir') }}" required>
                                        <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                    </div>
                                    <small class="form-text text-muted">Tekan pada field untuk memilih
                                        tanggal</small>
                                    @error('tanggal_berakhir')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- ============================================== --}}
                            {{-- FORM KHUSUS CUTI MELAHIRKAN (ID=21) - AUTO GENERATE --}}
                            {{-- ============================================== --}}
                            <div id="form-cuti-melahirkan" style="display: none;" class="mt-3">
                                @error('tanggal_array')
                                    <div class="alert alert-danger d-flex align-items-center" role="alert">
                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                        <span>{{ $message }}</span>
                                    </div>
                                @enderror
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="card bg-primary bg-gradient text-white">
                                            <div class="card-body py-2">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-baby-carriage me-2"></i>
                                                    Mode Pengajuan Cuti Melahirkan (Maksimal 90 Hari Kerja)
                                                </h6>
                                                <small class="mb-0 opacity-75">
                                                    Sistem akan otomatis menghitung tanggal & melewati weekend/hari libur nasional
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="tanggal_mulai_melahirkan" class="form-label fw-bold">
                                                Tanggal Mulai <span class="text-danger">*</span>
                                            </label>
                                            <input type="text"
                                                class="form-control datepicker"
                                                id="tanggal_mulai_melahirkan"
                                                name="tanggal_mulai_melahirkan"
                                                placeholder="dd/mm/yyyy"
                                                autocomplete="off"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="jumlah_hari_melahirkan" class="form-label fw-bold">
                                                Jumlah Hari <span class="text-danger">*</span>
                                            </label>
                                            <input type="number"
                                                class="form-control form-control-lg"
                                                id="jumlah_hari_melahirkan"
                                                name="jumlah_hari_melahirkan"
                                                min="1"
                                                max="90"
                                                value="90"
                                                readonly
                                                required>
                                            <div class="form-text">
                                                <i class="fas fa-info-circle text-primary"></i>
                                                Hanya hari kerja yang dihitung (weekend & libur otomatis dilewati)
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label fw-bold">Perkiraan Selesai</label>
                                            <input type="text"
                                                class="form-control bg-light"
                                                id="preview_selesai_melahirkan"
                                                readonly
                                                placeholder="-">
                                            <div class="form-text" id="info_total_hari">-</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label fw-bold">
                                                <i class="fas fa-calendar-check me-1"></i>
                                                Preview Tanggal Cuti (Otomatis)
                                            </label>
                                            <div class="table-responsive border rounded" style="max-height: 300px; overflow-y: auto;">
                                                <table class="table table-sm table-hover mb-0" id="tabel_preview_melahirkan">
                                                    <thead class="thead-light sticky-top" style="background-color: #b0e9eb;">
                                                        <tr>
                                                            <th width="60" class="text-center">#</th>
                                                            <th>Tanggal</th>
                                                            <th width="160" class="text-center">Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="tbody_preview_melahirkan">
                                                        <tr>
                                                            <td colspan="3" class="text-center text-muted py-3">
                                                                <i class="fas fa-arrow-left me-1"></i>
                                                                Isi tanggal mulai & jumlah hari untuk melihat preview...
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <input type="hidden" name="tanggal_array_melahirkan" id="hidden_tanggal_array_melahirkan" value="">
                                            <input type="hidden" name="jumlah_hari_melahirkan_hidden" id="hidden_jumlah_cuti_melahirkan" value="">
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="alasan_melahirkan" class="form-label">Catatan Tambahan (Opsional)</label>
                                            <textarea class="form-control"
                                                    id="alasan_melahirkan"
                                                    name="alasan"
                                                    rows="2"
                                                    placeholder="Contoh: Cuti melahirkan anak pertama..."></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- FORM KHUSUS CUTI HAJI (ID=11) - AUTO GENERATE --}}
                            {{-- ============================================== --}}
                            <div id="form-cuti-haji" style="display: none;" class="mt-3">
                                @error('tanggal_array')
                                    <div class="alert alert-danger d-flex align-items-center" role="alert">
                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                        <span>{{ $message }}</span>
                                    </div>
                                @enderror
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="card bg-primary bg-gradient text-white">
                                            <div class="card-body py-2">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-mosque me-2"></i>
                                                    Mode Pengajuan Cuti Menunaikan Ibadah Haji (40 Hari Kerja)
                                                </h6>
                                                <small class="mb-0 opacity-75">
                                                    Sistem akan otomatis menghitung tanggal & melewati weekend/hari libur nasional
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="tanggal_mulai_haji" class="form-label fw-bold">
                                                Tanggal Mulai <span class="text-danger">*</span>
                                            </label>
                                            <input type="text"
                                                class="form-control datepicker"
                                                id="tanggal_mulai_haji"
                                                name="tanggal_mulai_haji"
                                                placeholder="dd/mm/yyyy"
                                                autocomplete="off"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="jumlah_hari_haji" class="form-label fw-bold">
                                                Jumlah Hari <span class="text-danger">*</span>
                                            </label>
                                            <input type="number"
                                                class="form-control form-control-lg"
                                                id="jumlah_hari_haji"
                                                name="jumlah_hari_haji"
                                                min="1"
                                                max="40"
                                                value="40"
                                                readonly
                                                required>
                                            <div class="form-text">
                                                <i class="fas fa-info-circle text-primary"></i>
                                                Hanya hari kerja yang dihitung (weekend & libur otomatis dilewati)
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label fw-bold">Perkiraan Selesai</label>
                                            <input type="text"
                                                class="form-control bg-light"
                                                id="preview_selesai_haji"
                                                readonly
                                                placeholder="-">
                                            <div class="form-text" id="info_total_hari_haji">-</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label fw-bold">
                                                <i class="fas fa-calendar-check me-1"></i>
                                                Preview Tanggal Cuti (Otomatis)
                                            </label>
                                            <div class="table-responsive border rounded" style="max-height: 300px; overflow-y: auto;">
                                                <table class="table table-sm table-hover mb-0" id="tabel_preview_haji">
                                                    <thead class="thead-light sticky-top" style="background-color: #b0e9eb;">
                                                        <tr>
                                                            <th width="60" class="text-center">#</th>
                                                            <th>Tanggal</th>
                                                            <th width="160" class="text-center">Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="tbody_preview_haji">
                                                        <tr>
                                                            <td colspan="3" class="text-center text-muted py-3">
                                                                <i class="fas fa-arrow-left me-1"></i>
                                                                Isi tanggal mulai & jumlah hari untuk melihat preview...
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <input type="hidden" name="tanggal_array_haji" id="hidden_tanggal_array_haji" value="">
                                            <input type="hidden" name="jumlah_hari_haji_hidden" id="hidden_jumlah_cuti_haji" value="">
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="alasan_haji" class="form-label">Catatan Tambahan (Opsional)</label>
                                            <textarea class="form-control"
                                                    id="alasan_haji"
                                                    name="alasan"
                                                    rows="2"
                                                    placeholder="Contoh: Cuti menunaikan ibadah haji..."></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="table_tanggal" class="row" style="display: none;">
                                {{-- Tabel Dinamis untuk Daftar Tanggal --}}
                                <div class="col-md-12 mb-3">
                                    <label for="tanggal" class="form-label">Daftar Tanggal</label>
                                    <table class="table table-bordered table-striped" id="tanggal_table">
                                        {{-- <table class="table table-bordered " id="tanggal_table">
                                        --}}
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th class="text-center">Hari</th>
                                                <th class="text-center">Tanggal</th>
                                                <th class="text-center">Bulan</th>
                                                <th class="text-center">Tahun</th>
                                                <th class="text-center">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                    {{-- {{-- Note --}}
                                    <div class="nav-wrapper" id="noted">
                                        <code>Note : Hapus tanggal yang merupakan cuti bersama, libur nasional, dan
                                            weekend.</code>
                                    </div>
                                </div>

                                {{-- Hidden Input untuk Array Tanggal --}}
                                <input type="hidden" name="tanggal_array" id="tanggal_array"
                                    value="{{ old('tanggal_array') }}">
                                @error('tanggal_array')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="row">
                                {{-- Alamat --}}
                                <div class="col-md-6 mb-3" id="alamat_group" style="display: none;">
                                    <label for="alamat" class="form-label">Alamat</label>
                                    <input id="alamat" placeholder="Contoh: Jl. Ahmad Yani No. 123, Jakarta"
                                        type="text" class="form-control @error('alamat') is-invalid @enderror"
                                        name="alamat" value="{{ old('alamat') }}" required>
                                    {{-- Note --}}
                                    <small class="form-text text-muted">Wajib diisi</small>
                                    @error('alamat')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                {{-- Nomor Telepon --}}
                                <div class="col-md-6 mb-3" id="nomor_telepon_group" style="display: none;">
                                    <label for="nomor_telepon" class="form-label">Nomor Telepon</label>
                                    <input type="tel" placeholder="Contoh: 081234567890"
                                        class="form-control @error('nomor_telepon') is-invalid @enderror"
                                        name="nomor_telepon" id="nomor_telepon" value="{{ old('nomor_telepon') }}"
                                        maxlength="15" pattern="\d{10,15}"
                                        title="Masukkan nomor telepon yang valid (10-15 digit)" required
                                        inputmode="numeric">
                                    {{-- Note --}}
                                    <small class="form-text text-muted">Wajib diisi</small>
                                    @error('nomor_telepon')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                {{-- Lampiran --}}
                                <div class="col-md-6 mb-3" id="lampiran_group" style="display: none;">
                                    <div class="form-group">
                                        <label for="lampiran" class="form-label">Lampiran</label>
                                        <input type="file"
                                            class="form-control @error('lampiran') is-invalid @enderror @error('lampiran.*') is-invalid @enderror"
                                            name="lampiran[]" accept=".jpg,.png" id="lampiran-input" multiple>
                                        @error('lampiran')
                                            <span class="text-danger d-block">{{ $message }}</span>
                                        @enderror
                                        @error('lampiran.*')
                                            <span class="text-danger d-block">{{ $message }}</span>
                                        @enderror
                                        <small class="form-text text-muted">Berupa gambar (.jpg atau
                                            .png) dengan ukuran
                                            maksimum: 1.5 MB</small>
                                    </div>
                                </div>

                                {{-- Tempat untuk preview lampiran --}}
                                <div class="col-md-12 mb-3">
                                    <div id="lampiran-preview" class="d-flex flex-wrap gap-2"></div>
                                </div>
                            </div>

                            <!-- Modal untuk pratinjau gambar -->
                            <div class="modal fade" id="imageModal" 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">Pratinjau
                                                Lampiran</h5>
                                        </div>
                                        <div class="modal-body text-center">
                                            <img src="" id="modalImage" alt="Lampiran" class="img-thumbnail"
                                                style="width: 100%; height: auto; max-width: 500px;">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Tombol Kembali dan Simpan --}}
                            <div class="d-flex justify-content-end">
                                {{-- Tombol Kembali --}}
                                <button type="button" class="btn btn-secondary me-2" onclick="history.back()">
                                    <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span>
                                </button>

                                {{-- Tombol Simpan --}}
                                @if ($authorize->add == '1')
                                    <button type="submit" class="btn btn-primary" id="submit-button">
                                        <span id="button-text">
                                            <i class="fas fa-floppy-disk me-1"></i><span
                                                class="font-weight-bold">Simpan</span>
                                        </span>
                                        <span id="button-spinner" class="d-none">
                                            <span class="spinner-border spinner-border-sm me-1" role="status"
                                                aria-hidden="true"></span>
                                            <span class="font-weight-bold">Menyimpan...</span>
                                        </span>
                                    </button>
                                @endif
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    {{-- Flatpickr --}}
    <script src="{{ asset('/') }}assets/js/flatpickr.min.js"></script>
    <script>
        flatpickr(".datepicker"); // Flatpicker initinalization
    </script>

    {{-- Photoswipe --}}
    <script src="{{ asset('/') }}assets/js/photoswipe.umd.min.js"></script>
    <script src="{{ asset('/') }}assets/js/photoswipe-lightbox.umd.min.js"></script>

    {{-- Form Lampiran --}}
    <script src="{{ asset('/') }}assets/js/form_lampiran.js"></script>

    {{-- Js untuk menampilkan tanggal --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tanggalMulaiInput = document.getElementById('tanggal_mulai');
            const tanggalBerakhirInput = document.getElementById('tanggal_berakhir');
            const tanggalTable = document.getElementById('tanggal_table');
            const tanggalArrayInput = document.getElementById('tanggal_array');
            const tbody = tanggalTable.querySelector('tbody');
            let tanggalArray = [];

            // Fungsi untuk memformat tanggal ke format dd-mm-yyyy
            function formatDateToDDMMYYYY(date) {
                const d = new Date(date);
                const day = String(d.getDate()).padStart(2, '0');
                const month = String(d.getMonth() + 1).padStart(2, '0'); // Bulan dimulai dari 0
                const year = d.getFullYear(); // Ambil 4 digit tahun
                return `${day}-${month}-${year}`;
            }

            // Fungsi untuk menghasilkan array tanggal antara dua tanggal
            function generateDateRange(start, end) {
                const startDate = new Date(start);
                const endDate = new Date(end);
                const dates = [];
                while (startDate <= endDate) {
                    dates.push(formatDateToDDMMYYYY(startDate)); // Format tanggal di sini
                    startDate.setDate(startDate.getDate() + 1);
                }

                return dates;
            }

            // Fungsi untuk memperbarui tabel
            function updateTable() {
                // Delete datatable init before reinitiate datatable on the same table
                if ($.fn.dataTable.isDataTable('#tanggal_table')) {
                    $('#tanggal_table').DataTable().clear().destroy();
                }

                tbody.innerHTML = ''; // Hapus isi tabel sebelumnya
                tanggalArray.forEach((tanggal, index) => {
                    const row = document.createElement('tr');

                    const formattedDate = formatTanggal(tanggal);

                    row.innerHTML = `
                        <td class="text-center">${formattedDate.weekday}</td>
                        <td class="text-center">${formattedDate.day}</td>
                        <td class="text-center">${formattedDate.month}</td>
                        <td class="text-center">${formattedDate.year}</td>
                        <td class="text-center"><button type="button" class="btn btn-danger btn-sm" data-index="${index}">Hapus</button></td>
                    `;
                    tbody.appendChild(row);
                });
                tanggalTable.style.display = tanggalArray.length > 0 ? 'table' : 'none';
                tanggalArrayInput.value = JSON.stringify(tanggalArray); // Update hidden input

                $('#tanggal_table').DataTable({
                    "paging": true, // Enable pagination
                    "lengthChange": true, // Allow changing the number of rows per page
                    "searching": true, // Enable search box
                    "ordering": true, // Allow sorting by columns
                    "info": true, // Show info about the table
                    "autoWidth": false, // Disable auto-width adjustment
                    "ordering": false
                });
            }

            // Fungsi utuk konversi dd/mm/yyyy ke yyyy-mm-dd
            function formatDateToYYYYMMDD(date) {
                // Pecah string tanggal dengan separator "/"
                const parts = date.split('/'); // ["dd", "mm", "yyyy"]

                // Susun ulang menjadi format yyyy-mm-dd
                const day = parts[0];
                const month = parts[1];
                const year = parts[2];

                return `${year}-${month}-${day}`;
            }

            // Fungsi untuk mengubah format tanggal
            function formatTanggal(tanggal) {
                // Pecah format "30-01-2025" menjadi [30, 01, 2025]
                let parts = tanggal.split("-");
                let date = new Date(parts[2], parts[1] - 1, parts[0]); // (tahun, bulan-1, hari)

                // Format tanggal ke "Jumat, 02 Februari 2024"
                let formattedDate = new Intl.DateTimeFormat('id-ID', {
                    weekday: 'long',
                    day: '2-digit',
                    month: 'long',
                    year: 'numeric'
                }).format(date);

                let options = {
                    weekday: 'long',
                    day: '2-digit',
                    month: 'long',
                    year: 'numeric'
                };
                let formattedDateParts = new Intl.DateTimeFormat('id-ID', options).formatToParts(date);

                let weekday = formattedDateParts.find(part => part.type === 'weekday').value;
                let day = formattedDateParts.find(part => part.type === 'day').value;
                let month = formattedDateParts.find(part => part.type === 'month').value;
                let year = formattedDateParts.find(part => part.type === 'year').value;

                return {
                    weekday,
                    day,
                    month,
                    year
                };
            }

            // Fungsi untuk menangani perubahan tanggal
            function handleDateChange() {
                // Rosyid Handle jika hanya salah satu yang berubah dan satunya belum ada isi
                if (tanggalMulaiInput.value && !tanggalBerakhirInput.value) {
                    return;
                } else if (!tanggalMulaiInput.value && tanggalBerakhirInput.value) {
                    return;
                }

                const start = formatDateToYYYYMMDD(tanggalMulaiInput.value);
                const end = formatDateToYYYYMMDD(tanggalBerakhirInput.value);

                // jika start dan end tidak null dan start tidak lebih kecil dari end
                if (start && end && new Date(start) <= new Date(end)) {
                    tanggalArray = generateDateRange(start, end);
                    updateTable();
                }
            }

            // Event listener untuk input tanggal
            tanggalMulaiInput.addEventListener('change', handleDateChange);
            tanggalBerakhirInput.addEventListener('change', handleDateChange);

            // Event listener untuk tombol hapus
            tbody.addEventListener('click', function(e) {
                if (e.target.classList.contains('btn-danger')) {
                    const index = e.target.getAttribute('data-index');
                    tanggalArray.splice(index, 1);
                    updateTable();
                }
            });

            // Fungsi untuk membuat table sesuai dengan isi dari field tanggal_array
            function createTable() {
                try {
                    tanggalArray = JSON.parse(tanggalArrayInput.value);
                } catch (error) {
                    return;
                }
                tanggalArray.forEach((tanggal, index) => {
                    const row = document.createElement('tr');

                    const formattedDate = formatTanggal(tanggal);

                    row.innerHTML = `
                        <td class="text-center">${formattedDate.weekday}</td>
                        <td class="text-center">${formattedDate.day}</td>
                        <td class="text-center">${formattedDate.month}</td>
                        <td class="text-center">${formattedDate.year}</td>
                        <td class="text-center"><button type="button" class="btn btn-danger btn-sm" data-index="${index}">Hapus</button></td>
                    `;
                    tbody.appendChild(row);
                });
                tanggalTable.style.display = tanggalArray.length > 0 ? 'table' : 'none';
            }

            // Ketika refresh halaman table nya sesuai dengan tanggal mulai dan tanggal berakhir
            createTable();
        });
    </script>

    {{-- JS untuk handle halaman load pertama kali --}}
    <script>
        // Ketika refresh halaman dan sudah ada data pada jenis cuti
        document.addEventListener("DOMContentLoaded", function() {
            // Untuk menampilkan form sesuai jenis cuti
            const jenisCutiSelect = document.getElementById("jenis_cuti_id");

            updateFieldsDOMContentLoaded(jenisCutiSelect);
        })
    </script>

    {{-- JavaScript untuk mengubah field sesuai dengan jenis cuti yang dipilih --}}
    {{-- Sekaligus flatpicker --}}
    <script>
        const mstAturan = @json($mst_aturan);

        function updateFields(select) {
            const selectedID = select.value;
            const aturan = mstAturan.find(item => item.jenis_cuti_id == selectedID);

            // Hapus semua input fields terlebih dahulu
            document.getElementById("nik_karyawan_pemohon_hidden").value = "";
            document.getElementById("nik_karyawan_pemohon_display").value = "";
            document.getElementById("nama_karyawan_pemohon").value = "";
            document.getElementById("nik_karyawan_pengganti_hidden").value = "";
            document.getElementById("nik_karyawan_pengganti_display").value = "";
            document.getElementById("nama_karyawan_pengganti").value = "";
            document.getElementById("alasan").value = "";
            document.getElementById("pekerjaan_yang_belum_diselesaikan").value = "";
            document.getElementById("tanggal_mulai").value = "";
            document.getElementById("tanggal_berakhir").value = "";
            const tableTanggalBody = document.querySelector("#tanggal_table tbody");
            tableTanggalBody.innerHTML = ""; // Kosongkan tabel
            document.getElementById("tanggal_array").value = "";
            document.getElementById("alamat").value = "";
            document.getElementById("nomor_telepon").value = "";
            document.getElementById("lampiran-input").value = "";

            // Reset haji fields
            const tanggalMulaiHaji = document.getElementById("tanggal_mulai_haji");
            if (tanggalMulaiHaji && tanggalMulaiHaji._flatpickrInstance) { tanggalMulaiHaji._flatpickrInstance.clear(); }
            const tanggalMulaiHajiEl = document.getElementById("tanggal_mulai_haji");
            if (tanggalMulaiHajiEl) tanggalMulaiHajiEl.value = "";
            const previewSelesaiHaji = document.getElementById("preview_selesai_haji");
            if (previewSelesaiHaji) previewSelesaiHaji.value = "";
            const infoTotalHariHaji = document.getElementById("info_total_hari_haji");
            if (infoTotalHariHaji) infoTotalHariHaji.innerHTML = "-";
            const tbodyHaji = document.getElementById("tbody_preview_haji");
            if (tbodyHaji) tbodyHaji.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-3"><i class="fas fa-arrow-left me-1"></i>Isi tanggal mulai & jumlah hari untuk melihat preview...</td></tr>';
            const hiddenTanggalArrayHaji = document.getElementById("hidden_tanggal_array_haji");
            if (hiddenTanggalArrayHaji) hiddenTanggalArrayHaji.value = "";
            const hiddenJumlahCutiHaji = document.getElementById("hidden_jumlah_cuti_haji");
            if (hiddenJumlahCutiHaji) hiddenJumlahCutiHaji.value = "";
            const alasanHaji = document.getElementById("alasan_haji");
            if (alasanHaji) alasanHaji.value = "";

            if (aturan) {
                jenisCutiId = aturan.jenis_cuti_id;

                // set value element dengan id = jumlah_cuti
                document.getElementById("jumlah_cuti").value = aturan.jumlah_cuti;

                // Deteksi cuti melahirkan
                const isMelahirkan = String(jenisCutiId) === '21' ||
                    (aturan.judul && /melahirkan|maternity|hamil/i.test(aturan.judul));

                // Deteksi cuti haji
                const isHaji = String(jenisCutiId) === '11' ||
                    (aturan.judul && /haji|ibadah/i.test(aturan.judul));

                if (isMelahirkan) {
                    // --- MODE MELAHIRKAN ---
                    document.getElementById("nik_karyawan_pemohon_group").style.display = "block";
                    document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                    document.getElementById("alasan_group").style.display = "none";
                    document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                    document.getElementById("tanggal_mulai_group").style.display = "none";
                    document.getElementById("tanggal_berakhir_group").style.display = "none";
                    document.getElementById("table_tanggal").style.display = "none";
                    document.getElementById("alamat_group").style.display = "block";
                    document.getElementById("nomor_telepon_group").style.display = "block";
                    document.getElementById("lampiran_group").style.display = "none";
                    document.getElementById("form-cuti-melahirkan").style.display = "block";
                    document.getElementById("form-cuti-haji").style.display = "none";
                    document.getElementById("aturanIsi").innerText = "Cuti melahirkan diberikan maksimal 90 hari kerja. Weekend dan hari libur nasional otomatis tidak dihitung.";
                } else if (isHaji) {
                    // --- MODE HAJI ---
                    document.getElementById("nik_karyawan_pemohon_group").style.display = "block";
                    document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                    document.getElementById("alasan_group").style.display = "none";
                    document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                    document.getElementById("tanggal_mulai_group").style.display = "none";
                    document.getElementById("tanggal_berakhir_group").style.display = "none";
                    document.getElementById("table_tanggal").style.display = "none";
                    document.getElementById("alamat_group").style.display = "block";
                    document.getElementById("nomor_telepon_group").style.display = "block";
                    document.getElementById("lampiran_group").style.display = "none";
                    document.getElementById("form-cuti-melahirkan").style.display = "none";
                    document.getElementById("form-cuti-haji").style.display = "block";
                    document.getElementById("aturanIsi").innerText = "Cuti menunaikan ibadah haji diberikan 40 hari kerja. Weekend dan hari libur nasional otomatis tidak dihitung.";
                } else {
                    // --- MODE NORMAL ---
                    document.getElementById("nik_karyawan_pemohon_group").style.display = "block";
                    document.getElementById("nik_karyawan_pengganti_group").style.display = "block";
                    document.getElementById("alasan_group").style.display = "block";
                    document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "block";
                    document.getElementById("tanggal_mulai_group").style.display = "block";
                    document.getElementById("tanggal_berakhir_group").style.display = "block";
                    document.getElementById("table_tanggal").style.display = "block";
                    document.getElementById("alamat_group").style.display = "block";
                    document.getElementById("nomor_telepon_group").style.display = "block";
                    document.getElementById("form-cuti-melahirkan").style.display = "none";
                    document.getElementById("form-cuti-haji").style.display = "none";

                    if (jenisCutiId == 2 || jenisCutiId == 20) {
                        document.getElementById("lampiran_group").style.display = "none";
                    } else {
                        document.getElementById("lampiran_group").style.display = "block";
                    }
                }

                document.getElementById("aturanJudul").innerText = aturan.judul;
                document.getElementById("aturanJumlah").innerText = aturan.jumlah_cuti ?
                    aturan.jumlah_cuti + " hari" :
                    "Tentukan sendiri (akan ditinjau oleh personalia)";
            } else if (selectedID === '21') {
                // Cuti melahirkan tanpa aturan - tetap tampilkan form melahirkan
                document.getElementById("aturanJudul").innerText = "Cuti Melahirkan";
                document.getElementById("aturanIsi").innerText = "Cuti melahirkan diberikan maksimal 90 hari kerja. Weekend dan hari libur nasional otomatis tidak dihitung.";
                document.getElementById("aturanJumlah").innerText = "Maksimal 90 hari kerja";
                document.getElementById("jumlah_cuti").value = "90";

                document.getElementById("nik_karyawan_pemohon_group").style.display = "block";
                document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                document.getElementById("alasan_group").style.display = "none";
                document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                document.getElementById("tanggal_mulai_group").style.display = "none";
                document.getElementById("tanggal_berakhir_group").style.display = "none";
                document.getElementById("table_tanggal").style.display = "none";
                document.getElementById("alamat_group").style.display = "block";
                document.getElementById("nomor_telepon_group").style.display = "block";
                document.getElementById("lampiran_group").style.display = "none";
                document.getElementById("form-cuti-melahirkan").style.display = "block";
                document.getElementById("form-cuti-haji").style.display = "none";
            } else if (selectedID === '11') {
                // Cuti haji tanpa aturan - tetap tampilkan form haji
                document.getElementById("aturanJudul").innerText = "Cuti Menunaikan Ibadah Haji";
                document.getElementById("aturanIsi").innerText = "Cuti menunaikan ibadah haji diberikan 40 hari kerja. Weekend dan hari libur nasional otomatis tidak dihitung.";
                document.getElementById("aturanJumlah").innerText = "40 hari kerja";
                document.getElementById("jumlah_cuti").value = "40";

                document.getElementById("nik_karyawan_pemohon_group").style.display = "block";
                document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                document.getElementById("alasan_group").style.display = "none";
                document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                document.getElementById("tanggal_mulai_group").style.display = "none";
                document.getElementById("tanggal_berakhir_group").style.display = "none";
                document.getElementById("table_tanggal").style.display = "none";
                document.getElementById("alamat_group").style.display = "block";
                document.getElementById("nomor_telepon_group").style.display = "block";
                document.getElementById("lampiran_group").style.display = "none";
                document.getElementById("form-cuti-melahirkan").style.display = "none";
                document.getElementById("form-cuti-haji").style.display = "block";
            } else {
                // Reset ke default jika tidak ada aturan ketika memilih jenis cuti
                document.getElementById("aturanJudul").innerText =
                    "Belum ada aturan untuk jenis cuti ini. Anda belum bisa mengirimkan permohonan.";
                document.getElementById("aturanIsi").innerText = "-";
                document.getElementById("aturanJumlah").innerText = "-";

                // Sembunyikan fields seperti semula
                document.getElementById("jumlah_cuti").value = "";
                document.getElementById("nik_karyawan_pemohon_group").style.display = "none";
                document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                document.getElementById("alasan_group").style.display = "none";
                document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                document.getElementById("tanggal_mulai_group").style.display = "none";
                document.getElementById("tanggal_berakhir_group").style.display = "none";
                document.getElementById("table_tanggal").style.display = "none";
                document.getElementById("alamat_group").style.display = "none";
                document.getElementById("nomor_telepon_group").style.display = "none";
                document.getElementById("lampiran_group").style.display = "none";
                document.getElementById("form-cuti-melahirkan").style.display = "none";
                document.getElementById("form-cuti-haji").style.display = "none";
            }
        }

        function updateFieldsDOMContentLoaded(select) {
            const selectedID = select.value;
            const aturan = mstAturan.find(item => item.jenis_cuti_id == selectedID);

            if (aturan) {
                jenisCutiId = aturan.jenis_cuti_id;

                const isMelahirkan = String(jenisCutiId) === '21' ||
                    (aturan.judul && /melahirkan|maternity|hamil/i.test(aturan.judul));

                const isHaji = String(jenisCutiId) === '11' ||
                    (aturan.judul && /haji|ibadah/i.test(aturan.judul));

                if (isMelahirkan) {
                    document.getElementById("nik_karyawan_pemohon_group").style.display = "block";
                    document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                    document.getElementById("alasan_group").style.display = "none";
                    document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                    document.getElementById("tanggal_mulai_group").style.display = "none";
                    document.getElementById("tanggal_berakhir_group").style.display = "none";
                    document.getElementById("table_tanggal").style.display = "none";
                    document.getElementById("alamat_group").style.display = "block";
                    document.getElementById("nomor_telepon_group").style.display = "block";
                    document.getElementById("lampiran_group").style.display = "none";
                    document.getElementById("form-cuti-melahirkan").style.display = "block";
                    document.getElementById("form-cuti-haji").style.display = "none";
                } else if (isHaji) {
                    document.getElementById("nik_karyawan_pemohon_group").style.display = "block";
                    document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                    document.getElementById("alasan_group").style.display = "none";
                    document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                    document.getElementById("tanggal_mulai_group").style.display = "none";
                    document.getElementById("tanggal_berakhir_group").style.display = "none";
                    document.getElementById("table_tanggal").style.display = "none";
                    document.getElementById("alamat_group").style.display = "block";
                    document.getElementById("nomor_telepon_group").style.display = "block";
                    document.getElementById("lampiran_group").style.display = "none";
                    document.getElementById("form-cuti-melahirkan").style.display = "none";
                    document.getElementById("form-cuti-haji").style.display = "block";
                } else {
                    document.getElementById("nik_karyawan_pemohon_group").style.display = "block";
                    document.getElementById("nik_karyawan_pengganti_group").style.display = "block";
                    document.getElementById("alasan_group").style.display = "block";
                    document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "block";
                    document.getElementById("tanggal_mulai_group").style.display = "block";
                    document.getElementById("tanggal_berakhir_group").style.display = "block";
                    document.getElementById("table_tanggal").style.display = "block";
                    document.getElementById("alamat_group").style.display = "block";
                    document.getElementById("nomor_telepon_group").style.display = "block";
                    document.getElementById("form-cuti-melahirkan").style.display = "none";
                    document.getElementById("form-cuti-haji").style.display = "none";

                    if (jenisCutiId == 2 || jenisCutiId == 20) {
                        document.getElementById("lampiran_group").style.display = "none";
                    } else {
                        document.getElementById("lampiran_group").style.display = "block";
                    }
                }

                document.getElementById("aturanJudul").innerText = aturan.judul;
                document.getElementById("aturanIsi").innerText = aturan.isi;
                document.getElementById("aturanJumlah").innerText = aturan.jumlah_cuti ?
                    aturan.jumlah_cuti + " hari" :
                    "Tentukan sendiri (akan ditinjau oleh personalia)";
            } else if (selectedID === '21') {
                // Cuti melahirkan tanpa aturan - tetap tampilkan form melahirkan
                document.getElementById("aturanJudul").innerText = "Cuti Melahirkan";
                document.getElementById("aturanIsi").innerText = "Cuti melahirkan diberikan maksimal 90 hari kerja. Weekend dan hari libur nasional otomatis tidak dihitung.";
                document.getElementById("aturanJumlah").innerText = "Maksimal 90 hari kerja";

                document.getElementById("nik_karyawan_pemohon_group").style.display = "block";
                document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                document.getElementById("alasan_group").style.display = "none";
                document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                document.getElementById("tanggal_mulai_group").style.display = "none";
                document.getElementById("tanggal_berakhir_group").style.display = "none";
                document.getElementById("table_tanggal").style.display = "none";
                document.getElementById("alamat_group").style.display = "block";
                document.getElementById("nomor_telepon_group").style.display = "block";
                document.getElementById("lampiran_group").style.display = "none";
                document.getElementById("form-cuti-melahirkan").style.display = "block";
                document.getElementById("form-cuti-haji").style.display = "none";
            } else if (selectedID === '11') {
                // Cuti haji tanpa aturan - tetap tampilkan form haji
                document.getElementById("aturanJudul").innerText = "Cuti Menunaikan Ibadah Haji";
                document.getElementById("aturanIsi").innerText = "Cuti menunaikan ibadah haji diberikan 40 hari kerja. Weekend dan hari libur nasional otomatis tidak dihitung.";
                document.getElementById("aturanJumlah").innerText = "40 hari kerja";

                document.getElementById("nik_karyawan_pemohon_group").style.display = "block";
                document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                document.getElementById("alasan_group").style.display = "none";
                document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                document.getElementById("tanggal_mulai_group").style.display = "none";
                document.getElementById("tanggal_berakhir_group").style.display = "none";
                document.getElementById("table_tanggal").style.display = "none";
                document.getElementById("alamat_group").style.display = "block";
                document.getElementById("nomor_telepon_group").style.display = "block";
                document.getElementById("lampiran_group").style.display = "none";
                document.getElementById("form-cuti-melahirkan").style.display = "none";
                document.getElementById("form-cuti-haji").style.display = "block";
            } else {
                // Reset ke default jika tidak ada aturan ketika memilih jenis cuti
                document.getElementById("aturanJudul").innerText =
                    "Belum ada aturan untuk jenis cuti ini. Anda belum bisa mengirimkan permohonan.";
                document.getElementById("aturanIsi").innerText = "-";
                document.getElementById("aturanJumlah").innerText = "-";

                // Sembunyikan fields seperti semula
                document.getElementById("nik_karyawan_pemohon_group").style.display = "none";
                document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                document.getElementById("alasan_group").style.display = "none";
                document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                document.getElementById("tanggal_mulai_group").style.display = "none";
                document.getElementById("tanggal_berakhir_group").style.display = "none";
                document.getElementById("table_tanggal").style.display = "none";
                document.getElementById("alamat_group").style.display = "none";
                document.getElementById("nomor_telepon_group").style.display = "none";
                document.getElementById("lampiran_group").style.display = "none";
                document.getElementById("form-cuti-melahirkan").style.display = "none";
                document.getElementById("form-cuti-haji").style.display = "none";
            }
        }

        document.addEventListener("DOMContentLoaded", function() {
            const tanggalMulaiInput = document.getElementById("tanggal_mulai");
            const tanggalBerakhirInput = document.getElementById("tanggal_berakhir");

            if (!tanggalMulaiInput || !tanggalBerakhirInput) {
                console.error("Element tanggal_mulai atau tanggal_berakhir tidak ditemukan.");
                return;
            }

            const periodeCuti = @json($periodeCuti);

            // Buat array untuk menonaktifkan tanggal yang tidak aktif
            const activeDates = [];
            periodeCuti.forEach(periode => {
                const startDate = new Date(periode.mulai);
                const endDate = new Date(periode.berakhir);
                // Tambahkan tanggal dalam rentang ke array activeDates
                for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
                    const tempDate = new Date(d);
                    tempDate.setHours(0, 0, 0, 0); // Reset waktu ke 00:00:00
                    activeDates.push(tempDate.toISOString().split('T')[0]);
                }
            });

            // Inisialisasi Flatpickr untuk tanggal mulai
            const tanggalMulaiPicker = flatpickr(tanggalMulaiInput, {
                dateFormat: "d/m/Y",
                disable: [
                    function(date) {
                        const dateString = date.toISOString().split('T')[0]; // Format YYYY-MM-DD
                        return !activeDates.includes(
                            dateString); // Nonaktifkan jika tidak ada dalam activeDates
                    }
                ],
                onChange: function(selectedDates) {
                    const tanggalMulai = selectedDates[0];
                    tanggalBerakhirPicker.set("minDate", tanggalMulai);
                }
            });

            // Inisialisasi Flatpickr untuk tanggal berakhir
            const tanggalBerakhirPicker = flatpickr(tanggalBerakhirInput, {
                dateFormat: "d/m/Y",
                disable: [
                    // I don't know why, but it's such an anomaly where i have to declare this to avoid bug initialization error.
                    function(date) {
                        return;
                    }
                ]
            });
        });
    </script>

    <script>
        $(document).on('click', '#search_button_nik_karyawan_pemohon', function(event) {
            event.preventDefault();

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

            // ID to define which modal is sending request
            let idmodal = "nik_karyawan_pemohon";

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

        $(document).on('click', '#search_button_nik_karyawan_pengganti', function(event) {
            event.preventDefault();

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

            // ID to define which modal is sending request
            let idmodal = "nik_karyawan_pengganti"

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

        $(document).on('keypress', '#search_input_nik_karyawan_pemohon', function(e) {
            if (e.which === 13) {
                $('#search_button_nik_karyawan_pemohon').click();
            }
        });

        $(document).on('keypress', '#search_input_nik_karyawan_pengganti', function(e) {
            if (e.which === 13) {
                $('#search_button_nik_karyawan_pengganti').click();
            }
        });

        $(document).on('click', '#pagination-links_nik_karyawan_pemohon .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

            // ID to define which modal is sending request
            let idmodal = "nik_karyawan_pemohon";

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

        $(document).on('click', '#pagination-links_nik_karyawan_pengganti .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

            // ID to define which modal is sending request
            let idmodal = "nik_karyawan_pengganti"

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

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

            if (idmodal == "nik_karyawan_pemohon") {
                // Get search val
                search = $('#search_input_nik_karyawan_pemohon').val();

                let loadingSpinner = document.getElementById(
                    'loading-spinner_nik_karyawan_pemohon'); // For search button
                let paginationLoading = document.getElementById(
                    'pagination-loading_nik_karyawan_pemohon'); // For pagination
                let searchButton = document.getElementById('search_button_nik_karyawan_pemohon');
                let paginationLinks = document.getElementById('pagination-links_nik_karyawan_pemohon');
                let paginationInfo = document.getElementById('pagination-info_nik_karyawan_pemohon');

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

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

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

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

                // Hide pagination info
                paginationInfo.style.display = 'none';

            } else if (idmodal == "nik_karyawan_pengganti") {
                // Get search val
                search = $('#search_input_nik_karyawan_pengganti').val();

                let loadingSpinner = document.getElementById(
                    'loading-spinner_nik_karyawan_pengganti'); // For search button
                let paginationLoading = document.getElementById(
                    'pagination-loading_nik_karyawan_pengganti'); // For pagination
                let searchButton = document.getElementById('search_button_nik_karyawan_pengganti');
                let paginationLinks = document.getElementById('pagination-links_nik_karyawan_pengganti');
                let paginationInfo = document.getElementById('pagination-info_nik_karyawan_pengganti');

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

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

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

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

                // Hide pagination info
                paginationInfo.style.display = 'none';
            } else {
                return;
            }

            $.ajax({
                url: "{{ url($url_menu) . '/ajax/filter' }}?page=" + page,
                method: 'GET',
                data: {
                    search: search,
                    idmodal: idmodal
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    let tbody = "";
                    if (response.data.idmodal == "nik_karyawan_pemohon") {
                        $.each(response.data.table_result.data, function(index, row) {

                            tbody += `<tr>
                                <td width="20px">
                                    <span class="btn badge bg-primary badge-lg" onclick="select_modalnik_karyawan_pemohon('${row.nik}', '${row.nama}')">
                                        <i class="bi bi-check-circle me-1"></i> Select
                                    </span>
                                </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>
                            </tr>`;
                        });

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

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

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

                        // Make it none
                        document.getElementById('pagination-loading_nik_karyawan_pemohon').style.display =
                            'none';

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

                        // Show pagination links
                        document.getElementById('pagination-links_nik_karyawan_pemohon').style.display =
                            'block';

                        // Show pagination info
                        document.getElementById('pagination-info_nik_karyawan_pemohon').style.display = 'block';

                    } else if (response.data.idmodal == "nik_karyawan_pengganti") {
                        $.each(response.data.table_result.data, function(index, row) {

                            tbody += `<tr>
                                <td width="20px">
                                    <span class="btn badge bg-primary badge-lg" onclick="select_modalnik_karyawan_pengganti('${row.nik}', '${row.nama}')">
                                        <i class="bi bi-check-circle me-1"></i> Select
                                    </span>
                                </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>
                            </tr>`;
                        });

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

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

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

                        // Make it none
                        document.getElementById('pagination-loading_nik_karyawan_pengganti').style.display =
                            'none';

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

                        // Show pagination links
                        document.getElementById('pagination-links_nik_karyawan_pengganti').style.display =
                            'block';

                        // Show pagination info
                        document.getElementById('pagination-info_nik_karyawan_pengganti').style.display =
                            'block';
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan saat memuat data. Silakan coba lagi.');

                    // Reset DOM elements to default state
                    if (idmodal == "nik_karyawan_pemohon") {
                        document.getElementById('loading-spinner_nik_karyawan_pemohon').style.display = 'none';
                        document.getElementById('pagination-loading_nik_karyawan_pemohon').style.display =
                            'none';
                        document.getElementById('search_button_nik_karyawan_pemohon').disabled = false;
                        document.getElementById('pagination-links_nik_karyawan_pemohon').style.display =
                            'block';
                        document.getElementById('pagination-info_nik_karyawan_pemohon').style.display = 'block';
                    } else if (idmodal == "nik_karyawan_pengganti") {
                        document.getElementById('loading-spinner_nik_karyawan_pengganti').style.display =
                            'none';
                        document.getElementById('pagination-loading_nik_karyawan_pengganti').style.display =
                            'none';
                        document.getElementById('search_button_nik_karyawan_pengganti').disabled = false;
                        document.getElementById('pagination-links_nik_karyawan_pengganti').style.display =
                            'block';
                        document.getElementById('pagination-info_nik_karyawan_pengganti').style.display =
                            'block';
                    }
                }
            });
        }
    </script>

    <!-- Inisialisasi DataTables -->
    <script>
        $(document).ready(function() {
            $('#tanggal_table').DataTable({
                "paging": true, // Enable pagination
                "lengthChange": true, // Allow changing the number of rows per page
                "searching": true, // Enable search box
                "ordering": true, // Allow sorting by columns
                "info": true, // Show info about the table
                "autoWidth": false, // Disable auto-width adjustment
                "ordering": false
            });
        });
    </script>

    {{-- JS untuk loading spinner pada tombol simpan --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('{{ $dmenu }}-form');
            const submitButton = document.getElementById('submit-button');
            const buttonText = document.getElementById('button-text');
            const buttonSpinner = document.getElementById('button-spinner');
            let skipExceedWarning = false;

            if (form && submitButton) {
                form.addEventListener('submit', function(e) {
                    // Cek Cuti Bersama: validasi sisa jatah sebelum submit
                    var jenisCutiId = document.getElementById('jenis_cuti_id').value;
                    if (jenisCutiId === '20') {
                        var jatahBersamaText = document.getElementById('jatahCutiBersama').textContent;
                        var jatahBersama = parseInt(jatahBersamaText) || 0;

                        if (jatahBersama <= 0) {
                            e.preventDefault();
                            submitButton.disabled = false;
                            buttonText.classList.remove('d-none');
                            buttonSpinner.classList.add('d-none');
                            Swal.fire({
                                icon: 'warning',
                                title: 'Pengajuan Tidak Dapat Dilakukan',
                                text: 'Sisa Cuti Bersama karyawan ini adalah 0 hari. Pengajuan cuti bersama tidak dapat diproses.'
                            });
                            return;
                        }

                        // Cek jumlah hari yang dipilih melebihi sisa
                        var tanggalArrayVal = document.getElementById('tanggal_array').value;
                        if (tanggalArrayVal) {
                            try {
                                var tanggalArr = JSON.parse(tanggalArrayVal);
                                if (tanggalArr.length > jatahBersama) {
                                    e.preventDefault();
                                    submitButton.disabled = false;
                                    buttonText.classList.remove('d-none');
                                    buttonSpinner.classList.add('d-none');
                                    Swal.fire({
                                        icon: 'warning',
                                        title: 'Jumlah Hari Melebihi Sisa',
                                        text: 'Jumlah hari yang dipilih (' + tanggalArr.length + ' hari) melebihi sisa Cuti Bersama yang tersedia (' + jatahBersama + ' hari).'
                                    });
                                    return;
                                }
                            } catch (err) {}
                        }
                    }

                    // ==================== WARNING KELEBIHAN CUTI PRIBADI ====================
                    const jenisCutiSelect = document.getElementById('jenis_cuti_id');
                    const selectedJenisCuti = jenisCutiSelect ? jenisCutiSelect.value : null;

                    let isCutiPribadiJS = (selectedJenisCuti === '2');
                    if (!isCutiPribadiJS && selectedJenisCuti) {
                        const optPriv = jenisCutiSelect.options[jenisCutiSelect.selectedIndex];
                        if (optPriv) {
                            const nm = optPriv.text.toLowerCase();
                            if (nm.includes('pribadi') || nm.includes('tahunan')) isCutiPribadiJS = true;
                        }
                    }

                    if (isCutiPribadiJS && !skipExceedWarning) {
                        // Baca sisa cuti dari elemen #jatahCuti (teks berisi angka saja setelah karyawan dipilih)
                        const jatahCutiText = document.getElementById('jatahCuti').textContent.trim();
                        const sisaCutiPribadi = parseInt(jatahCutiText) || 0;

                        // Baca jumlah hari dari tanggal_array
                        const tanggalArrayField = document.getElementById('tanggal_array');
                        let totalHariDiajukan = 0;
                        if (tanggalArrayField && tanggalArrayField.value) {
                            try {
                                const parsed = JSON.parse(tanggalArrayField.value);
                                totalHariDiajukan = Array.isArray(parsed) ? parsed.length : 0;
                            } catch(ex) {}
                        }

                        if (sisaCutiPribadi !== 0 && totalHariDiajukan > 0 && totalHariDiajukan > sisaCutiPribadi) {
                            e.preventDefault();
                            submitButton.disabled = false;
                            buttonText.classList.remove('d-none');
                            buttonSpinner.classList.add('d-none');

                            const kelebihanHari = totalHariDiajukan - Math.max(0, sisaCutiPribadi);
                            const isAlreadyMinus = sisaCutiPribadi < 0;

                            let infoHtml = '<div style="text-align:left;font-size:14px;line-height:1.8;">'
                                + '<div style="background:#f8f9fa;border-radius:8px;padding:12px 16px;margin-bottom:12px;">';

                            if (isAlreadyMinus) {
                                infoHtml += '<div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>Sisa Cuti Pribadi Karyawan:</span><strong style="color:#dc3545;">' + sisaCutiPribadi + ' hari (minus)</strong></div>'
                                    + '<div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>Jumlah Hari Diajukan:</span><strong>' + totalHariDiajukan + ' hari</strong></div>'
                                    + '<div style="display:flex;justify-content:space-between;border-top:1px solid #dee2e6;padding-top:6px;"><span>Total Setelah Pengajuan:</span><strong style="color:#dc3545;">' + (sisaCutiPribadi - totalHariDiajukan) + ' hari</strong></div>';
                            } else {
                                infoHtml += '<div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>Sisa Cuti Pribadi Karyawan:</span><strong>' + sisaCutiPribadi + ' hari</strong></div>'
                                    + '<div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>Jumlah Hari Diajukan:</span><strong>' + totalHariDiajukan + ' hari</strong></div>'
                                    + '<div style="display:flex;justify-content:space-between;border-top:1px solid #dee2e6;padding-top:6px;"><span>Kelebihan Hari:</span><strong style="color:#dc3545;">' + kelebihanHari + ' hari</strong></div>';
                            }

                            infoHtml += '</div>'
                                + '<div style="background:#fff3cd;border-left:4px solid #ffc107;border-radius:4px;padding:10px 14px;">'
                                + '<strong><i class="fas fa-exclamation-triangle" style="color:#d39e00;"></i> Perhatian:</strong><br>';

                            if (isAlreadyMinus) {
                                infoHtml += 'Saldo cuti karyawan sudah <strong>minus ' + Math.abs(sisaCutiPribadi) + ' hari</strong>. '
                                    + 'Pengajuan ini akan menambah minus menjadi <strong>' + Math.abs(sisaCutiPribadi - totalHariDiajukan) + ' hari</strong> yang berdampak pada <strong>pemotongan gaji</strong>.';
                            } else {
                                infoHtml += 'Kelebihan <strong>' + kelebihanHari + ' hari</strong> akan berdampak pada <strong>pemotongan gaji</strong>.';
                            }

                            infoHtml += '</div></div>';

                            Swal.fire({
                                icon: 'warning',
                                title: isAlreadyMinus ? 'Saldo Cuti Sudah Minus' : 'Pengajuan Cuti Melebihi Sisa Saldo',
                                html: infoHtml,
                                showCancelButton: true,
                                confirmButtonText: '<i class="fas fa-check me-1"></i>Ya, Lanjutkan Pengajuan',
                                cancelButtonText: '<i class="fas fa-times me-1"></i>Batal',
                                confirmButtonColor: '#d33',
                                cancelButtonColor: '#6c757d',
                                reverseButtons: true,
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    skipExceedWarning = true;
                                    submitButton.disabled = true;
                                    buttonText.classList.add('d-none');
                                    buttonSpinner.classList.remove('d-none');
                                    form.submit();
                                }
                            });
                            return;
                        }
                    }
                    // ==================== END WARNING KELEBIHAN CUTI PRIBADI ====================

                    // Cek apakah mode melahirkan dan sinkronisasi data
                    const melahirkanForm = document.getElementById('form-cuti-melahirkan');
                    if (melahirkanForm && melahirkanForm.style.display !== 'none') {
                        const tanggalArrayMelahirkan = document.getElementById('hidden_tanggal_array_melahirkan');
                        const jumlahCutiMelahirkan = document.getElementById('hidden_jumlah_cuti_melahirkan');

                        if (!tanggalArrayMelahirkan.value || !JSON.parse(tanggalArrayMelahirkan.value).length) {
                            e.preventDefault();
                            submitButton.disabled = false;
                            buttonText.classList.remove('d-none');
                            buttonSpinner.classList.add('d-none');
                            Swal.fire({
                                icon: 'error',
                                title: 'Preview Belum Siap',
                                text: 'Isi Tanggal Mulai, tunggu preview muncul, lalu coba kirim lagi.'
                            });
                            return;
                        }

                        // Sync ke hidden fields utama
                        document.getElementById('tanggal_array_melahirkan').value = tanggalArrayMelahirkan.value;
                        document.getElementById('jumlah_hari_melahirkan_hidden').value = jumlahCutiMelahirkan.value;
                    }

                    // Cek apakah mode haji dan sinkronisasi data
                    const hajiForm = document.getElementById('form-cuti-haji');
                    if (hajiForm && hajiForm.style.display !== 'none') {
                        const tanggalArrayHaji = document.getElementById('hidden_tanggal_array_haji');
                        const jumlahCutiHaji = document.getElementById('hidden_jumlah_cuti_haji');

                        if (!tanggalArrayHaji.value || !JSON.parse(tanggalArrayHaji.value).length) {
                            e.preventDefault();
                            submitButton.disabled = false;
                            buttonText.classList.remove('d-none');
                            buttonSpinner.classList.add('d-none');
                            Swal.fire({
                                icon: 'error',
                                title: 'Preview Belum Siap',
                                text: 'Isi Tanggal Mulai, tunggu preview muncul, lalu coba kirim lagi.'
                            });
                            return;
                        }

                        // Sync ke hidden fields utama
                        document.getElementById('tanggal_array_haji').value = tanggalArrayHaji.value;
                        document.getElementById('jumlah_hari_haji_hidden').value = jumlahCutiHaji.value;
                    }

                    submitButton.disabled = true;
                    buttonText.classList.add('d-none');
                    buttonSpinner.classList.remove('d-none');
                });
            }
        });
    </script>

    {{-- ============================================================ --}}
    {{-- JAVASCRIPT KHUSUS CUTI MELAHIRKAN (AUTO-GENERATE) --}}
    {{-- ============================================================ --}}
    <script>
    const liburNasionalListPckbr1 = @json($liburNasional ?? []);
    const cutiBersamaListPckbr1 = @json($cutiBersamaDates ?? []);

    // Buat array tanggal periode aktif (untuk menonaktifkan tanggal di luar periode yang masih dibuka)
    const activeDatesCuti = [];
    (@json($periodeCuti ?? [])).forEach(periode => {
        const startDate = new Date(periode.mulai);
        const endDate = new Date(periode.berakhir);
        for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
            const tempDate = new Date(d);
            tempDate.setHours(0, 0, 0, 0);
            activeDatesCuti.push(tempDate.toISOString().split('T')[0]);
        }
    });

    function generatePreviewMelahirkanPckbr1() {
        const tanggalMulaiVal = document.getElementById('tanggal_mulai_melahirkan').value;
        const jumlahHari = parseInt(document.getElementById('jumlah_hari_melahirkan').value) || 0;

        if (!tanggalMulaiVal || jumlahHari <= 0 || jumlahHari > 90) {
            document.getElementById('tbody_preview_melahirkan').innerHTML = '<tr><td colspan="3" class="text-center text-warning py-3"><i class="fas fa-exclamation-triangle me-1"></i>Masukkan tanggal mulai yang valid (1-90 hari)</td></tr>';
            document.getElementById('preview_selesai_melahirkan').value = '';
            document.getElementById('info_total_hari').innerHTML = '-';
            document.getElementById('hidden_tanggal_array_melahirkan').value = '';
            document.getElementById('hidden_jumlah_cuti_melahirkan').value = '';
            return;
        }

        const [day, month, year] = tanggalMulaiVal.split('/');
        let currentDate = new Date(year, month - 1, parseInt(day));

        const tanggalArray = [];
        let hariKerjaDihitung = 0;
        const tbody = document.getElementById('tbody_preview_melahirkan');
        tbody.innerHTML = '';
        let iterations = 0;
        const maxIterations = 150;

        while (hariKerjaDihitung < jumlahHari && iterations < maxIterations) {
            iterations++;
            const yr = currentDate.getFullYear();
            const mo = String(currentDate.getMonth() + 1).padStart(2, '0');
            const dy = String(currentDate.getDate()).padStart(2, '0');
            const dateString = `${yr}-${mo}-${dy}`;
            const dayOfWeek = currentDate.getDay();

            const isWeekend = (dayOfWeek === 0 || dayOfWeek === 6);
            const isCutiBersama = cutiBersamaListPckbr1.includes(dateString);
            // Libur nasional = libur yang BUKAN cuti bersama (cuti bersama tetap dihitung)
            const isLiburNasional = liburNasionalListPckbr1.includes(dateString) && !isCutiBersama;

            // Lewati weekend & libur nasional (tidak ditampilkan & tidak dihitung)
            if (isWeekend || isLiburNasional) {
                currentDate.setDate(currentDate.getDate() + 1);
                continue;
            }

            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            const dateFormatted = currentDate.toLocaleDateString('id-ID', options);

            const row = document.createElement('tr');

            // Hari kerja biasa & cuti bersama sama-sama dihitung sebagai Hari Ke-N
            hariKerjaDihitung++;
            tanggalArray.push(dateString);

            if (isCutiBersama) {
                // Cuti bersama: dibedakan warna barisnya
                row.innerHTML = `<td class="text-center fw-bold">${hariKerjaDihitung}</td><td>${dateFormatted}</td><td class="text-center"><span class="badge bg-warning text-light text-bold">Cuti Bersama</span></td>`;
                row.classList.add('table-warning');
            } else {
                // Hari kerja biasa: warna baris normal
                row.innerHTML = `<td class="text-center fw-bold">${hariKerjaDihitung}</td><td>${dateFormatted}</td><td class="text-center"><span class="badge bg-secondary">Hari Kerja</span></td>`;
            }

            tbody.appendChild(row);
            currentDate.setDate(currentDate.getDate() + 1);
        }

        const tanggalArrayJSON = JSON.stringify(tanggalArray);
        document.getElementById('hidden_tanggal_array_melahirkan').value = tanggalArrayJSON;
        document.getElementById('hidden_jumlah_cuti_melahirkan').value = hariKerjaDihitung;

        if (tanggalArray.length > 0) {
            const dateParts = tanggalArray[tanggalArray.length - 1].split('-');
            const lastDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
            document.getElementById('preview_selesai_melahirkan').value = lastDate.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
            document.getElementById('info_total_hari').innerHTML = `<span class="fw-bold text-success"><i class="fas fa-check-circle me-1"></i>Total: ${hariKerjaDihitung} hari kerja (dari ${iterations} hari kalender)</span>`;
        } else {
            document.getElementById('preview_selesai_melahirkan').value = '-';
            document.getElementById('info_total_hari').innerHTML = '<span class="text-danger">Tidak dapat menghitung tanggal</span>';
        }
    }

    function generatePreviewHajiPckbr1() {
        const tanggalMulaiVal = document.getElementById('tanggal_mulai_haji').value;
        const jumlahHari = parseInt(document.getElementById('jumlah_hari_haji').value) || 0;

        if (!tanggalMulaiVal || jumlahHari <= 0 || jumlahHari > 40) {
            document.getElementById('tbody_preview_haji').innerHTML = '<tr><td colspan="3" class="text-center text-warning py-3"><i class="fas fa-exclamation-triangle me-1"></i>Masukkan tanggal mulai yang valid (1-40 hari)</td></tr>';
            document.getElementById('preview_selesai_haji').value = '';
            document.getElementById('info_total_hari_haji').innerHTML = '-';
            document.getElementById('hidden_tanggal_array_haji').value = '';
            document.getElementById('hidden_jumlah_cuti_haji').value = '';
            return;
        }

        const [day, month, year] = tanggalMulaiVal.split('/');
        let currentDate = new Date(year, month - 1, parseInt(day));

        const tanggalArray = [];
        let hariKerjaDihitung = 0;
        const tbody = document.getElementById('tbody_preview_haji');
        tbody.innerHTML = '';
        let iterations = 0;
        const maxIterations = 80;

        while (hariKerjaDihitung < jumlahHari && iterations < maxIterations) {
            iterations++;
            const yr = currentDate.getFullYear();
            const mo = String(currentDate.getMonth() + 1).padStart(2, '0');
            const dy = String(currentDate.getDate()).padStart(2, '0');
            const dateString = `${yr}-${mo}-${dy}`;
            const dayOfWeek = currentDate.getDay();

            const isWeekend = (dayOfWeek === 0 || dayOfWeek === 6);
            const isCutiBersama = cutiBersamaListPckbr1.includes(dateString);
            // Libur nasional = libur yang BUKAN cuti bersama (cuti bersama tetap dihitung)
            const isLiburNasional = liburNasionalListPckbr1.includes(dateString) && !isCutiBersama;

            // Lewati weekend & libur nasional (tidak ditampilkan & tidak dihitung)
            if (isWeekend || isLiburNasional) {
                currentDate.setDate(currentDate.getDate() + 1);
                continue;
            }

            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            const dateFormatted = currentDate.toLocaleDateString('id-ID', options);

            const row = document.createElement('tr');

            // Hari kerja biasa & cuti bersama sama-sama dihitung sebagai Hari Ke-N
            hariKerjaDihitung++;
            tanggalArray.push(dateString);

            if (isCutiBersama) {
                // Cuti bersama: dibedakan warna barisnya
                row.innerHTML = `<td class="text-center fw-bold">${hariKerjaDihitung}</td><td>${dateFormatted}</td><td class="text-center"><span class="badge bg-warning text-light text-bold">Cuti Bersama</span></td>`;
                row.classList.add('table-warning');
            } else {
                // Hari kerja biasa: warna baris normal
                row.innerHTML = `<td class="text-center fw-bold">${hariKerjaDihitung}</td><td>${dateFormatted}</td><td class="text-center"><span class="badge bg-secondary">Hari Kerja</span></td>`;
            }

            tbody.appendChild(row);
            currentDate.setDate(currentDate.getDate() + 1);
        }

        const tanggalArrayJSON = JSON.stringify(tanggalArray);
        document.getElementById('hidden_tanggal_array_haji').value = tanggalArrayJSON;
        document.getElementById('hidden_jumlah_cuti_haji').value = hariKerjaDihitung;

        if (tanggalArray.length > 0) {
            const dateParts = tanggalArray[tanggalArray.length - 1].split('-');
            const lastDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
            document.getElementById('preview_selesai_haji').value = lastDate.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
            document.getElementById('info_total_hari_haji').innerHTML = `<span class="fw-bold text-success"><i class="fas fa-check-circle me-1"></i>Total: ${hariKerjaDihitung} hari kerja (dari ${iterations} hari kalender)</span>`;
        } else {
            document.getElementById('preview_selesai_haji').value = '-';
            document.getElementById('info_total_hari_haji').innerHTML = '<span class="text-danger">Tidak dapat menghitung tanggal</span>';
        }
    }

    // Init datepicker untuk form melahirkan & listener
    document.addEventListener('DOMContentLoaded', function() {
        const input = document.getElementById('tanggal_mulai_melahirkan');
        if (input && !input._flatpickrInitialized) {
            input._flatpickrInitialized = true;
            flatpickr(input, {
                dateFormat: 'd/m/Y',
                maxDate: new Date().fp_incr(180),
                disable: [
                    function(date) {
                        const dateString = date.toISOString().split('T')[0];
                        return !activeDatesCuti.includes(dateString);
                    }
                ],
                onChange: function() { generatePreviewMelahirkanPckbr1(); },
                locale: { firstDayOfWeek: 1 }
            });
        }
        const jumlahInput = document.getElementById('jumlah_hari_melahirkan');
        if (jumlahInput) {
            jumlahInput.addEventListener('change', generatePreviewMelahirkanPckbr1);
            jumlahInput.addEventListener('input', generatePreviewMelahirkanPckbr1);
        }
    });

    // Init datepicker untuk form haji & listener
    function initDatePickerHajiPckbr1() {
        const inputHaji = document.getElementById('tanggal_mulai_haji');
        if (inputHaji && !inputHaji._flatpickrInitialized) {
            inputHaji._flatpickrInitialized = true;
            inputHaji._flatpickrInstance = flatpickr(inputHaji, {
                dateFormat: 'd/m/Y',
                maxDate: new Date().fp_incr(120),
                disable: [
                    function(date) {
                        const dateString = date.toISOString().split('T')[0];
                        return !activeDatesCuti.includes(dateString);
                    }
                ],
                onChange: function() { generatePreviewHajiPckbr1(); },
                locale: { firstDayOfWeek: 1 }
            });
        }
        const jumlahInputHaji = document.getElementById('jumlah_hari_haji');
        if (jumlahInputHaji) {
            jumlahInputHaji.addEventListener('change', generatePreviewHajiPckbr1);
            jumlahInputHaji.addEventListener('input', generatePreviewHajiPckbr1);
        }
    }
    document.addEventListener('DOMContentLoaded', initDatePickerHajiPckbr1);
    </script>

    {{-- SweetAlert2 untuk menampilkan validation errors (mis. tanggal bersinggungan) --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Ambil validation errors dari Laravel session
            const errors = @json($errors->toArray());
            const errorMessages = [];

            // Kumpulkan semua pesan error
            for (const [field, messages] of Object.entries(errors)) {
                const msg = Array.isArray(messages) ? messages.join(', ') : messages;
                errorMessages.push({ field: field, message: msg });
            }

            // Jika ada error, tampilkan sebagai SweetAlert2
            if (errorMessages.length > 0) {
                // Buat HTML untuk daftar error
                let errorHtml = '<div style="text-align: left; max-height: 300px; overflow-y: auto;">';
                errorHtml += '<ul style="margin: 0; padding-left: 20px;">';
                errorMessages.forEach(function(err) {
                    errorHtml += '<li style="margin-bottom: 8px;">' + err.message + '</li>';
                });
                errorHtml += '</ul></div>';

                Swal.fire({
                    icon: 'error',
                    title: 'Terjadi Kesalahan',
                    html: errorHtml,
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'Mengerti',
                    allowOutsideClick: false,
                    allowEscapeKey: false
                });
            }
        });
    </script>
@endpush