@extends('layouts.school')
@section('title', 'Manual Result Upload')
@section('header', 'Manual Result Upload')

@section('content')
    <div class="mb-4 rounded-xl border border-blue-100 bg-blue-50/50 p-5">
        <h2 class="text-sm font-semibold text-blue-900">How it works</h2>
        <ol class="mt-2 list-decimal space-y-1 pl-5 text-sm text-blue-700">
            <li>Select a class, subject, term and assessment type.</li>
            <li>Download the CSV template — it lists every student with a blank score column.</li>
            <li>Complete the scores in Excel or any spreadsheet app, then save as CSV.</li>
            <li>Upload the completed CSV. The system validates, previews and imports the scores.</li>
        </ol>
    </div>

    <form method="GET" action="{{ route('school.results.upload-template', $schoolId) }}" class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
        @csrf
        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            <div>
                <label for="class_id" class="block text-xs font-medium text-gray-700">Class *</label>
                <select name="class_id" id="class_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <option value="">-- Select class --</option>
                    @foreach ($classes as $class)
                        <option value="{{ $class->id }}" {{ $classId == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="subject_id" class="block text-xs font-medium text-gray-700">Subject *</label>
                <select name="subject_id" id="subject_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <option value="">-- Select subject --</option>
                    @foreach ($subjects as $subject)
                        <option value="{{ $subject->id }}" {{ $subjectId == $subject->id ? 'selected' : '' }}>{{ $subject->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="term_id" class="block text-xs font-medium text-gray-700">Term *</label>
                <select name="term_id" id="term_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @foreach ($terms as $term)
                        <option value="{{ $term->id }}" {{ $termId == $term->id ? 'selected' : '' }}>{{ $term->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="assessment_type_id" class="block text-xs font-medium text-gray-700">Assessment Type *</label>
                <select name="assessment_type_id" id="assessment_type_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @foreach ($assessmentTypes as $type)
                        <option value="{{ $type->id }}" {{ $assessmentTypeId == $type->id ? 'selected' : '' }}>
                            {{ $type->name }} (max {{ $type->max_score }}, weight {{ $type->weight }}%)
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="mt-4 flex items-center gap-3">
            <button type="submit" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">
                ⬇️ Download Template
            </button>
        </div>
    </form>

    <form method="POST" action="{{ route('school.results.upload-preview', $schoolId) }}" enctype="multipart/form-data" class="mt-6 rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
        @csrf
        <h2 class="mb-4 text-sm font-semibold text-gray-900">Upload Completed CSV</h2>

        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            <div>
                <label for="class_id" class="block text-xs font-medium text-gray-700">Class *</label>
                <select name="class_id" id="class_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <option value="">-- Select class --</option>
                    @foreach ($classes as $class)
                        <option value="{{ $class->id }}" {{ $classId == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="subject_id" class="block text-xs font-medium text-gray-700">Subject *</label>
                <select name="subject_id" id="subject_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <option value="">-- Select subject --</option>
                    @foreach ($subjects as $subject)
                        <option value="{{ $subject->id }}" {{ $subjectId == $subject->id ? 'selected' : '' }}>{{ $subject->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="term_id" class="block text-xs font-medium text-gray-700">Term *</label>
                <select name="term_id" id="term_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @foreach ($terms as $term)
                        <option value="{{ $term->id }}" {{ $termId == $term->id ? 'selected' : '' }}>{{ $term->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="assessment_type_id" class="block text-xs font-medium text-gray-700">Assessment Type *</label>
                <select name="assessment_type_id" id="assessment_type_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @foreach ($assessmentTypes as $type)
                        <option value="{{ $type->id }}" {{ $assessmentTypeId == $type->id ? 'selected' : '' }}>
                            {{ $type->name }} (max {{ $type->max_score }}, weight {{ $type->weight }}%)
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="mt-4">
            <label for="csv_file" class="block text-xs font-medium text-gray-700">CSV File *</label>
            <input type="file" name="csv_file" id="csv_file" accept=".csv,.txt" required
                   class="mt-1 block w-full rounded-lg border border-gray-300 text-sm shadow-sm file:mr-3 file:rounded-l-lg file:border-0 file:bg-primary-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-primary-600 hover:file:bg-primary-100">
            <p class="mt-1 text-xs text-gray-500">Maximum 10MB. Use the downloaded template for best results.</p>
        </div>

        <div class="mt-4">
            <button type="submit" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">
                🔎 Preview &amp; Validate
            </button>
        </div>
    </form>
@endsection