@extends('layouts.student')

@section('title', 'Beranda')

@section('content')
<div class="welcome-section mb-6">
    <h1>Selamat Datang, {{ $user->name }}! 👋</h1>
    <p class="text-muted">Sistem Pendukung Keputusan Pemilihan Beasiswa Siswa Miskin (BSM)</p>
</div>

<div class="grid grid-cols-3">
    <div style="grid-column: span 2;">
        <!-- Status Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h2>Status Pengajuan - Periode {{ $currentPeriod }}</h2>
            </div>
            <div class="card-body">
                @if(!$student)
                    <div class="alert alert-warning">
                        Profil siswa Anda belum lengkap. Silakan hubungi administrator.
                    </div>
                @elseif(!$submission)
                    <div class="status-empty">
                        <div class="status-icon">📝</div>
                        <h3>Belum Ada Pengajuan</h3>
                        <p>Anda belum mengajukan beasiswa untuk periode ini.</p>
                        <a href="{{ route('student.submission.index') }}" class="btn btn-primary">
                            Ajukan Beasiswa Sekarang
                        </a>
                    </div>
                @else
                    <div class="status-display">
                        <div class="status-badge-large badge-{{ $submission->status->color() }}">
                            {{ $submission->status->label() }}
                        </div>
                        
                        <div class="status-timeline mt-4">
                            <div class="timeline-item {{ $submission->created_at ? 'completed' : '' }}">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <span class="timeline-title">Draft Dibuat</span>
                                    <span class="timeline-date">{{ $submission->created_at->format('d M Y H:i') }}</span>
                                </div>
                            </div>
                            
                            <div class="timeline-item {{ $submission->submitted_at ? 'completed' : '' }}">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <span class="timeline-title">Disubmit</span>
                                    <span class="timeline-date">
                                        {{ $submission->submitted_at ? $submission->submitted_at->format('d M Y H:i') : 'Menunggu' }}
                                    </span>
                                </div>
                            </div>
                            
                            <div class="timeline-item {{ $submission->verified_at ? 'completed' : ($submission->status->value === 'rejected' ? 'rejected' : '') }}">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <span class="timeline-title">
                                        {{ $submission->status->value === 'rejected' ? 'Ditolak' : 'Verifikasi' }}
                                    </span>
                                    <span class="timeline-date">
                                        @if($submission->verified_at)
                                            {{ $submission->verified_at->format('d M Y H:i') }}
                                        @elseif($submission->status->value === 'rejected')
                                            Pengajuan ditolak
                                        @else
                                            Menunggu
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        @if($submission->rejection_reason)
                            <div class="alert alert-error mt-4">
                                <strong>Alasan Penolakan:</strong> {{ $submission->rejection_reason }}
                            </div>
                        @endif
                        
                        @if($submission->mooraResult)
                            <div class="result-card mt-4 {{ $submission->mooraResult->is_selected ? 'result-success' : 'result-fail' }}">
                                @if($submission->mooraResult->is_selected)
                                    <div class="result-icon">🎉</div>
                                    <div class="result-status">Selamat! Anda Terpilih</div>
                                    <p class="result-message">Anda telah terpilih sebagai penerima Beasiswa BSM. Silakan tunggu pengumuman resmi dari pihak sekolah untuk informasi lebih lanjut.</p>
                                @else
                                    <div class="result-icon">📋</div>
                                    <div class="result-status">Tidak Terpilih</div>
                                    <p class="result-message">Mohon maaf, Anda belum terpilih sebagai penerima Beasiswa BSM pada periode ini. Tetap semangat dan coba lagi di periode berikutnya.</p>
                                @endif
                            </div>
                        @endif
                        
                        <div class="mt-4">
                            @if($submission->canEdit())
                                <a href="{{ route('student.submission.index') }}" class="btn btn-primary">
                                    {{ $submission->rejection_reason ? 'Ubah Pengajuan' : 'Lanjutkan Pengisian' }}
                                </a>
                            @else
                                <a href="{{ route('student.status') }}" class="btn btn-secondary">
                                    Lihat Detail
                                </a>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div>
        <!-- Info Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h2>Informasi</h2>
            </div>
            <div class="card-body">
                <div class="info-item mb-2">
                    <span class="info-label">NIS</span>
                    <span class="info-value">{{ $student->nis ?? '-' }}</span>
                </div>
                <div class="info-item mb-2">
                    <span class="info-label">Kelas</span>
                    <span class="info-value">{{ $student->class ?? '-' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Email</span>
                    <span class="info-value">{{ $user->email }}</span>
                </div>
            </div>
        </div>
        
        <!-- Help Card -->
        <div class="card">
            <div class="card-header">
                <h2>Bantuan</h2>
            </div>
            <div class="card-body">
                <p class="text-sm text-muted mb-2">
                    <strong>Langkah pengajuan:</strong>
                </p>
                <ol class="help-list">
                    <li>Isi data kriteria</li>
                    <li>Upload dokumen pendukung</li>
                    <li>Submit pengajuan</li>
                    <li>Tunggu verifikasi admin</li>
                </ol>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .welcome-section h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-800);
        margin-bottom: 0.25rem;
    }
    
    .status-empty {
        text-align: center;
        padding: 2rem;
    }
    
    .status-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .status-empty h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
    }
    
    .status-empty p {
        color: var(--gray-500);
        margin-bottom: 1.5rem;
    }
    
    .status-display {
        text-align: center;
    }
    
    .status-badge-large {
        display: inline-block;
        padding: 0.75rem 2rem;
        font-size: 1.125rem;
        font-weight: 600;
        border-radius: 9999px;
    }
    
    .status-timeline {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }
    
    .timeline-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    
    .timeline-dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--gray-300);
        margin-bottom: 0.5rem;
    }
    
    .timeline-item.completed .timeline-dot {
        background: var(--success);
    }
    
    .timeline-item.rejected .timeline-dot {
        background: var(--danger);
    }
    
    .timeline-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .timeline-title {
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    .timeline-date {
        font-size: 0.75rem;
        color: var(--gray-500);
    }
    
    .result-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem;
        border-radius: 0.75rem;
        color: white;
    }
    
    .result-card.result-success {
        background: linear-gradient(135deg, #10b981, #059669);
    }
    
    .result-card.result-fail {
        background: linear-gradient(135deg, #6b7280, #4b5563);
    }
    
    .result-icon {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }
    
    .result-status {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .result-message {
        font-size: 0.875rem;
        opacity: 0.9;
        margin: 0;
    }
    
    .info-item {
        display: flex;
        flex-direction: column;
    }
    
    .info-label {
        font-size: 0.75rem;
        color: var(--gray-500);
        text-transform: uppercase;
    }
    
    .info-value {
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    .help-list {
        font-size: 0.875rem;
        color: var(--gray-600);
        padding-left: 1.25rem;
        margin: 0;
    }
    
    .help-list li {
        margin-bottom: 0.25rem;
    }
</style>
@endpush
@endsection