@extends('site.layout.layout')

@if($product)

    @if($product->sale_status != 1)

        @section('title',__('Used Product Details'))

        @section('content')
            <main class="product_details_page py-2">
                <!-- ------- breadcrumb ---------- -->
                <nav aria-label="breadcrumb" class="py-2 px-3 px-lg-4">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ route('home') }}"><i class="fas fa-arrow-right-long"></i> {{ __('Home') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('Site.UsedProducts') }}"> {{ __('Used products') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"> {{ __('Product details') }}</li>
                    </ol>
                </nav>
                <section class="row py-2 px-3 px-lg-4">
                    <div class="col-lg-6">
                        <div class="product_container">
                            <div id="slidesWrapper" class="px-4"></div>
                            <div class="d-flex align-items-center my-3" id="thumbnailsWrapper"></div>
                        </div>
                    </div>
                    <div class="product_info col-lg-6">
                        <p>{{ __('Brand') }} {{ $product->subCategory?->getTranslation('title',app()->getLocale()) }}</p>
                        <h3 class="section_title my-3"> {{ $product->getTranslation('title',app()->getLocale()) }}</h3>
                                                <p><img src="{{ asset("site/img/{$rating}stars.png") }}" alt="" style="margin-bottom: 3px;"> <span>{{ __('Reviews') }} ( {{ number_format($product->reviews?->avg('rating'),2) ?? 0 }} )</span> </p>
                        <h4 class="my-3">{{ $product->product_net_price }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h4>
                        <h5>{{ __('Seller') }}</h5>
                        <div class="info_card my-3">
                            <figure class="d-flex align-items-start">
                                <div class="figure_container">
                                    @php
                                        $logoUrl = $product->store?->logo && Storage::disk('public')->exists($product->store?->logo)
                                                    ? Storage::disk('public')->url($product->store?->logo)
                                                    : asset('site/img/stores/default.png');
                                    @endphp
                                    <img src="{{ $logoUrl }}" class="img-fluid" alt="">
                                </div>
                                <figcaption class="mx-2">
                                    <h5 class="mb-1">{{ $product->store?->getTranslation('title',app()->getLocale()) }}</h5>
                                                                        <p><img src="{{ asset("site/img/{$storeRating}stars.png") }}" alt=""> <span>( {{ number_format($product->store?->reviews?->avg('rating'),2) ?? 0 }} )</span> </p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="buttons justify-content-between my-2">
                            <button type="button" class="primaryBgBtn w-100 @if(app()->getLocale() == 'en') me-2 @else ms-2 @endif" onclick="handleFavAndCart(event,'cart',{{ $product->id }})" id="cart{{ $product->id }}">
                                <img src="{{ asset('site/img/light/buy-icon.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/buy-icon.png') }}" data-dark="{{ asset('site/img/dark/buy-icon.png') }}" alt=""> {{ __('Add to cart') }}
                            </button>
                            <button type="button" class="favBtn" onclick="handleFavAndCart(event,'fav',{{ $product->id }})">
                                @if($product->myFavorite)
                                    <i class="fas fa-heart text-danger" id="fav{{ $product->id }}"></i>
                                @else
                                    <i class="far fa-heart" id="fav{{ $product->id }}"></i>
                                @endif
                            </button>
                        </div>
                        <div class="product_benifits">
                            <figure class="d-flex py-3">
                                <div><img src="{{ asset('site/img/light/Feature Icon.png') }}" class="mode_icon img-fluid" data-light="{{ asset('site/img/light/Feature Icon.png') }}" data-dark="{{ asset('site/img/dark/Feature Icon.png') }}" alt=""></div>
                                <figcaption class="mx-3">
                                    <h6> {{ __('Fast shipping') }}</h6>
                                    <p> {{ __('Fast and easy delivery ensures your order arrives as quickly as possible.') }}</p>
                                </figcaption>
                            </figure>
                            <figure class="d-flex py-3">
                                <div><img src="{{ asset('site/img/light/security-card.png') }}" class="mode_icon img-fluid" data-light="{{ asset('site/img/light/security-card.png') }}" data-dark="{{ asset('site/img/dark/security-card.png') }}" alt=""></div>
                                <figcaption class="mx-3">
                                    <h6> {{ __('Secure payment') }}</h6>
                                    <p> {{ __('Reliable and easy payment process') }}</p>
                                </figcaption>
                            </figure>
                            <figure class="d-flex py-3">
                                <div><img src="{{ asset('site/img/light/recovery-convert.png') }}" class="mode_icon img-fluid" data-light="{{ asset('site/img/light/recovery-convert.png') }}" data-dark="{{ asset('site/img/dark/recovery-convert.png') }}" alt=""></div>
                                <figcaption class="mx-3">
                                    <h6> {{ __('Free returns') }}</h6>
                                    <p> {{ __('Free return service') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </section>
                <section class="py-2 px-3 px-lg-4 mb-5">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-sm-4 active" id="productDetailsTab" data-bs-toggle="tab" data-bs-target="#productDetailsTabPane"
                                type="button" role="tab" aria-controls="productDetailsTabPane" aria-selected="true">{{ __('Product details') }}</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-sm-4" id="sellerRankingTab" data-bs-toggle="tab" data-bs-target="#sellerRankingTabPane"
                                type="button" role="tab" aria-controls="sellerRankingTabPane" aria-selected="false"> {{ __('Product Reviews') }}</button>
                        </li>
                    </ul>
                    <div class="tab-content py-4 px-3">
                        <div class="tab-pane fade show active" id="productDetailsTabPane" role="tabpanel" aria-labelledby="productDetailsTab" tabindex="0">
                            <p> {{ $product->getTranslation('description',app()->getLocale()) }} </p>
                            @if($product->features)
                                <br>
                                @foreach(json_decode($product->features) ?? [] as $key => $feature)
                                    <p>{{ $key }} : {{ $feature }}</p>
                                @endforeach
                            @endif
                        </div>
                        <div class="tab-pane fade" id="sellerRankingTabPane" role="tabpanel" aria-labelledby="sellerRankingTab" tabindex="0">
                            @forelse($product->reviews ?? [] as $review)
                                                                <div class="info_card my-3">
                                    <figure class="d-flex align-items-start">
                                        <div class="figure_container">
                                            @php
                                                $userLogo = $review->user?->image && Storage::disk('public')->exists($review->user?->image)
                                                            ? Storage::disk('public')->url($review->user?->image)
                                                            : asset('admin/authentication.png');
                                            @endphp
                                            <img src="{{ $userLogo }}" class="img-fluid" alt="">
                                        </div>
                                        <figcaption class="mx-2">
                                            <h5 class="mb-1">{{ $review->comment }}</h5>
                                            <p><img src="{{ asset("site/img/{$productRating}stars.png") }}" alt=""> <span>( {{ $review->rating }} )</span> </p>
                                        </figcaption>
                                    </figure>
                                </div>
                            @empty
                                <div class="no_results fit_height_center justify-content-center">
                                    <i class="fas fa-star-half-alt bounce_icon"></i>
                                    <h2 class="text-center w-100 pt-3"> {{ __('There are no reviews to display.') }}</h2>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </section>
            </main>
        @endsection

        @push('scripts')
            <script>
                const images = @json($product->images->map(function($img) {
                    return [
                        'src' => Storage::disk('public')->url($img->image),
                        'alt' => '',
                    ];
                }));

                const slidesWrapper = document.getElementById("slidesWrapper");
                const thumbnailsWrapper = document.getElementById("thumbnailsWrapper");

                images.forEach((img, i) => {
                    slidesWrapper.innerHTML += `
                    <div class="mySlides" style="display: ${i === 0 ? 'flex' : 'none'};">
                        <img src="${img.src}" alt="${img.alt}" class="img-fluid">
                    </div>`;

                    thumbnailsWrapper.innerHTML += `
                    <div class="column mx-1 cursor${i === 0 ? ' active' : ''}" onclick="currentSlide(${i + 1})">
                        <img class="img-fluid demo ${i === 0 ? ' active' : ''}" src="${img.src}" alt="${img.alt}">
                    </div>`;
                });

                let slideIndex = 1;

                function currentSlide(n) {
                    showSlides(slideIndex = n);
                }

                function showSlides(n) {
                    const slides = document.querySelectorAll(".mySlides");
                    const dots = document.querySelectorAll(".demo");
                    const columns = document.querySelectorAll(".column");

                    if (n > slides.length) slideIndex = 1;
                    if (n < 1) slideIndex = slides.length;

                    slides.forEach((slide, i) => {
                        slide.style.display = i === slideIndex - 1 ? "flex" : "none";
                    });

                    dots.forEach((dot, i) => {
                        dot.classList.toggle("active", i === slideIndex - 1);
                    });

                    columns.forEach((dot, i) => {
                        dot.classList.toggle("active", i === slideIndex - 1);
                    });
                }

            </script>
        @endpush

    @else

        @section('title',__('Product Details'))

        @section('content')
            <main class="product_details_page py-2">
                <!-- ------- breadcrumb ---------- -->
                <nav aria-label="breadcrumb" class="py-2 px-3 px-lg-4">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ route('home') }}"><i class="fas fa-arrow-right-long"></i> {{ __('Home') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('Site.NewProducts') }}"> {{ __('Products') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('Product details') }}</li>
                    </ol>
                </nav>
                <section class="row py-2 px-3 px-lg-4">
                    <div class="col-lg-6">
                        <div class="product_container">
                            <div id="slidesWrapper" class="px-4"></div>
                            <div class="d-flex align-items-center my-3" id="thumbnailsWrapper"></div>
                        </div>
                    </div>
                    <div class="product_info col-lg-6">
                        <p>{{ __('Brand') }} {{ $product->subCategory?->getTranslation('title',app()->getLocale()) }}</p>
                        <h3 class="section_title my-3">{{ $product->getTranslation('title',app()->getLocale()) }}</h3>
                                                <p><img src="{{ asset("site/img/{$rating}stars.png") }}" alt="" style="margin-bottom: 3px;"> <span>{{ __('Reviews') }} ( {{ number_format($product->reviews?->avg('rating'),2) ?? 0 }} )</span> </p>
                        <h4 class="my-3">{{ $product->product_net_price }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h4>
                        <!-- <h5>الإصدار: أبيض</h5>
                        <div class="info_card d-flex justify-content-between my-3">
                            <figure class="d-flex align-items-start">
                                <div class="figure_container">
                                    <img src="img/Product Image.png" class="img-fluid" alt="">
                                </div>
                                <figcaption class="mx-2">
                                    <h5>الأبيض</h5>
                                    <span class="in_stock"> متوفر في المخزون</span>
                                </figcaption>
                            </figure>
                            <button type="button" data-bs-toggle="modal" data-bs-target="#productColorsModal"
                                class="buttons align-items-center">
                                +10 المزيد <i class="fas fa-chevron-left mx-2"></i>
                            </button>
                        </div> -->
                        <div class="buttons justify-content-between my-2">
                            <button type="button" class="primaryBgBtn w-100 @if(app()->getLocale() == 'en') me-2 @else ms-2 @endif" onclick="handleFavAndCart(event,'cart',{{ $product->id }})" id="cart{{ $product->id }}">
                                <img src="{{ asset('site/img/light/buy-icon.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/buy-icon.png') }}" data-dark="{{ asset('site/img/dark/buy-icon.png') }}" alt=""> {{ __('Add to cart') }}
                            </button>
                            <button type="button" class="favBtn" onclick="handleFavAndCart(event,'fav',{{ $product->id }})">
                                @if($product->myFavorite)
                                    <i class="fas fa-heart text-danger" id="fav{{ $product->id }}"></i>
                                @else
                                    <i class="far fa-heart" id="fav{{ $product->id }}"></i>
                                @endif
                            </button>
                        </div>
                        <div class="product_benifits">
                            <figure class="d-flex py-3">
                                <div><img src="{{ asset('site/img/light/Feature Icon.png') }}" class="mode_icon img-fluid" data-light="{{ asset('site/img/light/Feature Icon.png') }}" data-dark="{{ asset('site/img/dark/Feature Icon.png') }}" alt=""></div>
                                <figcaption class="mx-3">
                                    <h6> {{ __('Fast shipping') }}</h6>
                                    <p> {{ __('Fast and easy delivery ensures your order arrives as quickly as possible.') }}</p>
                                </figcaption>
                            </figure>
                            <figure class="d-flex py-3">
                                <div><img src="{{ asset('site/img/light/security-card.png') }}" class="mode_icon img-fluid" data-light="{{ asset('site/img/light/security-card.png') }}" data-dark="{{ asset('site/img/dark/security-card.png') }}" alt=""></div>
                                <figcaption class="mx-3">
                                    <h6> {{ __('Secure payment') }}</h6>
                                    <p> {{ __('Reliable and easy payment process') }}</p>
                                </figcaption>
                            </figure>
                            <figure class="d-flex py-3">
                                <div><img src="{{ asset('site/img/light/recovery-convert.png') }}" class="mode_icon img-fluid" data-light="{{ asset('site/img/light/recovery-convert.png') }}" data-dark="{{ asset('site/img/dark/recovery-convert.png') }}" alt=""></div>
                                <figcaption class="mx-3">
                                    <h6> {{ __('Free returns') }}</h6>
                                    <p> {{ __('Free return service') }}</p>
                                </figcaption>
                            </figure>
                        </div>

                        <a href="{{ route('Site.StoresDetails',$product->store?->id) }}"
                            class="info_card bg-transparent d-flex justify-content-between align-items-center my-3">
                            <figure class="d-flex align-items-center">
                                <div class="figure_container">
                                    @php
                                        $logoUrl = $product->store?->logo && Storage::disk('public')->exists($product->store?->logo)
                                                    ? Storage::disk('public')->url($product->store?->logo)
                                                    : asset('site/img/stores/default.png');
                                    @endphp
                                    <img src="{{ $logoUrl }}" class="img-fluid" alt="">
                                </div>
                                <figcaption class="mx-2">
                                    <h5 class="mb-1">{{ $product->store?->getTranslation('title',app()->getLocale()) }}</h5>
                                                                        <p><img src="{{ asset("site/img/{$storeRating}stars.png") }}" alt=""> <span>( {{ number_format($product->store?->reviews?->avg('rating'),2) ?? 0 }} )</span> </p>
                                </figcaption>
                            </figure>
                            <i class="fas fa-chevron-left view"></i>
                        </a>

                        <!-- Modal -->
                        <div class="modal fade" id="productColorsModal" data-bs-backdrop="static" data-bs-keyboard="false"
                            tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="section_title " id="staticBackdropLabel">الإصدارات</h1>
                                        <button type="button" data-bs-dismiss="modal" aria-label="Close"><i
                                                class="far fa-circle-xmark"></i></button>
                                    </div>
                                    <div class="modal-body">
                                        <form id="productColorsForm">
                                            <label for="white_color_input">
                                                <input type="radio" name="rating" class="select_color" id="white_color_input"
                                                    value="white_color" />
                                                <div class="info_card my-3">
                                                    <figure class="d-flex align-items-start">
                                                        <div class="figure_container">
                                                            <img src="img/Product Image.png" class="img-fluid" alt="">
                                                        </div>
                                                        <figcaption class="mx-2">
                                                            <h5>الأبيض</h5>
                                                            <span class="in_stock"> متوفر في المخزون</span>
                                                        </figcaption>
                                                    </figure>
                                                </div>
                                            </label>
                                            <label for="red_color_input">
                                                <input type="radio" name="rating" class="select_color" id="red_color_input"
                                                    value="red_color" />
                                                <div class="info_card my-3">
                                                    <figure class="d-flex align-items-start">
                                                        <div class="figure_container">
                                                            <img src="img/Product Image.png" class="img-fluid" alt="">
                                                        </div>
                                                        <figcaption class="mx-2">
                                                            <h5>الأحمر</h5>
                                                            <span class="out_of_stock"> نفد المخزون</span>
                                                        </figcaption>
                                                    </figure>
                                                </div>
                                            </label>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="py-2 px-3 px-lg-4 mb-5">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-sm-4 active" id="productDetailsTab" data-bs-toggle="tab" data-bs-target="#productDetailsTabPane"
                                type="button" role="tab" aria-controls="productDetailsTabPane" aria-selected="true">{{ __('Product details') }}</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-sm-4" id="productFeaturesTab" data-bs-toggle="tab" data-bs-target="#productFeaturesTabPane"
                                type="button" role="tab" aria-controls="productFeaturesTabPane" aria-selected="false">{{ __('Product features') }}</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-sm-4" id="productRankingTab" data-bs-toggle="tab" data-bs-target="#productRankingTabPane"
                                type="button" role="tab" aria-controls="productRankingTabPane" aria-selected="false">{{ __('Product Reviews') }}</button>
                        </li>
                    </ul>
                    <div class="tab-content py-4 px-3">
                        <div class="tab-pane fade show active" id="productDetailsTabPane" role="tabpanel" aria-labelledby="productDetailsTab"
                            tabindex="0">
                            <p> {{ $product->getTranslation('description',app()->getLocale()) }} </p>
                        </div>
                        <div class="tab-pane fade" id="productFeaturesTabPane" role="tabpanel" aria-labelledby="productFeaturesTab" tabindex="0">
                            @if($product->features)
                                <br>
                                @foreach(json_decode($product->features) ?? [] as $key => $feature)
                                    <p>{{ $key }} : {{ $feature }}</p>
                                @endforeach
                            @else
                            <div class="no_results fit_height_center justify-content-center">
                                <i class="fas fa-store-alt bounce_icon"></i>
                                <h2 class="text-center w-100 pt-3"> {{ __('There are no features to display.') }}</h2>
                            </div>
                            @endif
                        </div>
                        <div class="tab-pane fade" id="productRankingTabPane" role="tabpanel" aria-labelledby="productRankingTab" tabindex="0">
                            @forelse($product->reviews ?? [] as $review)
                                                                <div class="info_card my-3">
                                    <figure class="d-flex align-items-start">
                                        <div class="figure_container">
                                            @php
                                                $userLogo = $review->user?->image && Storage::disk('public')->exists($review->user?->image)
                                                            ? Storage::disk('public')->url($review->user?->image)
                                                            : asset('admin/authentication.png');
                                            @endphp
                                            <img src="{{ $userLogo }}" class="img-fluid" alt="">
                                        </div>
                                        <figcaption class="mx-2">
                                            <h5 class="mb-1">{{ $review->comment }}</h5>
                                            <p><img src="{{ asset("site/img/{$productRating}stars.png") }}" alt=""> <span>( {{ $review->rating }} )</span> </p>
                                        </figcaption>
                                    </figure>
                                </div>
                            @empty
                                <div class="no_results fit_height_center justify-content-center">
                                    <i class="fas fa-star-half-alt bounce_icon"></i>
                                    <h2 class="text-center w-100 pt-3"> {{ __('There are no reviews to display.') }}</h2>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </section>
            </main>
        @endsection

        @push('scripts')
        <script>
            const images = @json($product->images->map(function($img) {
                return [
                    'src' => Storage::disk('public')->url($img->image),
                    'alt' => '',
                ];
            }));

            const slidesWrapper = document.getElementById("slidesWrapper");
            const thumbnailsWrapper = document.getElementById("thumbnailsWrapper");

            images.forEach((img, i) => {
                slidesWrapper.innerHTML += `
                <div class="mySlides" style="display: ${i === 0 ? 'block' : 'none'};">
                    <img src="${img.src}" alt="${img.alt}" class="img-fluid">
                </div>`;

                thumbnailsWrapper.innerHTML += `
                <div class="column mx-1 cursor${i === 0 ? ' active' : ''}" onclick="currentSlide(${i + 1})">
                    <img class="img-fluid demo ${i === 0 ? ' active' : ''}" src="${img.src}" alt="${img.alt}">
                </div>`;
            });

            let slideIndex = 1;

            function currentSlide(n) {
                showSlides(slideIndex = n);
            }

            function showSlides(n) {
                const slides = document.querySelectorAll(".mySlides");
                const dots = document.querySelectorAll(".demo");
                const columns = document.querySelectorAll(".column");

                if (n > slides.length) slideIndex = 1;
                if (n < 1) slideIndex = slides.length;

                slides.forEach((slide, i) => {
                    slide.style.display = i === slideIndex - 1 ? "block" : "none";
                });

                dots.forEach((dot, i) => {
                    dot.classList.toggle("active", i === slideIndex - 1);
                });

                columns.forEach((dot, i) => {
                    dot.classList.toggle("active", i === slideIndex - 1);
                });
            }

        </script>
        @endpush
        
    @endif

@else
    @section('content')
        <div class="no_results fit_height_center justify-content-center">
            <i class="fas fa-box-open bounce_icon"></i>
            <h2 class="text-center w-100 pt-3"> {{ __('There are no products to display.') }}</h2>
        </div>
    @endsection
@endif