@extends('front.layouts.app')
@section('content')

    <!-- Begin: Main Slider -->
    <section data-scroll-section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                @forelse($homeSlider as $val)
                <div class="swiper-slide">
                    <div class="slide-inner">
                        <div class="container">
                            <div class="row align-items-center justify-content-between">
                                <div class="col-lg-5">
                                    <h2>{{ $val->title }}</h2>
                                    <p>{!! $val->detail !!}</p>
                                    <div class="banForm">
                                        <input type="text" class="form-control" placeholder="Your Email Address">
                                        <button>Get Started</button>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="slideIMg" data-swiper-parallax="-750">
                                        <figure>
                                            <img src="{{ $val->image }}" class="img-fluid" alt="">
                                        </figure>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                    <p>Slider not Found</p>
                @endforelse

            </div>
        </div>
        <div class="bannerImages">
            <img src="{{ asset('images/ban1.png') }}" class="ban1" alt="">
            <img src="{{ asset('images/ban2.png') }}" class="ban2" alt="">
            <img src="{{ asset('images/ban3.png') }}" class="ban3" alt="">
            <img src="{{ asset('images/ban4.png') }}" class="ban4" alt="">
            <img src="{{ asset('images/ban6.png') }}" class="ban6" alt="">
            <img src="{{ asset('images/ban7.png') }}" class="ban7" alt="">
            <img src="{{ asset('images/ban8.png') }}" class="ban8" alt="">
            <img src="{{ asset('images/ban9.png') }}" class="ban9" alt="">
            <img src="{{ asset('images/ban10.png') }}" class="ban10" alt="" data-scroll data-scroll-speed="2"
                 data-scroll-delay="0.1">
        </div>
    </section>
    <!-- End: Main Slider -->

    <section data-scroll-section class="aboutSection">
        <div class="container">
            <div class="row justify-content-between align-items-start">
                <div class="col-md-6">
                    <figure>
                        <img src="{{ $about['about_us_image'] ?? '' }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="secHeading">
                        <h2>{{ $content['about_us_title'] ?? '' }}</h2>
                    </div>
                    <p>{{ $content['about_us_detail'] ?? '' }}</p>
                    <a href="" class="themeBtn">Read More</a>
                </div>
            </div>
        </div>
    </section>

    <section data-scroll-section class="cardSection">
        <div class="container-fluid p-0">
            <div class="row">
                <div class="col-md-12 text-center mb-4">
                    <div class="secHeading">
                        <h2>Effortless Online Invitations and RSVP Tracking</h2>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since<br>
                        the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                        specimen book.</p>
                </div>

            </div>
            <div class="row row-cols-5 no-gutters">
                @forelse($invitation as $val)
                    <div class="col">
                        <div class="cardBox">
                            <figure class="reveal">
                                <img src="{{ $val->image }}" alt="">
                            </figure>
                            <div class="cardContent">
                                <h3>{{ $val->title }}</h3>
                                <a href="" class="themeBtn">View Designs</a>
                            </div>
                        </div>
                    </div>
                @empty
                    <p>Invitation not found!</p>
                @endforelse

            </div>
            <div class="row no-gutters designView">

            </div>
        </div>

    </section>

    <section data-scroll-section class="featureSection">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center mb-3">
                    <div class="secHeading">
                        <h2>Powerful Features to Fullty Customize<br>
                            Your Online Cards and Invitations</h2>
                    </div>
                </div>
                @forelse($feature as $val)
                    <div class="col-md-3">
                        <div class="featureBox">
                            <figure>
                                <img src="{{ $val->image }}" alt="">
                            </figure>
                            <div class="featureContent">
                                <h4>{{ $val->title }}</h4>
                                <p>{!! $val->detail !!}</p>
                            </div>
                        </div>
                    </div>
                @empty
                    <p>Feature not found!</p>
                @endforelse

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

    <section data-scroll-section class="questionSection">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-md-3">
                    <h2>Questtions?
                        Call us at</h2>
                </div>
                <div class="col-md-5">
                    <figure>
                        <img src="{{ asset('images/questioncall.png') }}" alt="">
                    </figure>
                </div>
                <div class="col-md-4">
                    <a href=""><i class="fas fa-phone-alt"></i>0123-456-7890</a>
                </div>
            </div>
        </div>

    </section>

    <section data-scroll-section class="bolgSection">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center mb-3">
                    <div class="secHeading">
                        <h2>On the Blog</h2>
                    </div>
                </div>
                @forelse($blog as $val)
                <div class="col-md-4">
                    <div class="blogCard">
                        <figure class="reveal">
                            <img src="{{ $val->image }}" alt="">
                        </figure>
                        <div class="blogContent">
                            <h6>{{ $val->title }}</h6>
                            <p>{!! $val->detail !!}</p>
                            <a href="" class="themeBtn">Read More Now</a>
                        </div>
                    </div>
                </div>
                @empty
                    <p>Blog not found!</p>
                @endforelse

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

    <section data-scroll-section class="faqSec" id="faqs">
        <div class="container">
            <div class="secHeading">
                <h2>Frequently Asked Questions</h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="accordion">
                        @forelse($faq as $key => $val)
                            <div class="card">
                                <div id="headingm-1">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link" data-toggle="collapse"
                                                data-target="#collapsem-1{{$key}}"
                                                aria-expanded="true" aria-controls="collapsem-1{{$key}}">
                                            <span>{{$key+1}}</span>
                                            {{ $val->title }}
                                            <i class="fal fa-chevron-up"></i></button>
                                    </h5>
                                </div>
                                <div id="collapsem-1{{$key}}" class="collapse {{ $key == 0 ? 'show' : '' }}"
                                     aria-labelledby="headingm-1"
                                     data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="lisetd">
                                            <p>{!! $val->detail !!}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p>Faq not found!</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
        <img src="{{ asset('images/magzineimg.png') }}" class="img-fluid magznImg" alt="img" data-scroll
             data-scroll-speed="3">
    </section>

    <section data-scroll-section class="reviewSec">
        <div class="container">
            <div class="secHeading">
                <h2>What people Are Saying About us</h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper-container ReviewSlider">
                        <div class="swiper-wrapper">
                            @forelse($testimonial as $val)
                            <div class="swiper-slide">
                                <div class="reviewMain">
                                    <div class="reviewCard">
                                        <ul>
                                            <li>
                                                <h2>{{ $val->title }}</h2>
                                            </li>
                                            <li>
                                                @for($i = 1; $i <= 5; $i++)
                                                    @if($i <= $val->rating)
                                                        <i class="fas fa-star"></i>
                                                    @else
                                                        <i class="far fa-star"></i>
                                                    @endif
                                                @endfor
                                            </li>
                                        </ul>
                                        <p>{!! $val->detail !!}</p>
                                        <span>{{ $val->created_at->diffForHumans() }}</span>
                                    </div>
                                    <figure>
                                        <img src="{{ $val->image }}" class="img-fluid" alt="img">
                                    </figure>
                                </div>
                            </div>
                            @empty
                                <p>Testimonial not found!</p>
                            @endforelse

                        </div>
                        <!-- <div class="swiper-pagination"></div>
                        <div class="swiper-button-next"><i class="fal fa-chevron-right"></i></div>
                        <div class="swiper-button-prev"><i class="fal fa-chevron-left"></i></div> -->
                    </div>
                    <div class="reviewTrust">
                        <h2>Based on 22 Reviews <img src="{{ asset('images/trustpilot.png') }}" class="img-fluid"
                                                     alt="img">Trustpilot
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('front.includes.insta-post')

    <section data-scroll-section class="creditSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7">
                    <div class="credtContent">
                        <h2>Start Our Trial Today. No Credit Card Required.</h2>
                        <form>
                            <input type="text" placeholder="Enter Your Email address ...">
                            <button class="themeBtn">Get Started</button>
                        </form>
                    </div>
                </div>
                <div class="col-md-5">
                    <figure>
                        <img src="{{ asset('images/todayimg.png') }}" class="img-fluid" alt="img">
                    </figure>
                </div>
            </div>
        </div>
    </section>


@endsection