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


    <main>

        <!-- ---------- Start breadcrumb ----------- -->
        @include('web.pages.components.header.header')


        <!-- ---------- products main info ----------- -->
        <section class="product-main-info">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="product-imgs">
                            <div class="row gx-3">
                                <div class="col-2">
                                    <div class="swiper-container gallery-thumbs">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <img src="{{asset($product->image)}}" class="secImg" alt="" />
                                            </div>
                                            @foreach($photos as $row)
                                                <div class="swiper-slide">
                                                    <img src="{{asset($row->image)}}" class="secImg" alt="" />
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="col-10">
                                    <div class="swiper-container gallery-top">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <img src="{{asset($product->image)}}" class="secImg" alt="" />
                                            </div>
                                            @foreach($photos as $row)
                                                <div class="swiper-slide">
                                                    <img src="{{asset($row->image)}}" class="secImg" alt="" />
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="share-wrapper">
                                            <a href="#0" class="share-icon"> <i class="fal fa-share-nodes"></i> </a>
                                            <div class="share-icons a2a_kit">
                                                <a href="#" target="_blank" class="socialLink a2a_button_whatsapp" > <i class="fab fa-whatsapp"></i> </a>
                                                <a href="#" target="_blank" class="socialLink a2a_button_facebook"> <i class="fab fa-facebook-f"></i> </a>
                                                <a href="#" target="_blank" class="socialLink a2a_button_x"> <i class="fab fa-x-twitter"></i> </a>
                                                <a href="#" target="_blank" class="socialLink a2a_button_email"> <i class="far fa-envelope"></i> </a>
                                                <a href="#" id="copyLink" > <i class="fas fa-copy"></i> </a>
                                                <a class="copy-feedback ms-1" style="display:none;" id="copyMsg">{{__('web.copied')}}!</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <form method="post" action="{{route('cart.store')}}" onsubmit="formAction(this)">
                            <input type="hidden" name="product_id" value="{{$product->id}}">
                            <div class="info">
                            <div class="brand">
                                <img src="{{asset($product->brand->logo)}}" alt="">
                            </div>
                            <h5> {{$product->title}} </h5>
                            <div class="rate-wrapper cr-gray">
                                <span> {{$product->rate}} </span>
                                <div class="stars">
                                    @for($i=1;$i<=($product->rate);$i++)
                                        <i class="fas fa-star active"></i>
                                    @endfor
                                    @for($i=1;$i<=(5 - $product->rate);$i++)
                                        <i class="fas fa-star"></i>
                                    @endfor
                                </div>
                                <span> {{$product->rate_count}} {{__('web.rate')}} </span>
                            </div>
                            <div>
                                <p class="mt-3"> <strong class="cr-blue"> SKU : </strong>  {{$product->sku}}</p>
                            </div>
                            <div class="price-wrapper mt-4">
                                @if($product->price['percentage'])
                                    <div class="cr-green"> {{__('web.discount')}} {{$product->price['percentage']}}% </div>
                                @endif
                                @if($product->price['offer_percentage'])
                                    <div class="cr-green"> {{__('web.discount_offer')}} {{ $product->price['offer_percentage']}}% </div>
                                @endif
                                <div class="price-line d-flex align-items-end">
                                    <div class="price">
                                        <h3> {{$product->price['cost']}} <small>{{__('web.sar')}}.</small> </h3>
                                    </div>
                                    <div class="text ms-3 mb-1"> *{{__('web.inc_vat')}} </div>
                                </div>
                                @if($product->price['discount'])
                                    <div class="text"> <span> {{__('web.cost_after_discount')}}: </span> <span class="text-decoration-line-through"> {{$product->price['cost_before_discount']}} </span> <small>{{__('web.sar')}}.</small> </div>
                                @endif
                                @if($product->price['offer_percentage'])
                                    <div class="text"> <span> {{__('web.cost_after_discount_offer')}}: </span> <span class="text-decoration-line-through"> {{$product->price['cost_before_discount_offer']}} </span> <small>{{__('web.sar')}}.</small> </div>
                                @endif
                                @if(count($options) && $product->attribute_id)
                                    <div class="select-item mt-4">
                                        <p> {{$product->attribute->currentDescription->title}}: </p>
                                        <div class="select-btns">
                                            @foreach($options as $key=>$row)
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio"{{$key==0 ? 'checked' : ''}} name="option_id" value="{{$row->option_id}}" id="option{{$row->id}}">
                                                    <label class="form-check-label" for="option{{$row->id}}">
                                                        {{$row->option->currentDescription->title}}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                                <div class="add-btns mt-4">
                                    <div class="row gx-0">
                                        <div class="col-lg-2">
                                            <select name="count" id="" class="form-select form-control">
                                                @for($i = 1;$i<=$max_count_order;$i++)
                                                    <option value="{{$i}}"> {{$i}} </option>
                                                @endfor
                                            </select>
                                        </div>
                                        @if(auth()->user())
                                            <div class="col-lg-8 px-4">
                                                <button type="submit" class="butn w-100 my-4 my-lg-0">
                                                    <span>{{__('web.add_to_cart')}}</span>
                                                </button>
                                            </div>
                                            <div class="col-lg-1">
                                                <a style="cursor: pointer" onclick="favorite(this)" data-id="{{$product->id}}" class="fav-icon {{$account->favorited($product->id) ? 'active': ''}} toggle-active"> <i class="fal fa-heart"></i> </a>
                                            </div>
                                           {{-- <div class="col-lg-1">
                                                <a style="cursor: pointer" onclick="wishlist(this)" data-id="{{$product->id}}" class="fav-icon {{$account->wishlisted($product->id) ? 'active': ''}} toggle-active"> <i class="fa-regular fa-bookmark"></i> </a>
                                            </div>--}}
                                        @endif
                                    </div>
                                </div>
                                <div class="feat-box mt-4">
                                    <div class="item">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/ft1.svg" alt="">
                                        </div>
                                        <h6> {{__('web.on_hand_cost')}} </h6>
                                    </div>
                                    <div class="item">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/ft2.svg" alt="">
                                        </div>
                                        <h6> {{__('web.secure_pay')}} </h6>
                                    </div>
                                    <div class="item">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/ft3.svg" alt="">
                                        </div>
                                        <h6> {{__('web.free_shipping')}} </h6>
                                    </div>
                                    <div class="item">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/ft4.svg" alt="">
                                        </div>
                                        <h6> {{__('web.refund_14_days')}} </h6>
                                    </div>
                                    <div class="item">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/ft5.svg" alt="">
                                        </div>
                                        <h6> {{__('web.rated_by_nagi')}} </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>



        <!-- ---------- product-subinfo   ----------- -->
        <section class="product-sub-info pt-3">
            <div class="container">
                <div class="line-title-st2 mb-4"> <h5 class=""> {{__('web.overview')}} </h5> </div>
                <div class="content">
                    <div class="row gx-5">
                        <div class="col-lg-6">
                            <div class="info mb-3">
                                <h5 class="cr-blue mb-3"> {{__('web.about_product')}} </h5>
                                {!! $product->description !!}
                            </div>
                        </div>
                        @if(count($items))
                            <div class="col-lg-6">
                            <h5 class="cr-blue mb-3"> {{__('web.descriptions')}} </h5>
                            <ul class="info-list mb-3">
                                @foreach($items as $row)
                                    <li>
                                        <div class="row">
                                            <div class="col-lg-5">
                                                <div class="text"> {!! $row->currentDescription->title !!} </div>
                                            </div>
                                            <div class="col-lg-7">
                                                <h6> {!! $row->currentDescription->description !!} </h6>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        <!-- ---------- product brand ----------- -->
        <section class="brand-products py-4">
            <div class="container">
                <div class="line-title-st2 mb-4"> <h5 class=""> {{__('web.more_about')}} {{$product->category->currentDescription->title}} <span class="cr-red ms-3"> <img src="{{url('')}}/assets/web/images/icons/fire.svg" alt=""> {{__('web.recommend_products')}} </span> </h5> </div>
                <div class="row">
                    @foreach($products as $row)
                    <div class="col-lg-3">
                        <div class="product-card-st3">
                            <div class="img">
                                <a href="{{route('web.product.details',$row->id)}}" class="d-block h-100">
                                    <img src="{{asset($row->image)}}" alt="" class="main-img">
                                </a>
                                <a style="cursor: pointer" onclick="favorite(this)" data-id="{{$product->id}}" class="fav-icon {{$account->favorited($row->id) ? 'active': ''}} toggle-active"> <i class="fal fa-heart"></i> </a>
                                <a style="cursor: pointer" onclick="addToCart(this)" data-id="{{$row->id}}" count-id="1"  class="cart-icon toggle-active"> <i class="fal fa-cart-plus"></i> </a>
                            </div>
                            <div class="info">
                                <div class="rate-wrapper cr-gray">
                                    <!-- <span> 4.7 </span> -->
                                    <div class="stars ms-0">
                                        @for($i=1;$i<=($row->rate);$i++)
                                            <i class="fas fa-star active"></i>
                                        @endfor
                                        @for($i=1;$i<=(5 - $row->rate);$i++)
                                            <i class="fas fa-star"></i>
                                        @endfor
                                    </div>
                                    <span> {{$row->rate_count}} {{__('web.rate')}} </span>
                                </div>
                                <a href="{{route('web.product.details',$row->id)}}" class="prod-title">{{$row->title}} </a>
                                <div class="price-wrapper">
                                    <span class="price"> {{$row->price['cost']}} </span> <small> {{__('web.sar')}} </small>
                                    @if($row->price['discount'])
                                        <span class="old-price"> {{$row->price['cost_before_discount']}} </span> <small class="prc"> {{$row->price['percentage']}}% </small>
                                    @endif
                                    @if($row->price['offer_percentage'])
                                        <span class="old-price"> {{$row->price['cost_before_discount_offer']}} </span> <small class="prc"> {{$row->price['offer_percentage']}}% </small>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>


        <!-- ---------- product-rates ----------- -->
        <section class="product-rates">
            <div class="container">
                <div class="line-title-st2 mb-4"> <h5 class=""> {{__('web.product_rates')}} </h5> </div>
                <div class="row">
                    <div class="col-lg-3">
                        <div class="progress-box mb-4">
                            <h5 class="cr-blue"> {{__('web.public_rate')}} </h5>
                            <h2 class="cr-blue"> {{$product->rate}} </h2>
                            <div class="stars ms-0">
                                @for($i=1;$i<=($product->rate);$i++)
                                    <i class="fas fa-star active"></i>
                                @endfor
                                @for($i=1;$i<=(5 - $product->rate);$i++)
                                    <i class="fas fa-star"></i>
                                @endfor
                            </div>
                            <div class="text">{{__('web.based_on')}} {{$product->rate_count}} {{__('web.rates')}} </div>
                            <div class="progress-content">
                                @foreach($ratings as $key=>$row)
                                    <div class="progress-item">
                                        <span class="txt"> {{$key}} <i class="fas fa-star"></i> </span>
                                        <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="{{(count($row) / $product->rate_count) * 100}}" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-bar" style="width: {{(count($row) / $product->rate_count) * 100}}%"></div>
                                        </div>
                                        <span class="prc"> {{number_format((count($row) / $product->rate_count) * 100,2)}}% </span>
                                    </div>
                                @endforeach
                            </div>
                            @if($product->can_rate)
                                <h6> {{__('web.write_rate')}} </h6>
                                <div class="text"> {{__('web.share_with_others')}} </div>
                                <a style="cursor: pointer" onclick="rateModel(this)" data-id="{{route('web.open.rate',$product->id)}}" class="butn butn-line w-100 mt-4">
                                    <span> {{__('web.write_rating')}} </span>
                                </a>
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="rates-content">
                            <h6> {{__('web.best_reviews')}} </h6>
                            <div class="comments">
                                @foreach($rates as $row)
                                    <div class="comment-card">
                                        <div class="avatar">
                                            <img src="{{asset($row->user->photo)}}" alt="" class="img-cover">
                                        </div>
                                        <div class="cont">
                                            <div class="title">
                                                <h6> {{$row->user->name}} </h6>
                                                <div class="text"> {{__('web.wrote_in')}} {{$row->date}}   </div>
                                            </div>
                                            <div class="cont-body">
                                                <div class="rate d-flex mb-2">
                                                    <div class="stars me-2">
                                                        @for($i=1;$i<=($row->rate);$i++)
                                                            <i class="fas fa-star active"></i>
                                                        @endfor
                                                        @for($i=1;$i<=(5 - $row->rate);$i++)
                                                            <i class="fas fa-star"></i>
                                                        @endfor
                                                    </div>
{{--                                                    <span class="cr-green"> {{__('web.rates.'.$row->rate)}} </span>--}}
                                                </div>
                                                <div class="text fs-6">{!! $row->comment !!} </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            {{--
                            <div class="text-center">
                                <a href="#" class="butn butn-line mt-4 col-lg-5 mx-auto">
                                    <span> مشاهدة جميع المراجعات </span>
                                </a>
                            </div>
                            --}}
                        </div>
                    </div>
                </div>
            </div>
        </section>






        @include('web.layouts.footer_banner')


    </main>

    @include('web.pages.components.rate_model')
@endsection

@section('inject_js')
<script>
    $(function(){
      $("#copyLink").on("click", function(){
        var url = window.location.href; // رابط الصفحة الحالية
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(url).then(function(){
            $("#copyMsg").fadeIn().delay(1500).fadeOut();
          });
        } else {
          var $temp = $("<input>");
          $("body").append($temp);
          $temp.val(url).select();
          document.execCommand("copy");
          $temp.remove();
          $("#copyMsg").fadeIn().delay(1500).fadeOut();
        }
      });
    });
</script>

<script>
  var a2a_config = a2a_config || {};
  a2a_config.linkurl = "{{route('web.product.details',$product->id)}}";
  a2a_config.linkname = "{{$product->title}}";

a2a_config.onclick = function(element, service, link) {
  window.open(link, '_blank');
  return false;
  };
</script>

<!-- Load AddToAny JS -->
<script async src="https://static.addtoany.com/menu/page.js"></script>
    <script>
        // ---------- single product slider -----------
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 20,
            slidesPerView: 5,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            direction: "vertical",
        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs
            }
        });
    </script>
@endsection