@extends('frontend.layout.master')
@section('content')
{{--    <style>--}}
{{--        #cover-spin {--}}
{{--            position: fixed;--}}
{{--            width: 100%;--}}
{{--            left: 0;--}}
{{--            right: 0;--}}
{{--            top: 0;--}}
{{--            bottom: 0;--}}
{{--            background-color: rgba(45, 45, 45, 0.7);--}}
{{--            z-index: 9999;--}}
{{--            display: none;--}}
{{--        }--}}

{{--        @-webkit-keyframes spin {--}}
{{--            from {--}}
{{--                -webkit-transform: rotate(0deg);--}}
{{--            }--}}

{{--            to {--}}
{{--                -webkit-transform: rotate(360deg);--}}
{{--            }--}}
{{--        }--}}

{{--        @keyframes spin {--}}
{{--            from {--}}
{{--                transform: rotate(0deg);--}}
{{--            }--}}

{{--            to {--}}
{{--                transform: rotate(360deg);--}}
{{--            }--}}
{{--        }--}}

{{--        #cover-spin::after {--}}
{{--            content: '';--}}
{{--            display: block;--}}
{{--            position: absolute;--}}
{{--            left: 48%;--}}
{{--            top: 40%;--}}
{{--            width: 40px;--}}
{{--            height: 40px;--}}
{{--            border-style: solid;--}}
{{--            border-color: #bcefde;--}}
{{--            border-top-color: transparent;--}}
{{--            border-width: 4px;--}}
{{--            border-radius: 50%;--}}
{{--            -webkit-animation: spin .8s linear infinite;--}}
{{--            animation: spin .8s linear infinite;--}}
{{--        }--}}
{{--    </style>--}}
    <section class="slider">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                @for($i=0;$i<count($banners);$i++)
                <li data-target="#carouselExampleCaptions" data-slide-to="{{$i}}" class="@if($i==0) active @endif"></li>

                @endfor
            </ol>
            <div class="carousel-inner">
                @if(!empty($banners))
                    @foreach($banners as $key => $banner)
                        <div class="carousel-item {{($key==0)?"active":""}} sl-1">
                            <div class="container">
                                <div class="row carousel-row">
                                    <div class="col-sm-12 col-lg-7 col-md-7" data-aos="fade-right" data-aos-offset="0"
                                         data-aos-easing="ease-in-sine" data-aos-duration="700" data-aos-delay="300">
                                        <div class="leftArea">
                                            <div class="cont-area">
                                                <h1>{{$banner->title}}
                                                </h1>

                                                <p>
                                                    {{$banner->description}}
                                                </p>
                                                <div class="buttons">
                                                    <a href="{{route('conatacts')}}" class="btn">Contact Us <span><i
                                                                data-feather="chevrons-right"></i></span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-lg-5 col-md-5" data-aos="flip-right" data-aos-offset="0"
                                         data-aos-easing="ease-in-sine" data-aos-duration="700" data-aos-delay="300">
                                        <div class="rightArea">
                                            <div class="slider-img">
                                                <img src="{{$banner->image}}" class="d-block w-100" alt="..."
                                                     loading="lazy">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @endforeach
                @endif
            </div>
        </div>
    </section>
    <!--About-area open-->
    <section class="about-us" data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-in-sine"
             data-aos-duration="700">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="leftArea">
                        @if(!empty($aboutus['image']))
                            <img src="{{url('/')}}/{{$aboutus->image}}" alt="" loading="lazy">

                            <div class="row counterAll">
                                <div class="col-12 col-lg-8">
                                    <div class="counter">
                                        <div class="h2">People Trust</div>
                                        <div class="h2" data-max="99">+</div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="rightArea">
                        <div class="headingArea">
                            @if(!empty($aboutus->header))
                                <h2 class="h2">{{$aboutus->header}}</h2>
                            @endif
                        </div>
                        @if(!empty($aboutus->description))
                            <p>

                                {!! $aboutus->description !!}

                            </p>
                        @endif
                        {{--                        <ul>--}}
                        {{--                            <li><i data-feather="cpu"></i> Integrity</li>--}}
                        {{--                            <li><i data-feather="cpu"></i> Customer Success</li>--}}
                        {{--                            <li><i data-feather="cpu"></i> Teamwork</li>--}}
                        {{--                            <li><i data-feather="cpu"></i> Transparency</li>--}}
                        {{--                        </ul>--}}
                        <div class="buttons">
                            <a href="{{route('abouts')}}" class="btn">Read More <span><i
                                        data-feather="chevrons-right"></i></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--feature-area open-->
    <section class="services-area" data-aos="zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine"
             data-aos-duration="700">
        <div class="container featureAll">
            <div class="row justify-content-center">
                <div class="col-sm-12 text-center">
                    <div class="headingArea">
                        <h2 class="h2"> Our Services</h2>
                    </div>
                </div>
                @if(!empty($services))
                    @foreach($services as $service)

                        <div class="col-lg-4 col-sm-6">

                            <a href="{{route('services',['slug'=>$service->service_slug])}}">
                                <div class="single-featured style-two">
                                    <span><img src="{{url('/')}}/{{$service->icon}}" alt="" loading="lazy"></span>
                                    <div class="h3">{{$service->title}}</div>
                                    <p></p>
                                </div>
                            </a>
                        </div>
                    @endforeach
                @endif
                {{--                <div class="col-sm-12 text-center">--}}
                {{--                    <div class="buttons">--}}
                {{--                        <a href="#" class="btn">Read More <span><i data-feather="chevrons-right"></i></span></a>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
            </div>
        </div>
    </section>

    <!-- blog area open  -->
    <section class="blog-section section-gap" data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-in-sine"
             data-aos-duration="700">
        <div class="container">
            <div class="headingArea">
                <h2 class="h2">blogs</h2>
            </div>
            <div class="row">
                @foreach($blogs as $blog)
                    <div class="col-lg-4 col-md-6">
                        <a href="{{route('blogdetails',['slug'=>$blog->blog_slug])}}">
                        <div class="blog-in">
                            <img src="{{url('/')}}/{{$blog->image}}" alt="">
                            <div class="blog-content">
                                <div class="h3">{{$blog->title}}</div>
{{--                                <div class="blog-post-by">--}}
{{--                                    <ul>--}}
{{--                                        <li><i class="fa fa-calendar"></i>{{date_format($blog->created_at," d F, Y ")}}--}}
{{--                                        </li>--}}
{{--                                    </ul>--}}
{{--                                </div>--}}
{{--                                <p>{!!  \Illuminate\Support\Str::limit($blog->description, 300) !!}--}}
{{--                                </p>--}}
{{--                                <a href="{{route('blogdetails',['slug'=>$blog->blog_slug])}}" title=""--}}
{{--                                   class="readmore-btn">Read more--}}
{{--                                    <i class="las la-long-arrow-alt-right"></i></a>--}}
                            </div>
                        </div>
                        </a>
                    </div>
                @endforeach
            </div>
            <div class="buttons">
                <a href="{{route('blogs')}}" class="btn">see More <span><i data-feather="chevrons-right"></i></span></a>
            </div>

        </div>
    </section>
    <!-- blog area end  -->

    <!--Benefits-area open-->
    <section class="benefits" data-aos="fade-down" data-aos-offset="200" data-aos-easing="ease-in-sine"
             data-aos-duration="700">
        <div class="container">
            <div class="imgArea">
                @if(!empty($benefit->image))
                    <img src="{{url('/')}}/{{$benefit->image}}" alt="" loading="lazy">
                @endif
                <div class="bgImg"></div>
            </div>
            <div class="contArea">
                <div class="headingArea">
                    @if(!empty($benefit->title))
                        <h2 class="h2">{{$benefit->title}}</h2>
                    @endif
                </div>
                @if(!empty($benefit->description))
                    <p>
                        {{$benefit->description}}
                    </p>
                @endif
                <a href="#" class="btn">Learn More <span><i data-feather="chevrons-right"></i></span></a>
            </div>
        </div>
    </section>
{{--    <div id="cover-spin" >--}}

{{--    </div>--}}
    <!--Contact-area open-->
    <section class="contact-area">
        <div class="container">
            <div class="row">
                <div class="col-sm-10 col-lg-8 m-auto">
                    <form action="{{route('save_contact')}}" method="post" id="contact_form" class="contact-form" data-aos="zoom-in"
                          data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="900">
                        @csrf
                        <div class="headingArea">
                            <h2 class="h2"> Enquiry Form</h2>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input type="text" name="name" id="name" class="form-control"
                                           placeholder="Full Name">
                                    <span class="text-danger error-text name_error"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input type="text" name="email" id="email" class="form-control"
                                           placeholder="Email Id">
                                    <span class="text-danger error-text email_error"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input type="text" name="phone" id="phone" class="form-control"
                                           placeholder="Phone Number">
                                    <span class="text-danger error-text phone_error"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input type="text" name="comapany" id="company" class="form-control"
                                           placeholder="Company">
                                    <span class="text-danger error-text comapany_error"></span>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <textarea rows="5" name="comment" placeholder="Comment" id="experience"
                                              class="form-control"></textarea>
                                    <span class="text-danger error-text Comment_error"></span>
                                </div>
                            </div>
                            <div class="col-sm-12 text-center">
                                <div class="form-group">
                                    <div class="buttons">
                                        <button type="submit" id="Form_Submit" class="btn btn-submit">Submit <span><i
                                                    data-feather="chevrons-right"></i></span></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!--Careers-area open-->
    @if(!empty($careers['image']))
        <section class="careersArea" data-aos="fade-down" data-aos-offset="200" data-aos-easing="ease-in-sine"
                 data-aos-duration="1000" style="background-image: url({{url('/')}}/{{$careers->image}})">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <div class="headingArea">
                            @if(!empty($careers['title']))
                                <h2 class="h2"> {{$careers->title}}</h2>
                            @endif
                        </div>
                        @if(!empty($careers['description']))
                            <p>{{$careers->description}}</p>
                        @endif
                        <a href="{{route('career')}}" class="btn">Current openings <span><i data-feather="chevrons-right"></i></span></a>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- brands-area-start -->
    <section class="brand-area section-area" data-aos="zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine"
             data-aos-duration="1200" id="brands-area">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="headingArea text-center">
                        <h2 class="h2">
                            Our Partners and Clients
                        </h2>
                    </div>
                </div>
            </div>

            <section class="owl-carousel owl-theme brand-carousel">

                @foreach($brands as $brand)
                    <div class="brand-info">
                        <img src="{{url('/')}}/{{$brand->image}}" alt="" loading="lazy"/>
                    </div>
                @endforeach

            </section>
        </div>
    </section>
    <!-- brands-area-end-->
    <script src="{{ url('/') }}/admin/plugins/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.all.min.js"></script>
    @push('scripts')
    <script type="text/javascript">
        //$('#cover-spin').hide()
        $(function () {
            $("input[name='phone']").on('input', function(e) {
                $(this).val($(this).val().replace(/[^0-9]/g, ''));
            });
            $('#contact_form').on('submit', function (e) {
                $(".btn-submit").prepend('<i class="fa fa-spinner fa-spin"></i>');
                $(".btn-submit").attr("disabled", 'disabled');

                e.preventDefault();

                //$('#cover-spin').show()
                $.ajax({
                    url: $(this).attr('action'),
                    method: $(this).attr('method'),
                    data: new FormData(this),
                    processData: false,
                    dataType: 'json',
                    contentType: false,
                    beforeSend: function () {
                        $(document).find('span.error-text').text('');
                    },
                    success: function (data) {
                        if (data.status == 0) {
                           // $('#cover-spin').hide()
                            $.each(data.error, function (key, value) {
                                $('span.' + key + '_error').text(value[0]);
                            });
                        } else {
                            $('#contact_form')[0].reset();
                           // $('#cover-spin').hide()
                            toastr.success('Enquiry Send successfully')
                            // Swal.fire(
                            //     {
                            //         position: 'center',
                            //         icon: 'success',
                            //         title: 'Successfully sent your request',
                            //         confirmButtonText: 'ok',
                            //         width: '500px',
                            //         height: '100px'
                            //     }
                            // )
                        }
                        $(".btn-submit").find(".fa-spinner").remove();
                        $(".btn-submit").removeAttr("disabled");
                    }
                });

            });
        });
    </script>
    @endpush
@endsection