@extends('frontend.layout.app')
@section('content')
    <div class="breadcumb-wrapper" data-bg-src="{{ asset('frontend/assets/img/breadcumb/breadcumb-bg_5.jpg') }}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Product Details</h1>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="{{ route('index') }}">Home</a></li>
                        <li>Product Details</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--==============================
                        Product Details
                        ==============================-->
    <section class="vs-product-wrapper product-details space-top space-extra-bottom">
        <div class="container">
            <div class="row gx-60">
                <div class="col-lg-6">
                    <div class="product-big-img vs-carousel" data-slide-show="1" data-fade="true"
                        data-asnavfor=".product-thumb-slide">
                        @if (!empty($products->images) && count($products->images))
                            @foreach ($products->images as $image)
                                <div class="img">
                                    <img src="{{ asset('storage/product/' . $image->images) }}" alt="Product Image">
                                </div>
                            @endforeach
                        @else
                            <div class="img">
                                <img src="{{ asset('assets/img/product/default.png') }}" alt="No Image Available">
                            </div>
                        @endif
                    </div>
                    <div class="product-thumb-slide row vs-carousel" data-slide-show="4" data-md-slide-show="4"
                        data-sm-slide-show="3" data-xs-slide-show="3" data-asnavfor=".product-big-img">
                        @if (!empty($products->images) && count($products->images))
                            @foreach ($products->images as $image)
                                <div class="col-3">
                                    <div class="thumb">
                                        <img src="{{ asset('storage/product/' . $image->images) }}" alt="Product Thumbnail">
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-3">
                                <div class="thumb">
                                    <img src="{{ asset('assets/img/product/default-thumb.png') }}"
                                        alt="No Thumbnail Available">
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-lg-6 align-self-center">
                    <div class="product-about">
                        <div class="product-title">
                            <h5>{{ $products->product_fullname }}</h5>
                        </div>
                        <div class="product_meta mt-2">
                            <span class="sku_wrapper">SKU: <span class="sku">#{{ $products->sku }}</span></span>
                        </div>
                        @php
                            // Always show the default product's selling price and MRP.
                            $defaultSp = $products->sp;
                            $defaultMrp = $products->mrp;
                            $defaultGst = $products->gst ?? 0;
                            // Calculate price including GST
                            $defaultPriceWithGst = $defaultSp + ($defaultSp * $defaultGst / 100);
                        @endphp
                        <p class="product-price mt-2" id="productPriceDisplay">
                            ₹<span id="priceSp">{{ number_format($defaultPriceWithGst, 2) }}</span>
                            <del id="priceMrpWrap">₹<span id="priceMrp">{{ $defaultMrp }}</span></del>
                        </p>
                        @php
                            // Assuming each $product has 'reviews' relationship, each review has 'rating' field (1-5)
                            $ratings = $products->reviews->pluck('rating');
                            $avgRating = $ratings->count() ? round($ratings->avg(), 2) : null;
                            $ratingPercent = $avgRating ? ($avgRating / 5) * 100 : 0;
                        @endphp
                        <div class="star-rating" role="img" aria-label="Rated {{ $avgRating ?? '0.00' }} out of 5">
                            <span style="width:{{ $ratingPercent }}%">
                                Rated <strong
                                    class="rating">{{ $avgRating ? number_format($avgRating, 2) : '0.00' }}</strong> out of
                                5
                            </span>
                        </div>
                        <br>

                        <div class="product-text">
                            <p>{!! $products->content !!}</p>
                        </div>

                        {{-- Removed vendor products display block --}}

                        @if (session('flash_success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('flash_success') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        <div class="product-getway mt-2">
                            <span class="getway-title">Delivery To :</span>
                            <form id="pincodeForm" class="email-input">
                                @csrf
                                <input class="form-control" type="text" id="pincodeInput" name="pincode"
                                    placeholder="enter pincode....." required maxlength="6">
                            </form>
                            <div id="pincodeResponse" class="mt-2" style="font-weight: bold;"></div>
                        </div>

                        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                        <script>
                            $(document).ready(function() {
                                $('#pincodeInput').on('input', function() {
                                    let pincode = $(this).val();
                                    let _token = $('input[name="_token"]').val();

                                    // Remove any non-numeric characters (optional)
                                    pincode = pincode.replace(/[^0-9]/g, '');
                                    $(this).val(pincode);

                                    // Only trigger when exactly 6 digits are typed
                                    if (pincode.length === 6) {
                                        $('#pincodeResponse').html('<span style="color: gray;">Checking...</span>');

                                        $.ajax({
                                            url: "{{ route('check.pincode') }}",
                                            type: "POST",
                                            data: {
                                                pincode: pincode,
                                                _token: _token
                                            },
                                            success: function(response) {
                                                if (response.success) {
                                                    $('#pincodeResponse').html('<span style="color: green;">✔ ' +
                                                        response.message + '</span>');
                                                } else {
                                                    $('#pincodeResponse').html('<span style="color: red;">✘ ' +
                                                        response.message + '</span>');
                                                }
                                            },
                                            error: function() {
                                                $('#pincodeResponse').html(
                                                    '<span style="color: red;">Error validating pincode.</span>'
                                                );
                                            }
                                        });
                                    } else if (pincode.length > 0 && pincode.length < 6) {
                                        $('#pincodeResponse').html(
                                            '<span style="color: orange;">Please enter a valid 6-digit pincode</span>');
                                    } else {
                                        $('#pincodeResponse').html('');
                                    }
                                });
                            });
                        </script>

                        <!-- MOVE SUCCESS MESSAGE HERE - just above the actions but after all general product info  -->
                        @php $user = Auth::user(); @endphp
                        @if (session('success'))
                            <div class="alert alert-success" style="margin-bottom: 15px;">
                                {{ session('success') }}
                            </div>
                        @endif

                        <div class="actions">
                            {{-- <div class="quantity">
                                <label for="quantity" class="screen-reader-text">Quantity : </label>
                                <button class="quantity-minus qty-btn" type="button"><i class="fal fa-minus"></i></button>
                                <input type="number" id="quantity" class="qty-input" step="1" min="1" max="100" name="quantity" value="1" title="Qty">
                                <button class="quantity-plus qty-btn" type="button"><i class="fal fa-plus"></i></button>
                            </div> --}}

                            @if ($user)
                                <form method="post" action="{{ route('cart.add') }}" id="addToCartForm"
                                    style="display:inline;">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $products->id }}">
                                    <input type="hidden" name="quantity" id="addToCartQuantity" value="1">
                                    <input type="hidden" name="sp" id="cartSpInput" value="{{ $defaultSp }}">
                                    {{-- Removed vendor_product_id --}}
                                    <input type="hidden" name="user_id" value="{{ Auth::id() }}">
                                    <button type="submit" class="vs-btn" id="addToCartBtn">Add to Cart</button>
                                </form>


                                <form method="POST" action="{{ route('wishlist.add') }}" style="display:inline;">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $products->id }}">
                                    <input type="hidden" name="session_id" value="{{ session()->getId() }}">
                                    <button type="submit" class="icon-btn" title="Add to Wishlist">
                                        <i class="far fa-heart"></i>
                                    </button>
                                </form>
                            @else
                                <a href="{{ route('login') }}" class="vs-btn" style="margin-left:10px;">
                                    <i class="fas fa-sign-in-alt" style="margin-right:6px;"></i>Login
                                </a>
                            @endif

                        </div>

                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                const qtyInput = document.getElementById('quantity');
                                const hiddenQty = document.getElementById('addToCartQuantity');
                                const minusBtn = document.querySelector('.quantity-minus');
                                const plusBtn = document.querySelector('.quantity-plus');
                                let min = parseInt(qtyInput.min) || 1;
                                let max = parseInt(qtyInput.max) || 100;

                                // Set initial value to min if out of range
                                qtyInput.value = qtyInput.value < min ? min : qtyInput.value;
                                if (hiddenQty) hiddenQty.value = qtyInput.value;

                                if (minusBtn) {
                                    minusBtn.addEventListener('click', function(e) {
                                        e.preventDefault();
                                        let val = parseInt(qtyInput.value) || min;
                                        if (val > min) {
                                            qtyInput.value = val - 1;
                                            if (hiddenQty) hiddenQty.value = qtyInput.value;
                                        }
                                    });
                                }
                                if (plusBtn) {
                                    plusBtn.addEventListener('click', function(e) {
                                        e.preventDefault();
                                        let val = parseInt(qtyInput.value) || min;
                                        if (val < max) {
                                            qtyInput.value = val + 1;
                                            if (hiddenQty) hiddenQty.value = qtyInput.value;
                                        }
                                    });
                                }
                                qtyInput.addEventListener('input', function() {
                                    let val = parseInt(this.value) || min;
                                    if (val < min) val = min;
                                    if (val > max) val = max;
                                    this.value = val;
                                    if (hiddenQty) hiddenQty.value = val;
                                });
                            });
                        </script>

                        {{-- Removed Vendor Price Selection Script --}}
                    </div>
                </div>
            </div>
            <div class="tabs" id="productTabs">
                <div class="tab active" data-tab="about">About The Product</div>
                <div class="tab" data-tab="specs">Specification</div>
                <div class="tab" data-tab="shipping">Shipping & Return</div>
                <div class="tab" data-tab="ideal">Post Review</div>
            </div>
            <div class="tab-content">
                <!-- About Tab -->
                <div id="about" class="tab-pane active">
                    <div class="description">
                        <div class="product-description">
                            <h2>Overview</h2>
                            <div class="title-divider1"></div>
                            <div>
                                {!! $products->overview !!}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Specs Tab -->
                <div id="specs" class="tab-pane" style="display: none;">
                    <div class="product-specification">
                        <h2>Specification</h2>
                        <div class="title-divider1"></div>
                        <div>
                            {!! $products->specification !!}
                        </div>
                    </div>
                </div>
                <!-- Shipping & Return Tab -->
                <div id="shipping" class="tab-pane" style="display: none;">
                    <div class="product-shipping">
                        <h2>Shipping & Return</h2>
                        <div class="title-divider1"></div>
                        <div>
                            {!! $products->shipping !!}
                        </div>
                    </div>
                </div>
                <!-- Reviews Tab -->
                <div id="ideal" class="tab-pane" style="display: none;">
                    <h2>Reviews</h2>
                    <div class="title-divider1"></div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="woocommerce-Reviews shop_1">
                                <div class="vs-comments-wrap">
                                    <ul class="comment-list">
                                        @php
                                            $reviews = $products->reviews ?? collect();
                                        @endphp

                                        @forelse($reviews as $review)
                                            <li class="review vs-comment-item">
                                                <div class="vs-post-comment">
                                                    <div class="comment-content">
                                                        <h4 class="name h4">
                                                            {{ $review->name ?? 'Anonymous' }}
                                                        </h4>

                                                        <span class="commented-on">
                                                            <i class="fal fa-calendar-alt"></i>
                                                            {{ $review->created_at->format('d M, Y') }}
                                                        </span>

                                                        <div class="review-rating">
                                                            <div class="star-rating" role="img"
                                                                aria-label="Rated {{ $review->rating }} out of 5">
                                                                <span style="width: {{ ($review->rating / 5) * 100 }}%">
                                                                    Rated
                                                                    <strong class="rating">{{ $review->rating }}</strong>
                                                                    out of 5
                                                                </span>
                                                            </div>
                                                        </div>

                                                        <p class="text">
                                                            {{ $review->message }}
                                                        </p>
                                                    </div>
                                                </div>
                                            </li>
                                        @empty
                                            <li>
                                                <p>No reviews yet. Be the first to review this product!</p>
                                            </li>
                                        @endforelse
                                    </ul>

                                </div>
                            </div>
                        </div>
                        <!-- Review Form -->