{% extends "common/base.html" %}
{% load crispy_forms_tags %}
{% load common_tags %}
{% load static %}


{% block title %}
Request New Allocation
{% endblock %}


{% block content %}
<h2>Request New Allocation <br><small>Project: {{ project.title }}</small></h2>
<hr>

<p>The following {{ settings.CENTER_NAME }}
  resources are available to request for this project. If you need access to
  more than one of these, please submit a separate allocation request for each
  resource. For each request you must provide the justification for how you
  intend to use the resource to further the research goals of your project.</p>

<form method="post">
  {% csrf_token %}
  {{form |crispy}}

  <div id="eula-div" style="display: none;">
    <textarea style="display:none;min-width:100%" id="eula"  rows="15"></textarea>
    <br>
    <p class="fw-bold">By clicking submit you agree to the Terms and Conditions.</p>
  </div>

  <input class="btn btn-primary" type="submit" value="Submit" />
  <a class="btn btn-secondary" href="{% url 'project-detail' project.pk %}" role="button">Back to Project</a><br>
</form>

<!-- Large modal -->
<div id="Modal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Account Name</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"></span>
        </button>
      </div>
      <div class="modal-body">
        <div id="error_div"></div>
        *No spaces in account name
        <form id="allocation_account_form">
          {{AllocationAccountForm |crispy}}
          <button id="myFormSubmit" class="btn btn-primary" type="submit">Submit</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </form>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Send message</button>
  </div>
</div>

{{ resources_form_default_quantities|json_script:"resources-form-default-quantities" }}
{{ resources_form_descriptions|json_script:"resources-form-description" }}
{{ resources_form_label_texts|json_script:"resources-form-label-texts" }}
{{ resources_with_accounts|json_script:"resources-with-accounts" }}
{{ resources_with_eula|json_script:"resources-with-eula" }}

{% endblock %}

{% block javascript %}
{{ block.super }}
<script>
document.addEventListener('DOMContentLoaded', function() {
  var resources_form_default_quantities = JSON.parse(document.getElementById('resources-form-default-quantities').textContent);
  var resources_form_description = JSON.parse(document.getElementById('resources-form-description').textContent);
  var resources_form_label_texts = JSON.parse(document.getElementById('resources-form-label-texts').textContent);
  var resources_with_accounts = JSON.parse(document.getElementById('resources-with-accounts').textContent);
  var resources_with_eula = JSON.parse(document.getElementById('resources-with-eula').textContent);

  $(document).ready(function () {
    $('<p id="resource_description"></p>').insertAfter($("#div_id_resource"))
    $('<br><input id="selectAll" class="form-check-input" type="checkbox"> <strong>Select All Users</strong>').insertAfter($("#div_id_users > label"))
    $("#id_resource").trigger('change');

    $("#selectAll").click(function () {
      $("input[name^='users']").prop('checked', $(this).prop('checked'));
    });

    $("input[name^='users']").click(function (ele) {
      var id = $(this).attr('id');
      if (id != "selectAll") {
        $("#selectAll").prop('checked', false);
      }
    });
  });

  $('#modal_link').on("click", function () {
    $('#Modal').modal('show');
  });
  $(function () {
    $('#myFormSubmit').click(function (e) {
      e.preventDefault();
      $(function () {

        var new_account_name = $('#allocation_account_form').serializeArray()[0].value.trim();
        $('#id_allocation_account').prepend('<option value="' + new_account_name + '">' + new_account_name + '</option>');
        $('#id_allocation_account option[value=' + new_account_name + ']').prop('selected', true);
        $.ajax({
          headers: { 'X-CSRFToken': getCookie('csrftoken') },
          type: "POST",
          url: "/allocation/add-allocation-account/",
          data: {
            name: new_account_name,
          }, // data sent with the post request
          success: function (json) {
            console.log(json);
            $('#allocation_account_form')[0].reset();
            $('#Modal').modal('toggle');
            $('#error_div').html('<div></div>');
          },
          error: function (xhr, errmsg, err) {
            $('#error_div').html('<div class="alert alert-danger" role="alert">' + jQuery.parseJSON(xhr.responseText)["name"] + '</div>');
            console.log(xhr);
            console.log(errmsg);
            console.log(err);
          }
        });
      });
    });
  });

  $("#id_resource").change(function () {
    var resource_id = $("#id_resource option:selected").val();
    if (resources_form_description[resource_id]) {
      $('#resource_description').html(resources_form_description[resource_id])
      $('#resource_description').show()
    } else {
      $('#resource_description').html("")
      $('#resource_description').hide()
    }

    if (resources_form_default_quantities[resource_id]) {
      var label = $('label[for="id_quantity"]');
      if (resources_form_label_texts[resource_id]) {
        label.html(resources_form_label_texts[resource_id])
      } else {
        label.html('<strong>Quantity*</strong>')
      }
      $('#id_quantity').val(resources_form_default_quantities[resource_id])
      $('#div_id_quantity').show();
    } else {
      $('#div_id_quantity').hide();
      $('#id_quantity').val(1)
    }

    if (resources_with_accounts.includes(parseInt(resource_id))) {
      $('#div_id_allocation_account').show();
    } else {
      $('#div_id_allocation_account').hide();
    }

    if (resources_with_eula[resource_id]) {
      $('#eula').text(resources_with_eula[resource_id])
      $('#eula-div').show();
      $('#eula').show();
    } else {
      $('#eula').hide();
      $('#eula-div').hide();
    }
  });
});
</script>
{% endblock %}