@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">
        {{-- Sisa Cuti di pojok kanan atas, sejajar --}}
        <div class="row justify-content-end">
            {{-- [RESPONSIVE FIX] flex-column flex-md-row: di HP kartu sisa cuti ditumpuk vertikal
                 agar tidak terpotong (sebelumnya hanya d-flex -> overflow di layar sempit) --}}
            <div class="col-12 col-md-6 mb-4 d-flex flex-column flex-md-row gap-3 justify-content-end">
                <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 {{ date('Y') }}</p>
                        @if ($jatahCuti == null)
                            <div class="spinner-grow text-danger me-2" role="status" style="width: 16px; height: 16px;">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mb-0 text-danger">Anda tidak bisa
                                mengajukan cuti pribadi untuk saat ini. Hubungi personalia untuk mengatur sisa cuti pribadi
                                anda.</p>
                        @else
                            <h5 class="font-weight-bolder">{{ $jatahCuti->jumlah }} Hari</h5>
                        @endif
                    </div>
                </div>
                @if ($jatahCuti && $jatahCuti->jumlah_bersama > 0)
                    <div 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 class="font-weight-bolder">{{ $jatahCuti->jumlah_bersama }} Hari</h5>
                        </div>
                    </div>
                @endif
            </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">
                        {{-- Form pengajuan cuti --}}
                        <form role="form" method="POST" action="{{ route('permohonan.cuti.update') }}"
                            enctype="multipart/form-data" id="{{ $dmenu }}-form">
                            @csrf
                            <!-- Hidden Input untuk Encrypted ID -->
                            <input type="hidden" name="idencrypt" value="{{ $id }}">
                            {{-- Hidden Input untuk ID Cuti --}}
                            <input type="hidden" name="idcuti" value="{{ $permohonanCuti->idcuti }}">
                            <div class="row">
                                {{-- Jenis Cuti --}}
                                <div class="col-md-6 mb-3">
                                    <label for="jenis_cuti_id" class="form-label">Jenis Cuti</label>
                                    <select id="jenis_cuti_id" class="form-control" required disabled>
                                        <option value="">Pilih Jenis Cuti</option>
                                        @foreach ($jenisCuti as $cuti)
                                            <option value="{{ $cuti->id }}"
                                                {{ $cuti->id == $permohonanCuti->jenis_cuti_id ? 'selected' : '' }}>
                                                {{ $cuti->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                    {{-- {{-- Note --}}
                                    <div class="nav-wrapper" id="noted">
                                        <code>Anda tidak dapat mengubah jenis cuti yang dipilih. Silakan hubungi bagian
                                            personalia untuk melakukan perubahan.</code>
                                    </div>
                                    @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">
                                    @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) : '') : ($permohonanCuti->nik_karyawan_pengganti ? $permohonanCuti->nik_karyawan_pengganti . ($permohonanCuti->nama_karyawan_pengganti ? ' - ' . $permohonanCuti->nama_karyawan_pengganti : '') : $header->default) }}">
                                            <input type="hidden" name="{{ $header->field }}" id="{{ $header->field }}_hidden"
                                                value="{{ old($header->field) ? old($header->field) : ($permohonanCuti->nik_karyawan_pengganti ? $permohonanCuti->nik_karyawan_pengganti : $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"
                                                            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">
                                                            <i class="fas fa-search me-1"></i>
                                                            <span class="font-weight-bold">Cari</span>
                                                            <div id="loading-spinner"
                                                                class="spinner-border spinner-border-sm text-light ms-2"
                                                                role="status" style="display: none;">
                                                                <span class="sr-only">Loading...</span>
                                                            </div>
                                                        </button>
                                                    </div>
                                                    <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"
                                                            class="d-flex justify-content-between mt-4"
                                                            style="overflow-x: auto;">
                                                            @include('pcp123.pcppcp.partials.pagination')
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <script>
                                        $('document').ready(function() {
                                            $('#list_{{ @$dmenu }}_{{ $header->field }}').DataTable({
                                                "paging": false, // Disable pagination
                                                "lengthChange": true, // Allow changing the number of rows per page
                                                "searching": false, // Disable search box
                                                "ordering": false, // Disable sorting
                                                "info": false, // Disable info texts
                                                "autoWidth": false // Disable auto-width adjustment
                                            });
                                        })

                                        function select_modal{{ $header->field }}(id, name) {
                                            $('#{{ $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">
                                    <label for="alasan" class="form-label">Alasan Cuti</label>
                                    <textarea placeholder="Contoh: Mengurus keperluan pribadi" class="form-control @error('alasan') is-invalid @enderror"
                                        name="alasan">{{ old('alasan', $permohonanCuti->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">
                                    <label for="pekerjaan_yang_belum_diselesaikan" class="form-label">Pekerjaan yang Belum
                                        Diselesaikan</label>
                                    <textarea placeholder="Contoh: Laporan mingguan masih perlu dikumpulkan" class="form-control"
                                        name="pekerjaan_yang_belum_diselesaikan">{{ old('pekerjaan_yang_belum_diselesaikan', $permohonanCuti->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">
                                    <label for="tanggal_mulai" class="form-label">Tanggal Mulai</label>
                                    <input type="text" id="tanggal_mulai"
                                        class="form-control @error('tanggal_mulai') is-invalid @enderror text-end pe-3"
                                        name="tanggal_mulai"
                                        value="{{ old('tanggal_mulai', \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_mulai)->format('d/m/Y')) }}"
                                        readonly>
                                    {{-- {{-- Note --}}
                                    <div class="nav-wrapper" id="noted">
                                        <code>Anda tidak dapat mengubah tanggal mulai yang dipilih. Silakan hubungi bagian
                                            personalia untuk melakukan perubahan.</code>
                                    </div>
                                    @error('tanggal_mulai')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Tanggal Berakhir --}}
                                <div class="col-md-6 mb-3">
                                    <label for="tanggal_berakhir" class="form-label">Tanggal Berakhir</label>
                                    <input type="text" id="tanggal_berakhir"
                                        class="form-control @error('tanggal_berakhir') is-invalid @enderror text-end pe-3"
                                        name="tanggal_berakhir"
                                        value="{{ old('tanggal_berakhir', \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_berakhir)->format('d/m/Y')) }}"
                                        readonly>
                                    {{-- {{-- Note --}}
                                    <div class="nav-wrapper" id="noted">
                                        <code>Anda tidak dapat mengubah tanggal berakhir yang dipilih. Silakan hubungi
                                            bagian personalia untuk melakukan perubahan.</code>
                                    </div>
                                    @error('tanggal_berakhir')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label for="tanggal" class="form-label">Tanggal yang Diambil</label>
                                    <table class="table table-bordered table-striped" 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>
                                            @foreach ($permohonanCuti->tanggal_array as $index => $tanggal)
                                                @php
                                                    $tanggal->tanggal_cuti = \Carbon\Carbon::createFromFormat(
                                                        'Y-m-d',
                                                        $tanggal->tanggal_cuti,
                                                    )->format('d-m-Y');
                                                @endphp
                                                <tr>
                                                    <td class="tanggal_cuti_{{ $index }} text-center">
                                                        {{ $tanggal->tanggal_cuti }}
                                                    </td>
                                                    <td class="tanggal_cuti_{{ $index }} text-center">
                                                        {{ $tanggal->tanggal_cuti }}
                                                    </td>
                                                    <td class="tanggal_cuti_{{ $index }} text-center">
                                                        {{ $tanggal->tanggal_cuti }}
                                                    </td>
                                                    <td class="tanggal_cuti_{{ $index }} text-center">
                                                        {{ $tanggal->tanggal_cuti }}
                                                    </td>
                                                    <td class="text-center">
                                                        <button id="locked-button" type="button"
                                                            class="btn btn-sm btn-secondary">Locked</button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    {{-- Note --}}
                                    <div class="nav-wrapper" id="noted">
                                        <code>Anda tidak dapat menghapus tanggal yang dipilih. Silakan hubungi bagian
                                            personalia untuk melakukan perubahan.</code>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                {{-- Alamat --}}
                                <div class="col-md-6 mb-3">
                                    <label for="alamat" class="form-label">Alamat</label>
                                    <input placeholder="Contoh: Jl. Ahmad Yani No. 123, Jakarta" type="text"
                                        class="form-control @error('alamat') is-invalid @enderror" name="alamat"
                                        value="{{ old('alamat', $permohonanCuti->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">
                                    <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', $permohonanCuti->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">
                                @if ($permohonanCuti->jenis_cuti_id != 2 && $permohonanCuti->jenis_cuti_id != 20)
                                    {{-- Lampiran --}}
                                    <div class="row mb-3">
                                        {{-- Lampiran Saat Ini --}}
                                        <div class="col-md-12">
                                            <label for="lampiran" class="form-label">Lampiran Saat Ini:</label>

                                            <div id="lampiran-preview" class="d-flex flex-wrap gap-2 mb-2 pswp-gallery">
                                                @if (!$lampiran->isEmpty())
                                                    @foreach ($lampiran as $item)
                                                        <a href="{{ asset('storage/' . $item->gambar_lampiran) }}"
                                                            data-pswp-width="{{ $item->width }}"
                                                            data-pswp-height="{{ $item->height }}" class="lampiran-link">
                                                            <div class="current-preview-item border rounded p-1 position-relative"
                                                                style="width: 100px; height: 100px;">
                                                                <img src="{{ asset('storage/' . $item->gambar_lampiran) }}"
                                                                    alt="Lampiran" class="img-fluid"
                                                                    style="width: 100%; height: 100%; object-fit: contain; cursor: pointer;">
                                                            </div>
                                                        </a>
                                                    @endforeach
                                                @else
                                                    <small class="text-muted">Tidak ada lampiran sebelumnya.</small>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            {{-- Input for New/Replacement Lampiran --}}
                                            <div class="form-group">
                                                <label for="lampiran-input" class="form-label">Ganti dengan Lampiran
                                                    Baru</label>
                                                <input type="file"
                                                    class="form-control @error('lampiran') is-invalid @enderror @error('lampiran.*') is-invalid @enderror"
                                                    name="lampiran[]" accept=".jpg,.jpeg,.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">Format: .jpg, .jpeg, .png. Maksimum per
                                                    file:
                                                    1.5 MB. Upload file baru akan Menggantikan lampiran
                                                    lama.</small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            {{-- Tempat untuk preview lampiran BARU (JS would handle this) --}}
                                            <div class="mt-3">
                                                <label class="form-label">Preview Lampiran Baru:</label>
                                                <div id="lampiran-preview" class="d-flex flex-wrap gap-2"></div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </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->edit == '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>
                    {{-- Menampilkan informasi sisa edit dalam card footer --}}
                    <div class="card-footer bg-light text-dark">
                        <div class="d-flex justify-content-between align-items-center">
                            <span><strong>Status Pengeditan:</strong></span>
                            @php
                                // Jumlah maksimal edit yang diizinkan
                                $jumlahMaksimalEdit = 3;

                                // Hitung sisa edit
                                $sisaEdit = $jumlahMaksimalEdit - $permohonanCuti->jumlah_edit_oleh_pengguna;
                            @endphp

                            {{-- Peringatan tampil rapi di footer --}}
                            @if ($sisaEdit > 0)
                                <span>Sisa edit: <strong>{{ $sisaEdit }}</strong> kali</span>
                            @else
                                <span class="text-danger"><strong>Kesempatan edit habis</strong></span>
                            @endif
                        </div>
                    </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>

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

    {{-- Js untuk mencari karyawan --}}
    <script>
        // Fungsi untuk memilih karyawan
        function selectEmployee(nik) {
            document.getElementById('nik_karyawan_pengganti').value = nik;
            var searchEmployeeModal = bootstrap.Modal.getInstance(document.getElementById('searchEmployeeModal'));
            searchEmployeeModal.hide(); // Menutup modal setelah memilih karyawan
        }

        // Fungsi untuk filter pencarian
        function filterTable() {
            var input = document.getElementById("searchInput");
            var filter = input.value.toLowerCase();
            var rows = document.getElementById("employeeTable").getElementsByTagName("tr");

            for (var i = 1; i < rows.length; i++) {
                var header1 = rows[i].getElementsByTagName("td")[1];
                var header2 = rows[i].getElementsByTagName("td")[2];
                var header3 = rows[i].getElementsByTagName("td")[3];
                if (header1 || header2 || header3) {
                    var hd1Text = header1.textContent || header1.innerText;
                    var hd2Text = header2.textContent || header2.innerText;
                    var hd3Text = header3.textContent || header3.innerText;
                    rows[i].style.display = (hd1Text.toLowerCase().indexOf(filter) > -1 || hd2Text.toLowerCase().indexOf(
                        filter) > -1 || hd3Text.toLowerCase().indexOf(filter) > -1) ? "" : "none";
                }
            }
        }


        // Fungsi untuk set jumlah entri yang ditampilkan
        function setEntries() {
            var select = document.getElementById("entriesSelect");
            var entries = parseInt(select.value);
            var rows = document.getElementById("employeeTable").getElementsByTagName("tr");

            for (var i = 1; i < rows.length; i++) {
                rows[i].style.display = (i <= entries) ? "" : "none";
            }
        }

        // Inisialisasi jumlah entri yang ditampilkan saat pertama kali dibuka
        document.addEventListener("DOMContentLoaded", function() {
            setEntries();
        });
    </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>

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

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

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

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

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

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

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

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

            // Get search val
            search = $('#search_input').val();

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

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

            // Make it block
            loadingSpinner.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';

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

                    $.each(response.data.table_result.data, function(index, row) {

                        tbody += `<tr>
                        <td 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').html(response.pagination);
                },
                complete: function() {
                    // Make it none
                    document.getElementById('loading-spinner').style.display = 'none';

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

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

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

                    // Show pagination info
                    document.getElementById('pagination-info').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
                    document.getElementById('loading-spinner').style.display = 'none';
                    document.getElementById('pagination-loading').style.display = 'none';
                    document.getElementById('search_button').disabled = false;
                    document.getElementById('pagination-links').style.display = 'block';
                    document.getElementById('pagination-info').style.display = 'block';
                }
            });
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // get $permohonanCuti->tanggal_array
            let tanggalArray = @json($permohonanCuti->tanggal_array);
            // count the array

            // Ambil semua elemen dengan kelas 'tanggal_cuti'
            let tanggalElements = [];
            tanggalArray.forEach((tanggal, index) => {
                tanggalElements.push(document.querySelector(`.tanggal_cuti_${index}`));
            });

            // 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
                };
            }

            // Loop melalui setiap elemen tanggal dan format tanggalnya
            tanggalElements.forEach(function(tanggalElement) {
                let tanggal = tanggalElement.textContent
                    .trim(); // Mengambil teks tanggal dalam format "30-01-2025"
                let formattedDate = formatTanggal(tanggal); // Mendapatkan format tanggal baru

                // Update elemen dengan format baru
                let parentRow = tanggalElement.parentElement;
                parentRow.children[0].textContent = formattedDate.weekday;
                parentRow.children[1].textContent = formattedDate.day;
                parentRow.children[2].textContent = formattedDate.month;
                parentRow.children[3].textContent = formattedDate.year;
            });
        });
    </script>

    {{-- Swal fire for button with id = locked-button when clicked --}}
    <script>
        $(document).on('click', '#locked-button', function(event) {
            event.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Tidak Bisa Menghapus',
                text: 'Anda tidak dapat menghapus tanggal yang dipilih. Silakan hubungi bagian personalia untuk melakukan perubahan.',
                confirmButtonColor: '#028284'
            });
        });
    </script>

    {{-- Js untuk upen modal lampiran --}}
    <script>
        function showModalImageOld(imageSrc) {
            document.getElementById('modalImageOld').src = imageSrc;
            var myModal = new bootstrap.Modal(document.getElementById('attachmentModal'));
            myModal.show();
        }
    </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');

            if (form && submitButton) {
                form.addEventListener('submit', function(e) {
                    // Disable button to prevent multiple clicks
                    submitButton.disabled = true;

                    // Hide text and show spinner
                    buttonText.classList.add('d-none');
                    buttonSpinner.classList.remove('d-none');
                });
            }
        });
    </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