@extends('layouts.admin')

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

@section('content')
<div class="p-6">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold font-display text-ink-900">Bulk Import Students via CSV</h1>
        <a href="{{ route('admin.students.index') }}" class="text-graphite-400 hover:text-ink-600">&larr; Back</a>
    </div>

    <div class="bg-white border border-graphite-400/30 rounded p-6 max-w-2xl">
        <div class="bg-seal-blue-100 border border-seal-blue-700/30 rounded p-4 mb-6">
            <h3 class="text-sm font-semibold text-seal-blue-700 mb-2">CSV Format</h3>
            <p class="text-sm text-seal-blue-700">Upload a CSV file with the following columns:</p>
            <code class="block mt-2 text-xs bg-white p-2 rounded border text-ink-900">roll_number,name,cnic_or_b_form_number<br>LHR-2026-001,Ahmed Khan,35202-1234567-1<br>LHR-2026-002,Sara Ali,35202-7654321-2</code>
            <p class="text-xs text-seal-blue-700 mt-2">The first row can be a header (if it contains "roll_number" it will be skipped). Max file size: 10MB.</p>
        </div>

        <form action="{{ route('admin.students.import-csv') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <div>
                <label for="institute_id" class="block text-sm font-medium text-ink-600 mb-1">Institute</label>
                <select name="institute_id" id="institute_id" required class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full">
                    <option value="">Select Institute</option>
                    @foreach($institutes as $institute)
                        <option value="{{ $institute->id }}">{{ $institute->name }} ({{ $institute->code }})</option>
                    @endforeach
                </select>
                @error('institute_id') <p class="text-redpen-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="class" class="block text-sm font-medium text-ink-600 mb-1">Class</label>
                <select name="class" id="class" required class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full">
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
                @error('class') <p class="text-redpen-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="csv_file" class="block text-sm font-medium text-ink-600 mb-1">CSV File</label>
                <input type="file" name="csv_file" id="csv_file" required accept=".csv,.txt"
                       class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full">
                @error('csv_file') <p class="text-redpen-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <button type="submit" class="bg-seal-blue-700 text-white px-6 py-2 rounded hover:bg-seal-blue-700/90 text-sm font-medium">
                Import Students
            </button>
        </form>
    </div>
</div>
@endsection