@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">Invoices</h1>
                <p class="text-gray-500 dark:text-gray-400 mt-1">Manage and view all payment invoices</p>
               
            </div>
            
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <!-- Total Invoices -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Total Invoices</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $payments->count() }}</p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center">
                    <i class="fas fa-file-invoice text-blue-500 dark:text-blue-400"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                <p class="text-xs text-gray-500 dark:text-gray-400">All time invoices</p>
            </div>
        </div>

        <!-- Total Amount -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Total Amount</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">
                        {{ number_format($payments->sum('amount'), 0) }} SR
                    </p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-green-50 dark:bg-green-900/20 flex items-center justify-center">
                    <i class="fas fa-money-bill-wave text-green-500 dark:text-green-400"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                <p class="text-xs text-gray-500 dark:text-gray-400">Overall revenue</p>
            </div>
        </div>

        <!-- This Month -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">This Month</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">
                        {{ number_format($payments->where('created_at', '>=', now()->startOfMonth())->sum('amount'), 0) }} SR
                    </p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center">
                    <i class="fas fa-calendar-day text-purple-500 dark:text-purple-400"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                @php
                    $monthlyPercentage = $payments->sum('amount') > 0 ? 
                        ($payments->where('created_at', '>=', now()->startOfMonth())->sum('amount') / $payments->sum('amount')) * 100 : 0;
                @endphp
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500 dark:text-gray-400">Monthly share</span>
                    <span class="text-xs font-medium text-purple-600 dark:text-purple-400">{{ number_format($monthlyPercentage, 0) }}%</span>
                </div>
            </div>
        </div>

        <!-- Pending -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Pending</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">
                        {{ $payments->where('status', 'pending')->count() }}
                    </p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center">
                    <i class="fas fa-clock text-orange-500 dark:text-orange-400"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                @php
                    $pendingPercentage = $payments->count() > 0 ? 
                        ($payments->where('status', 'pending')->count() / $payments->count()) * 100 : 0;
                @endphp
                <div class="flex items-center gap-2">
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                        <div class="bg-orange-500 h-1.5 rounded-full transition-all duration-300" 
                             style="width: {{ $pendingPercentage }}%"></div>
                    </div>
                    <span class="text-xs font-medium text-orange-600 dark:text-orange-400">{{ number_format($pendingPercentage, 0) }}%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Invoices Table -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <h2 class="font-semibold text-gray-900 dark:text-white">All Invoices</h2>
                <div class="flex items-center gap-3">
                    <div class="relative">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
                        <input type="text" 
                               placeholder="Search invoices..." 
                               class="pl-10 pr-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg 
                                      bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                      focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none
                                      transition-colors w-full sm:w-64">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Invoice
                        </th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Client
                        </th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Amount
                        </th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Method
                        </th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Date
                        </th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Status
                        </th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($payments as $payment)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                            <!-- Invoice Column -->
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center flex-shrink-0">
                                        <i class="fas fa-file-invoice text-white text-sm"></i>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                                            INV-{{ str_pad($payment->id, 6, '0', STR_PAD_LEFT) }}
                                        </p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                            Project: {{ $payment->project->name ?? 'N/A' }}
                                        </p>
                                    </div>
                                </div>
                            </td>

                            <!-- Client Column -->
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white text-xs">
                                        {{ strtoupper(substr($payment->user->name ?? 'C', 0, 1)) }}
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                            {{ $payment->user->name ?? 'N/A' }}
                                        </p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                            ID: {{ $payment->project_id }}
                                        </p>
                                    </div>
                                </div>
                            </td>

                            <!-- Amount Column -->
                            <td class="px-5 py-4">
                                <p class="text-sm font-bold text-green-600 dark:text-green-400">
                                    {{ number_format($payment->amount, 0) }} SR
                                </p>
                            </td>

                            <!-- Method Column -->
                            <td class="px-5 py-4">
                                @php
                                    $methodConfig = [
                                        'cash' => [
                                            'color' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                            'icon' => 'fa-money-bill'
                                        ],
                                        'bank_transfer' => [
                                            'color' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
                                            'icon' => 'fa-university'
                                        ],
                                        'check' => [
                                            'color' => 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
                                            'icon' => 'fa-file-invoice'
                                        ],
                                        'online' => [
                                            'color' => 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300',
                                            'icon' => 'fa-globe'
                                        ],
                                        'mobile_banking' => [
                                            'color' => 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
                                            'icon' => 'fa-mobile-alt'
                                        ],
                                        'card' => [
                                            'color' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
                                            'icon' => 'fa-credit-card'
                                        ]
                                    ];
                                    $config = $methodConfig[$payment->payment_method] ?? [
                                        'color' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
                                        'icon' => 'fa-money-bill'
                                    ];
                                @endphp
                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium {{ $config['color'] }}">
                                    <i class="fas {{ $config['icon'] }} text-xs"></i>
                                    {{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}
                                </span>
                            </td>

                            <!-- Date Column -->
                            <td class="px-5 py-4">
                                <p class="text-sm text-gray-900 dark:text-white">
                                    {{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ $payment->created_at->format('h:i A') }}
                                </p>
                            </td>

                            <!-- Status Column -->
                            <td class="px-5 py-4">
                                @php
                                    $statusConfig = [
                                        'paid' => [
                                            'color' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                            'icon' => 'fa-check-circle'
                                        ],
                                        'pending' => [
                                            'color' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
                                            'icon' => 'fa-clock'
                                        ],
                                        'failed' => [
                                            'color' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
                                            'icon' => 'fa-times-circle'
                                        ]
                                    ];
                                    $status = $statusConfig[$payment->status] ?? [
                                        'color' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
                                        'icon' => 'fa-question-circle'
                                    ];
                                @endphp
                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium {{ $status['color'] }}">
                                    <i class="fas {{ $status['icon'] }} text-xs"></i>
                                    {{ ucfirst($payment->status) }}
                                </span>
                            </td>

                            <!-- Actions Column -->
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('admin.payments.view', $payment->id) }}" 
                                       class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 
                                              hover:bg-blue-100 dark:hover:bg-blue-900/30 active:scale-[0.95] transition-all"
                                       title="View Invoice">
                                        <i class="fas fa-eye text-sm"></i>
                                    </a>
                                    
                                    <button onclick="showDeleteModal({{ $payment->id }}, 'INV-{{ str_pad($payment->id, 6, '0', STR_PAD_LEFT) }}', '{{ number_format($payment->amount, 2) }} SR')"
                                            class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 
                                                   hover:bg-red-100 dark:hover:bg-red-900/30 active:scale-[0.95] transition-all"
                                            title="Delete Invoice">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-5 py-12">
                                <div class="flex flex-col items-center justify-center text-gray-400 dark:text-gray-500">
                                    <div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center mb-4">
                                        <i class="fas fa-file-invoice text-white text-xl"></i>
                                    </div>
                                    <p class="text-lg font-medium text-gray-500 dark:text-gray-400 mb-2">No invoices found</p>
                                    <p class="text-sm text-gray-400 dark:text-gray-500">No payment records available</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($payments->hasPages())
            <div class="px-5 py-4 border-t border-gray-100 dark:border-gray-700">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        Showing {{ $payments->firstItem() }} to {{ $payments->lastItem() }} of {{ $payments->total() }} results
                    </div>
                    <div class="flex items-center gap-2">
                        @if($payments->onFirstPage())
                            <span class="px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 text-sm cursor-not-allowed">
                                Previous
                            </span>
                        @else
                            <a href="{{ $payments->previousPageUrl() }}" 
                               class="px-3 py-1.5 rounded-lg bg-white dark:bg-gray-600 border border-gray-200 dark:border-gray-500 
                                      text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-500 
                                      transition-colors text-sm">
                                Previous
                            </a>
                        @endif

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

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center p-4 z-50 hidden">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full transform transition-all duration-300 scale-95 opacity-0"
         id="modalContent">
        <!-- Modal Header -->
        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-red-500 dark:text-red-400 text-lg"></i>
                </div>
                <div class="min-w-0 flex-1">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">Delete Invoice</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">This action cannot be undone</p>
                </div>
            </div>
        </div>

        <!-- Modal Body -->
        <div class="p-6">
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4">
                <div class="flex items-start gap-3">
                    <i class="fas fa-info-circle text-red-500 dark:text-red-400 mt-0.5"></i>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-medium text-red-800 dark:text-red-300">Warning: Invoice Deletion</p>
                        <p class="text-xs text-red-600 dark:text-red-400 mt-1">
                            This will permanently delete the invoice record and all associated data.
                        </p>
                    </div>
                </div>
            </div>

            <div class="space-y-3">
                <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Invoice ID:</span>
                    <span class="text-sm font-semibold text-gray-900 dark:text-white" id="modalInvoiceId"></span>
                </div>
                <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Amount:</span>
                    <span class="text-sm font-semibold text-red-600 dark:text-red-400" id="modalInvoiceAmount"></span>
                </div>
                <div class="flex justify-between items-center py-2">
                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Date:</span>
                    <span class="text-sm text-gray-900 dark:text-white" id="modalInvoiceDate"></span>
                </div>
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 rounded-b-xl">
            <div class="flex gap-3 justify-end">
                <button type="button" 
                        onclick="hideDeleteModal()"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 
                               border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 
                               focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors duration-200">
                    Cancel
                </button>
                <button type="button" 
                        id="confirmDeleteBtn"
                        class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-red-500 to-red-600 
                               hover:from-red-600 hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 
                               focus:ring-red-500 rounded-lg shadow-sm transition-all duration-200 transform hover:scale-105">
                    <i class="fas fa-trash mr-2"></i>
                    Delete Invoice
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    let currentPaymentId = null;

    function showDeleteModal(paymentId, invoiceId, amount) {
        currentPaymentId = paymentId;
        
        // Set modal content
        document.getElementById('modalInvoiceId').textContent = invoiceId;
        document.getElementById('modalInvoiceAmount').textContent = amount;
        document.getElementById('modalInvoiceDate').textContent = new Date().toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        });

        // Show modal with animation
        const modal = document.getElementById('deleteModal');
        const modalContent = document.getElementById('modalContent');
        
        modal.classList.remove('hidden');
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);

        // Set up confirm button
        document.getElementById('confirmDeleteBtn').onclick = performDelete;
    }

    function hideDeleteModal() {
        const modal = document.getElementById('deleteModal');
        const modalContent = document.getElementById('modalContent');
        
        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');
        
        setTimeout(() => {
            modal.classList.add('hidden');
            currentPaymentId = null;
        }, 300);
    }

    function performDelete() {
        if (!currentPaymentId) return;

        // Show loading state
        const confirmBtn = document.getElementById('confirmDeleteBtn');
        const originalText = confirmBtn.innerHTML;
        confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Deleting...';
        confirmBtn.disabled = true;

        // Perform delete request
        fetch(`/admin/panel/payments/${currentPaymentId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        }).then(response => {
            if (response.ok) {
                // Show success message and reload
                showSuccessMessage('Invoice deleted successfully');
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                throw new Error('Delete failed');
            }
        }).catch(error => {
            // Show error message
            showErrorMessage('Error deleting invoice');
            confirmBtn.innerHTML = originalText;
            confirmBtn.disabled = false;
        });
    }

    function showSuccessMessage(message) {
        // Create success message element
        const successMsg = document.createElement('div');
        successMsg.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full';
        successMsg.innerHTML = `
            <div class="flex items-center space-x-2">
                <i class="fas fa-check-circle"></i>
                <span>${message}</span>
            </div>
        `;
        
        document.body.appendChild(successMsg);
        
        // Animate in
        setTimeout(() => {
            successMsg.classList.remove('translate-x-full');
        }, 10);
        
        // Remove after 3 seconds
        setTimeout(() => {
            successMsg.classList.add('translate-x-full');
            setTimeout(() => {
                document.body.removeChild(successMsg);
            }, 300);
        }, 3000);
    }

    function showErrorMessage(message) {
        // Create error message element
        const errorMsg = document.createElement('div');
        errorMsg.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full';
        errorMsg.innerHTML = `
            <div class="flex items-center space-x-2">
                <i class="fas fa-exclamation-circle"></i>
                <span>${message}</span>
            </div>
        `;
        
        document.body.appendChild(errorMsg);
        
        // Animate in
        setTimeout(() => {
            errorMsg.classList.remove('translate-x-full');
        }, 10);
        
        // Remove after 3 seconds
        setTimeout(() => {
            errorMsg.classList.add('translate-x-full');
            setTimeout(() => {
                document.body.removeChild(errorMsg);
            }, 300);
        }, 3000);
    }

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

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

    // Search functionality
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.querySelector('input[type="text"]');
        if (searchInput) {
            searchInput.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase();
                const rows = document.querySelectorAll('tbody tr');
                
                rows.forEach(row => {
                    const text = row.textContent.toLowerCase();
                    if (text.includes(searchTerm)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            });
        }
    });
</script>

<style>
    .dark .bg-gray-700 {
        background-color: rgba(55, 65, 81, 0.5);
    }
    
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    
    thead th {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    tbody tr:last-child td {
        border-bottom: none;
    }
    
    /* Smooth transitions for modal */
    #deleteModal {
        backdrop-filter: blur(4px);
    }
    
    #modalContent {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
</style>
@endsection