@extends('frontend::layouts.master')

@section('title')
    <title>
        {{ $product?->title }}</title>
    <meta name="title" content="{{ $product?->title }}" />
    <meta name="description" content="{{ strip_tags($product?->description) }}" />
    <meta name="keywords" content="{{ strip_tags($product?->keywords) }}" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:title" content="{{ $product?->getSeoMeta('title') ?? $product?->title }}">
    <meta property="og:description" content="{{ $product?->getSeoMeta('description') ?? strip_tags($product?->excerpt) }}">
    <meta property="og:image" content="{{ getContentMediaWithFallback($product, 'featured') ?: siteLogo() }}">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ url()->current() }}">
    <meta property="twitter:title" content="{{ $product?->getSeoMeta('title') ?? $product?->title }}">
    <meta property="twitter:description"
        content="{{ $product?->getSeoMeta('description') ?? strip_tags($product?->excerpt) }}">
    <meta property="twitter:image" content="{{ getContentMediaWithFallback($product, 'featured') ?: siteLogo() }}">
@endsection

@push('style')
    <link rel="stylesheet" href="{{ asset('frontend/assets/css/shop.css') }}">
    <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
@endpush

@section('content')
    <!-- main-area -->
    <main class="fix">

        <x-frontend::breadcrumb>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('shop') }}">Shop</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $product->title }}</li>
            </ol>
        </x-frontend::breadcrumb>

        <!-- tg-shop-details-area-start -->
        <div class="tg-shop-details-area pt-130 pb-35">
            <div class="container">
                <div class="row">
                    <div class="col-xl-5 col-lg-6">
                        <div class="posty-tab-slider mb-40" data-aos="fade-up" data-aos-duration="800">
                            @if ($product->getMedia('gallery')->count() > 0)
                                <div class="posty-tabs-container">
                                    <div class="posty-tabs-wrapper">
                                        @foreach ($product->getMedia('gallery') as $gallery)
                                            <div id="item{{ $loop->index + 1 }}" class="tabContent">
                                                <img src="{{ $gallery->getUrl('thumb') }}" alt="Image">
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <ul class="posty-tabs-menu">
                                    @foreach ($product->getMedia('gallery') as $gallery)
                                        <li @class(['active' => $loop->first])>
                                            <a href="#item{{ $loop->index + 1 }}">
                                                <img src="{{ $gallery->getUrl('thumb') }}" alt="Image">
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            @else
                                <div class="posty-tabs-container">
                                    <div class="posty-tabs-wrapper">
                                        <div id="item1" class="tabContent active">
                                            <img src="{{ getContentMediaWithFallback($product, 'featured') ?: asset('backend/assets/img/product/default-product.jpg') }}"
                                                alt="{{ $product->title }}">
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-xl-7 col-lg-6">
                        <div class="tg-product-details-wrapper ml-55 mr-115 mb-40">
                            <h3 class="tg-product-details-title mb-2">
                                {{ $product->title }}
                            </h3>
                            <div class="tg-product-details-rating mb-20 d-flex align-items-center">
                                <div class="tg-shop-product-ratings">
                                    @include('frontend::components.avg-ratting', [
                                        'rating' => $product->approved_reviews_avg_ratting,
                                        'class' => 'd-flex list-unstyled',
                                    ])
                                </div>
                                <div class="tg-product-details-rating-count">
                                    <span>( {{ __($product->approved_reviews_count) }}
                                        {{ $product->approved_reviews_count > 1 ? 'Reviews' : 'Review' }}
                                        )</span>

                                    @auth
                                        <a href="javascript:void(0);" id="write-review-link">I Write a Review</a>
                                    @endauth

                                </div>
                            </div>
                            <div class="tg-product-details-price">
                                <div class="mb-10 display-price">
                                    {!! $product->getDisplayPrice() !!}
                                </div>
                            </div>
                            <div class="tg-product-details-availability mb-20">
                                <span class="availability">Availability:</span>
                                <span class="stock">
                                    @if ($product->getMeta('stock_status') == 'instock')
                                        In Stock
                                    @elseif ($product->getMeta('stock_status') == 'outofstock')
                                        Out of Stock
                                    @elseif ($product->getMeta('stock_status') == 'backorder')
                                        On Backorder
                                    @endif
                                </span>
                            </div>
                            <div class="tg-product-details-para mb-20">
                                {!! $product->excerpt !!}
                            </div>

                            <div class="tg-product-details-quantity mb-30">
                                <span class="quantity mb-1 d-inline-block">Quantity</span>
                                <div class="tg-booking-quantity-item">
                                    <span class="decrement">
                                        <svg width="14" height="2" viewBox="0 0 14 2" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M1 1H13" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                    <input class="tg-quantity-input" type="text"
                                        value="{{ $product?->myCart?->quantity ?? 1 }}">
                                    <span class="increment">
                                        <svg width="15" height="14" viewBox="0 0 15 14" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M1.21924 7H13.3836" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M7.30176 13V1" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                </div>
                            </div>

                            <div class="tg-product-details-button mb-25">
                                <a @class([
                                    'btn btn-two btn-sm mb-10 add_to_cart',
                                    'added' => $product->my_cart_exists == 1,
                                ]) title="Add to cart" href="javascript:void(0)"
                                    data-id="{{ $product->id }}" data-type="product"
                                    data-url="{{ route('add-to-cart') }}" data-quantity="1">
                                    <span class="me-2">
                                        <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M1.16699 1.66669H4.72255L7.10477 13.5689C7.18605 13.9782 7.40869 14.3458 7.7337 14.6074C8.05871 14.869 8.46539 15.008 8.88255 15H17.5225C17.9397 15.008 18.3464 14.869 18.6714 14.6074C18.9964 14.3458 19.219 13.9782 19.3003 13.5689L20.7225 6.11113H5.61144M9.16699 19.4445C9.16699 19.9354 8.76902 20.3334 8.2781 20.3334C7.78718 20.3334 7.38921 19.9354 7.38921 19.4445C7.38921 18.9535 7.78718 18.5556 8.2781 18.5556C8.76902 18.5556 9.16699 18.9535 9.16699 19.4445ZM18.9448 19.4445C18.9448 19.9354 18.5468 20.3334 18.0559 20.3334C17.565 20.3334 17.167 19.9354 17.167 19.4445C17.167 18.9535 17.565 18.5556 18.0559 18.5556C18.5468 18.5556 18.9448 18.9535 18.9448 19.4445Z"
                                                stroke="white" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                    <span class="cart_text text-white">
                                        {{ $product->my_cart_exists == 1 ? 'Remove form cart' : 'Add To Cart' }}
                                    </span>
                                </a>
                                <a href="javascript:void(0)" @class([
                                    'btn btn-two btn-sm btn-transparent mb-10 add_to_wishlist',
                                    'added' => $product->my_wishlist_exists == 1,
                                ]) data-id="{{ $product->id }}"
                                    data-type="product" href="javascript:void(0)"
                                    data-url="{{ route('add-to-wishlist') }}"
                                    title="{{ $product->my_wishlist_exists == 1 ? 'Remove from wishlist' : 'Add to wishlist' }}">
                                    <span class="me-2">
                                        <svg width="18" height="22" viewBox="0 0 20 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M17.7579 2.41452C17.3097 1.96607 16.7775 1.61034 16.1917 1.36763C15.606 1.12492 14.9781 1 14.3441 1C13.71 1 13.0822 1.12492 12.4965 1.36763C11.9107 1.61034 11.3785 1.96607 10.9303 2.41452L10 3.34476L9.06979 2.41452C8.16439 1.50912 6.93641 1.00047 5.65598 1.00047C4.37555 1.00047 3.14757 1.50912 2.24217 2.41452C1.33677 3.31992 0.828125 4.5479 0.828125 5.82833C0.828125 7.10875 1.33677 8.33674 2.24217 9.24214L10 17L17.7579 9.24214C18.2063 8.79391 18.5621 8.26171 18.8048 7.67596C19.0475 7.0902 19.1724 6.46237 19.1724 5.82833C19.1724 5.19428 19.0475 4.56645 18.8048 3.9807C18.5621 3.39494 18.2063 2.86275 17.7579 2.41452Z"
                                                stroke="#000" stroke-width="1.4" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                    <div class="wishlist_text">
                                        {{ $product->my_wishlist_exists == 1 ? 'Remove from wishlist' : 'Add to wishlist' }}
                                    </div>
                                </a>
                            </div>
                            <div class="tg-product-details-share">
                                <span>Social Share:</span>

                                @php
                                    $productUrl = route('product.detail', $product->slug);
                                    $productTitle = $product->title;
                                    $productDescription = $product->except ?? 'Check out this amazing product!';
                                    $productImage = getContentMediaWithFallback($product, 'featured') ?: siteLogo();
                                    $encodedUrl = urlencode($productUrl);
                                    $encodedTitle = urlencode($productTitle);
                                    $encodedDescription = urlencode($productDescription);
                                    $encodedImage = urlencode($productImage);
                                @endphp

                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ $encodedUrl }}"
                                    target="_blank" rel="noopener noreferrer" class="social-btn facebook-btn"
                                    title="Share on Facebook">
                                    <i class="fab fa-facebook-f"></i>
                                </a>

                                <!-- Twitter/X -->
                                <a href="https://twitter.com/intent/tweet?url={{ $encodedUrl }}&text={{ $encodedTitle }}&via=YourTwitterHandle"
                                    target="_blank" rel="noopener noreferrer" class="social-btn twitter-btn"
                                    title="Share on Twitter">
                                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M9.33161 6.77486L15.1688 0H13.7856L8.71722 5.8826L4.66907 0H0L6.12155 8.89546L0 16H1.38336L6.73581 9.78785L11.0109 16H15.68L9.33148 6.77486H9.33187H9.33161ZM7.43696 8.97374L6.81669 8.088L1.88171 1.03969H4.00634L7.98902 6.72789L8.60929 7.61362L13.7863 15.0074H11.6616L7.43709 8.974V8.97361L7.43696 8.97374Z"
                                            fill="currentColor" />
                                    </svg>
                                </a>

                                <!-- LinkedIn -->
                                <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $encodedUrl }}&title={{ $encodedTitle }}&summary={{ $encodedDescription }}"
                                    target="_blank" rel="noopener noreferrer" class="social-btn linkedin-btn"
                                    title="Share on LinkedIn">
                                    <i class="fab fa-linkedin-in"></i>
                                </a>

                                <!-- Pinterest -->
                                <a href="https://pinterest.com/pin/create/button/?url={{ $encodedUrl }}&media={{ $encodedImage }}&description={{ $encodedTitle }}"
                                    target="_blank" rel="noopener noreferrer" class="social-btn pinterest-btn"
                                    title="Share on Pinterest">
                                    <i class="fab fa-pinterest-p"></i>
                                </a>

                                <!-- WhatsApp -->
                                <a href="https://wa.me/?text={{ $encodedTitle }}%20{{ $encodedUrl }}" target="_blank"
                                    rel="noopener noreferrer" class="social-btn whatsapp-btn" title="Share on WhatsApp">
                                    <i class="fab fa-whatsapp"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- tg-shop-details-area-end -->

        <!-- product details tab area start -->
        <section class="tg-product-details-tab-area pb-120">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="tg-product-details-tab-nav mb-25">
                            <div class="tg-product-details-tab-nav-inner nav cm-tab-menu d-flex c-relative flex-wrap"
                                id="nav-tab-info" role="tablist">
                                <button class="nav-link active" id="nav-desc-tab" data-bs-toggle="tab"
                                    data-bs-target="#nav-desc" type="button" role="tab" aria-controls="nav-desc"
                                    aria-selected="true">Product Description</button>
                                <button class="nav-link" id="nav-review-tab" data-bs-toggle="tab"
                                    data-bs-target="#nav-review" type="button" role="tab"
                                    aria-controls="nav-review" aria-selected="false">({{ $product_review_count }})
                                    @if ($product_review_count == 1)
                                        Review
                                    @else
                                        Reviews
                                    @endif
                                </button>
                            </div>
                        </div>
                        <div class="product__details-tab-content">
                            <div class="tab-content" id="nav-tabContent-info">
                                <div class="tab-pane fade show active" id="nav-desc" role="tabpanel"
                                    aria-labelledby="nav-desc-tab">
                                    <div class="tg-product-details-description-content editor-content">
                                        {!! $product->content !!}
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="nav-review" role="tabpanel"
                                    aria-labelledby="nav-review-tab">
                                    <div class="tg-product-details-review">
                                        <div class="row">
                                            <div class="col-xl-9">
                                                <div class="tg-product-details-inner">
                                                    <div class="tg-tour-about-review-wrap mb-4">
                                                        <h4 class="tg-tour-about-title mb-15">Customer Reviews</h4>
                                                        <p class="mb-0">Here are the reviews for this product</p>
                                                    </div>

                                                    <div class="tg-tour-about-border mb-35"></div>

                                                    @include('frontend::product.product-review-list')

                                                    <div class="tg-tour-about-review-form-wrap mt-5"
                                                        x-data="reviewForm()">
                                                        <h4 class="tg-tour-about-title mb-15">
                                                            Write a Review
                                                        </h4>
                                                        <div class="tg-tour-about-rating-category mb-10">
                                                            <ul class="ms-0">
                                                                <li class="mb-0 align-items-center gap-3">
                                                                    <label>Ratings: </label>
                                                                    <div class="rating-icon">
                                                                        <template x-for="star in 5" :key="star">
                                                                            <i class="fas fa-star"
                                                                                :class="{
                                                                                    'active': star <= selectedRating,
                                                                                    'hovered': star <= hoveredRating &&
                                                                                        hoveredRating > 0
                                                                                }"
                                                                                @click="setRating(star)"
                                                                                @mouseenter="hoveredRating = star"
                                                                                @mouseleave="hoveredRating = 0">
                                                                            </i>
                                                                        </template>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                        <!-- Selected rating output (optional) -->
                                                        <p class="selected-rating mt-2">
                                                            Selected Rating: <span x-text="selectedRating"></span>/5
                                                        </p>

                                                        <div class="tg-tour-about-review-form">
                                                            <form class="write_review_box_form comment-form"
                                                                @submit.prevent="submitReview" id="review-form">
                                                                @csrf

                                                                <div class="form-grp">
                                                                    <div class="form-grp">
                                                                        <textarea name="review_text" placeholder="Write your review" x-model="review_text"></textarea>
                                                                    </div>

                                                                    <button type="submit" class="btn btn-two"
                                                                        x-bind:disabled="loading">
                                                                        <span x-cloak x-show="!loading">Submit
                                                                            Review</span>
                                                                        <span x-cloak x-show="loading">Submit...</span>
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- product details tab area end -->

        <!-- newsletter-area -->
        @include('frontend::components.newsletter_area')
        <!-- newsletter-area-end -->

    </main>
    <!-- main-area-end -->
@endsection

@push('script')
    <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
    <script src="{{ asset('frontend/assets/js/tabs-slider.js') }}"></script>
    <script src="{{ asset('frontend/assets/js/cart.js') }}"></script>

    <script>
        (function($) {
            "use strict";

            AOS.init();

            $('.decrement').on('click', function() {
                var $input = $(this).parent().find('input');
                var count = parseInt($input.val()) - 1;
                count = count < 1 ? 1 : count;
                $input.val(count);
                $input.change();
                return false;
            });

            $('.increment').on('click', function() {
                var $input = $(this).parent().find('input');
                $input.val(parseInt($input.val()) + 1);
                $input.change();
                return false;
            });

        })(jQuery);

        document.getElementById('write-review-link').addEventListener('click', function() {
            const tabButton = document.getElementById('nav-review-tab');
            const reviewTabContent = document.getElementById('nav-review');

            if (tabButton && reviewTabContent) {
                // Activate tab
                tabButton.click();

                // Scroll to tab content smoothly
                setTimeout(() => {
                    reviewTabContent.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }, 300); // Small delay to allow tab switch
            }
        });

        function reviewForm() {
            return {
                selectedRating: 0,
                hoveredRating: 0,
                review_text: '',
                loading: false,

                setRating(rating) {
                    this.selectedRating = rating;
                },

                submitReview() {
                    this.loading = true;

                    $.ajax({
                        url: "{{ route('product.review.submit', $product->id) }}",
                        method: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({
                            review_text: this.review_text,
                            rating: this.selectedRating,
                        }),
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                'content')
                        },
                        success: (data) => {
                            if (data.success === false) {
                                toastr.error(data.message || 'Failed to submit.');
                            } else if (data.success === true) {
                                toastr.success(data.message || 'Review submitted!');
                                this.review_text = '';
                                this.selectedRating = 0;
                            }
                        },
                        error: (xhr) => {
                            const message = xhr.responseJSON?.message || 'Something went wrong.';
                            toastr.error(message);
                        },
                        complete: () => {
                            this.loading = false;
                        }
                    });
                }
            }
        }
    </script>
@endpush