@extends('web_site.layouts.master')

@section('content')

    <!-- Hero -->
    <section class="vs-hero-wrapper bst-hero">
        <div id="bstHeroCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000">
            <div class="carousel-inner">
                @forelse ($banners as $banner)
                    <div class="carousel-item @if ($loop->first) active @endif">
                        <img src="{{ $banner->image_path }}" @if (! $loop->first) loading="lazy" @endif class="bst-hero-img" alt="{{ $banner->title }}">
                        <div class="bst-hero-overlay"></div>
                        <div class="container bst-hero-container">
                            <div class="bst-hero-content">
                                <h1>{{ $banner->title }}</h1>
                                @if ($banner->description)
                                    <p>{{ $banner->description }}</p>
                                @endif
                                <a href="{{ $banner->link ?: route('appointment') }}" class="vs-btn style3 hover-white">
                                    {{ trans('site.home.book_appointment') }}
                                    <i class="fal fa-calendar-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="carousel-item active">
                        <img src="{{ asset('assets_web/img/hero/img1.webp') }}" loading="lazy" class="bst-hero-img" alt="{{ $siteData?->name ?? 'BST Clinics' }}">
                        <div class="bst-hero-overlay"></div>
                        <div class="container bst-hero-container">
                            <div class="bst-hero-content">
                                <h1>{{ trans('site.home.welcome', ['name' => $siteData?->name ?? 'BST Clinics']) }}</h1>
                                <a href="{{ route('appointment') }}" class="vs-btn style3 hover-white">
                                    {{ trans('site.home.book_appointment') }}
                                    <i class="fal fa-calendar-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>

            @if ($banners->count() > 1)
                <a class="carousel-control-prev" type="button" data-bs-target="#bstHeroCarousel" data-bs-slide="prev">
                    <span class="bst-carousel-arrow"><i class="fal fa-angle-left"></i></span>
                </a>
                <a class="carousel-control-next" type="button" data-bs-target="#bstHeroCarousel" data-bs-slide="next">
                    <span class="bst-carousel-arrow"><i class="fal fa-angle-right"></i></span>
                </a>
                <div class="carousel-indicators">
                    @foreach ($banners as $banner)
                        <button type="button" data-bs-target="#bstHeroCarousel" data-bs-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></button>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    <!-- Services -->
    @if ($services->isNotEmpty())
        <section class="vs-service-wrapper space wow fadeInUp" data-wow-delay="0.3s">
            <div class="container">
                <div class="row text-center justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-6 wow fadeInUp" data-wow-delay="0.3s">
                        <div class="section-title">
                            <span class="h4 text-theme1 sec-subtitle">{{ trans('site.home.services_subtitle') }}</span>
                            <h2 class="h1">{{ trans('site.home.services_title') }}</h2>
                        </div>
                    </div>
                </div>

                <div class="row specialist-slider wow fadeIn" data-wow-delay="0.3s" data-slide-show="3">
                    @foreach ($services as $service)
                        <div class="col-md-4">
                            <div class="service-box">
                                <div class="sr-img">
                                    <a href="{{ route('service-details', $service) }}">
                                        <img src="{{ $service->image_path }}" loading="lazy" alt="{{ $service->title }}" class="w-100">
                                    </a>
                                </div>
                                <div class="sr-content">
                                    <h3 class="h4">
                                        <a class="text-reset" href="{{ route('service-details', $service) }}">{{ $service->title }}</a>
                                    </h3>
                                    @if ($service->description)
                                        <p class="fs-xs">{{ \Illuminate\Support\Str::limit($service->description, 110) }}</p>
                                    @endif
                                </div>
                                <a href="{{ route('service-details', $service) }}" class="icon-btn style4">
                                    <i class="far fa-long-arrow-alt-{{ app()->getLocale() === 'ar' ? 'left' : 'right' }}"></i>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- About -->
    @if ($about)
        <section class="vs-about-wrapper space">
            <div class="parallax" data-parallax-image="{{ asset('assets_web/img/bg-7.jpg') }}"></div>
            <div class="container">
                <div class="row flex-direction">
                    <div class="col-lg-6 align-self-center">
                        <div class="about-content mb-2 wow fadeInUp" data-wow-delay="0.5s">
                            <span class="sec-subtitle text-theme1 h3 mb-2 mb-sm-0">{{ trans('site.nav.about') }}</span>
                            <h2 class="h1 mb-3">{{ $siteData?->name ?? 'BST Clinics' }}</h2>
                            <div class="mb-4">{!! $about->getTranslation('description', app()->getLocale(), false) ?: $about->getTranslation('description', 'en', false) !!}</div>
                            <a href="{{ route('about') }}" class="vs-btn">{{ trans('site.home.read_more') }}</a>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-40 mb-lg-0">
                        <div class="wow fadeInUp" data-wow-delay="0.3s">
                            <div class="about-img3 position-relative">
                                <img src="{{ $about->main_image_path ?? asset('assets_web/img/about/why1.webp') }}" loading="lazy" alt="{{ $siteData?->name ?? 'BST Clinics' }}" class="w-100 about-img">
                                @if ($aboutVideo = $siteData?->aboutVideoUrl())
                                    <a href="{{ $aboutVideo }}" class="popup-video play-btn style2 position-center" aria-label="{{ trans('site.home.play_video') }}"><i class="fas fa-play"></i></a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Doctors -->
    @if ($doctorsBySpecialty->isNotEmpty())
        <section class="testimonial-section-two space bck position-relative">
            <div class="container-style6">
                <div class="title-area-two v1 text-center wow fadeInUp" data-wow-delay="400ms">
                    <span class="h4 text-theme1 sec-subtitle">{{ trans('site.home.doctors_subtitle') }}</span>
                    <h2>{{ trans('site.nav.doctors') }}</h2>
                </div>

                <div class="row wow fadeIn" data-wow-delay="0.3s" data-slide-show="2">
                    <ul class="nav nav-tabs" id="doctorsTab" role="tablist">
                        @foreach ($specialties as $specialty)
                            @continue($doctorsBySpecialty->get($specialty->id, collect())->isEmpty())
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ $loop->first ? 'active' : '' }}" id="serv{{ $specialty->id }}-tab" data-bs-toggle="tab" data-bs-target="#serv{{ $specialty->id }}" type="button" role="tab">
                                    @if ($specialty->iconUrl())
                                        <span class="spec-icon">
                                            <img src="{{ $specialty->iconUrl() }}" class="imgspec" loading="lazy" alt="">
                                        </span>
                                    @endif
                                    <span>{{ $specialty->name }}</span>
                                </button>
                            </li>
                        @endforeach
                    </ul>

                    <div class="tab-content" id="doctorsTabContent">
                        @foreach ($specialties as $specialty)
                            @php($specialtyDoctors = $doctorsBySpecialty->get($specialty->id, collect()))
                            @continue($specialtyDoctors->isEmpty())
                            <div class="tab-pane fade show {{ $loop->first ? 'active' : '' }}" id="serv{{ $specialty->id }}" role="tabpanel">
                                <div class="row doctor-slider">
                                    @foreach ($specialtyDoctors->take(4) as $doctor)
                                        <div class="col-md-3">
                                            @include('web_site.partials.doctor-card', ['doctor' => $doctor])
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Book Appointment + App -->
    <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>
                        <h2 class="h1 mb-3">{{ trans('site.home.download_app_title', ['name' => $siteData?->name ?? 'BST Clinics']) }}</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="homeAppointmentForm">
                        <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="homeSpecialtySelect">
                                        <option value="">{{ trans('site.doctors.filter_all') }}</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="homeDoctorSelect" required>
                                        <option value="">{{ trans('site.appointment.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="homeClinicSelect" required>
                                        <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">
                                        <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') }}">
                                </div>

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

    <hr class="custom-divider">

    <!-- Why Choose Us -->
    <section class="vs-about-wrapper why-choose-section space wow fadeInUp" data-wow-delay="0.3s">
        <div class="bg-box-shape2 position-absolute" data-opacity="1" data-bg-src="{{ asset('assets_web/img/bg-shape-2.jpg') }}"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="about-content mb-2">
                        <div class="row justify-content-center">
                            <div class="col-md-7 text-center">
                                <h2 class="h1 mb-3">{{ trans('site.home.why_choose_title', ['name' => $siteData?->name ?? 'BST Clinics']) }}</h2>
                                <p class="mb-5 pch-fnt">{{ trans('site.home.why_choose_text', ['name' => $siteData?->name ?? 'BST Clinics']) }}</p>
                            </div>
                        </div>

                        <div class="row">
                            @foreach ([
                                ['icon' => 'premium-care.png', 'key' => 'premium_care'],
                                ['icon' => 'digital.png', 'key' => 'digital_platform'],
                                ['icon' => 'care.png', 'key' => 'multi_specialty'],
                                ['icon' => 'location.png', 'key' => 'strategic_locations'],
                                ['icon' => 'hospital.png', 'key' => 'future_vision'],
                                ['icon' => 'users.png', 'key' => 'collaborative_physicians'],
                            ] as $feature)
                                <div class="col-md-6 col-lg-4 mb-4">
                                    <div class="media-1">
                                        <div class="media-icon">
                                            <img src="{{ asset('assets_web/img/'.$feature['icon']) }}" class="imgbac" alt="{{ trans('site.why_choose.'.$feature['key'].'_title') }}" loading="lazy">
                                        </div>
                                        <div class="media-body">
                                            <h3 class="media-title">{{ trans('site.why_choose.'.$feature['key'].'_title') }}</h3>
                                            <p class="media-text">{{ trans('site.why_choose.'.$feature['key'].'_text') }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <hr class="custom-divider">

    <!-- Before & After teaser -->
    @if ($beforeAfterImages->isNotEmpty())
        <section class="vs-project-wrapper position-relative space">
            <div class="project-shape" data-bg-src="{{ asset('assets_web/img/book-now.webp') }}"></div>
            <div class="container z-index-common">
                <div class="row text-center justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-6 wow fadeIn" data-wow-delay="0.3s">
                        <div class="section-title">
                            <span class="h3 text-theme sec-subtitle">{{ trans('site.home.before_after_subtitle') }}</span>
                            <h2 class="h1 text-white">{{ trans('site.home.before_after_title') }}</h2>
                        </div>
                    </div>
                </div>
                <div class="row service-slider-7 wow fadeInUp" data-wow-delay="0.3s" data-slide-show="3">
                    @foreach ($beforeAfterImages as $image)
                        <div class="col-md-3">
                            <div class="vs-project-box pb-0">
                                <div class="project-img">
                                    <img src="{{ $image->thumb_url }}" loading="lazy" alt="{{ trans('site.home.before_after_title') }}">
                                    <a href="{{ $image->image_url }}" class="icon-btn popup-image">
                                        <i class="fal fa-eye"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <hr class="custom-divider">
    @endif

    <!-- Offers -->
    @if ($offers->isNotEmpty())
        <hr class="custom-divider">
        <section class="offers-section position-relative space wow fadeInUp" data-wow-delay="200ms">
            <div class="blog-one__shape-1"></div>
            <div class="container-style6">
                <div class="row text-center justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-6">
                        <div class="section-title">
                            <span class="h4 text-theme1 sec-subtitle">{{ trans('site.home.offers_subtitle') }}</span>
                            <h2 class="h1">{{ trans('site.home.offers_title') }}</h2>
                        </div>
                    </div>
                </div>

                <div class="row gy-4">
                    @foreach ($offers->take(3) as $offer)
                        <div class="col-lg-4 col-md-6">
                            @include('web_site.partials.offer-card', ['offer' => $offer, 'index' => $loop->index])
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- Testimonials -->
    @if ($feedbacks->isNotEmpty())
        <section class="position-relative pt-80 pb-80">
            <div class="testi-shape1"></div>
            <div class="blog-one__shape-2"></div>
            <div class="container">
                <div class="row justify-content-between text-center text-lg-start">
                    <div class="col-md-3 align-self-center mb-20 wow fadeInUp" data-wow-delay="0.4s">
                        <span class="h4 text-theme1 sec-subtitle">{{ trans('site.home.testimonials_subtitle') }}</span>
                        <h2 class="sec-title h1 sec-testmon">{{ trans('site.home.testimonials_title') }}</h2>
                    </div>
                    <div class="col-md-9 wow fadeInUp" data-wow-delay="0.3s">
                        <div class="testmonial-slider">
                            @foreach ($feedbacks as $feedback)
                                <div>
                                    <div class="testi-box1 position-relative">
                                        @if ($feedback->isFromGoogle())
                                            <span class="testi-google" title="{{ trans('site.home.google_review') }}">@include('partials.google-logo', ['size' => 26])</span>
                                        @endif
                                        <p class="testi-text">{{ $feedback->feedback }}</p>
                                        <div class="testi-author">
                                            <div class="testi-avater">
                                                <img src="{{ $feedback->image_url ?? asset('assets_web/img/user.webp') }}" loading="lazy" alt="{{ $feedback->name }}">
                                            </div>
                                            <div class="testi-author-info">
                                                <h3 class="testi-name">{{ $feedback->name }}</h3>
                                                <span class="testi-rating" aria-label="{{ $feedback->rating }}/5">
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        <i class="{{ $i <= $feedback->rating ? 'fas' : 'far' }} fa-star"></i>
                                                    @endfor
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <hr class="custom-divider">
    @endif

    <!-- Blog -->
    @if ($blogs->isNotEmpty())
        <section class="vs-blog-wrapper space-top space-md-bottom">
            <div class="container">
                <div class="row text-center justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-6 wow fadeInUp" data-wow-delay="0.3s">
                        <div class="section-title">
                            <span class="h4 text-theme1 sec-subtitle">{{ trans('site.home.blog_subtitle') }}</span>
                            <h2 class="h1">{{ trans('site.nav.blog') }}</h2>
                        </div>
                    </div>
                </div>
                <div class="row wow fadeInUp" data-wow-delay="0.3s">
                    @foreach ($blogs as $blog)
                        <div class="col-md-4">
                            @include('web_site.partials.blog-card', ['blog' => $blog])
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- Appointment CTA -->
    <section class="vs-cta-wrapper space" data-bg-src="{{ asset('assets_web/img/bg-shape-8.jpg') }}">
        <div class="container text-center">
            <h2 class="h1 text-white mb-3">{{ trans('site.home.cta_title') }}</h2>
            <a href="{{ route('appointment') }}" class="vs-btn style3">
                {{ trans('site.home.book_appointment') }}
                <i class="fal fa-calendar-alt"></i>
            </a>
        </div>
    </section>

@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    if ($.fn.magnificPopup) {
        $('.popup-image').magnificPopup({ type: 'image', gallery: { enabled: true } });
    }

    var specialtySelect = document.getElementById('homeSpecialtySelect');
    var doctorSelect = document.getElementById('homeDoctorSelect');
    var clinicSelect = document.getElementById('homeClinicSelect');
    if (!specialtySelect || !doctorSelect || !clinicSelect) {
        return;
    }
    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