@extends('layouts.public')

@section('content')
    <div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $club->name }}</h1>
            <h2 class="text-5xl font-extrabold text-indigo-600 mb-0 tracking-tight">Check-in</h2>
            <p class="text-xl text-gray-500 font-medium">{{ $venue->name }}</p>
        </div>

        <div class="bg-white p-6 rounded-3xl border border-gray-100 mb-10">
            <img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data={{ urlencode($checkInUrl) }}" 
                 alt="Check-in QR Code" 
                 class="w-64 h-64 md:w-80 md:h-80 mx-auto"
                 loading="lazy">
        </div>

        <div class="max-w-xs mx-auto text-gray-400 text-sm leading-relaxed">
            <p>Scan this QR code with your phone camera to sign in for today's session.</p>
        </div>

        <div class="mt-12 no-print">
            <button onclick="window.print()" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-2xl shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none transition-all duration-200">
                <svg class="mr-2 -ml-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                </svg>
                Print QR Code
            </button>
        </div>
    </div>

    <style>
        @media print {
            .no-print {
                display: none;
            }
            body {
                background-color: white !important;
            }
            .min-h-\[60vh\] {
                min-height: auto !important;
                margin-top: 2rem;
            }
        }
    </style>
@endsection