<!-- Custom widget for foreign keys and many-to-many relationships
    variables:
        widget: the widget object
        content_type_id: the content type id of the model
        widget_type: 'fk' for ForeignKey, 'm2m' for ManyToMany

    Uses the following scripts (in bloomerpForm.js):
        - removeForeignKey
        - removeM2M
        - setForeignKeyValue
        - setM2MValue
        - makeAdvancedSearchTableClickable
-->
{% load crispy_forms_tags %}
{% load bloomerp %}

{% if widget_type == 'm2m' %}
<div class="d-none" id="{{ widget.name }}_input_div">
    {% for choice in selected_choices %}
        <input value="{{choice.pk}}" id="{{widget.name}}_{{ choice.pk }}" name="{{ widget.name }}"/>
    {% endfor %}
</div>
{% else %}
<input 
    type="hidden" 
    name="{{ widget.name }}" 
    id="{{ widget.name }}_hidden_input" 
    {% if widget.value != None %}value="{{ widget.value }}"{% endif %} 
/>
{% endif %}
<div class="dropdown {% if invalid %}is-invalid{% endif %}">
    <input
        class="dropdown-toggle form-control {% if invalid %}is-invalid{% endif %} {{ widget.attrs.class }}" 
        data-bs-toggle="dropdown"
        autocomplete="off"
        id="{{ widget.name }}_display"
        {% if widget.attrs.placeholder %}
        placeholder="{{ widget.attrs.placeholder }}"
        {% else %}
        placeholder="Select an item"
        {% endif %} 
        name="fk_search_results_query"
        hx-get="{% url 'components_fk_search_results' %}?content_type_id={{ content_type_id }}&field_name={{ widget.name }}&search_type={{ widget_type }}"
        hx-trigger="keyup changed delay:500ms"
        hx-target="#{{ widget.name }}_search"
        hx-swap="innerHTML"
        {% if widget.value != None and widget_type == 'fk' %}value="{{ selected_object }}"{% endif %}
    >
    <ul class="dropdown-menu">
        <div id="{{ widget.name }}_search">
            {% include "components/fk_search_results.html" with field_name=widget.name type=widget_type %}
        </div>
        <li><hr class="dropdown-divider"></li>
        <li>
            <a 
                class="dropdown-item showmodal" 
                type="button"
                data-show-modal="{{ advanced_search_modal_id }}"
                data-bs-target="#{{ advanced_search_modal_id }}"
                hx-get="{% url 'components_datatable_and_filter' %}?content_type_id={{ content_type_id }}&include_actions=false"
                hx-target="[id='{{ widget.name }}_advanced_search_table']"
                hx-swap="innerHTML"
                hx-trigger="click"
                onclick="addClickableEventListener('{{ widget.name | escapejs }}', '{{ widget_type }}')"
                >Advanced search
            </a>
        </li>
        <li>
            <a 
                class="dropdown-item showmodal" 
                type="button"
                data-show-modal="{{ create_modal_id }}"
                hx-get="{% url 'components_object_model_form' %}?content_type_id={{ content_type_id }}&form_prefix={{ create_modal_id }}"
                hx-target="[id='{{ create_modal_id }}_body']"
                hx-trigger="click"
                hx-swap="innerHTML"
                >Create new item
            </a>
        </li>
    </ul>
</div>

<div class="label-container my-2" id="{{ widget.name }}_view_div">
    {% if widget_type == 'm2m' %}
        {% for choice in selected_choices %}
            <span class="badge label-span" id="{{widget.name}}_span_{{choice.pk}}" onclick="removeM2M('{{ widget.name }}', '{{choice.pk}}')">{{ choice }}</span>
        {% endfor %}
    {% else %}
        <span class="badge label-span" id="{{widget.name}}_span_{{choice.pk}}" onclick="removeForeignKey('{{ widget.name | escapejs }}')">{{ selected_object }}</span>
    {% endif %}
</div>


<!-- ADVANCED SEARCH MODAL -->
<div
    class="modal fade"
    id="{{ advanced_search_modal_id }}"
    aria-hidden="true"
    tabindex="-1"
>
    <div
        class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl"
    >
        <div
            class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">
                    Advanced search
                </h5>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>
            </div>
            <div class="modal-body">
                <div id="{{ widget.name }}_advanced_search_table">
                    <!-- The table will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
<!-- END ADVANCED SEARCH MODAL -->

<!-- CREATE NEW ITEM MODAL -->
<div
    class="modal fade"
    id="{{ create_modal_id }}"
    aria-hidden="true"
    tabindex="-1"
>
    <div
        class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg"
    >   
        
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    Create new item
                </h5>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>
            </div>
             
            {% csrf_token %}
            
            <div class="modal-body" id="{{ create_modal_id }}_body">
                <!-- The form will be loaded here -->
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                    onclick="document.getElementById('{{ create_modal_id }}_body').innerHTML = '';"
                >
                    Close
                </button>
                <button 
                    hx-post="{% url 'components_object_model_form' %}?content_type_id={{ content_type_id }}&form_prefix={{ create_modal_id }}"
                    hx-target="#{{ create_modal_id }}_body" 
                    hx-include="#{{ create_modal_id }}_body"
                    hx-encoding="multipart/form-data"
                    hx-on::after-request="setNewObject('{{ widget.name }}', '{{ create_modal_id }}_new_object', '{{ widget_type }}')"
                    hx-swap="innerHTML"
                    class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- END CREATE NEW ITEM MODAL -->


<style>
    .dropdown-menu-scrollable {
        z-index: 1000;
        max-height: 300px;
    }
</style>