@extends('layouts.admin', ['title' => 'Import Data Mahasiswa', 'header' => 'Import Data Mahasiswa'])

@section('admin_content')
<div class="container-fluid">
    <div class="card listing-shell border-0 shadow-sm">
        <div class="card-header bg-white border-0 listing-shell__header">
            <div>
                <span class="listing-shell__eyebrow">Data Mahasiswa</span>
                <h3 class="mb-1">Import Data Mahasiswa</h3>
                <p class="text-muted mb-0">Unggah file Excel (.xlsx/.xls) atau CSV untuk menambahkan data mahasiswa secara massal.</p>
            </div>
        </div>
        <div class="card-body">
            @if(session('warning'))
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    {{ session('warning') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif

            <div class="row mb-4">
                <div class="col-lg-8">
                    <div class="card border-0 shadow-sm" style="border-radius: 20px; background: linear-gradient(180deg, #fbfffe 0%, #f3fbf8 100%); border: 1px solid #d6ebe4;">
                        <div class="card-body">
                            <h6 class="font-weight-bold mb-3"><i class="fas fa-info-circle text-primary mr-2"></i>Ketentuan File</h6>
                            <ul class="mb-0 pl-3 text-muted">
                                <li>Baris pertama wajib berisi header kolom.</li>
                                <li>Format kolom: <code>nama_lengkap, nim, tempat_lahir, tanggal_lahir, jenis_kelamin, daerah_asal, nama_perguruan_tinggi, nama_program_studi, semester, no_hp, master_perguruan_tinggi_id</code></li>
                                <li><code>master_perguruan_tinggi_id</code> bersifat opsional. Jika diisi, nama perguruan tinggi akan diambil dari master data.</li>
                                <li><code>jenis_kelamin</code> harus diisi <strong>Laki-laki</strong> atau <strong>Perempuan</strong>.</li>
                                <li>NIM yang sudah terdaftar akan dilewati.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mt-3 mt-lg-0">
                    <div class="card border-0 shadow-sm h-100" style="border-radius: 20px;">
                        <div class="card-body d-flex flex-column justify-content-center">
                            <h6 class="font-weight-bold mb-3"><i class="fas fa-download text-success mr-2"></i>Template</h6>
                            <p class="text-muted small">Unduh template CSV agar format kolom sesuai.</p>
                            <a href="{{ route('admin.mahasiswa.import.template') }}" class="btn btn-outline-success btn-block">
                                <i class="fas fa-file-csv mr-1"></i> Download Template CSV
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <form method="POST" action="{{ route('admin.mahasiswa.import.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label for="file">Pilih File Excel / CSV</label>
                    <div class="custom-file">
                        <input type="file" name="file" id="file" class="custom-file-input @error('file') is-invalid @enderror" accept=".xlsx,.xls,.csv" required>
                        <label class="custom-file-label" for="file">Pilih file...</label>
                    </div>
                    @error('file') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                    <small class="text-muted">Maksimal 5 MB.</small>
                </div>

                <div class="form-group mb-0">
                    <button type="submit" class="btn btn-primary listing-shell__primary-btn">
                        <i class="fas fa-upload mr-1"></i> Import Data
                    </button>
                    <a href="{{ route('admin.mahasiswa.index') }}" class="btn btn-outline-secondary ml-2">Kembali</a>
                </div>
            </form>

            @if(session('importFailedRows') && count(session('importFailedRows')) > 0)
                <div class="mt-4">
                    <h6 class="font-weight-bold text-danger"><i class="fas fa-exclamation-triangle mr-2"></i>Baris Gagal Diimport</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mt-2">
                            <thead class="thead-light">
                                <tr>
                                    <th>Baris</th>
                                    <th>NIM</th>
                                    <th>Nama</th>
                                    <th>Alasan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach(session('importFailedRows') as $failedRow)
                                    <tr>
                                        <td>{{ $failedRow['baris'] }}</td>
                                        <td>{{ $failedRow['nim'] }}</td>
                                        <td>{{ $failedRow['nama'] }}</td>
                                        <td class="text-danger">{{ $failedRow['alasan'] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const fileInput = document.getElementById('file');
        const fileLabel = document.querySelector('.custom-file-label');
        if (fileInput && fileLabel) {
            fileInput.addEventListener('change', function () {
                fileLabel.textContent = this.files.length ? this.files[0].name : 'Pilih file...';
            });
        }
    });
</script>
@endsection