@extends('dashboard.layout')

@section('content')
<div class="flex flex-col h-full overflow-auto py-2">
 
    <!-- Desktop Header -->
    <div class="hidden md:block mb-6">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Service Requests</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Manage all service requests</p>
            </div>
            <div class="flex items-center space-x-4 ">
                <div class="relative mt-5">
                    <input type="text" placeholder="Search requests..." 
                           class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] transition-colors w-64 bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                           id="searchInput">
                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile Search -->
    <div class="md:hidden px-4 mb-4">
        <div class="relative">
            <input type="text" placeholder="Search requests..." 
                   class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                   id="mobileSearchInput">
            <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if (session('success'))
        <div class="mx-4 md:mx-0 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-lg mb-4 flex items-center justify-between">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                <span class="text-sm">{{ session('success') }}</span>
            </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="mx-4 md:mx-0 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-lg mb-4 flex items-center justify-between">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                <span class="text-sm">{{ session('error') }}</span>
            </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

    <!-- Desktop Table -->
    <div class="hidden md:block 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">All Service Requests</h2>
            <div class="flex items-center space-x-4">
                <div class="flex space-x-2">
                    <button class="text-gray-500 dark:text-gray-400 hover:text-[#10B981] p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700" id="filterBtn">
                        <i class="fas fa-filter"></i>
                    </button>
                </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">Request Info</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Business Details</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Package</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Price</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">Created</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-40">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-dark-secondary divide-y divide-gray-200 dark:divide-gray-700" id="requestsTable">
                    @forelse($serviceRequests as $request)
                        @php
                            $contactInfo = $request->contact_info;
                            $servicesData = $request->services_data;
                        @endphp
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" data-request-id="{{ $request->id }}">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-file-alt text-blue-500 dark:text-blue-400"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-900 dark:text-white">
                                            {{ $contactInfo['name'] ?? 'N/A' }}
                                        </div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ $contactInfo['email'] ?? 'N/A' }}
                                        </div>
                                        <div class="text-xs text-gray-400 dark:text-gray-500">
                                            ID: {{ $request->id }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900 dark:text-white">
                                    <div class="font-medium">{{ $request->businessType->name ?? 'N/A' }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">
                                        {{ $request->businessModel->name ?? 'N/A' }} • {{ $request->branch->name ?? 'N/A' }}
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900 dark:text-white">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 border border-purple-200 dark:border-purple-800 capitalize">
                                        {{ $request->package_type }}
                                    </span>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        {{ count($servicesData ?? []) }} services
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-semibold text-gray-900 dark:text-white">
                                    {{ number_format($request->total_price, 2) }} SR 
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800',
                                        'in_progress' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-200 dark:border-blue-800',
                                        'approved' => 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-200 dark:border-green-800',
                                        'cancelled' => 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-200 dark:border-red-800'
                                    ];
                                    $statusIcons = [
                                        'pending' => 'fa-clock',
                                        'in_progress' => 'fa-spinner',
                                        'approved' => 'fa-check-circle',
                                        'cancelled' => 'fa-times-circle'
                                    ];
                                    $statusLabels = [
                                        'pending' => 'Pending',
                                        'in_progress' => 'In Progress',
                                        'approved' => 'Approved',
                                        'cancelled' => 'Cancelled'
                                    ];
                                @endphp
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ $statusColors[$request->status] }} border">
                                    <i class="fas {{ $statusIcons[$request->status] }} mr-1"></i>
                                    {{ $statusLabels[$request->status] }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                <div class="flex items-center">
                                    <i class="fas fa-calendar-alt mr-2 text-gray-400"></i>
                                    {{ $request->created_at->format('M j, Y') }}
                                </div>
                                <div class="text-xs text-gray-400 dark:text-gray-500">
                                    {{ $request->created_at->format('g:i A') }}
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-start space-x-2">
                                    <!-- View Button -->
                                    <a href="{{ route('dashboard.service.requests.show', $request) }}" 
                                       class="inline-flex items-center justify-center  px-3 py-1 bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors border border-blue-200 dark:border-blue-800"
                                       title="View Details">
                                        View Details
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-8 text-center">
                                <div class="flex flex-col items-center justify-center text-gray-400 dark:text-gray-500">
                                    <i class="fas fa-file-alt text-4xl mb-3"></i>
                                    <p class="text-lg font-medium text-gray-500 dark:text-gray-400">No service requests found</p>
                                    <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">All service requests will appear here</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

    <!-- Mobile Grid Cards -->
    <div class="md:hidden px-4 pb-20">
        <!-- Mobile Filters -->
        <div id="mobileFilters" class="hidden mb-4 space-y-3">
            <div class="grid grid-cols-2 gap-3">
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                    <option value="">All Status</option>
                    <option value="pending">Pending</option>
                    <option value="in_progress">In Progress</option>
                    <option value="approved">Approved</option>
                    <option value="cancelled">Cancelled</option>
                </select>
                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                    <option value="">All Packages</option>
                    <option value="basic">Basic</option>
                    <option value="standard">Standard</option>
                    <option value="premium">Premium</option>
                </select>
            </div>
            <button id="applyFiltersBtn" class="w-full px-4 py-2 bg-[#10B981] text-white rounded-lg font-medium">
                Apply Filters
            </button>
        </div>



        <!-- Request Cards -->
        <div class="space-y-4" id="mobileRequestsList">
            @forelse($serviceRequests as $request)
                @php
                    $contactInfo = $request->contact_info;
                    $servicesData = $request->services_data;
                    $statusColors = [
                        'pending' => 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300',
                        'in_progress' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300',
                        'approved' => 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
                        'cancelled' => 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300'
                    ];
                    $statusIcons = [
                        'pending' => 'fa-clock',
                        'in_progress' => 'fa-spinner',
                        'approved' => 'fa-check-circle',
                        'cancelled' => 'fa-times-circle'
                    ];
                    $statusLabels = [
                        'pending' => 'Pending',
                        'in_progress' => 'In Progress',
                        'approved' => 'Approved',
                        'cancelled' => 'Cancelled'
                    ];
                @endphp
                <div class="bg-white dark:bg-dark-secondary rounded shadow-sm border border-gray-200 dark:border-gray-700 p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" data-request-id="{{ $request->id }}">
                    <!-- Header -->
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-file-alt text-blue-500 dark:text-blue-400"></i>
                            </div>
                            <div>
                                <div class="text-sm font-medium text-gray-900 dark:text-white">
                                    {{ $contactInfo['name'] ?? 'N/A' }}
                                </div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                    ID: {{ $request->id }}
                                </div>
                            </div>
                        </div>
                        <span class="px-2 py-1 inline-flex text-xs font-medium rounded-full {{ $statusColors[$request->status] }}">
                            <i class="fas {{ $statusIcons[$request->status] }} mr-1"></i>
                            {{ $statusLabels[$request->status] }}
                        </span>
                    </div>

                    <!-- Business Info -->
                    <div class="mb-3">
                        <div class="flex items-center mb-1">
                            <i class="fas fa-building text-gray-400 text-xs mr-2"></i>
                            <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Business:</span>
                        </div>
                        <div class="pl-6">
                            <p class="text-sm text-gray-900 dark:text-white">{{ $request->businessType->name ?? 'N/A' }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $request->businessModel->name ?? 'N/A' }} • {{ $request->branch->name ?? 'N/A' }}</p>
                        </div>
                    </div>

                    <!-- Package & Price -->
                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <div class="bg-gray-50 dark:bg-gray-800 rounded p-3">
                            <div class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Package</div>
                            <div class="text-sm font-medium text-gray-900 dark:text-white capitalize">
                                {{ $request->package_type }}
                            </div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                {{ count($servicesData ?? []) }} services
                            </div>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-800 rounded p-3">
                            <div class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Price</div>
                            <div class="text-lg font-bold text-gray-900 dark:text-white">
                               {{ number_format($request->total_price, 2) }} SR
                            </div>
                        </div>
                    </div>

                    <!-- Contact Info -->
                    <div class="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-envelope text-blue-500 dark:text-blue-400 text-xs mr-2"></i>
                            <span class="text-xs text-blue-700 dark:text-blue-300">{{ $contactInfo['email'] ?? 'N/A' }}</span>
                        </div>
                        @if($contactInfo['phone'] ?? false)
                            <div class="flex items-center">
                                <i class="fas fa-phone text-blue-500 dark:text-blue-400 text-xs mr-2"></i>
                                <span class="text-xs text-blue-700 dark:text-blue-300">{{ $contactInfo['phone'] }}</span>
                            </div>
                        @endif
                    </div>

                    <!-- Created Date -->
                    <div class="mb-4 flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
                        <div class="flex items-center">
                            <i class="fas fa-calendar-alt mr-2 text-gray-400"></i>
                            <span>{{ $request->created_at->format('M j, Y') }}</span>
                        </div>
                        <div class="text-xs">
                            {{ $request->created_at->format('g:i A') }}
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-700">
                        <a href="{{ route('dashboard.service.requests.show', $request) }}" 
                           class="flex-1 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded text-center transition-colors">
                            View Details
                        </a>
                         
                    </div>
                </div>
            @empty
                <div class="bg-white dark:bg-dark-secondary rounded shadow-sm p-8 text-center">
                    <i class="fas fa-file-alt text-4xl text-gray-400 dark:text-gray-500 mb-3"></i>
                    <p class="text-lg font-medium text-gray-500 dark:text-gray-400">No service requests found</p>
                    <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">All service requests will appear here</p>
                </div>
            @endforelse
        </div>

        <!-- Mobile Pagination -->
        @if($serviceRequests->hasPages())
            <div class="mt-6 bg-white dark:bg-dark-secondary rounded shadow-sm p-4">
                <div class="flex items-center justify-between">
                    <div class="text-xs text-gray-700 dark:text-gray-400">
                        Page {{ $serviceRequests->currentPage() }} of {{ $serviceRequests->lastPage() }}
                    </div>
                    <div class="flex space-x-2">
                        @if ($serviceRequests->onFirstPage())
                            <span class="px-3 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 text-xs">
                                Prev
                            </span>
                        @else
                            <a href="{{ $serviceRequests->previousPageUrl() }}"
                               class="px-3 py-1 rounded bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-500 transition-colors text-xs">
                                Prev
                            </a>
                        @endif

                        @if ($serviceRequests->hasMorePages())
                            <a href="{{ $serviceRequests->nextPageUrl() }}"
                               class="px-3 py-1 rounded bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-500 transition-colors text-xs">
                                Next
                            </a>
                        @else
                            <span class="px-3 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 text-xs">
                                Next
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Mobile Action Bar -->
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-dark-secondary border-t border-gray-200 dark:border-gray-700 p-3 shadow-lg z-10">
    <div class="flex items-center justify-between">
        <a href="{{ route('dashboard') }}" 
           class="flex-1 mr-2 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-center text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-dark-secondary hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            <i class="fas fa-home mr-2"></i>
            Home
        </a>
         
    </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-2xl 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-lg 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 service request from 
                    <span id="requestName" 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-lg 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-lg hover:bg-red-600 transition-colors flex items-center">
                        <i class="fas fa-trash mr-2"></i>
                        Delete Request
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .pagination {
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
    }
    
    .pagination li {
        margin: 0 2px;
    }
    
    .pagination li a,
    .pagination li span {
        display: block;
        padding: 8px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        color: #6b7280;
        text-decoration: none;
        transition: all 0.2s;
    }
    
    .pagination li a:hover {
        background-color: #f9fafb;
        border-color: #d1d5db;
    }
    
    .pagination li.active span {
        background-color: #10B981;
        border-color: #10B981;
        color: white;
    }
    
    .pagination li.disabled span {
        color: #9ca3af;
        background-color: #f9fafb;
    }

    /* Dark mode pagination styles */
    .dark .pagination li a,
    .dark .pagination li span {
        border: 1px solid #374151;
        color: #9ca3af;
        background-color: #1f2937;
    }

    .dark .pagination li a:hover {
        background-color: #374151;
        border-color: #4b5563;
    }

    .dark .pagination li.active span {
        background-color: #10B981;
        border-color: #10B981;
        color: white;
    }

    .dark .pagination li.disabled span {
        color: #6b7280;
        background-color: #374151;
    }

    /* Modal Animation */
    #deleteModal {
        transition: opacity 0.3s ease;
    }

    #deleteModal > div {
        transition: transform 0.3s ease;
    }

    #deleteModal.hidden {
        opacity: 0;
        pointer-events: none;
    }

    #deleteModal:not(.hidden) > div {
        transform: scale(1);
    }

    /* Mobile card animations */
    @media (max-width: 768px) {
        .hover\:bg-gray-50:hover, .dark .hover\:bg-gray-800:hover {
            transform: translateY(-2px);
            transition: transform 0.2s ease-in-out;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .dark .hover\:bg-gray-800:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
    }

    /* Quick filter active state */
    .quick-filter.active {
        border: 2px solid #10B981;
    }
</style>

<script>
    // Mobile filter toggle
    document.getElementById('mobileFilterBtn').addEventListener('click', function() {
        const filters = document.getElementById('mobileFilters');
        filters.classList.toggle('hidden');
    });

    // Quick status filter functionality
    document.querySelectorAll('[data-status]').forEach(button => {
        button.addEventListener('click', function() {
            const status = this.getAttribute('data-status');
            
            // Remove active class from all buttons
            document.querySelectorAll('[data-status]').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // Add active class to clicked button
            this.classList.add('active');
            
            // Filter requests
            filterMobileRequests(status);
        });
    });

    // Filter mobile requests
    function filterMobileRequests(status = '') {
        const requestCards = document.querySelectorAll('#mobileRequestsList > div[data-request-id]');
        
        requestCards.forEach(card => {
            const statusElement = card.querySelector('[class*="bg-"]');
            const requestStatus = statusElement ? statusElement.textContent.toLowerCase().trim() : '';
            
            if (!status || requestStatus.includes(status.toLowerCase().replace('_', ' '))) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    }

    // Search functionality
    function setupSearch() {
        const searchInputs = [document.getElementById('searchInput'), document.getElementById('mobileSearchInput')];
        const requestCards = document.querySelectorAll('#mobileRequestsList > div[data-request-id]');
        const tableRows = document.querySelectorAll('#requestsTable tr[data-request-id]');
        
        searchInputs.forEach(input => {
            if (input) {
                input.addEventListener('input', function(e) {
                    const searchTerm = e.target.value.toLowerCase();
                    
                    // Filter mobile cards
                    requestCards.forEach(card => {
                        const cardText = card.textContent.toLowerCase();
                        card.style.display = cardText.includes(searchTerm) ? 'block' : 'none';
                    });
                    
                    // Filter table rows
                    tableRows.forEach(row => {
                        const rowText = row.textContent.toLowerCase();
                        row.style.display = rowText.includes(searchTerm) ? '' : 'none';
                    });
                });
            }
        });
    }

 
    // Toast notification
    function showToast(message) {
        const toast = document.createElement('div');
        toast.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
        toast.textContent = message;
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.remove();
        }, 3000);
    }

    // Delete Request Modal Functions
    function openModal(requestId, requestName) {
        const modal = document.getElementById('deleteModal');
        const requestNameElement = document.getElementById('requestName');
        const deleteForm = document.getElementById('deleteForm');
        
        // Set request name in modal
        requestNameElement.textContent = requestName;
        
        // Set form action
        deleteForm.action = `/admin/panel/service-requests/${requestId}`;
        
        // Show modal
        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';
    }

    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        setupSearch();
        
        // Close modal when clicking outside
        document.getElementById('deleteModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        // Close modal with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        });

        // Apply filters button
        document.getElementById('applyFiltersBtn')?.addEventListener('click', function() {
            const statusFilter = document.querySelector('#mobileFilters select:first-child').value;
            filterMobileRequests(statusFilter);
            document.getElementById('mobileFilters').classList.add('hidden');
        });
    });
</script>
@endsection