@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="products_det_pg2 products_det_pg section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="product_imgs">
                            <div class="row">
                                <div class="col-2">
                                    <div class="swiper-container gallery-thumbs">
                                        <div class="swiper-wrapper">
                                            @if($product->video_link)
                                                
                                                <div class="swiper-slide">
                                                    <img src="{{asset('assets/web/images/video_placeholder.png')}}"
                                                             class="secImg"
                                                             alt="{{ $title  }}"/>
                                                </div>
                                            @endif
                                            <div class="swiper-slide">
                                                        <img src="{{getImage($product->image)}}"
                                                             class="secImg"
                                                             alt="{{ $title  }}"/>
                                                    </div>
                                            @if(!empty($itemImages))
                                                @foreach($itemImages as $image)
                                                    <div class="swiper-slide">
                                                        <img src="{{$image}}"
                                                             class="secImg"
                                                             alt="{{ $title  }}"/>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-10">
                                    <!-- Swiper -->
                                    <div class="swiper-container gallery-top">
                                        <div class="swiper-wrapper">
                                            @if($product->video_link)
                                                <div class="swiper-slide">
                                                  <iframe id="player0" width="450" height="450" src="{{$product->video_link }}" frameborder="0" allowfullscreen iframe-video encrypted-media gyroscope picture-in-picture></iframe>
                                                </div>
                                            @endif
                                            <div class="swiper-slide">
                                                        <img src="{{getImage($product->image)}}"
                                                             class="secImg"
                                                             alt="{{ $title }}"/>
                                                    </div>
                                            @if(!empty($itemImages))
                                                @foreach($itemImages as $image)
                                                    <div class="swiper-slide">
                                                        <img src="{{$image}}"
                                                             class="secImg"
                                                             alt="{{ $title }}"/>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                    <div class="share_links d-flex justify-content-center mt-5">
                                        <span class="title"> {{ __('products::products.product_sharing') }} </span>
                                        <div class="links">
                                            <a href="#"
                                               class="share-facebook"
                                               data-url="{{ $productPage }}"
                                               data-title="{{ $title }}">
                                                <i class="fa-brands fa-facebook-f"></i>
                                            </a>
                                            <a href="#"
                                               class="share-twitter"
                                               data-url="{{ $productPage }}"
                                               data-title="{{ $title }}">
                                                <i class="fa-brands fa-x-twitter"></i>
                                            </a>
                                            <a href="#"
                                               class="share-telegram"
                                               data-url="{{ $productPage }}"
                                               data-title="{{ $title }}">
                                                <i class="fa-solid fa-paper-plane"></i>
                                            </a>
                                            <a href="#"
                                               class="share-snapchat"
                                               data-url="{{ $productPage }}"
                                               data-title="{{ $title }}">
                                                <i class="fa-brands fa-snapchat"></i>
                                            </a>
                                            <a href="#"
                                               class="share-whatsapp"
                                               data-url="{{ $productPage }}"
                                               data-title="{{ $title }}">
                                                <i class="fa-brands fa-whatsapp"></i>
                                            </a>
                                            <a href="javascript:void(0);"
                                               class="copy-link"
                                               data-url="{{ $productPage }}">
                                                <i class="fa-solid fa-link"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card-body">
                            <form class="show_item_form">
                                <div class="txt col-lg-11 mb-4">
                                    <div class="top_card mb-4 d-flex align-items-center justify-content-between">
                                        <h5 class="title fs-3 fw-bold mb-3">{{ $title }}</h5>
                                        <div class="stars">
                                            @for($r = 1; $r <= 5; $r++)
                                                @if(($product->ratings_info->avg_ratings ?? 0) >= $r)
                                                    <i class="fa-solid fa-star active"></i>
                                                @else
                                                    <i class="fa-solid fa-star"></i>
                                                @endif
                                            @endfor
                                            <span class="rate_txt ms-1">
                                                ({{ __('products::products.reviews_count', ['count' => $product->ratings_info->ratings_count ?? 0]) }})
                                            </span>
                                        </div>
                                    </div>

                                    <div class="py-3 d-flex align-items-center justify-content-between mb-4">
                                        <div class="price_box d-flex align-items-end">
                                            <span class="color-primary">  <b> {{ $productPriceCurrency }} </b> <img src="{{asset('assets/web/images/sar.png')}}" class="sar filtePrimary" alt=""/> </span>
                                            @if($product->discount_percentage > 0)
                                                <span class="prev_price ms-3"> {{ $productPrice2Currency }} <img src="{{asset('assets/web/images/sar.png')}}" class="sar filterGray" alt=""/> </span>
                                            @endif
                                        </div>
                                        @if($product->discount_percentage > 0)
                                            <span
                                                class="badge offer_badge">
                                            {{ __('products::products.off_percentage', ['percent' => $product->discount_percentage]) }}
                                        </span>
                                        @endif
                                    </div>

                                    <div class="p">
                                        {!! $product->currentDescription->description ?? "" !!}
                                    </div>

                                    {{-- <a href="javascript:;"
                                       data-id="{{ $product->id }}"
                                       class="icon add_to_favorites {{ $product->isFavoritedBy(auth()->user()) ? 'active' : '' }}"
                                       aria-colspan="item">
                                        <i class="fal fa-heart"></i>
                                    </a> --}}

                                    <button type="submit" class="butn primary_butn mt-5 px-5">
                                        <span>
                                            <i class="fa-regular fa-cart-shopping ms-1"></i>
                                            {{ __('products::products.add_to_cart') }}
                                        </span>
                                    </button>
                                </div>
                                <input type="hidden" name="product_id" value="{{ $product->id }}"/>
                                {{-- $cartData['cartItems'][md5($product->id)]['qty'] ?? 0 --}}
                                <input type="hidden" name="qty" value="1" class="input-qty"/>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="inner mt-5">
                    <div class="rates_body">
                        <div class="row gx-0">
                            <div class="col-lg-4">
                                <div class="rates_r pe-lg-5 h-100">
                                    <h2 class="fs-4 fw-bold"> {{ __('products::products.overall_rating') }} </h2>
                                    <h3 class="fw-bold">{{ $product->ratings_info->avg_ratings ?? 0 }}</h3>
                                    <div class="stars">
                                        @for($r = 1; $r <= 5; $r++)
                                            @if(($product->ratings_info->avg_ratings ?? 0) >= $r)
                                                <i class="fa-solid fa-star active"></i>
                                            @else
                                                <i class="fa-solid fa-star"></i>
                                            @endif
                                        @endfor
                                        <span class="num_rates ms-3">
                                            {{ __('products::products.based_on_reviews', ['count' => $product->ratings_info->ratings_count ?? 0]) }}
                                        </span>
                                    </div>

                                    <div class="stars_progress my-5">
                                        @foreach($ratingsDetails as $ratingDetail)
                                            <div class="item d-flex align-items-center justify-content-between">
                                                <div class="star">
                                                    <span class="fs-4 me-1">{{ $ratingDetail['star'] }}</span>
                                                    <i class="fa-solid fa-star"></i>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar"
                                                         role="progressbar"
                                                         style="width: {{ $ratingDetail['percent'] }}%"
                                                         aria-valuenow="{{ $ratingDetail['percent'] }}"
                                                         aria-valuemin="0"
                                                         aria-valuemax="100"></div>
                                                </div>
                                                <div class="progress_num">{{ $ratingDetail['percent'] }}%</div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="faq_items mt-5">
                                        @php
                                            $sectionClass = ['mb-4', 'mb-0'];
                                        @endphp
                                        @for($i = 0; $i <= 1; $i++)
                                            <div class="item {{ $sectionClass[$i] ?? 'mb-0' }}">
                                                <h4 class="title fw-bold color-dark mb-1">
                                                    <i class="fa-light fa-star me-2"></i>
                                                    {{ __("products::products.faq_{$i}_question") }}
                                                </h4>
                                                <div class="p">{{ __("products::products.faq_{$i}_answer") }}</div>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8">
                                <div class="rates_l">
                                    <div class="head_rates_l border-bottom-0">
                                        <div class="row justify-content-between align-items-center">
                                            <div class="col-lg-3">
                                                <h3 class="fw-bold">
                                                    {{ __('products::products.ratings') }}
                                                </h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="">
                                        @if($ratings->isNotEmpty())
                                            @foreach($ratings as $rating)
                                                <div class="review_item">
                                                    <div class="prof_data d-flex align-items-center mb-3">
                                                        <img src="{{getImage($rating->owner->photo ?? "")}}"
                                                             class="avatar"
                                                             alt="{{ $rating->owner->name ?? $rating->owner->username ?? "" }}"/>
                                                        <div class="txt">
                                                            <h6 class="name fw-bold mb-1">
                                                                {{ $rating->owner->name ?? $rating->owner->username ?? "" }}
                                                            </h6>
                                                            <div class="rating">
                                                                @for($r = 1; $r <= 5; $r++)
                                                                    @if($rating->rating >= $r)
                                                                        <i class="fas fa-star active"></i>
                                                                    @else
                                                                        <i class="fas fa-star"></i>
                                                                    @endif
                                                                @endfor
                                                                <span
                                                                    class="date ms-2">{{ $rating->formatted_created_at }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p class="review_det">{{ $rating->comment }}</p>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="col-lg-12">
                                                <div
                                                    class="alert alert-info text-center">
                                                    {{ __('ratings::ratings.no_ratings') }}
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    @if($canBeRated)
                                        <a href="javascript:void(0);"
                                           class="butn primary_butn mx-auto mt-5"
                                           data-bs-toggle="modal"
                                           data-bs-target="#modal-rate">
                                            <span>
                                                <i class="fal fa-star me-1"></i>
                                                {{ __('products::products.write_review') }}
                                                <i class="fal fa-star ms-1"></i>
                                            </span>
                                        </a>
                                    @endif

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

    @if($canBeRated)
        <!-- Modal -->
        <div class="modal fade modal-rate"
             id="modal-rate"
             tabindex="-1"
             aria-labelledby="exampleModalLabel"
             role="dialog"
             aria-modal="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content p-2">
                    <button type="button" class="btn-close small" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="modal-body p-0">
                        <div class="mod-content p-4">
                            <div class="text-center">
                                <small class="color-primary"> {{ __('products::products.share_experience') }} </small>
                                <h6 class="mt-2"> {{ __('products::products.leave_impact_when_review') }} </h6>
                            </div>
                            <form action="{{ route('web.ratings.store') }}" method="post" class="form">
                                @csrf
                                <div class="stars-content">
                                    <div class="star-rating">
                                        <input type="radio" id="5-stars" name="rating" value="5"/>
                                        <label for="5-stars" class="star"><i class="fas fa-star"></i></label>
                                        <input type="radio" id="4-stars" name="rating" value="4"/>
                                        <label for="4-stars" class="star"><i class="fas fa-star"></i></label>
                                        <input type="radio" id="3-stars" name="rating" value="3"/>
                                        <label for="3-stars" class="star"><i class="fas fa-star"></i></label>
                                        <input type="radio" id="2-stars" name="rating" value="2"/>
                                        <label for="2-stars" class="star"><i class="fas fa-star"></i></label>
                                        <input type="radio" id="1-star" name="rating" value="1"/>
                                        <label for="1-star" class="star"><i class="fas fa-star"></i></label>
                                    </div>
                                </div>
                                <div class="form-group">
                                <textarea name="comment"
                                          rows="5"
                                          required
                                          placeholder="{{ __('main.write_here') }}"
                                          class="form-control p-4 {{ $errors->has('comment') ? 'is-invalid' : '' }}"
                                >{{ old('comment') }}</textarea>
                                </div>
                                <div class="text-center mt-4">
                                    <button type="submit" class="butn primary_butn px-5 mx-auto">
                                        <span> {{ __('products::products.add_your_review') }} </span>
                                    </button>
                                </div>
                                <input type="hidden" name="item_id" value="{{ $product->id }}"/>
                                <input type="hidden" name="type" value="product"/>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection

@push('stack_scripts')
    <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>
@endpush