@extends('layouts.mobile', ['title' => 'Pengajuan Cuti'])

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

        <style>
            /* Mobile Form Styling */
            .mobile-form-control.is-invalid,
            .mobile-select.is-invalid {
                border-color: #dc3545;
                padding-right: calc(1.5em + 0.75rem);
                background-repeat: no-repeat;
                background-position: right calc(0.375em + 0.1875rem) center;
                background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
            }

            .invalid-feedback {
                display: block;
                width: 100%;
                margin-top: 0.25rem;
                font-size: 0.875rem;
                color: #dc3545;
            }

            .mobile-container {
                padding: 16px;
                max-width: 100%;
            }

            .mobile-card {
                background: white;
                border-radius: 12px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                margin-bottom: 16px;
                overflow: hidden;
            }

            .mobile-card-header {
                background: linear-gradient(135deg, #028284 0%, #026668 100%);
                color: white;
                padding: 16px;
                font-weight: 600;
                font-size: 1rem;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .mobile-card-body {
                padding: 16px;
            }

            .mobile-info-box {
                background: #f0f9ff;
                border-left: 4px solid #028284;
                padding: 12px;
                border-radius: 8px;
                margin-bottom: 16px;
            }

            .mobile-info-box p {
                margin: 4px 0;
                font-size: 0.875rem;
            }

            .mobile-info-box strong {
                color: #028284;
            }

            .mobile-form-group {
                margin-bottom: 16px;
            }

            .mobile-form-label {
                display: block;
                font-weight: 600;
                margin-bottom: 8px;
                color: #1f2937;
                font-size: 0.9rem;
            }

            .mobile-form-control,
            .mobile-select {
                width: 100%;
                padding: 12px;
                border: 2px solid #e5e7eb;
                border-radius: 8px;
                font-size: 16px;
                transition: all 0.3s ease;
            }

            .mobile-form-control:focus,
            .mobile-select:focus {
                outline: none;
                border-color: #028284;
                box-shadow: 0 0 0 3px rgba(2, 130, 132, 0.1);
            }

            .mobile-btn {
                padding: 12px 24px;
                border: none;
                border-radius: 8px;
                font-weight: 600;
                font-size: 1rem;
                cursor: pointer;
                transition: all 0.3s ease;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-height: 48px;
            }

            .mobile-btn-primary {
                background: #028284;
                color: white;
            }

            .mobile-btn-primary:hover {
                background: #026668;
            }

            .mobile-btn-secondary {
                background: #6b7280;
                color: white;
            }

            .mobile-btn-danger {
                background: #dc3545;
                color: white;
            }

            .mobile-btn-block {
                width: 100%;
            }

            .mobile-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }

            .mobile-input-group {
                display: flex;
                gap: 8px;
            }

            .mobile-input-group .mobile-form-control {
                flex: 1;
            }

            .mobile-input-group-append {
                display: flex;
                align-items: center;
            }

            .mobile-search-btn {
                background: #028284;
                color: white;
                border: none;
                padding: 12px 16px;
                border-radius: 8px;
                cursor: pointer;
                min-width: 48px;
                min-height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mobile-hint {
                font-size: 0.8rem;
                color: #6b7280;
                margin-top: 4px;
            }

            .mobile-date-list {
                background: #f9fafb;
                border-radius: 8px;
                padding: 12px;
                margin-top: 12px;
            }

            .mobile-date-item {
                background: white;
                padding: 12px;
                border-radius: 8px;
                margin-bottom: 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            .mobile-date-item:last-child {
                margin-bottom: 0;
            }

            .mobile-date-info {
                flex: 1;
            }

            .mobile-date-info .day {
                font-weight: 600;
                color: #1f2937;
            }

            .mobile-date-info .date {
                font-size: 0.875rem;
                color: #6b7280;
            }

            .mobile-image-preview {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 12px;
            }

            .mobile-image-item {
                position: relative;
                width: 80px;
                height: 80px;
                border-radius: 8px;
                overflow: hidden;
                border: 2px solid #e5e7eb;
            }

            .mobile-image-item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                cursor: pointer;
            }

            .mobile-image-remove {
                position: absolute;
                top: 4px;
                right: 4px;
                background: #dc3545;
                color: white;
                border: none;
                border-radius: 50%;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                font-size: 0.75rem;
            }

            .mobile-quota-card {
                background: linear-gradient(135deg, #028284 0%, #026668 100%);
                color: white;
                padding: 16px;
                border-radius: 12px;
                margin-bottom: 16px;
                text-align: center;
            }

            .mobile-quota-card .quota-value {
                font-size: 2rem;
                font-weight: 700;
                margin: 8px 0;
            }

            .mobile-quota-card .quota-label {
                font-size: 0.875rem;
                opacity: 0.9;
            }

            .mobile-action-buttons {
                background: white;
                padding: 16px 0;
                display: flex;
                gap: 12px;
                margin-top: 16px;
            }

            .mobile-action-buttons .mobile-btn {
                flex: 1;
            }

            /* DataTables Mobile Styling */
            .dataTables_wrapper {
                font-size: 0.875rem;
            }

            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter,
            .dataTables_wrapper .dataTables_info,
            .dataTables_wrapper .dataTables_paginate {
                margin: 8px 0;
            }

            .dataTables_wrapper .dataTables_length select,
            .dataTables_wrapper .dataTables_filter input {
                padding: 8px;
                border: 2px solid #e5e7eb;
                border-radius: 6px;
                font-size: 14px;
            }

            .dataTables_wrapper table.dataTable {
                width: 100% !important;
                margin: 0 !important;
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button {
                padding: 6px 12px;
                margin: 2px;
                border-radius: 6px;
                border: 1px solid #e5e7eb;
                background: white;
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button.current {
                background: #028284;
                color: white !important;
                border-color: #028284;
            }

            table.dataTable thead th {
                padding: 12px 8px;
                background: #f9fafb;
                font-weight: 600;
                border-bottom: 2px solid #e5e7eb;
            }

            table.dataTable tbody td {
                padding: 12px 8px;
                border-bottom: 1px solid #f3f4f6;
            }

            /* Modal Styles */
            .mobile-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                display: none;
                align-items: center;
                justify-content: center;
                z-index: 1000;
                padding: 16px;
            }

            .mobile-modal.show {
                display: flex;
            }

            .mobile-modal-content {
                background: white;
                border-radius: 12px;
                width: 100%;
                max-width: 500px;
                max-height: 80vh;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }

            .mobile-modal-header {
                padding: 16px;
                border-bottom: 1px solid #e5e7eb;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .mobile-modal-title {
                font-weight: 600;
                font-size: 1.1rem;
            }

            .mobile-modal-close {
                background: none;
                border: none;
                font-size: 1.5rem;
                cursor: pointer;
                color: #6b7280;
                min-width: 32px;
                min-height: 32px;
            }

            .mobile-modal-body {
                padding: 16px;
                overflow-y: auto;
                flex: 1;
            }

            .mobile-search-input {
                width: 100%;
                padding: 12px;
                border: 2px solid #e5e7eb;
                border-radius: 8px;
                font-size: 16px;
                margin-bottom: 12px;
            }

            .mobile-employee-item {
                padding: 12px;
                border-bottom: 1px solid #e5e7eb;
                cursor: pointer;
                transition: background 0.2s ease;
            }

            .mobile-employee-item:hover {
                background: #f9fafb;
            }

            .mobile-employee-item:last-child {
                border-bottom: none;
            }

            .mobile-employee-nik {
                font-weight: 600;
                color: #028284;
            }

            .mobile-employee-name {
                font-size: 0.9rem;
                color: #1f2937;
            }

            .mobile-employee-dept {
                font-size: 0.8rem;
                color: #6b7280;
            }

            @media (max-width: 640px) {
                .mobile-container {
                    padding: 12px;
                }

                .mobile-quota-card .quota-value {
                    font-size: 1.5rem;
                }

                .mobile-btn {
                    font-size: 0.9rem;
                    padding: 10px 20px;
                }
            }
        </style>
    @endpush

    <div class="mobile-container">
        @if ($errors->any())
            <div class="mobile-card">
                <div class="mobile-card-body" style="background: #fee2e2; color: #dc2626;">
                    <strong><i class="fas fa-exclamation-triangle"></i> Terdapat Kesalahan:</strong>
                    <ul style="margin: 8px 0 0 0; padding-left: 20px;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <!-- Sisa Cuti Cards -->
        @if ($jatahCuti == null)
            <div class="mobile-card">
                <div class="mobile-card-body" style="background: #fee2e2; text-align: center;">
                    <i class="fas fa-exclamation-circle" style="font-size: 2rem; color: #dc2626;"></i>
                    <p style="margin-top: 8px; color: #dc2626; font-weight: 600;">
                        Anda tidak bisa mengajukan cuti pribadi untuk saat ini. Hubungi personalia untuk mengatur sisa cuti
                        pribadi anda.
                    </p>
                </div>
            </div>
        @else
            <div class="mobile-quota-card">
                <i class="fas fa-calendar-day" style="font-size: 2rem;"></i>
                <div class="quota-label">Sisa Cuti Pribadi / Tahunan {{ date('Y') }}</div>
                <div class="quota-value">{{ $jatahCuti->jumlah }} Hari</div>
            </div>

            @if ($jatahCuti->jumlah_bersama > 0)
                <div class="mobile-quota-card" style="background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);">
                    <i class="fas fa-users" style="font-size: 2rem;"></i>
                    <div class="quota-label">Sisa Cuti Bersama {{ date('Y') }}</div>
                    <div class="quota-value">{{ $jatahCuti->jumlah_bersama }} Hari</div>
                </div>
            @endif
        @endif

        <!-- Form Pengajuan Cuti -->
        <form method="POST" action="{{ route('permohonan.cuti.store') }}" id="cuti-form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="jumlah_cuti" id="jumlah_cuti" value="{{ old('jumlah_cuti') }}">
            <input type="hidden" name="tanggal_array" id="tanggal_array" value="{{ old('tanggal_array') }}">

            <!-- Aturan Permohonan Cuti -->
            <div class="mobile-card" id="aturan-card">
                <div class="mobile-card-header">
                    <i class="fas fa-info-circle"></i>
                    Aturan Permohonan Cuti
                </div>
                <div class="mobile-card-body">
                    <div class="mobile-info-box">
                        <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>Total Hari:</strong> <span id="aturanJumlah">-</span></p>
                    </div>
                </div>
            </div>

            <!-- Jenis Cuti -->
            <div class="mobile-card">
                <div class="mobile-card-body">
                    <div class="mobile-form-group">
                        <label for="jenis_cuti_id" class="mobile-form-label">
                            <i class="fas fa-clipboard-list"></i> Jenis Cuti <span style="color: #dc2626;">*</span>
                        </label>
                        <select name="jenis_cuti_id" id="jenis_cuti_id"
                            class="mobile-select @error('jenis_cuti_id') is-invalid @enderror" onchange="updateFields(this)"
                            required>
                            <option value="">Pilih Jenis Cuti</option>
                            @foreach ($jenisCuti as $cuti)
                                <option value="{{ $cuti->id }}" @if (old('jenis_cuti_id') == $cuti->id) selected @endif>
                                    {{ $cuti->nama }}
                                </option>
                            @endforeach
                        </select>
                        <div class="mobile-hint">Pilih jenis cuti untuk melanjutkan</div>
                        @error('jenis_cuti_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Form Fields (Initially Hidden) -->
            <div id="form-fields" style="display: none;">
                <!-- Karyawan Pengganti -->
                <div class="mobile-card" id="nik_karyawan_pengganti_group">
                    <div class="mobile-card-body">
                        <div class="mobile-form-group">
                            <label for="nik_karyawan_pengganti" class="mobile-form-label">
                                <i class="fas fa-user"></i> Karyawan Pengganti
                            </label>
                            <div class="mobile-input-group">
                                <input type="text" id="nik_karyawan_pengganti" name="nik_karyawan_pengganti"
                                    class="mobile-form-control @error('nik_karyawan_pengganti') is-invalid @enderror"
                                    value="{{ old('nik_karyawan_pengganti') }}" readonly>
                                <div class="mobile-input-group-append">
                                    <button type="button" class="mobile-search-btn" onclick="openEmployeeModal()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="mobile-hint">Dapat dikosongkan</div>
                            @error('nik_karyawan_pengganti')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Alasan & Pekerjaan -->
                <div class="mobile-card" id="alasan_group">
                    <div class="mobile-card-body">
                        <div class="mobile-form-group">
                            <label for="alasan" class="mobile-form-label">
                                <i class="fas fa-comment"></i> Alasan Cuti
                            </label>
                            <textarea id="alasan" name="alasan" class="mobile-form-control @error('alasan') is-invalid @enderror" rows="3"
                                placeholder="Contoh: Mengurus keperluan pribadi">{{ old('alasan') }}</textarea>
                            <div class="mobile-hint">Dapat dikosongkan</div>
                            @error('alasan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mobile-form-group">
                            <label for="pekerjaan_yang_belum_diselesaikan" class="mobile-form-label">
                                <i class="fas fa-tasks"></i> Pekerjaan yang Belum Diselesaikan
                            </label>
                            <textarea id="pekerjaan_yang_belum_diselesaikan" name="pekerjaan_yang_belum_diselesaikan"
                                class="mobile-form-control @error('pekerjaan_yang_belum_diselesaikan') is-invalid @enderror" rows="3"
                                placeholder="Contoh: Laporan mingguan masih perlu dikumpulkan">{{ old('pekerjaan_yang_belum_diselesaikan') }}</textarea>
                            <div class="mobile-hint">Dapat dikosongkan</div>
                            @error('pekerjaan_yang_belum_diselesaikan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Tanggal -->
                <div class="mobile-card" id="tanggal_group">
                    <div class="mobile-card-header">
                        <i class="fas fa-calendar"></i>
                        Tanggal Cuti
                    </div>
                    <div class="mobile-card-body">
                        <div class="mobile-form-group">
                            <label for="tanggal_mulai" class="mobile-form-label">
                                Tanggal Mulai <span style="color: #dc2626;">*</span>
                            </label>
                            <input type="text" id="tanggal_mulai" name="tanggal_mulai"
                                class="mobile-form-control @error('tanggal_mulai') is-invalid @enderror"
                                value="{{ old('tanggal_mulai') }}" required readonly>
                            @error('tanggal_mulai')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mobile-form-group">
                            <label for="tanggal_berakhir" class="mobile-form-label">
                                Tanggal Berakhir <span style="color: #dc2626;">*</span>
                            </label>
                            <input type="text" id="tanggal_berakhir" name="tanggal_berakhir"
                                class="mobile-form-control @error('tanggal_berakhir') is-invalid @enderror"
                                value="{{ old('tanggal_berakhir') }}" required readonly>
                            @error('tanggal_berakhir')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div id="date-list-container" style="display: none;">
                            <label class="mobile-form-label">Daftar Tanggal</label>
                            <div class="mobile-date-list" id="tanggal-list">
                                <!-- Tanggal akan ditampilkan di sini -->
                            </div>
                            <div class="mobile-hint" style="margin-top: 8px;">
                                <i class="fas fa-info-circle"></i> Hapus tanggal yang merupakan cuti bersama, libur
                                nasional, dan weekend
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Alamat & Nomor Telepon -->
                <div class="mobile-card" id="kontak_group">
                    <div class="mobile-card-body">
                        <div class="mobile-form-group">
                            <label for="alamat" class="mobile-form-label">
                                <i class="fas fa-map-marker-alt"></i> Alamat <span style="color: #dc2626;">*</span>
                            </label>
                            <input type="text" id="alamat" name="alamat"
                                class="mobile-form-control @error('alamat') is-invalid @enderror"
                                placeholder="Contoh: Jl. Ahmad Yani No. 123, Jakarta" value="{{ old('alamat') }}"
                                required>
                            @error('alamat')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mobile-form-group">
                            <label for="nomor_telepon" class="mobile-form-label">
                                <i class="fas fa-phone"></i> Nomor Telepon <span style="color: #dc2626;">*</span>
                            </label>
                            <input type="tel" id="nomor_telepon" name="nomor_telepon"
                                class="mobile-form-control @error('nomor_telepon') is-invalid @enderror"
                                placeholder="Contoh: 081234567890" value="{{ old('nomor_telepon') }}" maxlength="15"
                                pattern="\d{10,15}" inputmode="numeric" required>
                            @error('nomor_telepon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Lampiran -->
                <div class="mobile-card" id="lampiran_group" style="display: none;">
                    <div class="mobile-card-body">
                        <div class="mobile-form-group">
                            <label for="lampiran-input" class="mobile-form-label">
                                <i class="fas fa-paperclip"></i> Lampiran
                            </label>
                            <input type="file" id="lampiran-input" name="lampiran[]"
                                class="mobile-form-control @error('lampiran.*') is-invalid @enderror"
                                accept=".jpg,.jpeg,.png" multiple>
                            <div class="mobile-hint">Format: .jpg, .png. Maksimum: 1.5 MB per file</div>
                            @error('lampiran.*')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="mobile-image-preview" id="image-preview"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="mobile-action-buttons">
                <button type="button" class="mobile-btn mobile-btn-secondary" onclick="history.back()">
                    <i class="fas fa-arrow-left"></i> Kembali
                </button>
                <button type="submit" class="mobile-btn mobile-btn-primary" id="submit-button">
                    <i class="fas fa-paper-plane"></i> Kirim
                </button>
            </div>
        </form>

        <!-- Employee Modal -->
        <div class="mobile-modal" id="employee-modal">
            <div class="mobile-modal-content">
                <div class="mobile-modal-header">
                    <h3 class="mobile-modal-title">Pilih Karyawan</h3>
                    <button type="button" class="mobile-modal-close" onclick="closeEmployeeModal()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="mobile-modal-body">
                    <div style="display: flex; gap: 8px; margin-bottom: 12px;">
                        <input type="text" class="mobile-search-input" id="employee-search"
                            placeholder="Cari NIK, Nama, atau Departemen..." style="flex: 1; margin-bottom: 0;">
                        <button type="button" class="mobile-search-btn" id="search-employee-btn"
                            onclick="searchEmployee()">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                    <div id="loading-employee" style="display: none; text-align: center; padding: 20px; color: #6b7280;">
                        <div class="spinner-border spinner-border-sm" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p style="margin-top: 8px; font-size: 0.875rem;">Memuat data...</p>
                    </div>
                    <div id="employee-list"></div>
                    <div id="employee-pagination" style="margin-top: 12px; text-align: center;"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

    <script>
        const mstAturan = @json($mst_aturan);
        const periodeCuti = @json($periodeCuti);
        let tanggalArray = [];
        let tanggalMulaiPicker, tanggalBerakhirPicker;
        let currentPage = 1;

        document.addEventListener('DOMContentLoaded', function() {
            initializeDatePickers();
            initializeImagePreview();

            // Restore old values if validation fails
            const oldJenisCuti = document.getElementById('jenis_cuti_id').value;
            if (oldJenisCuti) {
                updateFieldsDOMContentLoaded(document.getElementById('jenis_cuti_id'));
            }
        });

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

            // Clear all fields
            document.getElementById("nik_karyawan_pengganti").value = "";
            document.getElementById("alasan").value = "";
            document.getElementById("pekerjaan_yang_belum_diselesaikan").value = "";
            document.getElementById("tanggal_mulai").value = "";
            document.getElementById("tanggal_berakhir").value = "";
            document.getElementById("alamat").value = "";
            document.getElementById("nomor_telepon").value = "";
            document.getElementById("lampiran-input").value = "";
            document.getElementById("image-preview").innerHTML = "";
            tanggalArray = [];
            updateDateList();

            if (aturan) {
                document.getElementById("jumlah_cuti").value = aturan.jumlah_cuti;
                document.getElementById("form-fields").style.display = "block";

                // Update aturan display
                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)";

                // Show/hide lampiran based on jenis_cuti_id
                if (selectedID == 2 || selectedID == 20) {
                    document.getElementById("lampiran_group").style.display = "none";
                } else {
                    document.getElementById("lampiran_group").style.display = "block";
                }
            } else {
                document.getElementById("form-fields").style.display = "none";
                document.getElementById("aturanJudul").innerText = "Belum ada aturan untuk jenis cuti ini";
                document.getElementById("aturanIsi").innerText = "-";
                document.getElementById("aturanJumlah").innerText = "-";
            }
        }

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

            if (aturan) {
                document.getElementById("jumlah_cuti").value = aturan.jumlah_cuti;
                document.getElementById("form-fields").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)";

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

        function initializeDatePickers() {
            const tanggalMulaiInput = document.getElementById("tanggal_mulai");
            const tanggalBerakhirInput = document.getElementById("tanggal_berakhir");

            // Build active dates array
            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)) {
                    const tempDate = new Date(d);
                    tempDate.setHours(0, 0, 0, 0);
                    activeDates.push(tempDate.toISOString().split('T')[0]);
                }
            });

            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) {
                        tanggalBerakhirPicker.set("minDate", selectedDates[0]);
                        handleDateChange();
                    }
                }
            });

            tanggalBerakhirPicker = flatpickr(tanggalBerakhirInput, {
                dateFormat: "d/m/Y",
                disable: [
                    function(date) {
                        return false;
                    }
                ],
                onChange: function() {
                    handleDateChange();
                }
            });
        }

        function handleDateChange() {
            const tanggalMulai = document.getElementById('tanggal_mulai').value;
            const tanggalBerakhir = document.getElementById('tanggal_berakhir').value;

            if (tanggalMulai && tanggalBerakhir) {
                const start = formatDateToYYYYMMDD(tanggalMulai);
                const end = formatDateToYYYYMMDD(tanggalBerakhir);

                if (start && end && new Date(start) <= new Date(end)) {
                    tanggalArray = generateDateRange(start, end);
                    updateDateList();
                }
            }
        }

        function formatDateToYYYYMMDD(date) {
            const parts = date.split('/');
            return `${parts[2]}-${parts[1]}-${parts[0]}`;
        }

        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');
            const year = d.getFullYear();
            return `${day}-${month}-${year}`;
        }

        function generateDateRange(start, end) {
            const startDate = new Date(start);
            const endDate = new Date(end);
            const dates = [];
            while (startDate <= endDate) {
                dates.push(formatDateToDDMMYYYY(startDate));
                startDate.setDate(startDate.getDate() + 1);
            }
            return dates;
        }

        function formatTanggal(tanggal) {
            let parts = tanggal.split("-");
            let date = new Date(parts[2], parts[1] - 1, parts[0]);

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

        function updateDateList() {
            const container = document.getElementById('date-list-container');
            const list = document.getElementById('tanggal-list');

            if (tanggalArray.length > 0) {
                container.style.display = 'block';
                list.innerHTML = '';

                tanggalArray.forEach((tanggal) => {
                    const formattedDate = formatTanggal(tanggal);
                    const dateItem = document.createElement('div');
                    dateItem.className = 'mobile-date-item';
                    dateItem.innerHTML = `
                        <div class="mobile-date-info">
                            <div class="day">${formattedDate.split(',')[0]}</div>
                            <div class="date">${formattedDate.split(',')[1]}</div>
                        </div>
                        <button type="button" class="btn btn-sm btn-danger" onclick="removeDateByValue('${tanggal}')">
                            <i class="fas fa-trash"></i>
                        </button>
                    `;
                    list.appendChild(dateItem);
                });
            } else {
                container.style.display = 'none';
            }

            document.getElementById('tanggal_array').value = JSON.stringify(tanggalArray);
        }

        function removeDateByValue(dateValue) {
            const index = tanggalArray.indexOf(dateValue);
            if (index > -1) {
                tanggalArray.splice(index, 1);
                updateDateList();
            }
        }

        function removeDate(index) {
            tanggalArray.splice(index, 1);
            updateDateList();
        }

        // Employee Modal Functions
        function openEmployeeModal() {
            document.getElementById('employee-modal').classList.add('show');
            currentPage = 1;
            fetchEmployees(currentPage);
        }

        function closeEmployeeModal() {
            document.getElementById('employee-modal').classList.remove('show');
            document.getElementById('employee-search').value = '';
        }

        function searchEmployee() {
            currentPage = 1;
            fetchEmployees(currentPage);
        }

        function fetchEmployees(page) {
            const searchTerm = document.getElementById('employee-search').value;
            const loadingEl = document.getElementById('loading-employee');
            const listEl = document.getElementById('employee-list');
            const paginationEl = document.getElementById('employee-pagination');
            const searchBtn = document.getElementById('search-employee-btn');

            // Show loading
            loadingEl.style.display = 'block';
            listEl.style.display = 'none';
            paginationEl.style.display = 'none';
            searchBtn.disabled = true;

            $.ajax({
                url: "{{ url($url_menu) . '/ajax/filter' }}?page=" + page,
                method: 'GET',
                data: {
                    search: searchTerm
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    renderEmployeeList(response.data.table_result.data);
                    renderPagination(response.data.table_result);
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    listEl.innerHTML =
                        '<div style="padding: 20px; text-align: center; color: #dc2626;">Terjadi kesalahan saat memuat data</div>';
                    listEl.style.display = 'block';
                },
                complete: function() {
                    loadingEl.style.display = 'none';
                    listEl.style.display = 'block';
                    searchBtn.disabled = false;
                }
            });
        }

        function renderEmployeeList(employees) {
            const list = document.getElementById('employee-list');
            list.innerHTML = '';

            if (!Array.isArray(employees) || employees.length === 0) {
                list.innerHTML =
                    '<div style="padding: 20px; text-align: center; color: #6b7280;">Tidak ada data karyawan</div>';
                return;
            }

            employees.forEach(emp => {
                const item = document.createElement('div');
                item.className = 'mobile-employee-item';
                item.innerHTML = `
                    <div class="mobile-employee-nik">${emp.nik}</div>
                    <div class="mobile-employee-name">${emp.nama}</div>
                    <div class="mobile-employee-dept">${emp.departemen}</div>
                `;
                item.onclick = () => selectEmployee(emp.nik);
                list.appendChild(item);
            });
        }

        function renderPagination(paginationData) {
            const paginationEl = document.getElementById('employee-pagination');

            if (!paginationData || paginationData.last_page <= 1) {
                paginationEl.style.display = 'none';
                return;
            }

            paginationEl.style.display = 'block';
            let html = '<div style="display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;">';

            // Previous button
            if (paginationData.current_page > 1) {
                html += `<button type="button" class="btn btn-sm btn-secondary" onclick="fetchEmployees(${paginationData.current_page - 1})">
                    <i class="fas fa-chevron-left"></i>
                </button>`;
            }

            // Page numbers
            const startPage = Math.max(1, paginationData.current_page - 2);
            const endPage = Math.min(paginationData.last_page, paginationData.current_page + 2);

            for (let i = startPage; i <= endPage; i++) {
                const btnClass = i === paginationData.current_page ? 'btn-primary' : 'btn-secondary';
                html += `<button type="button" class="btn btn-sm ${btnClass}" onclick="fetchEmployees(${i})">${i}</button>`;
            }

            // Next button
            if (paginationData.current_page < paginationData.last_page) {
                html +=
                    `<button type="button" class="btn btn-sm btn-secondary" onclick="fetchEmployees(${paginationData.current_page + 1})">
                    <i class="fas fa-chevron-right"></i>
                </button>`;
            }

            html += '</div>';
            html += `<p style="margin-top: 8px; font-size: 0.875rem; color: #6b7280;">
                Halaman ${paginationData.current_page} dari ${paginationData.last_page} 
                (Total: ${paginationData.total} karyawan)
            </p>`;

            paginationEl.innerHTML = html;
        }

        function selectEmployee(nik) {
            document.getElementById('nik_karyawan_pengganti').value = nik;
            closeEmployeeModal();
        }

        // Employee Search on Enter key
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('employee-search');
            if (searchInput) {
                searchInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        searchEmployee();
                    }
                });
            }
        });

        // Image Preview
        function initializeImagePreview() {
            const input = document.getElementById('lampiran-input');
            if (input) {
                input.addEventListener('change', function(e) {
                    const preview = document.getElementById('image-preview');
                    preview.innerHTML = '';

                    Array.from(e.target.files).forEach((file, index) => {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            // Create image to get actual dimensions
                            const img = new Image();
                            img.onload = function() {
                                const item = document.createElement('div');
                                item.className = 'mobile-image-item';
                                item.innerHTML = `
                                    <a href="${e.target.result}" 
                                       data-pswp-width="${img.width}" 
                                       data-pswp-height="${img.height}"
                                       target="_blank">
                                        <img src="${e.target.result}" alt="Preview">
                                    </a>
                                    <button type="button" class="mobile-image-remove" onclick="removeImage(${index})">
                                        <i class="fas fa-times"></i>
                                    </button>
                                `;
                                preview.appendChild(item);
                            };
                            img.src = e.target.result;
                        };
                        reader.readAsDataURL(file);
                    });

                    // Reinitialize PhotoSwipe for new images
                    setTimeout(initPhotoSwipe, 100);
                });
            }
        }

        // Initialize PhotoSwipe
        function initPhotoSwipe() {
            const lightbox = new PhotoSwipeLightbox({
                gallery: '#image-preview',
                children: 'a',
                pswpModule: PhotoSwipe
            });
            lightbox.init();
        }

        function removeImage(index) {
            const input = document.getElementById('lampiran-input');
            const dt = new DataTransfer();
            const files = input.files;

            for (let i = 0; i < files.length; i++) {
                if (i !== index) dt.items.add(files[i]);
            }

            input.files = dt.files;
            input.dispatchEvent(new Event('change'));
        }

        // Form Submit Handler
        document.getElementById('cuti-form').addEventListener('submit', function(e) {
            const submitButton = document.getElementById('submit-button');
            submitButton.disabled = true;
            submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Mengirim...';
        });
    </script>
@endpush