@php

    /*

    $layout_page = home

    */

@endphp


@extends($sc_templatePath.'.layout')

@php

    $productsNew = $modelProduct->start()->getProductLatest()->setlimit(4)->getData();

    $news = $modelNews->start()->setlimit(sc_config('item_top'))->getData();

@endphp



@section('block_main')


    <!-- New Products-->
    <!-- <link rel="stylesheet" href="https://www.fabweddings.in/css/all.css" type="text/css">-->
    <style>


        h3.serv {
            padding-bottom: 30px;
        }


        .how-work .box {
            margin: 20px auto 0;
            padding: 0 20px;
            /*  min-height: 220px;*/
            background: black;
            border-radius: 5px;
            margin-bottom: 50px;
        }

        .how-work .box .icon {
            margin: 0 auto;
            display: block;
            padding: 24px 0;
            color: #ff4f74;
            font-size: 30px;
        }

        .title2 {
            font-size: 18px;
            padding-bottom: 30px;
        }


        .how-work {
            background: #ffd7d7;
            margin-top: 40px;
            /*margin-bottom: 40px;*/
        }

        .testo {
            margin-bottom: 30px;
            background: #f9f9f9;
        }

        .oc {
            padding-bottom: 40px;
        }

        .section-xxl {
            padding: 30px 0;
        }


        .service_blk {
            margin: 12px 0;
            padding: 0;
            width: auto;
            height: 200px;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }

        .service_blk a {
            display: block;
            width: 100%;
            height: 100%;
        }

        .service_blk a:hover .text_blk {
            background: rgba(0, 0, 0, .8);
        }

        .service_blk .thumb {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }

        .service_blk .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .service_blk .text_blk {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            background: rgba(0, 0, 0, .3);
            position: relative;
            z-index: 1;
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
        }

        .service_blk .text_blk p {
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 20px;
        }


        .srch i {
            font-size: 40px;
            color: #fff;
            font-style: normal;
        }


        .bodyHeading.text-center.gray-col {
            font-size: 20px;
            color: #000;
        }

        .slick-arrow {

            color: #000 !important;
            border: 1px solid #000 !important;
            background: white !important;;
            padding: 0px 7px !important;;

        }

        .slick-arrow::after {
            display: block;
            content: '';
            height: 0;
            width: 100%;
            border-top: none !important;

        }


        .testimonialsBlk {
            padding: 50px 0 60px 0;
          /*  background: #06c url(./images/testmonial-bottom.jpg) repeat center center fixed;*/
            position: relative;
            text-align: center;
            -ms-overflow-x: hidden;
            overflow-x: hidden;
            animation: animatedBackground 120s linear infinite;
            -webkit-animation: animatedBackground 120s linear infinite;
            clear: both;
        }

        .testimonialsBlk {
            padding: 50px 0 60px 0;
            background: #06c url(https://www.fabweddings.in/images/testmonial-bottom.jpg) repeat center center fixed;
            position: relative;
            text-align: center;
            -ms-overflow-x: hidden;
            overflow-x: hidden;
            animation: animatedBackground 120s linear infinite;
            -webkit-animation: animatedBackground 120s linear infinite;
            clear: both
        }

        @-webkit-keyframes animatedBackground {
            from {
                background-position: 0 0
            }
            to {
                background-position: -2000px 0
            }
        }

        @-o-keyframes animatedBackground {
            from {
                background-position: 0 0
            }
            to {
                background-position: -2000px 0
            }
        }

        @-moz-keyframes animatedBackground {
            from {
                background-position: 0 0
            }
            to {
                background-position: -2000px 0
            }
        }

        @keyframes animatedBackground {
            from {
                background-position: 0 0
            }
            to {
                background-position: -2000px 0
            }
        }

        .testimonialCont {
            padding: 0 20px 20px;
            position: relative;
            z-index: 1;
            background: #fff;
            margin: 0 10px
        }

        .testimonialCont:before {
            content: '';
            display: block;
            background: #fff;
            height: 100%;
            width: 100%;
            position: absolute;
            top: -40%;
            left: 0;
            z-index: -1
        }

        .testimonialContBlk img {
            position: relative;
            z-index: 2;
            padding-left: 40px
        }

        .testimonialCont::after, .whiteBox::after {
            content: '';
            clear: both;
            display: block
        }

        .testimonialHeading {
            font-weight: 600;
            font-size: 16px;
            color: #caa934
        }

        .testimonialHeading span {
            color: #000;
            font-weight: 400;
            font-size: 14px
        }

        .testionialSlider button.slick-next.slick-arrow, .testionialSlider button.slick-prev.slick-arrow {
            top: 50px;
            right: 60px;
            left: auto
        }

        .testionialSlider button.slick-next.slick-arrow {
            right: 10px
        }

        .bookVendors {
            background: #ff4081 no-repeat center center/cover !important;
        }

        .innerBannerBlk.bookVendors .innerBannerImg::after {
            background: 0 0 !important
        }

        .slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before {
            opacity: 1;
        }

        .slick-next:before {
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            background: url(https://www.fabweddings.in/images/arrow-right.svg) no-repeat center center/32%;
        }

        .slick-next:before, .slick-prev:before {
            font-family: slick;
            font-size: 20px;
            line-height: 1;
            opacity: .75;
            color: #fff;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before {
            opacity: 1;
        }

        .slick-next:before {
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            background: url(https://www.fabweddings.in/images/arrow-right.svg) no-repeat center center/32%;
        }

        .slick-next:before, .slick-prev:before {
            font-family: slick;
            font-size: 20px;
            line-height: 1;
            opacity: .75;
            color: #fff;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>

    <section class="section section-xxl bg-default">


        <div class="container">
            <div class="row">

                <div class="col-md-12">
                    <h3 class="serv">Our Services</h3>
                </div>

                @foreach($categories as $category)
                    <div class=" col-md-3 col-6 ">
                        <div class="service_blk">
                            <a href="{{url('category/'.$category->alias.'.html')}}">
                                <div class="thumb">
                                    <img src="{{url($category->image)}}"></div>
                                <div class="text_blk">
                                    <p>{{$category->title}}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                @endforeach


            </div>

        </div>


        <div class="how-work">
            <img src="images/how-it-work.jpeg" / class="img-responsive">

            <!--<div class="container">

                <div class="row" style=" padding-bottom:40px;">
                    <div class="col-md-12">
                        <br/>
                        <h3 class="serv">How It Works</h3>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="box">
                            <div class="icon fa fa fa-users"></div>
                            <div class="title2">Find a best vendor near you</div>

                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="box">
                            <div class="icon fa fa-handshake-o"></div>
                            <div class="title2">Get Consultaion & Final Quote</div>

                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="box">
                            <div class="icon fa fa-calendar-check-o"></div>
                            <div class="title2">Pay Advance & Book vendor</div>

                        </div>
                    </div>

                </div>

            </div>-->

        </div>


        <style>


            a.comparisonBtn {
                cursor: pointer;
                display: block;
                text-align: center;
                border: 1.3px solid #c8a838;
                font-size: 14px;
                padding: 6px 10px;
                margin-top: 10px;
                color: #c8a838;
                font-weight: 600;
            }

            h4.fname {
                padding-top: 20px;
                font-size: 22px;
            }


            p.marke {
                color: #e72e77;
                font-size: 20px;
            }
        </style>


        <style>

        </style>


        <style>
         
            .brand-carousel {
                background: #eee;
                margin-top: 0%;
            }

            .owl-dots {
                text-align: center;
            }

            .owl-dot {
                display: inline-block;
                height: 15px !important;
                width: 15px !important;
                background-color: #222222 !important;
                opacity: 0.8;
                border-radius: 50%;
                margin: 0 5px;
            }

            .owl-dot.active {
                background-color: #FF170F !important;
            }


            a.comparisonBtn {
                cursor: pointer;
                display: block;
                text-align: center;
                border: 1.3px solid #c8a838;
                font-size: 14px;
                padding: 6px 10px;
                margin-top: 10px;
                color: #c8a838;
                font-weight: 600;
            }

            h4.fname {
                padding-top: 20px;
                font-size: 22px;
            }


            p.marke {
                color: #e72e77;
                font-size: 20px;
            }

            .tab-content > .tab-pane {
                padding: 5px 0;
            }

            ul.nav.nav-tabs.nav-fill {
                padding: 10px 10px;
                background: #ff4081;
                flex-wrap: nowrap;
                white-space: nowrap;
             
                overflow-y: hidden;
            }

            ul.nav.nav-tabs.nav-fill li {
                padding: 7px 30px;
                background: #ffffff;
                border-radius: 3px;
                font-size: 18px;
                border-right: 1px solid #ff4081;
            }

            ul.nav.nav-tabs.nav-fill li a {
                color: #000;
            }

            .single-logo {
                border: 1px solid #000;
                padding: 10px;
            }

            .section-padding {
                padding: 0px 0;
            }

            .brand-carousel {
                background: #fff;
            }

            .owl-dots.disabled {
                display: block !important;
            }
        </style>


        <div role="tabpanel">
            <h3 style="padding-bottom: 30px; padding-top:30px;">Featured Vendors</h3>
          
           
            <ul class="nav nav-tabs nav-fill" id="" role="tablist">

                @php
                    $first=0;
                @endphp

                @foreach($categories as $item)
                    @if(count($item->featuredProducts)>0)

                        <li role="presentation" class="{{$first==0 ? 'active':''}}">
                            <a href="#featured-tab-{{$loop->iteration}}" class="myTabs"
                               aria-controls="featured-tab-{{$loop->iteration}}"
                               role="tab"
                               data-toggle="tab" {{$loop->first ? ' class="active" aria-selected="true"':''}}>
                                {{$item->title}}
                            </a>
                        </li>
                        </a>
                        @php
                            $first=1;
                        @endphp
                    @endif
                @endforeach

            </ul>
        
<div class="container-fluid">
            <div class="tab-content">

                @php
                    $first=0;
                @endphp

                @foreach($categories as $item)
                    @if(count($item->featuredProducts)>0)
                        <div role="tabpanel" class="tab-pane fade {{$first==0 ? 'in active show':''}}"
                             id="featured-tab-{{$loop->iteration}}">

                            <div id="carousel-{{$loop->iteration}}" class="brand-carousel section-padding owl-carousel"
                                 style="margin-top:0% !important;">

                                @foreach($item->featuredProducts as $product)

                                    <div class="single-logo">
                                        <div class="img-box">
                                            <img src="{{ asset($product->getThumb()) }}"
                                                 class="img-fluid" alt="">
                                            <h4 class="fname">{{ $product->getName() }}</h4>
                                            <h6> {{$product->subtitle}}</h6>
                                            <h5>{!! $product->showPrice() !!}</h5>
                                            <p class="marke"><i class="fa fa-map-marker"> </i>
                                                &nbsp; {{$product->user->city}} </p>
                                            <a class="comparisonBtn" href="{{ $product->getUrl() }}">Book Now</a>
                                        </div>
                                    </div>

                                @endforeach

                            </div>

                        </div>

                        @php
                            $first=1;
                        @endphp
                    @endif
                @endforeach

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


        <div class="testo">
            <div class="testimonialsBlk lazy" data-src="images/testmonial-bottom.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="bodyHeading text-center gray-col">TESTIMONIAL


                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="testionialSlider">
                                <div class="item">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="images/Rahul.png"
                                                     data-src="images/Rahul.png"
                                                     class="lazy" alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Rahul & Nancy</div>
                                                    <p>A big thanks to beautiful story. I think i looked at my best
                                                        where everything was just as i thought it would be. Non of this
                                                        would have been possible if it weren't for BS team efforts. My
                                                        lehenga is just awestruck</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="images/Haneet.png"
                                                     data-src="images/Haneet.png"
                                                     alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Haneet & Tejaswini</div>
                                                    <p>Everyone has been raving about the wedding and i keep telling
                                                        them it was because i chose Beautiful story for my wedding day.
                                                        I am taking full credit for finding you guys. Thank you BStory
                                                        for making me look like a dream.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="images/Kritika.png"
                                                     data-src="images/Kritika.png"
                                                     alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Kritika & Mukul</span>
                                                    </div>
                                                    <p> I was pleasently surprised at the amount of hard work and
                                                        creative input the team at beautiful story Put in my wedding. I
                                                        hired their help in arranging my entire look including lehenga,
                                                        jewellery, makeup artist. Their help with fixing last minute
                                                        needs such as arranging photography for my wedding was
                                                        invaluable.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">

                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="images/Karishma.png"
                                                     data-src="images/Karishma.png"
                                                     alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Karishma</div>
                                                    <p> I am so grateful for your expert makeup & designer lehenga for
                                                        my wedding day. I consider myself blessed to have had the
                                                        privilege of working with someone who translated my vision with
                                                        such style, grace and professionalism. Thank you Beautiful
                                                        Story</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="images/Yash.png"
                                                     data-src="images/Yash.png"
                                                     alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Yash & Kanika</div>
                                                    <p>The most fabulous & effortless work i have ever seen. All in all
                                                        , who can arrange wedding customised dresses just in three
                                                        weeks. Trust me, their cooperation and generous attitude is sure
                                                        to remember</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="testimonialContBlk">
                                                <img src="https://www.fabweddings.in/images/preloader.svg"
                                                     data-src="https://www.fabweddings.in/images/testimonial_pallavi_trehan.png"
                                                     alt=""/>
                                                <div class="testimonialCont">
                                                    <div class="testimonialHeading">Sreshtha</div>
                                                    <p>I would have been really lost and the wedding would not have come
                                                        together as beautifully as it did. Hats off to their amazing
                                                        team. They made me look more beautiful than i ever imagined.
                                                        They were a great help</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

        </div>


        <style>


            .search-slt {
                display: block;
                width: 100%;
                font-size: 16px;
                margin-bottom: 5px;
                font-weight: 600;
                letter-spacing: 1px;
                line-height: 1.5;
                color: #55595c;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                height: calc(3rem + 2px) !important;
                border-radius: 0;
            }

            .wrn-btn {
                width: 100%;
                font-size: 16px;
                font-weight: 400;
                text-transform: capitalize;
                height: calc(3rem + 2px) !important;
                border-radius: 0;
            }

            @media (min-width: 992px) {
                .search-sec {
                    position: relative;
                    top: 0;
                    /*  background: rgba(26, 70, 104, 0.51);*/
                }
            }

            @media (max-width: 992px) {
                /* .search-sec{
                     background: #1A4668;
                 }*/
            }

            .bookVendors {
                background: #a25871 no-repeat center center/cover;
            }

            .innerBannerImg {
                padding: 30px 0;
                text-align: center;
                position: relative;
            }

            .bg-cover {
                background-position: 50% 0;
                background-size: cover;
            }

            .innerBannerImg h2 {
                padding: 0;
                margin: 0 0 20px;
                color: #fff;
                font-size: 28px;
                text-align: center;
            }

            .innerBannerImg h2 span {
                font-weight: 400;
                font-size: 14px;
                text-align: center;
                display: block;
                padding-top: 4px;
            }

            .bookVendorContImg {
                overflow: hidden;
                padding-top: 0px;
                padding-bottom: 0px;
                text-align: center;
            }

            section.innerBannerBlk.bookVendors.weddingWithFab .bookVendorContImg .vendorIcon {
                float: none;
                padding-right: 20px;
                display: inline-block;
            }

            section.innerBannerBlk.bookVendors.weddingWithFab .bookVendorContImg .vendorText {
                float: none;
                width: auto;
                color: #fff;
                display: inline-block;
                display: inline-block;
                vertical-align: top;
            }

            .bookVendorContImg .vendorText .h3 {
                font-size: 16px;

            }

            .pt-10 {
                padding-top: 10px !important;
            }

            .commonimage {
                margin-right: 20px;
                width: 56px !important;
                height: 50px;
                background: url(https://www.fabweddings.in/images/css_sprites.png);
            }

            .formmm {
                padding: 20px;
            }
        </style>


        <style>
            section#testimonial {
                padding-top: 40px;
                padding-bottom: 40px;
            }


        </style>


    <!--<div class="container">


                    <h2 class="wow fadeScale">{{ trans('Featured Vendors') }}</h2>


                    <div class="row row-30 row-lg-50">

                        @foreach ($productsNew as $key => $productNew)

        <div class="col-sm-6 col-md-3 col-lg-3 col-6">



            <article class="product wow fadeInRight">

                <div class="product-body">


{{-- Product image --}}

                <div class="product-figure">

                    <a href="{{ $productNew->getUrl() }}">

                                        <img src="{{ asset($productNew->getThumb()) }}" alt="{{ $productNew->name }}"/>

                                    </a>

                                </div>

                                {{--// Product image --}}



        {{-- Product name --}}

                <h5 class="product-title"><a
                            href="{{ $productNew->getUrl() }}">{{ $productNew->name }}</a></h5>

                                {{--// Product name --}}



        {{-- Display store - if use MultiStorePro --}}

        @if (sc_config_global('MultiStorePro') && config('app.storeId') == 1)

            <div class="store-url"><a href="{{ $productNew->goToStore() }}"><i
                                                    class="fa fa-shopping-bag"
                                                    aria-hidden="true"></i> {{ trans('front.store').' '. $productNew->store_id  }}
                    </a>

                </div>

@endif

        {{-- //Display store - if use MultiStorePro --}}

        {{$productNew->subtitle}}

        {{-- Add to cart --}}

        {{--                                @if ($productNew->allowSale())--}}

        {{--                                    <a onClick="addToCartAjax('{{ $productNew->id }}','default','{{ $productNew->store_id }}')"--}}
        {{--                                       class="button button-lg button-secondary button-zakaria add-to-cart-list"><i--}}
        {{--                                                class="fa fa-cart-plus"></i> {{trans('front.add_to_cart')}}</a>--}}

        {{--                                @endif--}}

        {{-- //Add to cart --}}



        {!! $productNew->showPrice() !!}

                </div>


{{-- Product type --}}

        @if ($productNew->price != $productNew->getFinalPrice() && $productNew->kind !=SC_PRODUCT_GROUP)

            <span><img class="product-badge new"
                       src="{{ asset($sc_templateFile.'/images/home/sale.png') }}" class="new"
                                           alt=""/></span>

                            @elseif($productNew->kind == SC_PRODUCT_BUILD)

            <span><img class="product-badge new"
                       src="{{ asset($sc_templateFile.'/images/home/bundle.png') }}" class="new"
                                           alt=""/></span>

                            @elseif($productNew->kind == SC_PRODUCT_GROUP)

            <span><img class="product-badge new"
                       src="{{ asset($sc_templateFile.'/images/home/group.png') }}" class="new"
                                           alt=""/></span>

                            @endif

        {{-- //Product type --}}



        {{-- wishlist, compare --}}

                <div class="product-button-wrap">

                    <div class="product-button">

                        <a class="button button-secondary button-zakaria"
                           onClick="addToCartAjax('{{ $productNew->id }}','wishlist','{{ $productNew->store_id }}')">

                                        <i class="fas fa-heart"></i>

                                    </a>

                                </div>

                                <div class="product-button">

                                    <a class="button button-primary button-zakaria"
                                       onClick="addToCartAjax('{{ $productNew->id }}','compare','{{ $productNew->store_id }}')">

                                        <i class="fa fa-exchange"></i>

                                    </a>

                                </div>

                                {{-- //wishlist, compare --}}


                </div>

            </article>

        </div>

@endforeach

            </div>

        </div>-->

    </section>

@endsection



@section('news')

    @if ($news)

        <!-- Our Blog-->

        <section class="section section-xxl section-last bg-gray-21">

            <div class="container">

                <h2 class="wow fadeScale">{{ trans('front.blog') }}</h2>

            </div>

            <!-- Owl Carousel-->

            <div class="owl-carousel owl-style-7" data-items="1" data-sm-items="2" data-xl-items="3" data-xxl-items="4"
                 data-nav="true" data-dots="true" data-margin="30" data-autoplay="true">

            @foreach ($news as $blog)

                <!-- Post Creative-->

                    <article class="post post-creative" ><a class="post-creative-figure"
                                                           href="{{ $blog->getUrl() }}"><img
                                    src="{{ asset($blog->getThumb()) }}" alt="" width="420" height="368"/></a>

                        <div class="post-creative-content">

                            <h5 class="post-creative-title"><a href="{{ $blog->getUrl() }}">{{ $blog->title }}</a></h5>

                            <div class="post-creative-time">

                                <time datetime="{{ $blog->created_at }}">{{ $blog->created_at }}</time>

                            </div>

                        </div>

                    </article>

                @endforeach

            </div>

        </section>



        <section class="innerBannerBlk bookVendors weddingWithFab">
            <div class="bg-cover innerBannerImg">
                <div class="container">
                    <h2>Plan your wedding with Beautiful Story
                        <!--<span>One Stop Destination for all your wedding planning</span>--></h2>
                    <div class="row">

                        <div class="col-4">
                            <div class="bookVendorContImg">
                                <!--         <div class="vendorIcon commonimage vendorIconheart"></div>-->
                                <div class="srch"><i class="fa fa-search" aria-hidden="true"></i></div>
                                <div class="vendorText">
                                    <div class="h3 pt-10">FIND &amp; BOOK VENDORS</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="bookVendorContImg">
                                <!--    <div class="vendorIcon commonimage vendorIconpack"></div>-->
                                <div class="srch"><i class="fa fa-suitcase" aria-hidden="true"></i></div>
                                <div class="vendorText">
                                    <div class="h3 pt-10">GET THE BEST DEAL</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="bookVendorContImg">
                                <div class="srch"><i class="fa fa-shopping-bag" aria-hidden="true"></i></div>
                                <!--    <div class="vendorIcon commonimage vendorIconsearch"></div>-->
                                <div class="vendorText">
                                    <div class="h3 pt-10">SHOP FOR YOUR WEDDDING</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 formmm">
                            <form action="{{url('vendor-contact')}}" method="post">
                                @csrf
                                <div class="row">


                                    <div class="col-lg-3 col-md-4 col-sm-12 p-0">
                                        <input type="text" class="form-control search-slt" placeholder="Full Name"
                                               required name="name">
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-12 p-0">
                                        <!--<input type="email" class="form-control search-slt" placeholder="Email" required name="email">-->
                                        <input type="text" class="form-control search-slt" placeholder="City" required
                                               name="city">
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-12 p-0">
                                        <input type="tel" class="form-control search-slt" placeholder="Mobile No."
                                               required name="phone">
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-12 p-0">
                                        <button type="submit" class="btn btn-success wrn-btn" value="find"
                                                name="submit">SEND ME A QUOTE
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

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






    @endif


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

{{--            @foreach($categories as $item)--}}
{{--            @if(count($item->featuredProducts)>0)--}}
{{--            $('#carousel-{{$loop->iteration}}').owlCarousel({--}}
{{--                loop: true,--}}
{{--                margin: 10,--}}
{{--                items: 1,--}}
{{--                mouseDrag: true,--}}
{{--                nav: true,--}}
{{--                dots: true,--}}
{{--                dotsEach: true,--}}
{{--                animateIn: true,--}}
{{--                animateOut: true,--}}
{{--                autoplay: true,--}}
{{--                responsive: {--}}
{{--                    0: {--}}
{{--                        items: 1--}}
{{--                    },--}}
{{--                    600: {--}}
{{--                        items: 3--}}
{{--                    },--}}
{{--                    1000: {--}}
{{--                        items: 4--}}
{{--                    }--}}
{{--                },--}}
{{--                navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>']--}}
{{--            });--}}
{{--            @endif--}}
{{--            @endforeach--}}
$('.myTabs').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    return false;
});
            $('.brand-carousel').owlCarousel({
                loop: true,
                margin: 10,
                items: 1,
                mouseDrag: true,
                nav: true,
                dots: true,
                dotsEach: true,
                animateIn: true,
                animateOut: true,
                autoplay: true,
                responsive: {
                    0: {
                        items: 2
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 4
                    }
                },
            });
        });
    </script>


@endsection



@push('styles')

    {{-- Your css style --}}

@endpush



@push('scripts')

    {{--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>--}}
    {{--    <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.css" rel="stylesheet" />--}}
    {{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.js"></script>--}}


    <script defer="" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

    <script defer="" src="https://www.beautifulstory.in/js/all.js"></script>


@endpush