@extends('layouts.public')

@section('content')
    <div class="text-center mb-8">
        <h1 class="text-2xl font-bold text-gray-900">{{ $club->name }}</h1>
        <p class="text-indigo-600 font-medium">{{ $venue->name }}</p>
    </div>

    <div class="flex flex-col items-center">
        <div class="h-32 w-32 rounded-md overflow-hidden bg-gray-200 border-4 border-white shadow-lg mb-6">
            @if($user->photo_url_medium)
                <img src="{{ $user->photo_url_medium }}" class="h-full w-full object-cover">
            @else
                <div class="h-full w-full flex items-center justify-center text-gray-400">
                    <svg class="h-16 w-16" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                </div>
            @endif
        </div>

        <h2 class="text-3xl font-extrabold text-gray-900 mb-2">{{ $user->name }}</h2>
        <p class="text-gray-500 mb-10">Confirm your attendance for today.</p>

        <div class="w-full space-y-4">
            <form action="{{ route('check-in.store', ['club' => $club->id, 'venue' => $venue->id, 'hash' => request()->hash, 'user' => $user->id]) }}" method="POST">
                @csrf
                <button type="submit" class="w-full flex justify-center py-4 px-4 border border-transparent rounded-2xl shadow-sm text-xl font-bold text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200">
                    Confirm and sign in
                </button>
            </form>

            <a href="{{ route('check-in.public', ['club' => $club->id, 'venue' => $venue->id, 'hash' => request()->hash]) }}" class="w-full flex justify-center py-4 px-4 border border-gray-300 rounded-2xl shadow-sm text-lg font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none transition-all duration-200">
                Cancel
            </a>
        </div>
    </div>
@endsection