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


    <main>
        <!-- Start pg_header -->
        <section class="pg_header section py-4">
            <div class="container">
                <div class="bread d-flex align-items-center">
                    <a href="{{route('web.home')}}" class="item" > {{__('web.home')}} </a>
                    <a href="{{route('web.product')}}" class="item" > {{__('web.products')}} </a>
                    <span class="item active"> {{$title}} </span>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="product_det section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="taxt_box">
                            <p class="prod_data">
                                <b>   {{__('web.product_code')}} :</b> #{{$product->code}}
                            </p>
                            <a href="#0" class="categ color-primary mt-4 d-block">
                                <img src="{{url('')}}/assets/web/images/categ-1.png" alt="" class="categ_logo"/>
                                {{$product->category->currentDescription->title .' - '.$product->subCategory->currentDescription->title}}
                            </a>
                            <h1 class="name fs-2 fw-bold mt-4"> {{$product->currentDescription->title}}   </h1>
                            <h3 class="rate_ratio mt-4">
                                <i class="fa-solid fa-star active"></i> <b>{{$product->rate}}</b> <small>({{$product->rate_count}} {{__('web.rate_count')}})</small>
                            </h3>
                            <div class="d-flex justify-content-between align-items-center mt-4">
                                <div class="price mt-2">
                                    @include('web.pages.components.products.cost',['product'=>$product])
                                </div>
                                @if($product->cost_discount)
                                    @include('web.pages.components.products.offer',['product'=>$product])
                                @endif
                            </div>

                            <div class="d-flex align-items-center my-4">
                                <h5 class="label fw-bold 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_product" name="qty" 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="share_links d-flex align-items-center mt-5">
                                <span class="title">{{__('web.share_product')}}</span>
                                <div class="links">
                                    <a href="#"> <img src="{{url('')}}/assets/web/images/icons/social-2.svg" class="socaiIcon" alt="" /> </a>
                                    <a href="#"> <img src="{{url('')}}/assets/web/images/icons/social-3.svg" class="socaiIcon" alt="" /> </a>
                                    <a href="#"> <img src="{{url('')}}/assets/web/images/icons/social-4.svg" class="socaiIcon" alt="" /> </a>
                                    <a href="#"> <img src="{{url('')}}/assets/web/images/icons/social-5.svg" class="socaiIcon" alt="" /> </a>
                                </div>
                            </div>


                            <div class="box_butns butns d-flex mt-5">
                                <a style="cursor: pointer" onclick="addToCart(this)" data-id="{{$product->id}}" class="butn primary_butn px-3 me-2 cart_butn px-4"> <i class="fa-solid fa-cart-plus"></i> {{__('web.add_to_cart')}} </a>
                                <a style="cursor: pointer" onclick="favorite(this)" data-id="{{$product->id}}" class="butn sm_butn secondary_butn fav_butn {{auth()->user()?->favorited($product->id) ? 'active': ''}}"> <i class="fa-solid fa-heart mx-0"></i> </a>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-6 order_md_1 my-4">
                        <div class="swiper_box overflow_hidde">
                            <div class="swiper mySwiper2 lg-slide-swiper mb-4">
                                <div class="swiper-wrapper">
                                    @foreach($photos as $row)
                                        <div class="swiper-slide">
                                        <div class="img-box">
                                            <img src="{{asset($row['image'])}}" alt="" class="lg-img"/>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            <div thumbsSlider="" class="swiper mySwiper sm-slide-swiper">
                                <div class="swiper-wrapper">
                                    @foreach($photos as $row)
                                        <div class="swiper-slide">
                                        <img src="{{asset($row['image'])}}" alt="" class="sm-bg-header"/>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="desc_wrapper mt-5 pt-4">
                    <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">
                                {{__('web.product_description')}}
                            </button>
                        </li>
                        <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">
                                {{__('web.product_items')}}
                            </button>
                        </li>
                        <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">
                                <div class="data mb-4">
                                    <h4 class="fw-bold fs-5 mb-4"> {{__('web.product_description')}}  </h4>
                                        {!! $product->currentDescription->description !!}

                                </div>

                            </div>
                        </div>
                        <div class="tab-pane fade " id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                            <div class="tab_wrapper">
                                <div class="data mb-5 pb-3">
                                    <h4 class="fw-bold fs-5 mb-4"> {{__('web.product_items')}}  </h4>

                                    @if(count($product->items))
                                        <div class="row col-md-6">
                                            @foreach($product->items as $row)
                                                <div class="col-6">
                                                    <div class="item mb-4">
                                                        <span class="label">{{$row->currentDescription->title}}  : </span>
                                                        <b class="color-primary">{{$row->currentDescription->description}}</b>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        @include('web.pages.components.not_found',['message'=>__('web.not_found_description')])
                                    @endif

                                </div>

                            </div>
                        </div>
                        <div class="tab-pane fade " id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab">
                            <div class="tab_wrapper">
                                @if(count($product->rates))
                                    @foreach($product->rates as $row)
                                        <div class="review_item">
                                            <div class="prof_data d-flex align-items-center mb-3">
                                                <img src="{{asset($row->user->photo)}}" 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">{{$row->date}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <p class="review_det">
                                                {!! $row->comment !!}
                                            </p>
                                        </div>
                                    @endforeach
                                @else
                                    @include('web.pages.components.not_found',['message'=>__('web.not_found_rate')])
                                @endif
                                @if($product->canRate)
                                    <button class="butn primary_butn m-auto mt-5" data-bs-toggle="modal" data-bs-target="#rateModal">{{__('web.your_rate')}}</button>
                                @endif
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </section>

        @if(count($products))
        <!-- Start section -->
        <section class="products_sec section">
            <div class="container">

                <div class="sec_head d-flex align-items-center justify-content-between mb-5">
                    <h4 class="sec_title fw-bold"> {{__('web.related_products')}}      </h4>

                    <div class="arrows">
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>

                <div class="swiper-container products_swiper">
                    <div class="swiper-wrapper">
                        @foreach($products as $row)
                        <div class="swiper-slide">
                            @include('web.pages.components.products.card',['product'=>$row])
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
        @endif
    </main>

    <div class="modal  rateModal fade" id="rateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="content text-center mt-4">
                        <h4 class="title text-dark mb-4"><b>  {{__('web.rate_product')}}  </b></h4>
                        <form method="post" action="{{route('web.rate')}}" onsubmit="formAction(this)">
                            @CSRF
                            <input type="hidden" name="product_id" value="{{$product->id}}">
                            <div class="stars-content mb-5">
                                <div class="star-rating">
                                    <input type="radio" id="5-stars" name="rate" value="5" />
                                    <label for="5-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="4-stars" name="rate" value="4" />
                                    <label for="4-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="3-stars" name="rate" value="3" />
                                    <label for="3-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="2-stars" name="rate" value="2" />
                                    <label for="2-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="1-star" name="rate" value="1" />
                                    <label for="1-star" class="star"><i class="fas fa-star"></i></label>
                                </div>
                            </div>
                            <div class="form-group col-md-10 m-auto">
                                <h6 class="title mb-3"> {{__('web.write_your_comment')}}  </h6>
                                <textarea name="comment" class="form-control" placeholder=" {{__('web.write_here')}}  " rows="7"></textarea>
                            </div>
                            <div class="d-flex justify-content-center align-items-center justify-content-center mt-5 ">
                                <button type="button" class="butn btn-secondary  mx-1" data-bs-dismiss="modal">{{__('web.close')}}</button>
                                <button type="submit" class="butn primary_butn mx-1">{{__('web.send')}}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('inject_js')
    <script>
        var swiper = new Swiper(".sm-slide-swiper", {
            // loop: true,
            slidesPerView: 5,
            spaceBetween: 10,
            freeMode: true,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".lg-slide-swiper", {
            // loop: true,
            // effect: 'fade',
            spaceBetween: 10,
            // autoplay: {
            //     delay: 2500,
            // },
            thumbs: {
                swiper: swiper,
            },
        });
    </script>
@endsection