{{-- Selected Category Banner Info --}}
@if(isset($selectedCategory) && $selectedCategory)
<div class="mb-4 relative rounded-xl md:rounded-2xl overflow-hidden bg-gray-900 text-white shadow-xl">
    <!-- Background Image with Overlay -->
    <div class="absolute inset-0">
        @if($selectedCategory->image)
            <img src="{{ asset($selectedCategory->image) }}" alt="{{ $selectedCategory->name }}" class="w-full h-full object-cover opacity-40 blur-sm">
        @else
            <div class="w-full h-full bg-gray-800 opacity-50"></div>
        @endif
        <div class="absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-900/90 to-transparent"></div>
    </div>

    <div class="relative z-10 p-3 md:p-4 flex flex-col justify-center min-h-[60px] md:min-h-[80px]">
        <!-- Title & Publisher Removed -->
        
        <!-- Features -->
        <div class="flex flex-wrap gap-3 md:gap-8 text-xs md:text-sm font-bold">
            <div class="flex items-center gap-1 md:gap-2" style="color: #facc15;">
                <i class="fas fa-bolt"></i>
                <span>Proses Cepat</span>
            </div>
            <div class="flex items-center gap-1 md:gap-2 text-white">
                <i class="fas fa-check-circle text-blue-500"></i>
                <span>Pembayaran Aman!</span>
            </div>
        </div>
    </div>
    
    <!-- Decorative Big Icon on Right -->
    <div class="absolute right-[-10px] bottom-[-10px] md:right-[-20px] md:bottom-[-20px] opacity-10 pointer-events-none">
        <i class="fas {{ $selectedCategory->icon ?? 'fa-gamepad' }} text-[80px] md:text-[150px] text-white transform -rotate-12"></i>
    </div>
</div>
@endif

{{-- Account Data Input Section --}}
@if(isset($selectedCategory) && $selectedCategory->input_type != 'none')
<form action="{{ route('checkout.process') }}" method="POST" id="orderForm" novalidate class="scroll-mt-28">
    @csrf
    <input type="hidden" name="product_id" id="selected_product_id">
    
    <div class="mb-4 md:mb-8 rounded-lg md:rounded-2xl overflow-hidden shadow-lg backdrop-blur-md bg-black/35 border border-white/20">
        <div class="flex items-stretch h-10 md:h-auto">
            <div class="bg-yellow-400 w-10 md:w-14 flex items-center justify-center font-bold text-lg md:text-2xl text-black">
                1
            </div>
            <div class="flex-1 px-3 md:px-4 bg-black/35 text-white font-bold text-sm md:text-lg flex items-center">
                {{ __('Masukkan Data Akun') }}
            </div>
        </div>
        
        <div class="p-3 md:p-6">
            @if($selectedCategory->input_type == 'id_zone')
                <div class="grid grid-cols-12 gap-2 md:gap-4">
                    <div class="col-span-7 md:col-span-8">
                        <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">User ID</label>
                        <input type="text" name="user_id" placeholder="Masukkan User ID" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400" required>
                    </div>
                    <div class="col-span-5 md:col-span-4">
                        <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">Zone ID</label>
                        <input type="text" name="zone_id" placeholder="Zone ID" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400" required>
                    </div>
                </div>
            @elseif($selectedCategory->input_type == 'user_id_server')
                <div class="grid grid-cols-12 gap-2 md:gap-4">
                    <div class="col-span-7 md:col-span-8">
                        <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">User ID</label>
                        <input type="text" name="user_id" placeholder="Masukkan User ID" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400" required>
                    </div>
                    <div class="col-span-5 md:col-span-4">
                        <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">Server</label>
                        <input type="text" name="server_id" placeholder="Server" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400" required>
                    </div>
                </div>
            @elseif($selectedCategory->input_type == 'user_id_server_global')
                <div class="grid grid-cols-12 gap-2 md:gap-4">
                    <div class="col-span-7 md:col-span-8">
                        <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">User ID</label>
                        <input type="text" name="user_id" placeholder="Masukkan User ID" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400" required>
                    </div>
                    <div class="col-span-5 md:col-span-4">
                        <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">Server</label>
                        <select name="server_id" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400 appearance-none" required>
                            <option value="" disabled selected>Pilih Server</option>
                            <option value="Global">Global</option>
                            <option value="SEA">SEA</option>
                            <option value="America">America</option>
                            <option value="Asia">Asia</option>
                            <option value="TW,HK,MO">TW,HK,MO</option>
                        </select>
                    </div>
                </div>
            @elseif($selectedCategory->input_type == 'user_id_server_v2')
                <div class="grid grid-cols-12 gap-2 md:gap-4">
                    <div class="col-span-7 md:col-span-8">
                        <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">User ID</label>
                        <input type="text" name="user_id" placeholder="Masukkan User ID" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400" required>
                    </div>
                    <div class="col-span-5 md:col-span-4">
                        <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">Server</label>
                        <select name="server_id" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400 appearance-none" required>
                            <option value="" disabled selected>Pilih Server</option>
                            <option value="North America">North America</option>
                            <option value="Europe">Europe</option>
                            <option value="Asia">Asia</option>
                            <option value="South America">South America</option>
                            <option value="Oceania">Oceania</option>
                        </select>
                    </div>
                </div>
            @elseif($selectedCategory->input_type == 'username')
                <div>
                    <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">Username</label>
                    <input type="text" name="username" placeholder="Masukkan Username" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400" required>
                </div>
            @elseif($selectedCategory->input_type == 'user_id')
                <div>
                    <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">User ID</label>
                    <input type="text" name="user_id" placeholder="Masukkan User ID" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400" required>
                </div>
            @elseif($selectedCategory->input_type == 'email')
                <div>
                    <label class="block text-[10px] md:text-sm font-medium mb-0.5 md:mb-2 opacity-80 text-white">Email Address</label>
                    <input type="email" name="email" placeholder="Masukkan Email" class="w-full px-3 py-1.5 md:px-4 md:py-3 text-sm md:text-base rounded-md md:rounded-xl border border-white/20 bg-black/35 text-white focus:ring-2 focus:ring-yellow-500 focus:outline-none transition placeholder-gray-400" required>
                </div>
            @endif
            
            <p class="mt-1.5 md:mt-3 text-[10px] md:text-xs opacity-60 italic leading-tight text-white">
                *Silakan masukkan data akun Anda dengan benar untuk proses transaksi otomatis.
            </p>
        </div>
    </div>

    <div class="mb-4 md:mb-8 rounded-lg md:rounded-2xl overflow-hidden shadow-lg backdrop-blur-md bg-black/35 border border-white/20">
        <div class="flex items-stretch h-10 md:h-auto">
            <div class="bg-yellow-400 w-10 md:w-14 flex items-center justify-center font-bold text-lg md:text-2xl text-black">
                2
            </div>
            <div class="flex-1 px-3 md:px-4 bg-black/35 text-white font-bold text-sm md:text-lg flex items-center">
                {{ __('Pilih ') }} {{ $selectedCategory->product_name ?? 'Produk' }}
            </div>
        </div>
        
        <div class="p-3 md:p-6">
            <!-- Product Grid -->
            <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
                @forelse($products as $product)
                    <label class="relative cursor-pointer group">
                        <input type="radio" name="product_id_radio" value="{{ $product->id }}" class="hidden product-radio" onchange="selectProduct('{{ $product->id }}')">
                        <div class="product-card bg-black/35 rounded-xl overflow-hidden border-2 border-transparent transition-all duration-300 shadow-md flex flex-col h-full">
                            <div class="p-3 pb-2 flex-grow">
                                <!-- Title -->
                                <h3 class="text-white font-bold text-xs md:text-base mb-1 leading-tight truncate">{{ $product->name }}</h3>
                                
                                <!-- Icon + Price -->
                                <div class="flex items-center gap-2">
                                    <!-- Icon -->
                                    <div class="w-7 h-7 md:w-9 md:h-9 flex-shrink-0">
                                        @if($product->image)
                                            <img src="{{ asset($product->image) }}" alt="{{ $product->name }}" class="w-full h-full object-contain">
                                        @else
                                            <i class="fas fa-coins text-yellow-500 text-xl md:text-2xl"></i>
                                        @endif
                                    </div>
                                    
                                    <!-- Price -->
                                    <div class="flex flex-col">
                                        @if($product->discount_percentage > 0)
                                            <span class="text-[10px] md:text-xs text-gray-400 line-through leading-none">
                                                {{ \App\Models\Setting::get('currency_symbol', 'Rp') }} {{ number_format($product->starting_price, 0, ',', '.') }}
                                            </span>
                                        @endif
                                        <span class="text-gray-100 font-bold text-sm md:text-lg truncate leading-tight">
                                             {{ \App\Models\Setting::get('currency_symbol', 'Rp') }} {{ number_format($product->starting_price * (1 - $product->discount_percentage/100), 0, ',', '.') }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- Bottom / Instant Badge Section -->
                            <div class="px-3 py-1.5 bg-gray-400/20 flex justify-between items-center mt-auto">
                                 <!-- Discount Badge -->
                                 @if($product->discount_percentage > 0)
                                    <div class="bg-gray-300/80 rounded px-2 py-1 flex items-center shadow-sm">
                                        <span class="text-[10px] md:text-xs text-gray-800 font-bold">Disc {{ $product->discount_percentage }}%</span>
                                    </div>
                                 @else
                                    <div></div>
                                 @endif

                                 <div class="bg-white rounded px-2 py-0.5 flex items-center gap-1 shadow-sm">
                                    <i class="fas fa-bolt text-green-600 text-[10px] md:text-sm"></i>
                                    <div class="flex flex-col leading-none">
                                        <span class="text-[7px] md:text-[9px] text-gray-500 font-bold italic tracking-wider">Pengiriman</span>
                                        <span class="text-[10px] md:text-xs text-gray-800 font-black italic uppercase">INSTAN</span>
                                    </div>
                                 </div>
                            </div>
                        </div>
                        
                        <!-- Checkmark for selection -->
                        <div class="absolute -top-3 right-9 md:right-11 bg-yellow-500 text-black w-6 h-6 md:w-8 md:h-8 rounded-full flex items-center justify-center shadow-lg opacity-0 transition-opacity duration-300 selection-check z-10 pointer-events-none border-2 border-white">
                            <i class="fas fa-check text-xs md:text-sm font-bold"></i>
                        </div>

                        <!-- Add to Cart Button -->
                        <button type="button" onclick="addToCart(event, '{{ $product->id }}', '{{ $product->image ? asset($product->image) : '' }}')" class="absolute -top-3 -right-3 z-20 w-8 h-8 md:w-10 md:h-10 bg-black rounded-full flex items-center justify-center shadow-[0_0_10px_rgba(0,0,0,0.3)] hover:scale-110 transition-transform duration-200 border-2 border-white group/cartbtn">
                             <i class="fas fa-shopping-cart text-white text-[10px] md:text-xs font-bold group-hover/cartbtn:animate-bounce relative -left-[1px]"></i>
                             <div class="absolute -bottom-1 -right-1 bg-yellow-500 text-black text-[8px] md:text-[10px] w-4 h-4 md:w-5 md:h-5 rounded-full flex items-center justify-center border border-white font-bold">+</div>
                        </button>
                    </label>
                @empty
                    <div class="col-span-full text-center py-12">
                        <div class="flex flex-col items-center justify-center" style="color: var(--text-muted);">
                            <i class="fas fa-box-open text-6xl mb-4"></i>
                            <p>{{ __('Belum ada produk untuk kategori ini.') }}</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Payment Buttons Section -->
    <div class="mb-4 md:mb-8 rounded-lg md:rounded-2xl overflow-hidden shadow-lg backdrop-blur-md bg-black/35 border border-white/20">
        <div class="flex items-stretch h-10 md:h-auto">
            <div class="bg-yellow-400 w-10 md:w-14 flex items-center justify-center font-bold text-lg md:text-2xl text-black">
                3
            </div>
            <div class="flex-1 px-3 md:px-4 bg-black/35 text-white font-bold text-sm md:text-lg flex items-center">
                {{ __('Pilih Pembayaran') }}
            </div>
        </div>
        
        <div class="p-3 md:p-4 space-y-2">
            <button type="button" onclick="submitOrder('website')" class="w-full bg-yellow-700 text-white font-bold py-2 md:py-3 rounded-lg md:rounded-xl hover:bg-yellow-800 transition shadow-lg flex items-center justify-center gap-2">
                <i class="fas fa-credit-card text-base md:text-lg"></i>
                <span class="text-sm md:text-base">Pembayaran via Website</span>
            </button>
            
            <button type="button" onclick="submitOrder('whatsapp')" class="w-full bg-green-500 text-white font-bold py-2 md:py-3 rounded-lg md:rounded-xl hover:bg-green-600 transition shadow-lg flex items-center justify-center gap-2">
                <i class="fab fa-whatsapp text-lg md:text-xl"></i>
                <span class="text-sm md:text-base">Pembayaran via WhatsApp</span>
            </button>
        </div>
    </div>
</form>
@endif

<!-- Reviews Section -->
<div class="mb-4 md:mb-8 rounded-lg md:rounded-2xl overflow-hidden shadow-lg backdrop-blur-md bg-black/35 border border-white/20 mt-8">
    <div class="flex items-stretch h-10 md:h-auto">
        <div class="bg-yellow-400 w-10 md:w-14 flex items-center justify-center font-bold text-lg md:text-2xl text-black">
            <i class="fas fa-star"></i>
        </div>
        <div class="flex-1 px-3 md:px-4 bg-black/35 text-white font-bold text-sm md:text-lg flex items-center">
            {{ __('Testimoni Member') }}
        </div>
    </div>
    
    <div class="p-3 md:p-6 grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
        <!-- Reviews List -->
        <div class="space-y-6" id="reviews-section">
            @if(isset($allReviews))
                @forelse($allReviews as $review)
                    <div class="border-b border-white/10 pb-6 last:border-0">
                        <div class="flex items-center gap-2 mb-2">
                            @if($review->profile_photo)
                                <img src="{{ $review->profile_photo }}" alt="{{ $review->user->name }}" class="w-10 h-10 rounded-full object-cover">
                            @else
                                <div class="w-10 h-10 bg-yellow-500/20 rounded-full flex items-center justify-center text-yellow-400 font-bold">
                                    {{ substr($review->user->name, 0, 1) }}
                                </div>
                            @endif
                            <div>
                                        <p class="font-semibold text-white">{{ $review->user->name }}</p>
                                        <div class="flex text-[#ffce3d] text-xs">
                                            @for($i=1; $i<=5; $i++)
                                                <i class="fas fa-star {{ $i <= $review->rating ? '' : 'text-gray-600' }}"></i>
                                            @endfor
                                        </div>
                                    </div>
                            <span class="ml-auto text-xs text-[#ffce3d] font-semibold">
                                {{ $review->product ? $review->product->name : 'Umum' }}
                            </span>
                        </div>
                        <p class="text-gray-300 text-sm mb-3">{{ $review->comment }}</p>
                        
                        @if(!empty($review->video_url) || (!empty($review->images) && is_array($review->images)) || $review->image)
                            <div class="flex gap-2 overflow-x-auto pb-2">
                                <!-- Video Thumbnail -->
                                @if(!empty($review->video_url))
                                    @php
                                        $video_id = '';
                                        $is_youtube = false;
                                        if(preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $review->video_url, $match)) {
                                            $video_id = $match[1];
                                            $is_youtube = true;
                                        }
                                    @endphp
                                    
                                    <div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border border-white/20 relative group cursor-pointer" 
                                         onclick="{{ $is_youtube ? "openVideoModal('$video_id')" : "openVideoUrlModal('$review->video_url')" }}">
                                        @if($is_youtube)
                                            <img src="https://img.youtube.com/vi/{{ $video_id }}/mqdefault.jpg" alt="Video Review" class="w-full h-full object-cover">
                                        @else
                                            <video src="{{ $review->video_url }}#t=0.1" class="w-full h-full object-cover" muted preload="metadata"></video>
                                        @endif
                                        
                                        <!-- Overlay -->
                                        <div class="absolute bottom-1 right-1 bg-black bg-opacity-70 rounded px-1.5 py-0.5 flex items-center">
                                            <i class="fas fa-video text-white text-[10px] mr-1"></i>
                                            <span class="text-white text-[10px] font-medium">Video</span>
                                        </div>
                                        
                                        <!-- Play Button Overlay (Centered) -->
                                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition bg-black bg-opacity-20">
                                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-lg">
                                                <i class="fas fa-play text-gray-800 text-xs ml-0.5"></i>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <!-- Images -->
                                @if(!empty($review->images) && is_array($review->images))
                                    @foreach($review->images as $img)
                                        <div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border border-white/20 cursor-pointer" onclick="openImageModal('{{ $img }}')">
                                            <img src="{{ $img }}" alt="Review Image" class="w-full h-full object-cover hover:scale-105 transition duration-300">
                                        </div>
                                    @endforeach
                                @elseif($review->image)
                                     <div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border border-white/20 cursor-pointer" onclick="openImageModal('{{ $review->image }}')">
                                        <img src="{{ $review->image }}" alt="Review Image" class="w-full h-full object-cover hover:scale-105 transition duration-300">
                                    </div>
                                @endif
                            </div>
                        @endif

                        <!-- Admin Reply -->
                        @if($review->reply_comment)
                            <div class="mt-4 ml-4 md:ml-12">
                                <div class="text-[#ffce3d] text-sm italic mb-1">Balasan Admin</div>
                                <div class="bg-white/5 rounded-xl p-4 border-l-4 border-yellow-500 relative">
                                    <div class="flex items-start gap-3">
                                        <div class="flex-shrink-0">
                                            @if(isset($globalAdminPhoto) && $globalAdminPhoto)
                                                <img src="{{ $globalAdminPhoto }}" alt="Admin" class="w-10 h-10 rounded-full object-cover border-2 border-yellow-500/50">
                                            @elseif($review->admin_photo)
                                                <img src="{{ $review->admin_photo }}" alt="Admin" class="w-10 h-10 rounded-full object-cover border-2 border-yellow-500/50">
                                            @else
                                                <div class="w-10 h-10 rounded-full bg-yellow-600 flex items-center justify-center text-white font-bold text-xs border-2 border-yellow-500/50">
                                                    ADM
                                                </div>
                                            @endif
                                        </div>
                                        <div>
                                            <div class="flex items-center gap-2 mb-1">
                                                <span class="text-sm font-bold text-[#ffce3d]">Admin {{ $storeName ?? 'Response' }}</span>
                                                <i class="fas fa-check-circle text-blue-500 text-xs" title="Verified Admin"></i>
                                            </div>
                                            <p class="text-gray-300 text-sm italic">
                                                {{ $review->reply_comment }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                    </div>
                @empty
                    <p class="text-gray-400 italic">Belum ada testimoni dari member kami.</p>
                @endforelse
            @else
                 <p class="text-gray-400 italic">Belum ada testimoni dari member kami.</p>
            @endif

            <!-- Pagination Buttons -->
            @if($allReviews->hasPages())
            <div class="flex justify-between items-center mt-6 pt-4 border-t border-white/10">
                <!-- Previous Button -->
                @if($allReviews->onFirstPage())
                    <button class="px-4 py-2 bg-gray-700/50 text-gray-500 rounded-lg cursor-not-allowed text-sm font-semibold transition" disabled>
                        « Previous
                    </button>
                @else
                    <button onclick="loadPagination('{{ $allReviews->previousPageUrl() }}')" class="px-4 py-2 bg-gray-800 text-white border border-white/10 rounded-lg hover:bg-gray-700 hover:border-yellow-500 hover:text-yellow-500 text-sm font-semibold transition shadow-lg">
                        « Previous
                    </button>
                @endif

                <!-- Next Button -->
                @if($allReviews->hasMorePages())
                    <button onclick="loadPagination('{{ $allReviews->nextPageUrl() }}')" class="px-4 py-2 bg-gray-800 text-white border border-white/10 rounded-lg hover:bg-gray-700 hover:border-yellow-500 hover:text-yellow-500 text-sm font-semibold transition shadow-lg">
                        Next »
                    </button>
                @else
                    <button class="px-4 py-2 bg-gray-700/50 text-gray-500 rounded-lg cursor-not-allowed text-sm font-semibold transition" disabled>
                        Next »
                    </button>
                @endif
            </div>
            @endif
        </div>

        <!-- Add Review Form -->
        <div class="bg-black/20 border border-white/10 p-6 rounded-lg">
            <h3 class="font-bold text-lg mb-4 text-white">Tulis Testimoni</h3>
            <form action="#" method="POST" onsubmit="showMemberModal(); return false;">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-white opacity-80 mb-1">Rating</label>
                    <select name="rating" class="w-full px-4 py-2 border border-white/20 bg-black/35 text-white rounded focus:ring-yellow-500 focus:border-yellow-500">
                        <option value="5">⭐⭐⭐⭐⭐ (Sangat Puas)</option>
                        <option value="4">⭐⭐⭐⭐ (Puas)</option>
                        <option value="3">⭐⭐⭐ (Cukup)</option>
                        <option value="2">⭐⭐ (Kurang)</option>
                        <option value="1">⭐ (Kecewa)</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-white opacity-80 mb-1">Komentar</label>
                    <textarea name="comment" rows="3" class="w-full px-4 py-2 border border-white/20 bg-black/35 text-white rounded focus:ring-yellow-500 focus:border-yellow-500 placeholder-gray-400" placeholder="Ceritakan pengalaman Anda..."></textarea>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-white opacity-80 mb-1">Foto & Video (Opsional)</label>
                    <div class="flex gap-2">
                        <label class="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-black/35 text-gray-300 rounded-lg border border-dashed border-white/20 cursor-pointer hover:bg-white/5 hover:border-yellow-500 hover:text-yellow-500 transition group" onclick="showMemberModal(); return false;">
                            <i class="fas fa-camera text-base group-hover:scale-110 transition-transform"></i>
                            <span class="text-xs font-medium">Upload Foto</span>
                        </label>
                        <label class="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-black/35 text-gray-300 rounded-lg border border-dashed border-white/20 cursor-pointer hover:bg-white/5 hover:border-yellow-500 hover:text-yellow-500 transition group" onclick="showMemberModal(); return false;">
                            <i class="fas fa-video text-base group-hover:scale-110 transition-transform"></i>
                            <span class="text-xs font-medium">Upload Video</span>
                        </label>
                    </div>
                </div>

                <button type="button" onclick="showMemberModal()" class="w-full bg-[#ffce3d] text-black font-bold py-2 rounded hover:bg-yellow-400 transition shadow-lg">
                    Kirim Testimoni
                </button>
            </form>
        </div>
    </div>
</div>