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

    <main>
        <!-- Start section -->
        @include('web.layouts.header')

        <section class="product_det section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="img_box">
                            <div class="swiper-container productSwiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="{{asset($product->image)}}" class="sec-img" alt="">
                                    </div>
                                    @foreach($photos as $row)
                                        <div class="swiper-slide">
                                            <img src="{{asset($row->image)}}" class="sec-img" alt="">
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="text_box my-4">
                            <h6 class="color-gray2 mb-4">#{{$product->code}}</h6>
                            <div class="d-flex justify-content-between mb-4">
                                <div class="txt">
                                    <h3 class="title fw-bold mb-0">
                                        {{$product->name}}
                                    </h3>
                                </div>

                                <div class="share_box">
                                    <button class="share_butn"><i class="fas fa-share me-1"></i> {{__('web.share')}}
                                    </button>
                                    <div class="share_links d-flex">
                                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                                        <a href="#"><i class="fab fa-twitter"></i></a>
                                        <a href="#"><i class="fab fa-instagram"></i></a>
                                        <a href="#"><i class="fas fa-paper-plane"></i></a>
                                    </div>
                                </div>

                            </div>
                            <div class="rating mt-4">
                                @for($i=0;$i<$product->rate['rate'] ;$i++)
                                    <i class="fas fa-star active"></i>
                                @endfor
                                @for($i=0;$i<(5-$product->rate['rate']);$i++)
                                    <i class="fas fa-star"></i>
                                @endfor
                                <span class="rate_num ms-2">{{$product->rate['count']}} {{__('web.rates')}} </span>
                            </div>
                            <div class="prices d-flex align-items-center my-4">
                                @if($product->prices['cost_discount'])
                                    <b class="color-primary">{{$product->prices['cost_discount']}}  {{__('web.sar')}}</b>
                                    <del>{{$product->prices['cost']}}  {{__('web.sar')}}</del>
                                @else
                                    <b class="color-primary">{{$product->prices['cost']}} {{__('web.sar')}}</b>
                                @endif
                            </div>
                            <div class="det_box my-4">
                                <p class="prod_data mb-3">
                                    <b>  {{__('categories.unit_id')}}
                                        :</b>{{$product->category->unit->currentDescription->name}}
                                </p>
                                <p class="prod_data mb-3">
                                    <b>  {{__('web.valid_status')}}
                                        :</b> {{$product->count > 0 ? __('web.valid') : __('web.invalid')}}
                                </p>
                                @if($product->brand_id)
                                    <p class="prod_data mb-0">
                                        <b>   {{__('web.brand')}} :</b> {{$product->brand->currentDescription->name}}
                                    </p>
                                @endif
                            </div>
                            <div class="in-flex flex-wrap pt-4 px-1">
                                <div class="d-flex align-items-center">
                                    <h5 class="label fs-6 mb-0 me-3">{{__('web.quantity')}}</h5>
                                    <div class="qty-container">
                                        <button class="qty-btn-minus btn-light" type="button"><i
                                                class="fa fa-minus"></i></button>
                                        <input type="text" id="count" name="qty" min="1" value="1" class="input-qty"/>
                                        <button class="qty-btn-plus btn-light" type="button"><i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="butns d-flex align-items-center">
                                    <a style="cursor: pointer" onclick="addToCart(this)" data-id="{{$product->id}}"
                                       class="butn secondary_butn cartButn me-2 ">
                                        <i class="fas fa-shopping-cart"></i>{{__('web.add_to_cart')}}
                                    </a>
                                    <a style="cursor: pointer" onclick="favorite(this)" data-id="{{$product->id}}"
                                       class="butn sm_butn gray_butn favButn rounded-circle @if($product->favorited()) active @endif">
                                        <i class="fas fa-heart mx-0"></i>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="product_det_inner mt-5 pt-5">
                    <ul class="nav nav-pills mb-0" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-tab1-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-tab1" type="button" role="tab" aria-controls="pills-tab1"
                                    aria-selected="true">
                                {{__('products.description')}}
                            </button>
                        </li>
                        @if($product->details && $product->details != '<p><br data-mce-bogus="1"></p>')
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-tab2-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2"
                                        aria-selected="false">
                                    {{__('products.details')}}
                                </button>
                            </li>
                        @endif
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-tab3-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-tab3" type="button" role="tab" aria-controls="pills-tab3"
                                    aria-selected="false">
                                {{__('web.rates')}}
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-tab1" role="tabpanel"
                             aria-labelledby="pills-tab1-tab">
                            <div class="tab_wrapper">
                                <h6 class="fw-bold mb-3"> {{__('products.description')}}  </h6>
                                <p class="p mb-0">
                                    {!! $product->description !!}
                                </p>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                            {!! $product->details  !!}
                        </div>
                        <div class="tab-pane fade" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab">
                            <div class="tab_wrapper">
                                @if(count($rates) > 0)
                                    @foreach($rates as $row)
                                        <div class="review_item">
                                            <div class="prof_data d-flex align-items-center mb-3">
                                                <img src="{{asset($row->user->photo ?? 'user.png' )}}" class="avatar"
                                                     alt=""/>
                                                <div class="txt">
                                                    <h6 class="name fw-bold mb-1"> {{$row->user->name}} </h6>
                                                    <div class="rating">
                                                        @for($i=0;$i<$row->rate ;$i++)
                                                            <i class="fas fa-star active"></i>
                                                        @endfor
                                                        @for($i=0;$i<(5-$row->rate);$i++)
                                                            <i class="fas fa-star"></i>
                                                        @endfor
                                                        <span
                                                            class="date ms-2">{{date('Y-m-d',strtotime($row->created_at))}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <p class="review_det">
                                                {!! $row->comment !!}
                                            </p>
                                        </div>
                                    @endforeach
                                @else
                                    {{__('web.not_exist_rate')}}
                                @endif

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        @if(count($products) > 0)
            <section class="products_sec section">
                <div class="container">
                    <h2 class="sec_title bb text-center fw-bold mb-5"> {{__('web.related_products')}}  </h2>
                    <div class="swiper-container prodSwiper">
                        <div class="swiper-wrapper">
                            @foreach($products as $row)
                                <div class="swiper-slide">
                                    @include('web.pages.components.product.productCard',['product'=>$row])
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </section>
        @endif
    </main>
    @include('web.pages.components.modals.rate')
    @section('inject_js')
        <script>
            var buttonPlus = $(".qty-btn-plus");
            var buttonMinus = $(".qty-btn-minus");

            var incrementPlus = buttonPlus.click(function () {
                var $n = $(this)
                    .parent(".qty-container")
                    .find(".input-qty");
                $n.val(Number($n.val()) + 1);
            });

            var incrementMinus = buttonMinus.click(function () {
                var $n = $(this)
                    .parent(".qty-container")
                    .find(".input-qty");
                var amount = Number($n.val());
                if (amount > 1) {
                    $n.val(amount - 1);
                }
            });

            function rateProduct(elem) {
                let url = $(elem).attr('data-id');
                $('#form_rate').attr('action', url);
            }
        </script>
    @endsection
@stop