@extends('layouts.student')

@section('title', 'Ajukan Beasiswa')

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

<div class="grid grid-cols-3">
    <div style="grid-column: span 2;">
        <!-- Criteria Form -->
        <div class="card mb-4">
            <div class="card-header">
                <h2>Data Kriteria</h2>
            </div>
            <div class="card-body">
                @if($criteria->isEmpty())
                    <div class="alert alert-warning">
                        Kriteria belum tersedia. Silakan hubungi administrator.
                    </div>
                @else
                    <form action="{{ route('student.submission.store') }}" method="POST" id="criteriaForm">
                        @csrf
                        @foreach($criteria as $criterion)
                            <div class="form-group">
                                <label for="criteria_{{ $criterion->id }}" class="form-label">
                                    <span class="badge badge-gray">{{ $criterion->code }}</span>
                                    {{ $criterion->name }}
                                </label>
                                
                                @if($criterion->description)
                                    <p class="text-sm text-muted mb-2">{{ $criterion->description }}</p>
                                @endif
                                
                                <select 
                                    id="criteria_{{ $criterion->id }}" 
                                    name="criteria[{{ $criterion->id }}]" 
                                    class="form-control @error('criteria.' . $criterion->id) error @enderror"
                                    required
                                >
                                    <option value="">Pilih...</option>
                                    @foreach($criterion->subCriteria as $sub)
                                        @php
                                            $existingValue = $submission->values->firstWhere('criteria_id', $criterion->id);
                                            $isSelected = old('criteria.' . $criterion->id, $existingValue?->sub_criteria_id) == $sub->id;
                                        @endphp
                                        <option value="{{ $sub->id }}" {{ $isSelected ? 'selected' : '' }}>
                                            {{ $sub->name }}
                                        </option>
                                    @endforeach
                                </select>
                                
                                @error('criteria.' . $criterion->id)
                                    <span class="form-error">{{ $message }}</span>
                                @enderror
                            </div>
                        @endforeach
                        
                        <!-- Scholarship Status Field -->
                        <div class="form-group mt-4" style="padding-top: 1rem; border-top: 1px solid var(--gray-200);">
                            <label class="form-label">
                                <span class="badge badge-blue">INFO</span>
                                Beasiswa yang Sedang Diterima
                            </label>
                            <div class="flex gap-4 mb-2">
                                <label class="radio-label">
                                    <input 
                                        type="radio" 
                                        name="receiving_other_scholarship" 
                                        value="0" 
                                        {{ old('receiving_other_scholarship', $submission->receiving_other_scholarship) == 0 ? 'checked' : '' }}
                                        required
                                    >
                                    <span>Tidak menerima beasiswa lain</span>
                                </label>
                                <label class="radio-label">
                                    <input 
                                        type="radio" 
                                        name="receiving_other_scholarship" 
                                        value="1" 
                                        {{ old('receiving_other_scholarship', $submission->receiving_other_scholarship) == 1 ? 'checked' : '' }}
                                        onchange="document.getElementById('scholarship_name_field').style.display = this.checked ? 'block' : 'none';"
                                    >
                                    <span>Ada, sedang menerima beasiswa lain</span>
                                </label>
                            </div>
                            <div id="scholarship_name_field" style="display: {{ old('receiving_other_scholarship', $submission->receiving_other_scholarship) == 1 ? 'block' : 'none' }};">
                                <input 
                                    type="text" 
                                    name="other_scholarship_name" 
                                    class="form-control" 
                                    placeholder="Nama beasiswa yang sedang diterima"
                                    value="{{ old('other_scholarship_name', $submission->other_scholarship_name) }}"
                                >
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            Simpan Data
                        </button>
                    </form>
                @endif
            </div>
        </div>
        
        <!-- Documents Section -->
        <div class="card">
            <div class="card-header">
                <h2>Dokumen Pendukung</h2>
            </div>
            <div class="card-body">
                <p class="text-sm text-muted mb-4">
                    Pilih semua file dokumen yang diperlukan, kemudian klik tombol "Upload Semua Dokumen" di bawah.
                    Dokumen dengan tanda <span class="required-mark">*</span> wajib diupload.
                </p>
                
                <form action="{{ route('student.documents.store') }}" method="POST" enctype="multipart/form-data" id="bulkUploadForm">
                    @csrf
                    
                    <!-- Required Documents -->
                    <h3 class="section-title">Dokumen Wajib</h3>
                    <div class="documents-grid">
                        @foreach($documentTypes->where('is_conditional', false) as $docType)
                            @php
                                $uploadedDoc = $submission->documents->firstWhere('document_type_id', $docType->id);
                            @endphp
                            <div class="document-card {{ $uploadedDoc ? 'uploaded' : '' }}">
                                <div class="document-card-header">
                                    <span class="document-status">
                                        @if($uploadedDoc)
                                            <span class="status-icon success">✓</span>
                                        @else
                                            <span class="status-icon pending">○</span>
                                        @endif
                                    </span>
                                    <div class="document-title">
                                        {{ $docType->name }}
                                        @if($docType->is_required)
                                            <span class="required-mark">*</span>
                                        @endif
                                    </div>
                                </div>
                                @if($docType->description)
                                    <p class="document-description">{{ $docType->description }}</p>
                                @endif
                                
                                @if($uploadedDoc)
                                    <div class="uploaded-file">
                                        <span class="file-name">{{ basename($uploadedDoc->file_path) }}</span>
                                        <span class="file-size">{{ $uploadedDoc->human_size }}</span>
                                        <div class="file-actions">
                                            <a href="{{ Storage::url($uploadedDoc->file_path) }}" target="_blank" class="btn btn-sm btn-secondary">Lihat</a>
                                            <button type="button" class="btn btn-sm btn-danger" onclick="deleteDocument({{ $uploadedDoc->id }})">Hapus</button>
                                        </div>
                                    </div>
                                    <div class="replace-file mt-2">
                                        <label class="text-xs text-muted">Ganti file:</label>
                                        <input 
                                            type="file" 
                                            name="document_{{ $docType->id }}" 
                                            accept=".pdf,.jpg,.jpeg,.png"
                                            class="form-control form-control-sm"
                                        >
                                    </div>
                                @else
                                    <div class="upload-input">
                                        <input 
                                            type="file" 
                                            name="document_{{ $docType->id }}" 
                                            accept=".pdf,.jpg,.jpeg,.png"
                                            class="form-control"
                                        >
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                    
                    <!-- Conditional Documents -->
                    <h3 class="section-title mt-4">Dokumen Kondisional</h3>
                    <p class="text-sm text-muted mb-3">Upload jika sesuai dengan kondisi Anda.</p>
                    <div class="documents-grid">
                        @foreach($documentTypes->where('is_conditional', true) as $docType)
                            @php
                                $uploadedDoc = $submission->documents->firstWhere('document_type_id', $docType->id);
                            @endphp
                            <div class="document-card {{ $uploadedDoc ? 'uploaded' : '' }}">
                                <div class="document-card-header">
                                    <span class="document-status">
                                        @if($uploadedDoc)
                                            <span class="status-icon success">✓</span>
                                        @else
                                            <span class="status-icon optional">-</span>
                                        @endif
                                    </span>
                                    <div class="document-title">{{ $docType->name }}</div>
                                </div>
                                @if($docType->condition_description)
                                    <p class="document-condition">{{ $docType->condition_description }}</p>
                                @endif
                                
                                @if($uploadedDoc)
                                    <div class="uploaded-file">
                                        <span class="file-name">{{ basename($uploadedDoc->file_path) }}</span>
                                        <span class="file-size">{{ $uploadedDoc->human_size }}</span>
                                        <div class="file-actions">
                                            <a href="{{ Storage::url($uploadedDoc->file_path) }}" target="_blank" class="btn btn-sm btn-secondary">Lihat</a>
                                            <button type="button" class="btn btn-sm btn-danger" onclick="deleteDocument({{ $uploadedDoc->id }})">Hapus</button>
                                        </div>
                                    </div>
                                    <div class="replace-file mt-2">
                                        <label class="text-xs text-muted">Ganti file:</label>
                                        <input 
                                            type="file" 
                                            name="document_{{ $docType->id }}" 
                                            accept=".pdf,.jpg,.jpeg,.png"
                                            class="form-control form-control-sm"
                                        >
                                    </div>
                                @else
                                    <div class="upload-input">
                                        <input 
                                            type="file" 
                                            name="document_{{ $docType->id }}" 
                                            accept=".pdf,.jpg,.jpeg,.png"
                                            class="form-control"
                                        >
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                    
                    <div class="upload-actions mt-4">
                        <button type="submit" class="btn btn-primary">
                            📤 Upload Semua Dokumen
                        </button>
                        <p class="text-xs text-muted mt-2">Format yang diterima: PDF, JPG, PNG. Maksimal 2MB per file.</p>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div>
        <div class="card sticky-card">
            <div class="card-header">
                <h2>Submit Pengajuan</h2>
            </div>
            <div class="card-body">
                @php
                    $requiredDocTypes = $documentTypes->where('is_conditional', false)->where('is_required', true);
                    $uploadedRequiredCount = $submission->documents->whereIn('document_type_id', $requiredDocTypes->pluck('id'))->count();
                    $allCriteriaFilled = $submission->values->count() >= $criteria->count();
                    $allDocsUploaded = $uploadedRequiredCount >= $requiredDocTypes->count();
                    $canSubmit = $allCriteriaFilled && $allDocsUploaded;
                @endphp
                
                <div class="checklist mb-4">
                    <div class="checklist-item {{ $allCriteriaFilled ? 'completed' : '' }}">
                        @if($allCriteriaFilled)
                            ✓
                        @else
                            ○
                        @endif
                        <span>Lengkapi data kriteria</span>
                    </div>
                    <div class="checklist-item {{ $allDocsUploaded ? 'completed' : '' }}">
                        @if($allDocsUploaded)
                            ✓
                        @else
                            ○
                        @endif
                        <span>Upload dokumen wajib ({{ $uploadedRequiredCount }}/{{ $requiredDocTypes->count() }})</span>
                    </div>
                </div>
                
                <form action="{{ route('student.submission.submit') }}" method="POST">
                    @csrf
                    <button 
                        type="submit" 
                        class="btn btn-success" 
                        style="width: 100%;"
                        {{ $canSubmit ? '' : 'disabled' }}
                        onclick="return confirm('Setelah submit, Anda tidak dapat mengedit pengajuan. Lanjutkan?');"
                    >
                        Submit Pengajuan
                    </button>
                </form>
                
                @if(!$canSubmit)
                    <p class="text-sm text-muted mt-2 text-center">
                        Lengkapi semua data untuk submit.
                    </p>
                @endif
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .page-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }
    
    .sticky-card {
        position: sticky;
        top: 80px;
    }
    
    .radio-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        font-size: 0.875rem;
    }
    
    .radio-label input {
        width: 16px;
        height: 16px;
    }
    
    .badge-blue {
        background: #3b82f6;
        color: white;
    }
    
    .section-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .required-mark {
        color: var(--danger);
        font-weight: bold;
    }
    
    .documents-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .document-card {
        border: 1px solid var(--gray-200);
        border-radius: 0.5rem;
        padding: 1rem;
        background: var(--gray-50);
        transition: all 0.2s;
    }
    
    .document-card.uploaded {
        background: #f0fdf4;
        border-color: #86efac;
    }
    
    .document-card-header {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    .document-status {
        flex-shrink: 0;
    }
    
    .status-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
    }
    
    .status-icon.success {
        background: var(--success);
        color: white;
    }
    
    .status-icon.pending {
        background: var(--gray-300);
        color: white;
    }
    
    .status-icon.optional {
        background: var(--gray-200);
        color: var(--gray-500);
    }
    
    .document-title {
        font-weight: 500;
        font-size: 0.9rem;
        color: var(--gray-800);
    }
    
    .document-description {
        font-size: 0.75rem;
        color: var(--gray-500);
        margin: 0 0 0.75rem 2rem;
    }
    
    .document-condition {
        font-size: 0.75rem;
        color: #d97706;
        margin: 0 0 0.75rem 2rem;
        font-style: italic;
    }
    
    .uploaded-file {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-left: 2rem;
        padding: 0.5rem;
        background: white;
        border-radius: 0.375rem;
        flex-wrap: wrap;
    }
    
    .file-name {
        font-size: 0.75rem;
        color: var(--gray-600);
        word-break: break-all;
        flex: 1;
        min-width: 100px;
    }
    
    .file-size {
        font-size: 0.75rem;
        color: var(--gray-400);
    }
    
    .file-actions {
        display: flex;
        gap: 0.5rem;
    }
    
    .upload-form {
        margin-left: 2rem;
    }
    
    .upload-input {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .upload-input input[type="file"] {
        flex: 1;
        font-size: 0.75rem;
    }
    
    .checklist {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .checklist-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        color: var(--gray-500);
    }
    
    .checklist-item.completed {
        color: var(--success);
    }
    
    button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>
@endpush

@push('scripts')
<script>
    // Handle scholarship radio button change
    document.querySelectorAll('input[name="receiving_other_scholarship"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const nameField = document.getElementById('scholarship_name_field');
            nameField.style.display = this.value === '1' ? 'block' : 'none';
        });
    });
    
    // Delete document function
    function deleteDocument(docId) {
        if (!confirm('Hapus dokumen ini?')) return;
        
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/student/documents/' + docId;
        
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = '{{ csrf_token() }}';
        form.appendChild(csrfInput);
        
        const methodInput = document.createElement('input');
        methodInput.type = 'hidden';
        methodInput.name = '_method';
        methodInput.value = 'DELETE';
        form.appendChild(methodInput);
        
        document.body.appendChild(form);
        form.submit();
    }
</script>
@endpush
@endsection