@extends('layouts.welcomelayouts.app')

@section('title')
<title>{{ $product->title }} - {{$appSetting->h1}} | {{$appSetting->slogan}}</title>
@endsection

@section('SEO')
<meta name="description" content="{!!$appSetting->meta_description!!}">
<meta name="keywords" content="{{$appSetting->meta_keyword}}">
<meta property="og:title" content="{{$product->meta_title==null? $product->title :$product->meta_title}}">
<meta property="og:description" content="{!! $product->meta_description==null? $appSetting->meta_description :$product->meta_description  !!}">
<meta property="og:image" content="{{ asset($product->fi()) }}">
<meta property="og:url" content="{{ route('welcome.productSingle', [$product,new_slug($product->title)]) }}">
@endsection

@push('css')
<style type="text/css">
  .singletitle{

  }
  .input_hidden { position:absolute; width: 1px; }
  .selectedd {border: 1px solid red !important; }
  #solidcolor label, #gradient label, #pattern label { display:inline-block; cursor:pointer; }
  #solidcolor label:hover, #gradient label:hover, #pattern label:hover { background-color:#ccc; opacity:.8; }
  #solidcolor label img, #gradient label img, #pattern label img { padding:5px 5px 0; }
  #brandcheckid{
    border: 1px solid #cfcfcf;
    padding: 2px 5px;
    border-radius: 3px;
    cursor: pointer;
    margin: 2px;
    width: 30px;
    text-align: center;
  }
  #decrease{
    color:#ea4335;font-size: 25px;text-align: center; width: 50px; float: left; cursor: pointer;font-weight: bold;
  }
  #increase{
    font-weight: bold;color:#ea4335;font-size: 25px;text-align: center; width: 40px; float: left;cursor: pointer;
  }
  #number{
    font-size: 23px;text-align: center;color: gray; width: 50px !important; float: left; cursor: pointer;border-bottom: 0px solid;border-top: 0px solid;border-right: 1px solid #28a745;border-left: 1px solid #28a745;font-weight: bold;
  }
  #quantitydiv{
    text-align: center;border: 1px solid #28a745;min-height: 38px;width: 150px;margin:1px;
  }
  #submitBtn{
    border: none;display: block;color: white;font-weight: bold;outline: none;text-align: center;padding: 10px;margin: 0px;background: #28a745;width: 150px;border-radius: 3px;cursor: pointer;width: 100%;
  }
  #submitBtn2{
    border: none;color: white;display: block;font-weight: bold;outline: none;text-align: center;padding: 10px;margin: 0 5px;background: #ea4335;width: 150px;border-radius: 3px;cursor: pointer;width: 100%;
  }
  #shoppingform{
    padding: 5px;border: 2px solid #28a745;
  }

  div.product-attr ul {
    margin: 0;
    padding: 0;
  }
  div.product-attr ul li {
    float: left;
    list-style: none;
  }

  div.product-attr ul li span {
    border: 1px solid #d2d2d2;
    padding: 5px 10px;
    margin: 5px;
  }

  .inportant-note {
    padding: 15px;
  }
  .inportant-note p {
    margin: 0;
    color: gray;
    font-size: 12px;
  }
  .inportant-note i {
    color: #afafaf;
  }
  .inportant-note strong {
    font-size: 14px;
    color: #3c3c3c;
  }
  .inportant-note span {
    font-size: 10px;
    color: gray;
  }

  .vendor-div {
    padding: 15px;
  }
  .vendor-div p {
    margin: 0;
    font-size: 14px;
    line-height: 16px;
  }
  .vendor-div p span {
    font-weight: bold;
    color: gray;
  }

  .vendor-div table tr td {
    border: 1px solid #dddddd;
    padding:5px;
    vertical-align: text-bottom;
  }
  .vendor-div table tr td p {
    font-size: 12px;
    color: #363434;
    margin-bottom: 20px;
  }
  .starreviewresult p{
    font-size: 50px;
  }
  .starreviewresult p span {
    font-size: 30px;
    }
    .productReview {
    padding: 5px 15px;
    border-top: 1px solid #eaeded;
        
    }
  @media only screen and (max-width: 769px) {
    .hidemobiletopsidebar {
      display: none;
    }
    .reviewsidebar{
     padding:0;   
    }
    .hidemobilesidebar{
      display: none;
    }
    h3.singletitle {
      font-size: 16px;
    }
    .hidemoibleofferproduct{
      display: none;
    }

  }
</style>
@endpush

@section('contents')

<div class="row" style="background: #fff;margin: 0;">
  <div class="col-md-2 hidemobiletopsidebar" style="padding: 0;">
    @include('layouts.welcomelayouts.topsidebarmenu')
  </div>
  <div class="col-md-10">
    <p style="margin: 0;cursor: pointer;padding: 5px;">
      @if(!$product->cat_id==null)
      <a style="text-decoration: none;color: gray;font-size: 14px;" href="{{ route('welcome.productCategory',[$product->cat_id,new_slug($product->cat->title)]) }}">{{ $product->cat->title }} 
      </a>
      @endif
      @if(!$product->subcat_id==null)
      <i class="fas fa-chevron-right"></i> 
      <a style="text-decoration: none;color: gray;font-size: 14px;" href="{{ route('welcome.productSubcategory',[$product->cat_id,new_slug($product->subcat->title)]) }}">{{ $product->subcat->title }} 
      </a>
      @endif
      
      @if(!$product->subsubcat_id==null)
      <i class="fas fa-chevron-right"></i> 
      <a style="text-decoration: none;color: gray;font-size: 14px;" href="{{ route('welcome.productSubsubcategory',[$product->cat_id,new_slug($product->subsubcat->title)]) }}">{{ $product->subsubcat->title }} 
      </a>
      @endif




    </p>

  </div>

</div>

<div class="row" style="margin:10px 0;background: white;">
  <div class="col-md-3" style="padding: 10px;">
    @include('welcome.products.include.productslider')
  </div>
  <div class="col-md-6" style="padding: 10px;">
    <div class="product-cart-info">
      <h3 style="margin: 0;font-size: 22px;" class="singletitle"> {{ $product->title }}</h3>
      <p style="margin: 0;font-size: 12px;margin-top: 10px;">
        <span>
          <i class="fa fa-star" style="color:#ffc107;"></i>
          <i class="fa fa-star" style="color:#ffc107;"></i>
          <i class="fa fa-star" style="color:#ffc107;"></i>
          <i class="fa fa-star" style="color:#ffc107;"></i>
          <i class="fa fa-star" style="color:#ffc107;"></i>
        </span>
        <span>{{$ratings->count()}} Ratings</span>
        <span style="font-weight: bold;">Brand: </span>
        @if($brand = App\Model\ProductBrand::find($product->brand_id))
        <span>{{$brand->title}}</span>
        @else
        <span>No Brand</span>
        @endif
      </p>
      <hr>
      <div>


        <p style="margin: 0;font-weight: bold;color: #28a745;font-size: 25px;">{{$appSetting->currency}} {{number_format($product->final_price,0)}} @if($product->discount > 0) <del style="color: #ea4335;font-size: 16px;"> {{number_format($product->sale_price,0)}} </del> @endif</p>
      </div>
      <hr>

      <form class="cat-subcat-form-"  action="{{ route('cart.addProductToCart',$product) }}" method="post">
        @csrf
    @if($product->skuColors()->count() > 0)
      <div class="row" style="margin: 0;">
       <div class="col-3" style="padding: 0;">
         <p>Color</p>
       </div>
       <div class="col-9" style="padding: 0;">
        <div class="product-attr product-color">
          <ul>
            @foreach($product->skuColors()->get() as $skuColor)
                @if($skuColor->color)
                <li style="margin-right: 0;"> 
                  <label id="brandcheckid" class="{{ $loop->first ? 'selected' : '' }}" style="background:{{ $skuColor->color->hexa_code }}; margin-right: -4px;">
                  <input class="radio" type="radio" name="color" id="" value="{{ $skuColor->color_id }}"  required {{ $loop->first ? 'checked' : '' }}></label>
                  <span style="margin-left: 0;">{{ $skuColor->color ? $skuColor->color->title : '' }}</span>
                  </li>
                @endif              
              @endforeach



            </ul>
          </div>
        </div>
      </div>
      @endif
     @if($product->skuSizes()->count() > 0)
      <div class="row" style="margin: 0;">
       <div class="col-3" style="padding: 0;">
         <p>Size</p>
       </div>
       <div class="col-9" style="padding: 0;">
        <div class="product-attr product-size">
          <ul>
            @foreach($product->skuSizes()->get() as $skuSize)

            @if($skuSize->size)
            <li>

              <label id="brandcheckid" class="{{ $loop->first ? 'selected' : '' }}" style="background:#fff; margin-right: -4px;">
                  <input class="radio" type="radio" name="size" id="" value="{{ $skuSize->size_id }}"  required {{ $loop->first ? 'checked' : '' }}></label>
              <span style="margin-left: 0;">{{ $skuSize->size ? $skuSize->size->title : '' }}</span>

            </li>
            @endif
            @endforeach
          </ul>
        </div>
      </div>
    </div>
    @endif
  </div>

    <div class="row" style="margin: 0;border-top: 1px solid #d7d7d7;padding: 5px 0;">
      <div class="col-5" style="padding: 0;">
        <p style="margin: 0;font-weight: bold;color: #28a745;font-size: 22px;">Quantity <br>
          <!--<span class="text-help" style="font-size: 11px;">Minimum Order Quantity: {{ $product->min_order_quantity }}</span>-->
        </p>
      </div>
      <div class="col-7">
        <div>
          <div style="text-align: center;border: 1px solid #28a745;min-height: 38px;width: 150px;margin:1px;">
            <div style="" id="decrease" onclick="decreaseValue()" >-</div>
            <input style="" id="number" value="{{ $product->min_order_quantity ? $product->min_order_quantity : 1 }}" readonly type="number" name="qnt">
            <div id="increase" onclick="increaseValue()" style="">+
            </div>
          </div>
          <script>
            function increaseValue() {
              var value = parseInt(document.getElementById('number').value, 10);

              if(value < {{$product->max_order_quantity ?: $product->quantity}}){
              value = isNaN(value) ? 1 : value;
              value++;
              document.getElementById('number').value = value;
              }
            }

            function decreaseValue() {
              var value = parseInt(document.getElementById('number').value, 10);
              if(value > 1){
                  value = isNaN(value) ? 1 : value;
                  value < 1 ? value = 1 : '';
                  value--;
                  document.getElementById('number').value = value;
              }
              
            }
          </script>
        </div>
      </div>
    </div>

    <div style="margin:10px 0;padding: 5px 0;">
    @if($product->stock_out_limit <= $product->quantity)
      <div class="row" style="margin: 0;">
        <div class="col-6" style="padding: 0;">
          <button id="submitBtn" type="submit">ADD TO CART</button>
        </div>
        <div class="col-6" style="padding: 0;">
            <button id="submitBtn2" name="orderNow" value="on" type="submit">ORDER NOW</button>
        </div>
      </div>
      @else
      <div style="text-align:center;">
        <span style="font-weight: bold;color: red;font-size: 25px;">Out Of Stock</span>
      </div>
      @endif
    </div>
  </form>
  <div class="cartmessage">
    @include('alerts.alerts')
  </div>

</div>
<div class="col-md-3" style="padding: 0;background: #fafafa;">
     @include('welcome.products.include.importantNote')
  </div>
</div>
<div>
  <div class="row" style="margin: 0;">
    <div class="col-md-9" style="padding: 0;">
      <div class="productdiv" style="padding: 15px;margin:7px 0;background: #fff;">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <p class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="cursor: pointer;">Product Details</p>
          </li>
          <li class="nav-item">
            <p class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" style="cursor: pointer;">Important Note</p>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent" style="overflow: auto;">
          <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" >
                <div class="productnoticelist">
                    @if($product->description==null)
                    <p style="font-weight: bold;">No Description is available</p>
                    @else
                    <p style="font-weight: bold;">Product Description Of {{ $product->title }}</p>
                    {!!$product->description!!}
                    @endif
                    
                </div>
          </div>
          <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div class="productnoticelist">
              <ul style="list-style: decimal-leading-zero;">
                <li>The order of the product will be delivered regardless of stock. For inevitable reasons, delivery of the product may take longer than the seller promised delivery time.</li>
                <li>Tanbinas has the ability to cancel your order at any time, even after order confirmation. In this case, if you do not accept after giving the courier for refund information (Bikash No / Rocket No / Card No. etc.) and product delivery in advance, the product will be refunded within the maximum 10 working days after returning the product from that courier.</li>
                <li>In case of any products that are priced in the packet and if for any reason more than that, you will have to register Complain within the maximum 48 hours by mail to complain@tanbinas.com. The additional cost you pay will be refunded through Bkash within 10 business days if your Compliance is correct.</li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 reviewsidebar">
        <div style="padding: 15px;margin:7px 0;background: #fff;">
            @include('welcome.products.include.reviewstar',['ratings'=>$ratings, 'avg_rate'=>$avg_rate])
        </div>
    </div>
  </div>
</div>
@include('welcome.products.include.realatedProduct')

@include('welcome.products.include.realatedReview',['review'=>$review, 'ratings'=>$ratings])



</div>

@endsection
@push('js')
<script src="{{asset('js/imgezoom/zoomsl.js')}}"></script>
<script>
  $(document).ready(function () {
    $(".block__pic").imagezoomsl({
      zoomrange: [3, 3]
    });


  ////////////////////////////////////////////////////

  $("form.cat-subcat-form").submit(function (e){
    e.preventDefault();
      var alldata = $(this).serialize(); // serialize data
      var url = $(this).attr('action');
      $.ajax({
        url:url,
        method:'POST',
        data:$(this).serialize(),
      })
      .done(function(data) {
        $('.cartmessage').empty().append('<div style="border: 1px solid #28a745;padding: 5px 10px;">Product Add Success</div>');
        if(data.btntype==2){
          window.location ='';
        } 
        $('.totalitemsqty').empty().append(data.cartTotalcount);
      })
      .fail(function() {
        alert("error");
      });
    }); 

    $('#submitBtn').click(function() {
      $("#btntype").val(1);
      $("form.cat-subcat-form").trigger('submit');
    });
    $('#submitBtn2').click(function() {
      $("#btntype").val(2);
      $("form.cat-subcat-form").trigger('submit');
    });

/////////////////////////////////////////////////

$('#solidcolor input:radio').addClass('input_hidden');
$('#solidcolor label').click(function() {
  $(this).addClass('selectedd').siblings().removeClass('selectedd');
});

/* Highlight the saved radio button on page load */
$("#solidcolor input[type='radio']:checked").each( 
  function() { 
   $('#solidcolor label').css("border", "solid 1px #cecece");
 } 
 );

$('#solidcolor2 input:radio').addClass('input_hidden');
$('#solidcolor2 label').click(function() {
  $(this).addClass('selectedd').siblings().removeClass('selectedd');
});

/* Highlight the saved radio button on page load */
$("#solidcolor2 input[type='radio']:checked").each( 
  function() { 
   $('#solidcolor2 label').css("border", "solid 1px #cecece");
 } 
 );



});
</script>
<script>
  $(document).ready(function(){
    $(".block__pic").imagezoomsl({
      zoomrange: [3, 3]
    });
    $('a').click(function(){
      var largeImage = $(this).attr('data-full');
      $('.selected').removeClass();
      $(this).addClass('selected');
      $('.full img').hide();
      $('.full img').attr('src', largeImage);
      $('.full img').fadeIn();


    }); // closing the listening on a click
    $('.full img').on('click', function(){
      var modalImage = $(this).attr('src');
      $.fancybox.open(modalImage);
    });
  }); //closing our doc ready
</script>
@endpush