@extends('web_site.layouts.master')

@section('content')
    <main class="main">
        @include('web_site.partials.alerts')
        <section class="py-100">
            <div class="container">
                <div class="site-heading">
                    <span class="site-title-tagline">{{ $doctor->name }} — {{ $doctorBranch->clinicProfile->branch->name }} — {{ $doctorBranch->clinicProfile->name }}</span>
                    <h1 class="site-title">{{ trans('clinic.bookings.choose_slot') }}</h1>
                </div>

                <form action="{{ route('clinic.bookings.create') }}" method="GET" class="row g-3 mb-4 p-4 border rounded">
                    <input type="hidden" name="doctor_id" value="{{ $doctor->id }}">
                    <input type="hidden" name="clinic_profile_id" value="{{ $doctorBranch->clinic_profile_id }}">
                    <div class="col-md-4">
                        <label class="form-label">{{ trans('clinic.bookings.type') }}</label>
                        <select name="type" class="form-select" onchange="this.form.submit()">
                            <option value="visit" @selected($type === 'visit')>{{ trans('clinic.bookings.visit') }}</option>
                            <option value="online" @selected($type === 'online')>{{ trans('clinic.bookings.online') }}</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{{ trans('clinic.bookings.date') }}</label>
                        <input type="date" name="date" value="{{ $date }}" min="{{ now()->format('Y-m-d') }}" class="form-control" onchange="this.form.submit()">
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <button type="submit" class="theme-btn w-100">{{ trans('clinic.search.search') }}</button>
                    </div>
                </form>

                <form action="{{ route('clinic.bookings.store') }}" method="POST" class="p-4 border rounded">
                    @csrf
                    <input type="hidden" name="doctor_id" value="{{ $doctor->id }}">
                    <input type="hidden" name="clinic_profile_id" value="{{ $doctorBranch->clinic_profile_id }}">
                    <input type="hidden" name="type" value="{{ $type }}">
                    <input type="hidden" name="date" value="{{ $date }}">

                    <h4 class="mb-3">{{ trans('clinic.bookings.available_slots') }}</h4>

                    @if ($slots->isEmpty())
                        <div class="alert alert-info">{{ trans('clinic.bookings.no_slots') }}</div>
                    @else
                        <div class="d-flex flex-wrap gap-2 mb-4">
                            @foreach ($slots as $slot)
                                <div class="form-check form-check-inline border rounded px-3 py-2">
                                    <input class="form-check-input" type="radio" name="time" id="slot-{{ $slot }}" value="{{ $slot }}" required>
                                    <label class="form-check-label" for="slot-{{ $slot }}">{{ $slot }}</label>
                                </div>
                            @endforeach
                        </div>
                        <button type="submit" class="theme-btn">{{ trans('clinic.bookings.confirm_booking') }}</button>
                    @endif
                </form>
            </div>
        </section>
    </main>
@endsection