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

{% block localstyle %}
    .webzinepages { text-align:center }
    .webzinepages div { padding:5px ; margin:5px;}
    .webzinepages img {
        width: 100px;
    }
{% endblock %}

{% block body %}
{{ form_start(form) }}
    <h1 class="page-header">
    {% if mode=="update" %}
    Modification WEBZINE
    {% elseif mode=="submit" %}
    Création WEBZINE
    {% endif %}
    </h1>

    {{ form_widget(form.submit) }} 
    
    {% if by=="console" %}
        <a class="btn btn-secondary" href={{ path('app_webzine') }}>Annuler</a>
    {% else %}
        <a class="btn btn-secondary" href={{ path('app_home') }}>Annuler</a>
    {% endif %}

    {% if mode=="update" %}
    <a  href="{{ path('app_webzine_delete',{'id':webzine.id, 'by':by}) }}"
        class="btn btn-danger float-right"
        data-method="delete"
        data-confirm="Êtes-vous sûr de vouloir supprimer cet entregistrement ?">
          Supprimer
    </a>
    {% endif %}

    <br><br>

    {% if app.session.flashbag.has('error') %}
        <div class='alert alert-danger' style='margin: 5px 0px'>
            <strong>Erreur</strong><br>
            {% for flashMessage in app.session.flashbag.get('error') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    {% if app.session.flashbag.has('notice') %}
        <div class='alert alert-info' style='margin: 5px 0px'>
            <strong>Information</strong><br>
            {% for flashMessage in app.session.flashbag.get('notice') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-pencil-alt fa-fw"></i> Informations
                </div>

                <div class="card-body">
                    {{ form_row(form.name) }}
                    {{ form_row(form.set) }}
                    {{ form_row(form.order) }}
                    {{ form_row(form.mode) }}
                    {{ form_row(form.description) }}

                </div>
            </div>    
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-pencil-alt fa-fw"></i> Planches
                </div>

                <div class="card-body">
                    <a class="btn btn-info" style="width:100%; margin-bottom:10px" onClick="ModalLoad('extraLargeModal','Planches','{{ path('app_webzine_upload') }}');" title='Ajouter des Planches'>Télécharger les Planches du Webzine</a>

                    <div class="webzinepages">
                        {% for page in webzine.webzinepages %}
                            <div id="div_{{ page.illustration|replace({'.':''}) }}">
                                <img id="{{ page.illustration }}" src="/{{ appAlias }}/uploads/webzine/thumbori_{{ page.illustration }}"><br>
                                <a style="cursor:pointer" onclick="removeLinkPage('{{ page.illustration }}')"><i class='fa fa-trash fa-fw'></i></a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>    
        </div>
    </div>

{{ form_end(form) }}

{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        $("#webzine_name").focus();

        var linkpages="";
        {% for page in webzine.webzinepages %}
            if(linkpages=="")
                linkpages+="{{ page.illustration }}";
            else
                linkpages+=",{{ page.illustration }}";
        {% endfor %}

        $("#webzine_linkpages").val(linkpages);

        $(".webzinepages").sortable({
            tolerance: 'pointer',
            revert: '100',
            opacity: 0.6,
            forceHelperSize: true,
            delay: 50,
            itemSelector: 'img',
            axis: "y",
            cursor: "move",

            update: function( event, ui )
            {
                var order = [];
                $('.webzinepages img').each( function(e) {
                    order.push($(this).attr('id'));
                });

                var positions = order.join(',');
                $("#webzine_linkpages").val(positions);
            },
        });        

    });


    function removeLinkPage(id) {
        // On supprime la ligne
        $("#div_"+id.replace(".","")).remove();
        console.log($("#div_"+id.replace(".","")).attr("id"));

        // On supprime l'id de la liste
        $("#webzine_linkpages").val($("#webzine_linkpages").val().replace(id+",",""));
        $("#webzine_linkpages").val($("#webzine_linkpages").val().replace(","+id,""));
        $("#webzine_linkpages").val($("#webzine_linkpages").val().replace(id,""));
    }

{% endblock %}