@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full overflow-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                @if(isset($pending) && $pending)
                    Pending Reviews
                @elseif(isset($featured) && $featured)
                    Featured Reviews
                @else
                    Review Management
                @endif
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                @if(isset($pending) && $pending)
                    Approve or reject customer reviews
                @elseif(isset($featured) && $featured)
                    Manage featured reviews displayed on website
                @else
                    Manage all customer reviews and ratings
                @endif
            </p>
        </div>
        <a href="{{ route('admin.reviews.create') }}"
            class="bg-[#10B981] text-white px-4 py-2 rounded hover:bg-[#0da271] transition-colors flex items-center">
            <i class="fas fa-plus-circle mr-2"></i>
            Add New Review
        </a>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
        <!-- Total Reviews -->
        <div class="bg-white dark:bg-dark-secondary rounded border border-gray-100 dark:border-gray-700 p-4">
            <div class="flex items-center">
                <div class="p-2 bg-blue-100 dark:bg-blue-900/20 rounded mr-3">
                    <i class="fas fa-star text-blue-500 dark:text-blue-400"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Total Reviews</p>
                    <p class="text-xl font-bold text-gray-900 dark:text-white">{{ $stats['total'] }}</p>
                </div>
            </div>
        </div>

        <!-- Approved Reviews -->
        <div class="bg-white dark:bg-dark-secondary rounded border border-gray-100 dark:border-gray-700 p-4">
            <div class="flex items-center">
                <div class="p-2 bg-green-100 dark:bg-green-900/20 rounded mr-3">
                    <i class="fas fa-check-circle text-green-500 dark:text-green-400"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Approved</p>
                    <p class="text-xl font-bold text-gray-900 dark:text-white">{{ $stats['approved'] }}</p>
                </div>
            </div>
        </div>

        <!-- Pending Reviews -->
        <a href="{{ route('admin.reviews.pending') }}" class="block hover:scale-[1.02] transition-transform">
            <div class="bg-white dark:bg-dark-secondary rounded border border-gray-100 dark:border-gray-700 p-4">
                <div class="flex items-center">
                    <div class="p-2 bg-yellow-100 dark:bg-yellow-900/20 rounded mr-3">
                        <i class="fas fa-clock text-yellow-500 dark:text-yellow-400"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Pending</p>
                        <p class="text-xl font-bold text-gray-900 dark:text-white">{{ $stats['pending'] }}</p>
                    </div>
                </div>
            </div>
        </a>

        <!-- Featured Reviews -->
        <a href="{{ route('admin.reviews.featured') }}" class="block hover:scale-[1.02] transition-transform">
            <div class="bg-white dark:bg-dark-secondary rounded border border-gray-100 dark:border-gray-700 p-4">
                <div class="flex items-center">
                    <div class="p-2 bg-purple-100 dark:bg-purple-900/20 rounded mr-3">
                        <i class="fas fa-award text-purple-500 dark:text-purple-400"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Featured</p>
                        <p class="text-xl font-bold text-gray-900 dark:text-white">{{ $stats['featured'] }}</p>
                    </div>
                </div>
            </div>
        </a>

        <!-- Average Rating -->
        <div class="bg-white dark:bg-dark-secondary rounded border border-gray-100 dark:border-gray-700 p-4">
            <div class="flex items-center">
                <div class="p-2 bg-orange-100 dark:bg-orange-900/20 rounded mr-3">
                    <i class="fas fa-chart-line text-orange-500 dark:text-orange-400"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Avg. Rating</p>
                    <div class="flex items-center">
                        <div class="flex mr-2">
                            @for($i = 1; $i <= 5; $i++)
                                @if($i <= floor($stats['average_rating']))
                                    <i class="fas fa-star text-yellow-400 text-sm"></i>
                                @elseif($i == ceil($stats['average_rating']) && fmod($stats['average_rating'], 1) > 0)
                                    <i class="fas fa-star-half-alt text-yellow-400 text-sm"></i>
                                @else
                                    <i class="far fa-star text-gray-300 text-sm"></i>
                                @endif
                            @endfor
                        </div>
                        <p class="text-xl font-bold text-gray-900 dark:text-white">{{ $stats['average_rating'] }}/5</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Tabs -->
    <div class="mb-6">
        <div class="border-b border-gray-200 dark:border-gray-700">
            <nav class="-mb-px flex space-x-8">
                <a href="{{ route('admin.reviews.index') }}"
                    class="@if(!isset($pending) && !isset($featured)) border-[#10B981] text-[#10B981] @else border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 @endif py-2 px-1 border-b-2 font-medium text-sm transition-colors">
                    <i class="fas fa-list mr-2"></i>
                    All Reviews
                </a>
                <a href="{{ route('admin.reviews.pending') }}"
                    class="@if(isset($pending) && $pending) border-yellow-500 text-yellow-600 dark:text-yellow-400 @else border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 @endif py-2 px-1 border-b-2 font-medium text-sm transition-colors">
                    <i class="fas fa-clock mr-2"></i>
                    Pending
                    @if($stats['pending'] > 0)
                        <span class="ml-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-300 text-xs font-medium px-2 py-0.5 rounded-full">
                            {{ $stats['pending'] }}
                        </span>
                    @endif
                </a>
                <a href="{{ route('admin.reviews.featured') }}"
                    class="@if(isset($featured) && $featured) border-purple-500 text-purple-600 dark:text-purple-400 @else border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 @endif py-2 px-1 border-b-2 font-medium text-sm transition-colors">
                    <i class="fas fa-award mr-2"></i>
                    Featured
                </a>
            </nav>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if (session('success'))
        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 px-4 py-3 rounded mb-6 flex items-center justify-between">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                {{ session('success') }}
            </div>
            <button type="button" class="text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100" onclick="this.parentElement.remove()">
                <i class="fas fa-times"></i>
            </button>
        </div>
    @endif

    @if (session('error'))
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded mb-6 flex items-center justify-between">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                {{ session('error') }}
            </div>
            <button type="button" class="text-red-700 dark:text-red-300 hover:text-red-900 dark:hover:text-red-100" onclick="this.parentElement.remove()">
                <i class="fas fa-times"></i>
            </button>
        </div>
    @endif

    <!-- Reviews Table -->
    <div class="bg-white dark:bg-dark-secondary rounded shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden flex-1 flex flex-col">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">
                @if(isset($pending) && $pending)
                    Pending Reviews
                @elseif(isset($featured) && $featured)
                    Featured Reviews
                @else
                    All Reviews
                @endif
            </h2>
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="Search reviews..." 
                           class="w-64 py-2.5 pl-10 pr-4 search-bar bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent rounded"
                           id="searchInput">
                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
                <div class="flex space-x-2">
                    <select id="ratingFilter" class="py-2.5 pl-3 pr-8 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent rounded text-sm">
                        <option value="">All Ratings</option>
                        <option value="5">5 Stars</option>
                        <option value="4">4 Stars</option>
                        <option value="3">3 Stars</option>
                        <option value="2">2 Stars</option>
                        <option value="1">1 Star</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="flex-1 overflow-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-800">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Reviewer</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Rating</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Comment</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-dark-secondary divide-y divide-gray-200 dark:divide-gray-700" id="reviewTableBody">
                    @forelse($reviews as $review)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" data-rating="{{ $review->rating }}">
                            <td class="px-6 py-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold">
                                        {{ strtoupper(substr($review->user->name, 0, 1)) }}
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $review->user->name }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $review->user->email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center">
                                    <div class="flex text-yellow-400 mr-2">
                                        @for($i = 1; $i <= 5; $i++)
                                            @if($i <= $review->rating)
                                                <i class="fas fa-star"></i>
                                            @else
                                                <i class="far fa-star"></i>
                                            @endif
                                        @endfor
                                    </div>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-1">
                                        ({{ $review->rating }}/5)
                                    </span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900 dark:text-white max-w-xs truncate">{{ $review->comment }}</div>
                                @if(strlen($review->comment) > 100)
                                    <button type="button" class="text-xs text-blue-500 dark:text-blue-400 hover:underline mt-1 view-comment-btn"
                                            data-comment="{{ $review->comment }}">
                                        View Full Comment
                                    </button>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col space-y-2">
                                    <!-- Approval Status -->
                                    @if($review->is_approved)
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border border-green-200 dark:border-green-800 w-fit">
                                            <i class="fas fa-check-circle mr-1"></i> Approved
                                        </span>
                                    @else
                                        <button type="button" class="approve-review-btn px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-800 w-fit hover:bg-yellow-200 dark:hover:bg-yellow-900/50 transition-colors"
                                                data-review-id="{{ $review->id }}">
                                            <i class="fas fa-clock mr-1"></i> Pending
                                        </button>
                                    @endif
                                    
                                    <!-- Featured Status -->
                                    @if($review->is_featured)
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 border border-purple-200 dark:border-purple-800 w-fit">
                                            <i class="fas fa-award mr-1"></i> Featured
                                        </span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                                <div class="flex flex-col">
                                    <span>{{ $review->created_at->format('M j, Y') }}</span>
                                    <span class="text-xs">{{ $review->created_at->format('h:i A') }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm font-medium">
                                <div class="flex items-center space-x-2">
                                    <!-- Approve Button (only if pending) -->
                                    @if(!$review->is_approved)
                                        <button type="button"
                                                class="approve-review-btn inline-flex items-center justify-center w-8 h-8 bg-green-50 dark:bg-green-900/20 text-green-500 dark:text-green-400 rounded hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors border border-green-200 dark:border-green-800"
                                                data-review-id="{{ $review->id }}"
                                                title="Approve Review">
                                            <i class="fas fa-check text-xs"></i>
                                        </button>
                                    @endif

                                    <!-- Feature/Unfeature Button -->
                                    <button type="button"
                                            class="feature-review-btn inline-flex items-center justify-center w-8 h-8 bg-purple-50 dark:bg-purple-900/20 text-purple-500 dark:text-purple-400 rounded hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors border border-purple-200 dark:border-purple-800"
                                            data-review-id="{{ $review->id }}"
                                            data-featured="{{ $review->is_featured ? '1' : '0' }}"
                                            title="{{ $review->is_featured ? 'Remove from Featured' : 'Mark as Featured' }}">
                                        <i class="fas {{ $review->is_featured ? 'fa-star' : 'fa-star-half-alt' }} text-xs"></i>
                                    </button>

                                    <!-- Edit Button -->
                                    <a href="{{ route('admin.reviews.edit', $review) }}"
                                        class="inline-flex items-center justify-center w-8 h-8 bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 rounded hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors border border-blue-200 dark:border-blue-800"
                                        title="Edit Review">
                                        <i class="fas fa-edit text-xs"></i>
                                    </a>

                                    <!-- Delete Button -->
                                    <button type="button"
                                            class="inline-flex items-center justify-center w-8 h-8 bg-red-50 dark:bg-red-900/20 text-red-500 dark:text-red-400 rounded hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors border border-red-200 dark:border-red-800 delete-review-btn"
                                            data-review-id="{{ $review->id }}" 
                                            data-reviewer-name="{{ $review->user->name }}"
                                            title="Delete Review">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center justify-center text-gray-400 dark:text-gray-500">
                                    <i class="fas fa-star text-4xl mb-3"></i>
                                    <p class="text-lg font-medium text-gray-500 dark:text-gray-400">
                                        @if(isset($pending) && $pending)
                                            No pending reviews
                                        @elseif(isset($featured) && $featured)
                                            No featured reviews
                                        @else
                                            No reviews found
                                        @endif
                                    </p>
                                    <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">
                                        @if(isset($pending) && $pending)
                                            All reviews have been approved
                                        @else
                                            Get started by adding your first review
                                        @endif
                                    </p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if ($reviews->hasPages())
            <div class="px-6 py-4 border-t border-gray-100 dark:border-gray-700">
                {{ $reviews->links() }}
            </div>
        @endif
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white dark:bg-dark-secondary rounded shadow-xl max-w-md w-full mx-4 transform transition-all">
        <div class="p-6">
            <!-- Modal Header -->
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-red-100 dark:bg-red-900/20 rounded flex items-center justify-center mr-3">
                        <i class="fas fa-exclamation-triangle text-red-500 dark:text-red-400"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Confirm Deletion</h3>
                </div>
                <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
                    onclick="closeModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- Modal Body -->
            <div class="mb-6">
                <p class="text-gray-600 dark:text-gray-300">
                    Are you sure you want to delete review from
                    <span id="reviewerName" class="font-semibold text-gray-900 dark:text-white"></span>?
                </p>
                <p class="text-sm text-red-500 dark:text-red-400 mt-2 flex items-center">
                    <i class="fas fa-info-circle mr-1"></i>
                    This action cannot be undone.
                </p>
            </div>

            <!-- Modal Footer -->
            <div class="flex justify-end space-x-3">
                <button type="button"
                    class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                    onclick="closeModal()">
                    Cancel
                </button>
                <form id="deleteForm" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                        class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors flex items-center">
                        <i class="fas fa-trash mr-2"></i>
                        Delete Review
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- View Comment Modal -->
<div id="commentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white dark:bg-dark-secondary rounded shadow-xl max-w-2xl w-full mx-4 transform transition-all">
        <div class="p-6">
            <!-- Modal Header -->
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/20 rounded flex items-center justify-center mr-3">
                        <i class="fas fa-comment text-blue-500 dark:text-blue-400"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Review Comment</h3>
                </div>
                <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
                    onclick="closeCommentModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- Modal Body -->
            <div class="mb-6">
                <div id="fullComment" class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 whitespace-pre-wrap max-h-96 overflow-y-auto">
                    <!-- Comment will be inserted here -->
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="flex justify-end">
                <button type="button"
                    class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
                    onclick="closeCommentModal()">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .max-w-xs {
        max-width: 20rem;
    }
    
    /* Custom scrollbar for comment modal */
    #fullComment::-webkit-scrollbar {
        width: 6px;
    }
    
    #fullComment::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    #fullComment::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    #fullComment::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    .dark #fullComment::-webkit-scrollbar-track {
        background: #374151;
    }
    
    .dark #fullComment::-webkit-scrollbar-thumb {
        background: #6b7280;
    }
    
    .dark #fullComment::-webkit-scrollbar-thumb:hover {
        background: #9ca3af;
    }
</style>

<script>
    // Delete Modal Functions
    function openModal(reviewId, reviewerName) {
        const modal = document.getElementById('deleteModal');
        const reviewerNameElement = document.getElementById('reviewerName');
        const deleteForm = document.getElementById('deleteForm');

        reviewerNameElement.textContent = reviewerName;
        deleteForm.action = `/admin/panel/reviews/${reviewId}`;
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        const modal = document.getElementById('deleteModal');
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    // Comment Modal Functions
    function openCommentModal(comment) {
        const modal = document.getElementById('commentModal');
        const commentElement = document.getElementById('fullComment');
        
        commentElement.textContent = comment;
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeCommentModal() {
        const modal = document.getElementById('commentModal');
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    // Event Listeners
    document.addEventListener('DOMContentLoaded', function() {
        // Delete button click handlers
        document.querySelectorAll('.delete-review-btn').forEach(button => {
            button.addEventListener('click', function() {
                const reviewId = this.getAttribute('data-review-id');
                const reviewerName = this.getAttribute('data-reviewer-name');
                openModal(reviewId, reviewerName);
            });
        });

        // View comment button click handlers
        document.querySelectorAll('.view-comment-btn').forEach(button => {
            button.addEventListener('click', function() {
                const comment = this.getAttribute('data-comment');
                openCommentModal(comment);
            });
        });

        // Approve review button click handlers
        document.querySelectorAll('.approve-review-btn').forEach(button => {
            button.addEventListener('click', function() {
                const reviewId = this.getAttribute('data-review-id');
                const button = this;
                
                fetch(`/admin/panel/reviews/${reviewId}/approve`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update button appearance
                        button.outerHTML = `
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border border-green-200 dark:border-green-800 w-fit">
                                <i class="fas fa-check-circle mr-1"></i> Approved
                            </span>
                        `;
                        
                        // Also update the small approve button if it exists
                        const smallApproveBtn = document.querySelector(`.approve-review-btn[data-review-id="${reviewId}"]`);
                        if (smallApproveBtn) {
                            smallApproveBtn.remove();
                        }
                        
                        showToast(data.message, 'success');
                    }
                })
                .catch(error => {
                    console.error('Error approving review:', error);
                    showToast('Error approving review', 'error');
                });
            });
        });

        // Feature review button click handlers
        document.querySelectorAll('.feature-review-btn').forEach(button => {
            button.addEventListener('click', function() {
                const reviewId = this.getAttribute('data-review-id');
                const isFeatured = this.getAttribute('data-featured') === '1';
                const button = this;
                
                fetch(`/admin/panel/reviews/${reviewId}/feature`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update button appearance
                        if (data.is_featured) {
                            button.innerHTML = '<i class="fas fa-star text-xs"></i>';
                            button.setAttribute('title', 'Remove from Featured');
                            button.setAttribute('data-featured', '1');
                            
                            // Update status badge
                            const statusCell = button.closest('tr').querySelector('td:nth-child(4)');
                            const featuredBadge = document.createElement('span');
                            featuredBadge.className = 'px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 border border-purple-200 dark:border-purple-800 w-fit mt-1';
                            featuredBadge.innerHTML = '<i class="fas fa-award mr-1"></i> Featured';
                            statusCell.querySelector('div').appendChild(featuredBadge);
                        } else {
                            button.innerHTML = '<i class="fas fa-star-half-alt text-xs"></i>';
                            button.setAttribute('title', 'Mark as Featured');
                            button.setAttribute('data-featured', '0');
                            
                            // Remove featured badge
                            const statusCell = button.closest('tr').querySelector('td:nth-child(4)');
                            const featuredBadge = statusCell.querySelector('span:last-child');
                            if (featuredBadge && featuredBadge.textContent.includes('Featured')) {
                                featuredBadge.remove();
                            }
                        }
                        
                        showToast(data.message, 'success');
                    }
                })
                .catch(error => {
                    console.error('Error featuring review:', error);
                    showToast('Error updating featured status', 'error');
                });
            });
        });

        // Search functionality
        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase();
                const rows = document.querySelectorAll('#reviewTableBody tr');
                
                rows.forEach(row => {
                    const reviewerName = row.querySelector('.font-medium').textContent.toLowerCase();
                    const reviewerEmail = row.querySelector('.text-xs').textContent.toLowerCase();
                    const comment = row.querySelector('td:nth-child(3) .text-sm').textContent.toLowerCase();
                    
                    if (reviewerName.includes(searchTerm) || 
                        reviewerEmail.includes(searchTerm) || 
                        comment.includes(searchTerm)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            });
        }

        // Rating filter
        const ratingFilter = document.getElementById('ratingFilter');
        if (ratingFilter) {
            ratingFilter.addEventListener('change', function(e) {
                const selectedRating = e.target.value;
                const rows = document.querySelectorAll('#reviewTableBody tr');
                
                rows.forEach(row => {
                    const rating = row.getAttribute('data-rating');
                    
                    if (!selectedRating || rating === selectedRating) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            });
        }

        // Close modals when clicking outside or pressing Escape
        document.getElementById('deleteModal').addEventListener('click', function(e) {
            if (e.target === this) closeModal();
        });
        
        document.getElementById('commentModal').addEventListener('click', function(e) {
            if (e.target === this) closeCommentModal();
        });
        
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
                closeCommentModal();
            }
        });

        // Auto-hide success/error messages after 5 seconds
        setTimeout(() => {
            document.querySelectorAll('[role="alert"]').forEach(alert => {
                if (alert.querySelector('.fa-times')) {
                    alert.remove();
                }
            });
        }, 5000);
    });

    // Toast notification
    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.className = `fixed top-4 right-4 px-4 py-3 rounded shadow-lg z-50 transform transition-all duration-300 translate-x-full ${
            type === 'success' ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-300 border border-green-200 dark:border-green-800' :
            type === 'error' ? 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-300 border border-red-200 dark:border-red-800' :
            'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-300 border border-blue-200 dark:border-blue-800'
        }`;
        toast.innerHTML = `
            <div class="flex items-center">
                <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} mr-2"></i>
                <span>${message}</span>
            </div>
        `;
        
        document.body.appendChild(toast);
        
        // Animate in
        setTimeout(() => {
            toast.classList.remove('translate-x-full');
        }, 10);
        
        // Remove after 3 seconds
        setTimeout(() => {
            toast.classList.add('translate-x-full');
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }
</script>
@endsection