{% 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" id="sbzone-list">
                        <div class="row"><!-- invoice list -->
                            <div class="col-12">
                                <div class="Text mt-2 mb-2">
                                    <div class="Size-2 Bold">
                                        Sectorisation
                                        <button class="float-right btn btn-primary" onclick="addDocument()">Action
                                        </button>
                                    </div>
                                </div>
                            <!-- create invoice button-->
                            <!-- Options and filter dropdown button-->
                                <div class="table-responsive" style="height: 650px !important;">
                                    <table id="sectors" class="table table-striped compact w-100">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Région</th>
                                            <th>Entreprises actives</th>
                                            <th>Volume traité</th>
                                            <th>Nombre de CPs</th>
                                            <th>Responsable Secteur</th>
                                            <th>Animation Réseau</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for sbzone in sbZones %}
                                            <tr onclick="displaySbZoneInformation('{{ sbzone.id }}')">
                                                <td><span>{{ sbzone.zone }}</span></td>
                                                <td><span>{{ sbzone.district }}</span></td>
                                                <td><span>{{ sbzone.agencyTotal }}</span></td>
                                                <td><span>{{ sbzone.volumeTotal }}</span></td>
                                                <td><span>{{ sbzone.cpTotal }}</span></td>
                                                <td><span>{{ sbzone.sectorName }}</span></td>
                                                <td><span>{{ sbzone.networkName }}</span></td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="sbzone-info" class="h-100" style="display: none">
                        <div class="row h-100">
                            <div class="col-12">
                                <div class="Text mt-5 mb-2">
                                    <div class="Size-2 Bold">
                                        <i class="bx bx-arrow-back Size-2"
                                                           onclick="backToList()"></i>Sectorisation
                                        <button class="btn btn-primary ml-2" id="btnEditMode"
                                                onclick="getEditionMode()">Modifier
                                        </button>
                                        <button style="display: none" class="btn btn-primary float-right"
                                                id="btnSave" onclick="getSelectedActivities()">Enregistrer
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 h-75">
                                <div class="Text row h-100">
                                    <div class="col-12 h-50">
                                        <div class="center-vertical">
                                            <div class="Size-2 d-flex py-2">
                                                <div>Secteur</div>
                                                <div id="sbZone_zone" class="ml-50"></div>
                                            </div>
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="Size-4 w-100">
                                                            Région
                                                            <div id="sbZone_district" class="float-right"></div>
                                                        </div>
                                                        <div class="Size-4 w-100">
                                                            Entreprises actives sur le secteur
                                                            <div id="sbZone_agencyTotal" class="float-right"></div>
                                                        </div>
                                                        <div class="Size-4 w-100">
                                                            Volume de missions traitées
                                                            <div id="sbZone_volumeTotal" class="float-right"></div>
                                                        </div>
                                                        <div class="Size-4 w-100">
                                                            Nombre de CPs
                                                            <div id="sbZone_cpTotal" class="float-right"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 h-50">
                                        <div class="Size-2 d-flex py-2">
                                            <div>Responsables</div>
                                            <div id="sbZone_zone" class="ml-50"></div>
                                        </div>
                                        <div class="container-fluid">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="Size-4 w-100">
                                                        Responsable itinérant
                                                        <div id="sbZone_manager_sector" class="float-right"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="Size-4 w-100">
                                                        Responsable Animation réseau
                                                        <div id="sbZone_manager_network" class="float-right"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 h-75">
                                <div id="info-department" class="text-center Black Bold" style="height: 10%">
                                    </div>
                                <div id="map" class="w-100" style="height: 90%">
                                    {% include '/include/map.html.twig' %}
                                </div>
                            </div>
                        </div>
                    </div>
                </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 sbzone_id = 0;
        let selectedSbZone = null;

        $(".department").on("click", function (event) {
            var text = "";
            let reformedValue = ""
            {% for sbzone in listSbZones %}
                reformedValue = "{{ sbzone.name }}".split(' ').join('-').replace('&#039;', "'");
                if (event.target.getAttribute('name') === "{{ sbzone.name }}" || event.target.getAttribute('name') === reformedValue) {
                   text = reformedValue + "{{ ' - ' ~ sbzone.department ~ ' - Secteur ' ~ sbzone.zone }}"
                }
            {% endfor %}

            $("#info-department").text(text);
        });

        function displaySbZoneInformation(id) {
            sbzone_id = id;
            document.getElementById("sbzone-list").style.display = "none";
            document.getElementById("sbzone-info").style.display = "block";
            {% for sbzone in sbZones %}
            if ("{{ sbzone.id }}" == id) {
                selectedSbZone = {
                    zone: "{{ sbzone.zone }}",
                    district: "{{ sbzone.district }}",
                    agencyTotal: "{{ sbzone.agencyTotal }}",
                    volumeTotal: "{{ sbzone.volumeTotal }}",
                    cpTotal: "{{ sbzone.cpTotal }}",
                    networkName: "{{ sbzone.networkName }}",
                    sectorName: "{{ sbzone.sectorName }}"
                };
            }
            {% endfor %}
            document.getElementById("sbZone_zone").innerText = selectedSbZone.zone;
            document.getElementById("sbZone_district").innerText = selectedSbZone.district;
            document.getElementById("sbZone_agencyTotal").innerText = selectedSbZone.agencyTotal;
            document.getElementById("sbZone_volumeTotal").innerText = selectedSbZone.volumeTotal;
            document.getElementById("sbZone_cpTotal").innerText = selectedSbZone.cpTotal;
            document.getElementById("sbZone_manager_sector").innerText = selectedSbZone.sectorName;
            document.getElementById("sbZone_manager_network").innerText = selectedSbZone.networkName;
            document.getElementById("info-department").innerText = "Secteur " + selectedSbZone.zone;

            {% for sbzone in listSbZones %}
            if ("{{ sbzone.zone }}" === selectedSbZone.zone) {
                let value = "{{ sbzone.name }}".split(' ').join('-').replace('&#039;', "'");
                if ($("[name='{{ sbzone.name }}']").length !== 0) {
                    $("[name='{{ sbzone.name }}']").css("fill", "var(--color-red-secondary)")
                } else if (document.getElementsByName(value).length !== 0) {
                    document.getElementsByName(value)[0].style.fill = "var(--color-red-secondary)";
                }
            } else {
                let value = "{{ sbzone.name }}".split(' ').join('-').replace('&#039;', "'");
                if ($("[name='{{ sbzone.name }}']").length !== 0) {
                    $("[name='{{ sbzone.name }}']").css("fill", "var(--color-grey-darked)")
                } else if (document.getElementsByName(value).length !== 0) {
                    document.getElementsByName(value)[0].style.fill = "var(--color-grey-darked)";
                }
            }
            {% endfor %}

        }

        function backToList() {
            document.getElementById("sbzone-list").style.display = "block";
            document.getElementById("sbzone-info").style.display = "none";
        }

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


        $(document).ready(function () {
            var table = $("#sectors").DataTable({
                "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
                iDisplayLength: -1,
                "lengthChange": false,
                paging: true,
                fixedColumns: {
                    leftColumns: 1,
                    rightColumns: 1
                },
                fixedHeader: true,
                "sScrollY": "500px",
                "pageLength": 10,
                info: false,
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
                },
                columnDefs: [
                    {
                        targets: "_all",
                        className: 'text-center',
                    },
                    {
                        targets: "_all",
                        className: 'dt-head-center',
                    },
                ],
            });


            displayOn();

        });
    </script>

{% endblock %}