@extends('layouts.admin')

@section('title', 'Laporan Kehadiran')

@section('content')
    <x-page-header title="Laporan Kehadiran" />
    <x-card>
        <!-- Filter Form (Sembunyikan saat cetak) -->
        <form method="GET" action="{{ route('admin.laporan.kehadiran') }}" class="mb-6 bg-gray-50 p-5 rounded-2xl border border-gray-200/60 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 items-end print:hidden">
            <div>
                <label class="block text-xs font-bold text-gray-700 mb-1.5 uppercase tracking-wide">Bulan</label>
                <select name="bulan" class="w-full bg-white border border-gray-200 text-gray-800 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block p-3 shadow-sm outline-none">
                    <option value="">-- Semua Bulan --</option>
                    @foreach([
                        '1' => 'Januari', '2' => 'Februari', '3' => 'Maret', '4' => 'April',
                        '5' => 'Mei', '6' => 'Juni', '7' => 'Juli', '8' => 'Agustus',
                        '9' => 'September', '10' => 'Oktober', '11' => 'November', '12' => 'Desember'
                    ] as $num => $name)
                        <option value="{{ $num }}" {{ request('bulan') == $num ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            
            <div>
                <label class="block text-xs font-bold text-gray-700 mb-1.5 uppercase tracking-wide">Tahun</label>
                <select name="tahun" class="w-full bg-white border border-gray-200 text-gray-800 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block p-3 shadow-sm outline-none">
                    <option value="">-- Semua Tahun --</option>
                    @for($y = date('Y') + 1; $y >= date('Y') - 4; $y--)
                        <option value="{{ $y }}" {{ request('tahun', date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 mb-1.5 uppercase tracking-wide">Dari Baris</label>
                <input type="number" name="limit_start" value="{{ request('limit_start') }}" min="1" placeholder="Contoh: 1" class="w-full bg-white border border-gray-200 text-gray-800 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block p-3 shadow-sm outline-none">
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 mb-1.5 uppercase tracking-wide">Sampai Baris</label>
                <input type="number" name="limit_end" value="{{ request('limit_end') }}" min="1" placeholder="Contoh: 20" class="w-full bg-white border border-gray-200 text-gray-800 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block p-3 shadow-sm outline-none">
            </div>

            <div class="flex gap-2">
                <button type="submit" class="flex-grow bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-xl shadow-md transition duration-300 text-sm flex items-center justify-center gap-2">
                    <i class="fas fa-filter"></i> Filter
                </button>
                @if(request()->anyFilled(['bulan', 'tahun', 'limit_start', 'limit_end']))
                    <a href="{{ route('admin.laporan.kehadiran') }}" class="bg-gray-100 hover:bg-red-50 border border-gray-200 text-gray-500 hover:text-red-500 p-3 rounded-xl shadow-sm transition duration-300 flex items-center justify-center" title="Reset Filter">
                        <i class="fas fa-times"></i>
                    </a>
                @endif
            </div>
        </form>

        <div class="mb-4 flex flex-col md:flex-row justify-between items-center gap-4 print:hidden">
            <p class="text-gray-500 text-sm">Berikut adalah daftar rekapitulasi kehadiran pengunjung yang disaring.</p>
            <button onclick="window.print()" class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg text-sm font-bold shadow-sm transition-all flex items-center gap-2">
                <i class="fas fa-print"></i> Cetak PDF / Print
            </button>
        </div>

        <div class="overflow-x-auto print:overflow-visible">
            <!-- Print Header (Hanya terlihat saat cetak/print) -->
            <div class="hidden print:block mb-6 border-b-2 border-gray-800 pb-4 text-center">
                <h1 class="text-2xl font-black uppercase tracking-wide text-gray-900">Laporan Rekapitulasi Kehadiran</h1>
                <h2 class="text-sm font-bold text-gray-700 mt-1">PERPUSTAKAAN DAERAH JEMBER</h2>
                <p class="text-xs text-gray-500 mt-0.5">Jl. Mastrip No. 1, Kabupaten Jember</p>
                <div class="text-[11px] text-gray-600 mt-3 flex flex-wrap justify-center gap-x-4 gap-y-1 font-medium border-t border-gray-100 pt-3">
                    @if(request('bulan') || request('tahun'))
                        <span>Periode: 
                            {{ request('bulan') ? Carbon\Carbon::create()->month((int) request('bulan'))->translatedFormat('F') : 'Semua Bulan' }} 
                            {{ request('tahun') ?? '' }}
                        </span>
                    @endif
                    <span>Dicetak Pada: {{ \Carbon\Carbon::now()->translatedFormat('d F Y H:i') }}</span>
                </div>
            </div>

            <x-table>
                <x-slot name="head">
                    <x-th>No</x-th>
                    <x-th>Nama Pengunjung</x-th>
                    <x-th>Tipe</x-th>
                    <x-th>Tujuan</x-th>
                    <x-th>Tanggal</x-th>
                </x-slot>

                @forelse($bukuTamu as $item)
                    <tr class="hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-0">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ (request('limit_start') ? (int)request('limit_start') : 1) + $loop->index }}</td>
                        <td class="px-6 py-4">
                            @if($item->user)
                                {{-- Member path: data dari users --}}
                                <div class="font-medium text-gray-900">{{ $item->user->name }}</div>
                                <div class="text-xs text-gray-500">{{ $item->user->email }}</div>
                            @elseif($item->nama_tamu)
                                {{-- Tamu path: data manual --}}
                                <div class="font-medium text-gray-900">{{ $item->nama_tamu }}</div>
                                <div class="text-xs text-gray-500">{{ $item->asal_instansi ?? '-' }}</div>
                            @else
                                <div class="text-gray-400">-</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            @if($item->id_user)
                                <x-badge color="blue">Anggota</x-badge>
                            @else
                                <x-badge color="gray">Pengunjung</x-badge>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ $item->tujuan_kunjungan }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ \Carbon\Carbon::parse($item->tanggal_kunjungan)->format('d M Y') }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center text-gray-500 py-8">Belum ada data kehadiran</td>
                    </tr>
                @endforelse
            </x-table>
        </div>
    </x-card>

    <style>
        @media print {
            /* Hide layout elements not needed for print */
            header, aside, .sidebar, nav, footer, button, .print\:hidden, form, .mb-4 {
                display: none !important;
            }
            
            /* Reset body, main, and containers to allow natural multi-page flow */
            html, body {
                height: auto !important;
                min-height: auto !important;
                overflow: visible !important;
                background-color: #fff !important;
                color: #000 !important;
            }
            
            /* Force the relative layout container to overflow naturally */
            div.flex.flex-1.overflow-hidden.relative {
                display: block !important;
                height: auto !important;
                min-height: auto !important;
                overflow: visible !important;
                position: static !important;
            }

            main {
                padding: 0 !important;
                margin: 0 !important;
                height: auto !important;
                min-height: auto !important;
                overflow: visible !important;
                position: static !important;
                display: block !important;
                width: 100% !important;
            }
            
            /* Reset card and table parent wrappers */
            .bg-white, .shadow-xl, .rounded-3xl, .p-6, .p-8 {
                background: transparent !important;
                box-shadow: none !important;
                border: none !important;
                padding: 0 !important;
                margin: 0 !important;
                height: auto !important;
                min-height: auto !important;
                overflow: visible !important;
            }

            /* Adjust table styles for print */
            table {
                width: 100% !important;
                border-collapse: collapse !important;
            }
            
            th, td {
                padding: 8px 12px !important;
                border: 1px solid #ddd !important;
                font-size: 11px !important;
                color: #000 !important;
            }

            /* Avoid page breaks inside table rows */
            tr {
                page-break-inside: avoid !important;
            }
        }
    </style>
@endsection