@extends('layouts.email')

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

    <style>
        body {
            background-color: #f8f9fa;
        }

        .card-header {
            background-color: #028284;
            color: white;
        }

        .btn-submit {
            background-color: #028284;
            border-color: #028284;
        }

        .btn-submit:hover {
            background-color: #026b6b;
            border-color: #026b6b;
        }

        h3,
        h5 {
            color: white;
        }

        .info-card {
            background-color: #e7f5f5;
            border-left: 4px solid #028284;
            padding: 15px;
            margin-bottom: 20px;
        }

        .required-label::after {
            content: " *";
            color: red;
        }

        /* ===== KARYAWAN PENGGANTI SEARCH STYLES ===== */
#nik_karyawan_pengganti_display {
    background-color: #fff !important;
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#nik_karyawan_pengganti_display+input+.input-group-text,
        .search-icon-btn {
            background-color: #028284 !important;
            border-color: #028284 !important;
            border-top-right-radius: 0.375rem !important;
            border-bottom-right-radius: 0.375rem !important;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            cursor: pointer;
        }

        #nik_karyawan_pengganti+input+.input-group-text i,
        .search-icon-btn i {
            color: #fff !important;
        }

        /* ===== MOBILE RESPONSIVE STYLES ===== */

        /* Responsive table wrapper */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Mobile optimizations */
        @media (max-width: 768px) {

            /* Container padding untuk mobile */
            .container {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            /* Logo lebih kecil di mobile */
            .text-center img {
                width: 100px !important;
                height: auto;
            }

            /* Header font size */
            h3 {
                font-size: 1.3rem !important;
            }

            h5 {
                font-size: 1.1rem !important;
            }

            /* Card body padding */
            .card-body {
                padding: 15px !important;
            }

            /* Info card */
            .info-card {
                padding: 12px !important;
                font-size: 0.9rem;
            }

            /* Form labels */
            .form-label {
                font-size: 0.9rem;
                margin-bottom: 0.3rem;
            }

            /* Form controls - larger for touch */
            .form-control,
            .form-select {
                font-size: 16px !important;
                /* Prevents zoom on iOS */
                min-height: 44px;
                /* Touch-friendly size */
            }

            /* Textarea */
            textarea.form-control {
                min-height: 80px;
            }

            /* Input groups */
            .input-group-text {
                font-size: 16px !important;
            }

            /* Buttons - larger for touch */
            .btn {
                min-height: 44px;
                font-size: 16px !important;
                padding: 10px 15px;
            }

            .btn-lg {
                font-size: 18px !important;
                padding: 12px 20px;
                width: 100%;
                /* Full width button di mobile */
            }

            /* Table responsive */
            #tanggal_table {
                font-size: 0.85rem;
            }

            #tanggal_table th,
            #tanggal_table td {
                padding: 8px 4px !important;
                white-space: nowrap;
            }

            /* Sisa cuti cards */
            .card.bg-info {
                margin-bottom: 10px;
            }

            .card.bg-info .card-body {
                padding: 10px !important;
                font-size: 0.85rem;
            }

            /* Small text */
            small,
            .small,
            .form-text {
                font-size: 0.8rem !important;
            }

            /* Spacing adjustments */
            .mb-3 {
                margin-bottom: 1rem !important;
            }

            .mb-4 {
                margin-bottom: 1.5rem !important;
            }

            /* Row margin */
            .row {
                margin-left: -5px;
                margin-right: -5px;
            }

            .row>* {
                padding-left: 5px;
                padding-right: 5px;
            }
        }

        /* Extra small devices */
        @media (max-width: 576px) {

            /* Stack columns di mobile */
            .col-md-6 {
                flex: 0 0 100%;
                max-width: 100%;
            }

            /* Table scroll hint */
            #table_tanggal::after {
                content: '← Geser untuk melihat lebih banyak →';
                display: block;
                text-align: center;
                font-size: 0.75rem;
                color: #6c757d;
                margin-top: 5px;
            }
        }

        /* Landscape mobile */
        @media (max-width: 768px) and (orientation: landscape) {
            .container {
                max-width: 100%;
            }
        }

        /* Print styles untuk email */
        @media print {
            .btn-submit {
                display: none;
            }
        }
    </style>
@endpush

@section('content')
    <div class="container mt-4 mb-4">
        <div class="text-center mb-4">
            <img src="{{ asset('img/logomsjnew.jpg') }}" alt="Logo MSJ" width="150" class="img-fluid">
        </div>

        <div class="card shadow mb-4">
            <div class="card-header text-center">
                <h3 class="mb-0">Form Pengajuan Cuti</h3>
            </div>
            <div class="card-body">

                {{-- Info Card --}}
                <div class="info-card">
                    <p class="mb-0">
                        <strong>Hai {{ $karyawan->nama }},</strong><br>
                        Silakan isi form pengajuan cuti di bawah ini. Setelah disubmit, pengajuan Anda akan diproses oleh
                        atasan dan personalia.
                    </p>
                </div>

                {{-- Data Karyawan --}}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Data Karyawan</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="nik" class="form-label">NIK</label>
                                <input type="text" id="nik" class="form-control" value="{{ $karyawan->nik }}" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="nama" class="form-label">Nama</label>
                                <input type="text" id="nama" class="form-control" value="{{ $karyawan->nama }}" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="departemen" class="form-label">Departemen</label>
                                <input type="text" id="departemen" class="form-control"
                                    value="{{ $karyawan->departemen ?? '-' }}" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="jabatan" class="form-label">Jabatan</label>
                                <input type="text" id="jabatan" class="form-control" value="{{ $karyawan->jabatan ?? '-' }}"
                                    readonly>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Form Pengajuan --}}
                <form role="form" method="POST" action="{{ route('leave.form.email.submit') }}" id="leave-form"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="token" value="{{ $token }}">
                    <input type="hidden" name="nik" value="{{ $karyawan->nik }}">

                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">Detail Cuti</h5>
                        </div>
                        <div class="card-body">
                            {{-- Sisa Cuti Info --}}
                            <div class="row mb-4 justify-content-end">
                                <div class="col-md-6 mb-4 d-flex 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
                                                <h4 class="font-weight-bolder">{{ $jatahCuti->jumlah }} Hari</h4>
                                            @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>
                                                <h4 class="font-weight-bolder">{{ $jatahCuti->jumlah_bersama }} Hari</h4>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            {{-- Card untuk Aturan Permohonan Cuti --}}
                            <div class="card mb-4">
                                <div class="card-header" style="background-color: #028284; color: white;">
                                    <strong>Aturan Permohonan Cuti</strong>
                                </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>

                            {{-- Hidden input untuk total hari pada aturan cuti --}}
                            <input type="hidden" name="jumlah_cuti" id="jumlah_cuti" value="">

                            <div class="row">
                                {{-- Jenis Cuti --}}
                                <div class="col-md-6 mb-3">
                                    <label for="jenis_cuti_id" class="form-label required-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 }}" {{ old('jenis_cuti_id') == $cuti->id ? 'selected' : '' }}>
                                                {{ $cuti->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <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 --}}
                                <div class="col-md-6 mb-3" id="nik_karyawan_pengganti_group" style="display: none;">
                                    <label for="nik_karyawan_pengganti" class="form-label">Karyawan Pengganti</label>
                                    <div class="input-group" style="flex-wrap: nowrap;">
                                        <input type="text" id="nik_karyawan_pengganti_display"
                                            class="form-control" readonly placeholder="Pilih karyawan pengganti"
                                            value="{{ old('nik_karyawan_pengganti') ? old('nik_karyawan_pengganti') . (old('nama_karyawan_pengganti') ? ' - ' . old('nama_karyawan_pengganti') : '') : '' }}"
                                            style="background-color: #fff !important; cursor: pointer; border-right: none !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;"
                                            data-bs-toggle="modal" data-bs-target="#modalKaryawanPengganti">
                                        <input type="hidden" name="nik_karyawan_pengganti" id="nik_karyawan_pengganti_hidden"
                                            value="{{ old('nik_karyawan_pengganti') }}">
                                        <input type="hidden" id="nama_karyawan_pengganti" value="">
                                        <span class="input-group-text"
                                            style="cursor: pointer; background-color: #028284 !important; border-color: #028284 !important; border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; padding: 0.375rem 0.75rem;"
                                            data-bs-toggle="modal" data-bs-target="#modalKaryawanPengganti">
                                            <i class="fas fa-search" style="color: #fff !important;"></i>
                                        </span>
                                    </div>
                                    <small class="form-text text-muted">Dapat dikosongkan</small>
                                    <div id="pengganti-info" class="mt-1" style="display: none;">
                                        <small class="text-info"><i class="fas fa-user me-1"></i><span
                                                id="pengganti-nama"></span></small>
                                        <button type="button" class="btn btn-link btn-sm text-danger p-0 ms-2"
                                            onclick="clearKaryawanPengganti()" title="Hapus pilihan">
                                            <i class="fas fa-times-circle"></i>
                                        </button>
                                    </div>
                                    @error('nik_karyawan_pengganti')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Alasan --}}
                                <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" class="form-control" name="alasan" rows="2"
                                        placeholder="Contoh: Mengurus keperluan pribadi">{{ old('alasan') }}</textarea>
                                    <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" class="form-control"
                                        name="pekerjaan_yang_belum_diselesaikan" rows="2"
                                        placeholder="Contoh: Laporan mingguan masih perlu dikumpulkan">{{ old('pekerjaan_yang_belum_diselesaikan') }}</textarea>
                                    <small class="form-text text-muted">Dapat dikosongkan</small>
                                    @error('pekerjaan_yang_belum_diselesaikan')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row" id="tanggal_row" style="display: none;">
                                {{-- Tanggal Mulai --}}
                                <div class="col-md-6 mb-3" id="tanggal_mulai_group">
                                    <label for="tanggal_mulai" class="form-label required-label">Tanggal Mulai</label>
                                    <div class="input-group">
                                        <input type="text" id="tanggal_mulai" class="form-control" name="tanggal_mulai"
                                            value="{{ old('tanggal_mulai') }}" required placeholder="Pilih tanggal">
                                        <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                    </div>
                                    @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">
                                    <label for="tanggal_berakhir" class="form-label required-label">Tanggal Berakhir</label>
                                    <div class="input-group">
                                        <input type="text" id="tanggal_berakhir" class="form-control"
                                            name="tanggal_berakhir" value="{{ old('tanggal_berakhir') }}" required
                                            placeholder="Pilih tanggal">
                                        <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                    </div>
                                    @error('tanggal_berakhir')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- Tabel Tanggal --}}
                            <div id="table_tanggal" class="row" style="display: none;">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label">Daftar Tanggal Cuti</label>
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped" id="tanggal_table">
                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th class="text-center">Hari</th>
                                                    <th class="text-center">Tanggal</th>
                                                    <th class="text-center">Bulan</th>
                                                    <th class="text-center">Tahun</th>
                                                    <th class="text-center">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                    <small class="text-muted">
                                        <i class="fas fa-info-circle"></i> Hapus tanggal yang merupakan cuti bersama, libur
                                        nasional, dan weekend.
                                    </small>
                                    @error('tanggal_array')
                                        <span class="text-danger d-block mt-1">{{ $message }}</span>
                                    @enderror
                                </div>
                                <input type="hidden" name="tanggal_array" id="tanggal_array">
                                <input type="hidden" name="tanggal_mulai_haji" id="tanggal_mulai_haji" value="">
                                <input type="hidden" name="jumlah_hari_haji" id="jumlah_hari_haji" value="40">
                                <input type="hidden" name="tanggal_mulai_melahirkan_hidden" id="tanggal_mulai_melahirkan_hidden" value="">
                                <input type="hidden" name="jumlah_hari_melahirkan_hidden" id="jumlah_hari_melahirkan_hidden" value="">
                            </div>

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

                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="tanggal_mulai_haji_display" class="form-label fw-bold">
                                                Tanggal Mulai <span class="text-danger">*</span>
                                            </label>
                                            <input type="text"
                                                class="form-control"
                                                id="tanggal_mulai_haji_display"
                                                placeholder="dd/mm/yyyy"
                                                autocomplete="off"
                                                required>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label fw-bold">Jumlah Hari Kerja</label>
                                            <input type="text"
                                                class="form-control bg-light"
                                                value="40"
                                                readonly>
                                            <div class="form-text">
                                                <i class="fas fa-info-circle text-primary"></i>
                                                40 hari kerja (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>
                                    </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 untuk melihat preview...
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

                                @error('tanggal_mulai_haji')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                            </div>

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

                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="tanggal_mulai_melahirkan_display" class="form-label fw-bold">
                                                Tanggal Mulai <span class="text-danger">*</span>
                                            </label>
                                            <input type="text"
                                                class="form-control"
                                                id="tanggal_mulai_melahirkan_display"
                                                placeholder="dd/mm/yyyy"
                                                autocomplete="off"
                                                required>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label fw-bold">Jumlah Hari Kerja</label>
                                            <input type="text"
                                                class="form-control bg-light"
                                                value="90"
                                                readonly>
                                            <div class="form-text">
                                                <i class="fas fa-info-circle text-primary"></i>
                                                90 hari kerja (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_melahirkan">-</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 untuk melihat preview...
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

                                @error('tanggal_mulai_melahirkan')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="row" id="alamat_row" style="display: none;">
                                {{-- Alamat --}}
                                <div class="col-md-6 mb-3" id="alamat_group">
                                    <label for="alamat" class="form-label required-label">Alamat Selama Cuti</label>
                                    <input type="text" id="alamat" class="form-control" name="alamat"
                                        value="{{ old('alamat') }}" required placeholder="Contoh: Jl. Ahmad Yani No. 123">
                                    @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">
                                    <label for="nomor_telepon" class="form-label required-label">Nomor Telepon</label>
                                    <input type="tel" id="nomor_telepon" class="form-control" name="nomor_telepon"
                                        value="{{ old('nomor_telepon') }}" required placeholder="Contoh: 081234567890"
                                        maxlength="15" pattern="\d{10,15}">
                                    @error('nomor_telepon')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row" id="lampiran_row" style="display: none;">
                                {{-- Lampiran --}}
                                <div class="col-md-6 mb-3" id="lampiran_group">
                                    <label for="lampiran" class="form-label">Lampiran</label>
                                    <input type="file" class="form-control" name="lampiran[]" id="lampiran"
                                        accept=".jpg,.png,.pdf" multiple>
                                    <small class="form-text text-muted">Format: JPG, PNG, PDF. Maks: 2MB per file</small>
                                    @error('lampiran.*')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>


                            </div>
                        </div>
                    </div>

                    {{-- Submit Button --}}
                    <div class="text-center">
                        <button type="submit" class="btn btn-submit btn-lg text-white" id="btn-submit" formnovalidate>
                            <i class="fas fa-paper-plane me-2"></i> Kirim Pengajuan Cuti
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Footer --}}
        <div class="text-center text-muted">
            <small>© {{ date('Y') }} PT Multi Spunindo Jaya Tbk. Semua hak dilindungi undang-undang.</small>
        </div>
    </div>

    {{-- Modal Karyawan Pengganti --}}
    <div class="modal fade" id="modalKaryawanPengganti" tabindex="-1" aria-labelledby="modalKaryawanPenggantiLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #028284; color: white;">
                    <h5 class="modal-title" id="modalKaryawanPenggantiLabel">
                        <i class="fas fa-users me-2"></i>Pilih Karyawan Pengganti
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- Search Input --}}
                    <div class="mb-3">
                        <div class="input-group">
                            <input type="text" id="search_pengganti" class="form-control"
                                placeholder="Cari berdasarkan NIK, Nama, atau Departemen..."
                                style="border-radius: 0.375rem 0 0 0.375rem;">
                            <button class="btn btn-primary" type="button" id="btn_search_pengganti"
                                style="background-color: #028284; border-color: #028284; border-radius: 0 0.375rem 0.375rem 0;">
                                <i class="fas fa-search"></i>
                                <span class="ms-1">Cari</span>
                            </button>
                        </div>
                    </div>

                    {{-- Loading Spinner --}}
                    <div id="loading_pengganti" class="text-center py-4" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 text-muted">Memuat data...</p>
                    </div>

                    {{-- Table Result --}}
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover mb-0" id="table_pengganti">
                            <thead style="background-color: #5fd4d6;">
                                <tr>
                                    <th class="text-center" style="width: 70px;">Aksi</th>
                                    <th style="width: 120px;">NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Ketik kata kunci dan klik Cari untuk mencari karyawan
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    {{-- Pagination --}}
                    <div id="pagination_pengganti" class="justify-content-between align-items-center mt-3"
                        style="display: none;">
                        <small class="text-muted" id="pagination_info"></small>
                        <nav aria-label="Pagination">
                            <ul class="pagination pagination-sm mb-0" id="pagination_links">
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        style="background-color: #028284; border-color: #028284;">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    {{-- Flatpickr --}}
    <script src="{{ asset('/') }}assets/js/flatpickr.min.js"></script>

    {{-- SweetAlert --}}
    <script src="{{ asset('/') }}assets/js/sweetalert2.all.min.js"></script>

    <script>
        // Data aturan cuti dari server
        const mstAturan = @json($mstAturan ?? []);

        // Data periode permohonan aktif dari server
        const activePeriods = @json($activePeriods ?? []);

        // Data libur nasional & cuti bersama untuk auto-generate haji
        const liburNasionalListEmail = @json($liburNasional ?? []);
        const cutiBersamaListEmail = @json($cutiBersamaDates ?? []);

        // Variable untuk menyimpan tanggal haji yang digenerate
        let hajiGeneratedDates = [];
        let flatpickrHajiEmail = null;

        // Variable untuk menyimpan tanggal melahirkan yang digenerate
        let melahirkanGeneratedDates = [];
        let flatpickrMelahirkanEmail = null;

        // Fungsi untuk cek apakah tanggal dalam periode aktif
        function isDateInActivePeriod(date) {
            const checkDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
            return activePeriods.some(period => {
                const start = new Date(period.mulai);
                const end = new Date(period.berakhir);
                return checkDate >= start && checkDate <= end;
            });
        }

        // Fungsi untuk update field berdasarkan jenis cuti yang dipilih
        // skipReset = true untuk inisialisasi saat halaman reload dengan old input (validation error)
        function updateFields(select, skipReset = false) {
            const selectedID = select.value;
            const aturan = mstAturan.find(item => item.jenis_cuti_id == selectedID);

            if (!skipReset) {
                // Reset semua input fields hanya jika user secara manual ganti jenis cuti
                document.getElementById("nik_karyawan_pengganti_hidden").value = "";
                document.getElementById("nik_karyawan_pengganti_display").value = "";
                document.getElementById("nama_karyawan_pengganti").value = "";
                document.getElementById("alasan").value = "";
                document.getElementById("pekerjaan_yang_belum_diselesaikan").value = "";
                document.getElementById("tanggal_mulai").value = "";
                document.getElementById("tanggal_berakhir").value = "";
                const tableTanggalBody = document.querySelector("#tanggal_table tbody");
                if (tableTanggalBody) tableTanggalBody.innerHTML = "";
                document.getElementById("tanggal_array").value = "";
                document.getElementById("alamat").value = "";
                document.getElementById("nomor_telepon").value = "";
                document.getElementById("lampiran").value = "";

                // Reset haji fields
                const hajiDisplay = document.getElementById('tanggal_mulai_haji_display');
                if (hajiDisplay) hajiDisplay.value = "";
                document.getElementById('preview_selesai_haji').value = '';
                hajiGeneratedDates = [];

                // Reset melahirkan fields
                const melahirkanDisplay = document.getElementById('tanggal_mulai_melahirkan_display');
                if (melahirkanDisplay) melahirkanDisplay.value = "";
                document.getElementById('preview_selesai_melahirkan').value = '';
                document.getElementById('info_total_hari_melahirkan').innerHTML = '-';
                melahirkanGeneratedDates = [];

                // Reset karyawan pengganti info
                clearKaryawanPengganti();
            }

            if (aturan) {
                const jenisCutiId = aturan.jenis_cuti_id;

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

                // Tampilkan semua fields
                document.getElementById("nik_karyawan_pengganti_group").style.display = "block";
                document.getElementById("alasan_group").style.display = "block";
                document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "block";
                document.getElementById("tanggal_row").style.display = "flex";
                document.getElementById("alamat_row").style.display = "flex";

                // Kondisi untuk lampiran: jika jenis_cuti_id adalah 2 (Cuti Tahunan) atau 20 (Cuti Bersama), sembunyikan lampiran
                if (jenisCutiId == 2 || jenisCutiId == 20) {
                    document.getElementById("lampiran_row").style.display = "none";
                } else {
                    document.getElementById("lampiran_row").style.display = "flex";
                }

                // Update info aturan cuti
                document.getElementById("aturanJudul").innerText = aturan.judul || "Tidak ada 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 {
                // Reset ke default jika tidak ada aturan ketika memilih jenis cuti
                document.getElementById("aturanJudul").innerText =
                    "Belum ada aturan untuk jenis cuti ini. Anda belum bisa mengirimkan permohonan.";
                document.getElementById("aturanIsi").innerText = "-";
                document.getElementById("aturanJumlah").innerText = "-";
                document.getElementById("jumlah_cuti").value = "";

                // Sembunyikan semua fields
                document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                document.getElementById("alasan_group").style.display = "none";
                document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                document.getElementById("tanggal_row").style.display = "none";
                document.getElementById("table_tanggal").style.display = "none";
                document.getElementById("alamat_row").style.display = "none";
                document.getElementById("lampiran_row").style.display = "none";
            }

            // Handle Cuti Melahirkan (ID=21)
            if (selectedID == 21) {
                document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                document.getElementById("alasan_group").style.display = "none";
                document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                document.getElementById("tanggal_mulai_group").style.display = "none";
                document.getElementById("tanggal_berakhir_group").style.display = "none";
                document.getElementById("table_tanggal").style.display = "none";
                document.getElementById("tanggal_row").style.display = "none";
                document.getElementById("form-cuti-haji").style.display = "none";
                document.getElementById("form-cuti-melahirkan").style.display = "block";
                document.getElementById("alamat_row").style.display = "flex";
                document.getElementById("alamat_group").style.display = "block";
                document.getElementById("nomor_telepon_group").style.display = "block";
                document.getElementById("lampiran_row").style.display = "flex";
                document.getElementById("lampiran_group").style.display = "block";

                document.getElementById("aturanJudul").innerText = "Cuti Melahirkan";
                document.getElementById("aturanIsi").innerText = "Cuti khusus untuk melahirkan. Sistem akan otomatis menghitung 90 hari kerja dengan melewati hari weekend dan libur nasional.";
                document.getElementById("aturanJumlah").innerText = "90 hari kerja";
                document.getElementById("jumlah_cuti").value = "90";

                initDatePickerMelahirkanEmail();
                return;
            }

            // Handle Cuti Haji (ID=11)
            if (selectedID == 11) {
                document.getElementById("nik_karyawan_pengganti_group").style.display = "none";
                document.getElementById("alasan_group").style.display = "none";
                document.getElementById("pekerjaan_yang_belum_diselesaikan_group").style.display = "none";
                document.getElementById("tanggal_mulai_group").style.display = "none";
                document.getElementById("tanggal_berakhir_group").style.display = "none";
                document.getElementById("table_tanggal").style.display = "none";
                document.getElementById("tanggal_row").style.display = "none";
                document.getElementById("form-cuti-melahirkan").style.display = "none";
                document.getElementById("form-cuti-haji").style.display = "block";
                document.getElementById("alamat_row").style.display = "flex";
                document.getElementById("alamat_group").style.display = "block";
                document.getElementById("nomor_telepon_group").style.display = "block";
                document.getElementById("lampiran_row").style.display = "flex";
                document.getElementById("lampiran_group").style.display = "block";

                document.getElementById("aturanJudul").innerText = "Cuti Menunaikan Ibadah Haji";
                document.getElementById("aturanIsi").innerText = "Cuti khusus untuk menunaikan ibadah haji. Sistem akan otomatis menghitung 40 hari kerja dengan melewati hari weekend dan libur nasional.";
                document.getElementById("aturanJumlah").innerText = "40 hari kerja";
                document.getElementById("jumlah_cuti").value = "40";

                initDatePickerHajiEmail();
                return;
            }

            // Hide haji form for all other cuti types
            document.getElementById("form-cuti-haji").style.display = "none";
            // Hide melahirkan form for all other cuti types
            document.getElementById("form-cuti-melahirkan").style.display = "none";
        }

        // Inisialisasi Flatpickr (tanpa locale Indonesia karena file tidak tersedia)
        const tanggalMulai = flatpickr("#tanggal_mulai", {
            dateFormat: "d/m/Y",
            enable: [isDateInActivePeriod],
            onChange: function (selectedDates, dateStr, instance) {
                if (selectedDates.length > 0) {
                    tanggalBerakhir.set('minDate', selectedDates[0]);
                    generateDateTable();
                }
            }
        });

        const tanggalBerakhir = flatpickr("#tanggal_berakhir", {
            dateFormat: "d/m/Y",
            enable: [isDateInActivePeriod],
            onOpen: function() {
                var self = this;
                setTimeout(function() {
                    try {
                        if (!tanggalMulai || !tanggalMulai.selectedDates || !tanggalMulai.selectedDates[0]) return;
                        var startDate = tanggalMulai.selectedDates[0];
                        var cal = self.calendarContainer || (tanggalBerakhir && tanggalBerakhir.calendarContainer);
                        if (!cal) return;
                        var dayElems = cal.querySelectorAll('.flatpickr-day');
                        dayElems.forEach(function(dayElem) {
                            if (dayElem.dateObj && dayElem.dateObj.toDateString() === startDate.toDateString()) {
                                dayElem.classList.add('startRange');
                            }
                        });
                    } catch(e) { /* abaikan */ }
                }, 50);
            },
            onChange: function (selectedDates, dateStr, instance) {
                generateDateTable();
            }
        });

        // Generate tabel tanggal
        function generateDateTable() {
            const startDate = tanggalMulai.selectedDates[0];
            const endDate = tanggalBerakhir.selectedDates[0];

            if (!startDate || !endDate) return;

            const tbody = document.querySelector('#tanggal_table tbody');
            tbody.innerHTML = '';

            const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
            const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

            let currentDate = new Date(startDate);
            let dateArray = [];

            while (currentDate <= endDate) {
                const day = days[currentDate.getDay()];
                const date = currentDate.getDate();
                const month = months[currentDate.getMonth()];
                const year = currentDate.getFullYear();
                const dateStr = `${String(date).padStart(2, '0')}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${year}`;

                dateArray.push(dateStr);

                const row = document.createElement('tr');
                row.setAttribute('data-date', dateStr);
                row.innerHTML = `
                                                                    <td class="text-center">${day}</td>
                                                                    <td class="text-center">${date}</td>
                                                                    <td class="text-center">${month}</td>
                                                                    <td class="text-center">${year}</td>
                                                                    <td class="text-center">
                                                                        <button type="button" class="btn btn-sm btn-danger" onclick="removeDate(this, '${dateStr}')">
                                                                            <i class="fas fa-trash"></i>
                                                                        </button>
                                                                    </td>
                                                                `;
                tbody.appendChild(row);

                currentDate.setDate(currentDate.getDate() + 1);
            }

            document.getElementById('tanggal_array').value = JSON.stringify(dateArray);
            document.getElementById('table_tanggal').style.display = 'block';
        }

        // Hapus tanggal dari tabel
        function removeDate(btn, dateStr) {
            const row = btn.closest('tr');
            row.remove();

            // Update hidden input
            let dateArray = JSON.parse(document.getElementById('tanggal_array').value || '[]');
            dateArray = dateArray.filter(d => d !== dateStr);
            document.getElementById('tanggal_array').value = JSON.stringify(dateArray);
        }

        // Form submission (selaras dengan add.blade.php karyawan)
        document.getElementById('leave-form').addEventListener('submit', function (e) {
            e.preventDefault();

            const form = this;
            const submitBtn = document.getElementById('btn-submit');
            const jenisCutiSelect = document.getElementById('jenis_cuti_id');
            const selectedJenisCuti = jenisCutiSelect ? jenisCutiSelect.value : null;

            // ========== 1. Validasi Jenis Cuti ==========
            if (!selectedJenisCuti) {
                Swal.fire('Error', 'Pilih jenis cuti terlebih dahulu.', 'error');
                return;
            }

            // ========== 2. Cek Cuti Bersama: validasi sisa jatah sebelum submit (selaras karyawan) ==========
            if (selectedJenisCuti === '20') {
                var jatahBersamaEl = document.querySelector('.card.flex-fill h5.font-weight-bolder.text-danger');
                if (jatahBersamaEl) {
                    e.preventDefault();
                    submitBtn.disabled = false;
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pengajuan Tidak Dapat Dilakukan',
                        text: 'Sisa Cuti Bersama anda adalah 0 hari. Hubungi personalia.'
                    });
                    return;
                }
            }

            // ========== 3. Deteksi mode (normal / haji / melahirkan) ==========
            let isHajiMode = false;
            let isMelahirkanMode = false;

            if (selectedJenisCuti === '11') {
                isHajiMode = true;
            } else if (selectedJenisCuti === '21') {
                isMelahirkanMode = true;
            } else {
                // Fallback: cek nama cuti
                const selectedOption = jenisCutiSelect.options[jenisCutiSelect.selectedIndex];
                if (selectedOption) {
                    const namaCuti = selectedOption.text.toLowerCase();
                    if (namaCuti.includes('haji') || namaCuti.includes('ibadah')) isHajiMode = true;
                    if (namaCuti.includes('melahirkan') || namaCuti.includes('maternity') || namaCuti.includes('hamil')) isMelahirkanMode = true;
                }
            }

            // ========== 4. Sync & Validasi Cuti Melahirkan (selaras karyawan) ==========
            if (isMelahirkanMode) {
                if (typeof melahirkanGeneratedDates !== 'undefined' && melahirkanGeneratedDates.length > 0) {
                    document.getElementById('tanggal_array').value = JSON.stringify(melahirkanGeneratedDates);
                    document.getElementById('jumlah_cuti').value = melahirkanGeneratedDates.length;
                    // Sync alasan dari textarea melahirkan ke alasan utama
                    const alasanMelahirkan = document.getElementById('alasan_melahirkan');
                    if (alasanMelahirkan) {
                        document.getElementById('alasan').value = alasanMelahirkan.value;
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Preview Belum Siap',
                        text: 'Isi tanggal mulai cuti melahirkan, tunggu preview muncul, lalu coba kirim lagi.'
                    });
                    return;
                }
            }

            // ========== 5. Sync & Validasi Cuti Haji (selaras karyawan) ==========
            if (isHajiMode) {
                if (typeof hajiGeneratedDates !== 'undefined' && hajiGeneratedDates.length > 0) {
                    document.getElementById('tanggal_array').value = JSON.stringify(hajiGeneratedDates);
                    document.getElementById('jumlah_cuti').value = hajiGeneratedDates.length;
                    // Sync alasan dari textarea haji ke alasan utama
                    const alasanHaji = document.getElementById('alasan_haji');
                    if (alasanHaji) {
                        document.getElementById('alasan').value = alasanHaji.value;
                    }
                    // Auto-fill pekerjaan field untuk haji (selaras karyawan)
                    const pekerjaanField = document.querySelector('[name="pekerjaan_yang_belum_diselesaikan"]');
                    if (pekerjaanField) {
                        pekerjaanField.value = 'Cuti Menunaikan Ibadah Haji (' + hajiGeneratedDates.length + ' hari kerja)';
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Preview Belum Siap',
                        text: 'Isi tanggal mulai cuti haji, tunggu preview muncul, lalu coba kirim lagi.'
                    });
                    return;
                }
            }

            // ========== 6. Validasi tanggal untuk cuti normal (selaras karyawan) ==========
            if (!isHajiMode && !isMelahirkanMode) {
                var tanggalVal = document.getElementById('tanggal_array').value || '';
                var parsedArr = [];
                try { parsedArr = JSON.parse(tanggalVal); } catch(err) {}
                if (!tanggalVal || tanggalVal === '[]' || parsedArr.length < 1) {
                    Swal.fire('Error', 'Tanggal cuti wajib diisi, paling tidak 1 hari kerja.', 'error');
                    return;
                }
            }

            // ========== 7. Validasi alamat & nomor telepon (selaras karyawan - server-side required) ==========
            const alamatVal = document.getElementById('alamat').value.trim();
            if (!alamatVal) {
                Swal.fire('Error', 'Alamat selama cuti wajib diisi.', 'error');
                document.getElementById('alamat').focus();
                return;
            }

            const teleponVal = document.getElementById('nomor_telepon').value.trim();
            if (!teleponVal) {
                Swal.fire('Error', 'Nomor telepon wajib diisi.', 'error');
                document.getElementById('nomor_telepon').focus();
                return;
            }
            if (!/^\d{10,15}$/.test(teleponVal)) {
                Swal.fire('Error', 'Nomor telepon harus berupa 10-15 digit angka.', 'error');
                document.getElementById('nomor_telepon').focus();
                return;
            }

            // ========== 8. Konfirmasi dan Submit ==========
            Swal.fire({
                title: 'Konfirmasi',
                text: 'Apakah Anda yakin ingin mengirim pengajuan cuti ini?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#028284',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Kirim',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Mengirim...';
                    form.submit();
                }
            });
        });

        // ===== KARYAWAN PENGGANTI FUNCTIONS =====
        let currentPagePengganti = 1;

        // Search karyawan pengganti
        function searchKaryawanPengganti(page = 1) {
            const search = document.getElementById('search_pengganti').value;
            const loading = document.getElementById('loading_pengganti');
            const tbody = document.querySelector('#table_pengganti tbody');
            const pagination = document.getElementById('pagination_pengganti');

            // Show loading
            loading.style.display = 'block';
            tbody.innerHTML = '';

            // AJAX request
            $.ajax({
                url: '{{ route("leave.form.email.search.karyawan") }}',
                method: 'GET',
                data: {
                    search: search,
                    page: page,
                    token: '{{ $token }}'
                },
                success: function (response) {
                    loading.style.display = 'none';

                    if (response.success && response.data.length > 0) {
                        let html = '';
                        response.data.forEach(function (karyawan) {
                            html += `
                                                            <tr>
                                                                <td class="text-center">
                                                                    <button type="button" class="btn btn-sm btn-primary"
                                                                        onclick="selectKaryawanPengganti('${karyawan.nik}', '${karyawan.nama}')">
                                                                        <i class="fas fa-check"></i>
                                                                    </button>
                                                                </td>
                                                                <td>${karyawan.nik}</td>
                                                                <td>${karyawan.nama}</td>
                                                                <td>${karyawan.departemen || '-'}</td>
                                                            </tr>
                                                        `;
                        });
                        tbody.innerHTML = html;

                        // Update pagination
                        if (response.pagination) {
                            pagination.style.display = 'flex';
                            document.getElementById('pagination_info').textContent =
                                `Menampilkan ${response.pagination.from || 0} - ${response.pagination.to || 0} dari ${response.pagination.total} data`;

                            renderPagination(response.pagination);
                        }
                    } else {
                        tbody.innerHTML = `
                                                        <tr>
                                                            <td colspan="4" class="text-center text-muted py-4">
                                                                <i class="fas fa-search me-1"></i>
                                                                Tidak ada data yang ditemukan
                                                            </td>
                                                        </tr>
                                                    `;
                        pagination.style.display = 'none';
                    }
                },
                error: function (xhr) {
                    loading.style.display = 'none';
                    tbody.innerHTML = `
                                                    <tr>
                                                        <td colspan="4" class="text-center text-danger py-4">
                                                            <i class="fas fa-exclamation-triangle me-1"></i>
                                                            Terjadi kesalahan saat memuat data
                                                        </td>
                                                    </tr>
                                                `;
                }
            });
        }

        // Render pagination
        function renderPagination(pagination) {
            const links = document.getElementById('pagination_links');
            let html = '';

            // Previous button
            if (pagination.current_page > 1) {
                html += `<li class="page-item">
                                                <a class="page-link" href="#" onclick="searchKaryawanPengganti(${pagination.current_page - 1}); return false;">
                                                    <i class="fas fa-chevron-left"></i>
                                                </a>
                                            </li>`;
            }

            // Page numbers
            for (let i = 1; i <= pagination.last_page; i++) {
                if (i === pagination.current_page) {
                    html += `<li class="page-item active"><span class="page-link">${i}</span></li>`;
                } else if (i === 1 || i === pagination.last_page ||
                    (i >= pagination.current_page - 2 && i <= pagination.current_page + 2)) {
                    html += `<li class="page-item">
                                                    <a class="page-link" href="#" onclick="searchKaryawanPengganti(${i}); return false;">${i}</a>
                                                </li>`;
                } else if (i === pagination.current_page - 3 || i === pagination.current_page + 3) {
                    html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                }
            }

            // Next button
            if (pagination.current_page < pagination.last_page) {
                html += `<li class="page-item">
                                                <a class="page-link" href="#" onclick="searchKaryawanPengganti(${pagination.current_page + 1}); return false;">
                                                    <i class="fas fa-chevron-right"></i>
                                                </a>
                                            </li>`;
            }

            links.innerHTML = html;
        }

        // Select karyawan pengganti
        function selectKaryawanPengganti(nik, nama) {
            document.getElementById('nik_karyawan_pengganti_hidden').value = nik;
            document.getElementById('nik_karyawan_pengganti_display').value = nik + ' - ' + nama;
            document.getElementById('nama_karyawan_pengganti').value = nama;
            document.getElementById('pengganti-nama').textContent = nama;
            document.getElementById('pengganti-info').style.display = 'block';

            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('modalKaryawanPengganti'));
            modal.hide();
        }

        // Clear karyawan pengganti
        function clearKaryawanPengganti() {
            document.getElementById('nik_karyawan_pengganti_hidden').value = '';
            document.getElementById('nik_karyawan_pengganti_display').value = '';
            document.getElementById('nama_karyawan_pengganti').value = '';
            document.getElementById('pengganti-nama').textContent = '';
            document.getElementById('pengganti-info').style.display = 'none';
        }

        // Event listeners untuk karyawan pengganti
        document.getElementById('btn_search_pengganti').addEventListener('click', function () {
            searchKaryawanPengganti(1);
        });

        document.getElementById('search_pengganti').addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                searchKaryawanPengganti(1);
            }
        });

        // Load initial data when modal opens
        document.getElementById('modalKaryawanPengganti').addEventListener('shown.bs.modal', function () {
            document.getElementById('search_pengganti').focus();
        });

        // ===== CUTI HAJI AUTO-GENERATE FUNCTIONS =====

        function generatePreviewHajiEmail() {
            const inputVal = document.getElementById('tanggal_mulai_haji_display').value;
            if (!inputVal) {
                document.getElementById('tbody_preview_haji').innerHTML = `
                    <tr>
                        <td colspan="3" class="text-center text-muted py-3">
                            <i class="fas fa-arrow-left me-1"></i>
                            Isi tanggal mulai untuk melihat preview...
                        </td>
                    </tr>
                `;
                document.getElementById('preview_selesai_haji').value = '';
                document.getElementById('tanggal_mulai_haji').value = '';
                hajiGeneratedDates = [];
                return;
            }

            // Parse d/m/Y format
            const parts = inputVal.split('/');
            if (parts.length !== 3) return;
            const startDay = parseInt(parts[0], 10);
            const startMonth = parseInt(parts[1], 10) - 1; // JS months are 0-indexed
            const startYear = parseInt(parts[2], 10);

            const currentDate = new Date(startYear, startMonth, startDay);
            if (isNaN(currentDate.getTime())) return;

            const MAX_WORK_DAYS = 40;
            let workDaysCount = 0;
            let allDates = [];
            let lastWorkDate = null;

            const daysName = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
            const monthsName = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

            // Safety: max 200 calendar days loop
            let safetyCounter = 0;
            while (workDaysCount < MAX_WORK_DAYS && safetyCounter < 200) {
                safetyCounter++;
                const dayOfWeek = currentDate.getDay(); // 0=Sun, 6=Sat
                const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`;

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

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

                // Hari kerja biasa & cuti bersama sama-sama dihitung sebagai Hari Ke-N
                workDaysCount++;
                lastWorkDate = new Date(currentDate);

                if (isCutiBersama) {
                    // Cuti bersama: dibedakan warna barisnya
                    allDates.push({
                        dateStr: dateStr,
                        displayDate: `${currentDate.getDate()} ${monthsName[currentDate.getMonth()]} ${currentDate.getFullYear()}`,
                        dayName: daysName[dayOfWeek],
                        status: 'Cuti Bersama',
                        statusClass: 'bg-warning text-light text-bold',
                        isWorkDay: true,
                        isCutiBersama: true,
                        workDayNum: workDaysCount
                    });
                } else {
                    // Hari kerja biasa: warna baris normal
                    allDates.push({
                        dateStr: dateStr,
                        displayDate: `${currentDate.getDate()} ${monthsName[currentDate.getMonth()]} ${currentDate.getFullYear()}`,
                        dayName: daysName[dayOfWeek],
                        status: 'Hari Kerja',
                        statusClass: 'bg-secondary text-white',
                        isWorkDay: true,
                        isCutiBersama: false,
                        workDayNum: workDaysCount
                    });
                }

                currentDate.setDate(currentDate.getDate() + 1);
            }

            // Build table rows (3 kolom: #, Tanggal, Status)
            let html = '';
            allDates.forEach(function(item) {
                const rowClass = item.isCutiBersama ? 'class="table-warning"' : '';
                html += `
                    <tr ${rowClass}>
                        <td class="text-center fw-bold">${item.workDayNum}</td>
                        <td>${item.displayDate}</td>
                        <td class="text-center"><span class="badge ${item.statusClass}">${item.status}</span></td>
                    </tr>
                `;
            });

            document.getElementById('tbody_preview_haji').innerHTML = html;

            // Update perkiraan selesai
            if (lastWorkDate) {
                const endDisplay = `${lastWorkDate.getDate()}/${String(lastWorkDate.getMonth() + 1).padStart(2, '0')}/${lastWorkDate.getFullYear()}`;
                document.getElementById('preview_selesai_haji').value = endDisplay;
            }

            // Update hidden fields
            document.getElementById('tanggal_mulai_haji').value = inputVal;

            // Store only work day dates for submit
            hajiGeneratedDates = allDates.filter(d => d.isWorkDay).map(d => d.dateStr);
        }

        function initDatePickerHajiEmail() {
            if (flatpickrHajiEmail) {
                flatpickrHajiEmail.destroy();
                flatpickrHajiEmail = null;
            }

            flatpickrHajiEmail = flatpickr('#tanggal_mulai_haji_display', {
                dateFormat: 'd/m/Y',
                maxDate: new Date().fp_incr(120),
                enable: [isDateInActivePeriod],
                onChange: function(selectedDates, dateStr, instance) {
                    if (selectedDates.length > 0) {
                        generatePreviewHajiEmail();
                    }
                }
            });
        }

        // ===== END CUTI HAJI AUTO-GENERATE FUNCTIONS =====

        // ===== CUTI MELAHIRKAN AUTO-GENERATE FUNCTIONS =====

        function generatePreviewMelahirkanEmail() {
            const inputVal = document.getElementById('tanggal_mulai_melahirkan_display').value;
            if (!inputVal) {
                document.getElementById('tbody_preview_melahirkan').innerHTML = `
                    <tr>
                        <td colspan="3" class="text-center text-muted py-3">
                            <i class="fas fa-arrow-left me-1"></i>
                            Isi tanggal mulai untuk melihat preview...
                        </td>
                    </tr>
                `;
                document.getElementById('preview_selesai_melahirkan').value = '';
                document.getElementById('info_total_hari_melahirkan').innerHTML = '-';
                document.getElementById('tanggal_mulai_melahirkan_hidden').value = '';
                document.getElementById('jumlah_hari_melahirkan_hidden').value = '';
                melahirkanGeneratedDates = [];
                return;
            }

            // Parse d/m/Y format
            const parts = inputVal.split('/');
            if (parts.length !== 3) return;
            const startDay = parseInt(parts[0], 10);
            const startMonth = parseInt(parts[1], 10) - 1;
            const startYear = parseInt(parts[2], 10);

            const currentDate = new Date(startYear, startMonth, startDay);
            if (isNaN(currentDate.getTime())) return;

            const MAX_WORK_DAYS = 90;
            let workDaysCount = 0;
            let allDates = [];
            let lastWorkDate = null;

            const daysName = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
            const monthsName = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

            // Safety: max 200 calendar days loop
            let safetyCounter = 0;
            while (workDaysCount < MAX_WORK_DAYS && safetyCounter < 200) {
                safetyCounter++;
                const dayOfWeek = currentDate.getDay();
                const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`;

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

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

                // Hari kerja biasa & cuti bersama sama-sama dihitung sebagai Hari Ke-N
                workDaysCount++;
                lastWorkDate = new Date(currentDate);

                if (isCutiBersama) {
                    // Cuti bersama: dibedakan warna barisnya
                    allDates.push({
                        dateStr: dateStr,
                        displayDate: `${currentDate.getDate()} ${monthsName[currentDate.getMonth()]} ${currentDate.getFullYear()}`,
                        dayName: daysName[dayOfWeek],
                        status: 'Cuti Bersama',
                        statusClass: 'bg-warning text-light text-bold',
                        isWorkDay: true,
                        isCutiBersama: true,
                        workDayNum: workDaysCount
                    });
                } else {
                    // Hari kerja biasa: warna baris normal
                    allDates.push({
                        dateStr: dateStr,
                        displayDate: `${currentDate.getDate()} ${monthsName[currentDate.getMonth()]} ${currentDate.getFullYear()}`,
                        dayName: daysName[dayOfWeek],
                        status: 'Hari Kerja',
                        statusClass: 'bg-secondary text-white',
                        isWorkDay: true,
                        isCutiBersama: false,
                        workDayNum: workDaysCount
                    });
                }

                currentDate.setDate(currentDate.getDate() + 1);
            }

            // Build table rows (3 kolom: #, Tanggal, Status)
            let html = '';
            allDates.forEach(function(item) {
                const rowClass = item.isCutiBersama ? 'class="table-warning"' : '';
                html += `
                    <tr ${rowClass}>
                        <td class="text-center fw-bold">${item.workDayNum}</td>
                        <td>${item.displayDate}</td>
                        <td class="text-center"><span class="badge ${item.statusClass}">${item.status}</span></td>
                    </tr>
                `;
            });

            document.getElementById('tbody_preview_melahirkan').innerHTML = html;

            // Update perkiraan selesai
            if (lastWorkDate) {
                const endDisplay = `${lastWorkDate.getDate()}/${String(lastWorkDate.getMonth() + 1).padStart(2, '0')}/${lastWorkDate.getFullYear()}`;
                document.getElementById('preview_selesai_melahirkan').value = endDisplay;
            }

            // Update info total hari
            document.getElementById('info_total_hari_melahirkan').innerHTML = `
                <span class="fw-bold text-success">
                    <i class="fas fa-check-circle me-1"></i>
                    Total: ${workDaysCount} hari kerja (dari ${safetyCounter} hari kalender)
                </span>`;

            // Update hidden fields
            document.getElementById('tanggal_mulai_melahirkan_hidden').value = inputVal;
            document.getElementById('jumlah_hari_melahirkan_hidden').value = workDaysCount;

            // Store only work day dates for submit
            melahirkanGeneratedDates = allDates.filter(d => d.isWorkDay).map(d => d.dateStr);
        }

        function initDatePickerMelahirkanEmail() {
            if (flatpickrMelahirkanEmail) {
                flatpickrMelahirkanEmail.destroy();
                flatpickrMelahirkanEmail = null;
            }

            flatpickrMelahirkanEmail = flatpickr('#tanggal_mulai_melahirkan_display', {
                dateFormat: 'd/m/Y',
                maxDate: new Date().fp_incr(180),
                enable: [isDateInActivePeriod],
                onChange: function(selectedDates, dateStr, instance) {
                    if (selectedDates.length > 0) {
                        generatePreviewMelahirkanEmail();
                    }
                }
            });
        }

        // ===== END CUTI MELAHIRKAN AUTO-GENERATE FUNCTIONS =====

        // Inisialisasi field visibility saat halaman reload dengan old input (validation error)
        document.addEventListener('DOMContentLoaded', function () {
            const jenisCutiSelect = document.getElementById('jenis_cuti_id');
            if (jenisCutiSelect && jenisCutiSelect.value) {
                updateFields(jenisCutiSelect, true);
            }

            // Jika ada old input tanggal, regenerate tabel tanggal secara otomatis
            // agar user tidak perlu trigger ulang input tanggal setelah validasi error
            if (tanggalMulai.selectedDates.length > 0 && tanggalBerakhir.selectedDates.length > 0) {
                generateDateTable();
            }

            // Swal Fire untuk error handling dari Laravel validation
            @if ($errors->any())
                Swal.fire({
                    title: 'Terjadi Kesalahan',
                    html: `{!! implode('<br>', $errors->all()) !!}`,
                    icon: 'error',
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK',
                    allowOutsideClick: false
                });
            @endif
        });
    </script>
@endpush