{% 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" id="establishment-list"><!-- invoice list -->
                            <div class="col-12">
                                <div class="Text mt-2 mb-2">
                                    <div class="Size-2 Bold">
                                        Liste des Etablissements
                                    </div>
                                </div>
                            </div>
                            <!-- create invoice button-->
                            <!-- Options and filter dropdown button-->
                            <div class="table-responsive">
                                <table id="establishment" class="table table-striped compact w-100">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Etablissement</th>
                                        <th>Voie</th>
                                        <th>Code Postal</th>
                                        <th>Ville</th>
                                        <th>Urgence</th>
                                        <th>Volume</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for agency in agencies %}
                                        <tr id="select-{{ agency.id }}"
                                            onclick=displayCompanyInformation("{{ agency.id }}")>
                                            <td><span class="">{{ agency.id }}</span></td>
                                            <td><span class="">{{ agency.name }}</span></td>
                                            <td><span class="">{{ agency.place.address }}</span></td>
                                            <td><span class="">{{ agency.place.postcode }}</span></td>
                                            <td><span class="">{{ agency.place.city }}</span></td>
                                            <td><input type="checkbox"></td>
                                            <td>
                                                <span class="">{{ agency.volume ? agency.volume.totalReceived ~ "/" ~ agency.volume.totalDone : "0/0" }}</span>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div id="establishment-info" style="display: none">
                            {{ form_start(form) }}
                            <div class="row">
                                <div class="col-12">
                                    <div class="Text mt-2 mb-2">
                                        <div class="Size-2 Bold"><i class="bx bx-arrow-back Size-2"
                                                               onclick="backToList()"></i>Fiche Etablissement
                                            <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-12 col-md-12 col-sm-12">
                                    <div class="Text row">
                                        <div class="col-6">
                                            <p class="Size-3 Black">Informations générales</p>
                                            <div class="d-flex mt-1 mb-1">
                                                <div>Identifiant établissement</div>
                                                <div class="ml-auto mr-0" id="establishment-card-0">
                                                </div>
                                            </div>
                                            <div class="d-flex mt-1 mb-1">
                                                <div>Etablissement</div>
                                                <div class="ml-auto mr-0" id="establishment-card-1">
                                                    {{ form_widget(form.agency) }}
                                                </div>
                                            </div>
                                            <div class="d-flex mt-1 mb-1">
                                                <div>Voie</div>
                                                <div class="ml-auto mr-0" id="establishment-card-2">
                                                    {{ form_widget(form.address) }}
                                                </div>
                                            </div>
                                            <div class="d-flex mt-1 mb-1">
                                                <div>Code Postal</div>
                                                <div class="ml-auto mr-0" id="establishment-card-3">
                                                    {{ form_widget(form.postcode) }}
                                                </div>
                                            </div>
                                            <div class="d-flex mt-1 mb-1">
                                                <div>Ville</div>
                                                <div class="ml-auto mr-0" id="establishment-card-4">
                                                    {{ form_widget(form.city) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <p class="Size-3 Black">Volumes Agence</p>
                                            <div class="d-flex mt-1 mb-1">
                                                <div>Volume contrat pour l'agence</div>
                                                <div class="ml-auto mr-0" id="establishment-card-6">
                                                </div>
                                            </div>
                                            <div class="d-flex mt-1 mb-1">
                                                <div>Volume reçu au global</div>
                                                <div class="ml-auto mr-0" id="establishment-card-7">
                                                </div>
                                            </div>
                                            <div class="d-flex mt-1 mb-1">
                                                <div>Volume Urgence reçu</div>
                                                <div class="ml-auto mr-0" id="establishment-card-8">
                                                </div>
                                            </div>
                                            <div class="d-flex mt-1 mb-1">
                                                <div>Volume Travaux reçu</div>
                                                <div class="ml-auto mr-0" id="establishment-card-9">
                                                </div>
                                            </div>
                                            <div class="d-flex mt-1 mb-1">
                                                <div>Volume Dépannage reçu</div>
                                                <div class="ml-auto mr-0" id="establishment-card-10">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="Text">
                                        <p class="Size-3 Black">Zones de couverture de l'établissement</p>
                                        <div class="row">
                                            <div class="d-flex mt-1 mb-1 col-6">
                                                <div>Zone d'intervention Classique</div>
                                                <div class="ml-auto mr-0" id="establishment-card-11">
                                                </div>
                                            </div>
                                            <div class="d-flex mt-1 mb-1 col-6">
                                                <div>Zone d'intervention Urgence</div>
                                                <div class="ml-auto mr-0" id="establishment-card-12">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="Text">
                                        <p class="Size-3 Black">Assignation des dossiers</p>
                                        <div class="row">
                                            <div class="d-flex mt-1 mb-1 col-6">
                                                <div>Dossiers de l'agence assignés à</div>
                                                <div class="ml-auto mr-0">
                                                    <select id="select_agency_member" class="form-control">
                                                        <option value="0">Non défini</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="Text">
                                        <p class="Size-3 Black">Définition des horaires d'urgence de l'établissement</p>
                                        <div onclick="getSlots()" id="weekly-schedule"></div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="Text">
                                        <p class="Size-3 Black">Définition des corps de métier de l'établissement</p>
                                        <section id="clients" class="ml-auto mr-auto width-95-per Black">
                                            <!-- create invoice button-->
                                            <!-- Options and filter dropdown button-->
                                            <div class="table-responsive" style="height: 650px !important;">
                                                <table id="establishment-activity" class="table table-striped compact w-100">
                                                    <thead>
                                                    <tr>
                                                        <th>Corps de métier</th>
                                                        <th>Classique</th>
                                                        <th>Urgence</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    {% for activity in activities %}
                                                        <tr id="{{ activity.id }}">
                                                            <td>{{ activity.name }}</td>
                                                            <td><input id="classic" type="checkbox"/></td>
                                                            <td><input id="emergency" type="checkbox"/></td>
                                                        </tr>
                                                    {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </div>
                            {{ form_end(form) }}
                        </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 AllCompanies = [];
        let selectedCompany = null;
        let save = [];
        let WS;
        let readonly = true;
        let agency_id = 0;
        var table2;

        function getSlots() {
            save = [];
            var days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
            let slot = $('#weekly-schedule').weekly_schedule("getSelectedHour");
            let y = 0;
            for (let i = 0; i < days.length; i++) {
                if (slot[i] != null) {
                    for (let j = 0; j < slot[i].length; j++) {
                        save[y] = days[i] + "-" + ((slot[i][j].className).split(' '))[1];
                        y++;
                    }
                }
            }
        }

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

        function getSelectedActivities() {
            var grid = document.getElementById("establishment-activity");

            //Reference the CheckBoxes in Table.
            var checkBoxes = grid.getElementsByTagName("INPUT");
            var classic = "";
            var emergency = "";

            //Loop through the CheckBoxes.
            for (var i = 0; i < checkBoxes.length; i++) {
                var row = checkBoxes[i].parentNode.parentNode;
                if (checkBoxes[i].checked && checkBoxes[i].id === "classic") {
                    {% for activity in activities %}
                    if ("{{ activity.name }}" === row.cells[0].innerText)
                        classic += "{{ activity.code }}; ";
                    {% endfor %}
                } else if (checkBoxes[i].checked && checkBoxes[i].id === "emergency") {
                    {% for activity in activities %}
                    if ("{{ activity.name }}" === row.cells[0].innerText)
                        emergency += "{{ activity.code }}; ";
                    {% endfor %}
                }
            }
            $("#agency_information_update_activitiesClassic").val(classic);
            $("#agency_information_update_activitiesEmergency").val(emergency);
            getSlots();
            $("#agency_information_update_emergencyHours").val(save.join());

            $("#agency_information_update_assignedUser").val($("#select_agency_member option:selected").val());


        }

        function readOnly() {
            $("#agency_information_update_agency").attr("readonly", readonly);
            $("#agency_information_update_address").attr("readonly", readonly);
            $("#agency_information_update_postcode").attr("readonly", readonly);
            $("#agency_information_update_city").attr("readonly", readonly);
            readonly === true ? $("#select_agency_member").attr("disabled", "disabled") : $("#select_agency_member").removeAttr("disabled");
            readonly === true ? $("#weekly-schedule").css('pointer-events', "none") : $("#weekly-schedule").css('pointer-events', "auto");
            readonly === true ? $("#establishment-activity").css('pointer-events', "none") : $("#establishment-activity").css('pointer-events', "auto");

        }

        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");
                            for (let i = 0; i < 24; i++) {
                                $(".Lun").children().eq(i).removeClass('selected');
                                $(".Mar").children().eq(i).removeClass('selected');
                                $(".Mer").children().eq(i).removeClass('selected');
                                $(".Jeu").children().eq(i).removeClass('selected');
                                $(".Ven").children().eq(i).removeClass('selected');
                                $(".Sam").children().eq(i).removeClass('selected');
                                $(".Dim").children().eq(i).removeClass('selected');

                            }
                            for (let i = 1; $('#' + i + ' #classic').length > 0; i++) {
                                $("#" + i + " #classic").prop("checked", false);
                                $("#" + i + " #emergency").prop("checked", false);
                            }
                            if (readonly == false)
                                $("#btnSave").css('display', "block");
                            else
                                $("#btnSave").css('display', "none");
                            readOnly();
                            displayCompanyInformation(agency_id);
                        },
                        "Non": function () {
                            $(this).dialog("close");
                        }
                    }
                });
            } else {
                $("#btnEditMode").text("Annuler");
                if (readonly == false)
                    $("#btnSave").css('display', "block");
                else
                    $("#btnSave").css('display', "none");
                readOnly();
            }
        }


        function displayCompanyInformation(id) {
            agency_id = id;
            document.getElementById("establishment-list").style.display = "none";
            document.getElementById("establishment-info").style.display = "block";
            let obj = null;
            {% for agency in agencies %}
            if ("{{ agency.id }}" == id) {
                selectedCompany = {
                    id: "{{ agency.id }}",
                    name: "{{ agency.name }}",
                    address: "{{ agency.place.address }}",
                    postcode: "{{ agency.place.postcode }}",
                    city: "{{ agency.place.city }}",
                    volumeContract: "{{ agency.volume ? agency.volume.Contract : "" }}",
                    volumeTotalReceived: "{{ agency.volume ? agency.volume.totalReceived : "" }}",
                    volumeEmergencyReceived: "{{ agency.volume ? agency.volume.emergencyReceived : "" }}",
                    volumeWorkReceived: "{{ agency.volume ? agency.volume.workReceived : "" }}",
                    volumeTroubleshootingReceived: "{{ agency.volume ? agency.volume.troubleshootingReceived : "" }}",
                    classicRange: "{{ agency.interventionZoneClassicRange > 0 ? agency.interventionZoneClassicRange : 0 }}",
                    emergencyRange: "{{ agency.interventionZoneEmergencyRange > 0 ? agency.interventionZoneEmergencyRange : 0 }}",
                };
                {% for users in agency.getAgencyParticipants() %}
                $("#select_agency_member").append(`<option value="{{ users.user.id }}" {{ agency.missionAssignTo != null and agency.missionAssignTo.id == users.user.id ? "selected" : "" }}>
                                       {{ users.user.username }}
                                  </option>`)
                {% endfor %}
                let val;
                {% for slots in agency.getAgencyEmergencyHours() %}
                if ("{{ slots.hours }}".length > 0) {
                    val = "{{ slots.hours }}".split(',');
                    for (let i = 0; i < val.length; i++) {
                        if ("{{ slots.day }}" === "Monday")
                            $(".Lun").children().eq(val[i]).addClass('selected');
                        else if ("{{ slots.day }}" === "Tuesday")
                            $(".Mar").children().eq(val[i]).addClass('selected');
                        else if ("{{ slots.day }}" === "Wednesday")
                            $(".Mer").children().eq(val[i]).addClass('selected');
                        else if ("{{ slots.day }}" === "Thursday")
                            $(".Jeu").children().eq(val[i]).addClass('selected');
                        else if ("{{ slots.day }}" === "Friday")
                            $(".Ven").children().eq(val[i]).addClass('selected');
                        else if ("{{ slots.day }}" === "Saturday")
                            $(".Sam").children().eq(val[i]).addClass('selected');
                        else if ("{{ slots.day }}" === "Sunday")
                            $(".Dim").children().eq(val[i]).addClass('selected');
                    }
                }
                {% endfor %}
                {% for ca in agency.getCompanyActivities() %}
                    {% if ca.emergency == 0 %}
                    $("#{{ ca.activity.id }} #classic").prop("checked", true);
                    {% else %}
                    $("#{{ ca.activity.id }} #emergency").prop("checked", true);
                    {% endif %}
                {% endfor %}
                table2.columns.adjust();
            }
            {% endfor %}
            document.getElementById("establishment-card-0").innerText = selectedCompany.id;
            $("#agency_information_update_agencyId").val(selectedCompany.id);
            $("#agency_information_update_agency").val(selectedCompany.name);
            $("#agency_information_update_address").val(selectedCompany.address);
            $("#agency_information_update_postcode").val(selectedCompany.postcode);
            $("#agency_information_update_city").val(selectedCompany.city);
            document.getElementById("establishment-card-6").innerText = selectedCompany.volumeContract;
            document.getElementById("establishment-card-7").innerText = selectedCompany.volumeTotalReceived;
            document.getElementById("establishment-card-8").innerText = selectedCompany.volumeEmergencyReceived;
            document.getElementById("establishment-card-9").innerText = selectedCompany.volumeWorkReceived;
            document.getElementById("establishment-card-10").innerText = selectedCompany.volumeTroubleshootingReceived;
            document.getElementById("establishment-card-11").innerText = selectedCompany.classicRange + " km";
            document.getElementById("establishment-card-12").innerText = selectedCompany.emergencyRange + " km";

            readOnly();
        }

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

        $(document).ready(function () {
            var table = $("#establishment").DataTable({
                iDisplayLength: -1,
                paging: false,
                info: false,
                "oLanguage": {
                    "sSearch": "Rechercher",
                    "emptyTable": "Aucune donnée disponible pour le moment"
                },
                columnDefs: [
                    {
                        targets: "_all",
                        className: 'text-center',
                    },
                    {
                        targets: "_all",
                        className: 'dt-head-center',
                    },
                ],
            });

            table2 = $("#establishment-activity").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,
                paging: false,
                fixedColumns: {
                    leftColumns: 1,
                    rightColumns: 1
                },
                fixedHeader: true,
                "sScrollY": "500px",
                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',
                    },
                ],
            });

            WS = $('#weekly-schedule').weekly_schedule({
                // Days displayed
                days: ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"],
                // Hours displyed
                hours: "00:00-23:00",
                // Font used in the component
                fontFamily: "Montserrat",
                // Font colot used in the component
                fontColor: "black",
                // Font weight used in the component
                fontWeight: "100",
                // Font size used in the component
                fontSize: "0.8em",
                // Background color when hovered
                hoverColor: "var(--color-red-primary)",
                // Background color when selected
                selectionColor: "#9aa7ee",
                // Background color of headers
                headerBackgroundColor: "transparent",
            });
            displayOn();


        });
    </script>

{% endblock %}