@extends('layouts.admin')

@section('title', 'Pengajuan Permasalahan & Kendala Absensi')

@section('content')
<div class="space-y-6">
    <!-- Header Page -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2">
                <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-amber-100 text-amber-800 tracking-wide uppercase">
                    Helpdesk & Support
                </span>
                <span class="text-xs text-slate-400 font-semibold">• Presensi Karyawan</span>
            </div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight mt-1">Pengajuan Permasalahan Aplikasi</h1>
            <p class="text-xs text-slate-500 mt-0.5">Kelola tiket kendala absensi karyawan: koreksi absensi, penambahan kehadiran, atau penanganan laporan bug</p>
        </div>
    </div>

    <!-- Alert Notifikasi -->
    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-2.5">
            <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
            <span>{{ session('success') }}</span>
        </div>
        <button onclick="this.parentElement.remove()" class="text-emerald-500 hover:text-emerald-700">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    @if($errors->any())
    <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-semibold">
        <div class="flex items-center gap-2 mb-1.5">
            <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 shrink-0"></i>
            <span>Terjadi kesalahan:</span>
        </div>
        <ul class="list-disc list-inside space-y-0.5 text-[11px] text-rose-700 pl-4">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- Stat Cards Overview -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3.5">
        <!-- Card 1: Menunggu Verifikasi -->
        <div class="p-4 rounded-2xl bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-lg shadow-amber-500/20 relative overflow-hidden">
            <div class="flex items-center justify-between mb-2">
                <span class="text-[10px] font-bold text-amber-100 uppercase tracking-wider">Perlu Tindakan</span>
                <span class="p-1 rounded-lg bg-white/20 text-white">
                    <i data-lucide="clock" class="w-3.5 h-3.5"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-white mb-0.5">
                {{ $totalMenunggu }}
            </div>
            <p class="text-[10px] text-amber-100">Tiket menunggu respon</p>
        </div>

        <!-- Card 2: Koreksi Absensi -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm relative overflow-hidden">
            <div class="flex items-center justify-between mb-2">
                <span class="text-[10px] font-bold text-emerald-600 uppercase tracking-wider">Koreksi Absensi</span>
                <span class="p-1 rounded-lg bg-emerald-50 text-emerald-600">
                    <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-slate-800 mb-0.5">
                {{ $totalKoreksiAbsen }}
            </div>
            <p class="text-[10px] text-slate-500">Jam absensi direvisi</p>
        </div>

        <!-- Card 3: Tambah Absensi -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm relative overflow-hidden">
            <div class="flex items-center justify-between mb-2">
                <span class="text-[10px] font-bold text-blue-600 uppercase tracking-wider">Tambah Absensi</span>
                <span class="p-1 rounded-lg bg-blue-50 text-blue-600">
                    <i data-lucide="calendar-plus" class="w-3.5 h-3.5"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-slate-800 mb-0.5">
                {{ $totalTambahAbsen }}
            </div>
            <p class="text-[10px] text-slate-500">Absen baru dibuatkan</p>
        </div>

        <!-- Card 4: Hanya Laporan Bug -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm relative overflow-hidden">
            <div class="flex items-center justify-between mb-2">
                <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Hanya Laporan</span>
                <span class="p-1 rounded-lg bg-slate-100 text-slate-600">
                    <i data-lucide="bug" class="w-3.5 h-3.5"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-slate-800 mb-0.5">
                {{ $totalHanyaLaporan }}
            </div>
            <p class="text-[10px] text-slate-500">Dicatat tanpa ubah absen</p>
        </div>

        <!-- Card 5: Ditolak -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm relative overflow-hidden">
            <div class="flex items-center justify-between mb-2">
                <span class="text-[10px] font-bold text-rose-600 uppercase tracking-wider">Ditolak</span>
                <span class="p-1 rounded-lg bg-rose-50 text-rose-600">
                    <i data-lucide="x-circle" class="w-3.5 h-3.5"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-slate-800 mb-0.5">
                {{ $totalDitolak }}
            </div>
            <p class="text-[10px] text-slate-500">Pengajuan tidak valid</p>
        </div>
    </div>

    <!-- Filter & Toolbar -->
    <div class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-3">
        <form action="{{ route('admin.pengajuan-masalah.index') }}" method="GET" class="flex flex-wrap items-center gap-3">
            <!-- Filter Status -->
            <div class="w-40">
                <select name="status" onchange="this.form.submit()" class="w-full text-xs font-bold px-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-800">
                    <option value="">Semua Status</option>
                    <option value="menunggu" {{ $status == 'menunggu' ? 'selected' : '' }}>Menunggu Tindakan</option>
                    <option value="selesai" {{ $status == 'selesai' ? 'selected' : '' }}>Selesai Diproses</option>
                    <option value="ditolak" {{ $status == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                </select>
            </div>

            <!-- Filter Kategori -->
            <div class="w-44">
                <select name="kategori" onchange="this.form.submit()" class="w-full text-xs font-semibold px-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-800">
                    <option value="">Semua Kategori</option>
                    <option value="gagal_absen_masuk" {{ $kategori == 'gagal_absen_masuk' ? 'selected' : '' }}>Gagal Absen Masuk</option>
                    <option value="gagal_absen_pulang" {{ $kategori == 'gagal_absen_pulang' ? 'selected' : '' }}>Gagal Absen Pulang</option>
                    <option value="gps_tidak_terdeteksi" {{ $kategori == 'gps_tidak_terdeteksi' ? 'selected' : '' }}>Kendala GPS / Lokasi</option>
                    <option value="kamera_face_error" {{ $kategori == 'kamera_face_error' ? 'selected' : '' }}>Kamera / Biometrik</option>
                    <option value="sistem_error" {{ $kategori == 'sistem_error' ? 'selected' : '' }}>Aplikasi Error</option>
                    <option value="lainnya" {{ $kategori == 'lainnya' ? 'selected' : '' }}>Kendala Lainnya</option>
                </select>
            </div>

            <!-- Filter Departemen -->
            <div class="w-44">
                <select name="departemen_id" onchange="this.form.submit()" class="w-full text-xs font-semibold px-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-800">
                    <option value="">Semua Departemen</option>
                    @foreach($departemenList as $dep)
                        <option value="{{ $dep->id }}" {{ $departemenId == $dep->id ? 'selected' : '' }}>
                            {{ $dep->nama_departemen }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Input Pencarian -->
            <div class="relative w-64">
                <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                <input type="text" name="search" value="{{ $search }}" placeholder="Cari tiket, judul, atau nama..." class="w-full text-xs font-medium pl-9 pr-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-800">
            </div>

            <button type="submit" class="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-900 text-white text-xs font-bold transition-colors">
                Filter
            </button>

            @if($status || $kategori || $departemenId || $search)
            <a href="{{ route('admin.pengajuan-masalah.index') }}" class="px-3 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition-colors">
                Reset
            </a>
            @endif
        </form>

        <span class="text-xs font-semibold text-slate-400">
            Total: <strong>{{ $masalahList->total() }} tiket</strong>
        </span>
    </div>

    <!-- Tabel Tiket Pengajuan Permasalahan -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-xs">
                <thead>
                    <tr class="bg-slate-50/75 border-b border-slate-100 text-slate-500 font-bold uppercase tracking-wider text-[11px]">
                        <th class="py-3 px-4">No. Tiket & Tanggal</th>
                        <th class="py-3 px-4">Pegawai</th>
                        <th class="py-3 px-4">Kategori & Masalah</th>
                        <th class="py-3 px-4 text-center">Bukti Foto</th>
                        <th class="py-3 px-4 text-center">Status</th>
                        <th class="py-3 px-4">Tindakan Admin</th>
                        <th class="py-3 px-4 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-slate-700 font-medium">
                    @forelse($masalahList as $m)
                    <tr class="hover:bg-slate-50/75 transition-colors">
                        <td class="py-3 px-4">
                            <span class="font-mono font-bold text-primary-600 block">{{ $m->nomor_tiket }}</span>
                            <span class="text-[11px] text-slate-400">Kejadian: {{ $m->tanggal_kejadian->translatedFormat('d M Y') }}</span>
                            @if($m->jam_kejadian)
                                <span class="text-[10px] text-slate-500 font-semibold block">{{ substr($m->jam_kejadian, 0, 5) }} WIB</span>
                            @endif
                        </td>
                        <td class="py-3 px-4">
                            <div class="flex items-center gap-2.5">
                                <div class="w-8 h-8 rounded-xl bg-primary-100 text-primary-700 font-bold flex items-center justify-center text-xs shrink-0 overflow-hidden">
                                    @if($m->pegawai?->foto_profil)
                                        <img src="{{ asset('storage/' . $m->pegawai->foto_profil) }}" alt="{{ $m->pegawai->nama_lengkap }}" class="w-full h-full object-cover">
                                    @else
                                        {{ $m->pegawai?->inisial ?? 'PG' }}
                                    @endif
                                </div>
                                <div>
                                    <p class="font-bold text-slate-900">{{ $m->pegawai?->nama_lengkap ?? '-' }}</p>
                                    <p class="text-[11px] text-slate-400">{{ $m->pegawai?->departemen?->nama_departemen ?? '-' }} • NIP: {{ $m->pegawai?->nip }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="py-3 px-4">
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-slate-100 text-slate-700 mb-1">
                                {{ $m->label_kategori }}
                            </span>
                            <p class="font-bold text-slate-900">{{ $m->judul }}</p>
                            <p class="text-[11px] text-slate-500 line-clamp-2 max-w-xs">{{ $m->deskripsi }}</p>
                        </td>
                        <td class="py-3 px-4 text-center">
                            @if($m->foto_bukti)
                                <button type="button" onclick="bukaPreviewFoto('{{ asset('storage/' . $m->foto_bukti) }}', '{{ addslashes($m->judul) }}')" class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-blue-50 hover:bg-blue-100 text-blue-700 text-[11px] font-bold transition-colors">
                                    <i data-lucide="image" class="w-3.5 h-3.5"></i>
                                    <span>Lihat</span>
                                </button>
                            @else
                                <span class="text-[11px] text-slate-400 italic">Tanpa Bukti</span>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-center">
                            @if($m->status === 'menunggu')
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800">
                                    Menunggu
                                </span>
                            @elseif($m->status === 'selesai')
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800">
                                    Selesai
                                </span>
                            @elseif($m->status === 'ditolak')
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-rose-100 text-rose-800">
                                    Ditolak
                                </span>
                            @else
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-blue-100 text-blue-800">
                                    Diproses
                                </span>
                            @endif
                        </td>
                        <td class="py-3 px-4">
                            @if($m->tindakan_admin === 'koreksi_absensi')
                                <span class="inline-flex items-center gap-1 text-[11px] font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-lg border border-emerald-200">
                                    <i data-lucide="check" class="w-3 h-3"></i> Koreksi Absensi
                                </span>
                            @elseif($m->tindakan_admin === 'tambah_absensi')
                                <span class="inline-flex items-center gap-1 text-[11px] font-bold text-blue-700 bg-blue-50 px-2 py-0.5 rounded-lg border border-blue-200">
                                    <i data-lucide="plus" class="w-3 h-3"></i> Tambah Absensi
                                </span>
                            @elseif($m->tindakan_admin === 'hanya_laporan')
                                <span class="inline-flex items-center gap-1 text-[11px] font-bold text-slate-700 bg-slate-100 px-2 py-0.5 rounded-lg border border-slate-200">
                                    <i data-lucide="info" class="w-3 h-3"></i> Hanya Laporan Bug
                                </span>
                            @elseif($m->status === 'ditolak')
                                <span class="inline-flex items-center gap-1 text-[11px] font-bold text-rose-700 bg-rose-50 px-2 py-0.5 rounded-lg border border-rose-200">
                                    <i data-lucide="x" class="w-3 h-3"></i> Ditolak
                                </span>
                            @else
                                <span class="text-[11px] text-slate-400 italic">Belum Diproses</span>
                            @endif

                            @if($m->catatan_admin)
                                <p class="text-[10px] text-slate-500 mt-1 italic">"{{ Str::limit($m->catatan_admin, 50) }}"</p>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-center">
                            <button type="button" onclick="bukaModalProsesMasalah('{{ $m->id }}')" class="inline-flex items-center gap-1 px-3 py-1.5 rounded-xl {{ $m->status === 'menunggu' ? 'bg-primary-600 hover:bg-primary-700 text-white shadow-sm shadow-primary-500/20' : 'bg-slate-100 hover:bg-slate-200 text-slate-700' }} text-xs font-bold transition-all">
                                <i data-lucide="{{ $m->status === 'menunggu' ? 'wrench' : 'eye' }}" class="w-3.5 h-3.5"></i>
                                <span>{{ $m->status === 'menunggu' ? 'Proses' : 'Lihat' }}</span>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="py-12 text-center text-slate-400">
                            <i data-lucide="inbox" class="w-8 h-8 mx-auto mb-2 opacity-50"></i>
                            <p class="font-bold text-slate-700">Tidak ada tiket pengajuan kendala.</p>
                            <p class="text-xs text-slate-400 mt-0.5">Semua laporan kendala aplikasi yang diajukan karyawan akan tampil di sini.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($masalahList->hasPages())
        <div class="p-4 border-t border-slate-100">
            {{ $masalahList->links() }}
        </div>
        @endif
    </div>
</div>

<!-- ==================== MODAL PROSES PENGAJUAN PERMASALAHAN ==================== -->
<div id="modalProsesMasalah" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm hidden">
    <div class="bg-white rounded-2xl max-w-xl w-full shadow-2xl overflow-hidden border border-slate-100 max-h-[90vh] flex flex-col">
        <form id="formProsesMasalah" method="POST" action="">
            @csrf
            <!-- Header Modal -->
            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50 shrink-0">
                <div class="flex items-center gap-2.5">
                    <div class="p-2 rounded-xl bg-amber-100 text-amber-700">
                        <i data-lucide="wrench" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900">Proses Pengajuan Kendala</h3>
                        <p id="labelNomorTiketModal" class="text-xs font-mono text-primary-600 font-bold"></p>
                    </div>
                </div>
                <button type="button" onclick="tutupModal('modalProsesMasalah')" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg hover:bg-slate-100">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <!-- Body Modal -->
            <div class="p-6 overflow-y-auto space-y-4 max-h-[65vh]">
                <!-- Info Karyawan & Masalah -->
                <div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-2 text-xs">
                    <div class="flex justify-between">
                        <span class="text-slate-500 font-semibold">Pegawai:</span>
                        <strong id="labelPegawaiNama" class="text-slate-900 font-bold"></strong>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-500 font-semibold">Tanggal Kejadian:</span>
                        <span id="labelTanggalKejadian" class="font-bold text-slate-800"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-500 font-semibold">Kategori Masalah:</span>
                        <span id="labelKategoriModal" class="font-bold text-primary-700"></span>
                    </div>
                    <div class="pt-2 border-t border-slate-200">
                        <span class="text-slate-500 font-semibold block mb-1">Deskripsi Kendala dari Karyawan:</span>
                        <p id="labelDeskripsiModal" class="text-slate-800 bg-white p-2.5 rounded-lg border border-slate-200 leading-relaxed"></p>
                    </div>
                    <div id="wrapperFotoBuktiModal" class="pt-2 hidden">
                        <span class="text-slate-500 font-semibold block mb-1">Bukti Screenshot Error:</span>
                        <a id="linkFotoBuktiModal" href="#" target="_blank" class="inline-block rounded-lg overflow-hidden border border-slate-200 hover:opacity-90">
                            <img id="imgFotoBuktiModal" src="" alt="Bukti Kendala" class="h-28 object-cover rounded-lg">
                        </a>
                    </div>
                </div>

                <!-- Info Status Absensi di Tanggal Tersebut -->
                <div id="boxStatusAbsenHariItu" class="p-3.5 rounded-xl border text-xs"></div>

                <!-- PILIHAN TINDAKAN PENYELESAIAN ADMIN -->
                <div>
                    <label class="block text-xs font-bold text-slate-800 mb-1.5">
                        Tentukan Tindakan Penyelesaian <span class="text-rose-500">*</span>
                    </label>
                    <select id="selectTindakanAdmin" name="tindakan" onchange="toggleFormTindakan(this.value)" required class="w-full text-xs font-bold px-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-900">
                        <option value="koreksi_absensi">1. Koreksi / Revisi Absensi yang Ada (Update Jam Masuk/Pulang)</option>
                        <option value="tambah_absensi">2. Tambah Absensi Baru (Buat Record Kehadiran Baru Tanggal Itu)</option>
                        <option value="hanya_laporan">3. Hanya Laporan Error (Catat Kendala Teknis Tanpa Ubah Absensi)</option>
                        <option value="tolak">4. Tolak Pengajuan (Masalah Tidak Terverifikasi)</option>
                    </select>
                </div>

                <!-- Field Input Koreksi / Tambah Absensi (Jam Masuk & Pulang) -->
                <div id="wrapperInputAbsensi" class="p-4 rounded-xl bg-primary-50/50 border border-primary-200/80 space-y-3">
                    <p class="text-xs font-bold text-primary-900">Penetapan Jam & Status Absensi Karyawan:</p>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-[11px] font-bold text-slate-700 mb-1">Jam Masuk (HH:MM)</label>
                            <input type="time" id="inputJamMasuk" name="jam_masuk" value="08:00" class="w-full text-xs font-bold px-3 py-2 rounded-lg border border-slate-200 bg-white">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-700 mb-1">Jam Pulang (HH:MM)</label>
                            <input type="time" id="inputJamPulang" name="jam_pulang" value="17:00" class="w-full text-xs font-bold px-3 py-2 rounded-lg border border-slate-200 bg-white">
                        </div>
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-700 mb-1">Status Kehadiran</label>
                        <select name="status_kehadiran" class="w-full text-xs font-bold px-3 py-2 rounded-lg border border-slate-200 bg-white">
                            <option value="hadir">Hadir</option>
                            <option value="dinas">Dinas</option>
                            <option value="izin">Izin</option>
                            <option value="sakit">Sakit</option>
                        </select>
                    </div>
                </div>

                <!-- Catatan / Tanggapan Admin ke Karyawan -->
                <div>
                    <label class="block text-xs font-bold text-slate-800 mb-1.5">
                        Catatan Tanggapan ke Karyawan <span class="text-rose-500">*</span>
                    </label>
                    <textarea id="textareaCatatanAdmin" name="catatan_admin" rows="3" required placeholder="Tuliskan catatan verifikasi atau penjelasan untuk karyawan..." class="w-full text-xs font-medium p-3 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
                </div>
            </div>

            <!-- Footer Modal -->
            <div class="p-4 border-t border-slate-100 bg-slate-50/50 flex items-center justify-end gap-2.5 shrink-0">
                <button type="button" onclick="tutupModal('modalProsesMasalah')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl text-xs font-bold bg-primary-600 hover:bg-primary-700 text-white shadow-sm shadow-primary-500/20 transition-all flex items-center gap-1.5">
                    <i data-lucide="check" class="w-4 h-4"></i>
                    <span>Simpan & Eksekusi Tindakan</span>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Preview Foto Bukti Full -->
<div id="modalPreviewFoto" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-sm hidden" onclick="this.classList.add('hidden')">
    <div class="max-w-xl max-h-[85vh] bg-white rounded-2xl overflow-hidden shadow-2xl p-2 relative" onclick="event.stopPropagation()">
        <img id="imgPreviewFotoFull" src="" alt="Bukti Kendala" class="max-h-[80vh] w-auto mx-auto object-contain rounded-xl">
        <p id="labelPreviewFotoJudul" class="text-xs font-bold text-slate-800 p-2 text-center"></p>
    </div>
</div>

@endsection

@push('scripts')
<script>
    function tutupModal(id) {
        document.getElementById(id).classList.add('hidden');
    }

    function bukaPreviewFoto(url, judul) {
        document.getElementById('imgPreviewFotoFull').src = url;
        document.getElementById('labelPreviewFotoJudul').innerText = judul;
        document.getElementById('modalPreviewFoto').classList.remove('hidden');
    }

    function toggleFormTindakan(val) {
        const wrapper = document.getElementById('wrapperInputAbsensi');
        const catatan = document.getElementById('textareaCatatanAdmin');

        if (val === 'koreksi_absensi') {
            wrapper.classList.remove('hidden');
            catatan.placeholder = 'Contoh: Masalah diverifikasi, jam absensi telah dikoreksi sesuai jam kehadiran yang valid.';
        } else if (val === 'tambah_absensi') {
            wrapper.classList.remove('hidden');
            catatan.placeholder = 'Contoh: Kendala aplikasi terkonfirmasi, kehadiran baru telah ditambahkan ke data absensi Anda.';
        } else if (val === 'hanya_laporan') {
            wrapper.classList.add('hidden');
            catatan.placeholder = 'Contoh: Laporan bug/kendala aplikasi telah dicatat untuk perbaikan teknis. Tidak ada perubahan pada absensi.';
        } else {
            wrapper.classList.add('hidden');
            catatan.placeholder = 'Contoh: Pengajuan ditolak karena bukti kendala tidak sesuai atau waktu absensi di luar toleransi.';
        }
    }

    function bukaModalProsesMasalah(id) {
        const form = document.getElementById('formProsesMasalah');
        form.action = `/admin/pengajuan-masalah/${id}/proses`;

        fetch(`/admin/pengajuan-masalah/${id}`)
            .then(res => res.json())
            .then(res => {
                if (!res.success) return;
                const m = res.masalah;
                const peg = m.pegawai;
                const existing = res.existing_absensi;

                document.getElementById('labelNomorTiketModal').innerText = m.nomor_tiket;
                document.getElementById('labelPegawaiNama').innerText = peg ? `${peg.nama_lengkap} (${peg.nip})` : '-';
                document.getElementById('labelTanggalKejadian').innerText = m.tanggal_kejadian ? new Date(m.tanggal_kejadian).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }) : '-';
                document.getElementById('labelKategoriModal').innerText = m.label_kategori || m.kategori_masalah;
                document.getElementById('labelDeskripsiModal').innerText = m.deskripsi;

                // Foto Bukti
                const wrapperFoto = document.getElementById('wrapperFotoBuktiModal');
                if (res.foto_url) {
                    wrapperFoto.classList.remove('hidden');
                    document.getElementById('imgFotoBuktiModal').src = res.foto_url;
                    document.getElementById('linkFotoBuktiModal').href = res.foto_url;
                } else {
                    wrapperFoto.classList.add('hidden');
                }

                // Info Absensi Tanggal Kejadian
                const boxStatus = document.getElementById('boxStatusAbsenHariItu');
                if (existing) {
                    boxStatus.className = 'p-3 rounded-xl bg-amber-50 border border-amber-200 text-amber-900 text-xs';
                    boxStatus.innerHTML = `
                        <strong>ℹ️ Data Absensi Ditemukan pada Tanggal Ini:</strong>
                        <p class="mt-0.5 text-[11px]">Jam Masuk: <strong>${existing.jam_masuk || '--:--'}</strong> | Jam Pulang: <strong>${existing.jam_pulang || '--:--'}</strong> | Status: <strong>${existing.status_kehadiran}</strong></p>
                        <p class="text-[10px] text-amber-700 mt-0.5">Saran: Pilih <strong>Koreksi Absensi</strong> untuk memperbarui jam absensi ini.</p>
                    `;
                    document.getElementById('selectTindakanAdmin').value = 'koreksi_absensi';
                    if (existing.jam_masuk) {
                        document.getElementById('inputJamMasuk').value = existing.jam_masuk.substring(0, 5);
                    }
                    if (existing.jam_pulang) {
                        document.getElementById('inputJamPulang').value = existing.jam_pulang.substring(0, 5);
                    }
                } else {
                    boxStatus.className = 'p-3 rounded-xl bg-blue-50 border border-blue-200 text-blue-900 text-xs';
                    boxStatus.innerHTML = `
                        <strong>ℹ️ Belum Ada Data Absensi pada Tanggal Ini:</strong>
                        <p class="mt-0.5 text-[11px]">Pegawai tercatat belum/tidak berhasil melakukan absensi sama sekali pada tanggal ini.</p>
                        <p class="text-[10px] text-blue-700 mt-0.5">Saran: Pilih <strong>Tambah Absensi Baru</strong> jika ingin memberikan kehadiran pengganti.</p>
                    `;
                    document.getElementById('selectTindakanAdmin').value = 'tambah_absensi';
                }

                if (m.catatan_admin) {
                    document.getElementById('textareaCatatanAdmin').value = m.catatan_admin;
                } else {
                    document.getElementById('textareaCatatanAdmin').value = '';
                }

                toggleFormTindakan(document.getElementById('selectTindakanAdmin').value);
                document.getElementById('modalProsesMasalah').classList.remove('hidden');
                lucide.createIcons();
            });
    }
</script>
@endpush