@extends('layouts.dashboard')

@section('title', 'Check-in / Check-out')
@section('eyebrow', 'Transaksi')

@section('content')
<div class="mb-5 grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
    <div>
        <p class="text-sm font-bold text-slate-500">Pantau pengunjung aktif, durasi kunjungan, dan riwayat penggunaan tiket.</p>
    </div>
    <a href="{{ route('admin.checkins.scan') }}" class="inline-flex items-center justify-center gap-2 rounded-md bg-slate-950 px-4 py-3 text-sm font-black text-white shadow-sm hover:bg-sky-700">
        <i data-lucide="scan-line" class="h-4 w-4"></i>
        Buka Kamera Scan
    </a>
</div>

<section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
    <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <p class="text-xs font-black uppercase text-sky-700">Live pool</p>
            <h2 class="mt-1 text-xl font-black text-slate-950">Pengunjung sedang di kolam</h2>
        </div>
        <span class="rounded-md bg-sky-50 px-3 py-2 text-sm font-black text-sky-700">{{ $activeVisitors->count() }} aktif</span>
    </div>

    <div class="mt-5 grid gap-3">
        @forelse($activeVisitors as $visitor)
            <div class="grid gap-3 rounded-lg border border-slate-200 bg-slate-50 p-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
                <div class="min-w-0">
                    <p class="truncate font-black text-slate-950">{{ $visitor->user?->name ?? 'Pengunjung' }}</p>
                    <p class="mt-1 text-sm font-semibold text-slate-600">
                        {{ $visitor->ticket_code }} &middot; Masuk {{ optional($visitor->check_in_time)->format('H:i') }}
                    </p>
                </div>
                <form method="POST" action="{{ route('admin.checkins.checkout', $visitor) }}">
                    @csrf
                    <button class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-emerald-700 px-4 py-2.5 text-sm font-black text-white hover:bg-emerald-800 sm:w-auto">
                        <i data-lucide="log-out" class="h-4 w-4"></i>
                        Check-out
                    </button>
                </form>
            </div>
        @empty
            <p class="rounded-lg bg-slate-50 p-4 text-sm font-semibold text-slate-500">Tidak ada pengunjung aktif.</p>
        @endforelse
    </div>
</section>

<section class="mt-6">
    <div class="mb-3 flex items-center justify-between gap-3">
        <h2 class="text-lg font-black text-slate-950">Riwayat check-in</h2>
        <a href="{{ route('admin.checkins.scan') }}" class="text-sm font-black text-sky-700 hover:text-slate-950">Scan lagi</a>
    </div>

    <div class="grid gap-3 md:hidden">
        @foreach($records as $record)
            <article class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
                <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <p class="truncate font-black text-slate-950">{{ $record->ticket_code }}</p>
                        <p class="mt-1 truncate text-sm font-semibold text-slate-600">{{ $record->user?->name ?? 'Pengunjung' }}</p>
                    </div>
                    <x-status-badge :status="$record->status" />
                </div>
                <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                    <div class="rounded-md bg-slate-50 p-3">
                        <p class="text-xs font-black uppercase text-slate-500">Tanggal</p>
                        <p class="mt-1 font-bold text-slate-900">{{ $record->visit_date->format('d/m/Y') }}</p>
                    </div>
                    <div class="rounded-md bg-slate-50 p-3">
                        <p class="text-xs font-black uppercase text-slate-500">Durasi</p>
                        <p class="mt-1 font-bold text-slate-900">{{ $record->duration_minutes ? $record->duration_minutes.' menit' : '-' }}</p>
                    </div>
                    <div class="rounded-md bg-slate-50 p-3">
                        <p class="text-xs font-black uppercase text-slate-500">Masuk</p>
                        <p class="mt-1 font-bold text-slate-900">{{ optional($record->check_in_time)->format('H:i') ?? '-' }}</p>
                    </div>
                    <div class="rounded-md bg-slate-50 p-3">
                        <p class="text-xs font-black uppercase text-slate-500">Keluar</p>
                        <p class="mt-1 font-bold text-slate-900">{{ optional($record->check_out_time)->format('H:i') ?? '-' }}</p>
                    </div>
                </div>
            </article>
        @endforeach
    </div>

    <div class="hidden overflow-x-auto rounded-lg border border-slate-200 bg-white shadow-sm md:block">
        <table class="w-full text-left text-sm">
            <thead class="bg-slate-50 text-xs font-black uppercase text-slate-500">
                <tr>
                    <th class="p-3">Tiket</th>
                    <th class="p-3">Nama</th>
                    <th class="p-3">Tanggal</th>
                    <th class="p-3">Masuk</th>
                    <th class="p-3">Keluar</th>
                    <th class="p-3">Durasi</th>
                    <th class="p-3">Status</th>
                </tr>
            </thead>
            <tbody>
            @foreach($records as $record)
                <tr class="border-t border-slate-100">
                    <td class="p-3 font-black text-slate-950">{{ $record->ticket_code }}</td>
                    <td class="p-3 font-semibold text-slate-700">{{ $record->user?->name ?? 'Pengunjung' }}</td>
                    <td class="p-3 text-slate-600">{{ $record->visit_date->format('d/m/Y') }}</td>
                    <td class="p-3 text-slate-600">{{ optional($record->check_in_time)->format('H:i') ?? '-' }}</td>
                    <td class="p-3 text-slate-600">{{ optional($record->check_out_time)->format('H:i') ?? '-' }}</td>
                    <td class="p-3 text-slate-600">{{ $record->duration_minutes ? $record->duration_minutes.' menit' : '-' }}</td>
                    <td class="p-3"><x-status-badge :status="$record->status" /></td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</section>

<div class="mt-4">{{ $records->links() }}</div>
@endsection