{% 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">
                            <table id="table" class="table table-bordered" style="table-layout: fixed;">
                                <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">
                                {% if content == false %}

                                    <tr>
                                        <td style="width: 10%;">
                                            <div class="display-inline-block w-100 " style="height: 20px;" contenteditable="true" onblur="editRow('step', this)"></div>
                                            <input type="hidden" id="step0" name="tab[0][step]">

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

                                        </td>
                                        <td style="width: 40%;">
                                            <div class="display-inline-block w-100 " style="height: 20px;" contenteditable="true" onblur="editRow('support', this)"></div>
                                            <input type="hidden" id="support0" name="tab[0][support]">
                                        </td>
                                        <td style="width: 10%;">
                                            <div class="btn btn-primary" onclick="addRow(this)">+</div>
                                        </td>
                                    </tr>


                                {% else %}
                                    {% 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%; word-break: break-word;" contenteditable="true">
                                                    {{ decodeHTML(item['step']) }}
                                                </td>
                                                <td style="width: 40%; word-break: break-word;" contenteditable="true">
                                                    {{ decodeHTML(item['activity']) }}
                                                </td>
                                                <td style="width: 40%; word-break: break-word;" contenteditable="true">
                                                    {{ decodeHTML(item['support']) }}
                                                </td>
                                                <td style="width: 10%;">
                                                    <button class="btn btn-danger" onclick="deleteRow(this)"><i class="bx bx-trash"></i></button>
                                                </td>
                                            </tr>
                                        {% endif %}



                                    {% endfor %}
                                {% endif %}

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


                    </div>

                    <div class="w-25">
                        <div class="position-sticky position-top-0 p-2">
                            <h6>Outils de style</h6>
                            <div>
                                <button class="btn btn-secondary" onclick="commande('bold')"><i class='bx bx-bold'></i></button>

                                <button class="btn btn-secondary" onclick="commande('italic')"><i class='bx bx-italic'></i></button>
                                <button class="btn btn-secondary" onclick="commande('underline')"><i class='bx bx-underline'></i></button>
                            </div>
                            <br>
                            <h6>Outils d'alignement</h6>
                            <div>
                                <button class="btn btn-secondary" onclick="commande('justifyLeft')"><i class='bx bx-align-left'></i></button>
                                <button class="btn btn-secondary" onclick="commande('justifyCenter')"><i class='bx bx-align-middle'></i></button>
                                <button class="btn btn-secondary" onclick="commande('justifyRight')"><i class='bx bx-align-right'></i></button>
                            </div>
                            <br>
                            <h6>Gestion du tableau</h6>
                            <button class="btn btn-primary" onclick="addRow()"><i class='bx bx-plus'></i></button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
    <script>

        $('#validTable').click(function () {
            var TableData = new Array();

            $('#table tr').each(function(row, tr){
                TableData[row]={
                    "step" : $(tr).find('td:eq(0)').html()
                    , "activity" :$(tr).find('td:eq(1)').html()
                    , "support" : $(tr).find('td:eq(2)').html()
                }
            });
            TableData.shift();  // first row is the table header - so remove
            $.ajax({
                method: "POST",
                url: "/admin/itinerary/{{ itinerary.id }}/update",
                dataType: "json",
                data: {table : TableData},
                success: function(data){
                    console.log(data);
                    window.location.href = '/admin/itineraries'
                }
            });
            console.log(TableData);

        });
        let current;

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

        });
        function commande(cmd) {

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

         function addRow() {
            $("#tab").append("<tr>" +
                "<td style='width: 10%; word-break: break-word;' contenteditable='true'></td>" +
                "<td style='width: 40%; word-break: break-word;' contenteditable='true'></td>" +
                "<td style='width: 10%; word-break: break-word;' contenteditable='true'></td>" +
                "<td style='width=10%;'> <div class='btn btn-danger'><i class='bx bx-trash'></i></div></td>" +
                "</tr>");
                $("td[contenteditable]").focus(function() {
                    current = this;

                });
        }

        function deleteRow(element) {
            $(element).closest("tr").remove();
        }

    </script>
{% endblock %}