{% extends 'admin/base.html.twig' %}

{% block title %}Itinéraire | Editer{% endblock %}

{% block body %}
<div class="wrapper">
    {% include 'include/side_menu.html.twig' %}

    <div id="content" class="content">
        {% include 'include/top_menu.html.twig' %}
        <div class="content-wrapper">
            <div class="content-body">
                <div class="d-flex justify-content-between">
                    <h1>Editer itinéraire</h1>
                </div>
                <div class="w-100 d-flex justify-content-between">
                    <div class="w-75">
                        <form id="form-ip" method="post" enctype="multipart/form-data">
                            <table class="table table-bordered">
                                <thead class="thead-light">
                                <tr>
                                    <th style="width: 10%;" class="text-black text-center">Etapes</th>
                                    <th style="width: 40%;" class="text-black text-center">Ce que vous faites</th>
                                    <th style="width: 40%;" class="text-black text-center">Les supports</th>
                                    <th style="width: 10%;" class="text-black text-center">Action</th>
                                </tr>
                                </thead>
                                <tbody id="tab">
                                {% set count = content | length %}
                                {% set count = count - 1 %}
                                {% for key, item in content %}
                                        {% if item['step'] is defined or item['activity'] is defined or item['support'] is defined %}
                                        <tr>
                                            <td style="width: 10%;">
                                                    <div class="display-inline-block w-100 " style="height: 20px;" contenteditable="true" onblur="editRow('step', this)">  {{ decodeHTML(item['step']) }}</div>
                                                    <input type="hidden" id="step{{ key }}" value="{{ item['step'] }}" name="tab[{{ key }}][step]">

                                            </td>
                                            <td style="width: 40%;">
                                                    <div class="display-inline-block w-100 " style="height: 20px;" contenteditable="true" onblur="editRow('activity', this)">{{ decodeHTML(item['activity']) }}</div>
                                                    <input type="hidden" id="activity{{ key }}" value="{{ item['activity'] }}" name="tab[{{ key }}][activity]">

                                            </td>
                                            <td style="width: 40%;">
                                                    <div class="display-inline-block w-100 " style="height: 20px;" contenteditable="true" onblur="editRow('support', this)">{{ decodeHTML(item['support']) }}</div>
                                                    <input type="hidden" id="support{{ key }}" value="{{ item['support'] }}" name="tab[{{ key }}][support]">
                                            </td>
                                            {% if key != count %}
                                                <td style="width: 10%;"></td>
                                            {% else %}
                                                <td style="width: 10%;">
                                                    <div class="btn btn-primary" onclick="addRow(this)">+</div>
                                                </td>
                                                {% endif %}

                                        </tr>
                                        {% endif %}



                                {% endfor %}


                                </tbody>
                            </table>
                            <div class="text-right">
                                <button class="btn btn-primary glow position-relative ">Valider</button>
                            </div>


                        </form>
                    </div>

                  <!--  <div class="w-25">
                        <button class="btn btn-danger position-fixed" onclick="commande('bold')">G</button>

                    </div> -->
                </div>

            </div>
        </div>
    </div>
</div>
    <script>
        let current;

        $("div[contenteditable]").focus(function() {
            current = this;

        });
        function commande(cmd) {

            document.execCommand(cmd, false, false);
           $(current).focus();
        }

        function editRow(test, element) {
            console.log(element.innerHTML);
            console.log(element.parentNode.parentNode.rowIndex);
            console.log("#" + test + (element.parentNode.parentNode.rowIndex -1));
            $("#" + test + (element.parentNode.parentNode.rowIndex -1)).val(element.innerHTML);
        }

        function addRow(element) {
            $("#tab").append("<tr>" +
                "<td class='p-0' style='width=10%;'><div class='display-inline-block w-100' style='height: 20px;' contenteditable='true' onblur='editRow(\"step\", this)'></div><input type='hidden' id='step" + element.parentNode.parentNode.rowIndex + "' value='' name='tab[" + element.parentNode.parentNode.rowIndex +"][step]'></td>" +
                "<td class='p-0' style='width=40%;'><div class='display-inline-block w-100' style='height: 20px;' contenteditable='true' onblur='editRow(\"activity\", this)'></div><input type='hidden' id='activity" + element.parentNode.parentNode.rowIndex + "' value='' name='tab[" + element.parentNode.parentNode.rowIndex +"][activity]'></td>" +
                "<td class='p-0' style='width=40%;'><div class='display-inline-block w-100' style='height: 20px;' contenteditable='true' onblur='editRow(\"support\", this)'></div><input type='hidden' id='support" + element.parentNode.parentNode.rowIndex + "' value='' name='tab[" + element.parentNode.parentNode.rowIndex +"][support]'></td>" +
                "<td style='width=10%;'><div class='btn btn-primary' onclick='addRow(this)'>+</div></td>" +
                "</tr>");
                $("div[contenteditable]").focus(function() {
                    current = this;

                });
        }

    </script>
{% endblock %}