@extends('layouts.app')
@section('title', 'Book a Session — CareerPath')

@push('styles')
<style>
    .booking-hero{padding:60px 5% 50px;background:linear-gradient(180deg,rgba(108,63,232,.15) 0%,transparent 100%);border-bottom:1px solid var(--border)}
    .booking-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;padding:60px 5%;max-width:1100px;margin:0 auto;align-items:start}
    .time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
    .time-slot{padding:10px;border:2px solid var(--border);border-radius:10px;text-align:center;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .2s;background:var(--dark-3)}
    .time-slot:hover,.time-slot.selected{border-color:var(--primary);background:rgba(108,63,232,.12);color:#A78BFA}
    input[type=radio].time-radio:checked+.time-slot{border-color:var(--primary);background:rgba(108,63,232,.15);color:#A78BFA}
    input[type=radio].time-radio{display:none}
    .meet-option{display:flex;align-items:center;gap:14px;padding:14px 18px;border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s;margin-bottom:10px;background:var(--dark-3)}
    .meet-option:hover{border-color:var(--primary)}
    input[type=radio].mr:checked+.meet-option{border-color:var(--primary);background:rgba(108,63,232,.1)}
    input[type=radio].mr{display:none}
    @media(max-width:1024px){.booking-layout{grid-template-columns:1fr}}
    @media(max-width:640px){.time-grid{grid-template-columns:repeat(3,1fr)}}
</style>
@endpush

@section('content')
<div class="booking-hero">
    <div class="container">
        <h1 style="font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;margin-bottom:8px">📅 Book a Session</h1>
        <p style="color:var(--text-muted)">Schedule your career counseling session with {{ $counselor->user->name ?? 'the counselor' }}</p>
    </div>
</div>

<div class="booking-layout">
    <div>
        <form action="{{ route('bookings.store', $counselor->id) }}" method="POST">
            @csrf
            @if($errors->any())
            <div class="alert alert-danger" style="margin-bottom:20px"><i class="fas fa-circle-xmark"></i> {{ $errors->first() }}</div>
            @endif

            <div class="card" style="margin-bottom:20px">
                <h3 style="font-weight:700;margin-bottom:16px"><i class="fas fa-calendar" style="color:var(--primary);margin-right:8px"></i>Select Date</h3>
                <input type="date" name="booking_date" class="form-control" min="{{ date('Y-m-d', strtotime('+1 day')) }}" value="{{ old('booking_date') }}" required>
            </div>

            <div class="card" style="margin-bottom:20px">
                <h3 style="font-weight:700;margin-bottom:16px"><i class="fas fa-clock" style="color:var(--secondary);margin-right:8px"></i>Choose Time</h3>
                <div class="time-grid">
                    @foreach(['09:00','10:00','11:00','12:00','14:00','15:00','16:00','17:00'] as $t)
                    <div>
                        <input type="radio" name="booking_time" value="{{ $t }}" id="ts{{ str_replace(':','',$t) }}" class="time-radio" {{ old('booking_time')==$t?'checked':'' }} required>
                        <label for="ts{{ str_replace(':','',$t) }}" class="time-slot">{{ $t }}</label>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="card" style="margin-bottom:20px">
                <h3 style="font-weight:700;margin-bottom:16px"><i class="fas fa-video" style="color:var(--accent);margin-right:8px"></i>Meeting Type</h3>
                <input type="radio" name="meeting_type" value="online" id="mo" class="mr" {{ old('meeting_type','online')=='online'?'checked':'' }}>
                <label for="mo" class="meet-option">
                    <span style="font-size:1.5rem">📹</span>
                    <div><div style="font-weight:700">Online</div><div style="font-size:.78rem;color:var(--text-muted)">Video call link sent on confirmation</div></div>
                </label>
                <input type="radio" name="meeting_type" value="in-person" id="mi" class="mr" {{ old('meeting_type')=='in-person'?'checked':'' }}>
                <label for="mi" class="meet-option" style="margin:0">
                    <span style="font-size:1.5rem">🏢</span>
                    <div><div style="font-weight:700">In-Person</div><div style="font-size:.78rem;color:var(--text-muted)">Location shared after confirmation</div></div>
                </label>
            </div>

            <div class="card" style="margin-bottom:24px">
                <h3 style="font-weight:700;margin-bottom:12px"><i class="fas fa-comment" style="color:var(--secondary);margin-right:8px"></i>Message (Optional)</h3>
                <textarea name="student_message" class="form-control" rows="4" placeholder="Describe your career questions or goals...">{{ old('student_message') }}</textarea>
            </div>

            @guest
            <div class="alert alert-warning" style="margin-bottom:20px">
                <i class="fas fa-triangle-exclamation"></i>
                Please <a href="{{ route('login') }}" style="color:inherit;font-weight:700">login</a> or <a href="{{ route('register') }}" style="color:inherit;font-weight:700">register</a> to confirm your booking.
            </div>
            @endguest

            <button type="submit" class="btn btn-primary btn-lg btn-block" @guest disabled @endguest>
                <i class="fas fa-calendar-check"></i> Confirm Booking — PKR {{ number_format($counselor->session_fee ?? 0) }}
            </button>
        </form>
    </div>

    <div>
        <div class="card">
            <div style="text-align:center;padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:20px">
                <div style="width:70px;height:70px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700;color:white;margin:0 auto 12px">
                    {{ substr($counselor->user->name??'C',0,1) }}
                </div>
                <div style="font-weight:700;font-size:1rem">{{ $counselor->user->name ?? 'Counselor' }}</div>
                <div style="font-size:.8rem;color:var(--text-muted);margin-top:4px">{{ $counselor->specialization }}</div>
                <div style="color:#FBBF24;font-size:.85rem;margin-top:8px">★★★★★ <span style="color:var(--text-muted)">({{ $counselor->rating ?? '4.5' }})</span></div>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:.875rem;padding:8px 0;border-bottom:1px solid var(--border)">
                <span style="color:var(--text-muted)">Session Fee</span>
                <span style="font-weight:700;color:var(--accent);font-size:1.1rem">PKR {{ number_format($counselor->session_fee ?? 0) }}</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:.875rem;padding:8px 0;border-bottom:1px solid var(--border)">
                <span style="color:var(--text-muted)">Experience</span>
                <span style="font-weight:600">{{ $counselor->experience_years ?? '—' }} years</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:.875rem;padding:8px 0">
                <span style="color:var(--text-muted)">Session Length</span>
                <span style="font-weight:600">60 minutes</span>
            </div>
        </div>
    </div>
</div>
@endsection