@extends('layouts.mobile', ['title' => 'Edit 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-card-footer {
                background: #f9fafb;
                padding: 12px 16px;
                border-top: 1px solid #e5e7eb;
                font-size: 0.875rem;
            }

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

            .mobile-warning-box {
                background: #fef3c7;
                border-left: 4px solid #f59e0b;
                padding: 12px;
                border-radius: 8px;
                margin-bottom: 16px;
                color: #92400e;
            }

            .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-form-control:disabled,
            .mobile-select:disabled {
                background: #f3f4f6;
                color: #6b7280;
                cursor: not-allowed;
            }

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

            .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-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;
                z-index: 10;
            }

            .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;
                margin-top: 16px;
                display: flex;
                gap: 12px;
            }

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

            /* DataTables Mobile Styling */
            .dataTables_wrapper {
                font-size: 14px;
            }

            .dataTables_wrapper input,
            .dataTables_wrapper select {
                padding: 8px;
                font-size: 14px;
                border: 1px solid #ddd;
                border-radius: 6px;
            }

            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter {
                margin-bottom: 12px;
            }

            .dataTables_wrapper .dataTables_paginate {
                margin-top: 12px;
            }

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

            .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
                background: #f8f9fa;
            }

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

            .dataTables_wrapper table.dataTable thead th {
                background: #028284;
                color: white;
                padding: 12px 8px;
                font-weight: 600;
            }

            .dataTables_wrapper table.dataTable tbody td {
                padding: 10px 8px;
            }

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

            .mobile-locked-dates {
                background: #fef3c7;
                padding: 12px;
                border-radius: 8px;
                margin-top: 12px;
            }

            .mobile-locked-dates .title {
                font-weight: 600;
                color: #92400e;
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                gap: 8px;
            }

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

        <!-- Edit Limit Warning -->
        @php
            $jumlahMaksimalEdit = 3;
            $sisaEdit = $jumlahMaksimalEdit - $permohonanCuti->jumlah_edit_oleh_pengguna;
        @endphp

        <div class="mobile-card">
            <div class="mobile-card-body">
                <div class="mobile-warning-box">
                    <div style="display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px;">
                        <i class="fas fa-info-circle"></i>
                        Status Pengeditan
                    </div>
                    @if ($sisaEdit > 0)
                        <p style="margin: 0;">Sisa kesempatan edit: <strong>{{ $sisaEdit }} kali</strong></p>
                    @else
                        <p style="margin: 0; color: #dc2626;"><strong>Kesempatan edit telah habis</strong></p>
                        <p style="margin: 4px 0 0 0; font-size: 0.85rem;">Hubungi personalia untuk perubahan lebih lanjut
                        </p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Form Edit Cuti -->
        <form method="POST" action="{{ route('permohonan.cuti.update') }}" id="cuti-form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="idencrypt" value="{{ $id }}">
            <input type="hidden" name="idcuti" value="{{ $permohonanCuti->idcuti }}">

            <!-- Jenis Cuti (Disabled) -->
            <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
                        </label>
                        <select id="jenis_cuti_id" class="mobile-select" disabled>
                            <option value="">Pilih Jenis Cuti</option>
                            @foreach ($jenisCuti as $cuti)
                                <option value="{{ $cuti->id }}"
                                    {{ $cuti->id == $permohonanCuti->jenis_cuti_id ? 'selected' : '' }}>
                                    {{ $cuti->nama }}
                                </option>
                            @endforeach
                        </select>
                        <div class="mobile-hint">
                            <i class="fas fa-lock"></i> Tidak dapat diubah. Hubungi personalia untuk mengubah jenis cuti
                        </div>
                    </div>
                </div>
            </div>

            <!-- Karyawan Pengganti -->
            <div class="mobile-card">
                <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', $permohonanCuti->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">
                <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', $permohonanCuti->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', $permohonanCuti->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 (Locked) -->
            <div class="mobile-card">
                <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
                        </label>
                        <input type="text" id="tanggal_mulai" name="tanggal_mulai" class="mobile-form-control"
                            value="{{ \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_mulai)->format('d/m/Y') }}"
                            disabled>
                    </div>

                    <div class="mobile-form-group">
                        <label for="tanggal_berakhir" class="mobile-form-label">
                            Tanggal Berakhir
                        </label>
                        <input type="text" id="tanggal_berakhir" name="tanggal_berakhir" class="mobile-form-control"
                            value="{{ \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_berakhir)->format('d/m/Y') }}"
                            disabled>
                    </div>

                    <div class="mobile-locked-dates">
                        <div class="title">
                            <i class="fas fa-lock"></i> Daftar Tanggal (Terkunci)
                        </div>
                        <div style="overflow-x: auto;">
                            <table class="table table-bordered table-striped" id="tanggal-table" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th style="width: 70%;">Tanggal</th>
                                        <th style="width: 30%; text-align: center;">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($permohonanCuti->tanggal_array as $index => $tanggal)
                                        @php
                                            $carbonDate = \Carbon\Carbon::createFromFormat(
                                                'Y-m-d',
                                                $tanggal->tanggal_cuti,
                                            );
                                            $tanggalFormatted = $carbonDate->isoFormat('dddd, D MMMM YYYY');
                                        @endphp
                                        <tr>
                                            <td data-sort="{{ $tanggal->tanggal_cuti }}">{{ $tanggalFormatted }}</td>
                                            <td style="text-align: center;">
                                                <button type="button" class="btn btn-sm btn-secondary" disabled
                                                    style="opacity: 0.6;">
                                                    <i class="fas fa-lock"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="mobile-hint" style="margin-top: 8px;">
                            <i class="fas fa-info-circle"></i> Hubungi personalia untuk mengubah tanggal
                        </div>
                    </div>
                </div>
            </div>

            <!-- Alamat & Nomor Telepon -->
            <div class="mobile-card">
                <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', $permohonanCuti->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', $permohonanCuti->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 -->
            @if ($permohonanCuti->jenis_cuti_id != 2 && $permohonanCuti->jenis_cuti_id != 20)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <i class="fas fa-paperclip"></i>
                        Lampiran
                    </div>
                    <div class="mobile-card-body">
                        @if (!$lampiran->isEmpty())
                            <label class="mobile-form-label">Lampiran Saat Ini:</label>
                            <div class="mobile-image-preview" id="existing-image-preview">
                                @foreach ($lampiran as $item)
                                    <div class="mobile-image-item">
                                        <a href="{{ asset('storage/' . $item->gambar_lampiran) }}" data-pswp-width="auto"
                                            data-pswp-height="auto" target="_blank">
                                            <img src="{{ asset('storage/' . $item->gambar_lampiran) }}" alt="Lampiran"
                                                data-image-url="{{ asset('storage/' . $item->gambar_lampiran) }}">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Tidak ada lampiran sebelumnya.</p>
                        @endif

                        <div class="mobile-form-group" style="margin-top: 16px;">
                            <label for="lampiran-input" class="mobile-form-label">
                                Ganti dengan Lampiran Baru
                            </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. Upload file baru akan
                                menggantikan lampiran lama.</div>
                            @error('lampiran.*')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="mobile-image-preview" id="new-image-preview"></div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- 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>
                @if ($sisaEdit > 0)
                    <button type="submit" class="mobile-btn mobile-btn-primary" id="submit-button">
                        <i class="fas fa-save"></i> Simpan
                    </button>
                @else
                    <button type="button" class="mobile-btn mobile-btn-primary" disabled>
                        <i class="fas fa-lock"></i> Edit Terkunci
                    </button>
                @endif
            </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 tanggalArray = @json($permohonanCuti->tanggal_array);
        let currentPage = 1;

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

        // Initialize DataTable for date list
        function initializeDataTable() {
            if ($.fn.DataTable.isDataTable('#tanggal-table')) {
                $('#tanggal-table').DataTable().destroy();
            }

            $('#tanggal-table').DataTable({
                responsive: true,
                pageLength: 10,
                lengthMenu: [
                    [5, 10, 25, 50, -1],
                    [5, 10, 25, 50, "Semua"]
                ],
                language: {
                    lengthMenu: "Tampilkan _MENU_ data per halaman",
                    zeroRecords: "Tidak ada data",
                    info: "Menampilkan halaman _PAGE_ dari _PAGES_",
                    infoEmpty: "Tidak ada data tersedia",
                    infoFiltered: "(difilter dari _MAX_ total data)",
                    search: "Cari:",
                    paginate: {
                        first: "Pertama",
                        last: "Terakhir",
                        next: "Berikutnya",
                        previous: "Sebelumnya"
                    }
                },
                order: [
                    [0, 'asc']
                ]
            });
        }

        // Format date display (no longer needed since we format in Blade)
        function formatDateDisplay() {
            // Dates are now formatted server-side
        }

        // 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 for new uploads
        function initializeImagePreview() {
            const input = document.getElementById('lampiran-input');
            if (input) {
                input.addEventListener('change', function(e) {
                    const preview = document.getElementById('new-image-preview');
                    preview.innerHTML = '';

                    if (e.target.files.length > 0) {
                        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);
                        });

                        // Initialize PhotoSwipe after images are added
                        setTimeout(initPhotoSwipe, 100);
                    }
                });
            }
        }

        // Remove image from new uploads
        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'));
        }

        // Load actual dimensions for existing images
        function loadExistingImageDimensions() {
            const existingImages = document.querySelectorAll('#existing-image-preview img[data-image-url]');
            existingImages.forEach(img => {
                const link = img.closest('a');
                if (link) {
                    // Create a temporary image to get dimensions
                    const tempImg = new Image();
                    tempImg.onload = function() {
                        link.setAttribute('data-pswp-width', tempImg.width);
                        link.setAttribute('data-pswp-height', tempImg.height);
                    };
                    tempImg.src = img.getAttribute('data-image-url');
                }
            });
        }

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

        // Initialize PhotoSwipe on page load for existing images
        document.addEventListener('DOMContentLoaded', function() {
            loadExistingImageDimensions();
            setTimeout(initPhotoSwipe, 500); // Wait for dimensions to load
        });

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