@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">
                    {{-- FIX PRODUCT MAIN IMAGE: Use $vendorProduct with existence check, fallback to default --}}
                    <div class="product-big-img vs-carousel" data-slide-show="1" data-fade="true"
                         data-asnavfor=".product-thumb-slide">
                        @if (!empty($vendorProduct->images) && $vendorProduct->images->count())
                            @foreach ($vendorProduct->images as $image)
                                <div class="img">
                                    @php
                                        $vendorImageUrl = function ($path, $fallback) {
                                            if (empty($path)) {
                                                return $fallback;
                                            }
                                            if (is_string($path) && preg_match('/^https?:\\/\\//i', $path)) {
                                                return $path;
                                            }
                                            $path = ltrim((string) $path, '/');
                                            if (str_starts_with($path, 'storage/')) {
                                                return asset($path);
                                            }
                                            if (str_starts_with($path, 'public/')) {
                                                $path = substr($path, strlen('public/'));
                                            }
                                            return asset('storage/' . $path);
                                        };

                                        $mainImagePath = $vendorImageUrl($image->image ?? null, asset('frontend/assets/img/product/default.png'));
                                    @endphp
                                    <img src="{{ $mainImagePath }}" alt="Product Image" onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/product/default.png') }}';">
                                </div>
                            @endforeach
                        @else
                            <div class="img">
                                <img src="{{ asset('frontend/assets/img/product/default.png') }}" alt="No Image Available">
                            </div>
                        @endif
                    </div>
                    {{-- FIX PRODUCT THUMBNAILS: use $vendorProduct and correct public path --}}
                    <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($vendorProduct->images) && $vendorProduct->images->count())
                            @foreach ($vendorProduct->images as $image)
                                <div class="col-3">
                                    <div class="thumb">
                                        @php
                                            $thumbPath = $vendorImageUrl($image->image ?? null, asset('frontend/assets/img/product/default-thumb.png'));
                                        @endphp
                                        <img src="{{ $thumbPath }}" alt="Product Thumbnail" onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/product/default-thumb.png') }}';">
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-3">
                                <div class="thumb">
                                    <img src="{{ asset('frontend/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>{{ $vendorProduct->product_name }}</h5>
                        </div>
                        <div class="product_meta mt-2">
                            <span class="sku_wrapper">SKU: <span class="sku">#{{ $vendorProduct->sku }}</span></span>
                        </div>
                        @php
                            $vendorSp = $vendorProduct->sp ?? 0;
                            $vendorGst = $vendorProduct->gst ?? 0;
                            $platformFeeRate = 10; // Fixed 10% platform fee on (SP + GST)
                            $vendorGstAmount = $vendorSp * $vendorGst / 100;
                            $vendorBaseWithGst = $vendorSp + $vendorGstAmount;
                            $vendorPlatformFee = $vendorBaseWithGst * $platformFeeRate / 100;
                            $vendorPriceWithPlatformFee = $vendorBaseWithGst + $vendorPlatformFee;
                        @endphp
                        <p class="product-price mt-2">
                            &#8377;{{ number_format($vendorPriceWithPlatformFee, 2) }}
                            </p>
                        <p class="product-stock mt-1">
                            @php $stock = (int) ($vendorProduct->stock ?? 0); @endphp
                            @if($stock > 0)
                                <span class="text-success">In Stock ({{ $stock }})</span>
                            @else
                                <span class="text-danger">Out of Stock</span>
                            @endif
                        </p>

                        <br>
                        <div class="product-text">
                            <p>{!! $vendorProduct->short_description !!}</p>
                        </div>
                        @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();
                                    pincode = pincode.replace(/[^0-9]/g, '');
                                    $(this).val(pincode);
                                    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>
                        @php $user = Auth::user(); @endphp
                        @if (session('success'))
                            <div class="alert alert-success" style="margin-bottom: 15px;">
                                {{ session('success') }}
                            </div>
                        @endif
                        @if (session('error'))
                            <div class="alert alert-danger" style="margin-bottom: 15px;">
                                {{ session('error') }}
                            </div>
                        @endif

                        <div class="actions">
                            @if ($user)
                                @php
                                    // Vendor cart uses vendor_product_id and quantity
                                    $vendorPrice = $vendorProduct->sp ?? 0;
                                    $mappedProductId = $vendorProduct->mapped_product_id ?? null;
                                @endphp
                                {{--
                                    CORRECT ADD TO CART:
                                    - Add 'vendor_product_id' and quantity fields
                                    - Only enable if in stock, disable button if out of stock
                                --}}
                                <form method="POST" action="{{ route('cart.add') }}" class="vendor-cart-form" style="display:inline;">
                                    @csrf
                                    <input type="hidden" name="vendor_product_id" value="{{ $vendorProduct->id }}">
                                    <input type="hidden" name="product_id" value="{{ $mappedProductId }}">
                                    <input type="hidden" name="quantity" value="1">
                                    <button type="submit" class="vs-btn"
                                        @if (empty($stock) || $stock < 1) disabled title="Out of Stock" style="background: #ccc; border: 1px solid #bbb;" @endif>
                                        <i class="far fa-shopping-cart"></i> Add to Cart
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('wishlist.add') }}" style="display:inline;">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $vendorProduct->product_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>
                    </div>
                </div>
            </div>
            <div class="tabs" id="productTabs">
                <div class="tab active" data-tab="about">About The Product</div>
                <div class="tab" data-tab="shipping">Highlights</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>Long Description</h2>
                            <div class="title-divider1"></div>
                            <div>
                                {!! $vendorProduct->long_description !!}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Shipping & Return Tab -->
                <div id="shipping" class="tab-pane" style="display: none;">
                    <div class="product-shipping">
                        <h2>Highlights</h2>
                        <div class="title-divider1"></div>
                        <div>
                            {!! $vendorProduct->highlights !!}
                        </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 = $vendorProduct->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 ? $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 -->