{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as macro %}
{% import "forms-macro/dashboard_notification.html.twig" as notif %}

{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block head %}
    {{ parent() }}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="row col-sm-6 col-md-6 col-lg-6">
            <div class="containerChartAdmin">
                <canvas id="chartLine"></canvas>
            </div>
        </div>
        <div class="row rubrique col-sm-6 col-md-6 col-lg-6" style="max-height: 550px; margin-top: 15px">
            <div class="rubrique_titre">
                <span>Mes notifications</span>
            </div>
            <div id="notifDiv"
                 style="display: none;height: 400px;overflow: scroll !important;margin-bottom: 15px;overflow-x: hidden !important;"
                 class="col-sm-12 col-md-12 col-lg-12">
                <table id="notifsTable" class="hover row-border"
                       style="width:100%;">
                    <thead>
                    <tr>
                        <th>Type</th>
                        <th>Detail</th>
                        <th>Date</th>
                    </tr>
                    </thead>
                    <tbody id="notifsTableBody">
                    </tbody>
                </table>
            </div>
            <div id="loaderNotif" class="col-sm-12 col-md-12 col-lg-12"
                 style="display:block;text-align: center;width: 100%;margin-bottom: 15px;">
                <img src="{{ asset('images/loader-service.gif') }}" alt="Loader" style="width: 126px;"><br>
                <span style="color:grey"><i>Chargement...</i></span>
            </div>
        </div>
        <div class="row rubrique col-sm-12 col-md-12 col-lg-12">
            <div class="rubrique_titre">
                <span>Recherche une étude</span>
            </div>
            <div style="float: right;margin-right: 1%">
                <select id="stateFilter" style="width: 100px;float: right">
                    <option value="ib">Tous</option>
                    <option value="ib1" >IB1</option>
                    <option value="ib2" selected>IB2</option>
                </select>
            </div>
            <table id="projects-list-admin" class="row-border"
                   style="padding:1%;width:100%">
                <thead>
                <tr>
                    <th>Créer par</th>
                    <th>Client</th>
                    <th>Société</th>
                    <th>Nom projet</th>
                    <th>État</th>
                    <th>Numéro de l'étude</th>
                    <th>Créer le</th>
                    <th>Modifier le</th>
                    <th>Action</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    {{ macro.popup('danger','deleteProject',path('project_delete',{'id': 'IDPROJECTTOREMOVE'},'project','null','DELETE'),'projectDelete') }}
    <script type="application/javascript">
        $(document).ready(function () {
            $('#stateFilter').select2()
        });

        initProjectList();

        let params = {
            "order": [[7, "desc"]],
            searching: true,
            "columnDefs": [
                {"type": "date-euro", "targets": [6, 7]},
            ],
        };
        let paramsNotif = {
            "order": [[2, "desc"]],
            "columnDefs": [
                {"type": "date-euro", "targets": [2]},
            ],
        };
        //Ajout des trois colonnes non triable car le reload ajax n'est pas codé donc erreur dès le clique sur le trie d'une colonne
        initDatatable('#notifsTable', paramsNotif, [0, 1, 2], false, false);

        //// LINE CHART FOR PROJECT CREATION REPRESENTATION
        let maxNumbers = 10;
        let projectNumber = Object.values({{ nbProjectGroupByDate | json_encode | raw }});

        let forData = [];
        let forLabel = [];
        projectNumber.map((p) => {
            forData.push(p.nbProject);
            let day = p.day < 10 ? "0" + p.day : p.day;
            let month = p.month < 10 ? "0" + p.month : p.month;
            forLabel.push(day + "/" + month);
            p.nbProject >= maxNumbers ? maxNumbers = Math.round(p.nbProject * 1.3) : null;
        })
        const data = {
            labels: forLabel,
            datasets: [
                {
                    label: "Nombre d'études réalisées",
                    backgroundColor: 'transparent',
                    borderColor: '#3b4f76',
                    data: forData,
                    tension: 0.2
                }
            ]
        };
        const config = {
            type: 'line',
            data: data,
            options: {
                scales: {
                    y: {
                        min: 0,
                        max: maxNumbers,
                        ticks: {
                            stepSize: Math.round(maxNumbers / 5),
                        },
                    },
                },
            },
        };

        const chart = new Chart(
            $('#chartLine'),
            config
        );

        $('#notifsTableBody').empty();

        const request = new Request("{{ path('check_if_brands_are_broken') }}", {
            method: 'GET',
            // body: JSON.stringify("test"),
            headers: {
                'Content-Type': 'application/json'
            }
        });
        let controller = new AbortController();
        let signal = controller.signal;
        $("#loaderNotif").show();
        $("#notifDiv").hide();
        fetch(request, {signal})
            .then(async function (response) {
                let data = await response.json();
                $('#notifsTableBody').empty();
                initNotifManufacturer(data.notifs);
                if (data.notifs.length === 0) {
                    $('#notifsTableBody').append('<tr> ' +
                        '<td colspan="3">Aucune donnée disponible dans le tableau</td>' +
                        '</tr>')
                }
            })
            .then(function (response) {
                $("#loaderNotif").hide();
                $("#notifDiv").show();
            })

        $(".stopAjax").on("click", function (e) {
            controller.abort();
        })

        function initNotifManufacturer(brands) {
            brands.map((b) => {
                let sentence = 'La marque <a href="/brand/' + b.id + '/edit">' + b.libelle + '</a> est associé a aucun fabricant.'
                let title = 'Marque sans fabricant';
                if ('manufacturers' in b) {
                    sentence = 'La marque <a href="/brand/' + b.id + '/edit">' + b.libelle + '</a> est associé à plusieurs fabricants : ' + b.manufacturers + '.'
                    title = 'Fabricant Multiple';
                }

                $('#notifsTableBody').append('<tr> ' +
                    '<td>' + title + '</td>' +
                    '<td>' + sentence + '</td>' +
                    '<td>' + new Date().toISOString().split('T')[0] + '</td>' +
                    '</tr>')
            })
        }
        function initDeleteProjectForm(projectId) {
            let url = '{{ path("project_delete", {'id': 'project_id'}) }}';
            url = url.replace("project_id", projectId);
            $("#deleteProject")[0].action = url;
        }
        function initProjectList() {
            let dt = $('#projects-list-admin').DataTable({
                "processing": true,
                "serverSide": true,
                responsive: true,
                searching: true,
                "ajax": {
                    "url": "{{ path('project_datatable') }}",
                    "data": function (d) {
                        d.stateFilter = $('#stateFilter').val();
                    }
                },
                "infoCallback": function (settings, start, end, max, total, pre) {
                    if (total === 0) {
                        createToast("danger", "Aucune étude n'a été trouvée");
                    }
                    return null;
                },
                orderMulti: false,
                "bLengthChange": false,
                info: true,
                paging: true,
                language: {
                    url: '/localisation/fr_FR.json'
                },
                order: [[7, "desc"]],
                deferRender: true,
                columns: [
                    {
                        data: "createdBy",
                        name: "createdBy",
                        orderable: false,
                        render: function (data, type, full, meta) {
                            return '<strong>' + data + '</strong>';
                        }
                    },
                    {
                        data: "finalCustomer",
                        name: "finalCustomer",
                        orderable: false,
                        render: function (data, type, full, meta) {
                            return '<strong>' + data + '</strong>';
                        }
                    },
                    {
                        data: "societe",
                        name: "societe",
                        orderable: false,
                        render: function (data, type, full, meta) {
                            return '<strong>' + data + '</strong>';
                        }
                    },
                    {
                        data: "projectName",
                        name: "projectName",
                        orderable: false,
                        render: function (data, type, full, meta) {
                            return '<strong>' + data + '</strong>';
                        }
                    },
                    {
                        data: "state",
                        name: "state",
                        orderable: false,
                        render: function (data, type, full, meta) {
                            return '<strong>' + data + '</strong>';
                        }
                    },
                    {
                        data: "id",
                        name: "id",
                        orderable: false,
                        render: function (data, type, full, meta) {
                            return '<strong>' + data + '</strong>';
                        }
                    },
                    {
                        data: "createdAt",
                        name: "createdAt",
                        orderable: true,
                        render: function (data, type, full, meta) {
                            return '<strong>' + data + '</strong>';
                        }
                    },
                    {
                        data: "updatedAt",
                        name: "updatedAt",
                        orderable: true,
                        render: function (data, type, full, meta) {
                            return '<strong>' + data + '</strong>';
                        }
                    },
                    {
                        data: "id",
                        name: "id_action",
                        data2: "state",
                        width: "5%",
                        orderable: false,
                        render: function (data, type, full, meta) {

                            let urlEditProject = '{{ path("project_edit", {'id': 'project_id'}) }}';
                            urlEditProject = urlEditProject.replace("project_id", full.id);

                            let code = '<a title="Consulter l\'étude"  style="cursor:pointer" href="' + urlEditProject + '">' +
                                '<img src="{{ asset('install-bois/icon/tab_action_consulter.png') }}"></a>';

                            code += '<a title="Supprimer l\'étude" style="cursor:pointer"  onclick="initDeleteProjectForm(' + full.id + ')" data-toggle="modal" data-target="#popup-danger-projectDelete">' +
                                '<img src="{{ asset('install-bois/icon/tab_action_supprimer.png') }}"></a>';

                            return code
                        },
                        createdCell: function (td, cellData, rowData, row, col) {
                            $(td).css('text-align', 'center');
                            $(td).addClass('centerBtn');
                        }
                    },
                ],
                "oLanguage": {
                    "sSearch": "Rechercher : "
                }
            });
            $('#stateFilter').on('change', function () {
                dt.ajax.reload(null, false);
            });
        }
    </script>
{% endblock %}