@extends('frontend.frontend_layout')
@section('home-menu') current @endsection
@section('content')
<!--Main Slider Start-->
<section class="main-slider">
    <div class="swiper-container thm-swiper__slider" data-swiper-options='{"slidesPerView": 1, "loop": true,
                    "effect": "fade",
                    "pagination": {
                    "el": "#main-slider-pagination",
                    "type": "bullets",
                    "clickable": true
                    },
                    "navigation": {
                    "nextEl": "#main-slider__swiper-button-next",
                    "prevEl": "#main-slider__swiper-button-prev"
                    },
                    "autoplay": {
                    "delay": 5000
                    }}'>
        <div class="swiper-wrapper">
            @foreach ($sliders as $slider)
            <div class="swiper-slide">
                <div class="image-layer"
                    style="background-size: 100% 100%; background-image: url({{ asset($slider->image) }});">
                </div>
                <!-- /.image-layer -->

                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="main-slider__content">
                                <h2 class="main-slider__title" style="width: 60%;">{{ $slider->title }}</h2>
                                <p class="main-slider__text">We are here to support you every step of the way
                                </p>
                                <div class="main-slider__btn-box">
                                    {{-- <a href="{{url('/about')}}" class="thm-btn main-slider__btn-one">Discover
                                        More</a> --}}
                                    <a href="{{ url('/donation') }}" class="thm-btn main-slider__btn-two">Donate
                                        now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>


        <!-- If we need navigation buttons -->
        <div class="main-slider__nav">
            <div class="swiper-button-prev" id="main-slider__swiper-button-next">
                <i class="icon-left-arrow"></i>
            </div>
            <div class="swiper-button-next" id="main-slider__swiper-button-prev">
                <i class="icon-right-arrow"></i>
            </div>
        </div>

    </div>
</section>
<!--Main Slider End-->

<!--Causes One Start-->
<section class="causes-one" style="margin-top: 60px;">
    <div class="container">
        <div class="section-title text-center">
            <span class="section-title__tagline">Start Donating them</span>
            <h2 class="section-title__title">Find Popular Projects</h2>
        </div>
        <div class="row">
            @foreach ($projects as $project)
            <div class="col-xl-4 col-lg-4 wow fadeInUp">
                <div class="causes-one__single">
                    <div class="causes-one__img-box">
                        <div class="causes-one__img">
                            <img src="{{ asset($project->image) }}" alt="Image">
                        </div>
                        <div class="causes-one__border-box"></div>
                    </div>
                    <div class="causes-one__content">
                        <div class="causes-one__title-box">
                            <h3 class="causes-one__title"><a href="{{ url('/project',$project->slug ) }}">{{
                                    $project->title }}</a></h3>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
<!--Causes One End-->

<!--Causes One Start-->
<section class="causes-one" style="margin-top: 60px;">
    <div class="container">
        <div class="section-title text-center">
            <span class="section-title__tagline">Start Donating them</span>
            <h2 class="section-title__title">Upcoming Projects</h2>
        </div>
        <div class="row">
            @foreach ($upcoming_projects as $project)
            <div class="col-xl-4 col-lg-4 wow fadeInUp">
                <div class="causes-one__single">
                    <div class="causes-one__img-box">
                        <div class="causes-one__img">
                            <img src="{{ asset($project->image) }}" alt="Image">
                        </div>
                        <div class="causes-one__border-box"></div>
                    </div>
                    <div class="causes-one__content">
                        <div class="causes-one__title-box">
                            <h3 class="causes-one__title"><a href="{{ url('/project',$project->slug ) }}">{{
                                    $project->title }}</a></h3>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
<!--Causes One End-->

<!--Feature One Start-->
<section class="feature-one">
    <div class="container">
        <div class="section-title text-center" style="margin-top: 45px;">
            <span class="section-title__tagline">Watch Our Latest Services</span>
            <h2 class="section-title__title">Service we offer</h2>
        </div>
        <div class="row" style="margin-top: 115px;">
            <!--Feature One Single Start-->
            @foreach ($categories as $category)
            <div class="col-xl-4 col-lg-4">
                <div class="feature-one__single feature-one__single-2">
                    <div class="feature-one__img">
                        @if (isset($category->image) && file_exists($category->image))
                        <img src="{{ asset($category->image) }}" style="width: 180px; height: 180px;" alt="Image">
                        @else
                        <img src="{{ asset('common/no-image.jpg') }}" style="width: 180px; height: 180px;" alt="Image">
                        @endif
                    </div>
                    <div class="feature-one__content">
                        <h3 class="feature-one__title"><a href="javascript:void(0)">{{ $category->name }}</a></h3>
                        <p class="feature-one__text" style="height: 80px; overflow: hidden;">{{ $category->description
                            }}</p>
                    </div>
                    <div class="feature-one__arrow-box">
                        <a href="{{ route('frontend.category-details', $category->slug) }}"
                            class="feature-one__arrow feature-one__arrow-2"><i class="fa fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
            @endforeach
            <!--Feature One Single End-->
        </div>
    </div>
</section>
<!--Feature One End-->

<!--About One Start-->
<section class="about-one">
    <div class="about-one__shape-2 float-bob-y">
        <img src="{{ asset('frontend') }}/assets/images/shapes/about-one-shape-2.png" alt="">
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xl-6">
                <div class="about-one__left">
                    <div class="about-one__img-box wow slideInLeft" data-wow-delay="100ms" data-wow-duration="2500ms">
                        <div class="about-one__img">
                            @if (isset($about->big_image) && file_exists($about->big_image))
                            <img src="{{ asset($about->big_image) }}" alt="">
                            @else
                            <img src="{{ asset('common/no-image.jpg') }}" alt="Image">
                            @endif
                        </div>
                        <div class="about-one__img-2">
                            @if (isset($about->small_image) && file_exists($about->small_image))
                            <img src="{{ asset($about->small_image) }}" alt="">
                            @else
                            <img src="{{ asset('common/no-image.jpg') }}" alt="Image">
                            @endif
                        </div>
                        <div class="about-one__shape-1 float-bob-x"></div>
                        <div class="about-one__video-link">
                            <a href="{{ $about->video }}" class="video-popup">
                                <div class="about-one__video-icon">
                                    <span class="fa fa-play"></span>
                                    <i class="ripple"></i>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="about-one__right">
                    <div class="section-title text-left">
                        <span class="section-title__tagline">Welcome to Charity Platform</span>
                        <h2 class="section-title__title"> {{ $about->title }} </h2>
                    </div>
                    {!! $about->description !!}
                    <ul class="about-one__points list-unstyled">
                        <li>
                            <div class="about-one__points-icon-box">
                                <div class="icon">
                                    <span class="fa fa-check"></span>
                                </div>
                                <div class="text">
                                    <p>Our Mission</p>
                                </div>
                            </div>
                            <p class="about-one__points-text-2">{{ $about->mission }}</p>
                        </li>
                        <li>
                            <div class="about-one__points-icon-box">
                                <div class="icon">
                                    <span class="fa fa-check"></span>
                                </div>
                                <div class="text">
                                    <p>Our Story</p>
                                </div>
                            </div>
                            <p class="about-one__points-text-2">{{ $about->story }}</p>
                        </li>
                    </ul>
                    <div class="about-one__btn-box">
                        <a href="{{url('/about')}}" class="about-one__btn thm-btn">Discover More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--About One End-->

<!--Counter One Start-->
<section class="counter-one">
    <div class="counter-one__bg" style="background-image: url({{ asset('common/upload/counter-one-bg-img.png') }});">
    </div>
    <div class="container">
        <div class="row">
            <!--Counter One Single Start-->
            <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="100ms">
                <div class="counter-one__single">
                    <div class="counter-one__icon-box">
                        <div class="counter-one__shape-1">
                            <img src="{{ asset('frontend') }}/assets/images/shapes/counter-one-shape-1.png" alt="">
                        </div>
                        <div class="counter-one__icon">
                            <span class="icon-campaign"></span>
                        </div>
                    </div>
                    <div class="counter-one__count-box">
                        <h3 class="mt-4" data-count="{{ $counter->total_donations }}">{{ $counter->total_donations }}
                        </h3>
                        <p class="counter-one__text">Total Donations</p>
                    </div>
                </div>
            </div>
            <!--Counter One Single End-->
            <!--Counter One Single Start-->
            <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="200ms">
                <div class="counter-one__single counter-one__single-2">
                    <div class="counter-one__icon-box">
                        <div class="counter-one__shape-1">
                            <img src="{{ asset('frontend') }}/assets/images/shapes/counter-one-shape-2.png" alt="">
                        </div>
                        <div class="counter-one__icon">
                            <span class="icon-budget"></span>
                        </div>
                    </div>
                    <div class="counter-one__count-box">
                        <h3 class="mt-4" data-count="{{ $counter->projects_funded }}">{{ $counter->projects_funded }}
                        </h3>
                        <p class="counter-one__text">Projects Funded</p>
                    </div>
                </div>
            </div>
            <!--Counter One Single End-->
            <!--Counter One Single Start-->
            <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="300ms">
                <div class="counter-one__single counter-one__single-3">
                    <div class="counter-one__icon-box">
                        <div class="counter-one__shape-1">
                            <img src="{{ asset('frontend') }}/assets/images/shapes/counter-one-shape-3.png" alt="">
                        </div>
                        <div class="counter-one__icon">
                            <span class="icon-social-campaign"></span>
                        </div>
                    </div>
                    <div class="counter-one__count-box">
                        <h3 class="mt-4" data-count="{{ $counter->satisfied_donors }}">{{ $counter->satisfied_donors }}
                        </h3>
                        <p class="counter-one__text">Satisfied Donors</p>
                    </div>
                </div>
            </div>
            <!--Counter One Single End-->
            <!--Counter One Single Start-->
            <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="400ms">
                <div class="counter-one__single counter-one__single-4">
                    <div class="counter-one__icon-box">
                        <div class="counter-one__shape-1">
                            <img src="{{ asset('frontend') }}/assets/images/shapes/counter-one-shape-4.png" alt="">
                        </div>
                        <div class="counter-one__icon">
                            <span class="icon-help"></span>
                        </div>
                    </div>
                    <div class="counter-one__count-box">
                        <h3 class="mt-4" data-count="{{ $counter->our_volunteers }}">{{ $counter->our_volunteers }}</h3>
                        <p class="counter-one__text">Our Volunteers</p>
                    </div>
                </div>
            </div>
            <!--Counter One Single End-->
        </div>
    </div>
</section>
<!--Counter One End-->

<!--Fundraising One Start-->
<section class="fundraising-one">
    <div class="fundraising-one__bg jarallax" data-jarallax data-speed="0.2" data-imgPosition="50% 0%"
        style="background-image: url({{ asset('common/upload/fundraising-one-bg-img.jpg') }});">
    </div>
    <div class="container">
        <div class="fundraising-one__inner">
            <p class="fundraising-one__sub-title">We’re here to support poor people</p>
            <h3 class="fundraising-one__title">Fundraising for the People and
                <br> Causes you <span>Care</span> About
            </h3>
            <div class="fundraising-one__btn-box">
                <a href="{{ url('/donation') }}" class="fundraising-one__btn thm-btn">Start donating them</a>
            </div>
        </div>
    </div>
</section>
<!--Fundraising One End-->

<!--Event One Start-->
<section class="event-one">
    <div class="event-one__shape-1 float-bob-y">
        <img src="{{ asset('frontend') }}/assets/images/shapes/event-one-shape-1.png" alt="">
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xl-6 col-lg-5">
                <div class="event-one__left">
                    <div class="section-title text-left">
                        <span class="section-title__tagline">Our Latest Events</span>
                        <h2 class="section-title__title">Upcoming Events</h2>
                    </div>
                    {!! $page_text->home_page_event_description !!}
                    {{-- <p class="event-one__text">Lorem ipsum is simply free text available dolor sit amet,
                        consectetur notted adipisicing elit sed do eiusmod tempory.</p> --}}
                    <div class="event-one__helping">
                        <div class="event-one__helping-icon">
                            <span class="icon-charity"></span>
                        </div>
                        <div class="event-one__helping-text">
                            <p>We’re inspiring and helping them to live a better lifestyle</p>
                        </div>
                    </div>
                    <div class="event-one__btn-box">
                        <a href="{{ url('/events') }}" class="event-one__btn thm-btn">View all events</a>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-7">
                <div class="event-one__right">
                    <div class="event-one__heart">
                        <img src="{{ asset('frontend') }}/assets/images/shapes/event-one-heart.png" alt="">
                    </div>
                    <div class="event-one__carousel owl-carousel owl-theme thm-owl__carousel" data-owl-options='{
                                    "loop": true,
                                    "autoplay": true,
                                    "margin": 30,
                                    "nav": false,
                                    "dots": true,
                                    "smartSpeed": 500,
                                    "autoplayTimeout": 10000,
                                    "navText": ["<span class=\"icon-left-arrow\"></span>","<span class=\"icon-right-arrow\"></span>"],
                                    "responsive": {
                                        "0": {
                                            "items": 1
                                        },
                                        "768": {
                                            "items": 1
                                        },
                                        "992": {
                                            "items": 1
                                        },
                                        "1200": {
                                            "items": 1
                                        }
                                    }
                                }'>
                        <!--Event One Single Start-->

                        @foreach ($events as $event)
                        <div class="item">
                            <ul class="event-one__list list-unstyled">
                                <li>
                                    <div class="event-one__img" style="width: 40%; height: 210px;">
                                        @if (isset($event->image) && file_exists($event->image))
                                        <img src="{{ asset($event->image) }}" style="width: 210px; height: 210px;"
                                            alt="image">
                                        @else
                                        <img src="{{ asset('common/no-image.jpg') }}" alt="">
                                        @endif
                                        <div class="event-one__date">
                                            <p>{{ date('d F', strtotime($event->date)) }}</p>
                                        </div>
                                    </div>
                                    <div class="event-one__content" style="width: 60%; height: 210px;">
                                        <ul class="list-unstyled event-one__meta">
                                            <li><i class="fas fa-clock"></i>{{ date("h:i a", strtotime($event->s_time))
                                                }}</li>
                                            <li><i class="fas fa-map-marker"></i>{{ $event->location }}</li>
                                        </ul>
                                        <h3 class="event-one__title"><a href="{{ url('/event',$event->slug ) }}">{{
                                                $event->title }}</a></h3>
                                        <div class="" style="height: 65px; overflow: hidden;">
                                            {!! $event->description !!}
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="event-one__img" style="width: 40%; height: 210px;">
                                        @if (isset($event->image) && file_exists($event->image))
                                        <img src="{{ asset($event->image) }}" style="width: 210px; height: 210px;"
                                            alt="image">
                                        @else
                                        <img src="{{ asset('common/no-image.jpg') }}" alt="">
                                        @endif
                                        <div class="event-one__date">
                                            <p>{{ date('d F', strtotime($event->date)) }}</p>
                                        </div>
                                    </div>
                                    <div class="event-one__content" style="width: 60%; height: 210px;">
                                        <ul class="list-unstyled event-one__meta">
                                            <li><i class="fas fa-clock"></i>{{ date("h:i a", strtotime($event->s_time))
                                                }}</li>
                                            <li><i class="fas fa-map-marker"></i>{{ $event->location }}</li>
                                        </ul>
                                        <h3 class="event-one__title"><a href="{{ url('/event',$event->slug ) }}">{{
                                                $event->title }}</a></h3>
                                        <div class="" style="height: 65px; overflow: hidden;">
                                            {!! $event->description !!}
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        @endforeach
                        <!--Event One Single End-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Event One End-->

<!--Donate One Start-->
<section class="donate-one mt-5">
    <div class="container">
        <div class="row">
            <div class="col-xl-6">
                <div class="donate-one__left">
                    <div class="section-title text-left">
                        <span class="section-title__tagline">Help us Donate</span>
                        <h2 class="section-title__title">Start Donating</h2>
                    </div>
                    <div class="donate-one__shape-1 float-bob-x">
                        <img src="{{ asset('frontend') }}/assets/images/shapes/donate-one-shape-1.png" alt="">
                    </div>
                    <form action="{{ route('donation.submit') }}" method="post" class="contact-form-box__form">
                        @csrf
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 my-2">
                                <div class="input-group">
                                    <span class="input-group-text"
                                        style="width: 50px; text-align: center; font-size: 18px; font-weight: 700;padding-left: 18px;">
                                        $
                                    </span>
                                    <input type="number" class="form-control donation-input-field" id="amount"
                                        name="amount" placeholder="0.00">
                                </div>
                                @error('amount')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-xl-6 col-lg-6 my-2">
                                <div class="input-group">
                                    <span class="input-group-text donation-input-icon"> <i class="fas fa-user"></i>
                                    </span>
                                    <input type="Text" class="form-control donation-input-field" id="name" name="name"
                                        placeholder="Your Name">
                                </div>
                                @error('name')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-xl-6 col-lg-6 my-2">
                                <div class="input-group">
                                    <span class="input-group-text donation-input-icon"> <i class="fas fa-phone"></i>
                                    </span>
                                    <input type="number" class="form-control donation-input-field" id="phone"
                                        name="phone" placeholder="Phone number">

                                </div>
                                @error('phone')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-xl-12 col-lg-12 my-2">
                                <div class="input-group">
                                    <span class="input-group-text donation-input-icon"> <i class="fas fa-envelope"></i>
                                    </span>
                                    <input type="email" class="form-control donation-input-field" id="email"
                                        name="email" placeholder="Email Address">

                                </div>
                                @error('email')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-xl-12 col-lg-12 my-2">
                                <div class="input-group">
                                    <span class="input-group-text donation-input-icon"> <i style="padding-top: 30px;"
                                            class="fas fa-sticky-note"></i> </span>
                                    <textarea name="message" style="height: 100px; padding: 10px 20px;"
                                        class="form-control donation-input-field"
                                        placeholder="Write a Message"></textarea>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 mt-3">
                                <label class="pb-2" style="font-weight: 700; color: #444444">Payment Method
                                    :</label>
                                <div class="space-x-2">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="paypal" name="payment_method"
                                            value="Paypal">
                                        <label class="form-check-label" for="paypal">Paypal</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="stripe" name="payment_method"
                                            value="Stripe">
                                        <label class="form-check-label" for="stripe">Credit card</label>
                                    </div>

                                </div>
                                @error('payment_method')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-xl-12 col-lg-12 mt-3">
                                <div class="contact-form-box__btn-box">
                                    <button type="submit" class="thm-btn contact-form-box__btn">Submit Now</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="result"></div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="donate-one__right">
                    <div class="donate-one__img">
                        <img src="{{ asset('common/upload/donate-one-img-1.jpg') }}" alt="">
                    </div>
                    <ul class="donate-one__contact list-unstyled">
                        <li>
                            <div class="icon">
                                <span class="fas fa-envelope-open"></span>
                            </div>
                            <div class="content">
                                <p><a href="mailto:{{ $websiteSetting->email }}">{{ $websiteSetting->email }}</a></p>
                                <p><a href="tel:+ {{ $websiteSetting->phone }}">+ {{ $websiteSetting->phone }}</a></p>
                            </div>
                        </li>
                        <li>
                            <div class="icon">
                                <span class="fas fa-map"></span>
                            </div>
                            <div class="content">
                                <p>
                                    {{ $websiteSetting->address }}
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Donate One End-->

<!--Testimonial One Start-->
<section class="testimonial-one">
    <div class="testimonial-one__bg"
        style="background-image: url({{ asset('frontend') }}/assets/images/backgrounds/testimonial-one-bg-img-1.png);">
    </div>
    <div class="testimonial-one__map float-bob-x">
        <img src="{{ asset('frontend') }}/assets/images/shapes/testimonial-one-map-1.png" alt="">
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xl-5">
                <div class="testimonial-one__left">
                    <div class="section-title text-left">
                        <span class="section-title__tagline">Our Testimonials</span>
                        <h2 class="section-title__title">What They’re
                            Talking About us</h2>
                    </div>
                    {!! $page_text->home_page_testimonial_description !!}
                </div>
            </div>
            <div class="col-xl-7">
                <div class="testimonial-one__right">
                    <div class="testimonial-one__carousel owl-carousel owl-theme thm-owl__carousel" data-owl-options='{
                                    "loop": true,
                                    "autoplay": true,
                                    "margin": 30,
                                    "nav": false,
                                    "dots": true,
                                    "smartSpeed": 500,
                                    "autoplayTimeout": 10000,
                                    "navText": ["<span class=\"icon-left-arrow\"></span>","<span class=\"icon-right-arrow\"></span>"],
                                    "responsive": {
                                        "0": {
                                            "items": 1
                                        },
                                        "768": {
                                            "items": 2
                                        },
                                        "992": {
                                            "items": 2
                                        },
                                        "1200": {
                                            "items": 1.166666
                                        }
                                    }
                                }'>
                        <!--Testimonial One Single Start-->
                        @foreach ($testimonials as $testimonial)
                        <div class="item">
                            <div class="testimonial-one__single">
                                <div class="testimonial-one__img-box">
                                    <div class="testimonial-one__img">
                                        @if (isset($testimonial->image) && file_exists($testimonial->image))
                                        <img src="{{ asset($testimonial->image) }}" style="width: 116px; height: 116px;"
                                            alt="image">
                                        @else
                                        <img src="{{ asset('common/no-image.jpg') }}" alt="">
                                        @endif
                                    </div>
                                </div>
                                <div class="testimonial-one__single-inner">
                                    <div class="testimonial-one__shape-1"></div>
                                    <div class="testimonial-one__icon">
                                        <span class="icon-quote"></span>
                                    </div>
                                    <div class="testimonial-one__client-info">
                                        <div class="testimonial-one__content">
                                            <div class="testimonial-one__rating">
                                                @php
                                                for ($i=0; $i < 5; $i++) { if ($i < $testimonial->ratting) {
                                                    echo "<span class='fa fa-star'></span>" ;
                                                    } else {
                                                    echo "<span class='fa fa-star' style='color:#cfcbcb'></span>" ;
                                                    }
                                                    }
                                                    @endphp
                                            </div>
                                            <h3 class="testimonial-one__client-name">{{ $testimonial->name }}</h3>
                                            <p class="testimonial-one__client-sub-title">{{ $testimonial->designation }}
                                            </p>
                                        </div>
                                    </div>
                                    <p class="testimonial-one__text" style="height: 90px;
                                        overflow: hidden;">{{ $testimonial->details }}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        <!--Testimonial One Single End-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Testimonial One End-->

<!--Brand One Start-->
{{-- <section class="brand-one">
    <div class="brand-one__shape-1"
        style="background-image: url({{ asset('frontend') }}/assets/images/shapes/brand-one-shape-1.png);">
    </div>
    <div class="container">
        <div class="thm-swiper__slider swiper-container" data-swiper-options='{"spaceBetween": 100,
                    "slidesPerView": 5,
                    "loop": true,
                    "navigation": {
                        "nextEl": "#brand-one__swiper-button-next",
                        "prevEl": "#brand-one__swiper-button-prev"
                    },
                    "autoplay": { "delay": 5000 },
                    "breakpoints": {
                        "0": {
                            "spaceBetween": 30,
                            "slidesPerView": 2
                        },
                        "375": {
                            "spaceBetween": 30,
                            "slidesPerView": 2
                        },
                        "575": {
                            "spaceBetween": 30,
                            "slidesPerView": 3
                        },
                        "767": {
                            "spaceBetween": 50,
                            "slidesPerView": 4
                        },
                        "991": {
                            "spaceBetween": 50,
                            "slidesPerView": 5
                        },
                        "1199": {
                            "spaceBetween": 100,
                            "slidesPerView": 5
                        }
                    }}'>
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="{{ asset('frontend') }}/assets/images/brand/brand-1-1.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="{{ asset('frontend') }}/assets/images/brand/brand-1-2.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="{{ asset('frontend') }}/assets/images/brand/brand-1-3.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="{{ asset('frontend') }}/assets/images/brand/brand-1-4.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="{{ asset('frontend') }}/assets/images/brand/brand-1-5.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="{{ asset('frontend') }}/assets/images/brand/brand-1-1.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="{{ asset('frontend') }}/assets/images/brand/brand-1-2.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="{{ asset('frontend') }}/assets/images/brand/brand-1-3.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="{{ asset('frontend') }}/assets/images/brand/brand-1-4.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="{{ asset('frontend') }}/assets/images/brand/brand-1-5.png" alt="">
                </div><!-- /.swiper-slide -->
            </div>
        </div>
    </div>
</section> --}}
<!--Brand One End-->

<!--Blog One Start-->
<section class="blog-one">
    <div class="container">
        <div class="section-title text-center">
            <span class="section-title__tagline">Watch Our Latest Blogs</span>
            <h2 class="section-title__title">News & Articles</h2>
        </div>
        <div class="row">
            <!--Blog One Single Start-->
            @foreach ($blogs as $blog)
            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="200ms">
                <div class="blog-one__single">
                    <div class="blog-one__img-box">
                        <div class="blog-one__img">
                            @if (isset($blog->thumbnail) && file_exists($blog->thumbnail))
                            <img src="{{ asset($blog->thumbnail) }}" alt="Thumbnail">
                            @else
                            <img src="{{ asset('common/no-image.jpg') }}" alt="">
                            @endif
                        </div>
                        <div class="blog-one__date">
                            <span>{{ date('d', strtotime($blog->date)) }}</span>
                            <p>{{ date('M', strtotime($blog->date)) }}</p>
                        </div>
                    </div>
                    <div class="blog-one__content-box">
                        <ul class="list-unstyled blog-one__meta">
                            <li><a href="{{ url('/blog',$blog->slug) }}"><i class="far fa-user-circle"></i> by {{
                                    $blog->user ? $blog->user->name : '' }}</a>
                            </li>
                            <li><a href="{{ url('/blog',$blog->slug) }}"><i class="fas fa-comments"></i> 02 Comments</a>
                            </li>
                        </ul>
                        <h3 class="blog-one__title"><a href="{{ url('/blog',$blog->slug) }}">{{ $blog->title }}</a></h3>
                        <div class="blog-one__read-more">
                            <a href="{{ url('/blog',$blog->slug) }}"> <span class="fa fa-angle-right"></span>Read
                                More</a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <!--Blog One Single Start-->
        </div>
    </div>
</section>
<!--Blog One End-->

<!--Gallery one Start-->
<section class="gallery-one">
    <div class="container">
        <div class="gallery-one__carousel thm-owl__carousel owl-theme owl-carousel" data-owl-options='{
                        "items": 5,
                        "margin": 30,
                        "smartSpeed": 700,
                        "loop":true,
                        "autoplay": true,
                        "nav":false,
                        "dots":false,
                        "navText": ["<span class=\"icon-left-arrow\"></span>","<span class=\"icon-right-arrow\"></span>"],
                        "responsive":{
                            "0":{
                                "items":1
                            },
                            "768":{
                                "items":2
                            },
                            "992":{
                                "items": 4
                            },
                            "1200":{
                                "items": 5
                            }
                        }
                    }'>
            <!--Gallery one Single Start-->
            @foreach ($galleries as $gallery)
            <div class="item">
                <div class="gallery-one__single">
                    <div class="gallery-one__img">
                        @if (isset($gallery->image) && file_exists($gallery->image))
                        <img src="{{ asset($gallery->image) }}" alt="image">
                        @else
                        <img src="{{ asset('common/no-image.jpg') }}" alt="">
                        @endif
                        <div class="gallery-one__img-icon">
                            <a href="#"><span class="fab fa-instagram"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <!--Gallery one Single End-->
        </div>
    </div>
</section>
<!--Gallery one End-->
@endsection