{% extends 'base.html.twig' %}

{% block title %}search{% endblock %}

{% block body %}

    {% include '/loader/loader.html.twig' %}
    <div id="Page" class="Page">
        {% for message in app.flashes('success') %}
            <div class="alert alert-success position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        <div class="w-100 home_step1_background FS-Page" id="searchHome">
            <div class="w-75 h-100 ml-auto mr-auto center-vertical">
                <div class="px-4">
                    <div class="Size-lg-5 White">Rechercher une entreprise au sein de notre réseau Symabat</div>
                </div>
                <div class="p-1"></div>
                <form class="px-4 w-100">
                    <div class="d-flex" style="height: 6rem;">
                        <div class="d-flex float-left" style="width: 50rem; height: auto">
                            <div class="d-flex" style="width: 40%">
                                <div class="selector center-vertical" style="width: 20%">
                                    <i class="bx bxs-wrench icon h-auto"></i>
                                </div>
                                <select type="search" id="demo" name="inputType[]"
                                        class="form-control"
                                        style="width: 80%; border-bottom-left-radius: 100px; border-top-left-radius: 100px; font-size: 1vw !important;"
                                        required autocomplete="off" multiple="multiple">
                                    {% set entry = 0 %}
                                    {% for item in activities %}
                                        {% for value in inputType %}
                                            {% if item.code == value %}
                                                {% set entry = 1 %}
                                            {% endif %}
                                        {% endfor %}
                                        {% if entry == 1 %}
                                            <option value="{{ item.code }}" selected>{{ item.name }}</option>
                                        {% else %}
                                            <option value="{{ item.code }}">{{ item.name }}</option>
                                        {% endif %}
                                        {% set entry = 0 %}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="input-icons px-1 center-vertical" style="width: 30%">
                                <i class="bx bxs-map icon h-auto p-1"></i>
                                <input type="search" class="form-control form-control-lg home-step1-input-field home_step_1_search_bar_item_txt" id="sbwhere"
                                       placeholder="Où ?" name="inputWhere" value="{{ inputWhere }}"
                                       style="border-radius: 0;" required/>
                            </div>
                            <button class="btn btn-primary search-btn m-0 p-0 d-flex shadow home_step1_search_bar_item" type="submit"
                                    style="width: 30%; border-bottom-right-radius: 100px; border-top-right-radius: 100px; background: #ba0808 !important;">
                                <a class="float-left center-vertical home_step_1_search_bar_item_txt" id="startSearch"
                                   style="height: 100%; width: 75%; color:white">Rechercher</a>
                                <i class="bx bxs-right-arrow icon-btn float-right center-vertical"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script type="text/javascript" class="code-js">
        function displayOn()
        {
            document.getElementById("loader").style.display = "none";
            document.getElementById("Page").style.display = "flex";
        }

        $(document).ready(function() {
            String.prototype.isUpperCase = function() {
                return this.valueOf().toUpperCase() === this.valueOf();
            };

            function matchCustom(params, data) {
                // If there are no search terms, return all of the data
                let scrollRight = document.getElementById("select2-demo-container");
                scrollRight.scrollLeft = scrollRight.scrollWidth - scrollRight.clientWidth;

                if ($.trim(params.term) === '') {
                    return data;
                }

                // Do not display the item if there is no 'text' property
                if (typeof data.text === 'undefined') {
                    return null;
                }


                var modifiedData;

                // `params.term` should be the term that is used for searching
                // `data.text` is the text that is displayed for the data object

                if (data.id.toUpperCase().startsWith(params.term.toUpperCase()) === true) {
                    modifiedData = $.extend({}, data, true);

                    // You can return modified objects from here
                    // This includes matching the `children` how you want in nested data sets
                    return modifiedData;
                }
                else if (data.text.toUpperCase().startsWith(params.term.toUpperCase()) === true) {
                    modifiedData = $.extend({}, data, true);

                    // You can return modified objects from here
                    // This includes matching the `children` how you want in nested data sets
                    return modifiedData;
                }

                // Return `null` if the term should not be displayed
                return null;
            }


            function formatSelection(val) {
                return val.id;
            }

            $('#demo').select2({
                templateSelection: formatSelection,
                matcher: matchCustom,
                placeholder: 'Corps de métier',
            });

            displayOn();
        });


    </script>

{% endblock %}