@extends('layouts.frontend-layout')
@section('content')


        <!--site-main start-->
        <div class="site-main">
            <section 
            style="background-image: url({{ asset('frontend/images/restaurant-sliders.png') }}); background-repeat: no-repeat; background-position: top;background-size: cover;background-attachment: fixed; height:80vh">
            <div class="container" style="padding: 0px;">
                <div class="row">
                    <div class="col-lg-12">
                        <h3 style="margin-top: 40vh; text-align:center "><span style="background: linear-gradient(#fcd393, #ffa54e);color:#034693;font-style:italic; padding:0px 30px;border-radius: 12px;">Greetings & Welcome</span></h3>
                        <p style="font-size:22px; margin-top: 50px; text-align: center;">  <span style="background: linear-gradient(#fcd393, #ffa54e); color:#034693; font-style:italic;padding:15px; border-radius: 12px;"> Scroll down for Restaurants & Menu </span></p>
                    </div>
                </div>
            </div>
            </section>
            <section style="background: #F4CD78">
                <div class="container" style="padding: 60px 15px;">
                    <div class="row">
                        <div class="col-lg-12">
                            <h2 style="color:#034693;font-style:italic; text-align:center; ">Welcome To Our Restaurants</h2>
                            <p style="font-size:22px;  color:#0b2a4e;  text-align:center">We are delighted to introduce our all branches and the menu for your upcoming event to be held at one of our sister concern. The X-group Chain Restaurants is renowned for its delicious, mouth-watering foods and best possible customer services. We look forward to welcome you soon at any of our branches to have lunch, dinner or party. </p>
                        </div>
                    </div>
                </div>
            </section>
            <!--double-section-->
            {{-- <section 
            style="background-image: url({{ asset('frontend/images/restaurant-sliders.png') }}); background-repeat: no-repeat; background-position: top;background-size: cover;background-attachment: fixed; height:80vh">
                <div class="container" style="padding: 0px;">
                    <div class="row">
                        <div class="col-lg-12">
                            <h3 style="margin-top: 170px; "><span style="background: linear-gradient(#fcd393, #ffa54e);color:#034693;font-style:italic;padding:15px;border-radius: 12px;">Greetings & Welcome</span></h3>
                            <p style="font-size:22px; margin-top: 50px; text-align: justigy;background:  linear-gradient(#fcd393, #ffa54e); color:#034693; font-style:italic;padding:15px;border-radius: 12px;">We are delighted to introduce our all branches and the menu for your upcoming event to be held at one of our sister concern. The X-group Chain Restaurants is renowned for its delicious, mouth-watering foods and best possible customer services. We look forward to welcome you soon at any of our branches to have lunch, dinner or party. </p>
                            <p style="font-size:22px; margin-top: 50px; text-align: center;">  <span style="background: linear-gradient(#fcd393, #ffa54e); color:#034693; font-style:italic;padding:15px; border-radius: 12px;"> Scroll down for Restaurants & Menu </span></p>
                        </div>
                    </div>
                </div>
            </section> --}}
            <!--double-section-->
            @foreach($shops as $key)
                    @if($key->shop_name_logo && $key->about && $key->contacts  && $key->gallery )
            <section
                style="background-image: url({{ asset($key->about->image) }}); background-repeat: no-repeat; background-position: top;background-size: cover;background-attachment: fixed;">
                <div class="container" style="padding: 0px;">
                    
                        @if($loop->index%2==0)
                        <div class="row">
                            <div class="col-lg-6">
                                <div
                                    style="width:100%; background:  rgb(250 246 246 / 88%); padding: 15px; margin-top: 200px; border: 1px solid #034693;">
                                    <h5 style="font-size:1.7rem;">{{ $key->shop_name_logo->name }}</h5>
                                    <p class="text-justify">
                                        <strong>{{ $key->about->short_description }}</strong>
                                    </p>
                                    <p class="text-justify">
                                        {!! $key->about->description !!}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="padding-bottom:20px;">
                            <div class="col-lg-6">
                                <div
                                    style="width:100%; background:  rgb(250 246 246 / 88%); padding: 15px; margin-top: 30px; border-radius: 30px; border: 1px solid #034693;">
                                    <h6><a href="http://{{ $key->sub_domain }}.x-grouprestaurant.com/foods" target="_blank"
                                            style="font-size: 30px; color: black; padding: 15px; text-align: center;">
                                            <u>Check out our popular menus>> </u></a></h6>
                                    <div class="row">
                                        @foreach ($key->gallery as $glry)
                                        @if($loop->index <= 3)
                                        <div class="col-md-3 col-sm-6">
                                            <div class="featured-imagebox featured-imagebox-portfolio style1">
                                                <!-- ttm-box-view-overlay -->
                                                <div class="ttm-box-view-overlay">
                                                    <!-- featured-thumbnail -->
                                                    <div class="featured-thumbnail">
                                                        <img class="img-fluid" src="{{ asset($glry->image) }}" alt="image"
                                                            height="100%" width="100%">
                                                    </div><!-- featured-thumbnail end-->
                                                    <div class="featured-iconbox ttm-media-link">
                                                        <a class="ttm_prettyphoto ttm_image" title="#"
                                                            data-rel="prettyPhoto" href="{{ asset($glry->image) }}" tabindex="0">
                                                            <i class="fa fa-search"></i>
                                                        </a>
                                                    </div>
                                                </div><!-- ttm-box-view-overlay end-->
                                            </div>
                                        </div>        
                                        @endif                                
                                        @endforeach                                
                                    </div>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="row">
                            <div class="col-lg-6 offset-lg-6">
                                <div
                                    style="width:100%; background:  rgb(250 246 246 / 88%); padding: 15px; margin-top: 200px; border: 1px solid #034693;">
                                    <h5 style="font-size:1.7rem;">{{ $key->shop_name_logo->name }}</h5>
                                    <p class="text-justify">
                                        <strong>{{ $key->about->short_description }}</strong>
                                    </p>
                                    <p class="text-justify">
                                        {!! $key->about->description !!}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="padding-bottom:20px;">
                            <div class="col-lg-6 offset-lg-6">
                                <div
                                    style="width:100%; background:  rgb(250 246 246 / 88%); padding: 15px; margin-top: 30px; border-radius: 30px; border: 1px solid #034693;">
                                    <h6><a href="http://{{ $key->sub_domain }}.x-grouprestaurant.com/foods" target="_blank"
                                            style="font-size: 30px; color: black; padding: 15px; text-align: center;">
                                            <u>Check out our popular menus>> </u></a></h6>
                                    <div class="row">
                                        @foreach ($key->gallery as $glry)
                                            @if($loop->index <= 3)
                                                <div class="col-md-3 col-sm-6">
                                                    <div class="featured-imagebox featured-imagebox-portfolio style1">
                                                        <!-- ttm-box-view-overlay -->
                                                        <div class="ttm-box-view-overlay">
                                                            <!-- featured-thumbnail -->
                                                            <div class="featured-thumbnail">
                                                                <img class="img-fluid" src="{{ asset($glry->image) }}" alt="image"
                                                                    height="100%" width="100%">
                                                            </div><!-- featured-thumbnail end-->
                                                            <div class="featured-iconbox ttm-media-link">
                                                                <a class="ttm_prettyphoto ttm_image" title="#"
                                                                    data-rel="prettyPhoto" href="{{ asset($glry->image) }}" tabindex="0">
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                            </div>
                                                        </div><!-- ttm-box-view-overlay end-->
                                                    </div>
                                                </div>     
                                            @endif                                   
                                        @endforeach                                
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                </div>
            </section>
            
            @endif
            @endforeach
            


@endsection