@extends('layouts.app')

@section('content')

<div style="font-family: Arial, sans-serif; background: #f4f6f9; padding: 20px;">
    <h1 style="color: #243b8f; margin-bottom: 15px;">Riwayat Data Pengunjung</h1>

    <table style="width: 100%; border-collapse: collapse; background: white;">
        <tr>
            <th style="padding: 12px; border-bottom: 1px solid #ddd; text-align: left; background: #243b8f; color: white;">No</th>
            <th style="padding: 12px; border-bottom: 1px solid #ddd; text-align: left; background: #243b8f; color: white;">Nama</th>
            <th style="padding: 12px; border-bottom: 1px solid #ddd; text-align: left; background: #243b8f; color: white;">Instansi</th>
            <th style="padding: 12px; border-bottom: 1px solid #ddd; text-align: left; background: #243b8f; color: white;">Keperluan</th>
            <th style="padding: 12px; border-bottom: 1px solid #ddd; text-align: left; background: #243b8f; color: white;">Tanggal</th>
        </tr>

        @forelse($tamu as $item)
            <tr>
                <td style="padding: 12px; border-bottom: 1px solid #ddd;">{{ $loop->iteration }}</td>
                <td style="padding: 12px; border-bottom: 1px solid #ddd;">{{ $item->nama }}</td>
                <td style="padding: 12px; border-bottom: 1px solid #ddd;">{{ $item->instansi }}</td>
                <td style="padding: 12px; border-bottom: 1px solid #ddd;">{{ $item->keperluan }}</td>
                <td style="padding: 12px; border-bottom: 1px solid #ddd;">{{ $item->tanggal ?? $item->created_at->format('d-m-Y') }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="5" style="padding: 12px; text-align: center; color: #666;">Belum ada data pengunjung.</td>
            </tr>
        @endforelse
    </table>
</div>

@endsection