@extends('site.layout.layout')

@if($product)
    @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.StoreProfile') }}"> {{ __('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 pb-5">
                <div class="col-lg-6 mb-3 mb-lg-0">
                    <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="col-lg-6 d-flex justify-content-between">
                    <div class="product_info">
                        <p>{{ __('Brand') }} {{ $product->subCategory?->getTranslation('title',app()->getLocale()) }}</p>
                        <h3 class="section_title my-3"> {{ $product->getTranslation('title',app()->getLocale()) }}</h3>
                        <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>

                        @php
                            $statusMap = [
                                0 => __('Not Active'),
                                1 => __('Active'),
                                2 => __('Pending'),
                                3 => __('Shipping in Progress'),
                                4 => __('Sold'),
                            ];

                            $greenStatuses = [1, 3];

                            $statusValue = $product->status ?? 0;
                            $statusText = $statusMap[$statusValue] ?? __('Unknown');
                            $statusClass = in_array($statusValue, $greenStatuses) ? 'green' : 'orange';
                        @endphp

                        <p class="order_status {{ $statusClass }} mb-4"> {{ $statusText }}</p>

                        <h6> {{ __('Product details') }}</h6>
                        <div class="info_card bg-transparent mt-2">
                            <figure class="d-flex align-items-center">
                                <div class="figure_container">
                                    <img src="{{ asset('site/img/light/box-frame.png') }}" class="mode_icon img-fluid" data-light="{{ asset('site/img/light/box-frame.png') }}" data-dark="{{ asset('site/img/dark/box-frame.png') }}" alt="">
                                </div>
                                <figcaption class="shopping_cart_page mx-2">
                                    <h5 class="desc"> {{ $product->getTranslation('description',app()->getLocale()) }} </h5>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="editBtn mx-2" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-gear"></i></button>
                        <ul class="dropdown-menu">
                            <li>
                                @if($product->status == 2)
                                    <button type="button" class="dropdown-item"><i class="fas fa-hourglass-half mx-1"></i> {{ __('Still under review.') }}</button>
                                @else
                                    @if($product->status != 1)
                                        <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#hideProductModal"><i class="far fa-eye mx-1"></i> {{ __('Displaying the product') }}</button>
                                    @else
                                        <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#hideProductModal"><i class="far fa-eye-slash mx-1"></i> {{ __('Stop displaying the product') }}</button>
                                    @endif
                                @endif
                            </li>
                            <li>
                                <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#deleteProductModal"><i class="far fa-trash-can mx-1"></i> {{ __('Delete the product') }}</button>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <!-- Modal -->
            <div class="modal fade" id="hideProductModal" 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 justify-content-end border-0 pb-0">
                            <button type="button" data-bs-dismiss="modal" aria-label="Close"><i class="far fa-circle-xmark"></i></button>
                        </div>
                        @if($product->status != 1)
                        <div class="modal-body figure_modal fit_height_start justify-content-center pb-5">
                            <img src="{{ asset('site/img/hide-img.png') }}" class="img-fluid" alt="">
                            <h2 class="section_title pt-5 pb-3"> {{ __('Displaying the product') }}</h2>
                            <h5> {{ __('Are you sure you want to display the product?') }}</h5>
                            <div class="row w-100 mt-4">
                                <div class="col-6 px-2">
                                    <button type="button" class="primaryBorderBtn w-100" data-bs-dismiss="modal" aria-label="Close">{{ __('Cancel') }}</button>
                                </div>
                                <div class="col-6 px-2">
                                    <a href="{{ route('Site.StoreProductsStatus', $product->id) }}" >
                                        <button type="button" class="primaryBgBtn w-100"> {{ __('Yes, display') }}</button>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="modal-body figure_modal fit_height_start justify-content-center pb-5">
                            <img src="{{ asset('site/img/hide-img.png') }}" class="img-fluid" alt="">
                            <h2 class="section_title pt-5 pb-3"> {{ __('Stop displaying the product') }}</h2>
                            <h5> {{ __('Are you sure you want to stop displaying the product?') }}</h5>
                            <div class="row w-100 mt-4">
                                <div class="col-6 px-2">
                                    <button type="button" class="primaryBorderBtn w-100" data-bs-dismiss="modal" aria-label="Close">{{ __('Cancel') }}</button>
                                </div>
                                <div class="col-6 px-2">
                                    <a href="{{ route('Site.StoreProductsStatus', $product->id) }}" >
                                        <button type="button" class="primaryBgBtn w-100"> {{ __('Yes, stop') }}</button>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="deleteProductModal" 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 justify-content-end border-0 pb-0">
                            <button type="button" data-bs-dismiss="modal" aria-label="Close"><i class="far fa-circle-xmark"></i></button>
                        </div>
                        <div class="modal-body figure_modal fit_height_start justify-content-center pb-5">
                            <img src="{{ asset('site/img/delete-img.png') }}" class="img-fluid" alt="">
                            <h2 class="section_title pt-5 pb-3"> {{ __('Delete the product') }}</h2>
                            <h5> {{ __('Do you want to permanently delete the product? This decision cannot be reversed.') }}</h5>
                            <div class="row w-100 mt-4">
                                <div class="col-6 px-2">
                                    <button type="button" class="primaryBorderBtn w-100" data-bs-dismiss="modal" aria-label="Close">{{ __('Cancel') }}</button>
                                </div>
                                <div class="col-6 px-2">
                                    <a href="{{ route('Site.StoreProductsDestroy', $product->id) }}" onclick="event.preventDefault(); document.getElementById('delete-product-{{ $product->id }}').submit();" >
                                        <button type="button" class="primaryBgBtn w-100"> {{ __('Yes, delete') }}</button>
                                    </a>
                                    <form id="delete-product-{{ $product->id }}" action="{{ route('Site.StoreProductsDestroy', $product->id) }}" method="POST" class="d-none">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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('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