{% extends 'hrapps/admin/base.html' %}

{% block hr_title %}{{ action|title }} Form{% endblock %}

{%  block more_css %}
    {% include 'hrapps/bundles/coreuifree-css.html' %}
    {% include 'hrapps/bundles/materialdesignicons-css.html' %}
    {% include 'hrapps/bundles/builder-css.html' %}
{% endblock %}

{% block hrapps_content %}
    {% include "hrapps/admin/partials/builder/builder_templates.html" %}
    {% include "hrapps/admin/partials/builder/builder_success_modal.html" %}
    {% include "hrapps/admin/partials/builder/activate_confirm_modal.html" %}
    <div class="row">
        <h3>Form Builder</h3>
    </div>
    <div class="row mb-2">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    Form Information
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="name">Form Name</label>
                        <input type="text" class="form-control" id="name" value="{{ form.name }}" required>
                        <div class="invalid-feedback">
                            A form name is required.
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description">Form Description</label>
                        <textarea class="form-control" id="description" rows="3">{{ form.description }}</textarea>
                    </div>
                    <div class="form-group" style="display: flex; justify-content: flex-end;">
                        <input type="checkbox" class="form-check-input" id="active" style="margin-right: 3px;" {% if form.active %} checked {% endif %}>
                        <label for="active">Active</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="sticky-offset">
                <div class="card">
                    <div class="card-header">
                        Field Toolbox
                    </div>
                    <div class="card-body">
                        <div id="text-field" draggable="true" class="card card-body bg-secondary form-tool">
                            <p class="form-tool"><span class="mdi mdi-form-textbox icon-xl"></span> Text Box</p>
                        </div>
                        <div id="text-area" draggable="true" class="card card-body bg-secondary form-tool">
                            <p class="form-tool">
                                <span class="cil-short-text icon-xl" style="vertical-align: text-bottom"></span>
                                Text Area (Multi-Line Text)
                            </p>
                        </div>
                        <div id="image" draggable="true" class="card card-body bg-secondary form-tool">
                            <p class="form-tool"><span class="mdi mdi-image icon-xl"></span> Image</p>
                        </div>
                        <div id="dropdown" draggable="true" class="card card-body bg-secondary form-tool">
                            <p class="form-tool"><span class="mdi mdi-form-dropdown icon-xl"></span> Dropdown</p>
                        </div>
                        <div id="checkboxes" draggable="true" class="card card-body bg-secondary form-tool">
                            <p class="form-tool">
                                <span class="mdi mdi-format-list-checkbox icon-xl"></span>
                                Checkboxes
                            </p>
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary mt-2" onclick="submitForm('{{ csrf_token }}', {{ has_active|lower }}, {{ form.active|lower }})">{{ action|title }} Form</button>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    Form Designer
                </div>
                <div id="designer" class="card-body">
                    <div id="dropField" class="{% if action|lower == "edit" %}invisible hidden {% else %}visible {% endif %}" style="z-index: -1;">
                        <div class="card dropzone">
                            <h1>Drag and Drop Fields Here</h1>
                            <h4 style="visibility: hidden">A form requires fields.</h4>
                        </div>
                    </div>
                {% if action|lower == "edit" %}
                    {% for field in fields %}
                        {% with "hrapps/admin/partials/builder/fields/"|add:field.type|add:".html" as field_partial %}
                            {% include field_partial with field=field id=forloop.counter %}
                        {% endwith %}
                    {% endfor %}
                {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    {% include "hrapps/bundles/builder-js.html" %}
    <script type="text/javascript">
        {% if action|lower == "edit" %}
            const qs = getQuestions();

            for (let i = 0; i < qs.length; i++) {
                qs[i].addEventListener("dragstart", dragstartHandler);
            }
        {% endif %}

        const fieldTools = document.querySelectorAll("div.form-tool");

        for (let i = 0; i < fieldTools.length; i++) {
            fieldTools[i].addEventListener("dragstart", dragstartHandler);
            fieldTools[i].addEventListener("dblclick", dblclickHandler);
        }

        designer.addEventListener("dragover", (event) => {
            event.preventDefault();
        })
        designer.addEventListener("drop", designerDropHandler);
    </script>
{% endblock %}