<div>
    @if($applications->isEmpty())
        <p class="p-4 text-gray-500">No applications found.</p>
    @else
        <div class="space-y-4">
            @foreach($applications as $application)
                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md border-l-4 {{ $application->status === 'confirmed' ? 'border-green-500' : 'border-yellow-500' }}">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        {{ $application->child_name }} - 
                        {{ $application->camp_package?->name ?? 'N/A' }}
                    </h3>

                    <p class="text-gray-600 dark:text-gray-300">
                        <strong>Location:</strong> {{ $application->location ?? 'Not Specified' }}
                    </p>

                    <p class="text-gray-600 dark:text-gray-300">
                        Package Name: {{ $application->camp_package?->label ?? 'N/A' }} ({{ $application->camp_package?->name ?? 'N/A' }})
                    </p>

                    <p class="text-gray-600 dark:text-gray-300">
                        Status: <span class="font-medium text-blue-600 dark:text-blue-400">{{ ucfirst($application->status) }}</span>
                    </p>

                    @if(auth()->user()->is_admin)
                        <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                            <label for="status-{{ $application->id }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Update Status:</label>
                            <select wire:change="$dispatch('updateStatus', { bookingId: {{ $application->id }}, newStatus: $event.target.value })"
                                    id="status-{{ $application->id }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
                                <option value="pending" @if($application->status === 'pending') selected @endif>Pending</option>
                                <option value="confirmed" @if($application->status === 'confirmed') selected @endif>Confirmed</option>
                                <option value="rejected" @if($application->status === 'rejected') selected @endif>Rejected</option>
                            </select>
                        </div>

                        <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                            <p class="text-gray-600 dark:text-gray-300">
                                <strong>Parent Email:</strong> {{ $application->parent_email }}
                            </p>
                            <p class="text-gray-600 dark:text-gray-300">
                                <strong>Parent Phone:</strong> {{ $application->parent_phone ?? 'N/A' }}
                            </p>
                            <p class="text-gray-600 dark:text-gray-300">
                                <strong>Child DOB:</strong> {{ $application->child_dob->format('M d, Y') }}
                            </p>
                            <p class="text-gray-600 dark:text-gray-300">
                                <strong>Child Gender:</strong> {{ $application->child_gender ?? 'N/A' }}
                            </p>
                            <p class="text-gray-600 dark:text-gray-300 md:col-span-2">
                                <strong>Special Needs:</strong> {{ $application->special_needs ?: 'None' }}
                            </p>
                            <p class="text-gray-600 dark:text-gray-300 md:col-span-2">
                                <strong>Payment Reference:</strong> <code class="bg-gray-100 dark:bg-gray-900 px-1 rounded">{{ $application->payment_reference }}</code>
                            </p>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

        <div class="mt-4">
            {{ $applications->links() }}
        </div>
    @endif
</div>