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

{% block title %}searchResults{% 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="" id="searchResult">
            <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>
            {% if agencies|length < 1 %}
                <section class="ml-auto mr-auto width-95-per">
                    <div class="mt-5 mb-2 ml-2">
                        <h4 class="page-title">Aucune entreprise ne correspond à votre recherche dans ce secteur</h4>
                    </div>
                </section>
            {% else %}

                <section class="ml-auto mr-auto width-95-per">
                    <div class="mt-5 mb-2 ml-2">
                        <h4 class="page-title">Entreprises</h4>
                    </div>
                    <!-- create invoice button-->
                    <!-- Options and filter dropdown button-->
                    <div class="table-responsive">
                        <table class="table dt-responsive nowrap" style="width:100%">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th style="width: 8vw">ID</th>
                                <th style="width: 8vw">Nom</th>
                                <th style="width: 8vw">Corps de métier</th>
                                <th style="width: 8vw">Zones d'interventions</th>
                                <th style="width: 8vw">Contrat</th>
                                <th style="width: 8vw">Score</th>
                                <th style="width: 8vw">Volume Restant</th>
                                {% if missionStored != null %}
                                    <th style="width: 8vw">Action</th>
                                {% endif %}
                            </tr>
                            </thead>
                            <tbody>
                            {% for agency in agencies %}
                                <tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapse{{ agency.id }}">
                                    <td class="expand-button"></td>
                                    <td><span class="text-nowrap">{{ agency.getId() }}</span></td>
                                    <td>
                                        <a href="{{ path('agency_details', { id: agency.id }) }}" class="cursor-pointer">
                                            <span class="text-nowrap">{{ agency.getCompany() != null ? agency.getCompany().getName() : agency.getName() }}</span>
                                        </a>
                                    </td>
                                    <td>
                                            <span class="text-nowrap">
                                                {% set entry = 0 %}
                                                {% for ca in agency.companyActivities %}
                                                    {% for type in inputType %}
                                                        {% if ca.activity.code == type %}
                                                            {% set entry = 1 %}
                                                        {% endif %}
                                                    {% endfor %}
                                                    {% if entry == 1 %}
                                                        {% set entry = 0 %}
                                                        <b>{{ ca.activity.name }}</b>
                                                    {% endif %}
                                                {% endfor %}
                                            </span>
                                    </td>
                                    <td>
                                            <span class="text-nowrap">
                                                {% set break = false %}
                                                {% for zone in agency.getInterventionZoneCode() if not break %}
                                                    {% if zone.postcode == inputWhere  %}
                                                        <b>{{ zone.postcode }}</b>
                                                    {% set break = true %}
                                                     {% elseif inputWhere in zone.postcode|slice(0, 2)|raw %}
                                                        <b>{{ zone.postcode|slice(0, 2)|raw }}</b>
                                                        {% set break = true %}
                                                    {% endif %}
                                                {% endfor %}
                                            </span>
                                    </td>
                                    <td>
                                            <span class="text-nowrap">
                                                {{ agency.volume != null ? agency.volume.type : "" }}
                                            </span>
                                    </td>
                                    <td>
                                            <span class="text-nowrap">
                                                {% set scorings = agency.getRanks() %}
                                                {% for scoring in scorings %}
                                                    {{ scoring.score }}
                                                {% endfor %}
                                            </span>
                                    </td>
                                    <td>
                                            <span class="text-nowrap">
                                                {{ agency.volume != null ? agency.volume.Contract - agency.volume.totalDone : "" }}
                                            </span>
                                    </td>
                                    {% if missionStored != null %}
                                        <td>
                                            <div id="{{ agency.id }}" class="invoice-action">
                                                <a class="invoice-action-edit cursor-pointer" onclick="assignToMission('{{ agency.id }}')">
                                                    <i class="bx bx-edit" style="color: green"></i>
                                                </a>
                                            </div>
                                        </td>
                                    {% endif %}
                                </tr>
                                <tr class="hide-table-padding">
                                    <td colspan="4">
                                        <div id="collapse{{ agency.id }}" class="collapse in">
                                            {% set entry = 0 %}
                                            {% for ca in agency.getCompanyActivities() %}
                                                {% for type in inputType %}
                                                    {% if ca.activity.code == type %}
                                                        {% set entry = 1 %}
                                                    {% endif %}
                                                {% endfor %}
                                                {% if entry == 1 %}
                                                    {% set entry = 0 %}
                                                    <b>{{ ca.activity.name }}</b>
                                                {% else %}
                                                    {{ ca.activity.name }}
                                                {% endif %}
                                                {{ not loop.last ? ',' }}
                                            {% endfor %}
                                        </div>
                                    </td>
                                    <td colspan="5">
                                        <div id="collapse{{ agency.id }}" class="collapse in">
                                            {% for zone in agency.getInterventionZoneCode() %}
                                                {% if zone.postcode == inputWhere %}
                                                    <b>{{ zone.postcode }}</b>
                                                {% elseif inputWhere in zone.postcode|slice(0, 2)|raw %}
                                                    <b>{{ zone.postcode|slice(0, 2)|raw }}</b>{{zone.postcode|slice(2, zone.postcode|length)|raw}}
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </section>
            {% endif %}
        </div>
        <div id="dialog-confirm" class="jquery_dialog" title="Ajouter des documents">
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script type="text/javascript" class="code-js">

        var activity = [];

        function hideCollapsed() {

        }

        $("td a").click(function (event) {
            event.stopPropagation();
        });

        function assignToMission(id)
        {
            console.log("oui");
            $("#dialog-confirm").css.display = "block";
            $("#dialog-confirm" ).dialog({
                resizable: false,
                height: "auto",
                width: "fit-content",
                modal: true,
                buttons: {
                    "Assigner et rester": function() {
                        displayOff();
                        $.ajax({
                            method: "POST",
                            url: "{{ path('assign_to_mission') }}",
                            data: {
                                agencyID: id,
                                activities: activity
                            },
                            success: function (responses) {
                                window.location.reload();
                            },
                        })
                        displayOn();
                    },
                    "Assigner et retourner à la mission": function() {
                        displayOff();
                        $.ajax({
                            method: "POST",
                            url: "{{ path('assign_to_mission') }}",
                            data: {
                                agencyID: id,
                                activities: activity
                            },
                            success: function (responses) {
                                let link = "{{ path("missionIntervention", { id : "ID" }) }}";
                                link = link.replace('ID', responses);
                                window.location.replace(link);
                            },
                        })
                        $( this ).dialog( "close" );
                    },
                }
            });
        }

        function displayOff() {
            document.getElementById("loader").style.display = "block";
        }

        function displayOn() {
            document.getElementById("loader").style.display = "none";
            document.getElementById("Page").style.display = "flex";
        }

        $(document).ready(function () {
            $('.collapse').collapse
            $('.dropdown-toggle').dropdown();

            function matchCustom(params, data) {

                let scrollRight = document.getElementById("select2-demo-container");
                scrollRight.scrollLeft = scrollRight.scrollWidth - scrollRight.clientWidth;

                // If there are no search terms, return all of the data
                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().indexOf(params.term.toUpperCase()) > -1) {
                    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().indexOf(params.term.toUpperCase()) > -1) {
                    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'
            });

            {% for item in inputType %}
            activity.push("{{ item }}");
            {% endfor %}


            displayOn();
        });
    </script>

{% endblock %}