@extends('layouts.app')

@section('title', 'Tabel Absensi')

@section('content')
<div class="p-4 md:p-8 max-w-7xl mx-auto">

    <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Rekap Absensi</h2>
            <p class="text-sm text-gray-500">Laporan kehadiran pegawai.</p>
        </div>
        <a href="{{ route('admin.dashboard') }}" class="text-gray-500 hover:text-primary transition">
            Kembali ke Dashboard
        </a>
    </div>

    <!-- Wrapper Container untuk Menjaga Tata Letak Berdampingan -->
    <div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 mb-8">
        
        <!-- FORM 1: FILTER TANGGAL -->
        <form action="{{ route('admin.attendance.table') }}" method="GET" class="flex flex-col md:flex-row gap-4 items-end w-full">
            <div class="flex-grow">
                <label class="block text-xs font-semibold text-gray-600 mb-2 uppercase">Dari Tanggal</label>
                <input type="date" name="start_date" value="{{ request('start_date') }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary outline-none bg-gray-50">
            </div>
            <div class="flex-grow">
                <label class="block text-xs font-semibold text-gray-600 mb-2 uppercase">Sampai Tanggal</label>
                <input type="date" name="end_date" value="{{ request('end_date') }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary outline-none bg-gray-50">
            </div>
            
            <button type="submit" class="w-full md:w-auto bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-6 rounded-xl shadow-lg transition-all">
                Filter
            </button>
        </form>
        <!-- AKHIR FORM 1 -->

        <!-- FORM 2: EXPORT CSV (Dipisah agar tidak bersarang) -->
        <form action="{{ route('admin.attendance.export') }}" method="GET" class="md:w-auto w-full mt-4 md:mt-0">
            <!-- Kirim data filter tanggal agar CSV ikut difilter -->
            <input type="hidden" name="start_date" value="{{ request('start_date') }}">
            <input type="hidden" name="end_date" value="{{ request('end_date') }}">

            <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-xl shadow-lg transition-all flex items-center justify-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                Export CSV
            </button>
        </form>
        <!-- AKHIR FORM 2 -->

    </div>

    <!-- Tabel Data -->
    <div class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-100">
                        <th class="p-5 font-semibold">No</th>
                        <th class="p-5 font-semibold">Tanggal</th>
                        <th class="p-5 font-semibold">Pegawai</th>
                        <th class="p-5 font-semibold">Masuk</th>
                        <th class="p-5 font-semibold">Pulang</th>
                        <th class="p-5 font-semibold">Lokasi</th>
                        <th class="p-5 font-semibold">Foto</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($attendances as $index => $att)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="p-5 text-gray-600 font-medium">{{ $attendances->firstItem() + $index }}</td>
                        
                        <!-- FIX 1: Gunakan Carbon::parse agar aman untuk format tanggal String -->
                        <td class="p-5 font-bold text-gray-700">{{ \Carbon\Carbon::parse($att->tanggal)->format('d M Y') }}</td>
                        
                        <!-- FIX 2: Tambahkan cek ? 'N/A' agar tidak error jika pegawai tidak ditemukan -->
                        <td class="p-5">
                            <div>
                                <p class="font-bold text-gray-800 text-sm">{{ $att->employee ? $att->employee->nama : 'N/A' }}</p>
                                <p class="text-xs text-gray-400">{{ $att->employee ? $att->employee->nidn_nup : 'N/A' }}</p>
                            </div>
                        </td>
                        
                        <td class="p-5">
                            @if($att->waktu_masuk)
                                <span class="text-emerald-600 font-bold text-sm">{{ $att->waktu_masuk }}</span>
                            @else
                                <span class="text-gray-300 text-xs">-</span>
                            @endif
                        </td>
                        <td class="p-5">
                            @if($att->waktu_pulang)
                                <span class="text-blue-600 font-bold text-sm">{{ $att->waktu_pulang }}</span>
                            @else
                                <span class="text-gray-300 text-xs">-</span>
                            @endif
                        </td>
                        <td class="p-5">
                            @if($att->latitude)
                                <a href="https://www.google.com/maps?q={{ $att->latitude }},{{ $att->longitude }}" target="_blank" class="text-indigo-500 hover:text-indigo-700 text-xs underline">Lihat Peta</a>
                            @else
                                <span class="text-gray-300 text-xs">-</span>
                            @endif
                        </td>
                        <td class="p-5">
                            <div class="flex gap-2">
                                @if($att->foto_masuk)
                                    <a href="{{ asset('storage/' . $att->foto_masuk) }}" target="_blank" class="w-8 h-8 rounded-full bg-emerald-50 flex items-center justify-center text-emerald-500 hover:bg-emerald-100" title="Foto Masuk">M</a>
                                @endif
                                @if($att->foto_pulang)
                                    <a href="{{ asset('storage/' . $att->foto_pulang) }}" target="_blank" class="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center text-blue-500 hover:bg-blue-100" title="Foto Pulang">P</a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="p-8 text-center text-gray-400">Tidak ada data absensi.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <!-- Pagination -->
        {{ $attendances->links() }}
    </div>

</div>
@endsection