@extends('layouts.app')
@section('title', 'Book Session — ' . ($counselor->user->name ?? 'Counselor'))

@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{border-color:var(--primary);background:rgba(108,63,232,.1);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}
    .meeting-type-card{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)}
    .meeting-type-card:hover{border-color:var(--primary)}
    input[type=radio].mt-radio:checked + .meeting-type-card{border-color:var(--primary);background:rgba(108,63,232,.1)}
    input[type=radio].mt-radio{display:none}
    .meeting-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
    @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">
        <div style="display:flex;gap:6px;font-size:.82rem;color:var(--text-muted);margin-bottom:20px;align-items:center">
            <a href="{{ route('counselors.index') }}" style="color:var(--text-muted);text-decoration:none">Counselors</a>
            <i class="fas fa-chevron-right fa-xs"></i>
            <span style="color:var(--primary)">Book Session</span>
        </div>
        <h1 style="font-family:'Outfit',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">
    <!-- FORM -->
    <div>
        <form action="{{ route('dashboard.book.store', $counselor->id) }}" method="POST">
            @csrf

            @if($errors->any())
            <div class="alert alert-danger"><i class="fas fa-circle-xmark"></i> {{ $errors->first() }}</div>
            @endif

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

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

            <!-- MEETING TYPE -->
            <div class="card" style="margin-bottom:20px">
                <h3 style="font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:8px">
                    <i class="fas fa-video" style="color:var(--accent)"></i> Meeting Type
                </h3>
                <div>
                    <input type="radio" name="meeting_type" value="online" id="mt_online" class="mt-radio" {{ old('meeting_type','online')=='online'?'checked':'' }}>
                    <label for="mt_online" class="meeting-type-card">
                        <div class="meeting-icon" style="background:rgba(108,63,232,.15)">📹</div>
                        <div>
                            <div style="font-weight:700">Online (Video Call)</div>
                            <div style="font-size:.8rem;color:var(--text-muted)">Google Meet / Zoom link sent on confirmation</div>
                        </div>
                    </label>
                </div>
                <div>
                    <input type="radio" name="meeting_type" value="in-person" id="mt_inperson" class="mt-radio" {{ old('meeting_type')=='in-person'?'checked':'' }}>
                    <label for="mt_inperson" class="meeting-type-card" style="margin:0">
                        <div class="meeting-icon" style="background:rgba(0,212,161,.12)">🏢</div>
                        <div>
                            <div style="font-weight:700">In-Person</div>
                            <div style="font-size:.8rem;color:var(--text-muted)">Location shared after confirmation</div>
                        </div>
                    </label>
                </div>
            </div>

            <!-- MESSAGE -->
            <div class="card" style="margin-bottom:24px">
                <h3 style="font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px">
                    <i class="fas fa-message" style="color:var(--secondary)"></i> Your Message (Optional)
                </h3>
                <textarea name="student_message" class="form-control" rows="4" placeholder="Tell the counselor about your career goals, concerns, or questions...">{{ old('student_message') }}</textarea>
            </div>

            <button type="submit" class="btn btn-primary btn-lg btn-block">
                <i class="fas fa-calendar-check"></i> Confirm Booking
            </button>
        </form>
    </div>

    <!-- SIDEBAR -->
    <div>
        <div class="card" style="margin-bottom:20px">
            <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.6rem;font-weight:700;color:white;margin:0 auto 12px;border:3px solid rgba(108,63,232,.3)">
                    {{ 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:6px">
                    @for($s=0;$s<5;$s++) {{ $s < round($counselor->rating??4) ? '★' : '☆' }} @endfor
                    <span style="color:var(--text-muted)">({{ $counselor->rating ?? '4.5' }})</span>
                </div>
            </div>
            <div style="display:flex;flex-direction:column;gap:12px">
                <div style="display:flex;justify-content:space-between;font-size:.875rem">
                    <span style="color:var(--text-muted)">Session Fee</span>
                    <span style="font-weight:700;color:var(--accent);font-size:1rem">PKR {{ number_format($counselor->session_fee ?? 0) }}</span>
                </div>
                <div style="display:flex;justify-content:space-between;font-size:.875rem">
                    <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">
                    <span style="color:var(--text-muted)">Status</span>
                    <span class="badge badge-success">Available</span>
                </div>
            </div>
        </div>

        <div style="background:rgba(0,212,161,.08);border:1px solid rgba(0,212,161,.2);border-radius:14px;padding:18px">
            <h4 style="font-weight:700;font-size:.9rem;margin-bottom:10px;color:#00D4A1"><i class="fas fa-circle-check"></i> What to Expect</h4>
            <ul style="list-style:none;font-size:.82rem;color:var(--text-muted);display:flex;flex-direction:column;gap:7px">
                <li><i class="fas fa-check fa-xs" style="color:#00D4A1;margin-right:8px"></i> 60-minute guided session</li>
                <li><i class="fas fa-check fa-xs" style="color:#00D4A1;margin-right:8px"></i> Personalized career advice</li>
                <li><i class="fas fa-check fa-xs" style="color:#00D4A1;margin-right:8px"></i> Written session summary</li>
                <li><i class="fas fa-check fa-xs" style="color:#00D4A1;margin-right:8px"></i> Free follow-up Q&A</li>
            </ul>
        </div>
    </div>
</div>
@endsection