@extends('layouts.admin')

@section('title', 'Daftar Pengajuan')
@section('page-title', 'Daftar Pengajuan Beasiswa')

@section('content')
<!-- Filter -->
<div class="card mb-4">
    <div class="card-body">
        <form action="{{ route('admin.submissions.index') }}" method="GET" style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
            <div>
                <label class="form-label" style="margin-bottom: 0.25rem; font-size: 0.75rem;">Periode</label>
                <select name="period" class="form-control" style="min-width: 120px;">
                    @foreach($periods as $p)
                        <option value="{{ $p }}" {{ $period === $p ? 'selected' : '' }}>{{ $p }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label" style="margin-bottom: 0.25rem; font-size: 0.75rem;">Status</label>
                <select name="status" class="form-control" style="min-width: 150px;">
                    <option value="">Semua Status</option>
                    @foreach($statuses as $s)
                        <option value="{{ $s->value }}" {{ $status === $s->value ? 'selected' : '' }}>
                            {{ $s->label() }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div style="align-self: flex-end;">
                <button type="submit" class="btn btn-secondary">Filter</button>
            </div>
            @if($status)
                <div style="align-self: flex-end;">
                    <button type="button" class="btn btn-secondary" onclick="window.location.href='{{ route('admin.submissions.index', ['period' => $period]) }}'">Reset Status</button>
                </div>
            @endif
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        @if($submissions->isEmpty())
            <div class="empty-state">
                <p class="text-muted">Belum ada pengajuan.</p>
            </div>
        @else
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>NIS</th>
                            <th>Nama Siswa</th>
                            <th>Periode</th>
                            <th>Status</th>
                            <th>Tanggal Submit</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($submissions as $submission)
                            <tr>
                                <td class="font-medium">{{ $submission->student->nis ?? '-' }}</td>
                                <td>{{ $submission->student->user->name ?? '-' }}</td>
                                <td>{{ $submission->period }}</td>
                                <td>
                                    <span class="badge badge-{{ $submission->status->color() }}">
                                        {{ $submission->status->label() }}
                                    </span>
                                </td>
                                <td class="text-sm text-muted">
                                    {{ $submission->submitted_at ? $submission->submitted_at->format('d M Y H:i') : '-' }}
                                </td>
                                <td>
                                    <a href="{{ route('admin.submissions.show', $submission) }}" class="btn btn-secondary btn-sm">
                                        Detail
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <div class="mt-4">
                {{ $submissions->withQueryString()->links() }}
            </div>
        @endif
    </div>
</div>

@push('styles')
<style>
    .empty-state {
        text-align: center;
        padding: 2rem;
    }
</style>
@endpush
@endsection