@extends('layouts.app')
@section('title', __('Book') . ' ' . $service->name . ' - ' . $settings->site_name)

@section('content')
<div class="container py-5" style="max-width:780px;">
    <div class="be-step-indicator">
        <div class="step active"><span class="num">1</span> <span class="label">{{__('Choose time')}}</span></div>
        <div class="divider"></div>
        <div class="step"><span class="num">2</span> <span class="label">{{__('Log in')}}</span></div>
        <div class="divider"></div>
        <div class="step"><span class="num">3</span> <span class="label">{{__('Pay & confirm')}}</span></div>
    </div>

    <div class="be-panel">
        <div class="d-flex align-items-center gap-3 mb-4">
            <span class="be-cat-icon"><i class="bi {{ $service->category->icon ?? 'bi-stars' }}"></i></span>
            <div>
                <h3 class="fw-bold mb-0">{{ $service->name }}</h3>
                <div class="text-muted small">{{ $service->duration_minutes }} {{__('min')}} &middot; {{ $service->formattedPrice() }}</div>
            </div>
        </div>

        @if ($errors->any())
        <div class="alert alert-danger be-alert">
            <ul class="mb-0 ps-3">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        </div>
        @endif

        @if ($staffOptions->isEmpty())
        <p class="text-muted">{{__('No specialists are currently assigned to this service. Please check back later')}}</p>
        @else
        <form method="POST" action="{{ route('booking.store', $service->slug) }}" id="booking-wizard" data-slots-url="{{ route('booking.slots', $service->slug) }}">
            @csrf
            <div class="row g-3 mb-3">
                @if ($showStaffSelection)
                <div class="col-md-6">
                    <label class="form-label">{{__('Specialist')}}</label>
                    <select id="staff_id" name="staff_id" class="form-select" required>
                        <option value="">{{__('Choose a specialist')}}</option>
                        @foreach ($staffOptions as $staff)
                        <option value="{{ $staff->id }}" {{ old('staff_id') == $staff->id ? 'selected' : '' }}>{{ $staff->name }} - {{ $staff->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{__('Date')}}</label>
                    <input type="date" id="booking_date" name="date" class="form-control" min="{{ now()->toDateString() }}" max="{{ now()->addDays($settings->maxAdvanceDays())->toDateString() }}" value="{{ old('date') }}" required>
                </div>
                @else
                <div class="col-12">
                    <label class="form-label">{{__('Date')}}</label>
                    <input type="date" id="booking_date" name="date" class="form-control" min="{{ now()->toDateString() }}" max="{{ now()->addDays($settings->maxAdvanceDays())->toDateString() }}" value="{{ old('date') }}" required>
                    <div class="form-text">{{__('We will automatically assign you to an available specialist for your chosen time')}}</div>
                </div>
                @endif
            </div>

            <label class="form-label">{{__('Available times')}}</label>
            <div id="slots-container" class="mb-2"></div>
            <p id="selected-slot-summary" class="text-primary fw-bold small mb-4"></p>
            <input type="hidden" id="start_time" name="start_time" value="{{ old('start_time') }}">

            <div class="row g-3 mb-3">
                <div class="col-md-6">
                    <label class="form-label">{{__('Your name')}}</label>
                    <input type="text" name="customer_name" class="form-control" value="{{ old('customer_name', $authUser->name ?? '') }}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{__('Phone (optional)')}}</label>
                    <input type="text" name="customer_phone" class="form-control" value="{{ old('customer_phone', $authUser->phone ?? '') }}">
                </div>
            </div>
            <div class="mb-4">
                <label class="form-label">{{__('Notes (optional)')}}</label>
                <textarea name="notes" class="form-control" rows="3">{{ old('notes') }}</textarea>
            </div>

            @if (isset($authUser))
            <button type="submit" id="booking-submit" class="btn be-btn-primary w-100 btn-lg" disabled>{{__('Continue to Checkout')}}</button>
            @else
            <div class="alert alert-warning be-alert">
                <i class="bi bi-info-circle me-1"></i> {{__('You will need to log in or create an account to confirm this booking. Your selection will be kept')}}
            </div>
            <button type="submit" id="booking-submit" class="btn be-btn-primary w-100 btn-lg" disabled>{{__('Log In & Continue')}}</button>
            @endif
        </form>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/booking.js') }}"></script>
@endpush