@extends('layouts.school')

@section('title', 'Import Students')
@section('header', 'Import Students')

@section('content')
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
            <h3 class="font-display font-semibold text-gray-900 mb-4">Upload CSV</h3>
            <form method="POST" action="{{ route('school.students.import', request()->route('schoolId')) }}" enctype="multipart/form-data" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700">CSV File *</label>
                    <input type="file" name="file" accept=".csv,text/csv" required class="mt-1 block w-full text-sm text-gray-600 file:mr-4 file:rounded-lg file:border-0 file:bg-primary-50 file:px-4 file:py-2.5 file:text-sm file:font-semibold file:text-primary-700 hover:file:bg-primary-100">
                    @error('file') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Import Students</button>
            </form>
        </div>

        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 h-fit">
            <h3 class="font-display font-semibold text-gray-900 mb-3">Expected Columns</h3>
            <ul class="space-y-1.5 text-sm text-gray-600">
                <li><span class="font-mono text-xs bg-gray-100 rounded px-1.5 py-0.5">first_name</span> *required</li>
                <li><span class="font-mono text-xs bg-gray-100 rounded px-1.5 py-0.5">last_name</span> *required</li>
                <li><span class="font-mono text-xs bg-gray-100 rounded px-1.5 py-0.5">middle_name</span></li>
                <li><span class="font-mono text-xs bg-gray-100 rounded px-1.5 py-0.5">email</span></li>
                <li><span class="font-mono text-xs bg-gray-100 rounded px-1.5 py-0.5">phone</span></li>
                <li><span class="font-mono text-xs bg-gray-100 rounded px-1.5 py-0.5">gender</span></li>
                <li><span class="font-mono text-xs bg-gray-100 rounded px-1.5 py-0.5">date_of_birth</span> (YYYY-MM-DD)</li>
                <li><span class="font-mono text-xs bg-gray-100 rounded px-1.5 py-0.5">class</span> (exact class name)</li>
                <li><span class="font-mono text-xs bg-gray-100 rounded px-1.5 py-0.5">admission_no</span> (auto if blank)</li>
            </ul>
            <p class="mt-4 text-xs text-gray-500">Rows with errors are skipped and reported. Admission numbers are generated automatically when left blank.</p>
        </div>
    </div>
@endsection