@extends('layouts.brand')

@section('title', 'Book Appointment - Bharat Ayur Setu')

@section('styles')
<style>
    .booking-container {
        max-width: 800px;
        margin: 60px auto;
    }
    .doctor-mini-card {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 20px;
        background: var(--bg-light);
        border-radius: 15px;
        margin-bottom: 30px;
    }
    .time-slot-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px;
        margin-top: 15px;
    }
    .time-slot {
        padding: 10px;
        text-align: center;
        border: 2px solid #E2E8F0;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
    }
    .time-slot:hover {
        border-color: var(--ayurveda);
    }
    .time-slot.selected {
        background: var(--ayurveda);
        color: white;
        border-color: var(--ayurveda);
    }
    input[type="radio"] {
        display: none;
    }
</style>
@endsection

@section('content')
<div class="container">
    <div class="booking-container animate-fade-in">
        <div class="section-title" style="text-align: left; margin-bottom: 30px;">
            <h2>Book an Appointment</h2>
            <div class="underline" style="margin-left: 0;"></div>
        </div>

        <div class="doctor-mini-card">
            <span style="font-size: 40px;">👨‍⚕️</span>
            <div>
                <h3 style="margin: 0;">Dr. {{ $doctor->user->name }}</h3>
                <p style="color: var(--text-muted); font-size: 14px;">{{ $doctor->specialization }} specialists in {{ ucfirst($doctor->consultation_type) }}</p>
            </div>
        </div>

        <div class="card">
            <form action="{{ url('/patient/book') }}" method="POST">
                @csrf
                <input type="hidden" name="doctor_profile_id" value="{{ $doctor->id }}">
                <input type="hidden" name="consultation_type" value="{{ $doctor->consultation_type }}">

                <div class="form-group">
                    <label>Select Date</label>
                    <input type="date" name="date" class="form-control" required min="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}">
                </div>

                <div class="form-group" style="margin-top: 30px;">
                    <label>Available Slots</label>
                    <div class="time-slot-grid">
                        @php
                            $slots = ['09:00 AM', '10:00 AM', '11:00 AM', '12:00 PM', '02:00 PM', '03:00 PM', '04:00 PM', '05:00 PM'];
                        @endphp
                        @foreach($slots as $slot)
                            <label class="time-slot">
                                <input type="radio" name="time" value="{{ $slot }}" required>
                                {{ $slot }}
                            </label>
                        @endforeach
                    </div>
                </div>

                <div style="margin-top: 40px; display: flex; gap: 20px;">
                    <a href="{{ url('/patient/doctors') }}" class="btn btn-outline" style="flex: 1; text-align: center;">Cancel</a>
                    <button type="submit" class="btn btn-primary" style="flex: 2;">Confirm Booking</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.querySelectorAll('.time-slot').forEach(slot => {
        slot.addEventListener('click', () => {
            document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));
            slot.classList.add('selected');
        });
    });
</script>
@endsection