@extends('layouts.frontend-layout')
@section('content')
<div class="banner_slider">
    @foreach($sliders as $key)
    <div class="slide">
        <div class="slide_img" style="background-image: url({{ asset($key->image) }});"></div>
        <div class="slide__content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="slide__content--headings d-flex">
                            <div class="padding_left30 padding_top10 padding_bottom10">
                                <h3 data-animation="fadeInDown" style="color: #fff;">{{$key->small_title}}</h3>
                                <h2 data-animation="fadeInDown" style="color: #fff;">{{ $key->big_title }}</h2>
                                <div class="d-sm-flex margin_top30 align-items-center res-767-margin_top20"
                                    data-animation="fadeInUp" data-delay="1.4">
                                    <a class="ttm-btn ttm-btn-size-md ttm-btn-shape-rounded ttm-btn-style-fill ttm-btn-color-dark margin_right15"
                                        href="{{ route('main-site.about-faq') }}">FAQ</a>
                                    <a href="https://www.youtube.com/watch?v=qEmFS-vzqtM" target="_self"
                                        style="color: #fff;"
                                        class="ttm_prettyphoto ttm-btn btn-inline ttm-btn-size-md margin_left30">
                                        <span
                                            class="ttm-icon ttm-icon_element-fill ttm-icon_element-color-skincolor ttm-icon_element-size-xs ttm-icon_element-style-rounded margin_right15 margin_bottom0" style="background: #FF0000">
                                            <i class="fa fa-youtube-play margin_left0 padding_left0"></i>
                                        </span><span> WATCH VIDEO</span>
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
    
</div>
<!-- Banner end-->


<!--site-main start-->
<div class="site-main">
    <!--double-section-->
    <section class="ttm-row double-section bg-img4 clearfix">
        <div class="container-fluid">

            <!-- row end -->
            <div class="row">
                <div class="col-lg-12">
                    <!-- section title -->
                    <div class="section-title without-seperator title-style-center_text">
                        <div class="title-header">
                            <h2 class="title">Sister Concern</h2>
                        </div>
                    </div><!-- section title end -->
                </div>
            </div><!-- row end -->

            <!-- row -->
            <div class="row">
                <div class="col-md-12">
                    <div class="spacing-1">
                        <div class="ttm-col-wrapper-bg-layer ttm-bg-layer"></div>
                        <div class="layer-content">
                            <!-- slick_slider -->
                            <div class="row slick_slider"
                                data-slick='{"slidesToShow": 6, "slidesToScroll": 1, "arrows":true, "autoplay":true, "infinite":true, "responsive": [{"breakpoint":1200,"settings":{"slidesToShow": 5}}, {"breakpoint":1024,"settings":{"slidesToShow": 4}}, {"breakpoint":777,"settings":{"slidesToShow": 3}},{"breakpoint":575,"settings":{"slidesToShow": 2}}]}'>
                                @foreach($shops as $key)
                                    @if($key->shop_name_logo)
                                        <div class="col-lg-12">
                                            <a href="http://{{ $key->sub_domain }}.x-grouprestaurant.com" target="_blank">
                                                <div class="client-box">
                                                    <div class="ttm-client-logo-tooltip" >
                                                        <div class="client-thumbnail">
                                                            <img class="img-fluid" src="{{ asset($key->shop_name_logo->logo) }}"  alt="image" style="height: 95px">
                                                            <h6 style="padding-top:15px; font-size:16px;">{{ $key->shop_name_logo->name }}</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @endif
                                @endforeach
                                
                            </div><!-- slick_slider end -->
                        </div>
                    </div>
                </div>
            </div><!-- row end -->
        </div>
    </section>
    <!--double-section end-->
    <section class="ttm-row fid-section ttm-bgimage-yes bg-img3 ttm-bg ttm-bgcolor-darkgrey clearfix"
        style="background-image: url({{ asset('frontend/images/slides/12.jpg')}}); background-repeat:no-repeat; background-size:cover; background-position:center; background-attachment:fixed">
        <!-- <div class="ttm-row-wrapper-bg-layer ttm-bg-layer"></div> -->
        <div class="container">
            <!-- row end -->
            <div class="row">
                <div class="col-lg-12">
                    <!-- section title -->
                    <div class="section-title without-seperator title-style-center_text">
                        <div class="title-header">
                            <h2 class="title">How TO Order?</h2>
                        </div>
                    </div><!-- section title end -->
                </div>
            </div><!-- row end -->
            <!-- row -->
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <!-- ttm-fid -->
                    <div class="ttm-fid inside ttm-fid-with-icon ttm-fid-view-lefticon style1">
                        <div class="ttm-fid-icon-wrapper ttm-textcolor-skincolor">
                            <i class="flaticon flaticon-location"></i>
                        </div>
                        <div class="ttm-fid-contents">
                            <h4 class="ttm-fid-inner">
                                <span>{{ $how_to_order?$how_to_order->title1:"" }}</span>
                            </h4>
                            <h3 class="ttm-fid-title">{{ $how_to_order?$how_to_order->short_description1:"" }}</h3>
                        </div>
                    </div><!-- ttm-fid end -->
                </div>
                <div class="col-lg-4 col-md-6">
                    <!-- ttm-fid -->
                    <div class="ttm-fid inside ttm-fid-with-icon ttm-fid-view-lefticon style1">
                        <div class="ttm-fid-icon-wrapper ttm-textcolor-skincolor">
                            <i class="flaticon flaticon-website"></i>
                        </div>
                        <div class="ttm-fid-contents">
                            <h4 class="ttm-fid-inner">
                                <span>{{ $how_to_order?$how_to_order->title2:"" }}</span>
                            </h4>
                            <h3 class="ttm-fid-title">{{ $how_to_order?$how_to_order->short_description2:"" }}</h3>
                        </div>
                    </div><!-- ttm-fid end -->
                </div>
                <div class="col-lg-4 col-md-6">
                    <!-- ttm-fid -->
                    <div class="ttm-fid inside ttm-fid-with-icon ttm-fid-view-lefticon style1">
                        <div class="ttm-fid-icon-wrapper ttm-textcolor-skincolor">
                            <i class="fa fa-cutlery"></i>
                        </div>
                        <div class="ttm-fid-contents">
                            <h4 class="ttm-fid-inner">
                                <span>{{ $how_to_order?$how_to_order->title3:"" }}</span>
                            </h4>
                            <h3 class="ttm-fid-title">{{ $how_to_order?$how_to_order->short_description3:"" }}</h3>
                        </div>
                    </div><!-- ttm-fid end -->
                </div>
                <div class="col-lg-4 col-md-6">
                    <!-- ttm-fid -->
                    <div class="ttm-fid inside ttm-fid-with-icon ttm-fid-view-lefticon style1">
                        <div class="ttm-fid-icon-wrapper ttm-textcolor-skincolor">
                            <i class="fa fa-credit-card"></i>
                        </div>
                        <div class="ttm-fid-contents">
                            <h4 class="ttm-fid-inner">
                                <span>{{ $how_to_order?$how_to_order->title4:"" }}</span>
                            </h4>
                            <h3 class="ttm-fid-title">{{ $how_to_order?$how_to_order->short_description4:"" }}</h3>
                        </div>
                    </div><!-- ttm-fid end -->
                </div>
                <div class="col-lg-4 col-md-6">
                    <!-- ttm-fid -->
                    <div class="ttm-fid inside ttm-fid-with-icon ttm-fid-view-lefticon style1">
                        <div class="ttm-fid-icon-wrapper ttm-textcolor-skincolor">
                            <i class="fa fa-truck"></i>
                        </div>
                        <div class="ttm-fid-contents">
                            <h4 class="ttm-fid-inner">
                                <span>{{ $how_to_order?$how_to_order->title5:"" }}</span>
                            </h4>
                            <h3 class="ttm-fid-title">{{ $how_to_order?$how_to_order->short_description5:"" }}</h3>
                        </div>
                    </div><!-- ttm-fid end -->
                </div>
                <div class="col-lg-4 col-md-6">
                    <!-- ttm-fid -->
                    <div class="ttm-fid inside ttm-fid-with-icon ttm-fid-view-lefticon style1">
                        <div class="ttm-fid-icon-wrapper ttm-textcolor-skincolor">
                            <i class="fa fa-thumbs-up"></i>
                        </div>
                        <div class="ttm-fid-contents">
                            <h4 class="ttm-fid-inner">
                                <span>{{ $how_to_order?$how_to_order->title6:"" }}</span>
                            </h4>
                            <h3 class="ttm-fid-title">{{ $how_to_order?$how_to_order->short_description6:"" }}</h3>
                        </div>
                    </div><!-- ttm-fid end -->
                </div>
            </div><!-- row end -->
        </div>
    </section>
    <!--fid-section end-->

    <!--cta-section-->
    <img src="{{ asset('frontend/images/bannerxgroup.jpg') }}" style="width: 100%; object-fit:cover"/>
    <!--cta-section end-->

    <!--cta-section-->
    <section class="ttm-row  ttm-textcolor-white clearfix"
        style="background-image: url({{ asset('frontend/images/bottom-banner.jpg') }}); margin-top:150px">
        <div class="container">
            <!-- row -->
            <div class="row">
                <div class="col-lg-8">
                    <!-- section-title -->
                    <div class="section-title">
                        <div class="title-header">
                            <h3 class="font-weight-normal" style="
                            font-size: 20px;
                            font-weight: 600 !important;
                        "> X-Group Chain Restaurant in Your Pocket</h3>
                        </div>
                    </div><!-- section-title end -->
                    <div class="d-inline-block">
                        <img src="{{ asset('frontend/images/app-store.png') }}" style="height:60px;" />
                        <img src="{{ asset('frontend/images/play-store.png') }}" style="height:60px;" />
                    </div>
                </div>
                <div class="col-lg-4">
                    <img src="{{ asset('frontend/images/mobile.png') }}" class="desktop_view" style="position:absolute; bottom:-100px" />
                </div>
            </div>
        </div>
    </section>
    <!--cta-section end-->
@endsection