<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="container mt-4">
  <h4 class="mb-3">Export Database</h4>

  <form action="<?= base_url('admin/setting/export') ?>" method="post" id="exportForm">
    <?= csrf_field() ?>

    <div class="card shadow-sm">
      <div class="card-body">
        <div class="mb-3">
          <label for="format" class="form-label">Pilih Format Backup</label>
          <select name="format" id="format" class="form-select" required>
            <option value="sql">SQL (.sql)</option>
            <option value="zip">ZIP (.zip)</option>
          </select>
        </div>

        <div class="mb-3">
          <label for="filename" class="form-label">Nama File (Opsional)</label>
          <input type="text" name="filename" id="filename" class="form-control" placeholder="Contoh: backup_agustus">
        </div>

        <div class="d-grid">
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-download me-1"></i> Export Sekarang
          </button>
        </div>
      </div>
    </div>
  </form>
</div>

<!-- Toast Notification -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999">
  <div id="toastSuccess" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        Backup Sukses.
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" style="display:none; position: fixed; top: 0; left: 0; width:100%; height:100%; background: rgba(255,255,255,0.7); z-index: 9998;">
  <div class="d-flex justify-content-center align-items-center h-100">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</div>

<style>
  #toastSuccess {
    opacity: 0.95;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
  }
</style>

<script>
  const form = document.getElementById('exportForm');
  form.addEventListener('submit', function () {
    const toastEl = document.getElementById('toastSuccess');
    const toast = new bootstrap.Toast(toastEl);
    toast.show();
  });
</script>

<?= $this->endSection() ?>