@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.personalia.update') }}"
                            id="{{ $dmenu }}-form" enctype="multipart/form-data">
                            @csrf

                            {{-- Hidden input untuk idencrypt --}}
                            <input type="hidden" name="idencrypt" id="idencrypt" value="{{ $idencrypt }}">

                            {{-- 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="">

                            {{-- 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>

                            <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)" required>
                                        <option value="">Pilih Jenis Cuti</option>
                                        @foreach ($jenisCuti as $cuti)
                                            <option value="{{ $cuti->id }}"
                                                @if (old('jenis_cuti_id', $permohonanCuti->jenis_cuti_id ?? null) == $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;
                                            $idmodal = $header->field;
                                        }
                                    }
                                    $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_{{ $header->field }}"
                                                            class="d-flex justify-content-between mt-4"
                                                            style="overflow-x: auto;">
                                                            @include('pck123.pckbr1.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" 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', $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" 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', $permohonanCuti->pekerjaan_yang_belum_diselesaikan) }}</textarea>
                                    {{-- Note --}}
                                    <small class="form-text text-muted">Dapat dikosongkan</small>
                                </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', \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_mulai)->format('d/m/Y')) }}"
                                            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', \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_berakhir)->format('d/m/Y')) }}"
                                            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>

                            <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') ?? $tanggalArray }}">
                                @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', $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" 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', $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 id="lampiran_group" class="row">
                                <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>
                            </div>

                            <!-- Modal untuk Menampilkan Lampiran Old -->
                            <div class="modal fade" id="attachmentModal" tabindex="-1"
                                aria-labelledby="attachmentModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="attachmentModalLabel">Lampiran</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body d-flex justify-content-center">
                                            <img id="modalImageOld" src="" alt="Lampiran Gambar"
                                                class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- FORM CUTI MELAHIRKAN --}}
                            <div id="form-cuti-melahirkan" style="display: none;" class="mt-3 mb-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"
                                                id="tanggal_mulai_melahirkan"
                                                name="tanggal_mulai_melahirkan"
                                                placeholder="dd/mm/yyyy"
                                                autocomplete="off"
                                                value="{{ $errors->any() && old('tanggal_mulai_melahirkan') ? old('tanggal_mulai_melahirkan') : ($permohonanCuti->tanggal_mulai ? \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_mulai)->format('d/m/Y') : '') }}"
                                                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="{{ $errors->any() && old('jumlah_hari_melahirkan') ? old('jumlah_hari_melahirkan') : $permohonanCuti->total_hari }}"
                                                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...">{{ old('alasan', $permohonanCuti->alasan) }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- FORM CUTI HAJI --}}
                            <div id="form-cuti-haji" style="display: none;" class="mt-3 mb-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"
                                                id="tanggal_mulai_haji"
                                                name="tanggal_mulai_haji"
                                                placeholder="dd/mm/yyyy"
                                                autocomplete="off"
                                                value="{{ $errors->any() && old('tanggal_mulai_haji') ? old('tanggal_mulai_haji') : ($permohonanCuti->tanggal_mulai ? \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_mulai)->format('d/m/Y') : '') }}"
                                                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="{{ $errors->any() && old('jumlah_hari_haji') ? old('jumlah_hari_haji') : $permohonanCuti->total_hari }}"
                                                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...">{{ old('alasan', $permohonanCuti->alasan) }}</textarea>
                                        </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->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>
                </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 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>

    {{-- JAVASCRIPT GABUNGAN UNTUK FIELD HANDLING & FLATPIKR --}}
    <script>
        const mstAturan = @json($mst_aturan);

        // FUNGSI UTAMA (SATU FUNGSI UNTUK SEMUA)
        function updateFields(selectElement) {
            // Jika elemen tidak ditemukan, hentikan fungsi untuk menghindari error
            if (!selectElement) return;

            const selectedID = selectElement.value;
            const aturan = mstAturan.find(item => item.jenis_cuti_id == selectedID);

            // Ambil semua elemen group
            const nikPenggantiGroup = document.getElementById("nik_karyawan_pengganti_group");
            const alasanGroup = document.getElementById("alasan_group");
            const pekerjaanGroup = document.getElementById("pekerjaan_yang_belum_diselesaikan_group");
            const tglMulaiGroup = document.getElementById("tanggal_mulai_group");
            const tglBerakhirGroup = document.getElementById("tanggal_berakhir_group");
            const tableTanggal = document.getElementById("table_tanggal");
            const alamatGroup = document.getElementById("alamat_group");
            const nomorTeleponGroup = document.getElementById("nomor_telepon_group");
            const lampiranGroup = document.getElementById("lampiran_group");
            const melahirkanForm = document.getElementById("form-cuti-melahirkan");
            const hajiForm = document.getElementById("form-cuti-haji");

            // Fungsi untuk menyembunyikan semua field dinamis
            const hideAllFields = () => {
                nikPenggantiGroup.style.display = 'none';
                alasanGroup.style.display = 'none';
                pekerjaanGroup.style.display = 'none';
                tglMulaiGroup.style.display = 'none';
                tglBerakhirGroup.style.display = 'none';
                tableTanggal.style.display = 'none';
                alamatGroup.style.display = 'none';
                nomorTeleponGroup.style.display = 'none';
                if (lampiranGroup) lampiranGroup.style.display = 'none';
                if (melahirkanForm) melahirkanForm.style.display = 'none';
                if (hajiForm) hajiForm.style.display = 'none';
            };

            if (aturan) {
                document.getElementById("jumlah_cuti").value = aturan.jumlah_cuti;

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

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

                if (isMelahirkan) {
                    // --- MODE MELAHIRKAN ---
                    nikPenggantiGroup.style.display = "none";
                    alasanGroup.style.display = "none";
                    pekerjaanGroup.style.display = "none";
                    tglMulaiGroup.style.display = "none";
                    tglBerakhirGroup.style.display = "none";
                    tableTanggal.style.display = "none";
                    alamatGroup.style.display = "block";
                    nomorTeleponGroup.style.display = "block";
                    if (lampiranGroup) lampiranGroup.style.display = "none";
                    if (melahirkanForm) melahirkanForm.style.display = "block";
                    if (hajiForm) hajiForm.style.display = "none";

                    document.getElementById("aturanJudul").innerText = aturan.judul;
                    document.getElementById("aturanIsi").innerText = "Cuti melahirkan diberikan maksimal 90 hari kerja. Weekend dan hari libur nasional otomatis tidak dihitung.";
                    document.getElementById("aturanJumlah").innerText = aturan.jumlah_cuti ?
                        aturan.jumlah_cuti + " hari" :
                        "Maksimal 90 hari kerja";
                } else if (isHaji) {
                    // --- MODE HAJI ---
                    nikPenggantiGroup.style.display = "none";
                    alasanGroup.style.display = "none";
                    pekerjaanGroup.style.display = "none";
                    tglMulaiGroup.style.display = "none";
                    tglBerakhirGroup.style.display = "none";
                    tableTanggal.style.display = "none";
                    alamatGroup.style.display = "block";
                    nomorTeleponGroup.style.display = "block";
                    if (lampiranGroup) lampiranGroup.style.display = "none";
                    if (melahirkanForm) melahirkanForm.style.display = "none";
                    if (hajiForm) hajiForm.style.display = "block";

                    document.getElementById("aturanJudul").innerText = aturan.judul;
                    document.getElementById("aturanIsi").innerText = "Cuti haji diberikan maksimal 40 hari kerja. Weekend dan hari libur nasional otomatis tidak dihitung.";
                    document.getElementById("aturanJumlah").innerText = aturan.jumlah_cuti ?
                        aturan.jumlah_cuti + " hari" :
                        "Maksimal 40 hari kerja";
                } else {
                    // --- MODE NORMAL ---
                    nikPenggantiGroup.style.display = "block";
                    alasanGroup.style.display = "block";
                    pekerjaanGroup.style.display = "block";
                    tglMulaiGroup.style.display = "block";
                    tglBerakhirGroup.style.display = "block";
                    tableTanggal.style.display = "block";
                    alamatGroup.style.display = "block";
                    nomorTeleponGroup.style.display = "block";
                    if (melahirkanForm) melahirkanForm.style.display = "none";
                    if (hajiForm) hajiForm.style.display = "none";

                    if (lampiranGroup) {
                        if (aturan.jenis_cuti_id == 2 || aturan.jenis_cuti_id == 20) {
                            lampiranGroup.style.display = "none";
                        } else {
                            lampiranGroup.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("jumlah_cuti").value = "90";

                nikPenggantiGroup.style.display = "none";
                alasanGroup.style.display = "none";
                pekerjaanGroup.style.display = "none";
                tglMulaiGroup.style.display = "none";
                tglBerakhirGroup.style.display = "none";
                tableTanggal.style.display = "none";
                alamatGroup.style.display = "block";
                nomorTeleponGroup.style.display = "block";
                if (lampiranGroup) lampiranGroup.style.display = "none";
                if (melahirkanForm) melahirkanForm.style.display = "block";
                if (hajiForm) hajiForm.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 haji diberikan maksimal 40 hari kerja. Weekend dan hari libur nasional otomatis tidak dihitung.";
                document.getElementById("aturanJumlah").innerText = "Maksimal 40 hari kerja";
                document.getElementById("jumlah_cuti").value = "40";

                nikPenggantiGroup.style.display = "none";
                alasanGroup.style.display = "none";
                pekerjaanGroup.style.display = "none";
                tglMulaiGroup.style.display = "none";
                tglBerakhirGroup.style.display = "none";
                tableTanggal.style.display = "none";
                alamatGroup.style.display = "block";
                nomorTeleponGroup.style.display = "block";
                if (lampiranGroup) lampiranGroup.style.display = "none";
                if (melahirkanForm) melahirkanForm.style.display = "none";
                if (hajiForm) hajiForm.style.display = "block";
            } else {
                // Jika tidak ada aturan (misal memilih "Pilih Jenis Cuti")
                hideAllFields();

                document.getElementById("jumlah_cuti").value = "";
                document.getElementById("aturanJudul").innerText = "Belum Memilih Jenis Cuti";
                document.getElementById("aturanIsi").innerText = "Silakan pilih jenis cuti untuk melihat aturan.";
                document.getElementById("aturanJumlah").innerText = "-";
            }
        }

        // Event listener saat halaman dimuat
        document.addEventListener("DOMContentLoaded", function() {
            // 1. Panggil fungsi updateFields saat halaman pertama kali dimuat
            const jenisCutiSelect = document.getElementById("jenis_cuti_id");
            if (jenisCutiSelect && jenisCutiSelect.value) {
                updateFields(jenisCutiSelect);
            } else {
                // Jika tidak ada yang terpilih, pastikan semua field tersembunyi
                updateFields(jenisCutiSelect);
            }

            // 2. Inisialisasi Flatpickr
            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);
            const activeDates = [];
            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)) {
                    activeDates.push(d.toISOString().split('T')[0]);
                }
            });

            const tanggalBerakhirPicker = flatpickr(tanggalBerakhirInput, {
                dateFormat: "d/m/Y",
            });

            const tanggalMulaiPicker = flatpickr(tanggalMulaiInput, {
                dateFormat: "d/m/Y",
                disable: [
                    function(date) {
                        const dateString = date.toISOString().split('T')[0];
                        return !activeDates.includes(dateString);
                    }
                ],
                onChange: function(selectedDates) {
                    if (selectedDates[0]) {
                        tanggalBerakhirPicker.set("minDate", selectedDates[0]);
                    }
                }
            });
        });
    </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>

    <script>
        $(document).on('click', '#search_button', 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();

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

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

        $(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

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

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

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

            let loadingSpinner = document.getElementById('loading-spinner'); // For search button
            let paginationLoading = document.getElementById('pagination-loading_' + idmodal); // For pagination
            let searchButton = document.getElementById('search_button');
            let paginationLinks = document.getElementById('pagination-links_' + idmodal);
            let paginationInfo = document.getElementById('pagination-info_' + idmodal);

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

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

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

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

                    // Show pagination info
                    document.getElementById('pagination-info_' + idmodal).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_' + idmodal).style.display = 'none';
                    document.getElementById('search_button').disabled = false;
                    document.getElementById('pagination-links_' + idmodal).style.display = 'block';
                    document.getElementById('pagination-info_' + idmodal).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) {
                    // ==================== 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 card di pojok kanan atas (teks: "X Hari")
                        const jatahCutiCard = document.querySelector('.card.flex-fill h5.font-weight-bolder');
                        const sisaCutiPribadi = jatahCutiCard ? (parseInt(jatahCutiCard.textContent) || 0) : 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 liburNasionalListEdit = @json($liburNasional ?? []);
    const cutiBersamaListEdit = @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 generatePreviewMelahirkanEdit() {
        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 = cutiBersamaListEdit.includes(dateString);
            // Libur nasional = libur yang BUKAN cuti bersama (cuti bersama tetap dihitung)
            const isLiburNasional = liburNasionalListEdit.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>';
        }
    }

    // Init datepicker untuk form melahirkan & listener
    document.addEventListener('DOMContentLoaded', function() {
        const input = document.getElementById('tanggal_mulai_melahirkan');
        if (input && !input._flatpickrInitialized) {
            input._flatpickrInitialized = true;
            // Jangan set minDate/maxDate di edit, karena tanggal tersimpan bisa di masa lalu atau jauh ke depan
            flatpickr(input, {
                dateFormat: 'd/m/Y',
                disable: [
                    function(date) {
                        const dateString = date.toISOString().split('T')[0];
                        return !activeDatesCuti.includes(dateString);
                    }
                ],
                onChange: function() { generatePreviewMelahirkanEdit(); },
                locale: { firstDayOfWeek: 1 }
            });
        }
        const jumlahInput = document.getElementById('jumlah_hari_melahirkan');
        if (jumlahInput) {
            jumlahInput.addEventListener('change', generatePreviewMelahirkanEdit);
            jumlahInput.addEventListener('input', generatePreviewMelahirkanEdit);
        }

        // Auto-generate preview saat halaman edit dimuat (jika form melahirkan visible & ada nilai)
        setTimeout(function() {
            const melahirkanForm = document.getElementById('form-cuti-melahirkan');
            const tglInput = document.getElementById('tanggal_mulai_melahirkan');
            const jmlInput = document.getElementById('jumlah_hari_melahirkan');
            if (melahirkanForm && melahirkanForm.style.display !== 'none'
                && tglInput && tglInput.value
                && jmlInput && jmlInput.value) {
                generatePreviewMelahirkanEdit();
            }
        }, 300);
    });

    function generatePreviewHajiEdit() {
        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 = cutiBersamaListEdit.includes(dateString);
            // Libur nasional = libur yang BUKAN cuti bersama (cuti bersama tetap dihitung)
            const isLiburNasional = liburNasionalListEdit.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-dark">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 haji & listener
    document.addEventListener('DOMContentLoaded', function() {
        const inputHaji = document.getElementById('tanggal_mulai_haji');
        if (inputHaji && !inputHaji._flatpickrInitialized) {
            inputHaji._flatpickrInitialized = true;
            // Jangan set minDate/maxDate di edit, karena tanggal tersimpan bisa di masa lalu atau jauh ke depan
            flatpickr(inputHaji, {
                dateFormat: 'd/m/Y',
                disable: [
                    function(date) {
                        const dateString = date.toISOString().split('T')[0];
                        return !activeDatesCuti.includes(dateString);
                    }
                ],
                onChange: function() { generatePreviewHajiEdit(); },
                locale: { firstDayOfWeek: 1 }
            });
        }
        const jumlahInputHaji = document.getElementById('jumlah_hari_haji');
        if (jumlahInputHaji) {
            jumlahInputHaji.addEventListener('change', generatePreviewHajiEdit);
            jumlahInputHaji.addEventListener('input', generatePreviewHajiEdit);
        }

        // Auto-generate preview saat halaman edit dimuat (jika form haji visible & ada nilai)
        setTimeout(function() {
            const hajiForm = document.getElementById('form-cuti-haji');
            const tglInputHaji = document.getElementById('tanggal_mulai_haji');
            const jmlInputHaji = document.getElementById('jumlah_hari_haji');
            if (hajiForm && hajiForm.style.display !== 'none'
                && tglInputHaji && tglInputHaji.value
                && jmlInputHaji && jmlInputHaji.value) {
                generatePreviewHajiEdit();
            }
        }, 300);
    });
    </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