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

{% block activeLiLoi %}class="active"{% endblock %}
{% block activeLoi %}class="active"{% endblock %}
{% block body %}
    <link rel="stylesheet" href="{{ asset("assets/Backoffice/css/fileinput.css") }}">
    <link href="{{ asset("assets/Backoffice/css/bootstrap-material-datetimepicker.css") }}" rel="stylesheet">
    <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="#">Lois</a></li>
                <li class="active">Modification loi</li>
            </ul>
            <div class="m-b-md">
                <h3 class="m-b-none">Lois</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> loi modifiée 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-12">
                        <section class="panel panel-default">
                            <div class="panel-body">
                                <div class="form-group">
                                    <label>Dossier :</label>
                                    <select name="dossier" class="form-control">
                                        {% for d in dossiers %}
                                            <option value="{{ d.id }}" {% if article.idDossier == d.id %}selected{% endif %}>{{ d.nom }} ({{ d.nomAr }})</option>
                                        {% endfor %}
                                    </select>
                                </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" {% if article.showFr == 1 %}checked{% endif %} onChange="disableLanguage('FR')"> Afficher en français
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>Titre</label>
                                    <input type="text" class="form-control" placeholder="Titre" id="titreFr" name="titreFr" value="{{ article.titreFr }}" {% if article.showFr == 0 %}disabled="true" {% endif %}>
                                </div>
                                <!--<div class="form-group">
                                    <label>Text</label>
                                    <textarea name="textFr" class="form-control p-input ckeditor" id="textFr" aria-describedby="" placeholder="" rows="10">{{ article.textFr }}</textarea>
                                </div>-->
                                <div class="form-group">
                                    <label>Fichier (FR) :</label>
                                    <input id="file-fr" name="file" type="file" class="form-control">
                                    {% if article.fichierFr != "" %}
                                        <table border="0" style="width: 100%;margin-top: 10px;">
                                            <tr>
                                                <td style="width: 60%;"><a href="{{ article.fichierFr }}" target="_blank">Fichier FR</a></td>
                                                <td style="text-align: right"><button type="button" class="btn btn-sm btn-danger" onClick="deleteFichier({{ article.id }},1)">Supprimer</button> </td>
                                            </tr>
                                        </table>

                                    {% endif %}
                                </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" onChange="disableLanguage('AR')" {% if article.showAr == 1 %}checked{% endif %}> عرض باللغة العربية
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>عنوان</label>
                                    <input type="text" class="form-control" placeholder="عنوان" id="titreAr" name="titreAr" value="{{ article.titreAr }}" {% if article.showAr == 0 %}disabled="true" {% endif %}>
                                </div>
                                <!--<div class="form-group">
                                    <label>النص</label>
                                    <textarea name="textAr" class="form-control p-input ckeditor" id="textAr" aria-describedby="" placeholder="" rows="10">{{ article.textAr }}</textarea>
                                </div>-->
                                <div class="form-group">
                                    <label>ملف :</label>
                                    <input id="file-fr" name="file2" type="file" class="form-control">
                                    {% if article.fichierAr != "" %}
                                        <table border="0" style="width: 100%;margin-top: 10px;">
                                            <tr>
                                                <td style="width: 60%;"><a href="{{ article.fichierAr }}" target="_blank">Fichier AR</a></td>
                                                <td style="text-align: left"><button type="button" class="btn btn-sm btn-danger" onClick="deleteFichier({{ article.id }},2)">Supprimer</button> </td>
                                            </tr>
                                        </table>

                                    {% endif %}
                                </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 ">Enregister la loi</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="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="{{ asset("assets/Backoffice/js/bootstrap-material-datetimepicker.js") }}"></script>


    <script type="text/javascript">

        $('#dateEvent').bootstrapMaterialDatePicker({ format : 'YYYY-MM-DD HH:mm', lang : 'fr', weekStart : 1, cancelText : 'ANNULER' });

        $(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'))
            });
        });


        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;
                }



            }
        }

        function deleteFichier(id,type){
            noty({
                text: "Etes vous sûr de vouloir supprimer le fichier ?",
                type: 'confirm',
                theme: 'relax',
                layout: 'center',
                animation: {
                    open: 'animated bounceInDown',
                    close: 'animated bounceOutUp', // jQuery animate function property object
                    easing: 'swing', // easing
                    speed: 200 // opening & closing animation speed
                },
                buttons     : [
                    {addClass: 'btn btn-primary', text: 'Oui', onClick: function ($noty) {
                        var url = '/deleteFichierLois/?id='+id+"&type="+type;
                        $(".fadeMe").css("visibility","visible").animate({opacity: 0.7}, 200);
                        $.ajax({
                            type: 'get',
                            url: url,
                            success: function(data){
                                if(data=="OK"){
                                    window.location.href=window.location.href;
                                }
                                else{
                                    errorMsg("une erreur s'est produite");
                                    $('.fadeMe').animate({opacity: 0.0}, 900,setInvisible);
                                }


                            }
                        });

                        $noty.close();


                    }
                    },
                    {addClass: 'btn btn-danger', text: 'Non', onClick: function ($noty) {
                        $noty.close();

                    }
                    }
                ]
            });
        }

        function errorMsg(message) {
            noty({
                text: message,
                type: 'error',
                theme: 'relax',
                layout: 'topCenter',
                animation: {
                    open: 'animated bounceInDown',
                    close: 'animated bounceOutUp', // jQuery animate function property object
                    easing: 'swing', // easing
                    speed: 200 // opening & closing animation speed
                }
            });
        }

    </script>

{% endblock %}