@extends('layouts.mobile', ['title' => 'Pengajuan Izin/Tugas'])

@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-warning-box {
                background: #fee2e2;
                border-left: 4px solid #dc2626;
                padding: 12px;
                border-radius: 8px;
                margin-bottom: 16px;
                color: #dc2626;
            }

            .mobile-warning-box strong {
                display: block;
                margin-bottom: 4px;
            }

            .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-color: #f9fafb;
                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;
            }

            .required-mark {
                color: #dc3545;
            }

            .mobile-section-title {
                font-size: 0.875rem;
                font-weight: 700;
                color: #344767;
                text-transform: uppercase;
                margin: 1.5rem 0 1rem;
                padding-bottom: 0.5rem;
                border-bottom: 2px solid #028284;
            }

            .date-list-container {
                margin-top: 1rem;
            }

            .selected-employees-container {
                margin-top: 1rem;
            }

            .employee-badge {
                display: inline-flex;
                align-items: center;
                padding: 0.375rem 0.5rem;
                margin: 0.25rem;
                background-color: #e3f2fd;
                border: 1px solid #90caf9;
                border-radius: 0.25rem;
                font-size: 0.75rem;
            }

            .employee-badge button {
                margin-left: 0.5rem;
                padding: 0;
                border: none;
                background: none;
                color: #d32f2f;
                font-size: 1rem;
                cursor: pointer;
                line-height: 1;
            }

            .employee-badge button:hover {
                color: #b71c1c;
            }

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

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

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

            .lampiran-preview-item button {
                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-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;
            }

            .btn-action-table {
                padding: 0.25rem 0.5rem;
                font-size: 0.75rem;
            }

            /* Desktop Link */
            .mobile-desktop-link {
                display: block;
                background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
                border: 2px solid #ff9800;
                border-radius: 12px;
                padding: 16px;
                margin-bottom: 16px;
                text-decoration: none;
                color: inherit;
                transition: all 0.3s ease;
            }

            .mobile-desktop-link:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
            }

            .mobile-desktop-link-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .mobile-desktop-link-title {
                font-weight: 600;
                color: #ff9800;
                font-size: 1rem;
            }

            .mobile-desktop-link-desc {
                font-size: 0.85rem;
                color: #f57c00;
                margin-top: 4px;
            }

            .mobile-desktop-link-icon {
                font-size: 1.5rem;
                color: #ff9800;
            }

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

                .mobile-btn {
                    font-size: 0.9rem;
                    padding: 10px 20px;
                }
            }

            /* Flatpickr mobile: keep input full width and calendar inside viewport */
            #jam_keluar,
            #jam_masuk,
            #jam_keluar + .flatpickr-input,
            #jam_masuk + .flatpickr-input {
                width: 100% !important;
                max-width: 100% !important;
            }

            .flatpickr-calendar {
                max-width: calc(100vw - 24px);
            }

            /* SweetAlert2 Custom Styling */
            .swal-wide {
                width: 90% !important;
                max-width: 500px !important;
            }

            .btn-confirm-desktop,
            .btn-cancel-desktop {
                font-weight: 600 !important;
                padding: 10px 20px !important;
                min-width: 120px !important;
            }

            /* Custom Modal Tujuan Surat Styling (Non-Bootstrap) */

            /* Modal Backdrop */
            .custom-modal-backdrop {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 9998;
                animation: fadeIn 0.3s ease;
            }

            .custom-modal-backdrop.show {
                display: block;
            }

            /* Modal Container */
            .custom-modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 9999;
                overflow-y: auto;
                padding: 20px;
            }

            .custom-modal.show {
                display: flex;
                align-items: center;
                justify-content: center;
                animation: fadeIn 0.3s ease;
            }

            .custom-modal-dialog {
                width: 100%;
                max-width: 500px;
                margin: auto;
                animation: slideDown 0.3s ease;
            }

            .custom-modal-content {
                background: white;
                border-radius: 12px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                overflow: hidden;
            }

            .custom-modal-header {
                background: linear-gradient(135deg, #028284 0%, #026668 100%);
                color: white;
                padding: 16px;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .custom-modal-title {
                margin: 0;
                font-size: 1rem;
                font-weight: 600;
                flex: 1;
            }

            .custom-modal-body {
                padding: 20px;
                max-height: 60vh;
                overflow-y: auto;
            }

            .custom-modal-footer {
                padding: 16px;
                border-top: 1px solid #e5e7eb;
                display: flex;
                justify-content: flex-end;
            }

            /* Form Check Styling inside Custom Modal */
            .custom-modal .form-check {
                padding: 12px 16px;
                margin-bottom: 12px;
                border: 2px solid #e5e7eb;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
            }

            .custom-modal .form-check:hover {
                background-color: #f0f9ff;
                border-color: #028284;
            }

            .custom-modal .form-check-input {
                width: 20px;
                height: 20px;
                margin: 0;
                cursor: pointer;
                border: 2px solid #028284;
                flex-shrink: 0;
            }

            .custom-modal .form-check-input:checked {
                background-color: #028284;
                border-color: #028284;
            }

            .custom-modal .form-check-label {
                cursor: pointer;
                margin-left: 12px;
                font-size: 0.95rem;
                font-weight: 500;
                flex: 1;
            }

            .custom-modal .form-check:has(.form-check-input:checked) {
                background-color: #e0f2f1;
                border-color: #028284;
            }

            .custom-modal .alert {
                margin-bottom: 0;
                border-radius: 8px;
            }

            /* Animations */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                }

                to {
                    opacity: 1;
                }
            }

            @keyframes slideDown {
                from {
                    transform: translateY(-50px);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            /* Prevent body scroll when modal is open */
            body.custom-modal-open {
                overflow: hidden;
            }
        </style>
    @endpush

    <div class="mobile-container">
        <!-- Error Display -->
        @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

        <!-- Desktop Mode Link -->
        <a href="javascript:void(0);" onclick="showDesktopModeConfirmation(this)"
            data-desktop-url="{{ url($url_menu . '/add?force_desktop=1') }}" class="mobile-desktop-link">
            <div class="mobile-desktop-link-content">
                <div>
                    <div class="mobile-desktop-link-title">
                        <i class="fas fa-desktop"></i> Beralih ke Mode Desktop
                    </div>
                    <div class="mobile-desktop-link-desc">
                        Untuk fitur lengkap dan pengajuan Surat Tugas
                    </div>
                </div>
                <div class="mobile-desktop-link-icon">
                    <i class="fas fa-arrow-right"></i>
                </div>
            </div>
        </a>

        <!-- Form -->
        <form method="POST" action="{{ route('permohonan.perizinan.store') }}" enctype="multipart/form-data"
            id="form-perizinan-mobile">
            @csrf

            {{-- Hidden input jenis_penugasan --}}
            <input type="hidden" name="jenis_penugasan" value="pribadi">

            <!-- Kategori Izin/Tugas -->
            <div class="mobile-card">
                <div class="mobile-card-header">
                    <i class="fas fa-list"></i> Kategori Permohonan
                </div>
                <div class="mobile-card-body">
                    <div class="mobile-form-group">
                        <label class="mobile-form-label">
                            Pilih Kategori <span class="required-mark">*</span>
                        </label>
                        <select name="kategori_perizinan_id" id="kategori_perizinan_id"
                            class="mobile-select @error('kategori_perizinan_id') is-invalid @enderror" required>
                            <option value="">-- Pilih Kategori --</option>
                            @foreach ($kategoriPerizinan as $perizinan)
                                {{-- Only show Izin (kategori_perizinan_id == 1) for mobile --}}
                                @if ($perizinan->id == 1)
                                    <option value="{{ $perizinan->id }}"
                                        {{ old('kategori_perizinan_id') == $perizinan->id ? 'selected' : '' }}>
                                        {{ $perizinan->nama }}
                                    </option>
                                @endif
                                </option>
                            @endforeach
                        </select>
                        @error('kategori_perizinan_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Form Izin Container -->
            <div id="form-izin-container" style="display: none;">
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <i class="fas fa-clipboard-list"></i> Formulir Izin
                    </div>
                    <div class="mobile-card-body">
                        <!-- Jenis Izin -->
                        <div class="mobile-form-group">
                            <label class="mobile-form-label">
                                Jenis Izin <span class="required-mark">*</span>
                            </label>
                            <select name="jenis_izin_id" id="jenis_izin_id"
                                class="mobile-select @error('jenis_izin_id') is-invalid @enderror">
                                <option value="">-- Pilih Jenis Izin --</option>
                                @foreach ($jenisIzin as $izin)
                                    <option value="{{ $izin->id }}"
                                        {{ old('jenis_izin_id') == $izin->id ? 'selected' : '' }}>
                                        {{ $izin->nama }}
                                    </option>
                                @endforeach
                            </select>
                            @error('jenis_izin_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Jenis Waktu Kerja (Non Shift / Shift) -->
                        <div class="mobile-form-group" id="shift_selection_group" style="display: none;">
                            <label class="mobile-form-label">Jenis Waktu Kerja <span class="required-mark">*</span></label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="is_shift" id="non_shift"
                                        value="0" {{ old('is_shift', '0') == '0' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="non_shift">Non Shift</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="is_shift" id="shift"
                                        value="1" {{ old('is_shift') == '1' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="shift">Shift</label>
                                </div>
                            </div>
                            <small class="mobile-hint">Pilih jenis waktu kerja untuk permohonan ini</small>
                            @error('is_shift')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Alasan -->
                        <div class="mobile-form-group" id="alasan_group" style="display: none;">
                            <label class="mobile-form-label">Alasan/Deskripsi</label>
                            <textarea name="alasan" id="alasan" rows="3" class="mobile-form-control @error('alasan') is-invalid @enderror"
                                placeholder="Contoh: Ada keperluan mendadak di rumah">{{ old('alasan') }}</textarea>
                            @error('alasan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Jam Keluar -->
                        <div class="mobile-form-group" id="jam_keluar_group" style="display: none;">
                            <label class="mobile-form-label" id="jam_keluar_label">
                                Jam Keluar <span class="required-mark">*</span>
                            </label>
                            <input type="text" name="jam_keluar" id="jam_keluar"
                                class="mobile-form-control @error('jam_keluar') is-invalid @enderror"
                                placeholder="Pilih Tanggal & Waktu" value="{{ old('jam_keluar') }}">
                            @error('jam_keluar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Jam Masuk -->
                        <div class="mobile-form-group" id="jam_masuk_group" style="display: none;">
                            <label class="mobile-form-label" id="jam_masuk_label">
                                Jam Masuk <span class="required-mark">*</span>
                            </label>
                            <input type="text" name="jam_masuk" id="jam_masuk"
                                class="mobile-form-control @error('jam_masuk') is-invalid @enderror"
                                placeholder="Pilih Tanggal & Waktu" value="{{ old('jam_masuk') }}">
                            @error('jam_masuk')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Date List Table -->
                        <div class="date-list-container" id="table-tanggal-container" style="display: none;">
                            <label class="mobile-form-label">Daftar Tanggal Izin</label>
                            <table id="table-tanggal" class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Tanggal</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="table-tanggal-body"></tbody>
                            </table>
                        </div>

                        <!-- Karyawan untuk Izin Dinas -->
                        <div class="mobile-form-group" id="izin_dinas_karyawan_group" style="display: none;">
                            <label class="mobile-form-label">
                                Pilih Karyawan (termasuk anda) <span class="required-mark">*</span>
                            </label>
                            <button type="button" class="mobile-btn mobile-btn-primary mobile-btn-block"
                                id="btn-select-izin-employee">
                                <i class="fas fa-users"></i> Pilih Karyawan
                            </button>
                            <div id="izin-selected-employees-container" class="selected-employees-container"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Lampiran -->
            <div class="mobile-card" id="lampiran_group" style="display: none;">
                <div class="mobile-card-header">
                    <i class="fas fa-paperclip"></i> Lampiran
                </div>
                <div class="mobile-card-body">
                    <div class="mobile-form-group">
                        <label class="mobile-form-label">Upload Lampiran</label>
                        <input type="file" name="lampiran[]" id="lampiran"
                            class="mobile-form-control @error('lampiran.*') is-invalid @enderror" multiple
                            accept="image/*,.pdf">
                        <small class="mobile-hint">Format: JPG, PNG, PDF (Maks. 2MB per file)</small>
                        @error('lampiran.*')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div id="lampiran-preview" class="lampiran-preview"></div>
                    </div>
                </div>
            </div>

            <!-- Hidden inputs for form submission -->
            <input type="hidden" name="tanggal_array" id="tanggal_array" value="{{ old('tanggal_array') }}">
            <input type="hidden" name="tujuan_surat_user_id" id="tujuan_surat_user_id"
                value="{{ old('tujuan_surat_user_id') }}">

            <!-- 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 mobile-btn-block" id="btn-submit">
                    <i class="fas fa-paper-plane"></i> Kirim
                </button>
            </div>
        </form>

        <!-- Custom Modal Backdrop -->
        <div class="custom-modal-backdrop" id="customModalBackdrop"></div>

        <!-- Custom Modal untuk Pemilihan Tujuan Surat (Atasan) -->
        <div class="custom-modal" id="tujuanSuratModalMobile">
            <div class="custom-modal-dialog">
                <div class="custom-modal-content">
                    <div class="custom-modal-header">
                        <h5 class="custom-modal-title text-white">
                            <i class="fas fa-user-tie"></i> Pilih Atasan untuk Menyetujui Surat
                        </h5>
                    </div>
                    <div class="custom-modal-body">
                        <div id="tujuanSuratContentMobile">
                            <!-- Content will be dynamically generated -->
                        </div>
                    </div>
                    <div class="custom-modal-footer">
                        <button type="button" class="mobile-btn mobile-btn-primary" id="btnConfirmTujuanSuratMobile">
                            <i class="fas fa-check"></i> Lanjutkan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @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>
            // Fungsi untuk menampilkan popup konfirmasi mode desktop
            function showDesktopModeConfirmation(element) {
                const desktopUrl = element.getAttribute('data-desktop-url');

                Swal.fire({
                    title: '<i class="fas fa-exclamation-triangle" style="color: #ff9800;"></i> Perhatian',
                    html: `
                        <div style="text-align: left; padding: 0 20px;">
                            <div style="background: #fff3cd; border-left: 4px solid #ff9800; padding: 12px; border-radius: 8px; margin-bottom: 15px;">
                                <p style="margin: 0; color: #856404;">
                                    Mode mobile <strong>HANYA</strong> untuk pengajuan <strong>Izin</strong>.
                                </p>
                            </div>
                            <p style="margin-bottom: 15px;"><strong>Mode Desktop</strong> memberikan fitur lengkap:</p>
                            <ul style="margin: 0; padding-left: 20px;">
                                <li>Pengajuan <strong>Surat Tugas</strong> (dengan/tanpa anggaran)</li>
                                <li>Pengajuan <strong>Izin</strong> dengan fitur lengkap</li>
                                <li>Tampilan form yang lebih detail dan komprehensif</li>
                            </ul>
                            <p style="margin-top: 15px; color: #666; font-size: 0.9rem;">
                                <i class="fas fa-desktop"></i> Gunakan PC/Laptop untuk mengakses mode desktop
                            </p>
                        </div>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ff9800',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: '<i class="fas fa-external-link-alt"></i> Buka Desktop',
                    cancelButtonText: '<i class="fas fa-times"></i> Tetap di Mobile',
                    customClass: {
                        popup: 'swal-wide',
                        confirmButton: 'btn-confirm-desktop',
                        cancelButton: 'btn-cancel-desktop'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Redirect to desktop version
                        window.location.href = desktopUrl;
                    }
                });
            }

            $(document).ready(function() {
                // Data from controller
                const profiles = @json($profiles);
                const currentUserNIK = @json($currentUserNIK ?? null);
                let selectedEmployees = [];
                let tanggalTableInstance;
                let fpJamKeluar, fpJamMasuk;

                // Periode Izin Tugas
                const periodeIzinTugas = @json($periodeIzinTugas);
                const enabledDates = periodeIzinTugas.map(p => ({
                    from: p.mulai,
                    to: p.berakhir
                }));

                // Data atasan dari backend
                const atasanList = @json($atasan ?? []);

                // Auto-select current user when needed
                function ensureCurrentUserSelected() {
                    if (!currentUserNIK) return;

                    const currentUser = profiles.find(p => p.nik === currentUserNIK);
                    if (!currentUser) return;

                    // Add current user if not already in list
                    if (!selectedEmployees.some(e => e.nik === currentUserNIK)) {
                        selectedEmployees.push({
                            nik: currentUser.nik,
                            nama: currentUser.nama,
                            departemen: currentUser.departemen || 'N/A'
                        });
                    }
                }

                // Initialize DataTables for date list
                function initTanggalTable() {
                    if (tanggalTableInstance) {
                        tanggalTableInstance.destroy();
                    }

                    tanggalTableInstance = $('#table-tanggal').DataTable({
                        data: [],
                        columns: [{
                                data: null,
                                render: (data, type, row, meta) => meta.row + 1
                            },
                            {
                                data: 'tanggal'
                            },
                            {
                                data: null,
                                render: (data) => `<button type="button" class="btn btn-danger btn-action-table" onclick="removeTanggal('${data.tanggal}')">
                        <i class="fas fa-trash"></i>
                    </button>`
                            }
                        ],
                        pageLength: 5,
                        lengthChange: false,
                        ordering: false,
                        language: {
                            emptyTable: "Belum ada tanggal dipilih",
                            info: "Menampilkan _START_ - _END_ dari _TOTAL_ tanggal",
                            infoEmpty: "Tidak ada data",
                            paginate: {
                                first: "Pertama",
                                last: "Terakhir",
                                next: "Selanjutnya",
                                previous: "Sebelumnya"
                            }
                        }
                    });
                }

                // Update tanggal table
                function updateTanggalTable(datesArray) {
                    const tableData = datesArray.map(d => ({
                        tanggal: d
                    }));
                    tanggalTableInstance.clear().rows.add(tableData).draw();

                    // Update hidden input with JSON array
                    $('#tanggal_array').val(JSON.stringify(datesArray));
                }

                // Remove tanggal
                window.removeTanggal = function(dateToRemove) {
                    const data = tanggalTableInstance.rows().data().toArray();
                    const filtered = data.filter(d => d.tanggal !== dateToRemove);
                    updateTanggalTable(filtered.map(d => d.tanggal));
                };

                // Generate date range
                function generateDateRange(start, end) {
                    const dates = [];
                    const current = new Date(start);
                    const endDate = new Date(end);

                    while (current <= endDate) {
                        const day = String(current.getDate()).padStart(2, '0');
                        const month = String(current.getMonth() + 1).padStart(2, '0');
                        const year = current.getFullYear();
                        dates.push(`${day}-${month}-${year}`);
                        current.setDate(current.getDate() + 1);
                    }

                    return dates;
                }

                // Handle date time change
                function handleDateTimeChange() {
                    if (!fpJamKeluar || !fpJamMasuk) return;

                    const jamKeluar = fpJamKeluar.selectedDates[0];
                    const jamMasuk = fpJamMasuk.selectedDates[0];

                    if (jamKeluar && jamMasuk) {
                        // Generate dates even if start and end are the same day
                        const dates = generateDateRange(jamKeluar, jamMasuk);
                        updateTanggalTable(dates);
                    } else if (jamKeluar) {
                        // If only start date selected, show that single date
                        const dates = generateDateRange(jamKeluar, jamKeluar);
                        updateTanggalTable(dates);
                    }
                }

                // Apply date constraints for Izin category (max 1 day / 9 hours)
                function applyIzinDateConstraints() {
                    if (!fpJamKeluar || !fpJamMasuk) return;

                    const startDate = fpJamKeluar.selectedDates[0];
                    const kategoriId = $('#kategori_perizinan_id').val();
                    const jenisIzinId = $('#jenis_izin_id').val();

                    // Set minDate for jam_masuk based on jam_keluar
                    fpJamMasuk.set('minDate', startDate || null);

                    // For kategori Izin (1) with selected jenis izin, limit to max 9 hours
                    if (startDate && kategoriId === '1' && jenisIzinId) {
                        const maxDate = new Date(startDate.getTime());
                        maxDate.setHours(maxDate.getHours() + 9);
                        fpJamMasuk.set('maxDate', maxDate);

                        // If current selection exceeds maxDate, clear it
                        const selectedJamMasuk = fpJamMasuk.selectedDates[0];
                        if (selectedJamMasuk && selectedJamMasuk > maxDate) {
                            fpJamMasuk.clear();
                        }
                    } else {
                        // Remove maxDate constraint for other categories
                        fpJamMasuk.set('maxDate', null);
                    }
                }

                // Validate Jam Masuk > Jam Keluar
                function validateJamMasukKeluarOrder() {
                    if (!fpJamKeluar || !fpJamMasuk) return true;

                    const jamKeluar = fpJamKeluar.selectedDates[0];
                    const jamMasuk = fpJamMasuk.selectedDates[0];

                    if (jamKeluar && jamMasuk && jamMasuk <= jamKeluar) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Validasi Gagal',
                            text: 'Jam Masuk harus setelah Jam Keluar!',
                            confirmButtonText: 'OK'
                        });
                        fpJamMasuk.clear();
                        return false;
                    }
                    return true;
                }

                // Initialize Flatpickr for Izin
                function initIzinPickers() {
                    fpJamKeluar = flatpickr('#jam_keluar', {
                        enableTime: true,
                        dateFormat: 'd-m-Y H:i',
                        time_24hr: true,
                        appendTo: document.getElementById('jam_keluar_group'),
                        positionElement: document.getElementById('jam_keluar'),
                        position: 'auto center',
                        enable: enabledDates,
                        onChange: function() {
                            applyIzinDateConstraints();
                            validateJamMasukKeluarOrder();
                            handleDateTimeChange();
                        }
                    });

                    fpJamMasuk = flatpickr('#jam_masuk', {
                        enableTime: true,
                        dateFormat: 'd-m-Y H:i',
                        time_24hr: true,
                        appendTo: document.getElementById('jam_masuk_group'),
                        positionElement: document.getElementById('jam_masuk'),
                        position: 'auto center',
                        enable: enabledDates,
                        onChange: function() {
                            validateJamMasukKeluarOrder();
                            handleDateTimeChange();
                        }
                    });
                }

                // ===== EMPLOYEE SELECTION WITH SWEETALERT =====
                // Open employee selection modal (SweetAlert)
                $('#btn-select-izin-employee').on('click', function() {
                    openEmployeeSelectionSwal();
                });

                function openEmployeeSelectionSwal() {
                    // Build HTML with DataTable structure
                    let html = `
                        <div style="max-height: 500px;">
                            <table class="table table-sm table-bordered table-striped" id="swal-employee-table" style="width:100%">
                                <thead>
                                    <tr>
                                        <th width="40">
                                            <input type="checkbox" id="swal-select-all" class="form-check-input">
                                        </th>
                                        <th>NIK</th>
                                        <th>Nama</th>
                                        <th>Dept</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    `;

                    Swal.fire({
                        title: 'Pilih Karyawan',
                        html: html,
                        width: '90%',
                        showCancelButton: true,
                        confirmButtonText: '<i class="fas fa-check"></i> Simpan',
                        cancelButtonText: '<i class="fas fa-times"></i> Batal',
                        customClass: {
                            container: 'swal-employee-modal',
                            confirmButton: 'btn btn-primary btn-sm',
                            cancelButton: 'btn btn-secondary btn-sm'
                        },
                        didOpen: () => {
                            // Initialize DataTable
                            const employeeTable = $('#swal-employee-table').DataTable({
                                data: profiles.map(profile => ({
                                    ...profile,
                                    isChecked: selectedEmployees.some(e => e.nik ===
                                        profile.nik)
                                })),
                                columns: [{
                                        data: null,
                                        orderable: false,
                                        render: function(data, type, row) {
                                            return `<input type="checkbox" class="form-check-input swal-employee-check" ${row.isChecked ? 'checked' : ''}>`;
                                        }
                                    },
                                    {
                                        data: 'nik'
                                    },
                                    {
                                        data: 'nama'
                                    },
                                    {
                                        data: 'departemen',
                                        render: function(data) {
                                            return data || 'N/A';
                                        }
                                    }
                                ],
                                pageLength: 10,
                                lengthMenu: [
                                    [10, 25, 50, -1],
                                    [10, 25, 50, "Semua"]
                                ],
                                language: {
                                    search: "Cari:",
                                    lengthMenu: "Tampilkan _MENU_ data",
                                    info: "Menampilkan _START_ - _END_ dari _TOTAL_ karyawan",
                                    infoEmpty: "Tidak ada data",
                                    infoFiltered: "(difilter dari _MAX_ total karyawan)",
                                    paginate: {
                                        first: "Pertama",
                                        last: "Terakhir",
                                        next: "Selanjutnya",
                                        previous: "Sebelumnya"
                                    },
                                    zeroRecords: "Tidak ada data yang cocok"
                                },
                                order: [
                                    [2, 'asc']
                                ] // Sort by nama
                            });

                            // Select all checkbox
                            $('#swal-select-all').on('change', function() {
                                const checked = this.checked;
                                employeeTable.$('.swal-employee-check').prop('checked', checked);
                            });

                            // Update select all when individual checkbox changes
                            $('#swal-employee-table').on('change', '.swal-employee-check', function() {
                                const total = employeeTable.$('.swal-employee-check').length;
                                const checked = employeeTable.$('.swal-employee-check:checked')
                                    .length;
                                $('#swal-select-all').prop('checked', total > 0 && checked ===
                                    total);
                            });
                        },
                        preConfirm: () => {
                            // Get selected employees
                            const selected = [];
                            const table = $('#swal-employee-table').DataTable();
                            table.rows().every(function() {
                                const row = this.node();
                                const checkbox = $(row).find('.swal-employee-check');
                                if (checkbox.is(':checked')) {
                                    const data = this.data();
                                    selected.push({
                                        nik: data.nik,
                                        nama: data.nama,
                                        departemen: data.departemen || 'N/A'
                                    });
                                }
                            });
                            return selected;
                        },
                        willClose: () => {
                            // Destroy DataTable on close
                            if ($.fn.DataTable.isDataTable('#swal-employee-table')) {
                                $('#swal-employee-table').DataTable().destroy();
                            }
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            selectedEmployees = result.value;
                            updateSelectedEmployeesUI();
                        }
                    });
                }

                // Update selected employees UI
                function updateSelectedEmployeesUI() {
                    // Check if we're in Izin or Tugas context
                    const kategoriId = parseInt($('#kategori_perizinan_id').val());

                    if (kategoriId === 1) {
                        // Izin context
                        updateIzinSelectedEmployeesUI();
                    } else if (kategoriId === 2) {
                        // Tugas context
                        updateTugasSelectedEmployeesUI();
                    }
                }

                // Update selected employees UI for Izin
                function updateIzinSelectedEmployeesUI() {
                    const container = $('#izin-selected-employees-container');
                    container.empty();

                    if (selectedEmployees.length === 0) {
                        container.html(
                            '<p class="text-muted mt-2 mb-0" style="font-size: 0.8125rem;">Belum ada karyawan dipilih</p>'
                        );
                        return;
                    }

                    selectedEmployees.forEach((emp, index) => {
                        // Check if this employee is the current user
                        const isCurrentUser = emp.nik === currentUserNIK;

                        // Don't show remove button for current user
                        const removeButton = isCurrentUser ? '' : `
                            <button type="button" onclick="removeEmployeeByIndex(${index})" title="Hapus karyawan">
                                <i class="fas fa-times"></i>
                            </button>
                        `;

                        const badge = $(`
                <div class="employee-badge" style="${isCurrentUser ? 'background-color: #d4edda; border-color: #28a745;' : ''}">
                    <span>${emp.nama}${isCurrentUser ? ' (Anda)' : ''}</span>
                    ${removeButton}
                </div>
            `);
                        container.append(badge);
                    });
                }

                window.removeEmployeeByIndex = function(index) {
                    // Prevent removing current user
                    if (selectedEmployees[index].nik === currentUserNIK) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Tidak Dapat Dihapus',
                            text: 'Anda sebagai pengaju izin harus tetap berada dalam daftar karyawan yang mengikuti izin.',
                            confirmButtonColor: '#028284'
                        });
                        return;
                    }

                    selectedEmployees.splice(index, 1);
                    updateSelectedEmployeesUI();
                };

                // Handle kategori change
                $('#kategori_perizinan_id').on('change', function() {
                    const val = $(this).val();
                    const kategoriId = parseInt(val);

                    $('#form-izin-container').hide();
                    $('#lampiran_group').hide();

                    if (kategoriId === 1) { // Izin
                        $('#form-izin-container').show();
                        // Lampiran TIDAK langsung ditampilkan, tunggu jenis izin dipilih
                    }
                });

                // Handle jenis izin change
                $('#jenis_izin_id').on('change', function(e, skipClear) {
                    const jenisIzinId = $(this).val();
                    const showFields = !!jenisIzinId; // Show fields only if jenis izin selected

                    if (!showFields) {
                        // Hide all conditional fields when no jenis izin selected
                        $('#alasan').closest('.mobile-form-group').hide();
                        $('#jam_keluar').closest('.mobile-form-group').hide();
                        $('#jam_masuk').closest('.mobile-form-group').hide();
                        $('#shift_selection_group').hide();
                        $('#table-tanggal-container').hide();
                        $('#izin_dinas_karyawan_group').hide();
                        $('#lampiran_group').hide(); // Hide lampiran too
                        return;
                    }

                    // Show base fields
                    $('#alasan').closest('.mobile-form-group').show();
                    $('#jam_keluar').closest('.mobile-form-group').show();
                    $('#jam_masuk').closest('.mobile-form-group').show();
                    $('#table-tanggal-container').show();
                    $('#lampiran_group').show(); // Show lampiran when jenis izin selected

                    // Clear fields when changing jenis izin (only if not restoring from validation error)
                    if (!skipClear) {
                        $('#alasan').val('');
                        if (fpJamKeluar) fpJamKeluar.clear();
                        if (fpJamMasuk) fpJamMasuk.clear();
                        $('#tanggal_array').val('');
                        if (tanggalTableInstance) {
                            tanggalTableInstance.clear().draw();
                        }
                        selectedEmployees = [];
                        $('#lampiran').val('');
                        $('#lampiran-preview').empty();
                    }

                    // Show/hide shift selection and employee modal based on jenis izin
                    const showKaryawan = jenisIzinId === '4'; // Acara Khusus

                    $('#shift_selection_group').show();

                    if (showKaryawan) {
                        $('#izin_dinas_karyawan_group').show();
                        // Auto-select current user for Acara Khusus (only if not restoring from validation error)
                        if (!skipClear) {
                            ensureCurrentUserSelected();
                            updateSelectedEmployeesUI();
                        }
                    } else {
                        $('#izin_dinas_karyawan_group').hide();
                    }

                    // Update label dinamis untuk Jam Keluar/Masuk
                    let labelKeluar = "Jam Keluar";
                    let labelMasuk = "Jam Masuk";

                    if (jenisIzinId === '1') { // Terlambat
                        labelKeluar = "Jam Masuk Kerja (Normal)";
                        labelMasuk = "Jam Datang Terlambat";
                    } else if (jenisIzinId === '2') { // Keluar Kantor
                        labelMasuk = "Jam Kembali";
                    } else if (jenisIzinId === '3') { // Pulang Cepat
                        labelKeluar = "Jam Pulang Cepat";
                        labelMasuk = "Jam Pulang Kerja (Normal)";
                    } else if (jenisIzinId === '4') { // Acara Khusus
                        labelMasuk = "Jam Kembali";
                    }

                    // Update labels
                    $('#jam_keluar_label').html(labelKeluar + ' <span class="required-mark">*</span>');
                    $('#jam_masuk_label').html(labelMasuk + ' <span class="required-mark">*</span>');

                    // Apply date constraints for Izin category
                    applyIzinDateConstraints();
                });

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

                // Lampiran preview
                $('#lampiran').on('change', function() {
                    const files = Array.from(this.files);
                    const preview = $('#lampiran-preview');
                    preview.empty();

                    files.forEach((file, index) => {
                        if (file.type.startsWith('image/')) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                // Create image to get actual dimensions
                                const img = new Image();
                                img.onload = function() {
                                    const item = $(`
                        <div class="lampiran-preview-item">
                            <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" onclick="removeLampiran(${index})"><i class="fas fa-times"></i></button>
                        </div>
                    `);
                                    preview.append(item);
                                };
                                img.src = e.target.result;
                            };
                            reader.readAsDataURL(file);
                        } else if (file.type === 'application/pdf') {
                            const item = $(`
                        <div class="lampiran-preview-item" style="display: flex; align-items: center; justify-content: center; background: #f3f4f6;">
                            <i class="fas fa-file-pdf" style="font-size: 2rem; color: #dc3545;"></i>
                            <button type="button" onclick="removeLampiran(${index})" style="position: absolute; top: 4px; right: 4px;"><i class="fas fa-times"></i></button>
                        </div>
                    `);
                            preview.append(item);
                        }
                    });

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

                window.removeLampiran = function(index) {
                    const input = document.getElementById('lampiran');
                    const dt = new DataTransfer();
                    const files = Array.from(input.files);

                    files.forEach((file, i) => {
                        if (i !== index) dt.items.add(file);
                    });

                    input.files = dt.files;
                    $(input).trigger('change');
                };

                // Form submission
                $('#btn-submit').on('click', function(e) {
                    e.preventDefault();

                    const kategori = $('#kategori_perizinan_id').val();

                    // Jika kategori izin (ID = 1), tampilkan modal pemilihan atasan
                    if (kategori === '1') {
                        showTujuanSuratModalMobile();
                    } else {
                        submitFormMobile();
                    }
                });

                // Custom Modal Functions
                function showCustomModal(modalId) {
                    const modal = document.getElementById(modalId);
                    const backdrop = document.getElementById('customModalBackdrop');

                    if (modal && backdrop) {
                        backdrop.classList.add('show');
                        modal.classList.add('show');
                        document.body.classList.add('custom-modal-open');
                    }
                }

                function hideCustomModal(modalId) {
                    const modal = document.getElementById(modalId);
                    const backdrop = document.getElementById('customModalBackdrop');

                    if (modal && backdrop) {
                        backdrop.classList.remove('show');
                        modal.classList.remove('show');
                        document.body.classList.remove('custom-modal-open');
                    }
                }

                // Close modal when clicking backdrop
                $('#customModalBackdrop').on('click', function() {
                    hideCustomModal('tujuanSuratModalMobile');
                });

                // Function to show Tujuan Surat Modal for Mobile
                function showTujuanSuratModalMobile() {
                    const contentDiv = $('#tujuanSuratContentMobile');
                    contentDiv.empty();

                    if (!atasanList || atasanList.length === 0) {
                        // Jika tidak ada atasan, langsung ke personalia
                        contentDiv.html(`
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> 
                                Anda tidak memiliki atasan terdaftar. Surat akan langsung dikirim ke bagian Personalia.
                            </div>
                        `);
                        $('#tujuan_surat_user_id').val('');
                    } else {
                        // Tampilkan pilihan atasan dengan radio button
                        atasanList.forEach((atasan, index) => {
                            const radioId = `tujuan_radio_mobile_${index}`;
                            const isChecked = index === 0 ? 'checked' : '';
                            const radioHtml = `
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="tujuan_surat_radio_mobile" 
                                           id="${radioId}" value="${atasan.super_user_id}" ${isChecked}>
                                    <label class="form-check-label" for="${radioId}">
                                        ${atasan.nama}
                                    </label>
                                </div>
                            `;
                            contentDiv.append(radioHtml);
                        });

                        // Set default value ke atasan pertama
                        if (atasanList.length > 0) {
                            $('#tujuan_surat_user_id').val(atasanList[0].super_user_id);
                        }
                    }

                    // Show custom modal
                    showCustomModal('tujuanSuratModalMobile');
                }

                // Handle confirm button click in modal
                $('#btnConfirmTujuanSuratMobile').on('click', function() {
                    const selectedRadio = $('input[name="tujuan_surat_radio_mobile"]:checked');

                    // Jika ada radio button dan ada yang dipilih
                    if ($('input[name="tujuan_surat_radio_mobile"]').length > 0) {
                        if (selectedRadio.length === 0) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Perhatian',
                                text: 'Silakan pilih tujuan surat terlebih dahulu',
                                confirmButtonColor: '#028284'
                            });
                            return;
                        }

                        // Set value ke hidden input
                        $('#tujuan_surat_user_id').val(selectedRadio.val());
                    }

                    // Close custom modal
                    hideCustomModal('tujuanSuratModalMobile');

                    // Submit form
                    submitFormMobile();
                });

                // Function to submit form
                function submitFormMobile() {
                    const btn = $('#btn-submit');
                    btn.prop('disabled', true);
                    btn.html('<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...');

                    // Tambahkan hidden input untuk nik_karyawan sebagai JSON
                    // Hapus input nik_karyawan yang lama jika ada
                    $('input[name="nik_karyawan"]').remove();

                    // Buat array NIK dari selectedEmployees
                    const nikArray = selectedEmployees.map(emp => emp.nik);

                    // Tambahkan sebagai JSON string
                    const nikInput = $('<input>')
                        .attr('type', 'hidden')
                        .attr('name', 'nik_karyawan')
                        .val(JSON.stringify(nikArray));

                    $('#form-perizinan-mobile').append(nikInput);

                    setTimeout(() => {
                        $('#form-perizinan-mobile').submit();
                    }, 100);
                }

                // Initialize
                initTanggalTable();
                initIzinPickers();

                // Restore form state after validation error
                @if (old('kategori_perizinan_id'))
                    // Trigger kategori change
                    $('#kategori_perizinan_id').trigger('change');

                    @if (old('jenis_izin_id'))
                        // Trigger jenis izin change with skipClear flag
                        $('#jenis_izin_id').trigger('change', [true]);

                        // Restore selected employees from old data
                        @if (old('nik_karyawan'))
                            try {
                                const oldNikKaryawan = @json(old('nik_karyawan'));
                                let nikArray = [];

                                // Handle both JSON string and array
                                if (typeof oldNikKaryawan === 'string') {
                                    nikArray = JSON.parse(oldNikKaryawan);
                                } else if (Array.isArray(oldNikKaryawan)) {
                                    nikArray = oldNikKaryawan;
                                }

                                // Populate selectedEmployees from profiles
                                if (nikArray && nikArray.length > 0) {
                                    selectedEmployees = profiles.filter(p => nikArray.includes(p.nik))
                                        .map(p => ({
                                            nik: p.nik,
                                            nama: p.nama,
                                            departemen: p.departemen || 'N/A'
                                        }));
                                    updateSelectedEmployeesUI();
                                }
                            } catch (e) {
                                console.error('Error parsing old nik_karyawan:', e);
                            }
                        @endif

                        // Restore tanggal table from old data
                        @if (old('tanggal_array'))
                            try {
                                const oldTanggalArray = @json(old('tanggal_array'));
                                let tanggalArray = [];

                                // Handle both JSON string and array
                                if (typeof oldTanggalArray === 'string') {
                                    tanggalArray = JSON.parse(oldTanggalArray);
                                } else if (Array.isArray(oldTanggalArray)) {
                                    tanggalArray = oldTanggalArray;
                                }

                                if (tanggalArray && tanggalArray.length > 0) {
                                    setTimeout(() => {
                                        updateTanggalTable(tanggalArray);
                                    }, 100);
                                }
                            } catch (e) {
                                console.error('Error parsing old tanggal_array:', e);
                                // Fallback: generate from jam_keluar and jam_masuk
                                @if (old('jam_keluar') && old('jam_masuk'))
                                    setTimeout(() => {
                                        if (fpJamKeluar && fpJamMasuk) {
                                            const jamKeluar = fpJamKeluar.selectedDates[0];
                                            const jamMasuk = fpJamMasuk.selectedDates[0];

                                            if (jamKeluar && jamMasuk) {
                                                const dates = generateDateRange(jamKeluar, jamMasuk);
                                                updateTanggalTable(dates);
                                            } else if (jamKeluar) {
                                                const dates = generateDateRange(jamKeluar, jamKeluar);
                                                updateTanggalTable(dates);
                                            }
                                        }
                                    }, 300);
                                @endif
                            }
                        @elseif (old('jam_keluar') && old('jam_masuk'))
                            // Generate from jam_keluar and jam_masuk if tanggal_array not available
                            setTimeout(() => {
                                if (fpJamKeluar && fpJamMasuk) {
                                    const jamKeluar = fpJamKeluar.selectedDates[0];
                                    const jamMasuk = fpJamMasuk.selectedDates[0];

                                    if (jamKeluar && jamMasuk) {
                                        const dates = generateDateRange(jamKeluar, jamMasuk);
                                        updateTanggalTable(dates);
                                    } else if (jamKeluar) {
                                        const dates = generateDateRange(jamKeluar, jamKeluar);
                                        updateTanggalTable(dates);
                                    }
                                }
                            }, 300);
                        @endif
                    @endif
                @endif
            });
        </script>
    @endpush
@endsection