@extends('layouts.app')

@section('title', 'Bulk Upload Grades - {{ $subject->name }} | {{ $class->name }}')

@section('sidebar-menu')
    @include('teacher.partials.sidebar')
@endsection

@section('content')
<div class="card shadow-sm">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>📤 Bulk Upload Grades - {{ $class->name }} | {{ $subject->name }}</span>
        <a href="{{ route('teacher.grades.create', [$class, $subject]) }}" class="btn btn-sm btn-secondary">
            ← Back to Manual Entry
        </a>
    </div>
    
    <div class="card-body">
        <div class="alert alert-info">
            <h6><i class="fas fa-info-circle"></i> Instructions:</h6>
            <ul class="mb-0">
                <li>Download the template CSV file below</li>
                <li>Fill in the scores for each student (0-100)</li>
                <li>Remarks are optional</li>
                <li>Upload the completed file back here</li>
                <li>Supported formats: CSV, Excel (.xlsx, .xls)</li>
            </ul>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card border-primary mb-3">
                    <div class="card-body text-center">
                        <i class="fas fa-download fa-2x mb-2"></i>
                        <h5>Step 1: Download Template</h5>
                        <p class="text-muted">Get the CSV template with your student list</p>
                        <a href="{{ route('teacher.grades.download-template', [$class, $subject]) }}" 
                           class="btn btn-primary">
                            <i class="fas fa-download"></i> Download Template
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card border-success mb-3">
                    <div class="card-body text-center">
                        <i class="fas fa-upload fa-2x mb-2"></i>
                        <h5>Step 2: Upload Completed File</h5>
                        <p class="text-muted">Upload the filled template with grades</p>
                        
                        <form action="{{ route('teacher.grades.process-bulk-upload', [$class, $subject]) }}" 
                              method="POST" 
                              enctype="multipart/form-data"
                              id="bulkUploadForm">
                            @csrf
                            <input type="hidden" name="exam_type" value="{{ request('exam_type', 'Term 1 Exam') }}">
                            
                            <div class="mb-3">
                                <label class="form-label">Exam Type</label>
                                <select name="exam_type" class="form-select" required>
                                    <option value="Term 1 Exam">Term 1 Exam</option>
                                    <option value="Term 2 Exam">Term 2 Exam</option>
                                    <option value="Term 3 Exam">Term 3 Exam</option>
                                    <option value="Mid Term 1">Mid Term 1</option>
                                    <option value="Mid Term 2">Mid Term 2</option>
                                    <option value="Mid Term 3">Mid Term 3</option>
                                    <option value="Quiz">Quiz</option>
                                    <option value="Assignment">Assignment</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Choose File</label>
                                <input type="file" name="grades_file" class="form-control" accept=".csv,.xlsx,.xls" required>
                                <small class="text-muted">Max file size: 2MB</small>
                            </div>
                            
                            <button type="submit" class="btn btn-success" id="uploadBtn">
                                <i class="fas fa-upload"></i> Upload and Process
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.getElementById('bulkUploadForm').addEventListener('submit', function(e) {
    const btn = document.getElementById('uploadBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
});
</script>
@endpush
@endsection