@extends('web.layouts.main')
@section('content')

 <main>
        <!-- ----------  inner header ----------- -->   
        
        @include('web.pages.components.headerNav')

        <!-- ---------- register_page page ----------- -->   
        <section class="products_details section_padding bg-light">
            <div class="main_details">
                <div class="container">
                    <div class="row gx-5">
                        <div class="col-lg-6">
                            <div id="img-container">
                                <img class="main_img" src="{{asset($product->firstImage())}}" />
                            </div>
                            <div class="thumb_imgs">
                                <div class="thumb_imgs_slider">
                                    <div class="Swiper overflow-hidden">
                                        <div class="swiper-wrapper">
                                            @foreach($photos as $row)
                                            <div class="swiper-slide">
                                                <img src="{{asset($row->image)}}" alt="">
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            
                            <div class="info">
                                <form    onsubmit="saveForm(this)" action="{{url(getCurrentLocale().'/carts')}}"  >
                                    
                                <input type="hidden" name="product_id" value="{{$product->id}}">
                                <h3 class="mb-3">{{$product->descriptions()->name}}</h3>
                                <h5> {{__('web.product_cost')}} - <span class="mainColor"> {{$product->code}} </span></h5>
                                <div class="prod_price mt-4">
                                    <h5> {{__('web.cost')}} :  </h5>
                                    @if($product->type != 'none')
                                    <div class="d-flex justify-content-between">
                                        <h4 class="fs-2"> <strong> {{number_format($product->costCheck(),2)}} {{__('web.sar')}} </strong> <span class="old_price text-muted text-decoration-line-through fs-6 ms-2"> {{$product->costBeforeCheck()}} {{__('web.sar')}} </span> </h4>
                                        <div class="alert alert-info rounded-pill border-0 py-1" role="alert">
                                            @if($product->type == 'percentage')
                                            <span>  {{__('web.discount')}} {{$product->getDiscount()}} % </span>
                                            @else
                                            <span>  {{__('web.discount')}} {{$product->getDiscount()}} {{__('web.sar')}} </span>
                                            @endif
                                        </div>
                                    </div>
                                    @else
                                    <div class="d-flex justify-content-between">
                                        <h4 class="fs-2"> <strong> {{number_format($product->costCheck(),2)}} {{__('web.sar')}} </strong> </h4>
                                    </div>
                                    @endif
                                </div>
                                <!--<div class="butn butn_line butn_comment"> -->
                                <!--    <span> <i class="bi bi-pen me-2"></i> {{__('web.notes_buy')}} </span>    -->
                                <!--</div>-->
                                <!--<textarea rows="6" name="notes" class="form-control form_comment"></textarea>-->
                                <div class="row align-items-center mt-5">
                                    <div class="col-3">
                                        <div class="add_more">
                                            <span class="qt-minus" onclick="costChange(this)" data-id="{{$product->id}}" type-id="minus"><i class="fas fa-minus"></i></span>
                                            <div class="cen_qt">
                                                <span id="counter" class="qt">1</span>
                                                <input type="hidden" name="count" id="counting" value="1">
                                            </div>
                                            <span class="qt-plus" onclick="costChange(this)" data-id="{{$product->id}}" type-id="plus"><i class="fas fa-plus"></i></span>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        {{__('web.total')}} : <h2 id="total"> {{number_format($product->costCheck(),2)}} {{__('web.sar')}} </h2>
                                    </div>
                                    <div class="col-4">
                                       
                                        <button class="butn w-100">
                                            <span> <i class="bi bi-cart2 me-2"></i> {{__('web.add_cart')}}</span>
                                        </button>
                                    </div>
                                    <div class="col-2">
                                        <a style="cursor:pointer"  onclick="likesProduct(this)" data-id="{{$product->id}}" class="butn butn_line px-3 @if(favorited($product->id)) fav_active @endif">
                                            <span> <i class="bi bi-heart"></i></span>
                                        </a>
                                    </div>
                                </div>
                                </form>
                                <div class="share_prod">
                                    <h6> {{__('web.share')}} :  </h6>
                                    <div class="share_cont">
                                        <!-- Go to www.addthis.com/dashboard to customize your tools -->
                                        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fd089b2799fc48d"></script>
                                       <div class="addthis_inline_share_toolbox_pr5i d-inline-block"></div>
                                       <a class="clipboard"> <i class="fal fa-link"></i> </a>
                                    </div>
                                    <p class="copy_allert"></p>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="more_info mb-5">
                <div class="container">
                    <div class="info">
                        <ul class="nav" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                                    {{__('web.details')}}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                              <button class="" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                                {{__('web.rates')}}
                              </button>
                            </li>
                          </ul>
                          <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="text">
                                {!! $product->descriptions()->description !!}
                                </div>
                            </div>
                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="reviews py-4">
                                    <div class="container">
                                        <div class="content">
                                            <div class="rev_slider">
                                                @if(count($rates) > 0)
                                                <div class="Swiper">
                                                    <div class="swiper-wrapper">
                                                        @foreach($rates as $row)
                                                        <div class="swiper-slide">
                                                            <div class="rev_box">
                                                                <div class="img">
                                                                    <img src="{{asset($row->user->photo)}}" alt="">
                                                                </div>
                                                                <div class="info">
                                                                    <div class="top_inf">
                                                                        <h4>{{$row->user->name}}</h4>
                                                                        <small class="rate">
                                                                            <i class="bi bi-star me-1"></i>
                                                                            <span>{{$row->rate}}</span>
                                                                        </small>
                                                                    </div>
                                                                    <div class="text">
                                                                        {{$row->comment}}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                @else
                                                <div>
                                                    <h2>{{__('web.not_exist_rates')}}</h2>
                                                </div>
                                                @endif
                                                <!-- <div class="swiper-pagination"></div> -->
                                            </div>
                                            @if($product->sold())
                                            <div class="text-center">
                                                <a href="#0" class="butn main_color" data-bs-toggle="modal"
                                                data-bs-target="#rate_modal">
                                                    <span>{{__('web.add_rate')}}</span>
                                                </a>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                          </div>
                    </div>
                </div>
            </div>
        </section>
        @if(count($products) > 0)
        <section class="simillar_products_section section_padding">
            <div class="container">
                <div class="section_head text-center mb-5">
                    <h2> {!! $page->descriptions()->title !!} </h2>
                    <p> {!! $page->descriptions()->description !!}</p>
                </div>
                <div class="simillar_prods position-relative overflow-hidden pb-5">
                    <div class="Swiper">
                        <div class="swiper-wrapper">
                            @foreach($products as $row)
                            <div class="swiper-slide">
                                {!! $row->viewCard() !!}
                            </div>
                            @endforeach
                        </div>
                        <div class="btn_center">
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif
    </main>
    <div class="modal fade order_modal" id="rate_modal" tabindex="-1" aria-labelledby="rate_modalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content p-5">
                <div class="modal-header">
                    <h3 class="text-center w-100">{{__('web.rate')}}</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="post" action="{{url(getCurrentLocale().'/rate')}}" onsubmit="saveForm(this)" class="form">
                        @CSRF
                        <input type='hidden' name="product_id" value="{{$product->id}}">
                    <div class="bod_top text-center py-4">
                        <div class="stars">
                            <input type="radio" name="rate" value="5">
                            <input type="radio" name="rate" value="4">
                            <input type="radio" name="rate" value="3">
                            <input type="radio" name="rate" value="2">
                            <input type="radio" name="rate" value="1">
                        </div>
                    </div>
                        <div class="form-group my-3">
                            <label class="mb-2 text" for="">{{__('web.rate_here')}}</label>
                            <textarea name="comment" class="form-control bg-light" rows="6" placeholder="...">

                            </textarea>
                        </div>
                        <button type="submit" class="butn sub_color w-100">
                            <span>{{__('web.send')}}</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
  
  @push('js')
    <script>
    
        function likesProduct(elem)
        {
            let target = $(elem).attr('data-id');
            if({!! json_encode(!\Auth::user()) !!})
            {
                $(elem).toggleClass('fav_active');
                $('#modal_login').modal('show');
            }
            else
            {
                $.ajax({
                  url : {!! json_encode(url(getCurrentLocale().'/favorite')) !!},
                  type : 'GET',
                  dataType : 'json',
                  data : 'product_id='+target,
                  success:function(data)
                  {
                    $(elem).toggleClass('fav_active');
                  }
                })
            }
        }
        function costChange(elem)
        {
            let target = $(elem).attr('data-id');
            let type = $(elem).attr('type-id');
            let count = $('#counter').html();
            
            $.ajax({
              url : {!! json_encode(url(getCurrentLocale().'/costChange')) !!},
              type : 'GET',
              data : 'product_id='+target+'&type='+type+'&count='+count,
              success:function(data)
              {
                  if(type == 'plus'){
                      $('#counting').val(parseInt(count)+1);
                  }else{
                      if(count != 1){
                      $('#counting').val(parseInt(count)-1);
                      }
                  }
                  
                $('#total').html(data + ' ' +{!! json_encode(__('web.sar')) !!});
              }
             ,error:function(data) 
             {
                 $('#modal_error').modal('show');
                 $('#errors').html('');
                 $('#errors').css("display", "block");
                 if(type == 'plus'){
                      $('#counter').html(parseInt(count));
                 }else{
                      if(count != 1){
                      $('#counter').val(parseInt(count));
                      }
                 }
                 $.each(data.responseJSON.errors, function(key,value) 
                 {
                     $('#errors').append('<h4 class="title text-center mt-3">'+value+'</h4>');
                 }); 
             }
            })
        }
    </script>
     <script>
        var options = {
            // more options here
            fillContainer: true,
            offset: {vertical: 0, horizontal: 10},
            zoomPosition: 'left'
        };
        new ImageZoom(document.getElementById("img-container"), options);
    </script>

    <script>
        // ------ custom script hoss ------
        $(".thumb_imgs img").on("click" , function(){
            var imgSrc = $(this).attr('src')
            $('#img-container .main_img').attr('src', imgSrc);
            $(".js-image-zoom__zoomed-image").css("background-image", "url(" + imgSrc + ")");
        })
    </script>



    <script>
        $(".form_comment").hide();
        $(".butn_comment").on("click" , function(){
            $(this).siblings(".form_comment").slideDown();
        })
    </script>

    <script>
        // ------------ increase products -----------
        $(".qt-plus").click(function() {
            $(this).parent().children(".cen_qt").children(".qt").html(parseInt($(this).parent().children(".cen_qt").children(".qt").html()) + 1);
        });
    
        $(".qt-minus").click(function() {
    
            child = $(this).parent().children(".cen_qt").children(".qt");
    
            if (parseInt(child.html()) > 1) {
                child.html(parseInt(child.html()) - 1);
            }
    
            $(this).parent().children(".full-price").addClass("minused");
    
        });
    </script>
 <script>
        
            setTimeout(() => {
$('#at4-share').remove()
}, "1000")
    </script>
<script>
    var swiper = new Swiper('.thumb_imgs_slider .Swiper', {
        slidesPerView: 4,
        spaceBetween: 10,
        // centeredSlides: true,
        speed: 1000,
        pagination: false,
        navigation: false,
        mousewheel: false,
        keyboard: true,
        autoplay: {
            delay: 10000,
        },
        loop: false,
        breakpoints: {
            0: {
                slidesPerView: 1,
            },
            480: {
                slidesPerView: 2,
            },
            787: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 4,
            },
            1200: {
                slidesPerView: 4,
            }
        }
    });
</script>


<!------ copy url ------>
<script>
var $temp = $("<input>");
var $url = $(location).attr('href');

$('.clipboard').on('click', function() {
  $("body").append($temp);
  $temp.val($url).select();
  document.execCommand("copy");
  $temp.remove();
  $(".copy_allert").text("تم النسخ").fadeIn().delay(2000).fadeOut();
})
</script>


  @endpush
  @stop