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

{% block title %}admin - CompanyInformation{% endblock %}

{% block body %}

    <div id="loader">
        <div class="loader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    </div>
    <div id="management" class="Page">
        <div>
            {% include '/management/top_menu.html.twig' %}
        </div>
        {% 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="container-fluid h-100">
            <div class="row h-100">
                {% include '/management/Admin/vertical_menu.html.twig' %}
                <div class="col-10" style="background: var(--color-grey-light)">
                    <div class="container-fluid p-2 w-100 h-100">
                        <div class="row"><!-- invoice list -->
                            <div class="col-12">
                                <div class="Text mt-2 mb-2">
                                    <div class="Size-2 Bold">
                                        Contact de la société
                                         <button class="btn btn-primary ml-2" id="btnEditMode" onclick="getEditionMode()">Modifier</button>
                                        <button class="float-right btn btn-primary" id="btnSave" style="display: none" onclick="saveEdition()">Enregistrer
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% if me.getRoles()[0] <= 'ROLE_SYMA' and id == me.company.id %}
                            <div class="row Black py-2">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div>
                                        <p class="Size-3 Bold">Direction et responsables</p>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Dirigeant</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Responsable commercial</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Responsable administratif</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Responsable outil</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Responsable opérationnel</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row Black">
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div>
                                        <p class="Size-3 Bold">Animation Réseau</p>
                                        {% for sbzone in sbZones %}
                                            <div class="d-flex mt-1 mb-1">
                                                <div>{{ "Secteur " ~ sbzone.zone }}</div>
                                                <div class="ml-auto mr-0 cursor-pointer">
                                                    <select class="select2 form-control" id="select-network-{{ sbzone.id }}">
                                                    <option value="0"></option>
                                                        {% for gestionnary in gestionnaries %}
                                                                {% if gestionnary.id == sbzone.networkID %}
                                                                    <option value="{{ gestionnary.id }}" selected>{{ gestionnary.username }}</option>
                                                               {% else %}
                                                                   <option value="{{ gestionnary.id }}">{{ gestionnary.username }}</option>
                                                               {% endif %}
                                                        {% endfor %}
                                                    </select>
                                                 </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div>
                                        <p class="Size-3 Bold">Responsable Secteur</p>
                                        {% for sbzone in sbZones %}
                                            <div class="d-flex mt-1 mb-1">
                                                <div>{{ "Secteur " ~ sbzone.zone }}</div>
                                                <div class="ml-auto mr-0 cursor-pointer">
                                                    <select class="select2 form-control" id="select-sector-{{ sbzone.id }}">
                                                    <option value="0"></option>
                                                        {% for gestionnary in gestionnaries %}
                                                                {% if gestionnary.id == sbzone.sectorID %}
                                                                    <option value="{{ gestionnary.id }}" selected>{{ gestionnary.username }}</option>
                                                               {% else %}
                                                                   <option value="{{ gestionnary.id }}">{{ gestionnary.username }}</option>
                                                               {% endif %}
                                                        {% endfor %}
                                                    </select>
                                                 </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <div class="row">
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div>
                                        <p class="Size-3 Black">Contact du siège social</p>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Dirigeant</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Contact commercial</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Contact administratif</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Contact outil</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Contact mission</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div>
                                        <p class="Size-3 Black">Contact Agence X</p>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Dirigeant</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Contact commercial</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Contact administratif</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Contact outil</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                        <div class="d-flex mt-1 mb-1">
                                            <div>Contact mission</div>
                                            <div class="ml-auto mr-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                    </section>
                </div>
            </div>
        </div>
        <div id="dialog" title="Confirmation" class="jquery_dialog">
            <p>Souhaitez-vous annuler les modifications ?</p>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script>
        let readonly = true;

        function readOnly()
        {
            var net;
            var sec;
             {% for sbzone in sbZones %}
                $("#select-sector-" + "{{ sbzone.id }}").attr("disabled", readonly);
                $("#select-network-" + "{{ sbzone.id }}").attr("disabled", readonly);
            {% endfor %}

        }

        function resetInformations()
        {
            var networkArray = {};
            var sectorArray = {};
            var sec;
            var net;
            {% for sbzone in sbZones %}
                $("#select-sector-" + "{{ sbzone.id }}").val("0");
                $("#select-network-" + "{{ sbzone.id }}").val("0");
                {% for gestionnary in gestionnaries %}
                    {% if gestionnary.id == sbzone.sectorID %}
                        $("#select-sector-" + "{{ sbzone.id }}").val("{{ gestionnary.id }}");
                    {% endif %}
                    {% if gestionnary.id == sbzone.networkID %}
                        $("#select-network-" + "{{ sbzone.id }}").val("{{ gestionnary.id }}");
                   {% endif %}
                {% endfor %}
            {% endfor %}
        }

        function getEditionMode()
        {
            event.preventDefault(); // prevent page from redirecting
            readonly = !readonly;
            if ( $("#btnEditMode").text() == "Annuler") {
                $( "#dialog" ).css("display", "block");
                $( "#dialog" ).dialog({
                    resizable: false,
                    height: "auto",
                    width: 400,
                    modal: true,
                    buttons: {
                        "Oui": function () {
                            $(this).dialog("close");
                            $("#btnEditMode").text("Modifier");

                            if (readonly === false)
                                $("#btnSave").css('display', "block");
                            else
                                $("#btnSave").css('display', "none");
                            readOnly();
                            resetInformations();
                        },
                        "Non": function () {
                            $(this).dialog("close");
                        }
                    }
                });
            }
            else {
                $("#btnEditMode").text("Annuler");
                if (readonly == false)
                    $("#btnSave").css('display', "block");
                else
                    $("#btnSave").css('display', "none");
                readOnly();
            }
        }

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

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

        function saveEdition()
        {
            displayOff();
            var networkArray = {};
            var sectorArray = {};
            var sec;
            var net;
            {% for sbzone in sbZones %}
                sec = document.getElementById("select-sector-" + "{{ sbzone.id }}");
                net = document.getElementById("select-network-" + "{{ sbzone.id }}");
                sectorArray["{{ sbzone.zone }}"] = sec.options[sec.selectedIndex].value;
                networkArray["{{ sbzone.zone }}"] = net.options[net.selectedIndex].value;
            {% endfor %}

             $.ajax({
                method: "POST",
                url: "{{ path("sbZoneManagement") }}",
                data: {
                    networkArray: networkArray,
                    sectorArray: sectorArray,
                },
                async: true,
                success: function(response) {
                    location.reload();
                }
            })
        }

        $(document).ready(function () {
            readOnly();
            displayOn();
        });
    </script>

{% endblock %}