@extends('layouts.admin')

@section('title', 'Hasil Seleksi')
@section('page-title', 'Hasil Seleksi Beasiswa')

@section('header-actions')
    <div style="display: flex; gap: 0.5rem;">
        <form action="{{ route('admin.results.calculate') }}" method="POST" style="display: inline;">
            @csrf
            <input type="hidden" name="period" value="{{ $period }}">
            <button type="submit" class="btn btn-success" onclick="return confirm('Jalankan perhitungan MOORA untuk periode {{ $period }}?');">
                🧮 Hitung MOORA
            </button>
        </form>
        
        @if($results->isNotEmpty())
            <a href="{{ route('admin.results.export', ['period' => $period]) }}" class="btn btn-primary">
                📄 Export PDF
            </a>
        @endif
    </div>
@endsection

@section('content')
<!-- Period & Quota Settings -->
<div class="card mb-4">
    <div class="card-body">
        <div style="display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;">
            <form action="{{ route('admin.results.index') }}" method="GET" style="display: flex; gap: 0.5rem; align-items: center;">
                <label class="font-medium">Periode:</label>
                <select name="period" class="form-control" style="max-width: 150px;" onchange="this.form.submit()">
                    @foreach($periods as $p)
                        <option value="{{ $p }}" {{ $p === $period ? 'selected' : '' }}>{{ $p }}</option>
                    @endforeach
                </select>
            </form>
            
            <form action="{{ route('admin.results.quota') }}" method="POST" style="display: flex; gap: 0.5rem; align-items: center;">
                @csrf
                <input type="hidden" name="period" value="{{ $period }}">
                <label class="font-medium">Kuota Penerima:</label>
                <input type="number" name="quota" value="{{ $settings->quota }}" min="1" class="form-control" style="width: 80px;">
                <button type="submit" class="btn btn-secondary">Simpan</button>
            </form>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Peringkat Penerima Beasiswa - Periode {{ $period }}</h2>
        @if($results->isNotEmpty())
            <span class="text-sm text-muted">(Kuota: {{ $settings->quota }} siswa)</span>
        @endif
    </div>
    <div class="card-body">
        @if($results->isEmpty())
            <div class="empty-state">
                <div style="font-size: 3rem; margin-bottom: 1rem;">📊</div>
                <h3>Belum ada hasil perhitungan</h3>
                <p>Klik tombol "Hitung MOORA" untuk menjalankan perhitungan peringkat.</p>
            </div>
        @else
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th style="width: 80px;">Rank</th>
                            <th>NIS</th>
                            <th>Nama Siswa</th>
                            <th>Skor Yi</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($results as $result)
                            <tr class="{{ $result->is_selected ? '' : 'row-not-selected' }}">
                                <td>
                                    <span class="rank-badge rank-{{ $result->rank <= 3 ? $result->rank : 'other' }}">{{ $result->rank }}</span>
                                </td>
                                <td class="font-medium">{{ $result->submission->student->nis ?? '-' }}</td>
                                <td>{{ $result->submission->student->user->name ?? '-' }}</td>
                                <td class="font-medium">{{ number_format($result->yi_score, 6) }}</td>
                                <td>
                                    @if($result->is_selected)
                                        <span class="badge badge-success">Terpilih</span>
                                    @else
                                        <span class="badge badge-danger">Tidak Terpilih</span>
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('admin.results.show', $result) }}" class="btn btn-secondary btn-sm">
                                        Detail
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>

@push('styles')
<style>
    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: var(--gray-500);
    }
    
    .empty-state h3 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
    }
    
    .rank-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 0.875rem;
        font-weight: 700;
        background: var(--gray-100);
        color: var(--gray-600);
    }
    
    .rank-badge.rank-1 {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: white;
        box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
    }
    
    .rank-badge.rank-2 {
        background: linear-gradient(135deg, #9ca3af, #6b7280);
        color: white;
    }
    
    .rank-badge.rank-3 {
        background: linear-gradient(135deg, #d97706, #b45309);
        color: white;
    }
    
    .row-not-selected {
        opacity: 0.6;
        background: var(--gray-50);
    }
</style>
@endpush
@endsection