@extends('main',['delivery'=>1])
@section('styles')
  {!! Html::style(Theme::current()->assetPath.'/slider-pro/css/slider-pro.min.css') !!}
  
  {!! Html::style(Theme::current()->assetPath.'/rating/css/star-rating.css') !!}
  {!! Html::style(Theme::current()->assetPath.'/rating/themes/krajee-fa/theme.css') !!}
@endsection
@php
$lang         = app()->getLocale();
$data         = $product->data;
$attributes   = @$data['attributes'];
$data_product = get_setting('product');
@endphp
@section('content')
  <section class="full-height-slider type-1">
    <div class="bg opc7 ready" data-swiper-parallax="50%"></div>
    <div class="table-view mobile-rel-block">
      <div class="table-cell">
        <div class="container no-padd">
          <div class="row vertical-wrap">
            <div class="col-lg-8 col-lg-offset-2 col-sm-12 col-sm-offset-0">
              <div class="empty-lg-80 empty-md-30 empty-sm-20 empty-xs-20"></div>
              <div class="simple-item color-type-1 text-center">
                <div class="main-title">
                  <h1 class="h1 caption small">{{ $product->title }}</h1>
                  <div class="col-md-10 col-md-offset-1">
                    <div class="simple-text md">
                      <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ Route('product.index') }}">{{ __('Menu') }} </a></li>
                        <li class="breadcrumb-item"><a title="{{ $product->category->title }}"
                          href="{!! URL::Route('product.category',[@$product->category->slug]) !!}">
                          {!! @$product->category->title !!}
                        </a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="section">
    <div class="empty-lg-40 empty-md-30 empty-sm-20 empty-xs-20"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-5 col-md-5 col-xs-12">
          <div class="product-item-holder size-big single-product-gallery small-gallery">
            <div class="simple-item-style-2 simple-item page-style-1">
              <span class="page-span-1 page-span"></span>
              <span class="page-span-2 page-span"></span>
              <span class="page-span-3 page-span type-2"></span>
              <span class="page-span-4 page-span type-2"></span>
              <div id="go_slider" class="slider-pro">
                <div class="sp-slides">
                  @if ($product->hasMedia('gallery'))
                    @foreach ($product->getMedia('gallery') as $key => $image)
                      <div class="sp-slide">
                        <a href="{{ asset('uploads/'.$image->getDiskPath()) }}">
                          <img class="sp-image" src="{{ path_img('uploads/'.$image->getDiskPath(),400,400,0) }}"
                          data-src="{{ asset('uploads/'.$image->getDiskPath()) }}"
                          data-small="{{ path_img('uploads/'.$image->getDiskPath(),400,400,0) }}"
                          data-medium="{{ path_img('uploads/'.$image->getDiskPath(),600,600,0) }}"
                          >
                        </a>
                      </div>
                    @endforeach
                  @else
                  @endif
                  @if ($product->photo)
                    <div class="sp-slide">
                      <a href="{{ asset($product->photo) }}">
                        <img class="sp-image" src="{{ path_img($product->photo,40,30,0) }}"
                        data-src="{{ path_img($product->photo,400,400,0) }}"
                        data-small="{{ path_img($product->photo,400,400,0) }}"
                        data-medium="{{ path_img($product->photo,600,600,0) }}"
                        >
                      </a>
                    </div>
                  @endif
                </div>
                @if ($product->hasMedia('gallery'))
                  <div class="sp-thumbnails">
                    @foreach ($product->getMedia('gallery') as $key => $image)
                      <img class="sp-thumbnail" src="{{ path_img('uploads/'.$image->getDiskPath(),100,100 ,0) }}" >
                    @endforeach
                    @if ($product->photo)
                      <img class="sp-thumbnail" src="{{ path_img($product->photo,100,100 ,0) }}" >
                    @endif
                  </div>
                @else
                @endif
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-7 col-md-7 col-xs-12">
          <div class="empty-sm-0 empty-xs-30"></div>
          <aside>
            <div class="empty-sm-20 empty-xs-20"></div>
            <h4 class="h3 sm tt color-2">{{ $product->title }}</h4>
            <div class="empty-sm-20 empty-xs-20"></div>
            <h5 class="h4  color-2">{!! __('Price') !!}: <span class="h4 main-col"><b>{!! $product->offer ?? $product->price !!} {!! __('EGP') !!}</b></span></h5>
          </aside>
          <div class="empty-sm-20 empty-xs-20"></div>
          <aside>
            <div class="simple-text">
              {!! $product->content !!}
            </div>
          </aside>
          <div class="empty-sm-30 empty-xs-20"></div>
          <aside>
            <form action="{{ url('/cart') }}" method="POST" >
              {!! csrf_field() !!}
              <div class="buy-bar type-2">
                <div class="fl">
                  <h5 class="h5 sm follow-title quntity">{!! __('Quantity') !!} :</h5>
                  <div class="custom-input-number type-2">
                    <button type="button" class="cin-btn cin-decrement">
                      <img src="{!! asset(theme_url('img/left_arr.png')) !!}" alt="">
                    </button>
                    <input type="number" class="cin-input input-field qty" step="1" value="1" min="1" max="1000" id="qty" name="quantity">
                    <button type="button" class="cin-btn cin-increment">
                      <img src="{!! asset(theme_url('img/right_arr.png')) !!}" alt="">
                    </button>
                  </div>
                  <div class="empty-sm-0 empty-xs-15"></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>
                <div class="fr">
                  <button type="submit" name="button" data-id="{{ $product->id }}" @if ($product->stock < 1) disabled @endif class="@if ($product->stock > 0) add-cart @endif page-button button-style-1 type-2"> <i class="fa fa-shopping-cart inner-left-vs"></i> <span class="txt">{!! __('Add to cart') !!}</span></button>
                  </div>
                </div>
              </form>
            </aside>
          </div>
        </div>
      </div>
    </section>
    @widget('RelatedProducts',['cat_id' => $product->category_id,'count' =>4])
  @endsection
  @section('scripts')
    {!! Html::script(Theme::current()->assetPath.'/js/jquery.validate.js') !!}
    {!! Html::script(Theme::current()->assetPath.'/rating/js/star-rating.js') !!}
    {!! Html::script(Theme::current()->assetPath.'/rating/themes/krajee-fa/theme.js') !!}
    <script language="javascript">
      jQuery(document).ready(function($) {
        $.validator.messages.required = "{{ __('This field is required.') }}";
        $.validator.messages.digits 	= "{{ __('Please enter only digits') }}";
        $.validator.messages.email 		= "{{ __('Please enter a valid email address.') }}";
        $.validator.messages.equalTo 	= "{{ __('Passwords do not match') }}";
        $('.kv-fa').rating({
          @if (rtl())
            language: 'ar',
          @endif
          theme: 'krajee-fa',
          filledStar: '<i class="fa fa-star"></i>',
          emptyStar: '<i class="fa fa-star-o"></i>'
        });
        $("#rate-form").validate({
          invalidHandler: function(event, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
              var message = errors == 1
              ? 'You missed 1 field. It has been highlighted'
              : 'You missed ' + errors + ' fields. They have been highlighted';
              $("div.error span").html(message);
              $("div.error").show();
            } else {
              $("div.error").hide();
            }
          }
        });
      });
    </script>
    {!! Html::script(Theme::current()->assetPath.'/slider-pro/js/jquery.sliderPro.min.js') !!}
    
    <script type="text/javascript">
      $( document ).ready(function( $ ) {
        $( '#go_slider' ).sliderPro({
          width: 400,
          height: 400,
          fade: true,
          arrows: true,
          buttons: false,
          fullScreen: false,
          shuffle: true,
          smallSize: 200,
          mediumSize: 400,
          // imageScaleMode: 'contain',
          autoHeight: true,
          thumbnailArrows: true,
          autoplay: false
        });
        $( ".slider-pro" ).each(function(){
          var slider = $( this );
          slider.find( ".sp-image" ).parent( "a" ).on( "click", function( event ) {
            event.preventDefault();
            if ( slider.hasClass( "sp-swiping" ) === false ) {
              var sliderInstance = slider.data( "sliderPro" ),
              isAutoplay = sliderInstance.settings.autoplay;
              $.fancybox.open( slider.find( ".sp-image" ).parent( "a" ), {
                index: $( this ).parents( ".sp-slide" ).index(),
                afterShow: function() {
                  if ( isAutoplay === true ) {
                    sliderInstance.settings.autoplay = false;
                    sliderInstance.stopAutoplay();
                  }
                },
                afterClose: function() {
                  if ( isAutoplay === true ) {
                    sliderInstance.settings.autoplay = true;
                    sliderInstance.startAutoplay();
                  }
                }
              });
            }
          });
        });
      });
    </script>
  @endsection