@extends('layouts.app')
@section('title', 'Import Students')
@section('page_title', 'Import Students from Excel')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('students.index') }}">Students</a></li>
    <li class="breadcrumb-item active">Import</li>
@endsection

@section('content')
    <div class="row g-3">
        <div class="col-lg-5">
            <div class="card h-100"><div class="card-body">
                <h6 class="fw-bold"><i class="bi bi-1-circle me-1"></i>Download the template</h6>
                <p class="small text-muted">Get the sample file, open it in Excel, and fill one student per row.</p>
                <a href="{{ route('students.import.template') }}" class="btn btn-outline-primary"><i class="bi bi-file-earmark-arrow-down me-1"></i>Download Template</a>

                <hr>
                <h6 class="fw-bold"><i class="bi bi-2-circle me-1"></i>Upload the filled file</h6>
                <p class="small text-muted">Save your file as <b>.xlsx</b> or <b>.csv</b> and upload it here.</p>
                <form method="POST" action="{{ route('students.import.run') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-2">
                        <input type="file" name="file" accept=".xlsx,.csv,.txt" class="form-control @error('file') is-invalid @enderror" required>
                        @error('file')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <button class="btn btn-primary"><i class="bi bi-upload me-1"></i>Import Students</button>
                    <a href="{{ route('students.index') }}" class="btn btn-light border">Cancel</a>
                </form>

                @if(session('import_errors') && count(session('import_errors')))
                    <div class="alert alert-warning mt-3 small">
                        <b>Some rows were skipped:</b>
                        <ul class="mb-0">@foreach(session('import_errors') as $e)<li>{{ $e }}</li>@endforeach</ul>
                    </div>
                @endif
            </div></div>
        </div>

        <div class="col-lg-7">
            <div class="card h-100"><div class="card-body">
                <h6 class="fw-bold"><i class="bi bi-info-circle me-1"></i>Column guide</h6>
                <div class="table-responsive">
                    <table class="table table-sm align-middle">
                        <thead><tr><th>Column</th><th>Required</th><th>Notes</th></tr></thead>
                        <tbody class="small">
                            <tr><td><b>Name</b></td><td><span class="badge bg-soft-danger">Yes</span></td><td>Full student name</td></tr>
                            <tr><td>Father Name</td><td>No</td><td>Shown in lists &amp; challans</td></tr>
                            <tr><td>Father CNIC</td><td>No</td><td>Format 00000-0000000-0</td></tr>
                            <tr><td>Father Mobile</td><td>No</td><td>Students with the <b>same mobile become siblings</b> in one family</td></tr>
                            <tr><td>Mother Name</td><td>No</td><td></td></tr>
                            <tr><td>Gender</td><td>No</td><td><code>male</code> / <code>female</code> / <code>other</code> (defaults to male)</td></tr>
                            <tr><td>Date of Birth</td><td>No</td><td>YYYY-MM-DD (e.g. 2018-05-10)</td></tr>
                            <tr><td>B-Form Number</td><td>No</td><td>Child B-Form / CNIC</td></tr>
                            <tr><td><b>Class</b></td><td>No*</td><td>Must match an existing class name (e.g. Grade 1). Row skipped if not found.</td></tr>
                            <tr><td>Section</td><td>No</td><td>Section name (A, B…) within that class</td></tr>
                            <tr><td>Admission Date</td><td>No</td><td>YYYY-MM-DD (defaults to today)</td></tr>
                            <tr><td>Roll Number</td><td>No</td><td></td></tr>
                            <tr><td>Address</td><td>No</td><td></td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="alert alert-info small mb-0">
                    <i class="bi bi-lightbulb me-1"></i>Admission numbers are generated automatically. Make sure your <b>Class</b> and <b>Section</b> names exactly match those already set up under <a href="{{ route('classes.index') }}">Academics → Classes</a>.
                </div>
            </div></div>
        </div>
    </div>
@endsection
