@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 id="or-category-slider" class="or-category-slider-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-3">
          @widget('ListCategoriesMenu')
          <br>
          @widget('Sidebar\BlockBanner')
        </div>
        <div class="col-lg-9">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="{{ Route('site.home.page') }}">{{ __('Home') }}</a></li>
              <li class="breadcrumb-item"><a href="{!! route('product.index') !!}">{{ __("Products") }}</a></li>
              <li class="breadcrumb-item active" aria-current="page"><a title="{{ $product->category->title }}"
                href="{!! URL::Route('product.category',[@$product->category->slug]) !!}">
                {!! @$product->category->title !!}
              </a></li>
            </ol>
          </nav>
          <div class="row">
            <div class="col-lg-7">
              <div class="shop-details-text  headline pera-content">
                <div class="shop-details-title">
                  <h1>{{ $product->title }}</h1>
                </div>
                {{-- <div class="shop-details-rate-review ul-li d-flex">
                  <div class="shop-details-rate">
                    <ul>
                      <li><i class="fas fa-star"></i></li>
                      <li><i class="fas fa-star"></i></li>
                      <li><i class="fas fa-star"></i></li>
                      <li><i class="fas fa-star"></i></li>
                      <li><i class="fas fa-star"></i></li>
                    </ul>
                  </div>
                  <div class="shop-details-review">(5/4.9)</div>
                </div> --}}
                <div class="shop-details-price">{!! $product->offer ?? $product->price !!} {!! __('EGP') !!} / <span>{!! @optional($product->unit)->title !!}</span></div>
                @if ($product->stock > 0)
                  <div class="stock-avaiable">{!! __('Availability now') !!}</div>
                @else
                  <div class="stock-avaiable out-of-stock">{!! __('Not available now') !!}</div>
                @endif
                <div class="shop-details-text-decs">
                  {!! removeEmptyParagraph($product->technical) !!}
                </div>
                <div class="shop-details-product-code ul-li-block">
                  <ul>
                    <li><span>{!! __('Category') !!}: </span>{!! @$product->category->title !!}</li>
                  </ul>
                </div>
                <div class="shop-details-option">
                  <span class="option-title">{!! __('Quantity') !!}:</span>
                  <div class="shop-quantity-option d-flex">
                    <div class="quantity-field position-relative  d-inline-block">
                      <input type="text" name="select1" value="1" class="quantity-input-arrow quantity-input-2  text-center">
                    </div>
                  </div>
                </div>
                <div class="shop-details-btn ">
                  <a href="#">{!! __('Add to cart') !!}</a>
                  <a href="#" class="wsh-btn"> {!! __('Add to Wishlist') !!}
                  </a>
                </div>
              </div>
            </div>
            <div class="col-lg-5">
              <div class="shop-details-img-slider-area">
                @if ($product->hasMedia('gallery'))
                  <div class="shop-details-img-slider">
                    @if ($product->photo)
                      <div class="shop-details-img-wrap">
                        <img src="{{ path_img($product->photo,600,400 ,0) }}" alt="" data-zoomed="{{ path_img($product->photo,600,400 ,0) }}">
                      </div>
                    @endif
                    @foreach ($product->getMedia('gallery') as $key => $image)
                      <div class="shop-details-img-wrap">
                        <img src="{{ path_img('uploads/'.$image->getDiskPath(),600,400,0) }}" alt="" data-zoomed="{{ path_img('uploads/'.$image->getDiskPath(),600,400,0) }}">
                      </div>
                    @endforeach
                  </div>
                  <div class="shop-details-img-thumb">
                    @if ($product->photo)
                      <div class="or-thumb-img">
                        <img src="{{ path_img($product->photo,100,100 ,0) }}" alt="" data-zoomed="{{ path_img($product->photo,100,100 ,0) }}">
                      </div>
                    @endif
                    @foreach ($product->getMedia('gallery') as $key => $image)
                      <div class="or-thumb-img">
                        <img src="{{ path_img('uploads/'.$image->getDiskPath(),100,100,0) }}" alt="" data-zoomed="{{ path_img('uploads/'.$image->getDiskPath(),100,100,0) }}">
                      </div>
                    @endforeach
                  </div>
                @else
                  <div class="shop-details-img-slider">
                    @if ($product->photo)
                      <div class="shop-details-img-wrap">
                        <img src="{{ path_img($product->photo,600,400 ,0) }}" alt="" data-zoomed="{{ path_img($product->photo,600,400 ,0) }}">
                      </div>
                    @endif
                  </div>
                @endif
              </div>
            </div>
          </div>
          <br>
          {{-- ############################### --}}
          <section id="or-shop-details-tab" class="or-shop-details-tab-section">
            <div class="or-shop-details-review-tab-content">
              <div class="or-shop-review-tab-btn">
                <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">الوصف</button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">تقييمات</button>
                  </li>
                </ul>
              </div>
              <div class="or-shop-details-tab-textarea">
                <div class="tab-content" id="myTabContent">
                  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    <div class="shop-details-description-text  ">
                      {!! removeEmptyParagraph($product->content) !!}
                    </div>
                  </div>
                  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                    <div class="review-comment-area">
                      <div class="review-buyer-box">
                        <h3>كن أول من يقييم المنتج</h3>
                      </div>
                      <div class="buyer-review-comment-box headline">
                        <div class="customer-rate-option ul-li float-left">
                          <ul>
                            <li>
                              <label class="customer-rate-option">
                                <input type="checkbox" name="#" class="customer-rate" checked="">
                                <span class="rate-value"></span>
                              </label>
                            </li>
                            <li>
                              <label class="customer-rate-option">
                                <input type="checkbox" name="#" class="customer-rate" checked="">
                                <span class="rate-value"></span>
                              </label>
                            </li>
                            <li>
                              <label class="customer-rate-option">
                                <input type="checkbox" name="#" class="customer-rate" checked="">
                                <span class="rate-value"></span>
                              </label>
                            </li>
                            <li>
                              <label class="customer-rate-option">
                                <input type="checkbox" name="#" class="customer-rate" checked="">
                                <span class="rate-value"></span>
                              </label>
                            </li>
                            <li>
                              <label class="customer-rate-option">
                                <input type="checkbox" name="#" class="customer-rate">
                                <span class="rate-value"></span>
                              </label>
                            </li>
                          </ul>
                        </div>
                        <form id="buyer-review" action="#">
                          <textarea placeholder="اكتب رأيك فى المنتج"></textarea>
                          <input type="text" name="name" placeholder="الإسم...">
                          <input type="email" name="email" placeholder="الإيميل...">
                          <button type="submit">ارسال</button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          {{-- ############################### --}}
          @widget('RelatedProducts',['cat_id' => $product->category_id,'count' =>4])
        </div>
      </div>
    </div>
  </section>
@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