@extends('web_site.account.layout')

@section('account_title', trans('site.bookings.reschedule'))

@section('account_content')
    <div class="account-card">
        <div class="account-card__head">
            <div>
                <a href="{{ route('clinic.my-bookings.show', $booking) }}" class="account-back"><i class="far fa-arrow-left"></i> {{ trans('site.bookings.number', ['id' => $booking->id]) }}</a>
                <h2 class="account-card__title mt-1">{{ trans('site.bookings.reschedule_title') }}</h2>
            </div>
        </div>

        <div class="account-note">
            <i class="far fa-calendar-alt"></i>
            <span>
                <strong>{{ trans('site.bookings.current') }}:</strong>
                {{ $booking->doctor->name }} — {{ $booking->scheduled_at->translatedFormat('l j F Y، h:i A') }}
            </span>
        </div>

        <form action="{{ route('clinic.my-bookings.reschedule.form', $booking) }}" method="GET" class="row g-3 align-items-end mb-4">
            <div class="col-md-6">
                <label for="reschedule_date" class="account-label">{{ trans('site.bookings.day') }}</label>
                <input type="date" name="date" id="reschedule_date" value="{{ $date }}" min="{{ now()->format('Y-m-d') }}"
                       class="form-control style2" onchange="this.form.submit()">
            </div>
            <noscript>
                <div class="col-md-3"><button type="submit" class="vs-btn style2">{{ trans('clinic.search.search') }} <i class="far fa-search"></i></button></div>
            </noscript>
        </form>

        <form action="{{ route('clinic.my-bookings.reschedule', $booking) }}" method="POST">
            @csrf
            <input type="hidden" name="date" value="{{ $date }}">

            <p class="account-label mb-2">{{ trans('site.bookings.available') }}</p>
            @if ($slots->isEmpty())
                <div class="account-empty py-4">
                    <i class="far fa-calendar-times"></i>
                    <p class="mb-0">{{ trans('site.bookings.no_slots') }}</p>
                </div>
            @else
                <div class="chip-group slot-group mb-4" role="radiogroup" aria-label="{{ trans('site.bookings.available') }}">
                    @foreach ($slots as $slot)
                        <input type="radio" class="btn-check" name="time" id="slot-{{ $loop->index }}" value="{{ $slot }}" autocomplete="off" required @checked(old('time') === $slot)>
                        <label class="chip chip--plain" for="slot-{{ $loop->index }}" dir="ltr">{{ \Illuminate\Support\Carbon::createFromFormat('H:i', $slot)->translatedFormat('h:i A') }}</label>
                    @endforeach
                </div>
                @error('time')<div class="text-danger small mb-3">{{ $message }}</div>@enderror
                <button type="submit" class="vs-btn style2">{{ trans('site.bookings.confirm_reschedule') }} <i class="far fa-check"></i></button>
            @endif
        </form>
    </div>
@endsection