@extends('layouts.admin')

@section('title', 'Monitoring Absensi Karyawan')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Monitoring Absensi Harian</h1>
            <p class="text-xs text-slate-500 mt-1">Live feed absensi GPS & selfie, kalkulasi denda masuk & denda pulang di akhir jam kerja, dan audit trail</p>
        </div>
    <!-- Card Konfigurasi On/Off Fitur Absensi Bawahan di Mobile -->
    <div class="p-4 rounded-2xl bg-gradient-to-r {{ $pengaturanMonitoring->fitur_absensi_bawahan_mobile ? 'from-emerald-950 via-teal-900 to-slate-900 text-emerald-100' : 'from-slate-800 via-slate-900 to-zinc-900 text-slate-200' }} border border-slate-700/50 shadow-md flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div class="flex items-start gap-3.5">
            <div class="w-10 h-10 rounded-xl {{ $pengaturanMonitoring->fitur_absensi_bawahan_mobile ? 'bg-emerald-500/20 text-emerald-400' : 'bg-slate-700 text-slate-400' }} flex items-center justify-center shrink-0">
                <i data-lucide="users" class="w-5 h-5"></i>
            </div>
            <div>
                <div class="flex items-center gap-2">
                    <h3 class="text-sm font-bold text-white tracking-tight">Fitur Riwayat Kehadiran Bawahan (Aplikasi Mobile)</h3>
                    @if($pengaturanMonitoring->fitur_absensi_bawahan_mobile)
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 flex items-center gap-1">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                            Fitur Aktif
                        </span>
                    @else
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/20 text-rose-300 border border-rose-500/30">
                            Fitur Dinonaktifkan
                        </span>
                    @endif
                </div>
                <p class="text-xs text-slate-300/80 mt-0.5 leading-relaxed">
                    Izinkan atasan/supervisor melihat daftar anggota tim beserta kalender riwayat absensi bawahannya melalui aplikasi mobile.
                </p>
            </div>
        </div>

        <form action="{{ route('admin.laporan.monitoring.toggle-bawahan') }}" method="POST" class="shrink-0">
            @csrf
            <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-sm {{ $pengaturanMonitoring->fitur_absensi_bawahan_mobile ? 'bg-emerald-500 hover:bg-emerald-600 text-white' : 'bg-slate-700 hover:bg-slate-600 text-white' }}">
                <i data-lucide="{{ $pengaturanMonitoring->fitur_absensi_bawahan_mobile ? 'toggle-right' : 'toggle-left' }}" class="w-4 h-4"></i>
                <span>{{ $pengaturanMonitoring->fitur_absensi_bawahan_mobile ? 'Nonaktifkan Fitur' : 'Aktifkan Fitur' }}</span>
            </button>
        </form>
    </div>

    <!-- Filter Tanggal & Departemen -->
    <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm">
        <form method="GET" action="{{ route('admin.laporan.monitoring') }}" class="grid grid-cols-1 sm:grid-cols-3 gap-3 items-end">
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Tanggal Absensi</label>
                <input type="date" name="tanggal" value="{{ $tanggal }}" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none">
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Departemen</label>
                <select name="departemen_id" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                    <option value="">Semua Departemen</option>
                    @foreach($departemenList as $dep)
                    <option value="{{ $dep->id }}" {{ request('departemen_id') == $dep->id ? 'selected' : '' }}>{{ $dep->nama_departemen }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Status Kehadiran</label>
                <select name="status_masuk" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                    <option value="">Semua Status</option>
                    <option value="tepat_waktu" {{ request('status_masuk') == 'tepat_waktu' ? 'selected' : '' }}>Tepat Waktu</option>
                    <option value="terlambat" {{ request('status_masuk') == 'terlambat' ? 'selected' : '' }}>Terlambat</option>
                </select>
            </div>
        </form>
    </div>

    <!-- Tabel Monitoring (Format 24 Jam & Rincian Denda Masuk + Pulang) -->
    <div class="rounded-2xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full min-w-[850px] text-left border-collapse">
                <thead>
                    <tr class="border-b border-slate-100 bg-slate-50/60 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                        <th class="py-3 px-4">Pegawai</th>
                        <th class="py-3 px-4">Jadwal Shift (24 Jam)</th>
                        <th class="py-3 px-4">Masuk (Selfie & GPS)</th>
                        <th class="py-3 px-4">Pulang (24 Jam)</th>
                        <th class="py-3 px-4 text-center">Istirahat</th>
                        <th class="py-3 px-4">Status & Denda Masuk/Pulang</th>
                        <th class="py-3 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($absensiList as $abs)
                    <tr class="hover:bg-slate-50/70 transition-colors {{ $abs->direvisi ? 'bg-amber-50/20' : '' }}">
                        <td class="py-3.5 px-4 font-bold text-slate-900">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-xl bg-primary-100 text-primary-700 font-bold flex items-center justify-center text-xs shrink-0">
                                    {{ $abs->pegawai->inisial ?? 'P' }}
                                </div>
                                <div class="min-w-0">
                                    <span class="block truncate">{{ $abs->pegawai->nama_lengkap ?? '-' }}</span>
                                    <span class="text-[11px] font-normal text-slate-400">{{ $abs->pegawai->jabatan->nama_jabatan ?? '-' }}</span>
                                </div>
                            </div>
                        </td>
                        <td class="py-3.5 px-4">
                            <span class="font-bold text-slate-800 block">{{ $abs->jamKerja?->nama_jam_kerja ?? 'Jam Kerja Standar' }}</span>
                            <span class="text-[11px] text-slate-500 font-mono">
                                Masuk: {{ substr($abs->jamKerja?->jam_akhir_masuk ?? $abs->jamKerja?->jam_masuk ?? '08:00', 0, 5) }} • 
                                Pulang: {{ substr($abs->jamKerja?->jam_awal_pulang ?? $abs->jamKerja?->jam_pulang ?? '17:00', 0, 5) }}
                            </span>
                        </td>
                        <td class="py-3.5 px-4">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 rounded-lg bg-slate-100 text-slate-600 flex items-center justify-center shrink-0 border border-slate-200">
                                    <i data-lucide="camera" class="w-3.5 h-3.5 text-primary-600"></i>
                                </div>
                                <div>
                                    <span class="font-mono font-bold text-slate-900 block text-sm">
                                        {{ $abs->jam_masuk ? substr($abs->jam_masuk, 0, 5) : '--:--' }}
                                    </span>
                                    <span class="text-[10px] text-slate-400 font-semibold">{{ $abs->jarak_masuk_meter ?? 0 }}m dari titik GPS</span>
                                </div>
                            </div>
                        </td>
                        <td class="py-3.5 px-4">
                            <span class="font-mono font-bold text-slate-800 block text-sm">
                                {{ $abs->jam_pulang ? substr($abs->jam_pulang, 0, 5) : '--:--' }}
                            </span>
                            <span class="text-[10px] text-slate-400">
                                {{ $abs->jam_pulang ? 'Check-out Selesai' : 'Belum Check-out' }}
                            </span>
                        </td>
                        <td class="py-3.5 px-4 text-center">
                            @if($abs->status_istirahat === 'istirahat')
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 border border-amber-300 animate-pulse">
                                    <i data-lucide="coffee" class="w-3 h-3 text-amber-600"></i>
                                    <span>Istirahat ({{ substr($abs->jam_istirahat_mulai, 0, 5) }})</span>
                                </span>
                            @elseif($abs->status_istirahat === 'selesai')
                                <div class="inline-flex flex-col items-center">
                                    <span class="font-mono font-bold text-slate-800 text-[11px]">
                                        {{ substr($abs->jam_istirahat_mulai, 0, 5) }} - {{ substr($abs->jam_istirahat_selesai, 0, 5) }}
                                    </span>
                                    <span class="text-[9px] text-emerald-600 font-bold flex items-center gap-0.5">
                                        <i data-lucide="check" class="w-2.5 h-2.5"></i> Selesai
                                    </span>
                                </div>
                            @elseif($abs->status_istirahat === 'dilewati')
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-slate-100 text-slate-500 border border-slate-200">
                                    Dilewati
                                </span>
                            @else
                                <span class="text-slate-300 font-mono">-</span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4">
                            <div class="flex flex-col gap-1">
                                <div class="flex items-center gap-1.5 flex-wrap">
                                    @if($abs->status_kehadiran === 'alfa')
                                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-rose-100 text-rose-800 border border-rose-300 flex items-center gap-1">
                                            <i data-lucide="user-x" class="w-3 h-3 text-rose-600"></i>
                                            Tidak Hadir (Alfa)
                                        </span>
                                    @elseif($abs->status_kehadiran === 'izin')
                                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-200">
                                            Izin
                                        </span>
                                    @elseif($abs->status_kehadiran === 'sakit')
                                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-700 border border-blue-200">
                                            Sakit
                                        </span>
                                    @elseif($abs->status_kehadiran === 'dinas')
                                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-indigo-50 text-indigo-700 border border-indigo-200">
                                            Dinas Luar
                                        </span>
                                    @else
                                        <span class="px-2 py-0.5 rounded text-[10px] font-bold {{ $abs->status_masuk == 'tepat_waktu' ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-amber-50 text-amber-700 border border-amber-200' }}">
                                            {{ $abs->status_masuk == 'tepat_waktu' ? 'Masuk Tepat Waktu' : 'Telat Masuk ' . $abs->menit_terlambat . 'm' }}
                                        </span>
                                        @if($abs->status_pulang == 'pulang_cepat')
                                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-rose-50 text-rose-700 border border-rose-200">
                                            Pulang Cepat {{ $abs->menit_pulang_cepat }}m
                                        </span>
                                        @endif
                                    @endif
                                </div>

                                <!-- Rincian Relasi Denda Masuk, Pulang & Tidak Hadir -->
                                @if($abs->denda_masuk_id || $abs->denda_pulang_id || $abs->denda_tidak_hadir_id || $abs->nominal_denda_masuk > 0 || $abs->nominal_denda_pulang > 0 || $abs->nominal_denda_tidak_hadir > 0)
                                <div class="text-[11px] font-mono mt-1 space-y-0.5">
                                    @if($abs->denda_masuk_id && $abs->dendaMasuk)
                                    <span class="text-orange-700 font-semibold flex items-center gap-1">
                                        <i data-lucide="tag" class="w-3 h-3 inline"></i>
                                        <span>Denda Masuk: {{ $abs->dendaMasuk->keterangan ?? 'Terlambat' }}</span>
                                        <span class="text-slate-400 font-normal">~Rp {{ number_format($abs->nominal_denda_masuk, 0, ',', '.') }}</span>
                                    </span>
                                    @endif
                                    @if($abs->denda_pulang_id && $abs->dendaPulang)
                                    <span class="text-blue-700 font-semibold flex items-center gap-1">
                                        <i data-lucide="tag" class="w-3 h-3 inline"></i>
                                        <span>Denda Pulang: {{ $abs->dendaPulang->keterangan ?? 'Pelanggaran Pulang' }}</span>
                                        <span class="text-slate-400 font-normal">~Rp {{ number_format($abs->nominal_denda_pulang, 0, ',', '.') }}</span>
                                    </span>
                                    @endif
                                    @if($abs->status_kehadiran === 'alfa' || ($abs->denda_tidak_hadir_id && $abs->dendaTidakHadir))
                                    <span class="text-rose-700 font-semibold flex items-center gap-1">
                                        <i data-lucide="alert-circle" class="w-3 h-3 inline text-rose-600"></i>
                                        <span>Denda Alfa: {{ $abs->dendaTidakHadir->keterangan ?? 'Tidak Hadir' }}</span>
                                        <span class="text-rose-600 font-bold">~Rp {{ number_format($abs->nominal_denda_tidak_hadir, 0, ',', '.') }}</span>
                                    </span>
                                    @endif
                                </div>
                                @endif

                                @if($abs->direvisi)
                                <span class="text-[9px] font-bold text-amber-600 italic">Data Pernah Direvisi</span>
                                @endif
                            </div>
                        </td>
                        <td class="py-3.5 px-4 text-right">
                            @if(isset($kunciPeriode) && $kunciPeriode->status_kunci === 'terkunci')
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-slate-100 text-slate-500 text-[11px] font-semibold border border-slate-200">
                                <i data-lucide="lock" class="w-3 h-3 text-slate-400"></i>
                                <span>Terkunci</span>
                            </span>
                            @else
                            <div class="flex items-center justify-end gap-1.5">
                                <button onclick="openModalRevisi('{{ $abs->id }}', '{{ $abs->pegawai->nama_lengkap }}', '{{ $abs->jam_masuk }}', '{{ $abs->jam_pulang }}', '{{ $abs->status_kehadiran }}')" class="p-1.5 rounded-lg border border-slate-200 hover:bg-primary-50 hover:text-primary-600 text-slate-600 text-xs font-semibold flex items-center gap-1 transition-colors" title="Revisi Absensi">
                                    <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
                                    <span>Revisi</span>
                                </button>
                                <form action="{{ route('admin.laporan.monitoring.destroy', $abs->id) }}" method="POST" onsubmit="return confirmDeleteAbsensi(this);" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="alasan_hapus" id="alasanHapusInput-{{ $abs->id }}">
                                    <button type="button" onclick="submitHapusWithReason('{{ $abs->id }}', this.parentElement)" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus Absensi">
                                        <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                    </button>
                                </form>
                            </div>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="py-8 text-center text-slate-400">Tidak ada catatan presensi pada tanggal ini</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Revisi Absensi (Format 24 Jam) -->
<div id="modalRevisiAbsensi" class="fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-sm hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-md w-full p-5 sm:p-6 shadow-xl space-y-4 max-h-[92vh] overflow-y-auto">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <div>
                <h3 class="font-bold text-slate-900 text-sm">Revisi Data Absensi</h3>
                <p id="modalPegawaiName" class="text-xs text-slate-400 font-medium"></p>
            </div>
            <button onclick="document.getElementById('modalRevisiAbsensi').classList.add('hidden')" class="p-1 text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
        <form id="formRevisiAbsensi" method="POST" class="space-y-4 text-xs">
            @csrf
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Jam Masuk (24 Jam: HH:MM)</label>
                    <input type="text" name="jam_masuk" id="revJamMasuk" placeholder="08:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" class="w-full px-3 py-2 rounded-xl border border-slate-200 font-mono font-bold outline-none focus:ring-1 focus:ring-primary-500">
                    <span class="text-[10px] text-slate-400 mt-0.5 block">Denda dihitung dari akhir masuk</span>
                </div>
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Jam Pulang (24 Jam: HH:MM)</label>
                    <input type="text" name="jam_pulang" id="revJamPulang" placeholder="17:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" class="w-full px-3 py-2 rounded-xl border border-slate-200 font-mono font-bold outline-none focus:ring-1 focus:ring-primary-500">
                    <span class="text-[10px] text-slate-400 mt-0.5 block">Denda dihitung dari akhir pulang</span>
                </div>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Status Kehadiran *</label>
                <select name="status_kehadiran" id="revStatusKehadiran" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                    <option value="hadir">Hadir</option>
                    <option value="izin">Izin</option>
                    <option value="sakit">Sakit</option>
                    <option value="dinas">Dinas Luar</option>
                    <option value="alfa">Alfa / Tanpa Keterangan</option>
                </select>
            </div>

            <div class="p-3 rounded-xl bg-amber-50/60 border border-amber-200/60">
                <label class="block font-bold text-amber-900 mb-1">Alasan Revisi (Wajib Diisi untuk Audit Log) *</label>
                <textarea name="alasan_revisi" rows="2" placeholder="Contoh: Lupa tap absen karena server sedang maintenance..." required class="w-full px-3 py-2 rounded-xl border border-amber-200 bg-white outline-none"></textarea>
                <span class="text-[10px] text-amber-800 mt-1 block">Audit trail mencatat data lama vs baru secara transparan.</span>
            </div>

            <div class="pt-3 border-t border-slate-100 flex justify-end gap-2">
                <button type="button" onclick="document.getElementById('modalRevisiAbsensi').classList.add('hidden')" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 font-semibold">Batal</button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-primary-600 text-white font-bold hover:bg-primary-700">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    function openModalRevisi(id, name, jamMasuk, jamPulang, status) {
        document.getElementById('formRevisiAbsensi').action = '/admin/laporan/monitoring/' + id + '/revisi';
        document.getElementById('modalPegawaiName').innerText = name;
        document.getElementById('revJamMasuk').value = jamMasuk ? jamMasuk.substring(0, 5) : '';
        document.getElementById('revJamPulang').value = jamPulang ? jamPulang.substring(0, 5) : '';
        document.getElementById('revStatusKehadiran').value = status || 'hadir';
        document.getElementById('modalRevisiAbsensi').classList.remove('hidden');
    }

    function submitHapusWithReason(id, form) {
        const alasan = prompt('Masukkan alasan penghapusan absensi ini (wajib untuk audit log):');
        if (alasan && alasan.trim().length >= 5) {
            document.getElementById('alasanHapusInput-' + id).value = alasan.trim();
            form.submit();
        } else if (alasan !== null) {
            alert('Alasan penghapusan minimal 5 karakter.');
        }
    }
</script>
@endpush
@endsection