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

{% block body %}
{{ form_start(form) }}
    <h1 class="page-header">
    {% if mode=="submit" %}
    Création child = {{ childtype.name }}
    {% else %}
    Modification child = {{ childtype.name }}
    {% endif %}
    </h1>

    {{ form_widget(form.submit) }} 
    
    <a class="btn btn-secondary" href={{ path('app_child',{catparent:catparent,idparent:parent.id}) }}>Annuler</a>

    {% if mode=="update" %}
    <a href={{ path('app_child_delete',{catparent:catparent,idparent:parent.id,idchild:child.id}) }}
        class="btn btn-danger float-end"
        data-method="delete" data-csrf="_token:{{ 'csrf' }}"
        data-confirm="Êtes-vous sûr de vouloir supprimer cet enregistrement ?">
          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.subname) }}
                    {% if childtype.haveurl %}
                        {{ form_row(form.url) }}
                    {% endif %}    

                    {{ form_row(form.description) }}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mb-3">
                <div class="card-header">
                    <i class="fas fa-tag fa-fw"></i> Tags
                </div>

                <div class="card-body">
                    {{ form_widget(form.tags) }}
                </div>
            </div>

            {% if childtype.havepin %}
            <div class="card mb-3">
                <div class="card-header">
                    <i class="fas fa-tag fa-fw"></i> Pins
                </div>

                <div class="card-body">
                    {{ form_widget(form.pins) }}
                </div>
            </div>
            {% endif %}

            {% if childtype.havefile %}
                {% if childtype.id == 12 %}
                    <div class="card mb-3">
                        <div class="card-header">
                            <i class="fa fa-pencil-alt fa-fw"></i> Image
                            {% if mode=="update" %}
                                <a class="btn btn-link float-end" href="{{path("app_child_upload",{catparent:catparent,idparent:parent.id,idchild:child.id,type:"image"})}}"><i class="fas fa-upload"></i></a>
                            {%endif%}
                        </div>

                        <div class="card-body text-center">
                            {% if mode=="submit" %}
                                Veuillez valider votre création avant de pouvoir ajouter une image
                            {% else %}
                                <img src="{{path("app_minio_image",{file:'child/'~child.id~'/thumb/'~child.filename}) }}" style="max-width:100%; width:300px; margin:auto">            
                            {% endif %}
                        </div>
                    </div>
                {%else%}
                    <div class="card mb-3">
                        <div class="card-header">
                            <i class="fa fa-pencil-alt fa-fw"></i> Fichier
                            {% if mode=="update" and childtype.id!=10 %}
                                <a class="btn btn-link float-end" href="{{path("app_child_upload",{catparent:catparent,idparent:parent.id,idchild:child.id,type:"file"})}}"><i class="fas fa-upload"></i></a>
                            {%endif%}
                        </div>

                        <div class="card-body text-left">
                            {% if mode=="submit" %}
                                Veuillez valider votre création avant de pouvoir ajouter un fichier
                            {% else %}
                                <a href="{{path("app_minio_show",{file:'child/'~child.id~'/'~child.filename}) }}" target="_blank">{{child.filename}}</a>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            {% endif %}    

            {% if childtype.havechildheader %}
                <div class="card mb-3">
                    <div class="card-header">
                        <i class="fa fa-pencil-alt fa-fw"></i> Images
                        {% if mode=="update" and childtype.havechildheader %}
                            <i class="btn btn-link btn-modal float-end"  data-modalid="mymodallarge" data-modaltitle="Ajouter Images" data-modalurl="{{ path("app_cropentity01", {type:"childheader", idparent:child.id }) }}"><i class="fas fa-upload"></i></i>
                        {% endif %}                        
                    </div>

                    <div class="card-body">
                        {% if mode=="submit" %}
                            Veuillez valider votre création avant de pouvoir ajouter des Images
                        {%else%}
                            <ol id="childheaders" class="list-group list-group">

                            </ol>                
                        {%endif%}
                    </div>
                </div>
            {% endif %}           
        </div>
    </div>


{{ form_end(form) }}
{% endblock %}

{% block localscript %}
<script>
    $(document).ready(function() {
        $("#child_name").focus();
        {% if mode=="update" %}
        loadchildheaders();
        {%endif%}        
    });

    {% if mode=="update" %}
    $('#mymodallarge').on('hidden.bs.modal', function () {
        loadchildheaders();
    });

    function loadchildheaders() {
        $("#childheaders").empty();
        $.ajax({
            method: "POST",
            url: "{{path("app_childheader_select",{idchild:child.id})}}",
            success: function(datas, dataType)
            {
                jQuery.each(datas, function(i, wid) {
                    urldel="{{path("app_childheader_delete",{catparent:catparent,idparent:parent.id,id:"xxx"})}}";
                    urldel=urldel.replace("xxx",wid.id);

                    urlupt="{{path("app_childheader_update",{catparent:catparent,idparent:parent.id,idchild:child.id,id:"xxx"})}}";
                    urlupt=urlupt.replace("xxx",wid.id);

                    html ='<li data-id="'+wid.id+'" class="list-group-item">';
                    html+='<div class="float-start btn-link"><i class="fas fa-arrows-alt-v fa fa-fw"></i></div>';
                    if(wid.credit) { html+='<div class="float-start ml-3">Crédit = '+wid.credit+'</div>'; }
                    html+='<div class="float-end btn-link"><a href="'+urldel+'"><i class="fas fa-trash fa fa-fw"></i></a></div>';
                    html+='<div class="float-end btn-link mr-2"><a href="'+urlupt+'"><i class="fas fa-file fa fa-fw"></i></a></div>';
                    url="{{path("app_minio_image",{file:'xxx'})}}";
                    url=url.replace("xxx",wid.filename)
                    html+='<img src="'+url+'" style="width:100%">';
                    html+='</li>';
                    $("#childheaders").append(html);
                }); 

                $( "#childheaders" ).sortable({
                    axis: "y",
                    handle: ".fa-arrows-alt-v",
                    stop: function( event, ui ) {
                        lstordered="";
                        $( "#childheaders li" ).each(function( index ) {
                            if(index==0) lstordered=$(this).data("id");
                            else lstordered=lstordered+","+$(this).data("id");
                        });    

                        $.ajax({
                            method: "POST",
                            url: "{{path("app_childheader_order",{idchild:child.id})}}",
                            data: {
                                lstordered:lstordered
                            }
                        });
                    }
                });
            },
        });         

    }
    {% endif %}
</script>
{% endblock %}