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

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


{% block content %}
    <header class="resource-form-page-heading mb-4">
        <span class="detail-eyebrow">Server Assignment</span>
        <h1>{% if object.pk %}Edit checkout{% else %}Check out {{ server.name|default:server.ip_address }}{% endif %}</h1>
        <p>Connect this reusable server to an engagement, role, 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 %}
    <!-- 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(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 %}