@extends('layouts.dashboard')

@section('title', 'Applications')

@section('page-content')
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Applications</h1>
    <p class="mt-1 text-sm text-gray-600">Manage student applications</p>
</div>

<!-- Filters -->
<div class="mb-4 bg-white p-4 rounded-lg shadow-sm">
    <form method="GET" action="{{ route('applications.index') }}" class="flex gap-4">
        <input 
            type="text" 
            name="search" 
            value="{{ request('search') }}"
            placeholder="Search applications..."
            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
        >
        <select 
            name="status"
            class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
        >
            <option value="">All Status</option>
            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
            <option value="reviewed" {{ request('status') == 'reviewed' ? 'selected' : '' }}>Reviewed</option>
            <option value="accepted" {{ request('status') == 'accepted' ? 'selected' : '' }}>Accepted</option>
            <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
        </select>
        <button type="submit" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
            Filter
        </button>
        <a href="{{ route('applications.index') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
            Clear
        </a>
    </form>
</div>

<div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Application #</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Program</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @forelse($applications as $application)
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $application->application_number }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $application->first_name }} {{ $application->last_name }}</td>
                <td class="px-6 py-4 text-sm text-gray-500">{{ $application->email }}</td>
                <td class="px-6 py-4 text-sm text-gray-500">{{ $application->program->name }}</td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 text-xs font-semibold rounded-full
                        {{ $application->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : '' }}
                        {{ $application->status === 'reviewed' ? 'bg-blue-100 text-blue-800' : '' }}
                        {{ $application->status === 'accepted' ? 'bg-green-100 text-green-800' : '' }}
                        {{ $application->status === 'rejected' ? 'bg-red-100 text-red-800' : '' }}
                    ">
                        {{ ucfirst($application->status) }}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $application->created_at->format('Y-m-d') }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <a href="{{ route('applications.show', $application) }}" class="text-blue-600 hover:text-blue-900">View</a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" class="px-6 py-12 text-center text-gray-500">No applications found</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

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