@extends('front.layouts.master')
@section('main_content')
<!--==============================
Hero Area
==============================-->
<section class="hero-wrapper hero-1">
    <div class="hero-slider1 overflow-hidden">
        <div class="tg-swiper__slider swiper-container" id="heroSlider1" data-swiper-options='{
                "effect": "fade",
                "slidesPerView": "1",
                "autoHeight": "true"
            }'>
            <div class="swiper-wrapper">
                @foreach($sliders as $slider)
                <div class="swiper-slide"  data-background="{{ asset('uploads/'.$slider->photo) }}">
                    <div class="hero-bg-shape1-1"></div>
                    <div class="hero-bg-shape1-2"></div>
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="hero-style1" style="height: 950px">
                                    <div class="sub-title" data-ani="slideinup" data-ani-delay="0.1s">
                                        {!! nl2br($slider->subheading) !!}
                                    </div>
                                    <h1 class="hero-title">
                                        <div class="title1" data-ani="slideinup" data-ani-delay="0.2s">
                                            {!! nl2br($slider->heading) !!}
                                        </div>
                                    </h1>
                                    @if($slider->button1_text != '' || $slider->button2_text != '')
                                    <div class="tg-button-wrap" data-ani="slideinup" data-ani-delay="0.5s">
                                        @if($slider->button1_text)
                                        <a href="{{ $slider->button1_link }}" class="btn btn-three" target="_blank">
                                            <span class="btn-text" data-text="{{ $slider->button1_text }}"></span>
                                        </a>
                                        @endif
                                        @if($slider->button2_text)
                                        <a href="{{ $slider->button2_link }}" class="btn btn-four" target="_blank">
                                            <span class="btn-text" data-text="{{ $slider->button2_text }}"></span>
                                        </a>
                                        @endif
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="slider-pagination2"></div>
        </div>
    </div>
</section>
<!--======== / Hero Section ========-->

<!--==============================
About Area
==============================-->
@if($global_page_item->home_about_status == 'Show')
<section class="about-area-2 pt-120 pb-120 overflow-hidden">
    <div class="container">
        <div class="about-wrap2">
            <div class="row gx-60 gy-5 align-items-center">
                <div class="col-xl-6">
                    <div class="about-thumb2-1">
                        <div class="img2">
                            <div class="thumb image-anim">
                                <img src="{{ asset('uploads/'.$global_page_item->home_about_photo2) }}" alt="img">
                            </div>
                        </div>
                        <div class="about-bg-shape2-1">
                            <div class="shape1"></div>
                            <div class="shape2"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="section__title">
                        <span class="sub-title text-anim">{{ $global_page_item->home_about_subheading }}</span>
                        <h2 class="title text-anim2">
                            {!! nl2br($global_page_item->home_about_heading) !!}
                        </h2>
                    </div>
                    @if($global_page_item->home_about_text != '')
                    <p class="mt-30 mb-40">
                        {!! nl2br($global_page_item->home_about_text) !!}
                    </p>
                    @endif
                    <div class="checklist-wrap">
                        <ul class="list-wrap">
                            {!! $global_page_item->home_about_list_items !!}
                        </ul>
                    </div>
                    @if($global_page_item->home_about_phone != '')
                    <div class="cta-link"><i class="fas fa-phone-alt"></i> <a href="tel:{{ $global_page_item->home_about_phone }}">{{ $global_page_item->home_about_phone }}</a></div>
                    @endif
                    <div class="tg-button-wrap mt-30">
                        <a href="{{ route('appointment') }}" class="btn">
                            <span class="btn-text" data-text="{{ $global_page_item->home_about_button_text }}"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
<!--======== / About Section ========-->

<!--==============================
Service Area
==============================-->
<section class="service-area-1 pt-120 pb-120 position-relative" style="background: linear-gradient(135deg,#f5f7fa,#e4ecf7);">
    <div class="container">

        <!-- Section Heading -->
        <div class="row justify-content-center text-center mb-60">
            <div class="col-lg-6">
                <div class="section-title">
                    <span class="sub-title">Our Services</span>
                    <h2 class="sec-title">What We Offer</h2>
                    <p>We provide professional solutions designed to help individuals and businesses grow and succeed.</p>
                </div>
            </div>
        </div>

        <div class="row gy-30 justify-content-center">
            @foreach($services as $service)
            <div class="col-lg-4 col-md-6">
                <div class="service-card style4">
                    <div class="box-content">
                        <div class="box-icon">
                            {!! $service->icon_code !!}
                        </div>

                        <h3 class="box-title">
                            <a href="{{ route('service',$service->slug) }}">{{ $service->name }}</a>
                        </h3>

                        <p class="box-text">
                            {!! nl2br($service->short_description) !!}
                        </p>

                        <!-- Call To Action Button -->
                        <div class="tg-button-wrap mt-20">
                            <a href="{{ route('appointment') }}" class="btn">
                                <span class="btn-text">
                                    {{ $global_page_item->about_about_button_text }}
                                </span>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
            @endforeach
        </div>

    </div>
</section>

<!--==============================
Why Choose Us Area
==============================-->
@if($global_page_item->home_feature_status == 'Show')
<section class="wcu-area-1 pt-120 pb-120 smoke5-bg">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8 col-lg-10">
                <div class="section__title text-center mb-50">
                    <span class="sub-title text-anim">{{ $global_page_item->home_feature_subheading }}</span>
                    <h2 class="title text-anim2">
                        {{ $global_page_item->home_feature_heading }}
                    </h2>
                </div>
            </div>
        </div>
        <div class="row gy-40">
            @foreach($features as $feature)
            <div class="col-xl-3 col-md-6">
                <div class="wcu-card">
                    <div class="box-icon">
                        {!! $feature->icon_code !!}
                    </div>
                    <h4 class="box-title">{{ $feature->name }}</h4>
                    <p class="box-text">
                        {!! nl2br($feature->content) !!}
                    </p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
<!--======== / Why Choose Us Section ========-->


<!--==============================
Counter Area
==============================-->
@if($global_page_item->about_counter_status == 'Show')
<section class="counter-area-1 pb-120 pt-120">
    <div class="container">

        <!-- Section Heading -->
        <div class="row justify-content-center text-center mb-50">
            <div class="col-lg-8">
                <div class="section-title">
                    <span class="sub-title">Our Achievements</span>
                    <h2 class="sec-title">Why Choose Us</h2>
                    <p>We take pride in our accomplishments and strive to deliver the best services for our clients.</p>
                </div>
            </div>
        </div>

        <!-- Counters -->
        <div class="row gy-30 justify-content-center">
            <div class="col-lg-4 col-md-6">
                <div class="counter-card">
                    <h3 class="counter-card_title"><span class="counter-number">{{ $counter_item->item1_number }}</span>+</h3>
                    <p class="counter-card_subtitle">{{ $counter_item->item1_title }}</p>
                    <p class="counter-card_text">
                        {!! nl2br($counter_item->item1_content) !!}
                    </p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="counter-card">
                    <h3 class="counter-card_title"><span class="counter-number">{{ $counter_item->item2_number }}</span>+</h3>
                    <p class="counter-card_subtitle">{{ $counter_item->item2_title }}</p>
                    <p class="counter-card_text">
                        {!! nl2br($counter_item->item2_content) !!}
                    </p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="counter-card">
                    <h3 class="counter-card_title"><span class="counter-number">{{ $counter_item->item3_number }}</span>+</h3>
                    <p class="counter-card_subtitle">{{ $counter_item->item3_title }}</p>
                    <p class="counter-card_text">
                        {!! nl2br($counter_item->item3_content) !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
<!--======== / Counter Section ========-->

<!--==============================
Testimonial Area
==============================-->
@if($global_page_item->home_testimonial_status == 'Show')
<section class="testimonial-area-3 overflow-hidden">
    <div class="testimonial-wrap3 pt-120 pb-120 bg-cover gray-bg" data-background="{{ asset('uploads/bg/testimonial-bg-shape3-1.png') }}">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-xl-6 col-lg-10">
                    <div class="section__title text-center mb-50">
                        <span class="sub-title text-anim">{{ $global_page_item->home_testimonial_subheading }}</span>
                        <h2 class="title text-white text-anim2">
                            {!! nl2br($global_page_item->home_testimonial_heading) !!}
                        </h2>
                    </div>
                </div>
            </div>
            <div class="slider-area">
                <div class="tg-swiper__slider swiper-container testi-slider3 overflow-hidden" id="testiSlider3" data-swiper-options='{
                    "loop": true,
                    "autoplay": {
                    "delay": 4000,
                    "disableOnInteraction": false
                    },
                    "spaceBetween": 24,
                    "slidesPerView": 1,
                    "breakpoints": {
                    "1200": {
                    "slidesPerView": 2
                    },
                    "1500": {
                    "slidesPerView": 3
                        }
                    }}'>
                    <div class="swiper-wrapper">
                        @foreach($testimonials as $testimonial)
                        <div class="swiper-slide">
                            <div class="testimonial-card3">
                                <div class="testimonial-author-card3">
                                    <div class="media-body">
                                        <h4 class="testimonial-card-title">{{ $testimonial->name }}</h4>
                                        <p class="testimonial-card-desig">{{ $testimonial->designation }}</p>
                                    </div>
                                    <div class="testimonial-quote-icon">
                                        <i class="fas fa-quote-right"></i>
                                    </div>
                                </div>
                                <p class="testi-text">
                                    {!! nl2br($testimonial->comment) !!}
                                </p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
<!--======== / Testimonial Section ========-->

<!--==============================
Faq Area
==============================-->
<section class="faq-area pt-120 pb-120" style="background: linear-gradient(135deg,#f5f7fa,#e4ecf7);">
    <div class="container">

        <!-- Section Heading -->
        <div class="row justify-content-center text-center mb-50">
            <div class="col-lg-8">
                <div class="section-title">
                    <h2>Frequently Asked Questions</h2>
                    <p>Find answers to some of the most common questions about our services.</p>
                </div>
            </div>
        </div>

        <div class="row gy-5 gx-80 justify-content-between align-items-center">
            <div class="col-xl-12">
                <div class="accordion-area accordion" id="faqAccordion">

                    @foreach($faqs as $key => $faq)
                    <div class="accordion-card {{ $key == 0 ? 'active' : '' }}">
                        
                        <div class="accordion-header" id="collapse-item-{{ $key+1 }}">
                            <button class="accordion-button {{ $key != 0 ? 'collapsed' : '' }}" 
                                type="button" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#collapse-{{ $key+1 }}" 
                                aria-expanded="{{ $key == 0 ? 'true' : 'false' }}" 
                                aria-controls="collapse-{{ $key+1 }}">
                                
                                {{ $loop->iteration < 10 ? '0'.$loop->iteration : $loop->iteration }}. 
                                {{ $faq->question }}

                            </button>
                        </div>

                        <div id="collapse-{{ $key+1 }}" 
                             class="accordion-collapse collapse {{ $key == 0 ? 'show' : '' }}" 
                             aria-labelledby="collapse-item-{{ $key+1 }}" 
                             data-bs-parent="#faqAccordion">

                            <div class="accordion-body">
                                <p class="faq-text">
                                    {!! nl2br($faq->answer) !!}
                                </p>
                            </div>

                        </div>

                    </div>
                    @endforeach

                </div>
            </div>
        </div>

    </div>
</section>
<!--======== / Faq Section ========-->


<!--==============================
Blog Area
==============================-->
@if($global_page_item->home_blog_status == 'Show')
<section class="blog-area-3 pt-120 pb-120">
    <div class="container">
        <div class="section__title mb-50 text-center">
            <span class="sub-title text-anim">{{ $global_page_item->home_blog_subheading }}</span>
            <h2 class="title text-anim2">
                {{ $global_page_item->home_blog_heading }}
            </h2>
        </div>
        <div class="row gy-30 justify-content-center">
            @forelse($posts as $post)
            <div class="col-xl-4 col-md-6">
                <div class="blog__post-item blog__post-item-five">
                    <div class="blog__post-thumb image-anim">
                        <a href="{{ route('post',$post->slug) }}"><img src="{{ asset('uploads/'.$post->photo) }}" alt="img"></a>
                    </div>
                    <div class="blog__post-content">
                        <div class="blog__post-meta">
                            <ul class="list-wrap">
                                <li><a href="javascript:void(0)">
                                    <i class="fas fa-calendar"></i>
                                    {{ date('d M, Y', strtotime($post->created_at)) }}</a></li>
                                <li><a href="javascript:void(0)">
                                    <i class="fas fa-user"></i>
                                    {{ __('by') }} {{ $admin_data->name }}</a></li>
                            </ul>
                        </div>
                        <h3 class="title">
                            <a href="{{ route('post',$post->slug) }}">{{ $post->title }}</a>
                        </h3>
                        <div class="blog__post-bottom">
                            <a href="{{ route('post',$post->slug) }}" class="link-btn">
                                {{ __('READ MORE') }}
                                <i class="fas fa-angle-double-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
<!--======== / Blog Section ========-->
@endsection