@extends('layouts.app')

@section('content')
<!-- product info section -->
<!-- Modal -->
<div class="xs-section-padding xs-product-details-section">
    <div class="container">
        <div class="row">
            <div class="col-md-11 mx-auto">
                <div class="xs-sync-slider-preview">
                  <ul class="xs-social-tigger">
                    <li><a href="https://plus.google.com/discover" class="xs-google-plus"><i class="fa fa-google-plus"></i></a></li>
                    <li><a href="https://www.facebook.com/" class="xs-facebook"><i class="icon icon-facebook"></i></a></li>
                    <li><a href="https://twitter.com/" class="xs-twitter"><i class="icon icon-twitter"></i></a></li>
                    <li><a href="https://www.instagram.com/" class="xs-instagram"><i class="icon icon-instagram"></i></a></li>
                    <li><a class="tigger-icon" href="#"><i class="fa fa-share"></i></a></li>
                </ul>
                <div class="sync-slider-preview owl-carousel">
                    <div class="item">
                        <img src="{!! env('IMAGE_URL').$market->getFirstMediaUrl('image') !!}" alt="Product">
                    </div>
                </div>
                <div class="sync-slider-thumb owl-carousel">
                    <div class="item">
                        <img src="" alt="">
                    </div>
                    <div class="item">
                        <img src="" alt="">
                    </div>
                    <div class="item">
                        <img src="" alt="">
                    </div>
                    <div class="item">
                        <img src="" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 offset-md-3 text-center">
            <div class="summary-content single-product-summary">
                <h1 class="entry-title"></h1>
                <h1 class="price highlight text-center">{{$market->name}}</h1>
                <span class="star-rating color-green">
                    <span class="value">(200 Customers review)</span>
                </span>
                <p class="value color-green">
                   <i style='font-size:24px' class='fas'>&#xf5eb;</i> {{$market->address}}
               </p>
               <p class="value color-green">
                   <i style='font-size:24px' class='fas'>&#xf095;</i> {{$market->phone}}
               </p>
               <span class="product-title"> Description</span>
               <p>{!! $market->description !!}</p>

               <span class="product-title"> Information</span>
               <p>{!! $market->information !!}</p>
           </div>
       </div>
   </div>
</div>
</div><!-- end product info section -->

<!-- product info section -->
<section class="xs-section-padding bg-gray">
    <div class="container">
        <div class="xs-content-header version-2">
            <h2 class="xs-content-title">Market Products</h2>
            <div class="clearfix"></div>
        </div>
        <div class="row">
            @if(!empty($market_products))
            @foreach($market_products as $product)
            @include('front.products.related')
            @endforeach
            @endif 
        </div><!-- .row END -->
    </div><!-- .container END -->
</section><!-- end product info section -->

@endsection