{% extends "base_generic.html" %}
{% load crispy_forms_tags %}

{% block pagetitle %}Domain Check-out{% endblock %}


{% block content %}
  <header class="resource-form-page-heading mb-4">
    <span class="detail-eyebrow">Domain Assignment</span>
    <h1>{% if object.pk %}Edit checkout{% else %}Check out {{ domain_name }}{% endif %}</h1>
    <p>Connect this domain to an engagement, activity, and working window.</p>
  </header>

  <!-- Form Error Section -->
  {% if form.errors %}
    <script>
      {% for field in form %}
        {% for error in field.errors %}
          displayToastTop({type: 'error', string: '{{ error|escapejs }}', context: 'form'});
        {% endfor %}
      {% endfor %}
      {% for error in form.non_field_errors %}
        displayToastTop({type: 'error', string: '{{ error|escapejs }}', context: 'form'});
      {% endfor %}
    </script>
  {% endif %}

  <div class="resource-form-shell">
    {% crispy form form.helper %}
  </div>
{% endblock %}

{% block morescripts %}
  <!-- Domain Overwatch Checks -->
  {% if domain.health_status.health_status == "Burned" %}
    <script>
      displayToastTop({type: 'warning', string: 'Domain is flagged as Burned!', delay: 0});
    </script>
  {% endif %}

  {% if domain.is_expiring_soon %}
    <script>
      displayToastTop({
        type: 'warning',
        string: 'Domain expires within the next 30 days and will not auto-renew.',
        delay: 0
      });
    </script>
  {% endif %}

  {% if not domain.is_expiring_soon and domain.may_expire_soon %}
    <script>
      displayToastTop({
        type: 'warning',
        string: 'Domain expires within the next 30 days so you should validate (auto)renewal status before use.',
        delay: 0
      });
    </script>
  {% endif %}

  <script>
    $("#id_client").change(function () {
      var url = $('#checkout-form').attr('overwatch-url');
      var clientId = $(this).val();
      var domainId = $('#checkout-form').find('input[name="domain"]').val();
      $.ajax({
        url: url,
        data: {
          'client': clientId,
          'domain': domainId
        },
        success: function (data) {
          if (data['result'] == 'warning') {
            displayToastTop({type: 'warning', string: data['message'], delay: 0});
          }
        }
      });
    });
  </script>

  <!-- Script for Project Dropdown Filtering -->
  <script>
    $("#id_client").change(function () {
      var url = $('#checkout-form').attr('data-projects-url');
      var clientId = $(this).val();
      $.ajax({
        url: url,
        data: {
          'client': clientId
        },
        success: function (data) {
          $('#id_project').html();
          $('#id_project').html(data);
        }
      });
    });
  </script>

  <!-- Script to Set the Default Dates -->
  <script>
    $("#id_project").change(function () {
      var url = $('#checkout-form').attr('data-project-url');
      var projectId = $(this).val();
      $.ajax({
        url: url,
        data: {
          'project': projectId
        },
        success: function (data) {
          if (data.length > 0) {
            let project = data[0]['fields'];
            $('#id_start_date')[0].value = project['start_date'];
            $('#id_end_date')[0].value = project['end_date'];
          }
        }
      });
    });
  </script>
{% endblock %}