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

{% block localstyle %}
{% endblock %}

{% block body %}
    <h1 class="page-header">
    {{ catparent }} = {{ parent.name }}
    </h1>

    <p>
        <bouton class="btn btn-success" onClick="$('#modalchildtype').modal('show')">Ajouter Elément</bouton>
        {% if not childs is empty %}<a class="btn btn-secondary" href={{ path('app_child_view',{'catparent':catparent,'idparent':parent.id,'idchild':childs[0].id}) }}>Visualiser</a>{%endif%}
        {% if catparent == 'blog' %}     
        <a class="btn btn-secondary" href={{ path('app_blog_update',{'id':parent.id,from:"child"}) }}>Modifier le Blog</a>   
        {% elseif catparent == 'page' %}     
        <a class="btn btn-secondary" href={{ path('app_page_update',{'id':parent.id,from:"child"}) }}>Modifier la Page</a>   
        {% endif %}
    </p>

    <div class="row">
        <div class="col-md-4">
            {% set idchildtype=-100 %}
            {% for child in childs %}
                {% if child.childtype.id != idchildtype %}
                    {% if not loop.first %}
                    </ol>
                    {% endif %}

                    <h5 class="mt-3 mb-0">Type = {{ child.childtype.name }}</h5>
                    <ol class="list-group childs">
                    {% set idchildtype=child.childtype.id %}
                {% endif %}

                <li data-id="{{child.id}}" class="list-group-item d-flex align-items-center justify-content-start">
                    <i class="btn-link fas fa-arrows-alt-v fa-2x fa-fw"></i>
                    <a href="{{path("app_child_update",{catparent:catparent,idparent:parent.id,idchild:child.id})}}"><i class="fa fa-file fa-2x  fa-fw"></i></a></i>
                    <i class="fas fa-eye btn-link fa-2x fa-fw" data-id="{{child.id}}"></i>

                    {% if child.childtype.id==12 %}
                        <img class="ms-2" src="{{path("app_minio_image",{file:'child/'~child.id~'/thumb/'~child.filename}) }}" style="width:50px;">
                    {%endif%}
                    {% if child.childtype.id==13 %}
                        <img class="ms-2" src="{{ child.url }}" style="width:50px;">
                    {%endif%}                    
                    <div class="ps-3 text-break">
                        {{child.name}}
                        {% if not child.subname is empty %}<br><small>{{child.subname}}</small>{%endif%}
                    </div>
                </li>

                {% if loop.last %}
                    </ol>
                {% endif %}

            {%endfor%}
        </div>
        <div id="childid" class="col-md-8">
            <iframe id="childview" src="" style="border:none;width:100%"></iframe>
        </div>
    </div>

    <div id="modalchildtype" class="modal" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Type de child</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <bouton class="btn btn-success" onClick="submitChild()">Ajouter</bouton>
                    <bouton class="btn btn-secondary" onClick="$('#modalchildtype').modal('hide')">Annuler</bouton>

                    <select id="childtypeid" name="childtypeid" class="form-control form-control mt-5 mb-5">
                    {% for childtype in childtypes %}
                        <option value="{{childtype.id}}">{{childtype.name}}</option>
                    {% endfor %}
                    </select>
                </div>            
            </div>
        </div>
    </div>

{% endblock %}

{% block localscript %}
<script>
    $(document).ready(function() {
        $('#dataTables').DataTable({
            columnDefs: [ { "targets": "no-sort", "orderable": false }, { "targets": "no-string", "type" : "num" } ],
            responsive: true,
            iDisplayLength: 100,
            order: [[ 1, "asc" ]]
        });

        $(".fa-eye").click(function(){
            id=$(this).data("id");
            url="{{path("app_child_view",{catparent:catparent,idparent:parent.id,idchild:"xxx",framed:true,size:1})}}";
            url=url.replace("xxx",id);
            url=url.replace("&amp;","&");
            $("#childview").attr("src",url);

            window.scrollTo(0, 0);
            iFrameResize({ log: false, bodyMargin: "50px" }, '#childview')
        });

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

                $.ajax({
                    method: "POST",
                    url: "{{path("app_child_order",{catparent:catparent,idparent:parent.id})}}",
                    data: {
                        lstordered:lstordered
                    }
                });
            }
        });
    });


    function submitChild() {
        idchildtype=$("#childtypeid").val();
        url="{{path("app_child_submit",{catparent:catparent,idparent:parent.id,idchildtype:"xxx"})}}";
        url=url.replace("xxx",idchildtype);
        window.location=url;
    }
</script>
{% endblock %}