{% extends "layouts/app.twig" %}

{% block title %}{{ __('Create New User') }}{% endblock %}

{% block content %}
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                  {{ __('Overview') }}
                </div>
                <h2 class="page-title">
                  {{ __('Create New User') }}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="col-12">
            {% include 'partials/flash.twig' %}
              <form method="post" action="/user/create" id="create-user-form">
              {{ csrf.field | raw }}
                <div class="card">
                  <div class="card-body">
                    <div class="row">
                      <!-- Email -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Email') }}</label>
                          <input type="email" class="form-control" name="email" placeholder="{{ __('Enter email') }}" required>
                        </div>
                      </div>
                          
                      <!-- Username -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Username') }}</label>
                          <input type="text" class="form-control" name="username" placeholder="{{ __('Enter username') }}" required>
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <!-- Password -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Password') }}</label>
                          <input type="password" class="form-control" name="password" placeholder="{{ __('Enter password') }}" required>
                        </div>
                      </div>
                          
                      <!-- Confirm Password -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Confirm Password') }}</label>
                          <input type="password" class="form-control" name="password_confirmation" placeholder="{{ __('Confirm password') }}" required>
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <!-- Status -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Status') }}</label>
                          <select class="form-select" name="status" required>
                            <option value="active">{{ __('Active') }}</option>
                            <option value="inactive">{{ __('Inactive') }}</option>
                          </select>
                        </div>
                      </div>
                          
                      <!-- Verified -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Verified') }}</label>
                          <select class="form-select" name="verified" required>
                            <option value="1">{{ __('Yes') }}</option>
                            <option value="0">{{ __('No') }}</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <!-- Role -->
                    <div class="row">
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">Role</label>
                          <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="role-toggle" name="role" value="admin">
                            <label class="form-check-label" for="role-toggle" id="role-label">Registrar</label>
                          </div>
                          <!-- Hidden input to ensure "registrar" is sent when the toggle is off -->
                          <input type="hidden" name="role" id="hidden-role" value="registrar">
                        </div>
                      </div>
                    </div>

                    <!-- Registrar-specific fields -->
                    <div id="registrar-fields" style="display: none;">
                      <div class="mb-3">
                        <label class="form-label">Registrar Association</label>
                        <select class="form-select" name="registrar_id">
                          <option value="" disabled selected>Select registrar</option>
                          {% for registrar in registrars %}
                            <option value="{{ registrar.id }}">{{ registrar.name }}</option>
                          {% endfor %}
                        </select>
                      </div>
                    </div>
                  </div>
                      
                  <div class="card-footer text-end">
                    <div class="d-flex">
                      <button type="submit" class="btn btn-primary">{{ __('Create User') }}</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const roleToggle = document.getElementById("role-toggle");
    const hiddenRoleInput = document.getElementById("hidden-role");
    const registrarFields = document.getElementById("registrar-fields");
    const roleLabel = document.getElementById("role-label");

    // Function to toggle registrar fields, role value, and label text
    function updateRole() {
        if (roleToggle.checked) {
            // Admin role selected
            hiddenRoleInput.value = "admin";
            roleLabel.textContent = "Admin"; // Update label to Admin
            registrarFields.style.display = "none"; // Hide registrar-specific fields
        } else {
            // Registrar role selected
            hiddenRoleInput.value = "registrar";
            roleLabel.textContent = "Registrar"; // Update label to Registrar
            registrarFields.style.display = "block"; // Show registrar-specific fields
        }
    }

    // Attach event listener to the toggle
    roleToggle.addEventListener("change", updateRole);

    // Set initial state on page load
    updateRole();
});
</script>
{% endblock %}