<!---
Description: This snippet is used to render the filter section of the list view. It includes the search bar, filter button, settings button, and save filter button.

Variables:
    - content_type_id: The id of the content type of the model being displayed.
    - application_fields: A list of fields of the model being displayed.
    - target: The id of the element that will be updated with the new content when the filter is applied.
    - include_actions: A boolean that indicates if the actions column should be included in the table.
    - initial_query: Initial query
    -->
{% load static %}
{% load bloomerp %}

<div class="d-flex justify-content-between">

    <div class="d-flex gap-2">
        <!-- Search -->
        <div class="d-flex">
            <input 
                type="text" 
                class="form-control form-control-sm" 
                placeholder="Search" 
                autocomplete="off"
                name="data_table_string_search"
                hx-get="{% url 'components_datatable' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions={{ include_actions }}{% if initial_query %}&{{initial_query}}{% endif %}"
                hx-target="#{{ datatable_id }}"
                hx-swap="innerHTML"
                hx-include="#filterForm{{ datatable_id }}"
                hx-trigger="keyup delay:500ms"
                >
        </div>
        <!-- End search -->
    </div>

    <div class="d-flex">

        <!--Toggle view button-->
        <div class="dropdown">
            <button
                    class="btn btn-borderless bg-transparent text-dark btn-sm"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <img src="{% static 'bloomerp/icons/eye.svg' %}" height="20" alt="Filter"/>
            </button>
        
            <div class="dropdown-menu">
                
                <a 
                    class="dropdown-item" 
                    href="#" 
                    data-bs-toggle="modal" 
                    data-bs-target="#calendarViewModal{{datatable_id}}">Calendar view</a>
            </div>
        </div>
        <!--End toggle view button-->

        <!-- Filter button -->
        <div class="dropdown">
            <button
                    class="btn btn-borderless bg-transparent text-dark btn-sm"
                    type="button"
                    data-bs-toggle="dropdown"
                    data-bs-auto-close="outside"
                    aria-expanded="false">
                    <img src="{% static 'bloomerp/icons/filter.svg' %}" height="20" alt="Filter"/>
            </button>
        
            <div class="dropdown-menu filter-dropdown-menu dropdown-menu-arrow" id="filterDropdown">
                <div 
                    id="filterForm{{ datatable_id }}"
                    >
                    <div
                        class="row justify-content-center align-items-center g-2"
                        id="filterInputContainer{{ datatable_id }}"
                        hx-get="{% url 'components_list_view_filter_inputs' %}?step=row&content_type_id={{ content_type_id }}"
                        hx-target="#filterInputContainer{{ datatable_id }}"
                        hx-swap="innerHTML"
                        hx-trigger="load"
                    >
                        
                    </div>

                    <hr>

                    <!-- Apply filters section -->
                    <div class="d-flex justify-content-between align-items-center">

                        <a 
                            href="#" 
                            class="d-flex align-items-center gap-1"
                            hx-get="{% url 'components_list_view_filter_inputs' %}?step=row&content_type_id={{ content_type_id }}"
                            hx-target="#filterForm{{ datatable_id }} .new-filter-input-row"
                            hx-swap="outerHTML"
                            >
                            <img src="{% static 'bloomerp/icons/add.svg' %}" height="16" alt="Add filter"/>
                            <span class="text-muted" style="font-size: 0.875rem;">Add new filter</span>
                        </a>

                        <div class="d-flex gap-2">
                            <button 
                                class="btn btn-sm btn-primary"
                                hx-get="{% url 'components_datatable' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions={{ include_actions }}"
                                hx-target="#{{ datatable_id }}"
                                hx-include="#filterForm{{ datatable_id }}"
                                hx-swap="innerHTML"
                                >
                                    Apply filter
                            </button>
                            <button 
                                class="btn btn-sm btn-secondary" 
                                type="button"
                                hx-get="{% url 'components_datatable' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions={{ include_actions }}"
                                hx-target="#{{ datatable_id }}"
                                hx-swap="innerHTML"
                                hx-trigger="click"
                                    >Remove filters
                            </button>
                        </div>
                    </div>
                    <!-- End apply filters section -->
                </div>
            </div>
        </div>
        <!-- End filter button -->
        
        <!-- Settings -->
        <div class="dropdown">
            <button
                    class="btn btn-borderless bg-transparent text-dark btn-sm"
                    type="button"
                    data-bs-toggle="dropdown"
                    data-bs-auto-close="outside"
                    aria-expanded="false">
                    <img src="{% static 'bloomerp/icons/dots.svg' %}" height="20" alt="Settings"/>
            </button>
        
            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <li>
                    <a 
                        class="dropdown-item" 
                        href="{% url 'users_my_profile_list_view_preference' %}?content_type_id={{ content_type_id }}&return_to={{ request.path }}">Select fields</a>
                    </li>
                <li><a 
                        class="dropdown-item btn"
                        hx-get="{% url 'components_datatable' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions=true&data_table_download=csv"
                        hx-include="#filterForm{{ datatable_id }}"
                        hx-swap="none"
                        hx-ext="htmx-download"
                        >Download csv
                    </a>
                </li>
                <li>
                    <a 
                        class="dropdown-item btn"
                        hx-get="{% url 'components_datatable' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions=true&data_table_download=xlsx"
                        hx-include="#filterForm{{ datatable_id }}"
                        hx-swap="none"
                        hx-ext="htmx-download"
                        >Download xlsx
                    </a>
                </li>
            </ul>
        </div>
        <!-- End Settings -->
    </div>
</div>


<!-- Modal Body -->
<div
    class="modal fade"
    id="calendarViewModal{{datatable_id}}"
    tabindex="-1"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    
    role="dialog"
    aria-labelledby="modalTitleId"
    aria-hidden="true"
>
    <div
        class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-sm"
        role="document"
    >
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    Calendar view
                </h5>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>
            </div>
            <div class="modal-body" id="calendarViewInputs{{datatable_id}}">
                <div class="mb-3">
                    <label for="start_date" class="form-label">Start Date Field</label>
                    <select class="form-select" name="data_table_calendar_view_fields">
                        {% for field in application_fields %}
                            {% if field.field_type == 'DateField' or field.field_type == 'DateTimeField' %}
                                <option value="{{ field.field }}">{{ field.field }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label for="end_date" class="form-label">End Date Field (Optional)</label>
                    <select class="form-select" name="data_table_calendar_view_fields">
                        {% for field in application_fields %}
                            {% if field.field_type == 'DateField' or field.field_type == 'DateTimeField' %}
                                <option value="{{ field.field }}">{{ field.field }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                    <div class="form-text">Specify the end date if you want see calendar date ranges.</div>
                </div>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    Close
                </button>
                <button
                    hx-get="{% url 'components_datatable' %}?data_table_content_type_id={{ content_type_id }}&data_table_include_actions={{ include_actions }}{% if initial_query %}&{{initial_query}}{% endif %}&data_table_view_type=calendar"
                    hx-include="#calendarViewInputs{{datatable_id}}"
                    hx-trigger="click"
                    hx-target="#{{datatable_id}}"
                    hx-swap="innerHTML"
                    class="btn btn-primary"
                    data-bs-dismiss="modal"
                    >Calendar view
                </button>
            </div>
        </div>
    </div>
</div>



<script>
    function removeFilterInputRow(element) {
        const filterInputRow = element.closest('.filter-input-row');
        filterInputRow.remove();
    }
</script>

