{% extends 'Backoffice/base.html.twig' %}
{% block activeLiPro %}class="active"{% endblock %}
{% block activePro %}class="active"{% endblock %}

{% block body %}
    <link href="{{ asset("assets/Backoffice/css/bootstrap-material-datetimepicker.css") }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset("assets/Backoffice/css/fileinput.css") }}">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <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><a href="#">Projets de Lois</a></li>
                <li class="active">Nouveau projet de loi</li>
            </ul>
            <div class="m-b-md">
                <h3 class="m-b-none">Ajouter un Projet de Loi</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> Projet ajouté avec succès.
                    </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-12">
                        <section class="panel panel-default">
                            <div class="panel-body">
                                <div class="form-group">
                                    <label>Date :</label>
                                    <input type="date" class="form-control" name="date" value="{{ formData.date }}">
                                </div>
                            </div>
                        </section>
                    </div>
                    <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="checkbox">
                                    <label>
                                        <input type="checkbox" name="showFr" value="1" {% if formData.showFr %}checked{% endif %}> Afficher en français
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>Titre</label>
                                    <input type="text" class="form-control" placeholder="Titre" name="titreFr" value="{{ formData.titreFr }}">
                                </div>
                                <div class="form-group">
                                    <label>Text</label>
                                    <textarea name="textFr" class="form-control p-input ckeditor5" id="textFr" aria-describedby="" placeholder="" rows="10">{{ formData.textFr }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label>Fichier (FR) :</label>
                                    <input name="file" type="file" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>Image (FR) :</label>
                                    <input type="file" class="form-control" name="imageFr">
                                </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="checkbox">
                                    <label>
                                        <input type="checkbox" name="showAr" value="1" {% if formData.showAr %}checked{% endif %}> عرض باللغة العربية
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>عنوان</label>
                                    <input type="text" class="form-control" placeholder="عنوان" name="titreAr" value="{{ formData.titreAr }}">
                                </div>
                                <div class="form-group">
                                    <label>النص</label>
                                    <textarea name="textAr" class="form-control p-input ckeditor5" id="textAr" aria-describedby="" placeholder="" rows="10">{{ formData.textAr }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label>ملف :</label>
                                    <input name="file2" type="file" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>صورة :</label>
                                    <input type="file" class="form-control" name="imageAr">
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center" style="margin-bottom: 50px;">
                            <button type="submit" class="btn btn-sm btn-primary">Enregistrer le projet</button>
                        </div>
                        <br/>
                    </div>
                </div>
            </form>
        </section>
    </section>
    <br/><br/>
{% endblock %}
{% block js %}
    {#<script src="https://cdn.tiny.cloud/1/wbuas0ecxz0xu23605bhyxweu8ywvl1sb8chmxo6yrycschu/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>#}

    <script type="text/javascript" src="{{ asset("assets/Backoffice/js/fileinput.js") }}"></script>
    <script type="text/javascript" src="{{ asset("assets/Backoffice/js/bootstrap-material-datetimepicker.js") }}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/classic/ckeditor.js"></script>

    <script type="text/javascript">



        // $(document).ready(function () {
        //     tinymce.init({
        //         selector: '#textFr, #textAr',
        //         language: 'fr_FR',
        //         height: 350,
        //         plugins: [
        //             'advlist autolink lists link image charmap print preview anchor',
        //             'searchreplace visualblocks code fullscreen',
        //             'insertdatetime media table paste code help wordcount directionality'
        //         ],
        //         toolbar: 'undo redo | formatselect | bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | link image media | code fullscreen | ltr rtl',
        //         directionality: function() {
        //             return this.id === 'textAr' ? 'rtl' : 'ltr';
        //         }
        //     });
        // });
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll('textarea.ckeditor5').forEach((el) => {
                ClassicEditor
                    .create(el)
                    .catch(error => {
                        console.error(error);
                    });
            });
        });


        function disableLanguage(type){
            if(type == "FR"){

                if(document.getElementById("titreFr").disabled == true){

                    document.getElementById("titreFr").disabled='';
                }
                else{
                    document.getElementById("titreFr").disabled=true;
                }


                document.getElementById("editor").disabled=true;



            }
            else if(type == "AR"){
                if(document.getElementById("titreAr").disabled == true){

                    document.getElementById("titreAr").disabled='';
                }
                else{
                    document.getElementById("titreAr").disabled=true;
                }



            }
        }

        //----inpute multiple
        $('#file-fr').fileinput({
            language: 'fr',
            uploadUrl: '#',
            allowedFileExtensions : ['jpg', 'png','gif']
        });

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

    </script>

{% endblock %}