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

{% block activeLiParametrage %}class="active"{% endblock %}
{% block activeParametrage %}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="#">Galerie</a></li>
                <li class="active">Gestion Galerie</li>
            </ul>
            <div class="m-b-md">
                <h3 class="m-b-none">Galerie</h3>
            </div>
            {% if response is defined and 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> Opération effectuée 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 %}

            <section class="panel panel-default">
                <header class="panel-heading">
                    Ajouter une image à la galerie
                </header>
                <div class="panel-body">
                    <form method="POST" enctype="multipart/form-data">
                        <div class="form-group">
                            <label>Type de média</label><br/>
                            <label><input type="radio" name="media_type" value="image" checked onclick="toggleMediaInput('image')"> Image</label>
                            <label style="margin-left: 10px;"><input type="radio" name="media_type" value="video" onclick="toggleMediaInput('video')"> Vidéo</label>
                        </div>

                        <div class="form-group" id="imageInput">
                            <label>Images</label>
                            <input type="file" class="form-control" name="image[]" multiple>
                        </div>

                        <div class="form-group" id="videoInput" style="display:none;">
                            <label>Chemin de la vidéo</label>
                            <input type="url" class="form-control" name="video_url" placeholder="https://...">
                        </div>

                        <div class="text-center" style="margin-bottom: 20px;">
                            <button id="submitBtn" type="submit" class="btn btn-sm btn-primary">Ajouter</button>
                        </div>
                    </form>
                </div>
            </section>

            <section class="panel panel-default">
                <header class="panel-heading">
                    Galerie d'images
                </header>
                <div class="panel-body">
                    <div class="row">
                    {% for img in galerie %}
                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" style="margin-bottom: 20px;">
                            <div style="position:relative;">
                                {% if img.type == 1 %}
                                    {% set embedUrl = img.image|replace({'watch?v=': 'embed/'}) %}
                                    <iframe width="100%" height="120" 
                                            src="{{ embedUrl }}" 
                                            frameborder="0" 
                                            allowfullscreen 
                                            class="img-thumbnail">
                                    </iframe>
                                {% else %}
                                    <img src="{{ asset(img.image) }}" class="img-thumbnail" style="max-width:100%; max-height:120px;">
                                {% endif %}
                                <button type="button" class="btn btn-xs btn-danger" style="position:absolute;top:5px;right:5px;" onclick="deleteGalerie({{ img.id }})">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    {% else %}
                        <div class="col-12 text-center">Aucune image dans la galerie.</div>
                    {% endfor %}
                    </div>
                    {% if totalPages > 1 %}
                        <nav aria-label="Page navigation" class="text-center">
                            <ul class="pagination" style="justify-content: center;">
                                <li class="page-item{% if page == 1 %} disabled{% endif %}">
                                    <a class="page-link" href="{{ path('app_galerie', {'page': page-1}) }}" aria-label="Précédent">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                {% for p in 1..totalPages %}
                                    <li class="page-item{% if p == page %} active{% endif %}">
                                        <a class="page-link" href="{{ path('app_galerie', {'page': p}) }}">{{ p }}</a>
                                    </li>
                                {% endfor %}
                                <li class="page-item{% if page == totalPages %} disabled{% endif %}">
                                    <a class="page-link" href="{{ path('app_galerie', {'page': page+1}) }}" aria-label="Suivant">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    {% endif %}
                </div>
            </section>
        </section>
    </section>
    <br/><br/>
{% endblock %}

{% block js %}
{#<script src="https://cdn.tiny.cloud/1/wbuas0ecxz0xu23605bhyxweu8ywvl1sb8chmxo6yrycschu/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script> #}
<script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/classic/ckeditor.js"></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">

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

        document.addEventListener("DOMContentLoaded", function () {
            const form = document.querySelector("form");
            const submitBtn = document.getElementById("submitBtn");

            form.addEventListener("submit", function () {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Envoi...';
            });
        });


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

        function deleteGalerie(id){
            noty({
                text: "Etes vous sûr de vouloir supprimer cette image ?",
                type: 'confirm',
                theme: 'relax',
                layout: 'center',
                animation: {
                    open: 'animated bounceInDown',
                    close: 'animated bounceOutUp',
                    easing: 'swing',
                    speed: 200
                },
                buttons     : [
                    {addClass: 'btn btn-primary', text: 'Oui', onClick: function ($noty) {
                        var url = '/deleteGalerie/?id='+id;
                        $(".fadeMe").css("visibility","visible").animate({opacity: 0.7}, 200);
                        $.ajax({
                            type: 'get',
                            url: url,
                            success: function(data){
                                if(data=="OK"){
                                    window.location.reload();
                                }
                                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();
                    }}
                ]
            });
        }

    </script>
    <script>
        function toggleMediaInput(type) {
            if (type === 'image') {
                document.getElementById('imageInput').style.display = 'block';
                document.getElementById('videoInput').style.display = 'none';
            } else {
                document.getElementById('imageInput').style.display = 'none';
                document.getElementById('videoInput').style.display = 'block';
            }
        }
    </script>
{% endblock %}