<?php require __DIR__ . '/../../layouts/header.php'; ?>

<div class="container-fluid py-3">
  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
    <h4 class="mb-0"><?= e(t('custom_fields') ?? 'Custom Fields') ?></h4>

    <div class="btn-group">
      <a class="btn btn-outline-secondary <?= $scope==='registration'?'active':'' ?>" href="<?= e(base_path('admin/custom-fields?scope=registration')) ?>">Registration</a>
      <a class="btn btn-outline-secondary <?= $scope==='submission'?'active':'' ?>" href="<?= e(base_path('admin/custom-fields?scope=submission')) ?>">Submission</a>
      <a class="btn btn-outline-secondary <?= $scope==='review'?'active':'' ?>" href="<?= e(base_path('admin/custom-fields?scope=review')) ?>">Review</a>
    </div>
  </div>

  <div class="card shadow-sm border-0 mb-3">
    <div class="card-body">
      <form method="post" action="<?= e(base_path('action/custom-fields/save')) ?>" class="row g-2">
        <input type="hidden" name="id" value="0">
        <input type="hidden" name="scope" value="<?= e($scope) ?>">

        <div class="col-md-2">
          <label class="form-label">Key</label>
          <input name="field_key" class="form-control" placeholder="phone, affiliation..." required>
        </div>

        <div class="col-md-3">
          <label class="form-label">Label EN</label>
          <input name="label_en" class="form-control" required>
        </div>

        <div class="col-md-3">
          <label class="form-label">Label AR</label>
          <input name="label_ar" class="form-control" required>
        </div>

        <div class="col-md-2">
          <label class="form-label">Type</label>
          <select name="field_type" class="form-select">
            <option value="text">text</option>
            <option value="textarea">textarea</option>
            <option value="email">email</option>
            <option value="number">number</option>
            <option value="date">date</option>
            <option value="select">select</option>
            <option value="checkbox">checkbox</option>
            <option value="radio">radio</option>
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label">Required</label>
          <select name="is_required" class="form-select">
            <option value="0">No</option>
            <option value="1">Yes</option>
          </select>
        </div>

        <div class="col-md-6">
          <label class="form-label">Options (for select/radio/checkbox)</label>
          <input name="field_options" class="form-control" placeholder="option1|option2|option3">
        </div>

        <div class="col-md-3">
          <label class="form-label">Placeholder EN</label>
          <input name="placeholder_en" class="form-control">
        </div>

        <div class="col-md-3">
          <label class="form-label">Placeholder AR</label>
          <input name="placeholder_ar" class="form-control">
        </div>

        <div class="col-md-6">
          <label class="form-label">Help EN</label>
          <input name="help_text_en" class="form-control">
        </div>

        <div class="col-md-6">
          <label class="form-label">Help AR</label>
          <input name="help_text_ar" class="form-control">
        </div>

        <div class="col-md-2">
          <label class="form-label">Sort</label>
          <input name="sort_order" type="number" class="form-control" value="0">
        </div>

        <div class="col-md-2">
          <label class="form-label">Active</label>
          <select name="is_active" class="form-select">
            <option value="1">Yes</option>
            <option value="0">No</option>
          </select>
        </div>

        <div class="col-md-8 d-flex align-items-end">
          <button class="btn btn-primary">
            <i class="fa fa-save"></i> Save
          </button>
        </div>
      </form>
    </div>
  </div>

  <div class="card shadow-sm border-0">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-hover align-middle">
          <thead>
            <tr>
              <th>#</th><th>Key</th><th>EN</th><th>AR</th><th>Type</th><th>Req</th><th>Active</th><th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <?php if(empty($rows)): ?>
              <tr><td colspan="8" class="text-center text-muted py-4">—</td></tr>
            <?php else: foreach($rows as $r): ?>
              <tr>
                <td><?= (int)$r['id'] ?></td>
                <td class="fw-semibold"><?= e((string)$r['field_key']) ?></td>
                <td><?= e((string)$r['label_en']) ?></td>
                <td><?= e((string)$r['label_ar']) ?></td>
                <td><?= e((string)$r['field_type']) ?></td>
                <td><?= ((int)$r['is_required']===1)?'Yes':'No' ?></td>
                <td><?= ((int)$r['is_active']===1)?'Yes':'No' ?></td>
                <td class="text-end">
                  <form method="post" action="<?= e(base_path('action/custom-fields/toggle')) ?>" class="d-inline">
                    <input type="hidden" name="id" value="<?= (int)$r['id'] ?>">
                    <input type="hidden" name="scope" value="<?= e($scope) ?>">
                    <button class="btn btn-sm btn-outline-secondary"><i class="fa fa-toggle-on"></i> Toggle</button>
                  </form>
                  <form method="post" action="<?= e(base_path('action/custom-fields/delete')) ?>" class="d-inline" onsubmit="return confirm('Delete?')">
                    <input type="hidden" name="id" value="<?= (int)$r['id'] ?>">
                    <input type="hidden" name="scope" value="<?= e($scope) ?>">
                    <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i> Delete</button>
                  </form>
                </td>
              </tr>
            <?php endforeach; endif; ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>

<?php require __DIR__ . '/../../layouts/footer.php'; ?>
