<?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 Guru</h1>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="<?= BASE_URL ?>/index.php?page=guru">Data Guru</a></li>
          <li class="breadcrumb-item active">Import Excel</li>
        </ol>
      </nav>
    </div>
    <a href="<?= BASE_URL ?>/index.php?page=guru_template"
       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 (Comma delimited)</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 guru, 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=guru" 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 (15 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>Keterangan</th>
                </tr>
              </thead>
              <tbody>
                <tr><td>1</td><td>NIP</td><td>197001011995011001</td><td>Boleh kosong</td></tr>
                <tr class="table-warning"><td>2</td><td><strong>Nama</strong> <span class="text-danger">*</span></td><td>Drs. Ahmad Fauzi</td><td>Wajib diisi</td></tr>
                <tr><td>3</td><td>Jenis Kelamin</td><td>Laki-laki</td><td>Laki-laki / Perempuan</td></tr>
                <tr><td>4</td><td>Tempat Lahir</td><td>Jakarta</td><td>Boleh kosong</td></tr>
                <tr><td>5</td><td>Tanggal Lahir</td><td>1970-01-01</td><td>Format YYYY-MM-DD</td></tr>
                <tr><td>6</td><td>Agama</td><td>Islam</td><td>Islam/Kristen/Katolik/Hindu/Buddha</td></tr>
                <tr><td>7</td><td>Pendidikan</td><td>S1</td><td>SMA/D3/S1/S2/S3</td></tr>
                <tr><td>8</td><td>Jurusan Pendidikan</td><td>Pendidikan Matematika</td><td>Boleh kosong</td></tr>
                <tr><td>9</td><td>Mata Pelajaran</td><td>MTK</td><td>Kode mapel (MTK, IPA, dll)</td></tr>
                <tr><td>10</td><td>Status Kepegawaian</td><td>PNS</td><td>PNS / GTT / GTY / Honorer</td></tr>
                <tr><td>11</td><td>No HP</td><td>081234567890</td><td>Boleh kosong</td></tr>
                <tr><td>12</td><td>Email</td><td>guru@sekolah.sch.id</td><td>Boleh kosong</td></tr>
                <tr><td>13</td><td>Alamat</td><td>Jl. Mawar No. 1</td><td>Boleh kosong</td></tr>
                <tr><td>14</td><td>Tahun Masuk</td><td>1995</td><td>Format YYYY</td></tr>
                <tr><td>15</td><td>Status</td><td>Aktif</td><td>Aktif / Tidak Aktif</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Info Kode Mapel -->
      <div class="card mt-3">
        <div class="card-header">
          <h6 class="mb-0"><i class="bi bi-book me-2 text-primary"></i>Kode Mata Pelajaran yang Tersedia</h6>
        </div>
        <div class="card-body py-2">
          <?php
          $db = getDB();
          $mapelList = query_fetch_all($db, "SELECT kode, nama FROM mata_pelajaran ORDER BY kode");
          ?>
          <?php if (empty($mapelList)): ?>
            <p class="text-muted mb-0 fs-sm">
              Belum ada mata pelajaran.
              <a href="<?= BASE_URL ?>/index.php?page=mapel_tambah">Tambah dulu</a>
            </p>
          <?php else: ?>
          <div class="d-flex flex-wrap gap-2">
            <?php foreach ($mapelList as $mp): ?>
            <span class="badge bg-primary-subtle text-primary" style="font-size:.8rem;">
              <strong><?= e($mp['kode']) ?></strong>
              <?php if ($mp['nama'] !== $mp['kode']): ?>
                — <?= e($mp['nama']) ?>
              <?php endif; ?>
            </span>
            <?php endforeach; ?>
          </div>
          <?php endif; ?>
        </div>
      </div>
    </div>

  </div>
</div>

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