@extends('layouts.app')
@section('title', 'Home')

@section('content')
    @if(session()->has('success'))
        <script type="text/javascript">  toastr.success('{{ session('success')}}');</script>
    @endif
    <!-- Begin: Main Slider -->
    <div class="main-slider">
        <span class="outerCircle"></span>
        <span class="outerCircleTwo"></span>
        <div class="container">
            {{-- <div class="row align-items-center">
                <div class="col-md-5 col-md-12">

                    {!! $content->banner_heading !!}
                    {!! $content->banner_description !!}

                    <form action="" class="newsletterForm wow fadeInLeft" data-wow-delay="1s" onsubmit="return false;">
                        <span><i class="fas fa-envelope"></i></span>
                        <input type="text" class="form-control" placeholder="info@youremail.com" id="email" name="email" required>
                        <button  type="submit" id="newsletterSubmit"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
                <div class="col-lg-7 col-md-12">
                    <div class="imgWrap wow fadeInRight" data-wow-delay="0.6s">
                        <span class="bg"></span>
                        <span class="borderWrap"></span>
                        <div class="borderLine">
                            <span class="one"><i class="fal fa-thumbs-up"></i></span>
                            <span class="two"><i class="fas fa-heart"></i></span>
                            <span class="third"><i class="fal fa-calendar"></i></span>
                        </div>
                        <img src="{{ asset('themes/front/images/whiteArrow.png') }}" alt="" class="arrowImg">
                        <img src="{{ $content->banner_image ? asset($content->banner_image) : asset('themes/front/images/sliderImg.png') }}" alt="" class="sliderImg">

                    </div>
                </div>
            </div> --}}

            <div class="row align-items-center">
                <div class="col-lg-5 col-md-12">
{{--                    @if($content)--}}
                        {!! $content->banner_heading !!}
                        {!! $content->banner_description !!}


                    <form action="{{route('newsletter')}}" method="post" class="wow fadeInLeft newsltrForm"
                          data-wow-delay="1s">
                        @csrf
                        <span><i class="fas fa-envelope"></i></span>
                        <input type="email" name="email" id="email_newsletter" class="form-control"
                               placeholder="info@youremail.com">
                        <button id="newsletterSubmit" type="submit"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
                <div class="col-lg-7 col-md-12">
                    <div class="imgWrap wow fadeInRight" data-wow-delay="0.6s">
                        <span class="bg"></span>
                        <span class="borderWrap"></span>
                        <div class="borderLine">
                            <span class="one"><i class="fal fa-thumbs-up"></i></span>
                            <span class="two"><i class="fas fa-heart"></i></span>
                            <span class="third"><i class="fal fa-calendar"></i></span>
                        </div>
                        <img src="{{ asset('themes/front/images/whiteArrow02.png')}}" alt="" class="arrowImg">
                        <img src="{{ $content->banner_image ? asset($content->banner_image) : asset('themes/front/images/sliderImg.png') }}" alt="" class="sliderImg">
                    </div>
                </div>
{{--                @endif--}}
            </div>
        </div>
        <div class="mainCard wow fadeInUp" data-wow-delay="1.5s">
            <img src="{{ asset('themes/front/images/imgUser.png') }}" alt="">
            <img src="{{ asset('themes/front/images/bars.png') }}" alt="">
        </div>
        <ul class="socialList">
            <li><a href="{{$settings->facebook ?? '#'}}">Facebook</a></li>
            <li><a href="{{$settings->tweeter ?? '#'}}">Twitter</a></li>
            <li><a href="{{$settings->instagram ?? '#'}}">Instagram</a></li>
            <li><a href="{{$settings->linkedIn ?? '#'}}">Linkedin</a></li>
        </ul>
    </div>
    <!-- END: Main Slider -->

{{--    @if($content)--}}
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12 mb-5">
                    {!! $content->section_one_heading !!}
                </div>
            </div>

            <div class="row justify-content-center align-items-center">
                <div class="col-md-6">
                    <div class="titleHead wow fadeInUp" data-wow-delay="0.5s">
                        {{-- <h3><span>Date</span>LOVE LANGUAGE</h3> --}}
                        {!! $content->section_one_sub_heading !!}
                        <span class="counter">01</span>
                    </div>
                    {!! $content->section_one_description !!}

                    <a href="{{ url('login')}}" class="themeBtn wow fadeInUp" data-wow-delay="1s">Login</a>
                </div>
                <div class="col-md-4">
                    <figure class="mobileFrame wow bounceIn" data-wow-delay="0.8s">
                        <img src="{{ $content->section_one_image ? $content->section_one_image : asset('themes/front/images/img1.jpg') }}" alt="">
                        <img src="{{ asset('themes/front/images/arrow01.png') }}" class="arrowImg" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="bgPink">
        <div class="container">
            <div class="row flex-row-reverse justify-content-center align-items-center">
                <div class="col-md-6">
                    <div class="titleHead wow fadeInUp" data-wow-delay="0.5s">
                        {!! $content->section_two_heading !!}
                        <span class="counter">02</span>
                    </div>
                    {!! $content->section_two_description !!}

                    <a href="{{ url('login')}}" class="themeBtn wow fadeInUp" data-wow-delay="1s">Login</a>
                </div>
                <div class="col-md-4">
                    <figure class="mobileFrame wow bounceIn" data-wow-delay="0.8s">
                        <img src="{{ $content->section_two_image ? $content->section_two_image : asset('themes/front/images/img2.jpg') }}" alt="">
                        <img src="{{ asset('themes/front/images/whiteArrow02.png') }}" class="arrowImg" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row justify-content-center align-items-center">
                <div class="col-md-6">
                    <div class="titleHead wow fadeInUp" data-wow-delay="0.5s">
                        {!! $content->section_three_heading !!}

                        <span class="counter">03</span>
                    </div>
                    {!! $content->section_three_description !!}

                    <a href="{{ url('login')}}" class="themeBtn wow fadeInUp" data-wow-delay="1s">Login</a>
                </div>
                <div class="col-md-4">
                    <figure class="mobileFrame wow bounceIn" data-wow-delay="0.8s">
                        <img src="{{ $content->section_three_image ? $content->section_three_image : asset('themes/front/images/img3.jpg') }}" alt="">
                        <img src="{{ asset('themes/front/images/arrow01.png') }}" class="arrowImg" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>


    <section class="chooseSec bgPink">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7">
                    <div class="chooseImgWrap wow fadeInLeft" data-wow-delay="0.5s">
                        <div class="bg">
                            <span class="one"><i class="fas fa-heart"></i></span>
                            <span class="two"><i class="fas fa-heart"></i></span>
                            <span class="third"><i class="fas fa-heart"></i></span>
                        </div>
                        <img
                            src="{{ $content->section_four_image ? $content->section_four_image : asset('themes/front/images/chooseImg.png') }}"
                            alt="">
                    </div>
                </div>
                <div class="col-md-5 wow fadeInRight" data-wow-delay="0.5s">
                    {!! $content->section_four_heading !!}
                    {!! $content->section_four_description !!}
                    <a href="{{ url('about-us')}}" class="themeBtn">READ MORE</a>
                </div>
            </div>
        </div>
    </section>
    @include('front.partials.testimonials')
{{--    @endif--}}



@endsection