@extends('theme::layouts.app')

@section('content')
<main class="flex-grow w-full pb-16">
    <!-- Breadcrumbs -->
    @include('theme::partials.breadcrumbs')

    <div class="max-w-[1440px] mx-auto px-6 lg:px-10 py-8 lg:py-12">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 xl:gap-14">
            <!-- Left Column: Gallery, Info, Tabs -->
            <div class="lg:col-span-7 xl:col-span-8 space-y-10">
                <!-- Product Header & Stats -->
                <div class="space-y-4">
                    <div class="flex items-start justify-between">
                        <div>
                            <div class="flex items-center gap-2 mb-2">
                                @if($product->is_featured ?? false)
                                <span class="text-xs font-bold uppercase tracking-wider text-accent">@lang('shop.Featured')</span>
                                @endif
                                @if($product->isBundle())
                                <span class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wider text-violet-600 dark:text-violet-400 bg-violet-50 dark:bg-violet-900/20 px-2 py-0.5 rounded">
                                    <span class="material-symbols-outlined text-[14px]">layers</span>
                                    @lang('shop.Bundle')
                                </span>
                                @endif
                            </div>
                            <h1 class="text-3xl md:text-4xl font-bold text-text-main dark:text-white mb-0">{{ $product->name }}</h1>
                        </div>
                    </div>

                    <div class="flex items-center gap-6 text-sm">
                        <!-- Rating -->
                        <div class="flex items-center gap-1.5">
                            <div class="flex text-amber-400">
                                @for ($i = 0; $i < $fullStars; $i++)
                                    <span class="material-symbols-outlined text-[18px] text-amber-400" style="font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;">star</span>
                                @endfor
                                @if ($halfStar)
                                    <span class="material-symbols-outlined text-[18px] text-amber-400">star_half</span>
                                @endif
                                @for ($i = 0; $i < $emptyStars; $i++)
                                    <span class="material-symbols-outlined text-[18px] mb-[-3px] text-gray-300">star</span> <!-- Outlined for empty -->
                                @endfor
                            </div>
                            <span class="font-medium text-text-main dark:text-white">{{ number_format($averageRating, 1) }}</span>
                            <a class="text-text-muted underline decoration-gray-300 hover:text-primary" href="#tab-reviews">({{ $product->reviews->count() }} @lang('shop.reviews'))</a>

                        </div>
                        
                        <!-- Updated Info -->
                        <div class="flex items-center gap-1.5 text-text-muted">
                            <span class="material-symbols-outlined text-[18px]">update</span>
                            <span>@lang('shop.Updated') {{ $product->updated_at->diffForHumans() }}</span>
                        </div>
                    </div>
                </div>

                <!-- Gallery -->
                <div class="space-y-4">
                    <div class="relative aspect-video w-full rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-800 border border-gray-100 dark:border-gray-800 shadow-soft">
                        <img id="main-product-image" alt="{{ $product->name }}"
                            class="object-cover w-full h-full hover:scale-105 transition-transform duration-700"
                            src="{{ $product->getImageUrl('original') }}" />
                    </div>
                    <!-- Thumbnails (Placeholder logic - check if media exists) -->
                    @if($product->getMedia('gallery')->count() > 1)
                    <div class="grid grid-cols-5 gap-3">
                         @foreach($product->getMedia('gallery') as $media)
                            <button class="thumbnail-btn relative aspect-video rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 opacity-70 hover:opacity-100 hover:border-primary transition-all"
                                    data-original-src="{{ $media->getUrl() }}">
                                <img alt="Thumbnail" class="object-cover w-full h-full" src="{{ $media->getUrl('thumbnail') }}" />
                            </button>
                         @endforeach
                    </div>
                    @endif
                </div>

                <!-- Tabs -->
                <div class="border-t border-gray-100 dark:border-gray-800 pt-10">
                    <div class="mb-8">
                        <div class="flex items-center gap-1 border-b border-gray-200 dark:border-gray-700 overflow-x-auto tab-nav">
                            <button class="tab-btn active pb-3 pt-2 text-sm font-semibold text-primary border-b-2 border-primary px-4 whitespace-nowrap bg-transparent hover:bg-gray-50 dark:hover:bg-white/5 rounded-t-lg transition-colors flex items-center gap-2"
                                data-tab="overview">

                                <span class="material-symbols-outlined text-[18px]">info</span>
                                @lang('shop.Overview')
                            </button>
                            <button class="tab-btn pb-3 pt-2 text-sm font-medium text-text-muted border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 hover:text-text-main dark:hover:text-gray-200 transition-colors px-4 whitespace-nowrap bg-transparent hover:bg-gray-50 dark:hover:bg-white/5 rounded-t-lg flex items-center gap-2"
                                data-tab="reviews">

                                <span class="material-symbols-outlined text-[18px]">star</span>
                                @lang('shop.Reviews')
                                <span class="text-[10px] bg-gray-100 dark:bg-gray-800 text-gray-500 py-0.5 px-1.5 rounded-full ml-1">{{ $product->reviews->count() }}</span>
                            </button>
                            @if($product->faqs->count() > 0)
                            <button class="tab-btn pb-3 pt-2 text-sm font-medium text-text-muted border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 hover:text-text-main dark:hover:text-gray-200 transition-colors px-4 whitespace-nowrap bg-transparent hover:bg-gray-50 dark:hover:bg-white/5 rounded-t-lg flex items-center gap-2"
                                data-tab="faq">

                                <span class="material-symbols-outlined text-[18px]">help</span>
                                @lang('shop.FAQ')
                                <span class="text-[10px] bg-gray-100 dark:bg-gray-800 text-gray-500 py-0.5 px-1.5 rounded-full ml-1">{{ $product->faqs->count() }}</span>
                            </button>
                            @endif
                            @if(isset($product->features['support']) && $product->features['support'])
                            <button class="tab-btn pb-3 pt-2 text-sm font-medium text-text-muted border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 hover:text-text-main dark:hover:text-gray-200 transition-colors px-4 whitespace-nowrap bg-transparent hover:bg-gray-50 dark:hover:bg-white/5 rounded-t-lg flex items-center gap-2"
                                data-tab="support">

                                <span class="material-symbols-outlined text-[18px]">support_agent</span>
                                @lang('shop.Support')
                            </button>
                            @endif
                        </div>
                    </div>
                    
                    <div class="tab-content relative">
                        <!-- Overview Tab -->
                        <div id="tab-overview" class="prose prose-slate dark:prose-invert max-w-none text-text-muted dark:text-gray-400">
                            {!! $product->description !!}
                        </div>

                        <!-- Reviews Tab -->
                        <div id="tab-reviews" class="hidden">


                            <div class="mb-12">
                                <h3 class="text-xl font-bold text-text-main dark:text-white mb-6">@lang('shop.heading|Customer Reviews')</h3>
                                <div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
                                    <!-- Rating Summary -->
                                    <div class="md:col-span-4 flex flex-col items-center justify-center p-8 bg-gray-50 dark:bg-white/5 rounded-2xl text-center">
                                        <div class="text-6xl font-bold text-text-main dark:text-white mb-2">
                                            {{ number_format($averageRating, 1) }}
                                        </div>
                                        <div class="flex text-amber-400 mb-2">
                                            @for ($i = 1; $i <= 5; $i++)
                                                <span class="material-symbols-outlined text-[24px] {{ $i <= round($averageRating) ? 'text-amber-400' : 'text-gray-300' }}"
                                                    @if($i <= round($averageRating)) style="font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;" @endif>
                                                    star
                                                </span>
                                            @endfor
                                        </div>
                                        <div class="text-sm text-text-muted">{{ $totalReviews }} @lang('shop.reviews')</div>
                                    </div>

                                    <!-- Rating Bars -->
                                    <div class="md:col-span-8 space-y-3">
                                        @for ($i = 5; $i >= 1; $i--)
                                            <div class="flex items-center gap-4 text-sm">
                                                <span class="w-12 text-text-muted whitespace-nowrap">{{ $i }} @lang('shop.Stars')</span>
                                                <div class="flex-grow h-2 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                                                    <div class="h-full bg-primary" style="width: {{ $percentages[$i] }}%"></div>
                                                </div>
                                                <span class="w-10 text-right text-text-muted font-medium">{{ $percentages[$i] }}%</span>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                            </div>

                            <!-- Review Cards -->
                            <div class="space-y-6 pt-10 border-t border-gray-100 dark:border-gray-800">
                                @forelse($reviews as $review)
                                    <!-- Single Review -->
                                    <div class="group relative flex flex-col gap-4 pb-8 border-b border-gray-50 dark:border-gray-800 hover:bg-gray-50/50 dark:hover:bg-white/5 p-4 rounded-xl transition-colors">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center gap-4">
                                                <div class="size-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                                                    @if($review->user && $review->user->avatar)
                                                        <img src="{{ $review->user->avatar }}" alt="{{ $review->user->name }}" class="w-full h-full object-cover">
                                                    @else
                                                        <span class="material-symbols-outlined text-[32px] text-gray-400">person</span>
                                                    @endif
                                                </div>
                                                <div>
                                                    <h4 class="font-bold text-text-main dark:text-white uppercase tracking-wider text-xs">
                                                        {{ $review->user->name ?? __('shop.Anonymous') }}
                                                    </h4>
                                                    @if($review->plan)
                                                        <p class="text-[10px] text-text-muted font-medium">@lang('shop.Plan'): {{ $review->plan->name }}</p>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="text-[10px] text-text-muted font-medium">{{ $review->created_at->diffForHumans() }}</div>
                                        </div>
                                        <div class="flex text-amber-400">
                                            @for ($i = 1; $i <= 5; $i++)
                                                <span class="material-symbols-outlined text-[16px] {{ $i <= $review->rating ? 'text-amber-400' : 'text-gray-300' }}"
                                                    @if($i <= $review->rating) style="font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;" @endif>
                                                    star
                                                </span>
                                            @endfor
                                        </div>
                                        <p class="text-sm text-text-muted dark:text-gray-300">{{ $review->feedback }}</p>
                                    </div>
                                @empty
                                    <p class="text-text-muted">@lang('shop.No reviews yet.')</p>
                                @endforelse
                            </div>
                        </div>

                        <!-- FAQ Tab -->
                        @if($product->faqs->count() > 0)
                        <div id="tab-faq" class="hidden">
                             <div class="mb-10">
                                <h3 class="text-2xl font-bold text-text-main dark:text-white mb-2">{{ $product->name }} @lang('shop.FAQ')</h3>
                                <p class="text-text-muted text-sm pb-8">{{ __('shop.Frequently asked questions about') }} {{ $product->name }}</p>

                                <!-- FAQ Search -->
                                <div class="relative max-w-xl p-6 bg-gray-50 dark:bg-white/5 rounded-2xl mb-10">
                                    <div class="relative">
                                        <span class="absolute left-4 top-1/2 -translate-y-1/2 material-symbols-outlined text-gray-400 text-[20px]">search</span>
                                        <input type="text" id="faq-search" placeholder="{{ __('shop.Search FAQs...') }}"
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-surface-dark border border-gray-100 dark:border-gray-800 rounded-xl text-sm focus:ring-primary/20 focus:ring-2 focus:outline-none transition-all">

                                    </div>
                                </div>

                                <!-- FAQ Accordion -->
                                <div class="space-y-4" id="faq-accordion">
                                    @foreach($product->faqs as $index => $faq)
                                    <div class="faq-item group bg-white dark:bg-surface-dark border border-gray-100 dark:border-gray-800 rounded-xl overflow-hidden {{ $index === 0 ? 'active' : '' }}">
                                        <button class="faq-toggle w-full p-6 text-left flex items-center justify-between gap-4 cursor-pointer hover:bg-gray-50/50 dark:hover:bg-white/5 transition-colors">
                                            <span class="font-bold text-text-main dark:text-white text-sm">{{ $faq->question }}</span>
                                            <span class="material-symbols-outlined text-gray-400 transition-transform duration-300">expand_more</span>
                                        </button>
                                        <div class="faq-body">
                                            <div class="overflow-hidden">
                                                <div class="px-6 pb-6 pt-0">
                                                    <p class="text-sm text-text-muted leading-relaxed">{{ $faq->answer }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                             </div>
                        </div>
                        @endif

                        <!-- Support Tab -->
                        @if(isset($product->features['support']) && $product->features['support'])
                        <div id="tab-support" class="hidden">
                            <div class="max-w-3xl mx-auto space-y-8">
                                <!-- Universal Header -->
                                <div class="text-center">
                                    <div class="size-16 bg-primary/10 text-primary rounded-full flex items-center justify-center mx-auto mb-6">
                                        <span class="material-symbols-outlined text-[32px]">support_agent</span>
                                    </div>
                                    <h3 class="text-xl font-bold text-text-main dark:text-white mb-2">@lang('shop.heading|Technical Support & Updates')</h3>
                                    <p class="text-text-muted text-sm max-w-lg mx-auto">@lang('shop.Get help with installation, configuration, and troubleshooting from our dedicated team.')</p>
                                </div>

                                @if($product->supportPolicy && $product->supportPolicy->enabled)
                                    <!-- Policy Details Card -->
                                    <div class="bg-gray-50 dark:bg-white/5 rounded-2xl border border-gray-100 dark:border-gray-800 overflow-hidden">
                                        <!-- One-Time Purchase Context -->
                                        <div class="bg-primary/5 border-b border-primary/10 px-6 py-4 flex items-start gap-3">
                                            <span class="material-symbols-outlined text-primary text-[20px] shrink-0 mt-0.5">info</span>
                                            <p class="text-xs text-text-main dark:text-gray-200">
                                                <strong>@lang('shop.One-Time Purchases'):</strong> @lang('shop.This support policy applies to standard licenses.') 
                                                <span class="opacity-75">@lang('shop.Subscription plans always include premium support while active.')</span>
                                            </p>
                                        </div>

                                        <div class="p-6 md:p-8">
                                            <!-- Key Attributes Grid -->
                                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                                                <!-- Duration -->
                                                <div class="flex items-start gap-3">
                                                    <div class="size-10 rounded-lg bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 flex items-center justify-center shrink-0">
                                                        <span class="material-symbols-outlined text-[20px]">timer</span>
                                                    </div>
                                                    <div>
                                                        <p class="text-xs text-text-muted uppercase tracking-wider font-semibold mb-1">@lang('shop.Duration')</p>
                                                        <p class="font-bold text-text-main dark:text-white">
                                                            {{ $product->supportPolicy->support_duration }} 
                                                            {{ getConstantLabel('support_duration_unit', $product->supportPolicy->support_duration_unit) }}
                                                        </p>
                                                        <p class="text-[11px] text-text-muted">@lang('shop.From purchase date')</p>
                                                    </div>
                                                </div>

                                                <!-- Renewal -->
                                                @if($product->supportPolicy->discount_value > 0)
                                                <div class="flex items-start gap-3">
                                                    @if($product->supportPolicy->discount_type == getConstant('SUPPORT_DISCOUNT_FIXED'))
                                                        <!-- Fixed Price Case -->
                                                        <div class="size-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 flex items-center justify-center shrink-0">
                                                            <span class="material-symbols-outlined text-[20px]">payments</span>
                                                        </div>
                                                        <div>
                                                            <p class="text-xs text-text-muted uppercase tracking-wider font-semibold mb-1">@lang('shop.Renewal Price')</p>
                                                            <p class="font-bold text-text-main dark:text-white">
                                                                {!! ch_currency_symbol(setting('currency', 'USD')) !!}{{ number_format($product->supportPolicy->discount_value) }}
                                                            </p>

                                                            <p class="text-[11px] text-text-muted">@lang('shop.To extend support')</p>
                                                        </div>
                                                    @else
                                                        <!-- Percentage Discount Case -->
                                                        <div class="size-10 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 flex items-center justify-center shrink-0">
                                                            <span class="material-symbols-outlined text-[20px]">percent</span>
                                                        </div>
                                                        <div>
                                                            <p class="text-xs text-text-muted uppercase tracking-wider font-semibold mb-1">@lang('shop.Renewal Offer')</p>
                                                            <p class="font-bold text-text-main dark:text-white">
                                                                {{ number_format($product->supportPolicy->discount_value) }}% @lang('shop.Discount')
                                                            </p>
                                                            <p class="text-[11px] text-text-muted">@lang('shop.On support renewal')</p>
                                                        </div>
                                                    @endif
                                                </div>
                                                @endif

                                                <!-- Coverage -->
                                                <div class="flex items-start gap-3">
                                                    <div class="size-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
                                                        <span class="material-symbols-outlined text-[20px]">update</span>
                                                    </div>
                                                    <div>
                                                        <p class="text-xs text-text-muted uppercase tracking-wider font-semibold mb-1">@lang('shop.Includes')</p>
                                                        <p class="font-bold text-text-main dark:text-white">@lang('shop.Updates & Fixes')</p>
                                                        <p class="text-[11px] text-text-muted">@lang('shop.Latest versions access')</p>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Policy Description -->
                                            <div class="pt-6 border-t border-gray-100 dark:border-gray-800">
                                                <h4 class="text-sm font-bold text-text-main dark:text-white mb-3 flex items-center gap-2">
                                                    <span class="material-symbols-outlined text-text-muted text-[18px]">description</span>
                                                    @lang('shop.heading|Policy Details')
                                                </h4>
                                                <div class="text-text-muted text-sm leading-relaxed prose dark:prose-invert max-w-none">
                                                    {!! $product->supportPolicy->support_description !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <!-- Main Action -->
                                <div class="flex justify-center pt-4">
                                    <a href="{{ route('helpdesk.tickets.create') }}" class="group relative inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-primary text-white rounded-xl font-bold text-sm hover:bg-primary-dark transition-all transform hover:-translate-y-0.5 hover:shadow-lg shadow-primary/25">
                                        <span class="material-symbols-outlined text-[20px]">confirmation_number</span>
                                        @lang('shop.button|Create Support Ticket')
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Right Column: Sidebar -->
            <div class="lg:col-span-5 xl:col-span-4">
                <div class="sticky top-24 space-y-6">
                    <form action="{{ route('ch_cart_save') }}" method="POST">
                        @csrf
                        
                        {{-- Product type is determined by service layer - no business logic in theme --}}
                        @if($productType === 'subscription')
                            @include('theme::partials.pricing.subscription-box')
                        @elseif($productType === 'multi-plan')
                            @include('theme::partials.pricing.multi-plan-box')
                        @else
                            @include('theme::partials.pricing.single-plan-box')
                        @endif
                    </form>
                    
                    <div class="bg-surface-light dark:bg-surface-dark border border-gray-100 dark:border-gray-800 rounded-xl p-4 text-center">
                        <div class="grid grid-cols-2 gap-4">
                            <div class="flex flex-col items-center gap-1">
                                <span class="material-symbols-outlined text-primary text-[24px]">verified_user</span>
                                <p class="text-xs font-medium text-text-main dark:text-white">@lang('shop.Secure Checkout')</p>
                            </div>
                            <div class="flex flex-col items-center gap-1">
                                <span class="material-symbols-outlined text-primary text-[24px]">help_center</span>
                                <p class="text-xs font-medium text-text-main dark:text-white">@lang('shop.24/7 Support')</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('ch_footer')
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // Inject backend data for the SDK
    window.pricingData = @json($pricingData);
    window.cartUrl = "{{ route('ch_cart_save') }}";
    window.checkoutUrl = "{{ route('ch_checkout') }}";
    window.symbol = @json(ch_currency_symbol(setting('currency', 'USD')));
</script>
<script src="{{ asset('assets/js/chargepanda-product.js') }}?v={{ filemtime(public_path('assets/js/chargepanda-product.js')) }}"></script>
@endpush