<?php /* users/form.php */ $isEdit = isset($user); ?>

<div class="d-flex justify-content-between align-items-center mb-3">
  <h5 class="fw-semibold mb-0">
    <i class="bi bi-person-<?= $isEdit?'gear':'plus' ?> me-2 text-primary"></i>
    <?= $isEdit ? 'Edit User' : 'Add User' ?>
  </h5>
  <a href="<?= APP_URL ?>/users" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>Back
  </a>
</div>

<div class="row justify-content-center">
  <div class="col-md-7 col-lg-6">
    <div class="card">
      <div class="card-header bg-transparent fw-semibold small">
        <i class="bi bi-person-badge me-1"></i>
        <?= $isEdit ? 'Update User Details' : 'New User Account' ?>
      </div>
      <div class="card-body">
        <form method="POST"
              action="<?= APP_URL ?>/users/<?= $isEdit ? 'edit/'.$user['id'] : 'create' ?>"
              autocomplete="off">
          <?= Auth::csrfField() ?>

          <div class="row g-3">

            <div class="col-12">
              <label class="form-label small fw-semibold">Full Name *</label>
              <input type="text" name="name" class="form-control" required
                     value="<?= e($user['name'] ?? '') ?>"
                     placeholder="e.g. Kamal Perera">
            </div>

            <div class="col-md-6">
              <label class="form-label small fw-semibold">Username *</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-at"></i></span>
                <input type="text" name="username" class="form-control" required
                       value="<?= e($user['username'] ?? '') ?>"
                       placeholder="kamal123"
                       autocomplete="off">
              </div>
            </div>

            <div class="col-md-6">
              <label class="form-label small fw-semibold">Email</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                <input type="email" name="email" class="form-control"
                       value="<?= e($user['email'] ?? '') ?>"
                       placeholder="email@example.com">
              </div>
            </div>

            <div class="col-md-6">
              <label class="form-label small fw-semibold">Phone</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-telephone"></i></span>
                <input type="text" name="phone" class="form-control"
                       value="<?= e($user['phone'] ?? '') ?>"
                       placeholder="07X XXX XXXX">
              </div>
            </div>

            <div class="col-md-6">
              <label class="form-label small fw-semibold">Role *</label>
              <select name="role_id" class="form-select" required>
                <option value="">— Select Role —</option>
                <?php foreach ($roles as $r):
                  $label = ucwords(str_replace('_', ' ', $r['role_name']));
                  $roleColors = ['super_admin'=>'🔴','admin'=>'🟡','manager'=>'🔵','cashier'=>'🟢'];
                  $icon = $roleColors[$r['role_name']] ?? '⚪';
                ?>
                <option value="<?= $r['id'] ?>"
                        <?= ($user['role_id'] ?? '') == $r['id'] ? 'selected' : '' ?>>
                  <?= $icon ?> <?= e($label) ?>
                </option>
                <?php endforeach; ?>
              </select>
            </div>

            <div class="col-md-6">
              <label class="form-label small fw-semibold">Branch</label>
              <select name="branch_id" class="form-select">
                <option value="">— No Branch —</option>
                <?php foreach ($branches as $b): ?>
                <option value="<?= $b['id'] ?>"
                        <?= ($user['branch_id'] ?? '') == $b['id'] ? 'selected' : '' ?>>
                  <?= e($b['name']) ?>
                </option>
                <?php endforeach; ?>
              </select>
            </div>

            <div class="col-md-6">
              <label class="form-label small fw-semibold">
                <?= $isEdit ? 'New Password' : 'Password *' ?>
                <?php if ($isEdit): ?>
                <span class="text-muted fw-normal">(leave blank to keep)</span>
                <?php endif; ?>
              </label>
              <div class="input-group">
                <input type="password" name="password" id="pwd-input"
                       class="form-control" <?= !$isEdit ? 'required' : '' ?>
                       autocomplete="new-password"
                       placeholder="<?= $isEdit ? 'New password…' : 'Min 8 characters' ?>">
                <button class="btn btn-outline-secondary" type="button"
                        onclick="togglePwd()" title="Show/hide">
                  <i class="bi bi-eye" id="pwd-eye"></i>
                </button>
              </div>
            </div>

            <?php if ($isEdit): ?>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Status</label>
              <select name="status" class="form-select">
                <option value="active"   <?= ($user['status'] ?? '') === 'active'   ? 'selected' : '' ?>>✓ Active</option>
                <option value="inactive" <?= ($user['status'] ?? '') === 'inactive' ? 'selected' : '' ?>>✗ Inactive</option>
              </select>
            </div>
            <?php endif; ?>

            <div class="col-12 d-flex gap-2">
              <button type="submit" class="btn btn-primary px-4 fw-semibold flex-grow-1">
                <i class="bi bi-check-circle me-1"></i>
                <?= $isEdit ? 'Update User' : 'Create User' ?>
              </button>
              <a href="<?= APP_URL ?>/users" class="btn btn-outline-secondary px-4">
                Cancel
              </a>
            </div>

          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
function togglePwd() {
  const i = document.getElementById('pwd-input');
  const e = document.getElementById('pwd-eye');
  if (i.type === 'password') {
    i.type = 'text';
    e.className = 'bi bi-eye-slash';
  } else {
    i.type = 'password';
    e.className = 'bi bi-eye';
  }
}
</script>
