@extends('layouts.app')

@section('title', ($sbProduct ? $sbProduct->prod_name : $product->prod_name) . ' - Saba Remedies')

@section('content')
<!-- Breadcrumbs -->
<div class="bg-slate-100 border-b border-slate-200 py-3">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="flex text-xs text-slate-500" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 sm:space-x-2">
                <li><a href="{{ route('home') }}" class="hover:text-emerald-700">Home</a></li>
                <li><span class="text-slate-400 mx-1">/</span></li>
                <li><a href="{{ route('products.classic') }}" class="hover:text-emerald-700">Medicines</a></li>
                <li><span class="text-slate-400 mx-1">/</span></li>
                <li class="font-semibold text-slate-800 truncate max-w-xs">{{ $sbProduct ? $sbProduct->prod_name : $product->prod_name }}</li>
            </ol>
        </nav>
    </div>
</div>

<section class="py-10 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="bg-white rounded-3xl border border-slate-200/90 shadow-sm p-6 sm:p-10 mb-10">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
                
                <!-- Left Column: Product Gallery -->
                <div class="lg:col-span-5 space-y-4">
                    <div class="bg-slate-50 border border-slate-200 rounded-2xl p-6 flex items-center justify-center min-h-[350px] relative overflow-hidden">
                        @php
                            $primaryImg = $sbProduct ? $sbProduct->prod_img1 : ($product ? $product->prod_img1 : null);
                        @endphp
                        @if($primaryImg)
                            <img id="main-product-image" src="{{ product_image_url($primaryImg) }}" alt="{{ $title }}" class="max-h-80 object-contain transition-all duration-300" onerror="this.onerror=null;this.src='{{ asset('img/about.png') }}';">
                        @else
                            <div class="w-28 h-28 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center text-5xl">
                                <i class="fa-solid fa-bottle-droplet"></i>
                            </div>
                        @endif
                        <span class="absolute top-4 left-4 bg-emerald-600 text-white text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
                            100% Herbal
                        </span>
                    </div>

                    <!-- Thumbnails -->
                    @if($sbProduct && ($sbProduct->prod_img2 || $sbProduct->prod_img3 || $sbProduct->prod_img4))
                        <div class="flex items-center gap-3 overflow-x-auto pb-2">
                            @if($sbProduct->prod_img1)
                                <button type="button" onclick="document.getElementById('main-product-image').src='{{ product_image_url($sbProduct->prod_img1) }}'" class="w-16 h-16 rounded-xl border-2 border-emerald-500 p-1 bg-slate-50 focus:outline-none flex-shrink-0">
                                    <img src="{{ product_image_url($sbProduct->prod_img1) }}" class="w-full h-full object-contain" onerror="this.onerror=null;this.src='{{ asset('img/about.png') }}';">
                                </button>
                            @endif
                            @if($sbProduct->prod_img2)
                                <button type="button" onclick="document.getElementById('main-product-image').src='{{ product_image_url($sbProduct->prod_img2) }}'" class="w-16 h-16 rounded-xl border border-slate-200 hover:border-emerald-500 p-1 bg-slate-50 focus:outline-none flex-shrink-0">
                                    <img src="{{ product_image_url($sbProduct->prod_img2) }}" class="w-full h-full object-contain" onerror="this.onerror=null;this.src='{{ asset('img/about.png') }}';">
                                </button>
                            @endif
                            @if($sbProduct->prod_img3)
                                <button type="button" onclick="document.getElementById('main-product-image').src='{{ product_image_url($sbProduct->prod_img3) }}'" class="w-16 h-16 rounded-xl border border-slate-200 hover:border-emerald-500 p-1 bg-slate-50 focus:outline-none flex-shrink-0">
                                    <img src="{{ product_image_url($sbProduct->prod_img3) }}" class="w-full h-full object-contain" onerror="this.onerror=null;this.src='{{ asset('img/about.png') }}';">
                                </button>
                            @endif
                            @if($sbProduct->prod_img4)
                                <button type="button" onclick="document.getElementById('main-product-image').src='{{ product_image_url($sbProduct->prod_img4) }}'" class="w-16 h-16 rounded-xl border border-slate-200 hover:border-emerald-500 p-1 bg-slate-50 focus:outline-none flex-shrink-0">
                                    <img src="{{ product_image_url($sbProduct->prod_img4) }}" class="w-full h-full object-contain" onerror="this.onerror=null;this.src='{{ asset('img/about.png') }}';">
                                </button>
                            @endif
                        </div>
                    @endif
                </div>

                <!-- Right Column: Product Info & Actions -->
                <div class="lg:col-span-7 space-y-6">
                    <div>
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-xs font-bold text-emerald-700 bg-emerald-50 border border-emerald-200 px-2.5 py-0.5 rounded-full">
                                Authentic Unani Medicine
                            </span>
                            @if($activeProduct->prod_code)
                                <span class="text-xs text-slate-400">SKU: {{ $activeProduct->prod_code }}</span>
                            @endif
                        </div>
                        <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 leading-snug">{{ $title }}</h1>
                    </div>

                    <!-- Price Block -->
                    <div class="bg-slate-50 p-4 rounded-2xl border border-slate-200 flex items-center justify-between">
                        <div>
                            <div class="text-xs text-slate-500">M.R.P (Inclusive of all taxes)</div>
                            <div class="flex items-baseline gap-2 mt-1">
                                <span id="display-price" class="text-3xl font-extrabold text-slate-900">
                                    ₹{{ $variants->first() ? $variants->first()->prod_price : ($activeProduct->prod_price ?? '0') }}
                                </span>
                                <span id="display-cross-price" class="text-sm text-slate-400 line-through {{ ($variants->first() && $variants->first()->prod_cross_price) ? '' : 'hidden' }}">
                                    ₹{{ $variants->first() ? $variants->first()->prod_cross_price : '' }}
                                </span>
                            </div>
                        </div>
                        <span class="text-xs font-bold text-emerald-700 bg-emerald-100 px-3 py-1 rounded-full">
                            In Stock &amp; Ready to Ship
                        </span>
                    </div>

                    <!-- Order Form -->
                    <form id="add-to-cart-form" action="{{ route('cart.add') }}" method="POST" class="space-y-5">
                        @csrf
                        <input type="hidden" name="prod_id" value="{{ $activeProduct->id }}">
                        <input type="hidden" name="is_sb" value="{{ $sbProduct ? '1' : '0' }}">
                        <input type="hidden" name="prd_name" value="{{ $title }}">
                        <input type="hidden" id="form-price" name="price" value="{{ $variants->first() ? $variants->first()->prod_price : ($activeProduct->prod_price ?? '0') }}">

                        <!-- Pack Sizes / Variant Selection -->
                        @if($variants->count() > 0)
                            <div>
                                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">Select Pack Size:</label>
                                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                                    @foreach($variants as $index => $variant)
                                        <label class="cursor-pointer">
                                            <input type="radio" name="variant_id" value="{{ $variant->id }}" {{ $index === 0 ? 'checked' : '' }} class="peer sr-only variant-radio" data-price="{{ $variant->prod_price }}" data-cross="{{ $variant->prod_cross_price }}">
                                            <div class="p-3 text-center border-2 border-slate-200 peer-checked:border-emerald-600 peer-checked:bg-emerald-50 rounded-xl transition-all">
                                                <div class="font-bold text-xs text-slate-800">{{ $variant->prod_quantity }} {{ $variant->prod_quantity_type }}</div>
                                                <div class="text-xs font-semibold text-emerald-700 mt-0.5">₹{{ $variant->prod_price }}</div>
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Quantity Selector -->
                        <div class="flex items-center gap-4">
                            <label class="text-xs font-bold uppercase tracking-wider text-slate-700">Quantity:</label>
                            <div class="flex items-center border border-slate-300 rounded-xl overflow-hidden bg-white shadow-xs">
                                <button type="button" onclick="decrementQty()" class="px-3.5 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold focus:outline-none">-</button>
                                <input type="number" id="quantity-input" name="quantity" value="1" min="1" max="50" class="w-14 text-center text-xs font-bold focus:outline-none border-none py-2">
                                <button type="button" onclick="incrementQty()" class="px-3.5 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold focus:outline-none">+</button>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
                            <button type="submit" name="buy_now" value="0" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3.5 px-6 rounded-xl text-xs shadow-sm hover:shadow transition-all flex items-center justify-center gap-2">
                                <i class="fa-solid fa-cart-plus"></i> Add to Cart
                            </button>
                            <button type="submit" name="buy_now" value="1" class="bg-brand-red hover:bg-brand-darkred text-white font-bold py-3.5 px-6 rounded-xl text-xs shadow-sm hover:shadow transition-all flex items-center justify-center gap-2">
                                <i class="fa-solid fa-bolt"></i> Buy Now Directly
                            </button>
                        </div>
                    </form>

                    <!-- WhatsApp & Wishlist Row -->
                    <div class="flex flex-wrap items-center gap-3 pt-2 border-t border-slate-100">
                        @if(!empty($siteSetting->whatsapp))
                            <a href="https://api.whatsapp.com/send?phone={{ clean_phone_number($siteSetting->whatsapp) }}&text={{ urlencode('Hello Saba Remedies, I would like to order: ' . $title) }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 border border-emerald-300 font-semibold px-4 py-2.5 rounded-xl text-xs transition-colors">
                                <i class="fa-brands fa-whatsapp text-emerald-600 text-base"></i> Order via WhatsApp
                            </a>
                        @endif

                        <form action="{{ route('wishlist.add') }}" method="POST" class="inline">
                            @csrf
                            <input type="hidden" name="prod_id" value="{{ $activeProduct->id }}">
                            <button type="submit" class="inline-flex items-center gap-2 bg-slate-50 hover:bg-slate-100 text-slate-700 border border-slate-200 font-semibold px-4 py-2.5 rounded-xl text-xs transition-colors">
                                <i class="fa-regular fa-heart text-red-500"></i> Add to Wishlist
                            </button>
                        </form>
                    </div>

                </div>

            </div>
        </div>

        <!-- Product Tabs: Description, Indications, Ingredients, Dosage & Reviews -->
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 sm:p-10 mb-10">
            <div class="border-b border-slate-200 mb-6">
                <nav class="flex space-x-6 text-xs sm:text-sm font-bold" aria-label="Tabs">
                    <button type="button" onclick="switchTab('desc')" id="tab-desc-btn" class="tab-btn pb-3 border-b-2 border-emerald-600 text-emerald-700">Description &amp; Details</button>
                    @if($sbProduct && $sbProduct->features)
                        <button type="button" onclick="switchTab('features')" id="tab-features-btn" class="tab-btn pb-3 border-b-2 border-transparent text-slate-500 hover:text-slate-700">Indications &amp; Features</button>
                    @endif
                    <button type="button" onclick="switchTab('reviews')" id="tab-reviews-btn" class="tab-btn pb-3 border-b-2 border-transparent text-slate-500 hover:text-slate-700">Customer Reviews ({{ $reviews->count() }})</button>
                </nav>
            </div>

            <!-- Description Tab Content -->
            <div id="tab-desc" class="tab-content text-slate-700 text-xs sm:text-sm leading-relaxed space-y-4">
                @if($activeProduct->prod_desp)
                    <div class="prose max-w-none text-justify">
                        {!! nl2br(e($activeProduct->prod_desp)) !!}
                    </div>
                @else
                    <p>Authentic Unani formulation prepared according to classic Unani Pharmacopoeia standards with pure herbal extracts.</p>
                @endif
            </div>

            <!-- Features Tab Content -->
            @if($sbProduct && $sbProduct->features)
                <div id="tab-features" class="tab-content hidden text-slate-700 text-xs sm:text-sm leading-relaxed space-y-4">
                    <div class="prose max-w-none text-justify">
                        {!! nl2br(e($sbProduct->features)) !!}
                    </div>
                </div>
            @endif

            <!-- Reviews Tab Content -->
            <div id="tab-reviews" class="tab-content hidden space-y-8">
                <!-- Submit Review Form -->
                <div class="bg-slate-50 p-6 rounded-2xl border border-slate-200 max-w-xl">
                    <h4 class="font-bold text-slate-800 text-sm mb-4">Write a Product Review</h4>
                    <form action="{{ route('products.review', ['id' => $activeProduct->id]) }}" method="POST" class="space-y-4">
                        @csrf
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Your Full Name</label>
                            <input type="text" name="name" required class="w-full bg-white border border-slate-300 rounded-lg p-2.5 text-xs focus:ring-1 focus:ring-emerald-500">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Your Email</label>
                            <input type="email" name="email" required class="w-full bg-white border border-slate-300 rounded-lg p-2.5 text-xs focus:ring-1 focus:ring-emerald-500">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Rating</label>
                            <select name="rating" class="w-full bg-white border border-slate-300 rounded-lg p-2.5 text-xs">
                                <option value="5">⭐⭐⭐⭐⭐ (5/5) Excellent</option>
                                <option value="4">⭐⭐⭐⭐ (4/5) Very Good</option>
                                <option value="3">⭐⭐⭐ (3/5) Good</option>
                                <option value="2">⭐⭐ (2/5) Average</option>
                                <option value="1">⭐ (1/5) Poor</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Your Review</label>
                            <textarea name="review" rows="3" required placeholder="Share your experience with this formulation..." class="w-full bg-white border border-slate-300 rounded-lg p-2.5 text-xs focus:ring-1 focus:ring-emerald-500"></textarea>
                        </div>
                        <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-5 py-2.5 rounded-xl text-xs transition-colors">Submit Review</button>
                    </form>
                </div>

                <!-- Existing Reviews List -->
                <div class="space-y-4">
                    <h4 class="font-bold text-slate-800 text-sm">Customer Feedback</h4>
                    @forelse($reviews as $rev)
                        <div class="p-4 bg-slate-50 rounded-xl border border-slate-200">
                            <div class="flex items-center justify-between mb-1">
                                <span class="font-bold text-xs text-slate-800">{{ $rev->name }}</span>
                                <span class="text-amber-500 text-xs">
                                    @for($i=0; $i < ($rev->rating ?? 5); $i++) ⭐ @endfor
                                </span>
                            </div>
                            <p class="text-xs text-slate-600 mt-1">{{ $rev->review }}</p>
                        </div>
                    @empty
                        <p class="text-xs text-slate-400">No reviews yet for this product. Be the first to share your experience!</p>
                    @endforelse
                </div>
            </div>

        </div>

        <!-- Related Products Section -->
        @if(isset($relatedProducts) && $relatedProducts->count() > 0)
            <div>
                <h3 class="text-xl font-extrabold text-slate-900 mb-6">Related Formulations</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($relatedProducts as $rel)
                        <div class="bg-white border border-slate-200 rounded-2xl p-5 hover:shadow-md transition-shadow flex flex-col justify-between">
                            <div>
                                <h4 class="font-bold text-slate-800 text-xs sm:text-sm line-clamp-2">
                                    <a href="{{ route('products.show', ['id' => $rel->id]) }}" class="hover:text-emerald-700">{{ $rel->prod_name }}</a>
                                </h4>
                            </div>
                            <div class="pt-4 mt-3 border-t border-slate-100 flex items-center justify-between">
                                <span class="font-bold text-slate-900 text-sm">₹{{ $rel->prod_price ?? 'N/A' }}</span>
                                <a href="{{ route('products.show', ['id' => $rel->id]) }}" class="text-xs font-bold text-emerald-700 hover:underline">View &rarr;</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

    </div>
</section>
@endsection

@push('scripts')
<script>
    function incrementQty() {
        const input = document.getElementById('quantity-input');
        input.value = parseInt(input.value || 1) + 1;
    }

    function decrementQty() {
        const input = document.getElementById('quantity-input');
        if (parseInt(input.value) > 1) {
            input.value = parseInt(input.value) - 1;
        }
    }

    function switchTab(tabName) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.querySelectorAll('.tab-btn').forEach(el => {
            el.classList.remove('border-emerald-600', 'text-emerald-700');
            el.classList.add('border-transparent', 'text-slate-500');
        });

        document.getElementById('tab-' + tabName).classList.remove('hidden');
        document.getElementById('tab-' + tabName + '-btn').classList.add('border-emerald-600', 'text-emerald-700');
        document.getElementById('tab-' + tabName + '-btn').classList.remove('border-transparent', 'text-slate-500');
    }

    // Dynamic Pack size price update
    $('.variant-radio').on('change', function() {
        const price = $(this).data('price');
        const cross = $(this).data('cross');
        $('#display-price').text('₹' + price);
        $('#form-price').val(price);

        if (cross && parseFloat(cross) > 0) {
            $('#display-cross-price').text('₹' + cross).removeClass('hidden');
        } else {
            $('#display-cross-price').addClass('hidden');
        }
    });
</script>
@endpush