<?php include __DIR__ . '/../../views/layouts/header.php'; ?>
<div class="wrapper">
<?php include __DIR__ . '/../../views/layouts/sidebar.php'; ?>
<div class="main-content">
<?php include __DIR__ . '/../../views/layouts/topbar.php'; ?>

<div class="page-content">
  <div class="page-header d-flex justify-content-between align-items-start flex-wrap gap-2">
    <div>
      <h1><i class="bi bi-upload me-2 text-primary"></i>Import Data Siswa</h1>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="<?= BASE_URL ?>/index.php?page=siswa">Data Siswa</a></li>
          <li class="breadcrumb-item active">Import Excel</li>
        </ol>
      </nav>
    </div>
    <a href="<?= BASE_URL ?>/assets/template_siswa.csv"
       class="btn btn-success btn-sm" download>
      <i class="bi bi-download me-1"></i> Download Template CSV
    </a>
  </div>

  <?php if ($flash): ?>
  <div class="alert alert-<?= $flash['type'] ?> alert-dismissible alert-auto-dismiss fade show">
    <i class="bi bi-check-circle-fill me-2"></i><?= e($flash['message']) ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  <?php endif; ?>

  <?php if (!empty($errors)): ?>
  <div class="alert alert-danger">
    <?php foreach ($errors as $err): ?><div><i class="bi bi-x-circle me-1"></i><?= e($err) ?></div><?php endforeach; ?>
  </div>
  <?php endif; ?>

  <div class="row g-3">
    <!-- Form Upload -->
    <div class="col-12 col-lg-5">
      <div class="card">
        <div class="card-header">
          <h6><i class="bi bi-file-earmark-excel me-2 text-success"></i>Upload File CSV</h6>
        </div>
        <div class="card-body">
          <form method="POST" enctype="multipart/form-data">
            <input type="hidden" name="csrf_token" value="<?= e($csrfToken) ?>">

            <div class="mb-3">
              <label class="form-label">Pilih File CSV <span class="text-danger">*</span></label>
              <input type="file" class="form-control" name="file" accept=".csv" required>
              <div class="form-text">
                Format: <strong>CSV (UTF-8)</strong> — Untuk Excel, klik <em>Save As → CSV UTF-8</em>
              </div>
            </div>

            <div class="alert alert-info py-2 px-3 mb-3" style="font-size:.82rem;">
              <i class="bi bi-info-circle me-1"></i>
              <strong>Tips:</strong> Download template di atas, isi data, lalu upload.
              Baris pertama (header) akan dilewati otomatis.
            </div>

            <div class="d-flex gap-2">
              <button type="submit" class="btn btn-primary flex-fill">
                <i class="bi bi-upload me-1"></i> Import Data
              </button>
              <a href="<?= BASE_URL ?>/index.php?page=siswa" class="btn btn-outline-secondary">
                Batal
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Panduan Kolom -->
    <div class="col-12 col-lg-7">
      <div class="card">
        <div class="card-header">
          <h6><i class="bi bi-table me-2 text-info"></i>Format Kolom CSV (27 Kolom)</h6>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-sm mb-0" style="font-size:.82rem;">
              <thead>
                <tr>
                  <th style="width:40px">#</th>
                  <th>Nama Kolom</th>
                  <th>Contoh</th>
                  <th>Ket.</th>
                </tr>
              </thead>
              <tbody>
                <tr class="table-primary"><td colspan="4" class="fw-600 py-1 px-3">📋 Data Pokok Siswa</td></tr>
                <tr><td>1</td><td>No</td><td>1</td><td>Nomor urut</td></tr>
                <tr><td>2</td><td>NIS</td><td>2024001</td><td>Nomor Induk Siswa</td></tr>
                <tr><td>3</td><td>NISN</td><td>0012345678</td><td>NISN Nasional</td></tr>
                <tr><td>4</td><td>NIK</td><td>3201010101100001</td><td>16 digit</td></tr>
                <tr><td>5</td><td>Nama <span class="text-danger">*</span></td><td>Ahmad Rizki</td><td>Wajib diisi</td></tr>
                <tr><td>6</td><td>Jenis Kelamin</td><td>Laki-laki</td><td>Laki-laki / Perempuan</td></tr>
                <tr><td>7</td><td>Kelas</td><td>VII A</td><td>Harus sesuai nama kelas</td></tr>
                <tr><td>8</td><td>Agama</td><td>Islam</td><td>Islam/Kristen/dll</td></tr>
                <tr><td>9</td><td>Tempat Lahir</td><td>Jakarta</td><td></td></tr>
                <tr><td>10</td><td>Tanggal Lahir</td><td>2011-01-15</td><td>Format YYYY-MM-DD</td></tr>
                <tr><td>11</td><td>Anak Ke</td><td>1</td><td>Angka</td></tr>
                <tr><td>12</td><td>Tgl Masuk</td><td>2024-07-15</td><td>Format YYYY-MM-DD</td></tr>
                <tr><td>13</td><td>Asal Sekolah</td><td>SD Negeri 1</td><td></td></tr>
                <tr class="table-warning"><td>14</td><td><strong>Status</strong></td><td>Aktif</td><td>Aktif / Gaib / Lulus / Pindah / Keluar</td></tr>

                <tr class="table-success"><td colspan="4" class="fw-600 py-1 px-3">📍 Alamat Siswa</td></tr>
                <tr><td>15</td><td>Alamat</td><td>Jl. Mawar No. 1</td><td></td></tr>
                <tr><td>16</td><td>RT</td><td>001</td><td></td></tr>
                <tr><td>17</td><td>RW</td><td>002</td><td></td></tr>
                <tr><td>18</td><td>Dusun</td><td>Dusun Mawar</td><td></td></tr>
                <tr><td>19</td><td>Kelurahan</td><td>Kel. Mawar</td><td></td></tr>
                <tr><td>20</td><td>Kecamatan</td><td>Kec. Mawar</td><td></td></tr>

                <tr class="table-warning"><td colspan="4" class="fw-600 py-1 px-3">👨‍👩‍👦 Data Orang Tua</td></tr>
                <tr><td>21</td><td>Nama Ayah</td><td>Budi Santoso</td><td></td></tr>
                <tr><td>22</td><td>Nama Ibu</td><td>Sari Dewi</td><td></td></tr>
                <tr><td>23</td><td>Pekerjaan Ayah</td><td>Wiraswasta</td><td></td></tr>
                <tr><td>24</td><td>Pekerjaan Ibu</td><td>Ibu Rumah Tangga</td><td></td></tr>

                <tr class="table-info"><td colspan="4" class="fw-600 py-1 px-3">🤝 Data Wali</td></tr>
                <tr><td>25</td><td>Nama Wali</td><td>Paman Ahmad</td><td>Boleh kosong</td></tr>
                <tr><td>26</td><td>Alamat Wali</td><td>Jl. Mawar No. 10</td><td>Boleh kosong</td></tr>
                <tr><td>27</td><td>Pekerjaan Wali</td><td>Wiraswasta</td><td>Boleh kosong</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php include __DIR__ . '/../../views/layouts/footer.php'; ?>
</div>
</div>
