

<?php $__env->startSection('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">
                <?php if(isset($pending) && $pending): ?>
                    Pending Reviews
                <?php elseif(isset($featured) && $featured): ?>
                    Featured Reviews
                <?php else: ?>
                    Review Management
                <?php endif; ?>
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                <?php if(isset($pending) && $pending): ?>
                    Approve or reject customer reviews
                <?php elseif(isset($featured) && $featured): ?>
                    Manage featured reviews displayed on website
                <?php else: ?>
                    Manage all customer reviews and ratings
                <?php endif; ?>
            </p>
        </div>
        <a href="<?php echo e(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"><?php echo e($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"><?php echo e($stats['approved']); ?></p>
                </div>
            </div>
        </div>

        <!-- Pending Reviews -->
        <a href="<?php echo e(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"><?php echo e($stats['pending']); ?></p>
                    </div>
                </div>
            </div>
        </a>

        <!-- Featured Reviews -->
        <a href="<?php echo e(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"><?php echo e($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">
                            <?php for($i = 1; $i <= 5; $i++): ?>
                                <?php if($i <= floor($stats['average_rating'])): ?>
                                    <i class="fas fa-star text-yellow-400 text-sm"></i>
                                <?php 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>
                                <?php else: ?>
                                    <i class="far fa-star text-gray-300 text-sm"></i>
                                <?php endif; ?>
                            <?php endfor; ?>
                        </div>
                        <p class="text-xl font-bold text-gray-900 dark:text-white"><?php echo e($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="<?php echo e(route('admin.reviews.index')); ?>"
                    class="<?php if(!isset($pending) && !isset($featured)): ?> border-[#10B981] text-[#10B981] <?php else: ?> border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 <?php 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="<?php echo e(route('admin.reviews.pending')); ?>"
                    class="<?php if(isset($pending) && $pending): ?> border-yellow-500 text-yellow-600 dark:text-yellow-400 <?php else: ?> border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 <?php endif; ?> py-2 px-1 border-b-2 font-medium text-sm transition-colors">
                    <i class="fas fa-clock mr-2"></i>
                    Pending
                    <?php 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">
                            <?php echo e($stats['pending']); ?>

                        </span>
                    <?php endif; ?>
                </a>
                <a href="<?php echo e(route('admin.reviews.featured')); ?>"
                    class="<?php if(isset($featured) && $featured): ?> border-purple-500 text-purple-600 dark:text-purple-400 <?php else: ?> border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 <?php 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 -->
    <?php 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>
                <?php echo e(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>
    <?php endif; ?>

    <?php 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>
                <?php echo e(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>
    <?php 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">
                <?php if(isset($pending) && $pending): ?>
                    Pending Reviews
                <?php elseif(isset($featured) && $featured): ?>
                    Featured Reviews
                <?php else: ?>
                    All Reviews
                <?php 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">
                    <?php $__empty_1 = true; $__currentLoopData = $reviews; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $review): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" data-rating="<?php echo e($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">
                                        <?php echo e(strtoupper(substr($review->user->name, 0, 1))); ?>

                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900 dark:text-white"><?php echo e($review->user->name); ?></div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400"><?php echo e($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">
                                        <?php for($i = 1; $i <= 5; $i++): ?>
                                            <?php if($i <= $review->rating): ?>
                                                <i class="fas fa-star"></i>
                                            <?php else: ?>
                                                <i class="far fa-star"></i>
                                            <?php endif; ?>
                                        <?php endfor; ?>
                                    </div>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-1">
                                        (<?php echo e($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"><?php echo e($review->comment); ?></div>
                                <?php 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="<?php echo e($review->comment); ?>">
                                        View Full Comment
                                    </button>
                                <?php endif; ?>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col space-y-2">
                                    <!-- Approval Status -->
                                    <?php 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>
                                    <?php 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="<?php echo e($review->id); ?>">
                                            <i class="fas fa-clock mr-1"></i> Pending
                                        </button>
                                    <?php endif; ?>
                                    
                                    <!-- Featured Status -->
                                    <?php 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>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                                <div class="flex flex-col">
                                    <span><?php echo e($review->created_at->format('M j, Y')); ?></span>
                                    <span class="text-xs"><?php echo e($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) -->
                                    <?php 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="<?php echo e($review->id); ?>"
                                                title="Approve Review">
                                            <i class="fas fa-check text-xs"></i>
                                        </button>
                                    <?php 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="<?php echo e($review->id); ?>"
                                            data-featured="<?php echo e($review->is_featured ? '1' : '0'); ?>"
                                            title="<?php echo e($review->is_featured ? 'Remove from Featured' : 'Mark as Featured'); ?>">
                                        <i class="fas <?php echo e($review->is_featured ? 'fa-star' : 'fa-star-half-alt'); ?> text-xs"></i>
                                    </button>

                                    <!-- Edit Button -->
                                    <a href="<?php echo e(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="<?php echo e($review->id); ?>" 
                                            data-reviewer-name="<?php echo e($review->user->name); ?>"
                                            title="Delete Review">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <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">
                                        <?php if(isset($pending) && $pending): ?>
                                            No pending reviews
                                        <?php elseif(isset($featured) && $featured): ?>
                                            No featured reviews
                                        <?php else: ?>
                                            No reviews found
                                        <?php endif; ?>
                                    </p>
                                    <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">
                                        <?php if(isset($pending) && $pending): ?>
                                            All reviews have been approved
                                        <?php else: ?>
                                            Get started by adding your first review
                                        <?php endif; ?>
                                    </p>
                                </div>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <?php if($reviews->hasPages()): ?>
            <div class="px-6 py-4 border-t border-gray-100 dark:border-gray-700">
                <?php echo e($reviews->links()); ?>

            </div>
        <?php 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">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('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': '<?php echo e(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': '<?php echo e(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>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layout.main', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\crm_new\resources\views/admin/reviews/index.blade.php ENDPATH**/ ?>