@extends('main')
@section('styles')
@endsection
@section('page-title')
@endsection

  @section('content')
    <div class="breadcrumbs">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <ul>
              <li class="home">
                <a href="{{ Route('site.home.page') }}">{{ __('Home') }} <span>/</span></a>
              </li>
              <li>
                <a href="{{ Route('product.index') }}">{{ __('Products') }} <span>/</span></a>
              </li>
              <li>
                <a title="{{ $product->category->title }}"
                  href="{!! URL::Route('product.category',[$product->category->slug]) !!}">
                  {!! @$product->category->title !!}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <section class="main-container col1-layout">
      <div class="main">
        <div class="container">
          <div class="row">
            <div class="col-lg-3">
              @widget('ListCategoriesMenu')
              <br>
              @widget('Sidebar\BlockBanner')
            </div>
            <div class="col-lg-9">
              <div class="col-main">
                <div class="product-view">
                  <div class="product-essential">
                    @if (isDesktop())
                      <div class="product-shop col-lg-7 col-sm-7 col-xs-12">
                        <div class="block-title mb-15">
                          <h1>{{ $product->title }}</h1>
                        </div>
                        <div class="price-box">
                          @if ($product->offer)
                            <p class="old-price"><span class="price-label"> {!! __('The price') !!} </span> <span class="price">{!! $product->price !!}</span></p>
                            <p class="special-price"><span class="price">{!! $product->offer !!} <span>{!! __('EGP') !!}</span> </span> <br><span class="tag">{!! optional($product->unit)->title !!}</span></p>
                          @else
                            <span class="price-label"> {!! __('The price') !!} </span> <span class="regular-price"> <span class="price"> {!! $product->price !!} </span> <span>{!! __('EGP') !!} </span> </span> <br><span class="tag">{!! optional($product->unit)->title !!}</span>
                          @endif
                          @if ($product->stock > 0)
                            <p class="availability in-stock pull-right"><span>{!! __('Availability now') !!}</span></p>
                          @else
                            <p class="availability out-of-stock pull-right"><span>{!! __('Not available now') !!}</span></p>
                          @endif
                        </div>
                        <div class="short-description">
                          <h2>{!! __('Specification') !!}</h2>
                          {!! @$product->content !!}
                        </div>
                        <div class="clearfix">
                        </div>
                        <div class="add-to-box">
                          <div class="add-to-cart">
                            <div class="pull-left">
                              <div class="custom pull-left">
                                <button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) result.value--;return false;" class="reduced items-count" type="button"><i class="fa fa-minus">&nbsp;</i></button>
                                <input type="text" class="input-text qty" title="Qty" value="1" maxlength="12" id="qty" name="quantity">
                                <button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="increase items-count" type="button"><i class="fa fa-plus">&nbsp;</i></button>
                              </div>
                            </div>
                            <input type="hidden" name="id" value="{{ $product->id }}">
                            <input type="hidden" name="name" value="{{ $product->title }}">
                            <input type="hidden" name="price" value="{{ $product->price }}">
                            <div class="fd_pro_add_btn">
                              <button type="submit" name="button" class="button btn-cart">{!! __('Order Now') !!}</button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="product-img-box col-lg-5 col-sm-5 col-xs-12">
                        <div class="new-label new-top-left"> New </div>
                        <div class="product-image">
                          <div class="product-full"><img id="product-zoom" src="{!! asset($product->photo) !!}" data-zoom-image="{!! asset($product->photo) !!}" alt="{{ $product->title }}"> </div>
                        </div>
                        <!-- end: more-images -->
                      </div>
                    @else
                      <div class="product-img-box col-lg-4 col-sm-5 col-xs-12">
                        <div class="block-title mb-15">
                          <h1>{{ $product->title }}</h1>
                        </div>
                        <div class="new-label new-top-left"> New </div>
                        <div class="product-image">
                          <div class="product-full"><img id="product-zoom" src="{!! asset($product->photo) !!}" data-zoom-image="{!! asset($product->photo) !!}" alt="{{ $product->title }}"> </div>
                        </div>
                        <!-- end: more-images -->
                      </div>
                      <div class="product-shop col-lg-8 col-sm-7 col-xs-12">
                        <div class="price-block">
                          <div class="price-box">
                            @if ($product->offer)
                              <p class="old-price"><span class="price">{!! $product->price !!}</span></p>
                              <p class="special-price"><span class="price">{!! $product->offer !!} <span>{!! __('EGP') !!}</span> </span><br><span class="tag">{!! optional($product->unit)->title !!}</span></p>
                            @else
                              <div class="price-box"><span class="regular-price"><span class="price">{!! $product->price !!}</span> <span>{!! __('EGP') !!}</span></span><br><span class="tag">{!! optional($product->unit)->title !!}</span></div>
                            @endif
                          </div>
                        </div>
                        <div class="product-collateral col-lg-12 col-sm-12 col-xs-12">
                          <div class="add_info">
                            <ul id="product-detail-tab" class="nav nav-tabs product-tabs">
                              <li class="active"> <a href="#product_tabs_description" data-toggle="tab">{!! __('Description') !!}</a></li>
                              <li><a href="#product_tabs_tags" data-toggle="tab">{!! __('Nutritional value') !!}</a></li>
                            </ul>
                            <div id="productTabContent" class="tab-content">
                              <div class="tab-pane fade in active" id="product_tabs_description">
                                <div class="std">
                                  {!! @$product->content !!}
                                </div>
                              </div>
                              <div class="tab-pane fade" id="product_tabs_tags">
                                {!! @$product->technical ?? @$product->content !!}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="clearfix">
                        </div>
                        <form action="{{ url('/cart') }}" method="POST" >
                          {!! csrf_field() !!}
                          <div class="add-to-box">
                            <div class="add-to-cart">
                              <div class="pull-left">
                                <div class="custom pull-left">
                                  <button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) result.value--;return false;" class="reduced items-count" type="button"><i class="fa fa-minus">&nbsp;</i></button>
                                  <input type="text" class="input-text qty" title="Qty" value="1" maxlength="12" id="qty" name="quantity">
                                  <button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="increase items-count" type="button"><i class="fa fa-plus">&nbsp;</i></button>
                                </div>
                              </div>
                              <input type="hidden" name="id" value="{{ $product->id }}">
                              <input type="hidden" name="name" value="{{ $product->title }}">
                              <input type="hidden" name="price" value="{{ $product->price }}">
                              <div class="fd_pro_add_btn">
                                <button type="submit" name="button" class="button btn-cart">{!! __('Order Now') !!}</button>
                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                    @endif
                  </div>
                </div>
                <div class="product-collateral col-lg-12 col-sm-12 col-xs-12">
                  <div class="add_info">
                    <ul id="product-detail-tab" class="nav nav-tabs product-tabs">
                      <li class="active"> <a href="#product_tabs_description" data-toggle="tab">{!! __('Quick overview') !!}</a></li>
                      <li><a href="#reviews_tabs" data-toggle="tab">{!! __('Customer Reviews') !!}</a></li>
                    </ul>
                    <div id="productTabContent" class="tab-content">
                      <div class="tab-pane fade in active" id="product_tabs_description">
                        <div class="std">
                          {!! removeEmptyParagraph($product->technical) !!}
                        </div>
                      </div>
                      <div class="tab-pane fade" id="reviews_tabs">
                        <div class="box-collateral box-reviews" id="customer-reviews">
                          <div class="box-reviews1">
                            <div class="form-add">
                              <h3>{!! __('Be the first to comment') !!}</h3>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-12">
                  {{ Widget::run('PageShareButtons', ['url' => Route('go.link',[@$product->id]) ] ) }}
                  <br>
                </div>
                <div class="col-lg-12">
                  @widget('RelatedProducts',['cat_id' => $product->category_id])
                  <br>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-4 col-sm-6 col-xs-12">
              @widget('BlockMostBought')
            </div>
            <div class="col-lg-4 col-sm-6 col-xs-12">
              @widget('MostPopularMarket',['cat_id' => $product->category_id])
            </div>
            <div class="col-lg-4 col-sm-6 col-xs-12">
              @widget('MostPopularFood')
            </div>
          </div>
        </div>
      </div>
    </section>
  @endsection
  @section('scripts')
  @endsection