{% extends 'backoffice/backbase.html.twig' %}

{% block title %}Editer une Actualité{% endblock %}

{% block breadcrumbtitle %}Editer une Actualité{% endblock %}

{% block breadcrumbitem %}Editer une Actualité{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body d-flex justify-content-center">
                    {{ include ('backoffice/news/_form.html.twig', {form: form, button: 'Editer'}) }}
                </div>
            </div>

        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">

        var removeButton = "<button type='button' class='btn btn-danger btn-xs rounded-circle' onclick='removeFile($(this));'><i class='fa fa-times' aria-hidden='true'></i></button>";

        function removeFile(ob)
        {
            ob.parent().parent().remove();
        }


        //Delete Image Preview
        /*$("#imageDelBtn").on("click", function(){
            $("#product_imageFile").val('');
            $("#image").parent().parent().remove();
        });*/


        //Load Image Preview after select through the input file
        $(document).on("change", "#news_imageFile", function () {
            $("#image").parent().parent().remove();

            $('#imagePreview').append("<div class='row flex justify-content-start flex-wrap'>"+
                "<div class='col text-center' style='width: 150px; flex: none; margin: 5px;'> " +
                "<img id='image' src='"+URL.createObjectURL(event.target.files[0])+"' alt='news-img' width='150'> " +
                "</div>" +
                "</div>");
        });

        // Suppression d'image
        document.querySelectorAll('[data-picture-delete]').forEach(a => {
            a.addEventListener('click', e => {
                e.preventDefault()
                fetch(a.getAttribute('href'), {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({'_token': a.dataset.token})
                }).then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            a.parentNode.parentNode.remove()
                        } else {
                            alert(data)
                        }
                    })
                    .catch(e => alert(e))
            })
        })

    </script>
{% endblock %}