@extends('layouts.student')

@section('title', 'Status Pengajuan')

@section('content')
<div class="page-header mb-4">
    <h1>Status Pengajuan</h1>
    <p class="text-muted">Periode {{ $currentPeriod }}</p>
</div>

@if(!$submission)
    <div class="card">
        <div class="card-body text-center" style="padding: 3rem;">
            <div style="font-size: 3rem; margin-bottom: 1rem;">📝</div>
            <h3>Belum Ada Pengajuan</h3>
            <p class="text-muted">Anda belum mengajukan beasiswa untuk periode ini.</p>
            <a href="{{ route('student.submission.index') }}" class="btn btn-primary">
                Ajukan Beasiswa
            </a>
        </div>
    </div>
@else
    <div class="grid grid-cols-3">
        <div style="grid-column: span 2;">
            <!-- Status Timeline -->
            <div class="card mb-4">
                <div class="card-header">
                    <h2>Timeline Status</h2>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <div class="timeline-item completed">
                            <div class="timeline-marker">✓</div>
                            <div class="timeline-content">
                                <h4>Draft Dibuat</h4>
                                <p>{{ $submission->created_at->format('d M Y H:i') }}</p>
                            </div>
                        </div>
                        
                        <div class="timeline-item {{ $submission->submitted_at ? 'completed' : 'pending' }}">
                            <div class="timeline-marker">{{ $submission->submitted_at ? '✓' : '○' }}</div>
                            <div class="timeline-content">
                                <h4>Pengajuan Disubmit</h4>
                                <p>{{ $submission->submitted_at ? $submission->submitted_at->format('d M Y H:i') : 'Menunggu submit' }}</p>
                            </div>
                        </div>
                        
                        @if($submission->status->value === 'rejected')
                            <div class="timeline-item rejected">
                                <div class="timeline-marker">✗</div>
                                <div class="timeline-content">
                                    <h4>Pengajuan Ditolak</h4>
                                    <p>{{ $submission->rejection_reason }}</p>
                                </div>
                            </div>
                        @else
                            <div class="timeline-item {{ $submission->verified_at ? 'completed' : 'pending' }}">
                                <div class="timeline-marker">{{ $submission->verified_at ? '✓' : '○' }}</div>
                                <div class="timeline-content">
                                    <h4>Verifikasi Admin</h4>
                                    <p>{{ $submission->verified_at ? $submission->verified_at->format('d M Y H:i') : 'Menunggu verifikasi' }}</p>
                                </div>
                            </div>
                            
                            <div class="timeline-item {{ $submission->mooraResult ? 'completed' : 'pending' }}">
                                <div class="timeline-marker">{{ $submission->mooraResult ? '✓' : '○' }}</div>
                                <div class="timeline-content">
                                    <h4>Proses Seleksi</h4>
                                    <p>{{ $submission->mooraResult ? 'Seleksi telah selesai' : 'Sedang dalam proses seleksi' }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- Submitted Data -->
            <div class="card">
                <div class="card-header">
                    <h2>Data yang Diajukan</h2>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>Kriteria</th>
                                    <th>Jawaban</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($submission->values as $value)
                                    <tr>
                                        <td>
                                            <span class="badge badge-gray">{{ $value->criteria->code }}</span>
                                            {{ $value->criteria->name }}
                                        </td>
                                        <td>{{ $value->raw_value }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Sidebar -->
        <div>
            <!-- Status Card -->
            <div class="card mb-4">
                <div class="card-header">
                    <h2>Status Saat Ini</h2>
                </div>
                <div class="card-body text-center">
                    <span class="status-badge-large badge-{{ $submission->status->color() }}">
                        {{ $submission->status->label() }}
                    </span>
                </div>
            </div>
            
            <!-- Result Card -->
            @if($submission->mooraResult)
                <div class="card mb-4">
                    <div class="card-header">
                        <h2>Hasil Seleksi</h2>
                    </div>
                    <div class="card-body">
                        <div class="selection-result {{ $submission->mooraResult->is_selected ? 'selected' : 'not-selected' }}">
                            @if($submission->mooraResult->is_selected)
                                <div class="result-icon">🎉</div>
                                <div class="result-title">Selamat!</div>
                                <div class="result-subtitle">Anda Terpilih Sebagai Penerima Beasiswa</div>
                                <p class="result-desc">Silakan tunggu pengumuman resmi dari pihak sekolah untuk informasi lebih lanjut mengenai pencairan beasiswa.</p>
                            @else
                                <div class="result-icon">📋</div>
                                <div class="result-title">Tidak Terpilih</div>
                                <div class="result-subtitle">Mohon Maaf, Anda Belum Berhasil</div>
                                <p class="result-desc">Anda belum terpilih sebagai penerima Beasiswa BSM pada periode ini. Tetap semangat dan coba lagi di periode berikutnya.</p>
                            @endif
                        </div>
                    </div>
                </div>
            @endif
            
            <!-- Documents Card -->
            <div class="card">
                <div class="card-header">
                    <h2>Dokumen</h2>
                </div>
                <div class="card-body">
                    @if($submission->documents->isEmpty())
                        <p class="text-muted text-center">Tidak ada dokumen.</p>
                    @else
                        <div class="documents-list">
                            @foreach($submission->documents as $doc)
                                <div class="document-item-small">
                                    <span>{{ $doc->name }}</span>
                                    <a href="{{ Storage::url($doc->file_path) }}" target="_blank" class="text-sm">Lihat</a>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endif

@push('styles')
<style>
    .page-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }
    
    .timeline {
        position: relative;
        padding-left: 2rem;
    }
    
    .timeline::before {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--gray-200);
    }
    
    .timeline-item {
        position: relative;
        padding-bottom: 1.5rem;
    }
    
    .timeline-item:last-child {
        padding-bottom: 0;
    }
    
    .timeline-marker {
        position: absolute;
        left: -2rem;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: var(--gray-200);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.625rem;
        color: var(--gray-500);
        z-index: 1;
    }
    
    .timeline-item.completed .timeline-marker {
        background: var(--success);
        color: white;
    }
    
    .timeline-item.rejected .timeline-marker {
        background: var(--danger);
        color: white;
    }
    
    .timeline-content h4 {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    
    .timeline-content p {
        font-size: 0.75rem;
        color: var(--gray-500);
        margin: 0;
    }
    
    .timeline-item.rejected .timeline-content p {
        color: var(--danger);
    }
    
    .value-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: var(--primary);
        color: white;
        border-radius: 0.375rem;
        font-weight: 600;
        font-size: 0.75rem;
    }
    
    .status-badge-large {
        display: inline-block;
        padding: 0.75rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 9999px;
    }
    
    .result-display {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .rank-number {
        font-size: 3rem;
        font-weight: 700;
        color: var(--primary);
        line-height: 1;
    }
    
    .rank-label {
        font-size: 0.875rem;
        color: var(--gray-500);
    }
    
    .score-display {
        background: var(--gray-50);
        padding: 0.75rem;
        border-radius: 0.5rem;
    }
    
    .score-label {
        display: block;
        font-size: 0.75rem;
        color: var(--gray-500);
    }
    
    .score-value {
        display: block;
        font-size: 1rem;
        font-weight: 600;
    }
    
    .documents-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .document-item-small {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--gray-100);
        font-size: 0.875rem;
    }
    
    .document-item-small:last-child {
        border-bottom: none;
    }
    
    .selection-result {
        text-align: center;
        padding: 1.5rem;
        border-radius: 0.75rem;
        color: white;
    }
    
    .selection-result.selected {
        background: linear-gradient(135deg, #10b981, #059669);
    }
    
    .selection-result.not-selected {
        background: linear-gradient(135deg, #6b7280, #4b5563);
    }
    
    .selection-result .result-icon {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }
    
    .selection-result .result-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }
    
    .selection-result .result-subtitle {
        font-size: 1rem;
        opacity: 0.9;
        margin-bottom: 1rem;
    }
    
    .selection-result .result-desc {
        font-size: 0.875rem;
        opacity: 0.8;
        margin: 0;
    }
</style>
@endpush
@endsection