@extends('frontend.layout.main')

{{--  Site title --}}
@section('title', 'PYPA')

{{--  Site Main Section --}}
@section('main-section')
    <!--  Preloader Start -->
    <x-frontend.preloader></x-frontend.preloader>
    <!--  Preloader End -->

    <!-- Theme Switcher Start -->
    <div class="switch-theme-mode">
        <label id="switch" class="switch">
            <input type="checkbox" onchange="toggleTheme()" id="slider">
            <span class="slider round"></span>
        </label>
    </div>
    <!-- Theme Switcher End -->

    <!-- Custom Cursor -->
    <div class="cursor style-one"></div>
    <div class="cursor-inner style-one"></div>

    <x-frontend.navbar></x-frontend.navbar>

    <div class="bg-ash">
        <!-- Hero Section Start -->
        <div class="hero-area style-one position-relative">
            <div class="hero-slider-one swiper">
                <div class="swiper-wrapper">
                    @forelse ($sliders as $slider)
                        <div class="swiper-slide">
                            <div class="hero-slide-item position-relative overflow-hidden">
                                <div class="hero-bg bg-f bg-1 "
                                    style="background-image: url('{{ asset('storage/frontend/home/' . $slider->image) }}');">
                                </div>
                                <div class="container style-one">
                                    <div class="row">
                                        <div class="col-xxl-8 col-xl-10 pe-xxl-4">
                                            <div class="hero-content">
                                                <h6 class="section-subtitle style-two fw-medium font-primary d-inline-block text_primary position-relative mb-12"
                                                    data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200">
                                                    COMMIT TO BE FIT</h6>
                                                <h1 class="fw-black title-anim text-title" data-aos="fade-up"
                                                    data-aos-duration="1100" data-aos-delay="300">
                                                    {!! $slider->heading !!}</h1>
                                                <p class="fs-xxl-20 text-title" data-aos="fade-up" data-aos-duration="1100"
                                                    data-aos-delay="450">
                                                    {!! $slider->description !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p> Nothing Found.</p>
                    @endforelse
                </div>
                <div class="slider-btn style-two">
                    <button
                        class="prev-btn hero-prev d-flex flex-column align-items-center justify-content-center border-0 transition"><i
                            class="ri-arrow-left-s-line"></i></button>
                    <button
                        class="next-btn hero-next d-flex flex-column align-items-center justify-content-center border-0 transition"><i
                            class="ri-arrow-right-s-line"></i></button>
                </div>
            </div>
        </div>
        <!-- Hero Section End -->

        <!-- Category Section Start -->

        <div class="container px-xxl-4">
            <h2 class="section-title fw-black text-title mb-15 me-xxl-5 text-center mb-5" data-aos="fade-up"
                data-aos-duration="1100" data-aos-delay="300">{{ $infoSection->heading }}</h2>
            <div class="row justify-content-center gx-xxl-18">
                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6">
                    <div class="category-card style-one bg-yellow text-center round-20 mb-30 transition" data-aos="fade-up"
                        data-aos-duration="1100" data-aos-delay="200">
                        <div
                            class="cat-icon d-flex flex-column align-items-center justify-content-center rounded-circle bg-white mx-auto">
                            {{-- <i class="flaticon-stethoscope"></i> --}}
                            <img class="cat-img" src="{{ asset('storage/frontend/home/' . $infoSection->box_1_image) }}"
                                alt="">
                        </div>
                        <h3 class="fs-22 fw-extrabold"><a href="hospitals-list.html"
                                class="text-title link-hover-title">{!! $infoSection->box_1_heading !!}</a></h3>
                        <span class="text-title">{!! $infoSection->box_1_description !!}</span>
                    </div>
                </div>
                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6">
                    <div class="category-card style-one bg-flower text-center round-20 mb-30 transition" data-aos="fade-up"
                        data-aos-duration="1100" data-aos-delay="300">
                        <div
                            class="cat-icon d-flex flex-column align-items-center justify-content-center rounded-circle bg-white mx-auto">
                            <img class="cat-img" src="{{ asset('storage/frontend/home/' . $infoSection->box_2_image) }}"
                                alt="">
                        </div>
                        <h3 class="fs-22 fw-extrabold"><a href="hospitals-list.html"
                                class="text-title link-hover-title">{!! $infoSection->box_2_heading !!}</a></h3>
                        <span class="text-title">{!! $infoSection->box_2_description !!}</span>
                    </div>
                </div>
                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6">
                    <div class="category-card style-one bg-melanine text-center round-20 mb-30 transition"
                        data-aos="fade-up" data-aos-duration="1100" data-aos-delay="400">
                        <div
                            class="cat-icon d-flex flex-column align-items-center justify-content-center rounded-circle bg-white mx-auto">
                            <img class="cat-img" src="{{ asset('storage/frontend/home/' . $infoSection->box_3_image) }}"
                                alt="">
                        </div>
                        <h3 class="fs-22 fw-extrabold"><a href="hospitals-list.html"
                                class="text-title link-hover-title">{!! $infoSection->box_3_heading !!}</a></h3>
                        <span class="text-title">{!! $infoSection->box_3_description !!}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- Category Section End -->

    </div>

    <!-- Featured Hospital Section Start -->
    <div class="container style-one ptb-120">
        <div class="row align-items-center mb-25">
            <div class="col-md-8 mb-sm-10">
                <h6 class="section-subtitle fw-medium font-primary d-inline-block text_secondary position-relative mb-15"
                    data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200"> SERVICES</h6>
                <h2 class="section-title fw-blijli0-l.pack text-title mb-15 me-xxl-5" data-aos="fade-up"
                    data-aos-duration="1100" data-aos-delay="300">Our Services</h2>
            </div>
            <div class="col-md-4">
                <div class="slider-btn style-one d-flex flex-wrap align-items-center justify-content-md-end"
                    data-aos="fade-up" data-aos-duration="1100" data-aos-delay="380">
                    <button
                        class="prev-btn hospital-prev border-0 me-2 d-flex flex-column align-items-center justify-content-center rounded-circle transition"><i
                            class="ri-arrow-left-s-line"></i></button>
                    <button
                        class="next-btn hospital-next border-0 ms-2 d-flex flex-column align-items-center justify-content-center rounded-circle transition"><i
                            class="ri-arrow-right-s-line"></i></button>
                </div>
            </div>
        </div>
        <div class="hospital-slider-one swiper" data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200">
            <div class="swiper-wrapper">
                @forelse ($products as $product)
                    @if ($product->is_active == 1)
                        <div class="swiper-slide">
                            <div class="hospital-card style-one round-20 mb-30 transition">
                                <div class="hospital-img position-relative round-10">
                                    <img src="{{ asset('storage/products/' . $product->image) }}" alt="Doctor"
                                        class="round-10">
                                    <div class="share-action d-flex flex-wrap position-absolute">
                                        <div class="share-btn position-relative">
                                            <span
                                                class="d-flex flex-column align-items-center justify-content-center round-5 bg-white text-title fs-22"><i
                                                    class="ri-share-line"></i></span>
                                            <ul class="social-profile list-unstyled mb-0 transition">
                                                <li><a href="https://www.facebook.com/" target="_blank"
                                                        class="d-flex flex-column align-items-center justify-content-center round-5 transition"><i
                                                            class="ri-facebook-fill"></i></a></li>
                                                <li><a href="https://x.com/?lang=en" target="_blank"
                                                        class="d-flex flex-column align-items-center justify-content-center round-5 transition"><i
                                                            class="ri-twitter-x-line"></i></a></li>
                                                <li><a href="https://www.instagram.com/" target="_blank"
                                                        class="d-flex flex-column align-items-center justify-content-center round-5 transition"><i
                                                            class="ri-instagram-fill"></i></a></li>
                                            </ul>
                                        </div>
                                        <button
                                            class="add-to-wishlist border-0 d-flex flex-column align-items-center justify-content-center round-5 bg-white text-title fs-22 transition"><i
                                                class="ri-heart-3-line"></i></button>
                                    </div>
                                </div>
                                <div class="hospital-info">
                                    <div class="d-flex flex-wrap align-items-center justify-content-between mb-23">
                                        <a href="{{route('doctors')}}"
                                            class="hospital-category style-one d-inline-block bg-ash text_secondary fw-medium round-5 transition">PKR
                                            {{ $product->price }}</a>
                                    </div>
                                    <h3 class="fs-24 fw-extrabold mb-18"><a href="hospital-details.html"
                                            class="text-title hover-text-primary link-hover-primary transition">{{ $product->title }}</a>
                                    </h3>
                                    {{-- <p class="hospital-location position-relative ps-4 flex-1">
                                        {{-- <img src="images/pin-black.svg" alt="Icon" class="position-absolute start-0"> --}}
                                    {{-- {!! $product->short_desc !!} --}}
                                    {{-- </p> --}}
                                    <div
                                        class="hospital-action-btn position-relative d-flex flex-wrap align-items-center justify-content-between">
                                        <a href="{{ route('singleservice', ['slug' => $product->slug]) }}"
                                            class="btn style-three font-secondary fw-semibold position-relative z-1 round-10">
                                            <span>Read More
                                                <img src="{{ asset('images/long-arrow-right-green.svg') }}" alt="Icon"
                                                    class="transition icon-left">
                                            </span>
                                            <img src="{{ asset('images/long-arrow-right-green.svg') }}" alt="Icon"
                                                class="transition icon-right">
                                        </a>
                                        {{-- <span class="position-relative booking-link fs-xx-14 text-para"><img
                                                src="images/stethoscope.svg" alt="Icon"
                                                class="position-absolute start-0">60 Doctors</span> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @empty
                    <p>No Service Found.</p>
                @endforelse
            </div>
        </div>
    </div>
    <!-- Featured Hospital Section End -->

    <!-- Directory Section Start -->
    <div class="container style-one pb-90">
        <div class="row">
            <div class="col-xl-6">
                <div class="directory-card style-one bg-morning d-flex flex-wrap align-items-center round-20 mb-30 transition"
                    data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200">
                    <div class="directory-img position-relative img-hover overflow-hidden round-15">
                        <img src="{{ asset('images/box-1.jpeg') }}" alt="Image" class="round-15 transition">
                    </div>
                    <div class="directory-info">
                        <h2 class="fw-bold">100+</h2>
                        <h3 class="fs-24 fw-extrabold"><a href="hospital-reviews-location-with-map.html"
                                class="text-title link-hover-primary hover-text-primary"> Young Psychologists Trained</a>
                        </h3>
                        <p class="text-title">Our academy has successfully trained over 100 young psychologists through
                            online and physical internships, courses in child and clinical psychology, psychotherapies, and
                            psychological testing. Join our programs to enhance your skills and advance your career.</p>
                        <a href="hospital-reviews-location-with-map.html"
                            class="font-secondary text-title link-hover-title fw-semibold">View All Training Programs<img
                                src="images/right-arrow-black.svg" alt="Icon"></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="directory-card style-one bg-berylGreen d-flex flex-wrap align-items-center round-20 mb-30 transition"
                    data-aos="fade-up" data-aos-duration="1100" data-aos-delay="350">
                    <div class="directory-img position-relative img-hover overflow-hidden round-15">
                        <img src="{{ asset('images/box-2.jpeg') }}" alt="Image" class="round-15 transition">
                    </div>
                    <div class="directory-info">
                        <h2 class="fw-bold">50+</h2>
                        <h3 class="fs-24 fw-extrabold"><a href="doctor-reviews-location-with-map.html"
                                class="text-title link-hover-primary hover-text-primary"> Expert Psychologists & Therapists
                            </a></h3>
                        <p class="text-title">Our team of qualified psychologists, speech therapists, and behavioral
                            specialists provide professional counseling, couple therapy, child behavioral support, and
                            psychotherapy services. Experience personalized care and evidence-based interventions.
                        </p>
                        <a href="doctor-reviews-location-with-map.html"
                            class="font-secondary text-title link-hover-title fw-semibold">Meet Our Experts <img
                                src="images/right-arrow-black.svg" alt="Icon"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Directory Section End -->

    <!-- About Us Section Start -->
    <div class="about-area style-one pb-120">
        <div class="container style-one">
            <div class="row align-items-center">
                <div class="col-lg-6 pe-xxl-2">
                    <div class="about-img-wrap d-flex flex-wrap position-relative justify-content-between mb-md-30">
                        <div class="about-img" data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200">
                            <img src="images/about4.jpg" alt="About Us">
                        </div>
                        <div class="about-img" data-aos="fade-up" data-aos-duration="1100" data-aos-delay="300">
                            <img src="assets/images/about-service-section-main-img.png" alt="About Us">
                        </div>
                        <div class="book-doctor text-center bg-white round-10 position-absolute
                        "
                            data-aos="fade-in" data-aos-duration="1100" data-aos-delay="300">
                            <div class="doctor-img mx-auto round-12">
                                <img src="assets/images/doctor.jpg" alt="Doctor" class="round-12">
                            </div>
                            <h3 class="fs-22 fw-semibold"><a href="doctor-details.html"
                                    class="text-title hover-text-primary">Dr. Willis Tatum</a></h3>
                            <span class="d-block">Surgeon</span>
                            <a class="tb-btn style-one font-secondary fw-semibold d-inline-block border-0 text-white round-10 transition"
                                href="appointment-booking.html">Book Now</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 ps-xxl-5">
                    <div class="about-content ps-xxl-5">
                        <h6 class="section-subtitle fw-semibold font-primary d-inline-block text_secondary position-relative mb-15 text-uppercase"
                            data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200">ABOUT
                            {{ $infoSection->site_title }}</h6>
                        <h2 class="section-title fw-black text-title me-xxl-5" data-aos="fade-up"
                            data-aos-duration="1100" data-aos-delay="300">{{ $infoSection->box_1_heading }}</h2>
                        <p class="mb-38" data-aos="fade-up" data-aos-duration="1100" data-aos-delay="400">
                            @php
                                $about = $infoSection->about_us; // raw HTML from database

                                $visionPos = stripos($about, 'Our Vision');

                                if ($visionPos !== false) {
                                    $about = substr($about, 0, $visionPos);
                                }
                            @endphp

                            {!! $about !!}
                        </p>
                        <div class="counter-card-wrap d-flex flex-wrap justify-content-md-between justify-content-center bg-ash round-15"
                            data-aos="fade-up" data-aos-duration="1100" data-aos-delay="500">
                            <div class="counter-card position-relative">
                                <h4 class="text-title fw-black"><span class="counter fw-black">2</span></h4>
                                <p class="fs-xxl-18 mb-0">Total Cities</p>
                            </div>
                            <div class="counter-card position-relative">
                                <h4 class="text-title fw-black"><span class="counter fw-black">20</span>+</h4>
                                <p class="fs-xxl-18 mb-0">Total Doctors</p>
                            </div>
                            <div class="counter-card position-relative">
                                <h4 class="text-title fw-black"><span class="counter fw-black">6</span>+</h4>
                                <p class="fs-xxl-18 mb-0">Total Services</p>
                            </div>
                        </div>
                        <ul class="feature-list d-flex flex-wrap align-items-center justify-content-between list-unstyled"
                            data-aos="fade-up" data-aos-duration="1100" data-aos-delay="600">
                            <li class="position-relative font-secondary fs-18 fw-semibold text-title"><img
                                    src="images/check-green.svg" alt="Icon"> Enjoy Many Discounts In Fees</li>
                            <li class="position-relative font-secondary fs-18 fw-semibold text-title"><img
                                    src="images/check-green.svg" alt="Icon"> Growing Listings Of Clinics</li>
                        </ul>
                        <div class="btn-wrap d-flex flex-wrap align-items-center" data-aos="fade-in"
                            data-aos-duration="1100" data-aos-delay="700">
                            <a href="{{ route('aboutus') }}"
                                class="btn style-one font-secondary fw-semibold position-relative z-1 round-10">
                                <span>View More About Us
                                    <img src="images/right-arrow-white.svg" alt="Icon" class="transition icon-left">
                                </span>
                                <img src="images/right-arrow-white.svg" alt="Icon" class="transition icon-right">
                            </a>
                            <a href="{{ route('contactus') }}"
                                class="font-secondary fw-semibold text-title link-hover-title pb-1 ms-lg-30 ms-sm-3">Contact
                                Us Now<img src="{{ asset('images/right-arrow-2.svg') }}" alt="Icon"
                                    class="position-relative ms-2 top-n1"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- About Us Section End -->

    <!-- Location Section Start -->
    <div class="bg-ash pt-120 pb-90">
        <div class="container style-one">
            <div class="row align-items-center mb-25">
                <div class="col-md-8 mb-sm-10">
                    <h6 class="section-subtitle fw-medium font-primary d-inline-block text_secondary position-relative mb-15"
                        data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200">POPULAR LOCATION</h6>
                    <h2 class="section-title fw-black text-title mb-15 me-xxl-5" data-aos="fade-up"
                        data-aos-duration="1100" data-aos-delay="300">Best Rated Location</h2>
                </div>
                <div class="col-md-4">
                    <div class="slider-btn style-one d-flex flex-wrap align-items-center justify-content-md-end">
                        <button
                            class="prev-btn location-prev border-0 me-2 d-flex flex-column align-items-center justify-content-center rounded-circle transition"><i
                                class="ri-arrow-left-s-line"></i></button>
                        <button
                            class="next-btn location-next border-0 ms-2 d-flex flex-column align-items-center justify-content-center rounded-circle transition"><i
                                class="ri-arrow-right-s-line"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid style-one">
            <div class="row">
                <div class="col-12 pe-lg-0" data-aos="fade-up" data-aos-duration="1100" data-aos-delay="300">
                    <div class="location-slider-one swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="location-card style-one position-relative round-20 mb-30 transition">
                                    <img src="images/location-1.jpg" alt="Location" class="round-20">
                                    <div class="wishlist-counter bg-white d-inline-block text-title position-absolute">
                                        <i class="ri-heart-3-line"></i><span>689</span>
                                    </div>
                                    <div class="location-info bg-white round-10 position-absolute">
                                        <h3 class="fs-24 fw-extrabold"><a href="hospital-details.html"
                                                class="text-title link-hover-primary hover-text-primary">Hinton
                                                Diagnostic Center</a></h3>
                                        <p class="position-relative mb-0"><img src="images/pin-blue.svg"
                                                alt="Icon">124 St Maris,Toronto, Canada</p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="location-card style-one position-relative round-20 mb-30 transition">
                                    <img src="images/location-2.jpg" alt="Location" class="round-20">
                                    <div class="wishlist-counter bg-white d-inline-block text-title position-absolute">
                                        <i class="ri-heart-3-line"></i><span>205</span>
                                    </div>
                                    <div class="location-info bg-white round-10 position-absolute">
                                        <h3 class="fs-24 fw-extrabold"><a href="hospital-details.html"
                                                class="text-title link-hover-primary hover-text-primary">Hinton Dental
                                                Center</a></h3>
                                        <p class="position-relative mb-0"><img src="images/pin-blue.svg"
                                                alt="Icon">454 Nort Avenue, Texas, USA</p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="location-card style-one position-relative round-20 mb-30 transition">
                                    <img src="images/location-3.jpg" alt="Location" class="round-20">
                                    <div class="wishlist-counter bg-white d-inline-block text-title position-absolute">
                                        <i class="ri-heart-3-line"></i><span>496</span>
                                    </div>
                                    <div class="location-info bg-white round-10 position-absolute">
                                        <h3 class="fs-24 fw-extrabold"><a href="hospital-details.html"
                                                class="text-title link-hover-primary hover-text-primary">Hinton
                                                Community Hospital</a></h3>
                                        <p class="position-relative mb-0"><img src="images/pin-blue.svg"
                                                alt="Icon">54 South Decota, Casal, USA</p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="location-card style-one position-relative round-20 mb-30 transition">
                                    <img src="images/location-4.jpg" alt="Location" class="round-20">
                                    <div class="wishlist-counter bg-white d-inline-block text-title position-absolute">
                                        <i class="ri-heart-3-line"></i><span>236</span>
                                    </div>
                                    <div class="location-info bg-white round-10 position-absolute">
                                        <h3 class="fs-24 fw-extrabold"><a href="hospital-details.html"
                                                class="text-title link-hover-primary hover-text-primary">Hinton
                                                Diagnostic Center</a></h3>
                                        <p class="position-relative mb-0"><img src="images/pin-blue.svg"
                                                alt="Icon">32 Sie Nasol, Georjia, USA</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Location Section End -->

    <!-- Why Choose Us Section Start -->
    <div class="wh-area style-one ptb-120">
        <div class="container style-one">
            <div class="row">
                <div class="col-xl-6">
                    <div class="wh-content mb-lg-30">
                        <h6 class="section-subtitle fw-medium font-primary d-inline-block text_secondary position-relative mb-15"
                            data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200">WHY CHOOSE HINTON
                        </h6>
                        <h2 class="section-title title-anim fw-black text-title mb-15 me-xxl-5" data-aos="fade-up"
                            data-aos-duration="1100" data-aos-delay="300">Professional Medical Network With Large
                            Directory Listings</h2>
                        <p class="fs-xx-14 mb-28" data-aos="fade-up" data-aos-duration="1100" data-aos-delay="400">
                            With a focus on compassionate and personalized treatment we strive to
                            create a welcoming environment where patients feel valued respected and well informed about
                            their health</p>
                        <div class="feature-item-wrap me-xxl-5">
                            <div class="feature-item d-flex flex-wrap" data-aos="fade-up" data-aos-duration="1100"
                                data-aos-delay="500">
                                <span class="feature-icon position-relative">
                                    <img src="images/check-green.svg" alt="Icon">
                                </span>
                                <div class="feature-info">
                                    <h3 class="fs-24 fw-extrabold text-title mb-10">Quality Control System</h3>
                                    <p class="mb-0">Our doctors are constantly improving their skills by
                                        participating in international medical conferences and quality improvement
                                        courses</p>
                                </div>
                            </div>
                            <div class="feature-item d-flex flex-wrap" data-aos="fade-up" data-aos-duration="1100"
                                data-aos-delay="600">
                                <span class="feature-icon position-relative">
                                    <img src="images/check-green.svg" alt="Icon">
                                </span>
                                <div class="feature-info">
                                    <h3 class="fs-24 fw-extrabold text-title">Highly Professional Staff</h3>
                                    <p class="mb-0">Our doctors are constantly improving their skills by
                                        participating in international medical conferences and quality improvement
                                        courses</p>
                                </div>
                            </div>
                            <div class="feature-item d-flex flex-wrap" data-aos="fade-up" data-aos-duration="1100"
                                data-aos-delay="700">
                                <span class="feature-icon position-relative">
                                    <img src="images/check-green.svg" alt="Icon">
                                </span>
                                <div class="feature-info">
                                    <h3 class="fs-24 fw-extrabold text-title">Medical And Surgical Services</h3>
                                    <p class="mb-0">Our doctors are constantly improving their skills by
                                        participating in international medical conferences and quality improvement
                                        courses</p>
                                </div>
                            </div>
                            <div class="feature-item d-flex flex-wrap" data-aos="fade-up" data-aos-duration="1100"
                                data-aos-delay="800">
                                <span class="feature-icon position-relative">
                                    <img src="images/check-green.svg" alt="Icon">
                                </span>
                                <div class="feature-info">
                                    <h3 class="fs-24 fw-extrabold text-title">Outpatient Services</h3>
                                    <p class="mb-0">Our doctors are constantly improving their skills by
                                        participating in international medical conferences and quality improvement
                                        courses</p>
                                </div>
                            </div>
                        </div>
                        <div class="btn-wrap d-flex flex-wrap align-items-center">
                            <a href="about.html"
                                class="btn style-one font-secondary fw-semibold position-relative z-1 round-10">
                                <span>Read More
                                    <img src="images/right-arrow-white.svg" alt="Icon" class="transition icon-left">
                                </span>
                                <img src="images/right-arrow-white.svg" alt="Icon" class="transition icon-right">
                            </a>
                            <div class="google-ratings position-relative">
                                <img src="images/google.svg" alt="Google Icon">
                                <h6 class="fs-22 fw-semibold mb-15">4.9/5.0</h6>
                                <span class="fs-xx-14">Google Ratings</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 ps-xxl-4">
                    <div class="wh-img-wrap bg-f position-relative round-15" data-aos="fade-up" data-aos-duration="1100"
                        data-aos-delay="200">
                        <div class="testimonial-slider-one swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="testimonial-card style-one position-relative bg-title round-15">
                                        <div class="client-info-wrap d-flex flex-wrap align-items-center">
                                            <div class="client-img rounded-circle">
                                                <img src="images/client-1.jpg" alt="Client" class="rounded-circle">
                                            </div>
                                            <div class="client-info ms-auto">
                                                <h6 class="fs-22 lh-1 mb-10 fw-extrabold text-white">Steven Borders
                                                </h6>
                                                <span class="d-block text-white">CEO & Founder</span>
                                            </div>
                                        </div>
                                        <ul class="rating style-one list-unstyled">
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                        </ul>
                                        <p class="fs-xx-14 text-white mb-0">“Our administrative and clinical team is
                                            second to none we reiterates thepledge to help all and give hope to those
                                            who have lost hope In this endeavor while we have the best of an expert team
                                            of doctors taking care of the patients at one hand.”</p>
                                        <img src="images/quotation-mark.svg" alt="Icon"
                                            class="quote-icon position-absolute">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="testimonial-card style-one position-relative bg-title round-15">
                                        <div class="client-info-wrap d-flex flex-wrap align-items-center">
                                            <div class="client-img rounded-circle">
                                                <img src="images/client-3.jpg" alt="Client" class="rounded-circle">
                                            </div>
                                            <div class="client-info ms-auto">
                                                <h6 class="fs-22 lh-1 mb-10 fw-extrabold text-white">Richard Grene
                                                </h6>
                                                <span class="d-block text-white">Entreprenaur</span>
                                            </div>
                                        </div>
                                        <ul class="rating style-one list-unstyled">
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                        </ul>
                                        <p class="fs-xx-14 text-white mb-0">“To help all and give hope to those who
                                            have lost hope In this endeavor our administrative and clinical team is
                                            second to none we reiterates thepledger. while we have the best of an expert
                                            team of doctors taking care of the patients at one hand.”</p>
                                        <img src="images/quotation-mark.svg" alt="Icon"
                                            class="quote-icon position-absolute">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="testimonial-card style-one position-relative bg-title round-15">
                                        <div class="client-info-wrap d-flex flex-wrap align-items-center">
                                            <div class="client-img rounded-circle">
                                                <img src="images/client-2.jpg" alt="Client" class="rounded-circle">
                                            </div>
                                            <div class="client-info ms-auto">
                                                <h6 class="fs-22 lh-1 mb-10 fw-extrabold text-white">Karolyn Basset
                                                </h6>
                                                <span class="d-block text-white">Businessman</span>
                                            </div>
                                        </div>
                                        <ul class="rating style-one list-unstyled">
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                            <li><i class="ri-star-fill"></i></li>
                                        </ul>
                                        <p class="fs-xx-14 text-white mb-0">“Awesome service give hope to those who
                                            have administrative and clinical team is second to none we reiterates
                                            thepledge to help all and lost hope In this endeavor while we have the best
                                            of an expert team of doctors taking care of the patients at one hand.”</p>
                                        <img src="images/quotation-mark.svg" alt="Icon"
                                            class="quote-icon position-absolute">
                                    </div>
                                </div>
                            </div>
                            <div class="slider-btn d-flex flex-wrap align-items-center justify-content-end">
                                <button
                                    class="prev-btn testimonial-prev d-flex flex-column align-items-center justify-content-center rounded-circle transition"><i
                                        class="ri-arrow-left-s-line"></i></button>
                                <button
                                    class="next-btn testimonial-next d-flex flex-column align-items-center justify-content-center rounded-circle transition"><i
                                        class="ri-arrow-right-s-line"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Why Choose Us Section End -->

    <!-- Top Doctors Sections Start -->
    <div class="container style-one pb-90">
        <div class="text-center">
            <h6 class="section-subtitle fw-medium font-primary d-inline-block text_secondary position-relative mb-15"
                data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200">HINTON TEAM</h6>
            <h2 class="section-title fw-black text-title text-center mb-35" data-aos="fade-up" data-aos-duration="1100"
                data-aos-delay="300">Meet The Top Rated Doctors</h2>
        </div>
        <div class="row justify-content-center">
            @forelse ($teams as $team)
                <div class="col-xxl-3 col-xl-4 col-md-6">
                    <div class="doctor-card style-one round-20 mb-30 transition" data-aos="fade-up"
                        data-aos-duration="1100" data-aos-delay="200">
                        <div class="doctor-img position-relative round-10">
                            <img src="{{ asset('storage/' . $team->image) }}" alt="Doctor" class="round-10">
                            <div class="share-action d-flex flex-wrap position-absolute">
                                <div class="share-btn position-relative">
                                    <span
                                        class="d-flex flex-column align-items-center justify-content-center round-5 bg-white text-title fs-22"><i
                                            class="ri-share-line"></i></span>
                                    <ul class="social-profile list-unstyled mb-0 transition">
                                        <li><a href="https://www.facebook.com/" target="_blank"
                                                class="d-flex flex-column align-items-center justify-content-center round-5 transition"><i
                                                    class="ri-facebook-fill"></i></a></li>
                                        <li><a href="https://x.com/?lang=en" target="_blank"
                                                class="d-flex flex-column align-items-center justify-content-center round-5 transition"><i
                                                    class="ri-twitter-x-line"></i></a></li>
                                        <li><a href="https://www.instagram.com/" target="_blank"
                                                class="d-flex flex-column align-items-center justify-content-center round-5 transition"><i
                                                    class="ri-instagram-fill"></i></a></li>
                                        <li><a href="https://www.linkedin.com/" target="_blank"
                                                class="d-flex flex-column align-items-center justify-content-center round-5 transition"><i
                                                    class="ri-linkedin-fill"></i></a></li>
                                    </ul>
                                </div>
                                <button
                                    class="add-to-wishlist border-0 d-flex flex-column align-items-center justify-content-center round-5 bg-white text-title fs-22 transition"><i
                                        class="ri-heart-3-line"></i></button>
                            </div>
                        </div>
                        <div class="doctor-info">
                            <div class="d-flex flex-wrap align-items-center justify-content-between mb-20">
                                <a href="{{route('doctors')}}"
                                    class="doctor-category style-one d-inline-block bg-ash text_secondary fw-medium round-5 transition">{{ $team->job_title }}</a>
                                <div class="ratings">
                                    <i class="ri-star-fill"></i>
                                    <span class="ms-1">5.0</span>
                                </div>
                            </div>
                            <h3 class="fs-24 fw-extrabold mb-8"><a href="doctor-details.html"
                                    class="text-title hover-text-primary link-hover-primary transition">Dr. Demetrius
                                    Wright</a></h3>
                            <ul class="doctor-degree list-unstyled mb-15">
                                <li class="d-inline-block">MBBS</li>
                                <li class="d-inline-block">MD</li>
                                <li class="d-inline-block">DM</li>
                                <li class="d-inline-block">PhD</li>
                            </ul>
                            <p class="doctors-location position-relative ps-4"><img src="images/pin-black.svg"
                                    alt="Icon" class="position-absolute start-0">42 Main Drive Florida 10306</p>
                            <div class="d-flex flex-wrap align-items-center justify-content-between">
                                <a href="availability-checker.html"
                                    class="btn style-three font-secondary fw-semibold position-relative z-1 round-10">
                                    <span>Availability
                                        <img src="images/long-arrow-right-green.svg" alt="Icon"
                                            class="transition icon-left">
                                    </span>
                                    <img src="images/long-arrow-right-green.svg" alt="Icon"
                                        class="transition icon-right">
                                </a>
                                <a href="appointment-booking.html"
                                    class="position-relative booking-link fs-xx-14 fw-semibold text-title link-hover-title"><img
                                        src="images/phone-black.svg" alt="Icon"
                                        class="position-absolute start-0 top-2">Book Today</a>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <p>No team found.</p>
            @endforelse
        </div>
    </div>
    <!-- Top Doctors Sections End -->

    <!-- Work Process Section Start -->
    <div class="bg-ash ptb-120">
        <div class="container style-one">
            <div class="text-center">
                <h6 class="section-subtitle fw-medium font-primary d-inline-block text_secondary position-relative mb-15"
                    data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200">SERVICES</h6>
                <h2 class="section-title title-anim fw-black text-title mb-40" data-aos="fade-up"
                    data-aos-duration="1100" data-aos-delay="300">Our Services</h2>
            </div>
            <div
                class="work-process-wrap d-flex flex-wrap justify-content-lg-between justify-content-center style-one pb-90">
                @forelse ($products as $product)
                    <div class="process-card style-one position-relative transition mb-30 p-4" data-aos="fade-up"
                        data-aos-duration="1100" data-aos-delay="200">
                        @if (!$loop->last)
                            <img src="images/right-top-curve-arrow.png" alt="Icon" class="right-arrow">
                        @endif
                        <div class="process-img position-relative rounded-circle">
                            <img src=" {{ asset('storage/products/' . $product->image) }}" alt="Image"
                                class="rounded-circle">
                            <span
                                class="process-counter text_primary font-secondary fw-extrabold fs-18 d-flex flex-column align-items-center justify-content-center rounded-circle bg-white">{{ $loop->iteration }}</span>
                        </div>
                        <h3 class="fs-24 fw-extrabold text-title text-center mb-18">{{ $product->title }}</h3>
                        <p class="text-center mb-0 px-xxl-5 px-lg-3 mx-xxl-4">
                            {!! $product->short_desc !!}
                        </p>
                        <a href="{{ route('singleservice', ['slug' => $product->slug]) }}">Read More</a>
                    </div>
                @empty
                    <p> No Service Found.</p>
                @endforelse
            </div>
            <div class="promo-video style-one position-relative bg-f round-20">
                <a class="play-video d-flex flex-wrap flex-column align-items-center justify-content-center rounded-circle bg-white position-absolute"
                    data-fslightbox="" href="https://www.youtube.com/watch?v=u31qwQUeGuM">
                    <span class="ripple"></span>
                    <i class="ri-play-large-fill"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- Work Process Section End -->

    <!-- Blog Section Start -->
    <div class="container style-one pt-120 pb-90">
        <div class="text-center">
            <h6 class="section-subtitle fw-medium font-primary d-inline-block text_secondary position-relative mb-15"
                data-aos="fade-up" data-aos-duration="1100" data-aos-delay="200">LATEST NEWS</h6>
            <h2 class="section-title title-anim fw-black text-title mb-40" data-aos="fade-up" data-aos-duration="1100"
                data-aos-delay="300">Read Our Latest Insights & Articles</h2>
        </div>
        <div class="row justify-content-center">
            @forelse($blogs as $blog)
                <div class="col-md-6">
                    <div class="blog-card style-one round-20 mb-30 transition" data-aos="fade-up"
                        data-aos-duration="1100" data-aos-delay="200">
                        <div class="blog-img position-relative img-hover overflow-hidden round-10">
                            <img src="{{ asset('storage/blogs/' . $blog->featured_image) }}" alt="Blog Image"
                                class="round-10 transition">
                        </div>
                        <div class="blog-info">
                            <a href="posts-by-date.html"
                                class="blog-date text-center d-flex flex-column align-items-center justify-content-center round-10 fs-14 font-secondary bg_secondary text-white"><span
                                    class="fs-18  fw-bold ">25</span>Jan</a>
                            <ul class="blog-metainfo list-unstyled">
                                <li class="position-relative fs-15 d-inline-block"><img src="images/user-icon.svg"
                                        alt="Icon">By<a href="posts-by-author.html"
                                        class="text-para hover-text-primary">Admin</a></li>
                                <li class="position-relative fs-15 text-para d-inline-block"><img src="images/comment.svg"
                                        alt="Icon">02 Comment</li>
                            </ul>
                            <h3 class="fs-24 fw-extrabold mb-15"><a href="blog-details-right-sidebar.html"
                                    class="text-title link-hover-primary hover-text-primary">{!! $blog->title !!}</a>
                            </h3>
                            <p class="mb-28">{!! $blog->content !!}</p>
                            <a href="{{ route('singleBlog', ['slug' => $blog->slug]) }}"
                                class="btn style-three font-secondary fw-semibold position-relative z-1 round-10">
                                <span>Read More
                                    <img src="images/long-arrow-right-green.svg" alt="Icon"
                                        class="transition icon-left">
                                </span>
                                <img src="images/long-arrow-right-green.svg" alt="Icon" class="transition icon-right">
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <p>No Blogs Found.</p>
            @endforelse
        </div>
    </div>
    <!-- Blog Section End -->

    <!-- Brand Section Start -->
    <div class="bg-ash ptb-120">
        <div class="container style-one">
            <h3 class="fs-20 fw-semibold text-title text-center mb-55">TRUSTED BY MORE THAN <span
                    class="text_primary">100+</span> COMPANIES WORLDWIDE</h3>
            <div class="brand-slider swiper">
                <div class="swiper-wrapper align-items-center">
                    <div class="swiper-slide">
                        <div class="brand-logo">
                            <img src="images/brand-1.svg" alt="Brand Logo" class="d-block mx-auto">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="brand-logo">
                            <img src="images/brand-2.svg" alt="Brand Logo" class="d-block mx-auto">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="brand-logo">
                            <img src="images/brand-3.svg" alt="Brand Logo" class="d-block mx-auto">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="brand-logo">
                            <img src="images/brand-4.svg" alt="Brand Logo" class="d-block mx-auto">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="brand-logo">
                            <img src="images/brand-5.svg" alt="Brand Logo" class="d-block mx-auto">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="brand-logo">
                            <img src="images/brand-6.svg" alt="Brand Logo" class="d-block mx-auto">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="brand-logo">
                            <img src="images/brand-1.svg" alt="Brand Logo" class="d-block mx-auto">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="brand-logo">
                            <img src="images/brand-2.svg" alt="Brand Logo" class="d-block mx-auto">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="brand-logo">
                            <img src="images/brand-3.svg" alt="Brand Logo" class="d-block mx-auto">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Brand Section End -->

    <!-- Footer-->
    <x-frontend.footer> </x-frontend.footer>

    <!-- Back to Top -->
    <div id="progress-wrap" class="progress-wrap style-one">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path id="progress-path" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"></path>
        </svg>
    </div>
@endsection