@extends('layouts.app')
@section('title', 'Import Users')
@section('content')

<div class="d-flex align-items-center justify-content-between mb-4">
    <h4 class="fw-bold mb-0">Import Users</h4>
    <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back
    </a>
</div>

@if($errors->any())
<div class="alert alert-danger">
    <ul class="mb-0 small">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
</div>
@endif

<div class="row g-4">
    <div class="col-lg-7">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent fw-semibold">Upload CSV</div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.users.import.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-semibold">CSV file <span class="text-danger">*</span></label>
                        <input type="file" name="file" accept=".csv,text/csv" class="form-control" required>
                        <div class="form-text">Maximum 2 MB.</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Default password</label>
                        <input type="text" name="default_password" class="form-control" placeholder="trace{{ date('Y') }}" minlength="8">
                        <div class="form-text">
                            Used for any row that leaves the <code>password</code> column blank.
                            Defaults to <code>trace{{ date('Y') }}</code>.
                        </div>
                    </div>
                    <button class="btn btn-primary"><i class="bi bi-upload me-1"></i>Import</button>
                    <a href="{{ route('admin.users.import.template') }}" class="btn btn-outline-secondary ms-1">
                        <i class="bi bi-download me-1"></i>Download template
                    </a>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent fw-semibold">Expected columns</div>
            <div class="card-body">
                <table class="table table-sm mb-3">
                    <tbody>
                        <tr><td><code>name</code></td><td class="small text-muted">Required</td></tr>
                        <tr><td><code>email</code></td><td class="small text-muted">Required, must be unique</td></tr>
                        <tr><td><code>roles</code></td><td class="small text-muted">Required, separate with <code>|</code></td></tr>
                        <tr><td><code>password</code></td><td class="small text-muted">Optional</td></tr>
                        <tr><td><code>student_id</code></td><td class="small text-muted">Optional</td></tr>
                        <tr><td><code>intake</code></td><td class="small text-muted">Optional — created if new</td></tr>
                        <tr><td><code>semester</code></td><td class="small text-muted">Optional — students only</td></tr>
                    </tbody>
                </table>
                <div class="small text-muted mb-2">Available roles:</div>
                @foreach($roles as $r)
                <span class="badge bg-secondary mb-1">{{ $r }}</span>
                @endforeach
                <div class="small text-muted mt-3">
                    <div class="fw-semibold mb-1">Semester values</div>
                    Give either the number (<code>2</code>) or the full name
                    (<code>Year 2 – Semester 4</code>). Leave blank to import without one.
                </div>

                <p class="small text-muted mt-3 mb-0">
                    Rows with a duplicate email, an unknown role, an unknown semester or a missing
                    name are skipped and reported back — the rest still import.
                </p>
            </div>
        </div>
    </div>
</div>
@endsection