@extends('website.layouts.app')

@section('content')
                

    <!-- Hero Banner Section -->
    @if(isset($home_data['hero']) && count($home_data['hero']) > 0)
    <section class="hero-banner position-relative overflow-hidden">
        <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">

            <div class="carousel-indicators">
                @foreach($home_data['hero'] as $key => $row)
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ $key }}"
                        class="{{ $key == 0 ? 'active' : '' }}"
                        aria-current="{{ $key == 0 ? 'true' : 'false' }}"
                        >
                    </button>
                @endforeach
            </div>
            <div class="carousel-inner">
                @foreach($home_data['hero'] as $key => $row)
                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                    @if($row->image)
                    <img src="{{ $row->image }}" class="d-block w-100" alt="Banner">
                    @endif
                    <div class="carousel-caption p-3 z-2">
                        <div class="title fs-1 fw-bold text-capitalize mb-3">{{ $row->title }}</div>
                        <div class="sub-title mb-4">{!! $row->description !!}</div>
                        <a href="{{ route('donation') }}" class="btn btn-warning ">
                            <i class="bi bi-coin"></i> Donate Now
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
            <button class="carousel-control carousel-control-prev" type="button"
                data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control carousel-control-next" type="button"
                data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </section>
    @endif


    <!-- What We Do Section -->
    @if($home_data && isset($home_data['what_we_do']))
    <section class="what-we-do overflow-hidden py-5" >
        <div class="container my-md-4">
            <div class="section-head text-center mx-auto animate__animated animate__fadeInDown" style="max-width: 600px;">
                <div class="heading display-6 fw-bold text-theme1 mb-3">{{ $home_data['what_we_do'][0]->title }}</div>
                <p class="sub-title text-muted">{{ $home_data['what_we_do'][0]->description }}</p>
            </div>

            <div class="section-content mt-5">
                <div class="row">
                    @if($WhatWeDoItems && count($WhatWeDoItems) > 0)
                        @foreach($WhatWeDoItems as $key => $value)
                        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                            <div class="service-wrapper bg-white border rounded shadow-sm text-center p-4 h-100 animate__animated animate__zoomIn wow"
                                data-wow-delay="{{ 0.2 * $key }}s">
                                {{-- Optional icon/image placeholder --}}
                                <!-- <div class="icon mb-3">
                                    <img src="/path-to-placeholder-icon.png" alt="Icon" style="width: 60px;" class="img-fluid">
                                </div> -->

                                <h5 class="fs-5 fw-semibold text-theme1">{{ $value->title }}</h5>
                                <p class="description text-muted">{!! $value->description !!}</p>

                                @if($value->read_more_link)
                                    <a href="{{ $value->read_more_link }}" class="btn btn-outline-theme1 mt-2">Read More</a>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
    @endif


    <!-- About Details Section -->
    @if($home_data && isset($home_data['about_us']))
    <section class="iwt-section overflow-hidden position-relative py-5">
        <div class="container my-md-4">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="info-wrapper pe-lg-4 animate__animated animate__fadeInLeft wow">
                        <div class="label-title text-uppercase text-theme1 mb-2 fw-bold small">About Us</div>
                        <h2 class="heading text-capitalize fw-bold mb-3">{{ $home_data['about_us'][0]->title }}</h2>
                        <p class="description text-muted mb-4">
                            {{ $home_data['about_us'][0]->description }}
                        </p>
                        <a href="{{ route('about') }}" class="btn btn-theme1 px-4 py-2">Read More</a>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="image-wrapper animate__animated animate__fadeInRight wow">
                        <img src="{{ $home_data['about_us'][0]->image }}" alt="Cow Care" class="img-fluid w-100 rounded shadow" />
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    <!-- testimonials Section -->
    @if($home_data && isset($home_data['testimonial']))
    <section class="testimonial-section overflow-hidden py-5">
        <div class="container my-md-4">
            <div class="section-head text-center mx-auto mb-5" style="max-width: 600px;">
                <div class="label-title">Testimonial</div>
                <h2 class="heading mb-2">{{ $home_data['testimonial'][0]->title }}</h2>
                <p class="sub-title text-muted">{{ $home_data['testimonial'][0]->description }}</p>
            </div>

            <!-- Swiper -->
            <div class="swiper-container testimonials-slider w-100 overflow-hidden position-relative">
                <div class="swiper-wrapper" style="padding-bottom: 60px;">

                    @foreach($testimonial as $value)
                        <!-- Slide 1 -->
                        <div class="swiper-slide">
                            <div class="testimonial text-center">
                                <img src="{{ $value->photo }}" alt="Client Image" class="img-fluid mb-3">
                                <h5 class="text-black fw-bold">{{ $value->name }}</h5>
                                <div class="description fst-italic">{{ $value->description }} </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    @endif


    @if($home_data && isset($home_data['why_choose_us']))
    <!-- Why Choose Us Section -->
    <section class="iwt-section why-choose-us-section overflow-hidden position-relative py-5">
        <div class="container my-md-4">
            <div class="wrapper text-center mx-auto mb-5 animate__animated animate__fadeInDown" style="max-width: 700px;">
                <div class="label-title text-uppercase text-theme1 small fw-bold">Why Choose Us?</div>
                <h2 class="heading fw-bold">{{ $home_data['why_choose_us'][0]->title }}</h2>
                <p class="description text-muted">{{ $home_data['why_choose_us'][0]->description }}</p>
            </div>

            <div class="row gx-4 gy-4">
                @if($whyChooseUs && count($whyChooseUs) > 0)
                    @foreach($whyChooseUs as $key => $value)
                    <div class="col-sm-6 col-xl-3">
                        <div class="why-box text-center bg-white p-4 rounded shadow-sm h-100 animate__animated animate__fadeInUp wow">
                            <div class="icon-wrapper mb-3">
                                @if($value->icon)
                                    <i class="bi {{ $value->icon }} text-theme2 display-4"></i>
                                @else
                                    <i class="bi bi-star text-theme2 display-4"></i>
                                @endif
                            </div>
                            <div class="title text-dark fs-5 fw-semibold">{{ $value->title }}</div>
                        </div>
                    </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
    @endif


    <!-- Blogs Section -->
    @if($home_data && isset($home_data['blogs']))
    <section class="blogs-section overflow-hidden position-relative py-5 bg-light">
        <div class="container my-md-4">
            <div class="wrapper text-center mx-auto mb-4 mb-xl-5 animate__animated animate__fadeInDown" style="max-width: 700px;">
                <div class="label-title text-uppercase text-theme1 small fw-bold">Blogs</div>
                <h2 class="heading fw-bold">{{ $home_data['blogs'][0]->title }}</h2>
                <p class="description text-muted">{{ $home_data['blogs'][0]->description }}</p>
            </div>

            <div class="row gx-4 gy-4 mb-5">
                @if($blog && count($blog) > 0)
                    @foreach($blog as $key => $value)
                    <div class="col-sm-6 col-lg-4">
                        <div class="blog-item bg-white h-100 border shadow-sm rounded overflow-hidden animate__animated animate__fadeInUp wow">
                            <img src="{{ $value->image }}" alt="Blog Image" class="img-fluid w-100" style="height: 220px; object-fit: cover;">
                            <div class="blog-info p-3">
                                <h5 class="blog-title text-black fw-semibold mb-2">{{ Str::limit($value->title, 60) }}</h5>
                                <p class="blog-desc text-muted mb-2">{{ Str::limit($value->description, 100) }}</p>
                                <div class="blog-date small text-secondary mb-2">
                                    <i class="bi bi-calendar4-week me-1"></i> {{ $value->published_date }}
                                </div>
                                <a href="{{ $value->read_more_link }}" class="learn-more text-theme1 fw-medium">Read More <i class="bi bi-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @endif
            </div>

            <div class="btn-wrapper text-center">
                <a href="{{ route('blogs') }}" class="btn btn-theme1 btn-custom px-4 py-2 shadow animate__animated animate__fadeInUp">
                    View More
                </a>
            </div>
        </div>
    </section>
    @endif


@endsection