@extends('layouts.admin')
@section('title','CSV Import')
@section('page-title','CSV Question Import')

@section('content')
<div class="row g-4">

{{-- Upload Form --}}
<div class="col-lg-5">
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3 border-bottom">
            <h6 class="fw-bold mb-0"><i class="bi bi-upload me-2 text-success"></i>Upload CSV File</h6>
        </div>
        <div class="card-body p-4">
            <form method="POST" action="{{ route('admin.questions.csv-import.process') }}" enctype="multipart/form-data">
                @csrf

                <div class="mb-3">
                    <label class="form-label fw-semibold">Subject <span class="text-danger">*</span></label>
                    <select name="subject_id" class="form-select @error('subject_id') is-invalid @enderror" required>
                        <option value="">-- Select Subject --</option>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}" {{ old('subject_id') == $subject->id ? 'selected' : '' }}>
                                {{ $subject->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('subject_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="mb-4">
                    <label class="form-label fw-semibold">CSV File <span class="text-danger">*</span></label>
                    <input type="file" name="csv_file" class="form-control @error('csv_file') is-invalid @enderror"
                           accept=".csv,.txt" required>
                    <small class="text-muted">Max size: 5MB. Must be a .csv file.</small>
                    @error('csv_file')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <button type="submit" class="btn btn-success w-100">
                    <i class="bi bi-upload me-1"></i>Import Questions
                </button>
            </form>
        </div>
    </div>

    {{-- Download Template --}}
    <div class="card border-0 shadow-sm mt-3">
        <div class="card-body p-3 d-flex align-items-center gap-3">
            <i class="bi bi-file-earmark-spreadsheet text-success" style="font-size:2.5rem"></i>
            <div>
                <div class="fw-semibold">Need the CSV template?</div>
                <small class="text-muted">Download the official template with sample data</small>
                <div class="mt-1">
                    <a href="{{ route('admin.questions.csv-template') }}" class="btn btn-outline-success btn-sm">
                        <i class="bi bi-download me-1"></i>Download Template
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- CSV Format Guide --}}
<div class="col-lg-7">
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-header bg-white py-3 border-bottom">
            <h6 class="fw-bold mb-0"><i class="bi bi-info-circle me-2 text-info"></i>CSV Format Guide</h6>
        </div>
        <div class="card-body p-4">
            <p class="small text-muted">Your CSV file must have these exact column headers in the first row:</p>
            <div class="table-responsive">
                <table class="table table-sm table-bordered small">
                    <thead class="table-dark">
                        <tr><th>Column</th><th>Required</th><th>Notes</th></tr>
                    </thead>
                    <tbody>
                        <tr><td><code>topic</code></td><td>No</td><td>Topic name — auto-created if not found</td></tr>
                        <tr><td><code>year</code></td><td>No</td><td>4-digit year e.g. 2023</td></tr>
                        <tr><td><code>instruction_text</code></td><td>No</td><td>Comprehension passage — leave blank if none</td></tr>
                        <tr class="table-warning"><td><code>question_text</code></td><td><strong>Yes</strong></td><td>Supports HTML: &lt;sup&gt;, &lt;sub&gt;</td></tr>
                        <tr class="table-warning"><td><code>option_a</code></td><td><strong>Yes</strong></td><td>Option A text</td></tr>
                        <tr class="table-warning"><td><code>option_b</code></td><td><strong>Yes</strong></td><td>Option B text</td></tr>
                        <tr class="table-warning"><td><code>option_c</code></td><td><strong>Yes</strong></td><td>Option C text</td></tr>
                        <tr class="table-warning"><td><code>option_d</code></td><td><strong>Yes</strong></td><td>Option D text</td></tr>
                        <tr class="table-warning"><td><code>correct_answer</code></td><td><strong>Yes</strong></td><td>Must be A, B, C or D</td></tr>
                        <tr><td><code>explanation</code></td><td>No</td><td>Solution shown after exam</td></tr>
                        <tr><td><code>difficulty</code></td><td>No</td><td>easy / medium / hard (default: medium)</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="alert alert-info py-2 small mb-0">
                <i class="bi bi-lightbulb me-1"></i>
                <strong>Comprehension tip:</strong> For multiple questions sharing the same passage, repeat the same
                <code>instruction_text</code> on each row. The system will group them automatically.
            </div>
        </div>
    </div>

    {{-- Recent Import Logs --}}
    @if($logs->isNotEmpty())
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
            <h6 class="fw-bold mb-0">Recent Imports</h6>
            <a href="{{ route('admin.questions.import-logs') }}" class="btn btn-sm btn-outline-secondary">View All</a>
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
                <thead class="table-light">
                    <tr><th>File</th><th>Subject</th><th class="text-center">OK</th><th class="text-center">Failed</th><th>Status</th></tr>
                </thead>
                <tbody>
                    @foreach($logs as $log)
                    <tr>
                        <td class="small">{{ $log->filename }}</td>
                        <td class="small">{{ $log->subject->name ?? '—' }}</td>
                        <td class="text-center"><span class="badge bg-success">{{ $log->successful }}</span></td>
                        <td class="text-center"><span class="badge bg-{{ $log->failed > 0 ? 'danger' : 'secondary' }}">{{ $log->failed }}</span></td>
                        <td>
                            @php $sc = ['completed'=>'success','processing'=>'warning','failed'=>'danger'][$log->status] @endphp
                            <span class="badge bg-{{ $sc }}">{{ ucfirst($log->status) }}</span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>

</div>
@endsection