@extends('layouts.mobile', ['title' => 'Edit Permohonan 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;
            }

            /* Button untuk new lampiran preview (dapat dihapus sebelum upload) */
            .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;
                }
            }

            /* 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;
            }
        </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 . '/edit/' . $idencrypt . '?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 edit 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.update') }}" enctype="multipart/form-data"
            id="form-perizinan-mobile">
            @csrf
            @method('POST')
            <input type="hidden" name="idencrypt" value="{{ $idencrypt }}">

            <!-- 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', $permohonanPerizinan->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">
                <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', $permohonanPerizinan->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">
                            <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', $permohonanPerizinan->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', $permohonanPerizinan->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">
                            <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', $permohonanPerizinan->alasan) }}</textarea>
                            @error('alasan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Jam Keluar -->
                        <div class="mobile-form-group" id="jam_keluar_group">
                            <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', $permohonanPerizinan->jam_keluar) }}">
                            @error('jam_keluar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Jam Masuk -->
                        <div class="mobile-form-group" id="jam_masuk_group">
                            <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', $permohonanPerizinan->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">
                            <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="{{ $permohonanPerizinan->jenis_izin_id == 4 ? '' : '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">
                <div class="mobile-card-header">
                    <i class="fas fa-paperclip"></i> Lampiran
                </div>
                <div class="mobile-card-body">
                    <!-- Existing Lampiran -->
                    @if (isset($lampiran) && !$lampiran->isEmpty())
                        <div class="mobile-form-group">
                            <label class="mobile-form-label">Lampiran Sebelumnya</label>
                            <div id="existing-lampiran-preview" class="lampiran-preview">
                                @foreach ($lampiran as $item)
                                    @if ($item->width && $item->height)
                                        <div class="lampiran-preview-item">
                                            <a href="{{ asset('storage/' . $item->gambar_lampiran) }}"
                                                data-pswp-width="{{ $item->width }}"
                                                data-pswp-height="{{ $item->height }}" target="_blank">
                                                <img src="{{ asset('storage/' . $item->gambar_lampiran) }}"
                                                    alt="Lampiran">
                                            </a>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            @if ($lampiran->isEmpty())
                                <small class="mobile-hint">Tidak ada lampiran.</small>
                            @endif
                        </div>
                    @endif

                    <!-- New Lampiran -->
                    <div class="mobile-form-group">
                        <label class="mobile-form-label">Ganti/Tambah Lampiran (Opsional)</label>
                        <input type="file" name="lampiran[]" id="lampiran"
                            class="mobile-form-control @error('lampiran.*') is-invalid @enderror" multiple
                            accept=".jpg,.jpeg,.png">
                        <small class="mobile-hint">Upload baru akan menggantikan lampiran lama. Format: JPG, JPEG, PNG
                            (Maks. 1.5MB 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', $tanggalArray ?? '') }}">

            <!-- 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-save"></i> Simpan Perubahan
                </button>
            </div>
        </form>
    </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>
            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 edit <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>Edit <strong>Surat Tugas</strong> (dengan/tanpa anggaran)</li><li>Edit <strong>Izin</strong> dengan fitur lengkap</li><li>Tampilan form yang lebih detail dan komprehensif</li></ul></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) window.location.href = desktopUrl;
                });
            }

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

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

                // Pre-populate selectedEmployees from nikKaryawan (JSON string from backend)
                @if (isset($nikKaryawan) && $nikKaryawan)
                    try {
                        // nikKaryawan is a JSON string like: "["20053","14192","15006"]"
                        const nikKaryawanJson = {!! json_encode($nikKaryawan) !!};
                        let nikArray = [];

                        if (typeof nikKaryawanJson === 'string') {
                            nikArray = JSON.parse(nikKaryawanJson);
                        } else if (Array.isArray(nikKaryawanJson)) {
                            nikArray = nikKaryawanJson;
                        }

                        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'
                            }));
                        }
                    } catch (e) {
                        console.error('Error parsing nikKaryawan:', e);
                    }
                @endif

                function ensureCurrentUserSelected() {
                    if (!currentUserNIK) return;
                    const currentUser = profiles.find(p => p.nik === currentUserNIK);
                    if (!currentUser) return;
                    if (!selectedEmployees.some(e => e.nik === currentUserNIK)) {
                        selectedEmployees.push({
                            nik: currentUser.nik,
                            nama: currentUser.nama,
                            departemen: currentUser.departemen || 'N/A'
                        });
                    }
                }

                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"
                            }
                        }
                    });
                }

                function updateTanggalTable(datesArray) {
                    const tableData = datesArray.map(d => ({
                        tanggal: d
                    }));
                    tanggalTableInstance.clear().rows.add(tableData).draw();
                    $('#tanggal_array').val(JSON.stringify(datesArray));
                }

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

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

                function handleDateTimeChange() {
                    if (!fpJamKeluar || !fpJamMasuk) return;
                    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);
                    }
                }

                function applyIzinDateConstraints() {
                    if (!fpJamKeluar || !fpJamMasuk) return;
                    const startDate = fpJamKeluar.selectedDates[0];
                    const kategoriId = $('#kategori_perizinan_id').val();
                    const jenisIzinId = $('#jenis_izin_id').val();
                    fpJamMasuk.set('minDate', startDate || null);
                    if (startDate && kategoriId === '1' && jenisIzinId) {
                        const maxDate = new Date(startDate.getTime());
                        maxDate.setHours(maxDate.getHours() + 9);
                        fpJamMasuk.set('maxDate', maxDate);
                        const selectedJamMasuk = fpJamMasuk.selectedDates[0];
                        if (selectedJamMasuk && selectedJamMasuk > maxDate) fpJamMasuk.clear();
                    } else {
                        fpJamMasuk.set('maxDate', null);
                    }
                }

                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 lebih besar dari Jam Keluar!',
                            confirmButtonText: 'OK'
                        });
                        fpJamMasuk.clear();
                        return false;
                    }
                    return true;
                }

                function initIzinPickers() {
                    fpJamKeluar = flatpickr('#jam_keluar', {
                        enableTime: true,
                        dateFormat: 'd-m-Y H:i',
                        time_24hr: true,
                        enable: enabledDates,
                        onChange: function() {
                            applyIzinDateConstraints();
                            validateJamMasukKeluarOrder();
                            handleDateTimeChange();
                        }
                    });
                    fpJamMasuk = flatpickr('#jam_masuk', {
                        enableTime: true,
                        dateFormat: 'd-m-Y H:i',
                        time_24hr: true,
                        enable: enabledDates,
                        onChange: function() {
                            validateJamMasukKeluarOrder();
                            handleDateTimeChange();
                        }
                    });
                }

                $('#btn-select-izin-employee').on('click', function() {
                    openEmployeeSelectionSwal();
                });

                function openEmployeeSelectionSwal() {
                    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: () => {
                            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']
                                ]
                            });
                            $('#swal-select-all').on('change', function() {
                                const checked = this.checked;
                                employeeTable.$('.swal-employee-check').prop('checked', checked);
                            });
                            $('#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: () => {
                            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: () => {
                            if ($.fn.DataTable.isDataTable('#swal-employee-table')) {
                                $('#swal-employee-table').DataTable().destroy();
                            }
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            selectedEmployees = result.value;
                            updateSelectedEmployeesUI();
                        }
                    });
                }

                function updateSelectedEmployeesUI() {
                    const kategoriId = parseInt($('#kategori_perizinan_id').val());
                    if (kategoriId === 1) updateIzinSelectedEmployeesUI();
                }

                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();
                };

                $('#jenis_izin_id').on('change', function(e, skipClear) {
                    const jenisIzinId = $(this).val();
                    const showFields = !!jenisIzinId;
                    if (!showFields) {
                        $('#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();
                        return;
                    }
                    $('#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();
                    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();
                    }
                    const showKaryawan = jenisIzinId === '4';
                    $('#shift_selection_group').show();
                    if (showKaryawan) {
                        $('#izin_dinas_karyawan_group').show();
                        if (!skipClear) {
                            ensureCurrentUserSelected();
                            updateSelectedEmployeesUI();
                        }
                    } else {
                        $('#izin_dinas_karyawan_group').hide();
                    }
                    let labelKeluar = "Jam Keluar";
                    let labelMasuk = "Jam Masuk";
                    if (jenisIzinId === '1') {
                        labelKeluar = "Jam Masuk Kerja (Normal)";
                        labelMasuk = "Jam Datang Terlambat";
                    } else if (jenisIzinId === '2') {
                        labelMasuk = "Jam Kembali";
                    } else if (jenisIzinId === '3') {
                        labelKeluar = "Jam Pulang Cepat";
                        labelMasuk = "Jam Pulang Kerja (Normal)";
                    } else if (jenisIzinId === '4') {
                        labelMasuk = "Jam Kembali";
                    }
                    $('#jam_keluar_label').html(labelKeluar + ' <span class="required-mark">*</span>');
                    $('#jam_masuk_label').html(labelMasuk + ' <span class="required-mark">*</span>');
                    applyIzinDateConstraints();
                });

                // Initialize PhotoSwipe
                function initPhotoSwipe() {
                    // For existing lampiran
                    if (document.getElementById('existing-lampiran-preview')) {
                        const existingLightbox = new PhotoSwipeLightbox({
                            gallery: '#existing-lampiran-preview',
                            children: 'a',
                            pswpModule: PhotoSwipe
                        });
                        existingLightbox.init();
                    }

                    // For new lampiran preview
                    if (document.getElementById('lampiran-preview')) {
                        const newLightbox = new PhotoSwipeLightbox({
                            gallery: '#lampiran-preview',
                            children: 'a',
                            pswpModule: PhotoSwipe
                        });
                        newLightbox.init();
                    }
                }

                // Initialize on page load
                initPhotoSwipe();

                $('#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');
                };

                $('#btn-submit').on('click', function(e) {
                    e.preventDefault();
                    const btn = $(this);
                    btn.prop('disabled', true);
                    btn.html('<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...');
                    $('input[name="nik_karyawan"]').remove();
                    const nikArray = selectedEmployees.map(emp => emp.nik);
                    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);
                });

                initTanggalTable();
                initIzinPickers();

                // Pre-populate tanggal table from backend data
                @if (isset($tanggalArray) && $tanggalArray)
                    try {
                        // tanggalArray is a JSON string like: "["30-10-2025"]"
                        const tanggalArrayJson = {!! json_encode($tanggalArray) !!};
                        let dates = [];

                        if (typeof tanggalArrayJson === 'string') {
                            dates = JSON.parse(tanggalArrayJson);
                        } else if (Array.isArray(tanggalArrayJson)) {
                            dates = tanggalArrayJson;
                        }

                        if (dates && dates.length > 0) {
                            setTimeout(() => {
                                updateTanggalTable(dates);
                            }, 100);
                        }
                    } catch (e) {
                        console.error('Error parsing tanggalArray:', e);
                    }
                @endif

                // Pre-populate form fields from backend data
                const kategoriId = $('#kategori_perizinan_id').val();
                const jenisIzinId = $('#jenis_izin_id').val();

                if (jenisIzinId) {
                    setTimeout(() => {
                        $('#jenis_izin_id').trigger('change', [true]);
                        updateSelectedEmployeesUI();
                    }, 100);
                }

                @if (old('jenis_izin_id'))
                    setTimeout(() => {
                        $('#jenis_izin_id').trigger('change', [true]);
                        @if (old('nik_karyawan'))
                            try {
                                const oldNikKaryawan = @json(old('nik_karyawan'));
                                let nikArray = [];
                                if (typeof oldNikKaryawan === 'string') {
                                    nikArray = JSON.parse(oldNikKaryawan);
                                } else if (Array.isArray(oldNikKaryawan)) {
                                    nikArray = oldNikKaryawan;
                                }
                                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
                        @if (old('tanggal_array'))
                            try {
                                const oldTanggalArray = @json(old('tanggal_array'));
                                let tanggalArray = [];
                                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);
                            }
                        @endif
                    }, 100);
                @endif
            });
        </script>
    @endpush
@endsection