@extends('frontend.layouts.master')

@section('title') {{ $generalSetting['company_name'] }} @endsection

@section('meta')
<meta name="title" content="{{ $seoSetting['meta_title'] }}" />
    <meta name="description" content="{{ $seoSetting['meta_detail'] }}">
    <meta name="keywords" content="{{ $seoSetting['meta_keywords'] }}" />
@endsection

@section('content')

    {{-- /* ------------------------------ Video Section ----------------------------- */ --}}
    <section class="relative w-full h-screen">
        <video autoplay loop muted class="absolute inset-0 w-full h-full object-cover">
            <source src="{{ asset('frontend/videos/main.mp4') }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="absolute inset-0 bg-black opacity-50"></div>
        <div class="absolute inset-0 flex justify-center items-center text-white">
            <div class="text-center max-w-[650px]">
                <h1 class="font-raleway uppercase tracking-wider font-bold text-5xl text-white mb-[40px]">
                    {{ $homePage->title ?? 'BEST TECHNOLOGY FOR HAIR TRANSPLANT' }}
                </h1>
                <a href="{{ route('about_us') }}"
                    class="read-more inline-block uppercase bg-secondary text-white text-sm font-bold pe-[60px] relative overflow-hidden">
                    <span class="btn-text inline-block text-sm font-bold">Book your Appointment</span>
                    <strong class="icon flex items-center">
                        <span class="read-more-icon">
                            <img src="{{ asset('frontend/images/icons/arrow-right-line.svg') }}" alt="image" srcset="">
                        </span>
                    </strong>
                </a>
            </div>
        </div>
    </section>

    {{-- /* ------------------ Transformation / Before After Section ----------------- */ --}}
    <section class="mx-auto max-w-7xl dark:bg-gray-900 relative mt-[80px] px-6 lg:px-8">
        <div class="mx-auto  max-w-7xl lg:text-center">
            <h2 class="font-raleway text-[18px] italic font-bold leading-26 tracking-wider text-center text-center text-lightGray uppercase">
                Have a look at our
            </h2>
            <p class="font-raleway text-[36px]  leading-59 tracking-normal text-center text-[#088EE4] font-bold uppercase">
                Amazing Transformations
            </p>
        </div>
        <div class="my-[60px]">
            <div class="relative transformation-slider">
                @if(count($transformations) > 0)
                    @foreach ($transformations ?? [] as $transformation)
                        <div class="px-[10px]">
                            <div class="flex flex-row gap-[10px]">
                                <div data-aos="fade-up" data-aos-duration="1500" data-aos-offset="100">
                                    <div class="relative">
                                        <img src="{{ $transformation->beforeImage }}" alt="" class="">
                                    </div>
                                </div>
                                <div data-aos="fade-down" data-aos-duration="1500" data-aos-offset="100">
                                    <div class="relative">
                                        <img src="{{ $transformation->afterImage }}" alt="" class="">
                                    </div>
                                </div>
                            </div>
                            <div class="box">
                                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
                                    <div class="flex flex-col-reverse">
                                        <dt class="text-[#666666] font-normal">Patient Name</dt>
                                        <dd class="font-bold text-[20px] text-secondary tracking-widest">
                                            {{ $transformation->name }}</dd>
                                    </div>
                                    <div class="flex flex-col-reverse">
                                        <dt class="text-[#666666] font-normal">Hair Loss Grade</dt>
                                        <dd class="font-bold text-[20px] text-secondary tracking-widest ">
                                            {{ $transformation->grade }}</dd>
                                    </div>
                                    <div class="flex flex-col-reverse">
                                        <dt class="text-[#666666] font-normal">No. of Drafts</dt>
                                        <dd class="font-bold text-[20px] text-secondary tracking-widest">
                                            {{ $transformation->graft }}</dd>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>

    {{-- /* ------------------------ Video Testimonial Section ----------------------- */ --}}
    <section class="bg-[#051B42] py-[60px]">
        <div class="wrapper">
            <section class="mx-auto  max-w-7xl dark:bg-gray-900 relative mb-[40px]-4 mt-[40px] px-6 lg:px-8">
                <div class="relative w-full">
                    <div class="overflow-hidden">
                        <div id="logoCarousel" class="flex justify-evenly items-center gap-[60px] transition-transform duration-500 ease-in-out transform">
                            @if(count($videoTestimonials) > 0)
                                @foreach ($videoTestimonials ?? [] as $videoTestimonial)
                                    <div class="w-1/2">
                                        <div class="w-full pb-6">
                                            <div class="relative">
                                                {!! $videoTestimonial->link !!}
                                            </div>
                                        </div>
                                        <div class="mr-auto place-self-center lg:col-span-7 w-full">
                                            <div class="lg:mt-0">
                                                {{-- <img src="{{ asset('frontend/images/video-testimonials/tag.png') }}" alt="" srcset=""> --}}
                                                <h4 class="text-white text-4xl font-semibold mt-[11px]">{{ $videoTestimonial->name }}</h4>
                                                <p class="text-white font-semibold text-lg mt-[5px] italic">
                                                    {{ $videoTestimonial->designation }}
                                                </p>
                                                {{-- <p class="text-white md:text-lg lg:text-xl dark:text-gray-400 font-normal text-lg text-lightGray mb-[30px] pt-[10px]">
                                                    {{ $videoTestimonial->statement }}
                                                </p> --}}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div id="patients-visitors"></div>
    </section>

    {{-- /* ----------------------- Normal Testimonial Section ----------------------- */ --}}
    <section id="happy-client" class="relative w-full mt-[60px] mx-auto  max-w-7xl px-6 lg:px-8">
        <div class="relative w-full">
            <div class="mx-auto max-w-7xl lg:text-center mb-[60px]">
                <h2 class="font-raleway text-[18px] italic font-bold leading-26 tracking-wider text-center text-center text-lightGray uppercase">
                    Featured Reviews
                </h2>
                <p class="font-raleway text-[36px]  leading-59 tracking-normal text-center text-[#0097F6] font-bold uppercase">
                    What Our Happy Patients Says
                </p>
            </div>
            <div class="happyCustomer-slider mx-auto max-w-7xl -mx-4">
                @if(count($testimonials) > 0)
                    @foreach ($testimonials ?? [] as $testimonial)
                        @if (empty($testimonial['link']) && isset($testimonial['image']))
                            <div class="mx-auto max-w-7xl lg:max-w-none px-4">
                                <div class="patient-item">
                                    <div class="overflow-hidden">
                                        <div class="max-w-sm realtive">
                                            <a class="relative image">
                                                <img class="w-full" src="{{ $testimonial->fullImage }}" alt="Image" />
                                                <span class="curve"></span>
                                            </a>
                                            <div class="patient-content bg-white relative -mt-[44px] mx-[30px]">
                                                <div class="patient-info relative z-1 z-[1] mb-[50px]">
                                                    <h3>
                                                        <div class="text-[22px] text-secondary font-bold tracking-tight dark:text-white">
                                                            <h4>{{ $testimonial->name }}</h4>
                                                        </div>
                                                    </h3>
                                                    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
                                                        {{ $testimonial->statement }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                @endif
            </div>
            <div class="flex items-center justify-center pb-[20px]">
                <button
                    class="happyCustomer-prev inline-flex items-center justify-center h-[30px] w-[30px] text-base font-medium text-center rounded-lg hover:bg-blue-600 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800 bg-[#CDE9FB] text-white">
                    <img src="{{ asset('frontend/images/video-testimonials/left-arrow.svg') }}" alt=""
                        srcset="" width="16">
                </button>
                <div class="px-[16px] py-[10px] text-lightGray font-medium">
                    01/02
                </div>
                <button
                    class="happyCustomer-next inline-flex items-center justify-center h-[30px] w-[30px] text-base font-medium text-center rounded-lg hover:bg-blue-600 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800 bg-[#CDE9FB] text-white">
                    <img src="{{ asset('frontend/images/video-testimonials/right.svg') }}" alt="" srcset=""
                        width="16">
                </button>
            </div>
        </div>
    </section>

    {{-- /* ---------------------------- About Us Section ---------------------------- */ --}}
    <section class="we-are-best">
        <div class="wrapper">
            <div class="flex">
                <div class="w-full lg:w-1/2" style="display: flex; align-items: center; justify-content: center;">
                    <img src="{{ $aboutPage->fullImage ?? '' }}" alt="" title="" class="w-full h-full object-cover">
                </div>
                <div class="w-full lg:w-1/2 z-[1] text-right py-[40px] mr-[35px] ps-[45px] relative z-[4]">
                    <div class="">
                        <h4 class="text-[18px] italic font-bold leading-26 tracking-wider text-white uppercase">
                            Let's Know About</h4>
                        <h2 class="mb-[18px] font-bold text-800 text-[36px] text-secondary uppercase">
                            {{ $aboutPage->title ?? 'About Us' }}
                        </h2>
                        <p
                            class="text-white dark:text-gray-400 font-normal text-[16px] mb-[54px]">
                            {{ $aboutPage->summary ?? 'We are Arogin Health Care' }}
                        </p>
                        <a href="{{ route('about_us') }}"
                            class="read-more inline-block uppercase bg-secondary text-white text-sm font-bold pe-[60px] relative overflow-hidden">
                            <span class="btn-text inline-block">Read More</span>
                            <strong class="icon flex items-center">
                                <span class="read-more-icon">
                                    <img src="{{ asset('frontend/images/icons/arrow-right-line.svg') }}" alt="Image" srcset="">
                                </span>
                            </strong>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- /* ------------------------------ Team Section ------------------------------ */ --}}
    <section class="mx-auto max-w-7xl mt-[60px] mb-[20px]">
        <div class="text-center pb-[60px]">
            <h2 class="font-raleway text-[18px] italic font-bold leading-26 tracking-wider text-center text-center text-lightGray uppercase">
                WE ARE A
            </h2>
            <p class="font-raleway text-[36px]  leading-59 tracking-normal text-center text-[#088EE4] font-bold uppercase">
                Team of Professionals
            </p>
        </div>
        <div class="mx-auto">
            <ul class="grid gap-8 md:grid-cols-2 lg:grid-cols-4 p-2 xl:p-5">
                @if(count($teamMembers) > 0)
                    @foreach ($teamMembers ?? [] as $teamMember)
                        <li>
                            <div class="border-solid team-card px-4">
                                <div class="max-w-sm bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700">
                                    <img class="w-full" src="{{ $teamMember->fullImage }}" alt="Image" />
                                    <div class="p-[15px]">
                                        <div class="team-info">
                                            <a href="#">
                                                <div class="text-[20px] text-primary font-bold uppercase tracking-tight dark:text-white">
                                                    <h4> {{ $teamMember->name }}</h4>
                                                </div>
                                            </a>
                                            <p class="mb-3 mt-[8px] dark:text-gray-400 text-secondaryColor">
                                                {{ $teamMember->detail }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    @endforeach
                @endif
            </ul>
            <div class="text-center pt-[30px]">
                <a href="{{ route('doctor_provider') }}" class="read-more inline-block uppercase bg-secondary text-white text-sm font-bold pe-[60px] relative overflow-hidden">
                    <span class="btn-text inline-block">View All</span>
                    <strong class="icon flex items-center">
                        <span class="read-more-icon">
                            <img src="{{ asset('frontend/images/icons/arrow-right-line.svg') }}" alt="Image" srcset="">
                        </span>
                    </strong>
                </a>
            </div>
        </div>
    </section>

    {{-- /* ----------------------------- Client Section ----------------------------- */ --}}
    <section class="py-[60px] bg-[#F6FEF8]">
        <div class="mx-auto  max-w-7xl px-6 lg:px-8">
            <div class="mx-auto  max-w-7xl lg:text-center mb-[60px]">
                <h2 class="font-raleway text-[18px] italic font-bold leading-26 tracking-wider text-center text-center text-lightGray uppercase">
                    We believe in trust
                </h2>
                <p class="font-raleway text-[36px]  leading-59 tracking-normal text-center text-secondary font-bold uppercase">
                    Arogin Associations
                </p>
            </div>
            <div class="">
                <div class="grid grid-cols-1 gap-y-16 text-center lg:grid-cols-4 py-4">
                    @if(count($clients))
                        @foreach ($clients->chunk(2) ?? [] as $clientItems)
                            <div class="border-content">
                                @foreach ($clientItems ?? [] as $client)
                                    <div class="py-[40px]">
                                        <a href="{{ $client->link }}" target="_blank">
                                            <img class="mx-auto h-[150px]" src="{{ $client->fullImage }}" alt="" srcset="" width="150" height="150">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>

@endsection