@extends('web_site.layouts.master')

@section('content')

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

    <section class="appointment-wrapper space-top space-md-bottom">
        <div class="container">
            <div class="row align-items-center flex-direction">
                <div class="col-xl-6 mb-30">
                    <div class="about-content wow fadeInUp" data-wow-delay="0.3s">
                        <span class="sec-subtitle text-theme1 h3 mb-2">{{ $siteData?->name ?? 'BST Clinics' }}</span>
                        @php($appName = $siteData?->name ?? 'BST Clinics')
                        <h2 class="h1 mb-3">{!! str_replace(e($appName), '<span class="text-theme1">' . e($appName) . '</span>', e(trans('site.home.download_app_title', ['name' => $appName]))) !!}</h2>
                        <p class="mb-4">{{ trans('site.home.download_app_text', ['name' => $siteData?->name ?? 'BST Clinics']) }}</p>
                        <div class="d-flex flex-wrap gap-3">
                            <a href="#" class="app-download-btn app-store-btn">
                                <i class="fab fa-apple"></i>
                                <span><small>Download on the</small>App Store</span>
                            </a>
                            <a href="#" class="app-download-btn google-play-btn">
                                <img src="{{ asset('assets_web/img/google-play.png') }}" alt="google-play" loading="lazy">
                                <span><small>GET IT ON</small>Google Play</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6 mb-30 pt-30 pt-xl-0">
                    <form action="{{ route('clinic.bookings.create') }}" method="GET" class="form-wrap1 bg-white wow fadeInUp" data-wow-delay="0.3s" id="appointmentForm">
                        <div class="form-title-box bg-title">
                            <div class="row justify-content-between align-items-center">
                                <div class="col-auto">
                                    <h2 class="h4 mb-1 text-white">{{ trans('site.home.book_appointment') }}</h2>
                                    <p class="mb-0 text-white-light">{{ trans('site.home.book_appointment_subtitle') }}</p>
                                </div>
                                @if ($siteData?->phone)
                                    <div class="col-auto d-none d-sm-block">
                                        <a href="tel:{{ preg_replace('/\s+/', '', $siteData->phone) }}" class="ripple-icon style2">
                                            <i class="fas fa-phone"></i>
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="form-box">
                            <div class="row">
                                <div class="col-xl-6 form-group">
                                    <select class="form-select style2" id="specialtySelect" aria-label="{{ trans('site.doctors.filter_specialty') }}">
                                        <option value="">{{ trans('site.appointment.choose_specialty') }}</option>
                                        @foreach ($specialties as $specialty)
                                            <option value="{{ $specialty->id }}">{{ $specialty->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-xl-6 form-group">
                                    <select class="form-select style2" name="doctor_id" id="doctorSelect" required aria-label="{{ trans('site.appointment.doctor') }}">
                                        <option value="">{{ trans('site.appointment.choose_doctor') }}</option>
                                        @foreach ($doctors as $doctor)
                                            <option value="{{ $doctor->id }}" data-specialty="{{ $doctor->specialty_id }}"
                                                data-clinics='@json($doctor->clinics->map(fn ($c) => ["id" => $c->id, "name" => $c->branch?->name])->values())'>
                                                {{ $doctor->name }} — {{ $doctor->specialty?->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-xl-6 form-group">
                                    <select class="form-select style2" name="clinic_profile_id" id="clinicSelect" required aria-label="{{ trans('site.appointment.clinic') }}">
                                        <option value="">{{ trans('site.appointment.choose_doctor_first') }}</option>
                                    </select>
                                </div>

                                <div class="col-xl-6 form-group">
                                    <select class="form-select style2" name="type" aria-label="{{ trans('site.appointment.type') }}">
                                        <option value="visit">{{ trans('site.appointment.type_visit') }}</option>
                                        <option value="online">{{ trans('site.appointment.type_online') }}</option>
                                    </select>
                                </div>

                                <div class="col-xl-12 form-group">
                                    <input type="date" name="date" class="form-control style2" min="{{ now()->format('Y-m-d') }}" value="{{ now()->format('Y-m-d') }}" aria-label="{{ trans('site.appointment.date') }}" title="{{ trans('site.appointment.date') }}">
                                </div>

                                <div class="col-xl-12 text-center">
                                    <button type="submit" class="vs-btn style2">
                                        {{ trans('site.appointment.submit') }}
                                        <i class="far fa-calendar-alt"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var specialtySelect = document.getElementById('specialtySelect');
    var doctorSelect = document.getElementById('doctorSelect');
    var clinicSelect = document.getElementById('clinicSelect');
    var doctorOptions = Array.prototype.slice.call(doctorSelect.options);

    function filterDoctors() {
        var specialtyId = specialtySelect.value;
        doctorOptions.forEach(function (option) {
            if (!option.value) { return; }
            var matches = !specialtyId || option.dataset.specialty === specialtyId;
            option.hidden = !matches;
        });
        doctorSelect.value = '';
        updateClinics();
    }

    function updateClinics() {
        clinicSelect.innerHTML = '';
        var selected = doctorSelect.options[doctorSelect.selectedIndex];
        if (!selected || !selected.value) {
            clinicSelect.innerHTML = '<option value="">{{ trans('site.appointment.choose_doctor_first') }}</option>';
            return;
        }
        var clinics = [];
        try {
            clinics = JSON.parse(selected.dataset.clinics || '[]');
        } catch (e) {
            clinics = [];
        }
        if (!clinics.length) {
            clinicSelect.innerHTML = '<option value="">{{ trans('site.appointment.no_clinics') }}</option>';
            return;
        }
        clinics.forEach(function (clinic) {
            var opt = document.createElement('option');
            opt.value = clinic.id;
            opt.textContent = clinic.name;
            clinicSelect.appendChild(opt);
        });
    }

    specialtySelect.addEventListener('change', filterDoctors);
    doctorSelect.addEventListener('change', updateClinics);
    updateClinics();
});
</script>
@endsection