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

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

{% block javascripts %}
    <script type="text/javascript"
            src="{{ asset('install-bois/initDateTimeFormatDatatable.js') ~ "?rnd=" ~ random() }}"></script>
    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
          rel="stylesheet">
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Paramètres | Gérer les conduits
        </h4>
    </div>
{% endblock %}


{% block page_content %}
    {% set classListForSmartphone = is_granted('ROLE_TECHNICIEN') or is_granted('ROLE_REFERENT_TECHNICIEN') ? "hideOnSmartphone": "" %}

    <div class="container-fluid">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div>
                <div>
                    <a href="{{ path('products_ducts_create') }}">
                        <button type="button" class="boutonAction" style="float: right">
                            Créer un nouveau conduit
                        </button>
                    </a>
                </div>
                <table id="products-ducts-list" class="hover row-border" style="padding:1%;width:100%">
                    <thead>
                    <tr>
                        {% if not is_granted('ROLE_LECTURE_SEULE') %}
                            <th class="align_center" style="text-align: center">Actions
                            </th>
                        {% endif %}
                        <th class="align_center {{ classListForSmartphone }}" style="text-align: center">Numéro</th>
                        <th class="align_center {{ classListForSmartphone }}">Modifié le</th>
                        <th class="align_left {{ classListForSmartphone }}">Fabricant</th>
                        <th class="align_left">Marque</th>
                        <th class="align_left">Modèle</th>
                        <th class="align_left {{ classListForSmartphone }}">Type de conduit</th>
                        <th style="text-align: center" class="{{ classListForSmartphone }}">Version</th>
                        <th class="align_center" style="text-align: center">État</th>
                    </tr>
                    </thead>
                </table>
                <div class="box-footer"></div>
            </div>
        </div>
    </div>
    <div id="reservedPopupDiv">
        {{ include('products_ducts/_modal/_form_are_you_sur_delete_product_duct.html.twig') }}
        {{ include('products/_block/_form_add_or_update_product_comment.html.twig') }}
    </div>
    <script type="application/javascript">
        // DataTables initialisation
        let dt = $('#products-ducts-list').DataTable({
            "processing": true,
            "serverSide": true,
            responsive: true,
            searching: true,
            orderMulti: false,
            "bLengthChange": false,
            info: true,
            paging: true,
            language: {
                url: '/localisation/fr_FR.json'
            },
            order: [[1, "desc"]],
            "ajax": "{{ path('products_ducts_datatable_list') }}",
            "infoCallback": function (settings, start, end, max, total, pre) {
                if (total === 0) {
                    createToast("danger", "Aucun conduit n'a été trouvé");
                }
                return null;
            },
            "columnDefs": [
                {
                    "targets": "align_center",
                    createdCell: function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'center');
                        if (col === 7) {
                            switch (rowData.nameState) {
                                case 'in_progress':
                                    $(td).css('background-color', '#FCAF03');
                                    break;
                                case 'waiting_validation':
                                    $(td).css('background-color', '#FF6600');
                                    break;
                                case 'validated_ib':
                                case 'validated_company':
                                    $(td).css('background-color', '#47C7BB');
                                    break;
                                case 'waiting_archive':
                                    $(td).css('background-color', '#008080');
                                    break;
                                case 'archived':
                                case 'archived_for_new':
                                    $(td).css('background-color', '#7F3300');
                                    break;
                                case 'not_validated':
                                    $(td).css('background-color', '#CC0000');
                                    break;
                                default:
                                    $(td).css('background-color', '#BF9000');
                                    break;
                            }
                            $(td).css('color', 'white');
                        }
                    }
                },
            ],
            columns: [

                {
                    data: "id",
                    name: "action",
                    width: "5%",
                    orderable: false,
                    render: function (data, type, full, meta) {
                        {% set url = path("products_ducts_update", {'id': 'duct_id'}) %}
                        let url = '{{ url ~ "?rq=%brand" }}';
                        url = url.replace("duct_id", full.id);
                        url = encodeURI(url.replace("%brand", full.idMarque));

                        let urlConsult = '{{ path("products_devices_check", {'id': 'duct_id'}) }}';
                        urlConsult = urlConsult.replace("duct_id", full.id);

                        let code = "";
                        if (full.nameState === "in_progress" && !full.valid) {
                            code = "";
                        } else {
                            code = '<a title="Consulter le conduit"  style="cursor:pointer" href="' + urlConsult + '">' +
                                '<img src="{{ asset('install-bois/icon/tab_action_consulter.png') }}"></a>';
                        }

                        {% if is_granted('ROLE_ADMIN') %}
                        code += '<a title="Supprimer le conduit" style="cursor:pointer" class="initDeleteForm" onclick="initDeleteForm(' + full.id + ')" data-toggle="modal" data-target="#modal-are-you-sur-duct">' +
                            '<img src="{{ asset('install-bois/icon/tab_action_supprimer.png') }}"></a>' +
                            '<a title="Modifier le conduit" style="cursor:pointer" href="' + url + '">' +
                            '<img src="{{ asset('install-bois/icon/tab_action_modifier.png') }}"></a>';
                        {% else %}
                        stateCantEdi = ['archived', 'archived_for_new']
                        if (!stateCantEdi.includes(full.nameState)) {
                            code += '<a title="Supprimer le conduit" style="cursor:pointer" class="initDeleteForm" onclick="initDeleteForm(' + full.id + ')" data-toggle="modal" data-target="#modal-are-you-sur-duct">' +
                                '<img src="{{ asset('install-bois/icon/tab_action_supprimer.png') }}"></a>' +
                                '<a title="Modifier le conduit" style="cursor:pointer" href="' + url + '">' +
                                '<img src="{{ asset('install-bois/icon/tab_action_modifier.png') }}"></a>';
                        }
                        {% endif %}
                        if (full.valid) {
                            {% set urlClone = path("products_clone", {'id': 'duct_id'}) %}
                            let urlClone = '{{ urlClone ~ "?rq=%brand" }}';
                            urlClone = urlClone.replace("duct_id", full.id);
                            urlClone = encodeURI(urlClone.replace("%brand", full.idMarque))
                            {% if is_granted('ROLE_ADMIN') or is_granted("ROLE_FABRICANT") or is_granted('ROLE_REFERENT_FABRICANT') %}
                            code += '<a title="Dupliquer ce conduit" style="cursor:pointer" href="' + urlClone + '">' +
                                '<img src="{{ asset('install-bois/icon/tab_action_dupliquer.png') }}"></a>';
                            {% endif %}
                        }
                        if (full.addComment) {
                            code += '<button title="Ajouter un commentaire" data-toggle="modal" data-target="#modal-add-update-device-comment" onclick="updateCommentURI(' + full.id + ')" type="button" class="boutonAction btnComment" ><img  src="{{ asset('install-bois/icon/tab_action_comment.svg') }}"></buton>'
                        }
                        return code;
                    },
                    createdCell: function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'center');
                        $(td).addClass('centerBtn');
                    }
                },
                {
                    data: "id",
                    name: "id",
                    width: "1%",
                    orderable: true,
                    render: function (data, type, full, meta) {
                        return '<strong>' + data + '</strong>';
                    }
                },
                {
                    data: "updateAt",
                    name: "updatedAt",
                    width: "4%",
                    orderable: true,
                    render: function (data, type, full, meta) {
                        return '<strong>' + data + '</strong>';
                    }
                },
                {
                    data: "manufacturerName",
                    name: "manufacturerName",
                    width: "8%",
                    orderable: false,
                    render: function (data, type, full, meta) {
                        return '<strong>' + data + '</strong>';
                    }
                },
                {
                    data: "refBrandExtName",
                    name: "refBrandExtName",
                    width: "8%",
                    orderable: false,
                    render: function (data, type, full, meta) {
                        return '<strong>' + data + '</strong>';
                    }
                },
                {
                    data: "modele",
                    name: "modele",
                    width: "8%",
                    orderable: true,
                    render: function (data, type, full, meta) {
                        return '<strong>' + data + '</strong>';
                    }
                },
                {
                    data: "typeConduit",
                    name: "typeConduit",
                    width: "1%",
                    orderable: true,
                    render: function (data, type, full, meta) {
                        return '<strong>' + data + '</strong>';
                    }
                },
                {
                    data: "version",
                    name: "version",
                    width: "1%",
                    orderable: false,
                    defaultContent: null,
                    render: function (data, type, full, meta) {
                        return data;
                    }
                },
                {
                    data: "state",
                    name: "state",
                    width: "1%",
                    orderable: true,
                    defaultContent: null,
                    render: function (data, type, full, meta) {
                        let code = ""
                        if (full.nameState === "in_progress" && !full.valid) {
                            code = '<div data-toggle="tooltip" data-placement="bottom"' +
                                ' title="Ce conduit est incomplet.">' +
                                '<small>Incomplet</small></div>'
                            $(function () {
                                $('[data-toggle="tooltip"]').tooltip()
                            })
                        }
                        return '<strong id="product">' + data + code + '</strong>';
                    }
                }
            ],
            "oLanguage": {
                "sSearch": "Rechercher un modèle ou une marque : "
            }
        });

        function initDeleteForm(ductId) {
            let url = '{{ path("products_delete", {'id': 'duct_id','from':'ductIndex'}) }}';
            url = url.replace("duct_id", ductId);
            $("#form_delete_duct")[0].action = url;
        }
        function updateCommentURI(deviceId) {
            let url = '{{ path("products_comment_add_or_update", {'id': 'device_id'}) }}';
            url = url.replace("device_id", deviceId);
            $("#productcomment_add_or_update")[0].action = url;
        }
    </script>
{% endblock %}