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

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

{% block head %}
    {{ parent() }}
    <style>
        .info-cell {
            max-height: 200px;
            overflow-y: auto;
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 8px;
            font-size: 0.9em;
        }
        .info-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .info-item {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            padding: 2px 0;
        }
        .info-key {
            font-weight: bold;
            color: #0056b3;
            margin-right: 6px;
        }
        .info-value {
            word-break: break-word;
        }
        .info-nested {
            width: 100%;
            padding-left: 20px;
        }
        .bool-true {
            color: #28a745;
        }
        .bool-false {
            color: #dc3545;
        }
        .null-value {
            color: #6c757d;
            font-style: italic;
        }
        .info-error {
            color: #dc3545;
            font-style: italic;
        }
        #trackers-list td {
            vertical-align: top;
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript"
            src="{{ asset('install-bois/initDateTimeFormatDatatable.js') ~ "?rnd=" ~ random() }}"></script>
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Paramètres | Gérer les appareils
        </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_devices_create') }}">
                        <button type="button" class="boutonAction" style="float: right">
                            Créer un nouvel appareil
                        </button>
                    </a>
                </div>
                {% if is_granted('ROLE_DEMO') %}
                    <p>Avec votre abonnement, vous pourrez accéder aux appareils créés par votre entreprise qui ne sont pas dans la base de données Install Bois.</p>
                {% endif %}
                <table id="products-devices-list" class="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="{{ 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 d’appareil</th>
                        <th class="{{ classListForSmartphone }} " style="text-align: center">Version</th>
                        <th class="align_left">Simplifié</th>
                        <th class="state" style="text-align: center">État</th>
                    </tr>
                    </thead>
                </table>
                <div class="box-footer"></div>
            </div>
            {% if is_granted('ROLE_ADMIN') %}
            <div>
                <h3>Données de suivi récentes</h3>
                <table id="trackers-list" class="row-border" style="padding:1%;width:100%">
                    <thead>
                    <tr>
                        <th>Date</th>
                        <th>Utilisateur</th>
                        <th>De</th>
                        <th>Vers</th>
                        <th>Libellé</th>
                        <th>Infos</th>
                    </tr>
                    </thead>
                </table>
            </div>
            {% endif %}
            <div id="reservedPopupDiv">
                {{ include('products_devices/_modal/_form_are_you_sur_delete_productDevice.html.twig') }}
                {{ include('products/_block/_form_add_or_update_product_comment.html.twig') }}
                {{ macro.popup("info","form_clone_product", path('products_clone', {'id': "XX"}), "cloneProduct" ,"Pour personnaliser le modèle modifiez simplement les champs 'finitions' (aspect, couleur) ou 'sortie des fumées' dans le formulaire, sans duplication.") }}
            </div>
            {% if is_granted('ROLE_DEMO') %}
                {{ include('tooltip/tooltip.html.twig') }}
            {% endif %}
            <script type="application/javascript">
                const classListForSmartphone = '{{ is_granted('ROLE_TECHNICIEN') or is_granted('ROLE_REFERENT_TECHNICIEN') ?"hideOnSmartphone":"" }}'
                // DataTables initialisation
                let dt = $('#products-devices-list').DataTable({
                    // dom: 'Bfrtip',
                    "processing": true,
                    "serverSide": true,
                    responsive: true,
                    searching: true,
                    "ajax": {
                        "url": "{{ path('products_devices_datatable_list') }}"
                    },
                    "infoCallback": function (settings, start, end, max, total, pre) {
                        if (total === 0) {
                            createToast("danger", "Aucun appareil n'a été trouvé");
                        }
                        return null;
                    },
                    orderMulti: false,
                    "bLengthChange": false,
                    info: true,
                    paging: true,
                    language: {
                        url: '/localisation/fr_FR.json'
                    },
                    order: [[1, "desc"]],
                    deferRender: true,
                    // deferLoading: 0,
                    {# "ajax": "{{ path('products_devices_datatable_list') }}", #}
                    "columnDefs": [
                        {
                            "targets": "state",
                            createdCell: function (td, cellData, rowData, row, col) {
                                $(td).css('text-align', 'center');
                                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: "id_action",
                            data2: "state",
                            width: "5%",
                            orderable: false,
                            render: function (data, type, full, meta) {

                                {% set url = path("products_devices_update", {'id': 'device_id'}) %}
                                let url = '{{ url ~ "?rq=%brand" }}';
                                url = url.replace("device_id", full.id);
                                url = encodeURI(url.replace("%brand", full.idMarque));

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

                                let code = "";
                                if (full.nameState === "in_progress" && !full.valid) {
                                    code = "";
                                } else {
                                    code = '<a title="Consulter l\'appareil"  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 l\'appareil" style="cursor:pointer" class="initDeleteForm" onclick="initDeleteForm(' + full.id + ')" data-toggle="modal" data-target="#modal-are-you-sur-device">' +
                                    '<img src="{{ asset('install-bois/icon/tab_action_supprimer.png') }}"></a>' +
                                    '<a title="Modifier l\'appareil"  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 l\'appareil" style="cursor:pointer" class="initDeleteForm" onclick="initDeleteForm(' + full.id + ')" data-toggle="modal" data-target="#modal-are-you-sur-device">' +
                                        '<img src="{{ asset('install-bois/icon/tab_action_supprimer.png') }}"></a>' +
                                        '<a title="Modifier l\'appareil" 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': 'device_id'}) %}
                                    let urlClone = '{{ urlClone ~ "?rq=%brand" }}';
                                    urlClone = urlClone.replace("device_id", full.id);
                                    urlClone = encodeURI(urlClone.replace("%brand", full.idMarque));
                                    code += '<a title="Dupliquer l\'appareil" style="cursor:pointer"' +
                                        ' onclick="initCloneProductForm(`' + urlClone + '`)"' +
                                        ' data-toggle="modal" data-target="#popup-info-cloneProduct">' +
                                        '<img src="{{ asset('install-bois/icon/tab_action_dupliquer.png') }}"></a>';
                                }
                                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') }}"></button>'
                                }
                                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,
                            className: classListForSmartphone,
                            render: function (data, type, full, meta) {
                                return '<strong>' + data + '</strong>';
                            }
                        },
                        {
                            data: "updateAt",
                            name: "updatedAt",
                            width: "8%",
                            className: classListForSmartphone,
                            orderable: true,
                            render: function (data, type, full, meta) {
                                return '<strong>' + data + '</strong>';
                            }
                        },
                        {
                            data: "manufacturerName",
                            name: "manufacturerName",
                            className: classListForSmartphone,
                            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: "type",
                            name: "type",
                            className: classListForSmartphone,
                            width: "5%",
                            orderable: false,
                            render: function (data, type, full, meta) {
                                return data;
                            }
                        },
                        {
                            data: "version",
                            name: "version",
                            className: classListForSmartphone,
                            width: "1%",
                            orderable: false,
                            defaultContent: null,
                            render: function (data, type, full, meta) {
                                return data;
                            }
                        },
                        {
                            data: "isSimplified",
                            name: "isSimplified",
                            width: "5%",
                            orderable: false,
                            className: "align_center",
                            render: function (data, type, full, meta) {
                                return data ? 'Oui' : 'Non';
                            }
                        },
                        {
                            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>' + '<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(deviceId) {
                    let url = '{{ path("products_delete", {'id': 'device_id','from':'deviceIndex'}) }}';
                    url = url.replace("device_id", deviceId);
                    $("#form_delete_device")[0].action = url;
                }

                function initCloneProductForm(url) {
                    console.log(url)
                    $("#form_clone_product")[0].action = url;
                    $('#popup-danger-deleteAgency').modal('show');

                }

                if (isAdmin) {
                    let dtTrackers = $('#trackers-list').DataTable({
                        "processing": true,
                        "serverSide": true,
                        "ajax": {
                            "url": "{{ path('products_devices_datatable_trackers') }}",
                            "type": "GET"
                        },
                        "columns": [
                            { "data": "createdAt" },
                            {
                                "data": "userId.fullName",
                                "render": function(data, type, row) {
                                    return row.userId ? row.userId.fullName : '';
                                }
                            },
                            { "data": "fromUrl" },
                            { "data": "toUrl" },
                            { "data": "libelle" },
                            {
                                "data": "infos",
                                "render": function(data, type, row) {
                                    if (type === 'display') {
                                        return '<div class="info-cell">' + formatInfos(data) + '</div>';
                                    }
                                    return data;
                                }
                            }
                        ],
                        "order": [[0, "desc"]],
                        "language": {
                            "url": '/localisation/fr_FR.json'
                        },
                        "columnDefs": [
                            {
                                "targets": 5,
                                "width": "300px"
                            }
                        ]
                    });
                    $('#trackers-list').on('draw.dt', adjustInfoCellHeight);
                    $(window).resize(adjustInfoCellHeight);
                }


                function formatInfos(data) {
                    try {
                        const infoObj = JSON.parse(data);
                        let formattedInfo = '<div class="info-content">';

                        // Fonction récursive pour formater les objets imbriqués
                        function formatObject(obj, level = 0) {
                            let result = '';
                            for (let key in obj) {
                                const value = obj[key];
                                const indent = '&nbsp;'.repeat(level * 4);
                                if (typeof value === 'object' && value !== null) {
                                    result += `<div class="info-item level-${level}">
                        ${indent}<span class="info-key">${key}:</span>
                        <div class="info-nested">
                            ${formatObject(value, level + 1)}
                        </div>
                    </div>`;
                                } else {
                                    result += `<div class="info-item level-${level}">
                        ${indent}<span class="info-key">${key}:</span>
                        <span class="info-value">${formatValue(value)}</span>
                    </div>`;
                                }
                            }
                            return result;
                        }

                        formattedInfo += formatObject(infoObj);
                        formattedInfo += '</div>';
                        return formattedInfo;
                    } catch (e) {
                        return '<div class="info-error">Erreur de format JSON</div>';
                    }
                }

                function formatValue(value) {
                    if (typeof value === 'boolean') {
                        return value ? '<span class="bool-true">Vrai</span>' : '<span class="bool-false">Faux</span>';
                    }
                    if (value === null) {
                        return '<span class="null-value">Null</span>';
                    }
                    if (Array.isArray(value)) {
                        return `[${value.map(v => formatValue(v)).join(', ')}]`;
                    }
                    return String(value);
                }
                function adjustInfoCellHeight() {
                    $('#trackers-list tbody tr').each(function() {
                        var highestBox = 0;
                        $('.info-cell', this).each(function() {
                            if ($(this).height() > highestBox) {
                                highestBox = $(this).height();
                            }
                        });
                        $('.info-cell', this).height(Math.min(highestBox, 150));
                    });
                }


                $(document).ready(function () {
                    if (isDemo) {
                        applyTooltipToDisabledElements('.boutonAction');
                    }
                    dt.on('draw', function () {
                        if (isDemo) {
                            applyTooltipToDisabledElements('table td a, table td button');
                        }
                    });
                })
                function updateCommentURI(deviceId) {
                    let url = '{{ path("products_comment_add_or_update", {'id': 'device_id','from':'deviceIndex'}) }}';
                    url = url.replace("device_id", deviceId);
                    $("#productcomment_add_or_update")[0].action = url;
                }
            </script>
        </div>
    </div>
{% endblock %}