<div class="py-12 bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <!-- Header with Gradient -->
        <div class="mb-8">
            <div class="relative overflow-hidden bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700 rounded-2xl shadow-xl p-8">
                <div class="absolute top-0 right-0 -mt-4 -mr-4 w-40 h-40 bg-white opacity-10 rounded-full"></div>
                <div class="absolute bottom-0 left-0 -mb-8 -ml-8 w-32 h-32 bg-white opacity-10 rounded-full"></div>
                <div class="relative z-10">
                    <div class="flex items-center justify-between">
                        <div>
                            <h1 class="text-4xl font-extrabold text-white mb-2 flex items-center">
                                <svg class="w-10 h-10 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                                </svg>
                                Onboarding File Management
                            </h1>
                            <p class="text-blue-100 text-lg">
                                Review, process, and manage restaurant onboarding submissions
                            </p>
                        </div>
                        <div class="hidden lg:block">
                            <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 text-white">
                                <div class="text-3xl font-bold">{{ \App\Models\BulkImportLog::where('import_type', 'onboarding')->where('status', 'pending')->count() }}</div>
                                <div class="text-sm text-blue-100">Pending Review</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Dashboard with Animation -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
            <!-- Total Uploads -->
            <div class="group bg-white rounded-xl shadow-md hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 p-6 border-l-4 border-gradient-to-b from-blue-500 to-blue-600">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-semibold text-gray-600 uppercase tracking-wider">Total Uploads</p>
                        <p class="text-3xl font-extrabold text-gray-900 mt-2">
                            {{ \App\Models\BulkImportLog::where('import_type', 'onboarding')->count() }}
                        </p>
                        <p class="text-xs text-gray-500 mt-1">All time records</p>
                    </div>
                    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Pending -->
            <div class="group bg-white rounded-xl shadow-md hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 p-6 border-l-4 border-gradient-to-b from-yellow-500 to-amber-600">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-semibold text-gray-600 uppercase tracking-wider">Pending</p>
                        <p class="text-3xl font-extrabold text-yellow-600 mt-2">
                            {{ \App\Models\BulkImportLog::where('import_type', 'onboarding')->where('status', 'pending')->count() }}
                        </p>
                        <p class="text-xs text-gray-500 mt-1">Awaiting process</p>
                    </div>
                    <div class="bg-gradient-to-br from-yellow-500 to-amber-600 rounded-2xl p-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Processing -->
            <div class="group bg-white rounded-xl shadow-md hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 p-6 border-l-4 border-gradient-to-b from-blue-500 to-indigo-600">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-semibold text-gray-600 uppercase tracking-wider">Processing</p>
                        <p class="text-3xl font-extrabold text-blue-600 mt-2">
                            {{ \App\Models\BulkImportLog::where('import_type', 'onboarding')->where('status', 'processing')->count() }}
                        </p>
                        <p class="text-xs text-gray-500 mt-1">In progress</p>
                    </div>
                    <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl p-4 shadow-lg">
                        <svg class="w-8 h-8 text-white animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Completed -->
            <div class="group bg-white rounded-xl shadow-md hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 p-6 border-l-4 border-gradient-to-b from-green-500 to-emerald-600">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-semibold text-gray-600 uppercase tracking-wider">Completed</p>
                        <p class="text-3xl font-extrabold text-green-600 mt-2">
                            {{ \App\Models\BulkImportLog::where('import_type', 'onboarding')->whereIn('status', ['completed', 'completed_with_errors'])->count() }}
                        </p>
                        <p class="text-xs text-gray-500 mt-1">Successfully done</p>
                    </div>
                    <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl p-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Failed -->
            <div class="group bg-white rounded-xl shadow-md hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 p-6 border-l-4 border-gradient-to-b from-red-500 to-rose-600">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-semibold text-gray-600 uppercase tracking-wider">Failed</p>
                        <p class="text-3xl font-extrabold text-red-600 mt-2">
                            {{ \App\Models\BulkImportLog::where('import_type', 'onboarding')->where('status', 'failed')->count() }}
                        </p>
                        <p class="text-xs text-gray-500 mt-1">Need attention</p>
                    </div>
                    <div class="bg-gradient-to-br from-red-500 to-rose-600 rounded-2xl p-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- Flash Messages with Animation -->
        @if (session()->has('message'))
            <div class="mb-6 animate-slide-down">
                <div class="bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 rounded-xl p-4 shadow-lg flex items-start">
                    <div class="flex-shrink-0">
                        <div class="bg-green-500 rounded-full p-2">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-green-800 font-semibold">Success!</p>
                        <p class="text-green-700 text-sm mt-1">{{ session('message') }}</p>
                    </div>
                </div>
            </div>
        @endif

        @if (session()->has('error'))
            <div class="mb-6 animate-slide-down">
                <div class="bg-gradient-to-r from-red-50 to-rose-50 border-l-4 border-red-500 rounded-xl p-4 shadow-lg flex items-start">
                    <div class="flex-shrink-0">
                        <div class="bg-red-500 rounded-full p-2">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-red-800 font-semibold">Error!</p>
                        <p class="text-red-700 text-sm mt-1">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Filters Card with Enhanced Design -->
        <div class="bg-white rounded-2xl shadow-xl p-6 mb-8 border border-gray-100">
            <div class="flex items-center mb-4">
                <div class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-lg p-2 mr-3">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-bold text-gray-900">Search & Filter Options</h3>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <svg class="w-4 h-4 inline mr-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        Search Files
                    </label>
                    <input type="text" 
                           wire:model.live.debounce.300ms="search" 
                           placeholder="Restaurant, user, or file name..."
                           class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <svg class="w-4 h-4 inline mr-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                        </svg>
                        Status Filter
                    </label>
                    <select wire:model.live="statusFilter" 
                            class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
                        <option value="all">All Statuses</option>
                        <option value="pending">⏳ Pending</option>
                        <option value="processing">🔄 Processing</option>
                        <option value="completed">✅ Completed</option>
                        <option value="completed_with_errors">⚠️ Completed with Errors</option>
                        <option value="failed">❌ Failed</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <svg class="w-4 h-4 inline mr-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                        </svg>
                        Results Per Page
                    </label>
                    <select wire:model.live="perPage" 
                            class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
                        <option value="10">10 items</option>
                        <option value="15">15 items</option>
                        <option value="25">25 items</option>
                        <option value="50">50 items</option>
                        <option value="100">100 items</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Enhanced Table -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr class="bg-gradient-to-r from-gray-50 to-gray-100">
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                    </svg>
                                    Restaurant / User
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                    </svg>
                                    File Details
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    Status
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                    </svg>
                                    Date
                                </div>
                            </th>
                            <th class="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">
                                <div class="flex items-center justify-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                                    </svg>
                                    Actions
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-100">
                        @forelse($logs as $log)
                            <tr class="hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 transition-all duration-200">
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-12 w-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
                                            <span class="text-white font-bold text-lg">{{ substr($log->restaurant->name ?? 'N', 0, 1) }}</span>
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-bold text-gray-900">
                                                {{ $log->restaurant->name ?? 'N/A' }}
                                            </div>
                                            <div class="text-sm text-gray-600 flex items-center mt-1">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                                </svg>
                                                {{ $log->user->name ?? 'N/A' }}
                                            </div>
                                            <div class="text-xs text-gray-400 flex items-center mt-0.5">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                                </svg>
                                                {{ $log->user->email ?? 'N/A' }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0">
                                            @php
                                                $extension = pathinfo($log->file_name, PATHINFO_EXTENSION);
                                            @endphp
                                            @if(in_array($extension, ['xlsx', 'xls']))
                                                <div class="bg-green-100 rounded-lg p-2">
                                                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                                    </svg>
                                                </div>
                                            @else
                                                <div class="bg-blue-100 rounded-lg p-2">
                                                    <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                                    </svg>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-semibold text-gray-900">
                                                {{ Str::limit($log->file_name, 30) }}
                                            </div>
                                            <div class="text-xs text-gray-500 flex items-center mt-1">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
                                                </svg>
                                                {{ number_format($log->file_size / 1024, 2) }} KB
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-3 py-1.5 text-xs font-bold rounded-full shadow-sm
                                        @if($log->status === 'pending') bg-gradient-to-r from-yellow-400 to-amber-500 text-white
                                        @elseif($log->status === 'processing') bg-gradient-to-r from-blue-400 to-indigo-500 text-white
                                        @elseif($log->status === 'completed') bg-gradient-to-r from-green-400 to-emerald-500 text-white
                                        @elseif($log->status === 'completed_with_errors') bg-gradient-to-r from-orange-400 to-orange-500 text-white
                                        @elseif($log->status === 'failed') bg-gradient-to-r from-red-400 to-rose-500 text-white
                                        @endif">
                                        @if($log->status === 'pending')
                                            <svg class="w-3.5 h-3.5 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                            </svg>
                                        @elseif($log->status === 'processing')
                                            <svg class="w-3.5 h-3.5 mr-1.5 animate-spin" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path>
                                            </svg>
                                        @elseif($log->status === 'completed')
                                            <svg class="w-3.5 h-3.5 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                            </svg>
                                        @elseif($log->status === 'completed_with_errors')
                                            <svg class="w-3.5 h-3.5 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                            </svg>
                                        @elseif($log->status === 'failed')
                                            <svg class="w-3.5 h-3.5 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                            </svg>
                                        @endif
                                        {{ ucfirst(str_replace('_', ' ', $log->status)) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    <div class="flex items-center text-gray-600">
                                        <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                        </svg>
                                        <div>
                                            <div class="font-semibold text-gray-900">{{ $log->created_at->format('M d, Y') }}</div>
                                            <div class="text-xs text-gray-500">{{ $log->created_at->format('h:i A') }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center justify-center space-x-2">
                                        <button wire:click="viewDetails({{ $log->id }})"
                                                title="View Details"
                                                class="group relative p-2.5 text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-lg transition-all duration-200 transform hover:scale-110">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                            </svg>
                                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-900 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">View Details</span>
                                        </button>
                                        
                                        @if($log->status === 'pending')
                                        <button wire:click="processNow({{ $log->id }})"
                                                title="Process Now"
                                                class="group relative p-2.5 text-purple-600 bg-purple-50 hover:bg-purple-100 rounded-lg transition-all duration-200 transform hover:scale-110">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                            </svg>
                                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-900 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Process Now</span>
                                        </button>
                                        @endif
                                        
                                        @if(in_array($log->status, ['completed', 'completed_with_errors']))
                                        <button wire:click="discardImport({{ $log->id }})"
                                                onclick="return confirm('Are you sure you want to discard this import? This will revert all changes made by this import.')"
                                                title="Discard Import"
                                                class="group relative p-2.5 text-yellow-600 bg-yellow-50 hover:bg-yellow-100 rounded-lg transition-all duration-200 transform hover:scale-110">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
                                            </svg>
                                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-900 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Discard Import</span>
                                        </button>
                                        @endif
                                        
                                        <button wire:click="downloadFile({{ $log->id }})"
                                                title="Download"
                                                class="group relative p-2.5 text-green-600 bg-green-50 hover:bg-green-100 rounded-lg transition-all duration-200 transform hover:scale-110">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                            </svg>
                                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-900 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Download File</span>
                                        </button>
                                        
                                        <button wire:click="openEditModal({{ $log->id }})"
                                                title="Edit Status"
                                                class="group relative p-2.5 text-orange-600 bg-orange-50 hover:bg-orange-100 rounded-lg transition-all duration-200 transform hover:scale-110">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                            </svg>
                                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-900 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Edit Status</span>
                                        </button>
                                        
                                        <button wire:click="deleteLog({{ $log->id }})"
                                                onclick="return confirm('⚠️ WARNING: This will permanently delete the upload record and the file. This action cannot be undone. Are you absolutely sure?')"
                                                title="Delete"
                                                class="group relative p-2.5 text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition-all duration-200 transform hover:scale-110">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                            </svg>
                                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-900 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Delete Forever</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-16 text-center">
                                    <div class="flex flex-col items-center justify-center">
                                        <div class="bg-gradient-to-br from-gray-100 to-gray-200 rounded-full p-6 mb-4">
                                            <svg class="w-20 h-20 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                            </svg>
                                        </div>
                                        <p class="text-xl text-gray-600 font-bold mb-2">No Uploads Found</p>
                                        <p class="text-sm text-gray-500">Try adjusting your search or filter criteria</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Enhanced Pagination -->
            <div class="px-6 py-4 border-t border-gray-200 bg-gradient-to-r from-gray-50 to-gray-100">
                {{ $logs->links() }}
            </div>
        </div>

        <!-- Details Modal -->
        @if($showDetailsModal && $selectedLog)
            <div class="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm z-50 flex items-center justify-center p-4 animate-fade-in" wire:click="closeDetailsModal">
                <div class="bg-white rounded-3xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto transform transition-all animate-scale-in" wire:click.stop>
                    <!-- Gradient Header -->
                    <div class="bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 px-8 py-6 rounded-t-3xl relative overflow-hidden">
                        <div class="absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-white opacity-10 rounded-full"></div>
                        <div class="absolute bottom-0 left-0 -mb-10 -ml-10 w-32 h-32 bg-white opacity-10 rounded-full"></div>
                        <div class="relative z-10 flex items-center justify-between">
                            <div class="flex items-center space-x-4">
                                <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-2xl p-3">
                                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="text-2xl font-extrabold text-white">Upload Details</h3>
                                    <p class="text-blue-100 text-sm mt-1">Complete information about this submission</p>
                                </div>
                            </div>
                            <button wire:click="closeDetailsModal" class="text-white hover:bg-white hover:bg-opacity-20 rounded-xl p-2 transition-all duration-200">
                                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <!-- Body -->
                    <div class="px-8 py-8 space-y-8">
                        <!-- Restaurant & User Grid -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-6 border-2 border-blue-100 shadow-sm">
                                <div class="flex items-center mb-4">
                                    <div class="bg-blue-500 rounded-xl p-2 mr-3">
                                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                        </svg>
                                    </div>
                                    <span class="text-sm font-bold text-gray-700 uppercase tracking-wide">Restaurant</span>
                                </div>
                                <p class="text-xl font-bold text-gray-900">{{ $selectedLog->restaurant->name ?? 'N/A' }}</p>
                            </div>

                            <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6 border-2 border-green-100 shadow-sm">
                                <div class="flex items-center mb-4">
                                    <div class="bg-green-500 rounded-xl p-2 mr-3">
                                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                        </svg>
                                    </div>
                                    <span class="text-sm font-bold text-gray-700 uppercase tracking-wide">Uploaded By</span>
                                </div>
                                <p class="text-lg font-bold text-gray-900">{{ $selectedLog->user->name ?? 'N/A' }}</p>
                                <p class="text-sm text-gray-600 mt-1">{{ $selectedLog->user->email ?? 'N/A' }}</p>
                            </div>
                        </div>

                        <!-- File Information Card -->
                        <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-6 border-2 border-purple-100 shadow-sm">
                            <h4 class="text-lg font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                </svg>
                                File Information
                            </h4>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center bg-white rounded-xl p-4">
                                    <span class="text-sm font-semibold text-gray-600">File Name</span>
                                    <span class="text-sm font-bold text-gray-900">{{ $selectedLog->file_name }}</span>
                                </div>
                                <div class="flex justify-between items-center bg-white rounded-xl p-4">
                                    <span class="text-sm font-semibold text-gray-600">File Size</span>
                                    <span class="text-sm font-bold text-gray-900">{{ number_format($selectedLog->file_size / 1024, 2) }} KB</span>
                                </div>
                                <div class="flex justify-between items-center bg-white rounded-xl p-4">
                                    <span class="text-sm font-semibold text-gray-600">Uploaded</span>
                                    <span class="text-sm font-bold text-gray-900">{{ $selectedLog->created_at->format('M d, Y h:i A') }}</span>
                                </div>
                                <div class="flex justify-between items-center bg-white rounded-xl p-4">
                                    <span class="text-sm font-semibold text-gray-600">Status</span>
                                    <span class="px-4 py-2 text-xs font-bold rounded-full shadow-sm
                                        @if($selectedLog->status === 'pending') bg-gradient-to-r from-yellow-400 to-amber-500 text-white
                                        @elseif($selectedLog->status === 'processing') bg-gradient-to-r from-blue-400 to-indigo-500 text-white
                                        @elseif($selectedLog->status === 'completed') bg-gradient-to-r from-green-400 to-emerald-500 text-white
                                        @elseif($selectedLog->status === 'completed_with_errors') bg-gradient-to-r from-orange-400 to-orange-500 text-white
                                        @elseif($selectedLog->status === 'failed') bg-gradient-to-r from-red-400 to-rose-500 text-white
                                        @endif">
                                        {{ ucfirst(str_replace('_', ' ', $selectedLog->status)) }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Import Summary -->
                        @if($importSummary && isset($importSummary['summary']))
                        <div class="bg-gradient-to-br from-orange-50 to-yellow-50 rounded-2xl p-6 border-2 border-orange-100 shadow-sm">
                            <h4 class="text-lg font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 mr-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                </svg>
                                Import Summary
                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                @if(isset($importSummary['summary']['menu_items']))
                                <div class="bg-white rounded-xl p-5 shadow-sm border-2 border-blue-100">
                                    <div class="flex items-center justify-between mb-3">
                                        <span class="text-sm font-bold text-gray-600 uppercase">Menu Items</span>
                                        <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                        </svg>
                                    </div>
                                    <p class="text-3xl font-extrabold text-blue-600 mb-1">{{ $importSummary['summary']['menu_items']['success'] }}</p>
                                    <p class="text-xs font-semibold text-red-600">{{ $importSummary['summary']['menu_items']['failed'] }} failed</p>
                                </div>
                                @endif
                                @if(isset($importSummary['summary']['areas']))
                                <div class="bg-white rounded-xl p-5 shadow-sm border-2 border-green-100">
                                    <div class="flex items-center justify-between mb-3">
                                        <span class="text-sm font-bold text-gray-600 uppercase">Areas</span>
                                        <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        </svg>
                                    </div>
                                    <p class="text-3xl font-extrabold text-green-600 mb-1">{{ $importSummary['summary']['areas']['success'] }}</p>
                                    <p class="text-xs font-semibold text-red-600">{{ $importSummary['summary']['areas']['failed'] }} failed</p>
                                </div>
                                @endif
                                @if(isset($importSummary['summary']['tables']))
                                <div class="bg-white rounded-xl p-5 shadow-sm border-2 border-purple-100">
                                    <div class="flex items-center justify-between mb-3">
                                        <span class="text-sm font-bold text-gray-600 uppercase">Tables</span>
                                        <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                                        </svg>
                                    </div>
                                    <p class="text-3xl font-extrabold text-purple-600 mb-1">{{ $importSummary['summary']['tables']['success'] }}</p>
                                    <p class="text-xs font-semibold text-red-600">{{ $importSummary['summary']['tables']['failed'] }} failed</p>
                                </div>
                                @endif
                            </div>

                            @if(isset($importSummary['errors']) && count($importSummary['errors']) > 0)
                            <div class="mt-6 bg-white rounded-xl border-2 border-red-200 p-5">
                                <div class="flex items-center mb-3">
                                    <svg class="w-5 h-5 text-red-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <p class="text-sm font-bold text-red-800">Import Errors</p>
                                </div>
                                <ul class="text-xs text-red-700 space-y-2 max-h-48 overflow-y-auto">
                                    @foreach(array_slice($importSummary['errors'], 0, 10) as $error)
                                    <li class="flex items-start">
                                        <span class="text-red-500 mr-2">•</span>
                                        <span>{{ $error }}</span>
                                    </li>
                                    @endforeach
                                    @if(count($importSummary['errors']) > 10)
                                    <li class="text-red-600 font-bold mt-2">... and {{ count($importSummary['errors']) - 10 }} more errors</li>
                                    @endif
                                </ul>
                            </div>
                            @endif
                        </div>
                        @endif

                        <!-- Notes Section -->
                        <div class="bg-gradient-to-br from-gray-50 to-slate-50 rounded-2xl p-6 border-2 border-gray-200 shadow-sm">
                            <h4 class="text-lg font-bold text-gray-900 mb-3 flex items-center">
                                <svg class="w-6 h-6 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                                </svg>
                                Additional Notes
                            </h4>
                            <div class="bg-white rounded-xl p-4 text-sm text-gray-700 leading-relaxed">
                                {{ $selectedLog->notes ?? 'No additional notes available for this upload.' }}
                            </div>
                        </div>
                    </div>

                    <!-- Footer with Actions -->
                    <div class="bg-gradient-to-r from-gray-50 to-slate-50 px-8 py-6 border-t-2 border-gray-200 rounded-b-3xl flex justify-between items-center">
                        <button wire:click="closeDetailsModal"
                                class="px-6 py-3 bg-white border-2 border-gray-300 rounded-xl text-sm font-bold text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 flex items-center">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                            Close
                        </button>

                        <button wire:click="downloadFile({{ $selectedLog->id }})"
                                class="px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl text-sm font-bold text-white hover:from-green-600 hover:to-emerald-700 transition-all duration-200 flex items-center shadow-lg transform hover:scale-105">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                            Download File
                        </button>
                    </div>
                </div>
            </div>
        @endif

        <!-- Edit Status Modal -->
        @if($showModal && $selectedLog)
            <div class="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm z-50 flex items-center justify-center p-4 animate-fade-in" wire:click="closeModal">
                <div class="bg-white rounded-3xl shadow-2xl max-w-lg w-full transform transition-all animate-scale-in" wire:click.stop>
                    <div class="bg-gradient-to-r from-orange-500 via-red-500 to-pink-600 px-8 py-6 rounded-t-3xl relative overflow-hidden">
                        <div class="absolute top-0 right-0 -mt-8 -mr-8 w-32 h-32 bg-white opacity-10 rounded-full"></div>
                        <div class="relative z-10 flex items-center justify-between">
                            <div>
                                <h3 class="text-2xl font-extrabold text-white">Update Status</h3>
                                <p class="text-red-100 text-sm mt-1">Change the processing status of this upload</p>
                            </div>
                            <button wire:click="closeModal" class="text-white hover:bg-white hover:bg-opacity-20 rounded-xl p-2 transition-all duration-200">
                                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="px-8 py-8">
                        <div class="mb-6">
                            <label class="block text-sm font-bold text-gray-700 mb-3">Notes / Comments</label>
                            <textarea wire:model="notes" 
                                      rows="4"
                                      class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all"
                                      placeholder="Add notes about this status change..."></textarea>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <button wire:click="updateStatus('pending')"
                                    class="px-5 py-4 bg-gradient-to-r from-yellow-500 to-amber-600 rounded-xl text-sm font-bold text-white hover:from-yellow-600 hover:to-amber-700 transition-all duration-200 transform hover:scale-105 shadow-lg flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                </svg>
                                Pending
                            </button>
                            <button wire:click="updateStatus('processing')"
                                    class="px-5 py-4 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl text-sm font-bold text-white hover:from-blue-600 hover:to-indigo-700 transition-all duration-200 transform hover:scale-105 shadow-lg flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2 animate-spin" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path>
                                </svg>
                                Processing
                            </button>
                            <button wire:click="updateStatus('completed')"
                                    class="px-5 py-4 bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl text-sm font-bold text-white hover:from-green-600 hover:to-emerald-700 transition-all duration-200 transform hover:scale-105 shadow-lg flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>
                                Completed
                            </button>
                            <button wire:click="updateStatus('failed')"
                                    class="px-5 py-4 bg-gradient-to-r from-red-500 to-rose-600 rounded-xl text-sm font-bold text-white hover:from-red-600 hover:to-rose-700 transition-all duration-200 transform hover:scale-105 shadow-lg flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                </svg>
                                Failed
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

@push('styles')
<style>
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.2s ease-out;
}

.animate-scale-in {
    animation: scale-in 0.3s ease-out;
}

.animate-slide-down {
    animation: slide-down 0.3s ease-out;
}
.transition-transform {
    background: #057a55  !impoetant;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}
#main-content .text-white {
    --tw-text-opacity: 1;
    color: rgb(24 7 7);
}
.text-white .text-blue-100
{
	    color: rgb(24 7 7);
}
</style>
@endpush
