{% extends "base.html" %}
{% set active_page = "accounts" %}
{% block title %} Create account {% endblock %}

{% block divs %}
<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
      <div class="card">
        <h3>Create account</h3>
        <form id="create-account-form">
          <div class="form-group mb-3">
            <label for="name" class="control-label">Name</label>
            <input type="text" class="form-control" id="name" name="name" required />
          </div>

          {% if user_is_admin %}
          <div class="form-group mb-3">
            <label for="consultancy_account_id" class="control-label">Consultancy account</label>
            <select class="form-select" id="consultancy_account_id" name="consultancy_account_id">
              <option value="" {% if not selected_consultancy_account_id %}selected{% endif %}>Select Account</option>
              {% for account in accounts %}
              <option value="{{ account.id }}" {% if selected_consultancy_account_id == account.id %}selected{% endif %}>{{ account.name }}</option>
              {% endfor %}
            </select>
          </div>
          {% else %}
          <div class="form-group mb-3">
            <label class="control-label">Consultancy account</label>
            <input
              type="text"
              class="form-control"
              value="{{ selected_consultancy_account_name }}"
              disabled
            />
            <small>
              The new account will be linked as a client account of {{ selected_consultancy_account_name }}.
            </small>
          </div>
          {% endif %}

          <button type="submit" class="btn btn-success">Create account</button>
        </form>

        <div id="create-account-error" class="text-danger mt-3" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    $("#create-account-form").on("submit", function (event) {
      event.preventDefault();

      const payload = {
        name: $("#name").val(),
      };

      const consultancyAccountId = $("#consultancy_account_id").val();
      if (consultancyAccountId) {
        payload.consultancy_account_id = parseInt(consultancyAccountId, 10);
      }

      $.ajax({
        type: "POST",
        url: "/api/v3_0/accounts",
        contentType: "application/json",
        data: JSON.stringify(payload),
        success: function (response) {
          window.location.href = `/accounts/${response.id}`;
        },
        error: function (xhr) {
          const fallbackMessage = "Could not create account.";
          const errors = xhr.responseJSON && xhr.responseJSON.errors;
          const message = errors && errors.length > 0 ? errors.join(", ") : fallbackMessage;
          $("#create-account-error").text(message).show();
        },
      });
    });
  });
</script>
{% endblock %}