@extends('layouts.admin')

@section('title', 'Detail Pengajuan')
@section('page-title', 'Detail Pengajuan')

@section('header-actions')
    <a href="{{ route('admin.submissions.index') }}" class="btn btn-secondary">
        &larr; Kembali
    </a>
@endsection

@section('content')
<div class="grid grid-cols-3">
    <div style="grid-column: span 2;">
        <!-- Student Info -->
        <div class="card mb-4">
            <div class="card-header">
                <h2>Informasi Siswa</h2>
            </div>
            <div class="card-body">
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Nama</span>
                        <span class="info-value">{{ $submission->student->user->name ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">NIS</span>
                        <span class="info-value">{{ $submission->student->nis ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Email</span>
                        <span class="info-value">{{ $submission->student->user->email ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Kelas</span>
                        <span class="info-value">{{ $submission->student->class ?? '-' }}</span>
                    </div>
                </div>
                
                <!-- Scholarship Status -->
                <div class="scholarship-status mt-4" style="padding-top: 1rem; border-top: 1px solid var(--gray-200);">
                    <div class="info-label">Beasiswa yang Sedang Diterima</div>
                    @if($submission->receiving_other_scholarship)
                        <span class="info-value" style="color: var(--warning);">
                            Ya - {{ $submission->other_scholarship_name ?? 'Tidak disebutkan' }}
                        </span>
                    @else
                        <span class="info-value" style="color: var(--success);">Tidak menerima beasiswa lain</span>
                    @endif
                </div>
            </div>
        </div>
        
        <!-- Criteria Values -->
        <div class="card mb-4">
            <div class="card-header">
                <h2>Data Kriteria</h2>
            </div>
            <div class="card-body">
                @if($submission->values->isEmpty())
                    <p class="text-muted">Belum ada data kriteria.</p>
                @else
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>Kriteria</th>
                                    <th>Jawaban</th>
                                    <th>Nilai</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>
                                        <td>
                                            <span class="value-badge">{{ $value->numeric_value }}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
        
        <!-- Documents -->
        <div class="card">
            <div class="card-header">
                <h2>Dokumen Pendukung</h2>
            </div>
            <div class="card-body">
                @if($submission->documents->isEmpty())
                    <p class="text-muted">Tidak ada dokumen.</p>
                @else
                    <div class="documents-list">
                        @foreach($submission->documents as $doc)
                            <div class="document-item">
                                <div class="document-icon">
                                    @if(str_contains($doc->file_type, 'pdf'))
                                        📄
                                    @else
                                        🖼️
                                    @endif
                                </div>
                                <div class="document-info">
                                    <span class="document-name">{{ $doc->name }}</span>
                                    <span class="document-size">{{ $doc->human_size }}</span>
                                </div>
                                <a href="{{ Storage::url($doc->file_path) }}" target="_blank" class="btn btn-secondary btn-sm">
                                    Lihat
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div>
        <!-- Status Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h2>Status Pengajuan</h2>
            </div>
            <div class="card-body text-center">
                <span class="status-badge badge-{{ $submission->status->color() }}">
                    {{ $submission->status->label() }}
                </span>
                
                <div class="status-info mt-4">
                    <p class="text-sm text-muted">Periode: {{ $submission->period }}</p>
                    @if($submission->submitted_at)
                        <p class="text-sm text-muted">Disubmit: {{ $submission->submitted_at->format('d M Y H:i') }}</p>
                    @endif
                    @if($submission->verified_at)
                        <p class="text-sm text-muted">Diverifikasi: {{ $submission->verified_at->format('d M Y H:i') }}</p>
                    @endif
                </div>
                
                @if($submission->rejection_reason)
                    <div class="rejection-reason mt-4">
                        <strong class="text-sm">Alasan Penolakan:</strong>
                        <p class="text-sm">{{ $submission->rejection_reason }}</p>
                    </div>
                @endif
            </div>
        </div>
        
        <!-- Actions -->
        @if($submission->canVerify())
            <div class="card">
                <div class="card-header">
                    <h2>Verifikasi</h2>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.submissions.verify', $submission) }}" method="POST" class="mb-4">
                        @csrf
                        <button type="submit" class="btn btn-success" style="width: 100%;">
                            ✓ Verifikasi Pengajuan
                        </button>
                    </form>
                    
                    <hr style="margin: 1rem 0; border-color: var(--gray-200);">
                    
                    <form action="{{ route('admin.submissions.reject', $submission) }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <label for="rejection_reason" class="form-label">Alasan Penolakan</label>
                            <textarea 
                                id="rejection_reason" 
                                name="rejection_reason" 
                                class="form-control @error('rejection_reason') error @enderror"
                                placeholder="Masukkan alasan penolakan..."
                                rows="3"
                                required
                            ></textarea>
                            @error('rejection_reason')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-danger" style="width: 100%;">
                            ✗ Tolak Pengajuan
                        </button>
                    </form>
                </div>
            </div>
        @endif
        
        <!-- MOORA Result -->
        @if($submission->mooraResult)
            <div class="card mt-4">
                <div class="card-header">
                    <h2>Hasil MOORA</h2>
                </div>
                <div class="card-body text-center">
                    <div class="rank-display">
                        <span class="rank-number">{{ $submission->mooraResult->rank }}</span>
                        <span class="rank-label">Peringkat</span>
                    </div>
                    <p class="mt-2 font-medium">Skor Yi: {{ number_format($submission->mooraResult->yi_score, 6) }}</p>
                </div>
            </div>
        @endif
    </div>
</div>

@push('styles')
<style>
    .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .info-item {
        display: flex;
        flex-direction: column;
    }
    
    .info-label {
        font-size: 0.75rem;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .info-value {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--gray-800);
    }
    
    .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;
    }
    
    .documents-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .document-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: var(--gray-50);
        border-radius: 0.5rem;
    }
    
    .document-icon {
        font-size: 1.5rem;
    }
    
    .document-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .document-name {
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    .document-size {
        font-size: 0.75rem;
        color: var(--gray-500);
    }
    
    .status-badge {
        display: inline-block;
        padding: 0.5rem 1.5rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 9999px;
    }
    
    .rejection-reason {
        background: #fee2e2;
        padding: 0.75rem;
        border-radius: 0.5rem;
        text-align: left;
    }
    
    .rank-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);
    }
</style>
@endpush
@endsection