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

{% block activeLiMap %}class="active"{% endblock %}
{% block activeMap %}class="active"{% endblock %}
{% block body %}
    <section class="vbox">
        <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                <li><a href=""><i class="fa fa-home"></i> Tableau de board</a></li>
                <li class="active">Map maritimes</li>
            </ul>
            <div class="m-b-md">
                <h3 class="m-b-none">Map maritimes ({{ port.nom }})</h3>
            </div>
            {% if response != "" %}
                {% if response == "OK" %}
                    <div class="alert alert-success">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <i class="fa fa-ok-sign"></i><strong>OK !</strong> Informations ajoutées avec succès</a>.
                    </div>
                {% else %}
                    <div class="alert alert-danger">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <i class="fa fa-ban-circle"></i><strong>Erreur !</strong> {{ response }}
                    </div>
                {% endif %}
            {% endif %}
            <form method="POST" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-sm-6">
                        <section class="panel panel-default">
                            <header class="panel-heading font-bold">Français</header>
                            <div class="panel-body">
                                <div class="form-group">
                                    <label>Text</label>
                                    <textarea name="textFr" class="form-control p-input ckeditor5" id="textFr" aria-describedby="" placeholder="" rows="10">{{ port.textFr }}</textarea>
                                </div>
                            </div>
                        </section>
                    </div>

                    <div class="col-sm-6" style="direction: rtl;">
                        <section class="panel panel-default">
                            <header class="panel-heading font-bold">العربية</header>
                            <div class="panel-body">
                                <div class="form-group">
                                    <label>النص</label>
                                    <textarea name="textAr" class="form-control p-input ckeditor5" id="textAr" aria-describedby="" placeholder="" rows="10">{{ port.textAr }}</textarea>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <section class="panel panel-default">
                            <br/><br/>
                            <div class="text-center" style="margin-bottom: 50px;">
                                <button type="submit" class="btn btn-sm btn-primary ">Enregister les informations</button>
                            </div>
                            <br/>
                        </section>
                    </div>
                </div>
            </form>
        </section>
    </section>
    <br/><br/>
{% endblock %}
{% block js %}


<script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/classic/ckeditor.js"></script>

    <script type="text/javascript">

        $('#dateActualites').bootstrapMaterialDatePicker({ format : 'YYYY-MM-DD', lang : 'fr', weekStart : 1, cancelText : 'ANNULER', time : false });


            {# $(document).ready(function () {
            tinymce.init({
                selector: '#textFr, #textAr',
                plugins: [ 'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'image', 'link', 'lists', 'media', 'searchreplace', 'table', 'visualblocks', 'wordcount' ],
                toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
                tinycomments_mode: 'embedded',
                tinycomments_author: 'Author name',
                mergetags_list: [
                { value: 'First.Name', title: 'First Name' },
                { value: 'Email', title: 'Email' }
                ],
                height: 350,
                setup: function (editor) {
                // Set text direction: Arabic -> RTL, French -> LTR
                editor.on('init', function () {
                    if (editor.id === 'textAr') {
                    editor.getBody().dir = 'rtl';
                    } else {
                    editor.getBody().dir = 'ltr';
                    }
                });
                },
                ai_request: (request, respondWith) => respondWith.string(() =>
                Promise.reject('See docs to implement AI Assistant'))
            });
        }); #}
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll('textarea.ckeditor5').forEach((el) => {
                ClassicEditor
                    .create(el)
                    .catch(error => {
                        console.error(error);
                    });
            });
        });



    </script>

{% endblock %}