@extends('web_site.layouts.master')

@php
    $clinic = $doctorBranch->clinicProfile;
    $pageQuery = ['doctor_id' => $doctor->id, 'clinic_profile_id' => $doctorBranch->clinic_profile_id];
    $selectedDate = \Illuminate\Support\Carbon::parse($date);
    $price = $prices->get($type);
@endphp

@section('content')
    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">{{ trans('site.booking.title') }}</h1>
        </div>
    </section>

    <section class="account-area">
        <div class="container">
            <form action="{{ route('clinic.bookings.store') }}" method="POST" id="BookingForm">
                @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 }}">

                <div class="row g-4">
                    <div class="col-lg-8">
                        @if ($prices->isEmpty())
                            <div class="account-note account-note--warning"><i class="far fa-info-circle"></i><span>{{ trans('site.booking.not_priced') }}</span></div>
                        @endif

                        {{-- 1. Consultation type --}}
                        <div class="account-card">
                            <h2 class="booking-step"><span>1</span>{{ trans('site.booking.step_type') }}</h2>
                            <div class="row g-3">
                                @foreach (['visit' => 'fa-hospital-user', 'online' => 'fa-video'] as $option => $icon)
                                    @continue(! $prices->has($option))
                                    <div class="col-sm-6">
                                        <a href="{{ route('clinic.bookings.create', $pageQuery + ['type' => $option, 'date' => $date]) }}"
                                           class="type-card {{ $type === $option ? 'active' : '' }}" @if ($type === $option) aria-current="true" @endif>
                                            <i class="far {{ $icon }}"></i>
                                            <span class="type-card__body">
                                                <strong>{{ trans('clinic.bookings.'.$option) }}</strong>
                                                <small>{{ trans('site.booking.'.$option.'_hint') }}</small>
                                            </span>
                                            <span class="type-card__price">{{ number_format((float) $prices[$option]->total_price, 0) }} {{ trans('site.bookings.currency') }}</span>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        {{-- 2. Day --}}
                        <div class="account-card">
                            <h2 class="booking-step"><span>2</span>{{ trans('site.booking.step_day') }}</h2>
                            <div class="day-strip">
                                @foreach ($days as $day)
                                    @php($works = in_array($day->dayOfWeek, $workingDays, true))
                                    @php($isSelected = $day->isSameDay($selectedDate))
                                    {{-- Days the doctor does not work stay visible but are not links. --}}
                                    <a @if ($works) href="{{ route('clinic.bookings.create', $pageQuery + ['type' => $type, 'date' => $day->toDateString()]) }}" @else aria-disabled="true" title="{{ trans('site.booking.day_off') }}" @endif
                                       class="day-chip {{ $isSelected ? 'active' : '' }} {{ $works ? '' : 'is-off' }}" @if ($isSelected) aria-current="date" @endif>
                                        <small>{{ $day->isToday() ? trans('site.booking.today') : $day->translatedFormat('D') }}</small>
                                        <strong>{{ $day->format('j') }}</strong>
                                        <small>{{ $day->translatedFormat('M') }}</small>
                                    </a>
                                @endforeach
                            </div>
                            <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
                                <label for="other_day" class="account-label mb-0">{{ trans('site.booking.other_day') }}</label>
                                <input type="date" id="other_day" value="{{ $date }}" min="{{ today()->toDateString() }}" class="form-control style2 other-day"
                                       data-base-url="{{ route('clinic.bookings.create', $pageQuery + ['type' => $type]) }}">
                            </div>
                        </div>

                        {{-- 3. Time --}}
                        <div class="account-card">
                            <h2 class="booking-step"><span>3</span>{{ trans('site.booking.step_time') }} <small>{{ $selectedDate->translatedFormat('l j F') }}</small></h2>
                            @if ($slots->isEmpty())
                                <div class="account-empty py-4">
                                    <i class="far fa-calendar-times"></i>
                                    <p class="{{ $nextAvailable ? '' : 'mb-0' }}">{{ trans('site.bookings.no_slots') }}</p>
                                    @if ($nextAvailable)
                                        <a href="{{ route('clinic.bookings.create', $pageQuery + ['type' => $type, 'date' => $nextAvailable->toDateString()]) }}" class="booking-action booking-action--soft">
                                            <i class="far fa-calendar-check"></i> {{ trans('site.booking.next_available', ['date' => $nextAvailable->translatedFormat('l j F')]) }}
                                        </a>
                                    @endif
                                </div>
                            @else
                                <div class="chip-group slot-group" role="radiogroup" aria-label="{{ trans('site.booking.step_time') }}">
                                    @foreach ($slots as $slot)
                                        @php($slotLabel = \Illuminate\Support\Carbon::createFromFormat('H:i', $slot)->translatedFormat('h:i A'))
                                        <input type="radio" class="btn-check" name="time" id="slot-{{ $loop->index }}" value="{{ $slot }}" data-label="{{ $slotLabel }}" autocomplete="off" required @checked(old('time') === $slot)>
                                        <label class="chip chip--plain" for="slot-{{ $loop->index }}" dir="ltr">{{ $slotLabel }}</label>
                                    @endforeach
                                </div>
                                @error('time')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
                            @endif
                        </div>
                    </div>

                    {{-- Summary --}}
                    <div class="col-lg-4">
                        <aside class="account-card booking-summary">
                            <h2 class="account-card__title mb-3">{{ trans('site.booking.summary') }}</h2>
                            <div class="doctor-strip mb-3">
                                <img src="{{ $doctor->photo_path ? asset($doctor->photo_path) : asset('assets_web/img/team/img1.webp') }}" alt="{{ $doctor->name }}" loading="lazy">
                                <div class="doctor-strip__who">
                                    <h3>{{ $doctor->name }}</h3>
                                    <span>{{ $doctor->specialty?->name }}</span>
                                </div>
                            </div>
                            <dl class="summary-list booking-summary__list">
                                <dt>{{ trans('site.bookings.place') }}</dt>
                                <dd>{{ $clinic->name }}@if ($clinic->branch) — {{ $clinic->branch->name }}@endif</dd>
                                <dt>{{ trans('site.bookings.type') }}</dt>
                                <dd>{{ trans('clinic.bookings.'.$type) }}</dd>
                                <dt>{{ trans('site.bookings.date') }}</dt>
                                <dd>{{ $selectedDate->translatedFormat('l j F Y') }}</dd>
                                <dt>{{ trans('site.bookings.time') }}</dt>
                                <dd data-summary-time>{{ trans('site.booking.not_chosen') }}</dd>
                            </dl>
                            <div class="booking-summary__total">
                                <span>{{ trans('site.bookings.total') }}</span>
                                <strong>{{ $price ? number_format((float) $price->total_price, 0).' '.trans('site.bookings.currency') : '—' }}</strong>
                            </div>
                            <button type="submit" class="vs-btn style2 w-100" @disabled($slots->isEmpty() || ! $price)>{{ trans('site.booking.confirm') }} <i class="far fa-check"></i></button>
                            <p class="small text-muted mt-3 mb-0">{{ trans('site.booking.pay_note') }}</p>
                        </aside>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection

@section('js')
    <script>
        (function () {
            // Show the chosen time in the summary.
            var summaryTime = document.querySelector('[data-summary-time]');
            document.querySelectorAll('#BookingForm input[name="time"]').forEach(function (radio) {
                radio.addEventListener('change', function () { summaryTime.textContent = radio.getAttribute('data-label'); });
                if (radio.checked) { summaryTime.textContent = radio.getAttribute('data-label'); }
            });

            // A day beyond the strip reloads the page for that day.
            var otherDay = document.getElementById('other_day');
            otherDay.addEventListener('change', function () {
                if (otherDay.value) {
                    window.location = otherDay.getAttribute('data-base-url') + '&date=' + encodeURIComponent(otherDay.value);
                }
            });
        })();
    </script>
@endsection