@extends('layouts.app')

@section('title', __('appointments::messages.appointments.book'))

@section('content')
    <div class="mb-4">
        <h1 class="px-title">{{ __('appointments::messages.appointments.book') }}</h1>
        <p class="px-subtitle">{{ __('appointments::messages.appointments.book_subtitle') }}</p>
    </div>

    <div class="px-panel p-3 p-md-4">
        <form method="POST" action="{{ route('appointments.store') }}" data-clinic-booking>
            @csrf

            <div class="row g-3 mb-3">
                <div class="col-12 col-md-6">
                    {{--
                        The patient is chosen by ULID through a type-ahead
                        against the Patients module's published directory. No
                        internal id ever reaches the form, and Appointments
                        never touches a Patient model to render this.
                    --}}
                    <label for="patient-search" class="px-field-label">
                        {{ __('appointments::messages.appointments.patient') }} <span class="text-danger">*</span>
                    </label>

                    @if ($patient !== null)
                        <div class="px-note d-flex justify-content-between align-items-center gap-2">
                            <span>
                                <strong>{{ $patient->name }}</strong>
                                <span class="px-hint font-monospace">{{ $patient->mrn }}</span>
                            </span>
                            <a href="{{ route('appointments.create') }}" class="btn btn-sm px-btn-ghost">{{ __('common.reset') }}</a>
                        </div>
                        <input type="hidden" name="patient" value="{{ $patient->ulid }}">
                    @else
                        <input type="search" class="form-control px-input @error('patient') is-invalid @enderror"
                               id="patient-search" autocomplete="off"
                               data-clinic-patient-picker
                               data-source="{{ route('patients.search') }}"
                               placeholder="{{ __('common.search_placeholder') }}">
                        <input type="hidden" name="patient" data-clinic-patient-value value="{{ old('patient') }}">
                        <ul class="list-group mt-1 d-none" data-clinic-patient-results></ul>

                        {{--
                            Nobody by that name.

                            A receptionist with a new patient at the desk used to
                            get an empty box and no way forward from it. The
                            search term travels to the register form, so the name
                            just typed is not typed again.
                        --}}
                        <div class="px-note mt-2 d-none" data-clinic-patient-none>
                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                                <span class="px-hint mb-0">{{ __('appointments::messages.appointments.no_patient_match') }}</span>

                                <a class="btn btn-sm px-btn-primary d-inline-flex align-items-center gap-2"
                                   data-clinic-patient-register
                                   data-register-url="{{ route('patients.create') }}"
                                   href="{{ route('patients.create') }}">
                                    <i class="bi bi-person-plus" aria-hidden="true"></i>
                                    {{ __('appointments::messages.appointments.register_patient') }}
                                </a>
                            </div>
                        </div>

                        @error('patient')<div class="text-danger small">{{ $message }}</div>@enderror
                    @endif
                </div>

                {{-- The date comes before the clinician on purpose: which day
                     decides who is in, not the other way round. --}}
                <div class="col-12 col-md-6">
                    <x-form.input name="date" type="date" :label="__('appointments::messages.schedules.date')"
                                  :value="now()->toDateString()" data-clinic-date />
                </div>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-12 col-md-4">
                    <label for="field-doctor" class="px-field-label">
                        {{ __('appointments::messages.appointments.doctor') }}
                        <span class="text-danger" aria-hidden="true">*</span>
                    </label>

                    {{--
                        Filled from the date by Clinic.booking. Only clinicians
                        with a free slot that day are offered, so choosing one
                        can never lead to an empty list of times.
                    --}}
                    <select class="form-select px-select @error('doctor') is-invalid @enderror"
                            id="field-doctor" name="doctor" required
                            data-clinic-doctor
                            data-source="{{ route('appointments.clinicians') }}"
                            data-placeholder="{{ __('appointments::messages.appointments.pick_date_first') }}"
                            data-empty="{{ __('appointments::messages.appointments.none_available') }}"
                            data-free="{{ __('appointments::messages.appointments.slots_free') }}">
                        <option value="">{{ __('appointments::messages.appointments.pick_date_first') }}</option>
                    </select>

                    @error('doctor')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-12 col-md-8">
                    <label class="px-field-label">{{ __('appointments::messages.appointments.time') }}</label>

                    {{--
                        Slots come from the availability endpoint as ISO-8601
                        instants, so the browser never reasons about the clinic's
                        timezone and cannot get it wrong.
                    --}}
                    <div class="px-slotbox" data-clinic-slots
                         data-source="{{ route('appointments.slots') }}"
                         data-empty="{{ __('appointments::messages.appointments.no_slots') }}"
                         data-prompt="{{ __('appointments::messages.appointments.pick_doctor') }}">
                        <span class="px-hint">{{ __('appointments::messages.appointments.pick_doctor') }}</span>
                    </div>

                    <input type="hidden" name="starts_at" data-clinic-slot-value value="{{ old('starts_at') }}">
                    @error('starts_at')<div class="text-danger small">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-12 col-md-4">
                    <x-form.select name="source" :label="__('appointments::messages.appointments.source')"
                                   :options="$sources"
                                   :selected="\App\Modules\Appointments\Enums\AppointmentSource::FrontDesk->value" required />
                </div>
                <div class="col-12 col-md-8">
                    <x-form.input name="reason" :label="__('appointments::messages.appointments.reason')" />
                </div>
            </div>

            <div class="d-flex flex-wrap gap-2 pt-2">
                <button type="submit" class="btn px-btn-primary d-inline-flex align-items-center gap-2">
                    <i class="bi bi-calendar-plus" aria-hidden="true"></i>
                    {{ __('appointments::messages.appointments.book') }}
                </button>
                <a href="{{ route('appointments.index') }}" class="btn px-btn-ghost">{{ __('common.cancel') }}</a>
            </div>
        </form>
    </div>
@endsection