@extends('layouts.portal')

@section('content')
<div class="container py-5" style="max-width: 1200px; margin: 0 auto; padding: 4rem 1.5rem;">
    <h1 style="font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; font-weight: 800; color: #FFF; text-align: center; margin-bottom: 2rem;">
        Book a <span>Therapy Session</span>
    </h1>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;">
        @foreach($counsellors as $c)
            <div style="background: var(--card-bg, rgba(17, 24, 39, 0.65)); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: 24px; padding: 2rem; text-align: center;">
                <div style="font-size: 3rem; margin-bottom: 1rem;">🧑‍⚕️</div>
                <h3 style="color: #FFF; margin-bottom: 0.4rem; font-size: 1.3rem;">{{ $c->first_name }}</h3>
                <p style="color: var(--accent, #10B981); font-size: 0.9rem; margin-bottom: 1.5rem;">{{ $c->specialization ?? 'Psychologist & Counselor' }}</p>
                <a href="{{ route('booking.create', $c->id) }}" class="btn btn-primary" style="display: block; padding: 0.7rem 1.2rem; border-radius: 50px; text-decoration: none; font-weight: 600;"
                   onclick="return handleSelectAndBook(event);"
                >
                    Select & Book
                </a>
            </div>
        @endforeach
    </div>
</div>

<script>
    function handleSelectAndBook(event) {
        @if(!Auth::check())
            event.preventDefault();
            alert('Please login first to book an appointment');
            window.location.href = "{!! route('portal.customer.login', ['simulate_host' => request()->query('simulate_host')]) !!}";
            return false;
        @endif
        return true;
    }
</script>
@endsection