<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Review Management - Ryll Store</title>
    <link rel="icon" type="image/webp" href="{{ asset('images/ryll.webp') }}">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Alpine.js -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
    
    <style>
        .font-orbitron { font-family: 'Orbitron', sans-serif; }
        
        [x-cloak] {
            display: none !important;
        }
        
        body { 
            background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%); 
        }
        
        .glow-border {
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
            border: 1px solid rgba(6, 182, 212, 0.5);
        }
        
        .card-stat {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
            backdrop-filter: blur(10px);
        }
        
        .btn-approve {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }
        
        .btn-reject {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }
        
        .btn-delete {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        }

        /* Mobile responsive table */
        @media (max-width: 768px) {
            .desktop-table { display: none; }
            .mobile-cards { display: block; }
        }
        
        @media (min-width: 769px) {
            .desktop-table { display: table; }
            .mobile-cards { display: none; }
        }
    </style>
</head>
<body class="min-h-screen text-white" x-data="reviewManager()">

<!-- Navbar -->
@include('components.admin-navbar')

<div class="max-w-7xl mx-auto px-4 py-8">
    
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-2xl md:text-3xl font-bold font-orbitron mb-2">
            <i class="fas fa-star text-yellow-400 mr-3"></i>REVIEW MANAGEMENT
        </h1>
        <p class="text-sm md:text-base text-gray-400">Manage customer reviews and ratings</p>
    </div>
    
    <!-- ✅ ENHANCED STATS (4 → 6 Cards) -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-6 mb-8">
        <!-- Total -->
        <div class="card-stat glow-border rounded-xl md:rounded-2xl p-4 md:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-[10px] md:text-sm uppercase mb-1 md:mb-2">TOTAL</p>
                    <p class="text-2xl md:text-3xl font-bold">{{ $stats['total'] }}</p>
                </div>
                <div class="w-10 h-10 md:w-14 md:h-14 bg-blue-500/20 rounded-lg md:rounded-xl flex items-center justify-center">
                    <i class="fas fa-comments text-lg md:text-2xl text-blue-400"></i>
                </div>
            </div>
        </div>
        
        <!-- Pending -->
        <div class="card-stat glow-border rounded-xl md:rounded-2xl p-4 md:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-[10px] md:text-sm uppercase mb-1 md:mb-2">PENDING</p>
                    <p class="text-2xl md:text-3xl font-bold text-yellow-400">{{ $stats['pending'] }}</p>
                </div>
                <div class="w-10 h-10 md:w-14 md:h-14 bg-yellow-500/20 rounded-lg md:rounded-xl flex items-center justify-center">
                    <i class="fas fa-clock text-lg md:text-2xl text-yellow-400"></i>
                </div>
            </div>
        </div>
        
        <!-- Approved -->
        <div class="card-stat glow-border rounded-xl md:rounded-2xl p-4 md:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-[10px] md:text-sm uppercase mb-1 md:mb-2">APPROVED</p>
                    <p class="text-2xl md:text-3xl font-bold text-green-400">{{ $stats['approved'] }}</p>
                </div>
                <div class="w-10 h-10 md:w-14 md:h-14 bg-green-500/20 rounded-lg md:rounded-xl flex items-center justify-center">
                    <i class="fas fa-check-circle text-lg md:text-2xl text-green-400"></i>
                </div>
            </div>
        </div>
        
        <!-- Rejected -->
        <div class="card-stat glow-border rounded-xl md:rounded-2xl p-4 md:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-[10px] md:text-sm uppercase mb-1 md:mb-2">REJECTED</p>
                    <p class="text-2xl md:text-3xl font-bold text-red-400">{{ $stats['rejected'] }}</p>
                </div>
                <div class="w-10 h-10 md:w-14 md:h-14 bg-red-500/20 rounded-lg md:rounded-xl flex items-center justify-center">
                    <i class="fas fa-times-circle text-lg md:text-2xl text-red-400"></i>
                </div>
            </div>
        </div>

        <!-- ✅ NEW: Average Rating -->
        <div class="card-stat glow-border rounded-xl md:rounded-2xl p-4 md:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-[10px] md:text-sm uppercase mb-1 md:mb-2">AVG RATING</p>
                    @php
                        $avgRating = DB::table('reviews')->where('status', 'approved')->avg('rating');
                    @endphp
                    <p class="text-2xl md:text-3xl font-bold text-yellow-400">{{ number_format($avgRating ?? 0, 1) }}</p>
                </div>
                <div class="w-10 h-10 md:w-14 md:h-14 bg-yellow-500/20 rounded-lg md:rounded-xl flex items-center justify-center">
                    <i class="fas fa-star text-lg md:text-2xl text-yellow-400"></i>
                </div>
            </div>
        </div>

        <!-- ✅ NEW: Verified Purchases -->
        <div class="card-stat glow-border rounded-xl md:rounded-2xl p-4 md:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-[10px] md:text-sm uppercase mb-1 md:mb-2">VERIFIED</p>
                    @php
                        $verifiedCount = DB::table('reviews')->where('is_verified_purchase', 1)->count();
                    @endphp
                    <p class="text-2xl md:text-3xl font-bold text-cyan-400">{{ $verifiedCount }}</p>
                </div>
                <div class="w-10 h-10 md:w-14 md:h-14 bg-cyan-500/20 rounded-lg md:rounded-xl flex items-center justify-center">
                    <i class="fas fa-badge-check text-lg md:text-2xl text-cyan-400"></i>
                </div>
            </div>
        </div>
    </div>
    
    <!-- ✅ ENHANCED FILTERS & SEARCH -->
    <div class="bg-gray-900/50 glow-border rounded-xl md:rounded-2xl p-4 md:p-6 mb-8">
        <h3 class="text-base md:text-lg font-bold mb-4 flex items-center gap-2">
            <i class="fas fa-filter text-cyan-400"></i>
            Filter & Search Reviews
        </h3>
        
        <form method="GET" action="{{ route('account.reviews.index') }}" class="space-y-4">
            <!-- First Row: Search + Status -->
            <div class="flex flex-col md:flex-row gap-3">
                <!-- ✅ SEARCH INPUT -->
                <div class="flex-1 relative">
                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-500"></i>
                    <input type="text" 
                           name="search" 
                           value="{{ request('search') }}"
                           placeholder="Search by customer name, email, product..."
                           class="w-full pl-12 pr-4 py-2 md:py-3 bg-gray-800 border border-cyan-500/30 rounded-lg text-white text-sm focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50">
                </div>

                <!-- Status Filter -->
                <select name="status" class="px-4 py-2 md:py-3 bg-gray-800 border border-cyan-500/30 rounded-lg text-white text-sm focus:border-cyan-500 focus:outline-none">
                    <option value="all" {{ request('status', 'all') === 'all' ? 'selected' : '' }}>All Status</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                    <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                </select>

                <!-- ✅ RATING FILTER -->
                <select name="rating" class="px-4 py-2 md:py-3 bg-gray-800 border border-cyan-500/30 rounded-lg text-white text-sm focus:border-cyan-500 focus:outline-none">
                    <option value="all" {{ request('rating', 'all') === 'all' ? 'selected' : '' }}>All Ratings</option>
                    <option value="5" {{ request('rating') === '5' ? 'selected' : '' }}>⭐⭐⭐⭐⭐ (5 Stars)</option>
                    <option value="4" {{ request('rating') === '4' ? 'selected' : '' }}>⭐⭐⭐⭐ (4 Stars)</option>
                    <option value="3" {{ request('rating') === '3' ? 'selected' : '' }}>⭐⭐⭐ (3 Stars)</option>
                    <option value="2" {{ request('rating') === '2' ? 'selected' : '' }}>⭐⭐ (2 Stars)</option>
                    <option value="1" {{ request('rating') === '1' ? 'selected' : '' }}>⭐ (1 Star)</option>
                </select>
            </div>

            <!-- Second Row: Quick Filters + Actions -->
            <div class="flex flex-wrap items-center gap-2">
                <!-- ✅ VERIFIED FILTER -->
                <label class="flex items-center gap-2 px-3 py-2 bg-gray-800 rounded-lg cursor-pointer hover:bg-gray-700 transition text-sm">
                    <input type="checkbox" 
                           name="verified" 
                           value="1"
                           {{ request('verified') ? 'checked' : '' }}
                           class="w-4 h-4 rounded bg-gray-700 border-gray-600 text-cyan-500">
                    <span class="text-gray-300">Verified Only</span>
                </label>

                <!-- Filter Buttons -->
                <button type="submit" class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-bold hover:scale-105 transition text-sm">
                    <i class="fas fa-search mr-2"></i>Apply Filters
                </button>
                
                @if(request('search') || request('status') !== 'all' || request('rating') !== 'all' || request('verified'))
                <a href="{{ route('account.reviews.index') }}" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition text-sm">
                    <i class="fas fa-redo mr-2"></i>Clear All
                </a>
                @endif
            </div>
        </form>
    </div>

    <!-- ✅ BULK ACTIONS BAR -->
    <div x-show="selectedReviews.length > 0" 
         x-cloak
         class="bg-cyan-500/10 border border-cyan-500/30 rounded-xl p-4 mb-6 flex flex-wrap items-center gap-3">
        <span class="text-sm font-bold text-cyan-400">
            <i class="fas fa-check-square mr-2"></i>
            <span x-text="selectedReviews.length"></span> selected
        </span>
        
        <button @click="bulkAction('approve')" class="btn-approve px-4 py-2 rounded-lg text-white text-sm hover:opacity-80 transition">
            <i class="fas fa-check mr-2"></i>Bulk Approve
        </button>
        
        <button @click="bulkAction('reject')" class="btn-reject px-4 py-2 rounded-lg text-white text-sm hover:opacity-80 transition">
            <i class="fas fa-ban mr-2"></i>Bulk Reject
        </button>
        
        <button @click="bulkAction('delete')" class="btn-delete px-4 py-2 rounded-lg text-white text-sm hover:opacity-80 transition">
            <i class="fas fa-trash mr-2"></i>Bulk Delete
        </button>

        <button @click="selectedReviews = []" class="ml-auto px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition text-sm">
            Clear Selection
        </button>
    </div>
    
    <!-- Reviews List -->
    <div class="bg-gray-900/50 glow-border rounded-xl md:rounded-2xl p-4 md:p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-base md:text-lg font-bold flex items-center gap-2">
                <i class="fas fa-list text-cyan-400"></i>
                Reviews List
            </h3>
            <p class="text-sm text-gray-400">
                Showing {{ $reviews->count() }} of {{ $reviews->total() }}
            </p>
        </div>
        
        @if(session('success'))
        <div class="bg-green-500/20 border border-green-500 rounded-lg p-4 mb-6">
            <i class="fas fa-check-circle text-green-400 mr-2"></i>
            <span class="text-green-400">{{ session('success') }}</span>
        </div>
        @endif
        
        @if($reviews->isEmpty())
        <div class="text-center py-12">
            <i class="fas fa-inbox text-5xl md:text-6xl text-gray-600 mb-4"></i>
            <p class="text-gray-400 mb-4">No reviews found</p>
            @if(request('search') || request('status') !== 'all' || request('rating') !== 'all' || request('verified'))
            <a href="{{ route('account.reviews.index') }}" class="inline-block px-6 py-3 bg-cyan-500 hover:bg-cyan-600 rounded-lg transition">
                <i class="fas fa-redo mr-2"></i>Clear Filters
            </a>
            @endif
        </div>
        @else
        
        <!-- ✅ DESKTOP TABLE -->
        <div class="overflow-x-auto">
            <table class="w-full desktop-table">
                <thead>
                    <tr class="border-b border-gray-700">
                        <th class="text-left py-4 px-4">
                            <input type="checkbox" 
                                   @change="toggleSelectAll($event)"
                                   :checked="selectedReviews.length === allReviewIds.length && allReviewIds.length > 0"
                                   class="w-4 h-4 rounded bg-gray-700 border-gray-600 text-cyan-500">
                        </th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">CUSTOMER</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">PRODUCT</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">RATING</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">COMMENT</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">STATUS</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">DATE</th>
                        <th class="text-left py-4 px-4 text-xs md:text-sm text-gray-400 font-semibold">ACTIONS</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($reviews as $review)
                    <tr class="border-b border-gray-800 hover:bg-gray-800/50 transition">
                        <td class="py-4 px-4">
                            <input type="checkbox" 
                                   value="{{ $review->id }}"
                                   @change="toggleSelect({{ $review->id }})"
                                   :checked="selectedReviews.includes({{ $review->id }})"
                                   class="w-4 h-4 rounded bg-gray-700 border-gray-600 text-cyan-500">
                        </td>
                        <td class="py-4 px-4">
                            <div>
                                <p class="font-bold text-sm md:text-base">{{ $review->reviewer_name }}</p>
                                <p class="text-xs md:text-sm text-gray-400">{{ $review->reviewer_email }}</p>
                                @if($review->is_verified_purchase)
                                <span class="inline-block mt-1 px-2 py-1 bg-green-500/20 text-green-400 rounded text-xs">
                                    <i class="fas fa-check-circle"></i> Verified
                                </span>
                                @endif
                            </div>
                        </td>
                        <td class="py-4 px-4">
                            <div>
                                <p class="font-bold text-sm">{{ Str::limit($review->product_name, 30) }}</p>
                                <p class="text-xs text-gray-400">{{ $review->category_name }}</p>
                                <p class="text-xs text-gray-500">SKU: {{ $review->product_sku }}</p>
                            </div>
                        </td>
                        <td class="py-4 px-4">
                            <div class="flex gap-1 text-yellow-400 text-sm">
                                @for($i = 1; $i <= 5; $i++)
                                    @if($i <= $review->rating)
                                        <i class="fas fa-star"></i>
                                    @else
                                        <i class="far fa-star text-gray-600"></i>
                                    @endif
                                @endfor
                            </div>
                            <p class="text-xs text-gray-400 mt-1">{{ $review->rating }}/5</p>
                        </td>
                        <td class="py-4 px-4 max-w-xs">
                            <p class="text-xs md:text-sm text-gray-300 line-clamp-2 cursor-pointer hover:text-white transition"
                               @click="viewFullComment('{{ addslashes($review->comment) }}', '{{ addslashes($review->reviewer_name) }}')">
                                {{ Str::limit($review->comment, 80) }}
                            </p>
                            @if(strlen($review->comment) > 80)
                            <button @click="viewFullComment('{{ addslashes($review->comment) }}', '{{ addslashes($review->reviewer_name) }}')"
                                    class="text-xs text-cyan-400 hover:text-cyan-300 mt-1">
                                Read more...
                            </button>
                            @endif
                        </td>
                        <td class="py-4 px-4">
                            @if($review->status === 'pending')
                            <span class="px-2 md:px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-xs md:text-sm">
                                <i class="fas fa-clock"></i> Pending
                            </span>
                            @elseif($review->status === 'approved')
                            <span class="px-2 md:px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-xs md:text-sm">
                                <i class="fas fa-check"></i> Approved
                            </span>
                            @else
                            <span class="px-2 md:px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs md:text-sm">
                                <i class="fas fa-times"></i> Rejected
                            </span>
                            @endif
                        </td>
                        <td class="py-4 px-4">
                            <p class="text-xs md:text-sm">{{ \Carbon\Carbon::parse($review->created_at)->format('d M Y') }}</p>
                            <p class="text-xs text-gray-400">{{ \Carbon\Carbon::parse($review->created_at)->format('H:i') }}</p>
                        </td>
                        <td class="py-4 px-4">
                            <div class="flex gap-2">
                                @if($review->status !== 'approved')
                                <form method="POST" action="{{ route('account.reviews.approve', $review->id) }}">
                                    @csrf
                                    <button type="submit" class="btn-approve px-2 md:px-3 py-2 rounded-lg text-white text-xs md:text-sm hover:opacity-80 transition" title="Approve">
                                        <i class="fas fa-check"></i>
                                    </button>
                                </form>
                                @endif
                                
                                @if($review->status !== 'rejected')
                                <form method="POST" action="{{ route('account.reviews.reject', $review->id) }}">
                                    @csrf
                                    <button type="submit" class="btn-reject px-2 md:px-3 py-2 rounded-lg text-white text-xs md:text-sm hover:opacity-80 transition" title="Reject">
                                        <i class="fas fa-ban"></i>
                                    </button>
                                </form>
                                @endif
                                
                                <form method="POST" action="{{ route('account.reviews.destroy', $review->id) }}" onsubmit="return confirm('Delete this review?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-delete px-2 md:px-3 py-2 rounded-lg text-white text-xs md:text-sm hover:opacity-80 transition" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- ✅ MOBILE CARDS -->
        <div class="mobile-cards space-y-4">
            @foreach($reviews as $review)
            <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-4">
                <!-- Header -->
                <div class="flex items-start gap-3 mb-3">
                    <input type="checkbox" 
                           value="{{ $review->id }}"
                           @change="toggleSelect({{ $review->id }})"
                           :checked="selectedReviews.includes({{ $review->id }})"
                           class="mt-1 w-4 h-4 rounded bg-gray-700 border-gray-600 text-cyan-500">
                    
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-2">
                            <p class="font-bold text-sm">{{ $review->reviewer_name }}</p>
                            <span class="text-xs text-gray-500">#{{ $review->id }}</span>
                        </div>
                        <p class="text-xs text-gray-400 mb-2">{{ $review->reviewer_email }}</p>
                        
                        <!-- Rating -->
                        <div class="flex gap-1 text-yellow-400 text-sm mb-2">
                            @for($i = 1; $i <= 5; $i++)
                                @if($i <= $review->rating)
                                    <i class="fas fa-star"></i>
                                @else
                                    <i class="far fa-star text-gray-600"></i>
                                @endif
                            @endfor
                            <span class="text-xs text-gray-400 ml-2">{{ $review->rating }}/5</span>
                        </div>
                    </div>
                </div>

                <!-- Product Info -->
                <div class="bg-gray-900/50 rounded-lg p-3 mb-3">
                    <p class="text-xs text-gray-500 mb-1">Product:</p>
                    <p class="text-sm font-bold text-white">{{ $review->product_name }}</p>
                    <p class="text-xs text-gray-400">{{ $review->category_name }}</p>
                </div>

                <!-- Comment -->
                <div class="mb-3">
                    <p class="text-sm text-gray-300">{{ Str::limit($review->comment, 100) }}</p>
                    @if(strlen($review->comment) > 100)
                    <button @click="viewFullComment('{{ addslashes($review->comment) }}', '{{ addslashes($review->reviewer_name) }}')"
                            class="text-xs text-cyan-400 hover:text-cyan-300 mt-1">
                        Read more...
                    </button>
                    @endif
                </div>

                <!-- Status & Date -->
                <div class="flex items-center justify-between mb-3">
                    @if($review->status === 'pending')
                    <span class="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-xs">
                        <i class="fas fa-clock"></i> Pending
                    </span>
                    @elseif($review->status === 'approved')
                    <span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-xs">
                        <i class="fas fa-check"></i> Approved
                    </span>
                    @else
                    <span class="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs">
                        <i class="fas fa-times"></i> Rejected
                    </span>
                    @endif

                    <p class="text-xs text-gray-400">{{ \Carbon\Carbon::parse($review->created_at)->format('d M Y') }}</p>
                </div>

                <!-- Actions -->
                <div class="flex gap-2">
                    @if($review->status !== 'approved')
                    <form method="POST" action="{{ route('account.reviews.approve', $review->id) }}" class="flex-1">
                        @csrf
                        <button type="submit" class="btn-approve w-full px-3 py-2 rounded-lg text-white text-xs hover:opacity-80 transition">
                            <i class="fas fa-check mr-1"></i>Approve
                        </button>
                    </form>
                    @endif
                    
                    @if($review->status !== 'rejected')
                    <form method="POST" action="{{ route('account.reviews.reject', $review->id) }}" class="flex-1">
                        @csrf
                        <button type="submit" class="btn-reject w-full px-3 py-2 rounded-lg text-white text-xs hover:opacity-80 transition">
                            <i class="fas fa-ban mr-1"></i>Reject
                        </button>
                    </form>
                    @endif
                    
                    <form method="POST" action="{{ route('account.reviews.destroy', $review->id) }}" onsubmit="return confirm('Delete this review?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn-delete px-3 py-2 rounded-lg text-white text-xs hover:opacity-80 transition">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
        
        <!-- Pagination -->
        <div class="mt-6">
            {{ $reviews->appends(request()->query())->links() }}
        </div>
        @endif
    </div>
    
</div>

<!-- ✅ COMMENT MODAL -->
<div x-show="showCommentModal" 
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
     @click.self="showCommentModal = false">
    <div class="bg-gray-900 rounded-2xl border border-cyan-500/20 w-full max-w-2xl max-h-[80vh] overflow-y-auto"
         @click.stop>
        <div class="p-6 border-b border-gray-800">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-cyan-400">Full Review Comment</h3>
                <button @click="showCommentModal = false"
                        class="w-10 h-10 rounded-full hover:bg-gray-800 transition flex items-center justify-center text-gray-400 hover:text-white">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <p class="text-sm text-gray-400 mt-2" x-text="'By ' + currentReviewer"></p>
        </div>
        <div class="p-6">
            <p class="text-gray-300 leading-relaxed whitespace-pre-wrap" x-text="currentComment"></p>
        </div>
    </div>
</div>

<!-- Footer -->
<footer class="bg-gray-900/80 backdrop-blur-md border-t border-cyan-500/20 mt-12 py-6">
    <div class="max-w-7xl mx-auto px-4 text-center text-gray-400 text-sm">
        <p>© {{ date('Y') }} Ryll Store. All rights reserved.</p>
    </div>
</footer>

<script>
    function reviewManager() {
        return {
            selectedReviews: [],
            allReviewIds: @json($reviews->pluck('id')),
            showCommentModal: false,
            currentComment: '',
            currentReviewer: '',

            toggleSelect(id) {
                const index = this.selectedReviews.indexOf(id);
                if (index > -1) {
                    this.selectedReviews.splice(index, 1);
                } else {
                    this.selectedReviews.push(id);
                }
            },

            toggleSelectAll(event) {
                if (event.target.checked) {
                    this.selectedReviews = [...this.allReviewIds];
                } else {
                    this.selectedReviews = [];
                }
            },

            viewFullComment(comment, reviewer) {
                this.currentComment = comment;
                this.currentReviewer = reviewer;
                this.showCommentModal = true;
            },

            async bulkAction(action) {
                if (this.selectedReviews.length === 0) {
                    alert('Please select reviews first!');
                    return;
                }

                const actionText = action === 'approve' ? 'approve' : 
                                 action === 'reject' ? 'reject' : 'delete';
                
                if (!confirm(`Are you sure you want to ${actionText} ${this.selectedReviews.length} reviews?`)) {
                    return;
                }

                try {
                    const response = await fetch(`/account/reviews/bulk-${action}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({
                            review_ids: this.selectedReviews
                        })
                    });

                    const data = await response.json();

                    if (data.success) {
                        alert(`✅ ${data.message}`);
                        window.location.reload();
                    } else {
                        alert(`❌ Error: ${data.message}`);
                    }
                } catch (error) {
                    alert('❌ Failed to perform bulk action');
                    console.error(error);
                }
            }
        }
    }
</script>

</body>
</html>