@extends('layouts.admin')

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

@section('content')
    <x-page-header title="Laporan Kehadiran" />
    <x-card>
        <div class="mb-4 flex flex-col md:flex-row justify-between items-center gap-4">
            <p class="text-gray-500 text-sm">Berikut adalah daftar rekapitulasi kehadiran pengunjung dan anggota perpustakaan.</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">
            <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">{{ $loop->iteration }}</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 {
            body * {
                visibility: hidden;
            }
            .sidebar, header, nav, footer, button, .mb-4 {
                display: none !important;
            }
            .print\:overflow-visible, .print\:overflow-visible * {
                visibility: visible !important;
            }
            .print\:overflow-visible {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                margin: 0 !important;
                padding: 0 !important;
            }
        }
    </style>
@endsection