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

{% block localstyle %}
<style>
    body{
        overflow-y:hidden
    }

    #page{
        padding:0px !important;
        overflow-y:hidden;
    }
</Style>
{% endblock %}

{% block menuapp %}
    <ul id="menupagesportal" class="navbar-nav">
        {% for page in pagesportal %} 
            <li id="menupage-{{page.id}}" class="menupage nav-item" style="cursor:pointer">
                <a onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','portal','{{page.pagecategory.id==1?page.toreload:true}}',null,'{{page.name}}')">
                    {% if page.fonticon %}
                        <i class="{{ page.fonticon }} fa-fw"></i>
                    {% elseif loop.first %}
                        <i class="fas fa-home fa-fw"></i>
                    {% else %}
                        <i class="fas fa-door-closed fa-fw"></i>
                    {% endif %}                    
                    {{ page.name }}
                </a>
            </li>
        {% endfor %}
    </ul>

    <ul id="menupagesuser" class="navbar-nav">
        {% for page in pagesuser %}
            <li id="menupage-{{page.id}}" class="menupage nav-item" style="cursor:pointer">
                <a onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','user','{{page.pagecategory.id==1?page.toreload:true}}',null,'{{page.name}}')">
                    {% if page.fonticon %}
                        <i class="{{ page.fonticon }} fa-fw"></i>
                    {% else %}
                        <i class="fas fa-user fa-fw"></i>
                    {% endif %}                    
                    {{ page.name }}
                </a>
            </li>
        {% endfor %}
    </ul>

    {% if groups|length > 0 and groups|length < 10 %}
        <ul id="menupagesgroup" class="navbar-nav">
            {% for groupshared in groups %}
                {% if groupshared.pagesshared|length > 1 %}
                    <li id="menugroup-{{groupshared.id}}" class="nav-item menupage dropdown">
                        <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-users fa-fw"></i>
                            {{ groupshared.label }}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                {% endif %}

                {% for page in groupshared.pagesshared %}          
                    {% if groupshared.pagesshared|length == 1 %}
                        <li id="menupage-{{page.id}}" class="menupage nav-item">
                    {%endif%}

                    <a id="menupage-{{page.id}}"  style="cursor:pointer" class="{{ groupshared.pagesshared|length > 1 ? "menupage dropdown-item" : "" }}" onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','group','{{page.pagecategory.id==1?page.toreload:true}}',{{groupshared.id}},'{{page.name}}')">
                    {% if page.fonticon %}
                        <i class="{{ page.fonticon }} fa-fw"></i>
                    {% else %}
                        <i class="fa fa-users fa-fw"></i>
                    {% endif %}
                        
                    {{ page.name }}
                    </a>

                    {% if groupshared.pagesshared|length == 1 %}
                        </li>
                    {%endif%}

                {% endfor %}

                {% if groupshared.pagesshared|length > 1 %}
                    </div>
                    </li>
                {% endif %}            
            {% endfor %}
        </ul>
    {% elseif groups|length > 0 %}
        <ul id="menupagesgroup" class="navbar-nav">
            <li class="nav-item" style="cursor:pointer">
                <a onclick="$('#selmenu').modal('show');">
                    <i class="fa fa-users fa-fw"></i> Mes Groupes
                </a>
            </li>        
        </ul>
    {% endif %}

{% endblock %}

{% block menuuser %}
    {% if canadd and app.user %}
        <a id="menusubmit" style="cursor:pointer" onclick="submitPage()" title='Ajouter une page'><i class='fa fa-plus fa-fw'></i></a>
    {% endif %}
    <a id="menuupdate" style="cursor:pointer;display:none" onclick="updatePage()" title='Modifier une page'><i class='fa fa-file fa-fw'></i></a>
    <a id="menushare" style="cursor:pointer;display:none" onclick="sharePage()" title='Partager une page'><i class='fa fa-share-alt fa-fw'></i></a>
    <a id="menudelete" style="cursor:pointer;display:none" onclick="deletePage()" title='Supprimer une page'><i class='fa fa-trash fa-fw'></i></a>
    <a id="menuwidgetuser" class="btn-modal" style='cursor:pointer' data-modalid='selwidgetuser' title='Ajouter un widget'><i class='fa fa-cubes fa-fw'></i></a></li>
    <a id="menuwidgetgroup" class="btn-modal" style='cursor:pointer' data-modalid='selwidgetgroup' title='Ajouter un widget'><i class='fa fa-cubes fa-fw'></i></a></li>
 {% endblock %}

{% block body %}
    <div id="pagecontainer"></div>

    <div id="selmenu" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div id="mymodalheader" class="modal-header">
                    <h4 class="modal-title">SELECTIONNER UNE PAGE</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div id="pagesportal" style="display:none">
                        {% for page in pagesportal %} 
                            {%if loop.first %}
                                <div class="card mb-3">
                                    <div class="card-header">PAGES PORTAIL</div>
                                    <ul class="list-group list-group-flush">
                            {%endif%}

                            <a class="list-group-item" onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','portal','{{page.pagecategory.id==1?page.toreload:true}}',null,'{{page.name}}')">
                                {% if page.fonticon %}
                                    <i class="{{ page.fonticon }} fa-fw"></i>
                                {% elseif loop.first %}
                                    <i class="fas fa-home fa-fw"></i>
                                {% else %}
                                    <i class="fas fa-door-closed fa-fw"></i>
                                {% endif %}                   
                                {{ page.name }}
                            </a>

                            {%if loop.last %}
                                </ul></div>
                            {%endif%}
                        {% endfor %}
                    </div>

                    <div id="pagesuser" style="display:none">
                        {% for page in pagesuser %} 
                            {%if loop.first %}
                                <div class="card mb-3">
                                    <div class="card-header">PAGES PERSONNEL</div>
                                    <ul class="list-group list-group-flush">
                            {%endif%}

                            <a class="list-group-item"  onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','user','{{page.pagecategory.id==1?page.toreload:true}}',null,'{{page.name}}')">
                                {% if page.fonticon %}
                                    <i class="{{ page.fonticon }} fa-fw"></i>
                                {% else %}
                                    <i class="fas fa-user fa-fw"></i>
                                {% endif %}                 
                                {{ page.name }}
                            </a>

                            {%if loop.last %}
                                </ul></div>
                            {%endif%}       
                        {% endfor %}               
                    </div>

                    <div id="pagesgroup">
                        {% for groupshared in groups %}
                            {%if loop.first %}
                                <div class="card mb-3">
                                    <div class="card-header">PAGES GROUPE DE TRAVAIL</div>
                                    <ul class="list-group list-group-flush">
                            {%endif%}

                            {% for page in groupshared.pagesshared %} 
                                <a class="list-group-item"  onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','group','{{page.pagecategory.id==1?page.toreload:true}}',{{groupshared.id}},'{{page.name}}')">
                                    {% if page.fonticon %}
                                        <i class="{{ page.fonticon }} fa-fw"></i>
                                    {% else %}
                                        <i class="fas fa-users fa-fw"></i>
                                    {% endif %}                 
        
                                    {{page.name == groupshared.label ? page.name : groupshared.label~" - "~page.name}}
                                </a>
                            {% endfor %}

                            {%if loop.last %}
                                </ul></div>
                            {%endif%}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div> 
    </div>

    <div id="selwidgetuser" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div id="mymodalheader" class="modal-header">
                    <h4 class="modal-title">SELECTIONNER UN WIDGET</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <table id="dataTablesuser" class="table table-striped table-bordered table-hover" style="width:100%">
                        <thead>
                            <tr>
                                <th class="no-sort" width="80px"></th>
                                <th width="100px">Nom</th>
                                <th class="no-sort" width="500px">Description</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for widget in widgetsuser %}
                                <tr>
                                    <td>
                                        <a onClick="selWidget({{ widget.id }},'user')" style="cursor:pointer;">
                                            <img id="widgettype-{{ widget.id }}" class="grid-item-img" height="40" src="{{path('app_minio_image',{file:widget.icon.label}) }}" style="padding:2px">
                                        </a>
                                    </td>
                                    <td>{{ widget.name }}</td>
                                    <td>{{ widget.description }}</td>
                                </tr>
                            {% endfor %}  
                        </tbody>
                    </table>                        
                </div>
            </div>
        </div>
    </div>  

    <div id="selwidgetgroup" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div id="mymodalheader" class="modal-header">
                    <h4 class="modal-title">SELECTIONNER UN WIDGET</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <table id="dataTablesgroup" class="table table-striped table-bordered table-hover" style="width:100%">
                        <thead>
                            <tr>
                                <th class="no-sort" width="80px"></th>
                                <th width="100px">Nom</th>
                                <th class="no-sort" width="500px">Description</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for widget in widgetsgroup %}
                                <tr>
                                    <td>
                                        <a onClick="selWidget({{ widget.id }},'group')" style="cursor:pointer;">
                                            <img id="widgettype-{{ widget.id }}" class="grid-item-img" height="40" src="{{path('app_minio_image',{file:widget.icon.label}) }}" style="padding:2px">
                                        </a>
                                    </td>
                                    <td>{{ widget.name }}</td>
                                    <td>{{ widget.description }}</td>
                                </tr>
                            {% endfor %}  
                        </tbody>
                    </table>                        
                </div>
            </div>
        </div>
    </div>  
{% endblock %}

{% block localscript %}
<script>
    var idpage;
    $('document').ready(function(){

        // Afficher la page courrante
        {% for page in pagesportal %} 
            {% if page.id==entity.id %}
                showPage({{ page.id }}, {{ page.pagecategory.id }},'{{ page.canupdate }}','portal',false,null,'{{page.name}}');
            {% endif %}
        {% endfor %}
        
        {% for page in pagesuser %} 
            {% if page.id==entity.id %}
                showPage({{ page.id }}, {{ page.pagecategory.id }},'{{ page.canupdate }}','user',false,null,'{{page.name}}');
            {% endif %}
        {% endfor %}      
        
        {% for groupshared in groups %}
            {% for page in groupshared.pagesshared %}
                {% if page.id==entity.id %}
                    showPage({{ page.id }}, {{ page.pagecategory.id }},'{{ page.canupdate }}','group',true,{{groupshared.id}},'{{page.name}}');
                {% endif %}
            {% endfor %}       
        {% endfor %}


        // Rendre les pages user déplacable
        $("#menupagesuser").sortable({
            axis: "x",
            forcePlaceholderSize: true,
            placeholder: "placeholder",
            update:  function( event, ui ) {
                $('#pagesuser li').each(function(order) {
                    var idpage=$(this).attr('id').replace("menupage-","");
                    $.ajax({
                        method: "POST",
                        url: "{{ path('app_'~access~'_page_user_order') }}",
                        data: {
                            id:idpage,
                            order:order
                        }
                    });
                });     
            }
        }); 

        // Initialisation du tableau des widgets selectionnable à la création
        $('.table').DataTable({
            columnDefs: [ { "targets": 'no-sort', "orderable": false }, { "targets": 0, "className": "text-center" } ],
            iDisplayLength: 10,
            order: [[ 1, "asc" ]],
            scrollX: false,
        }); 


    });

    // Affichage des frames associés aux items de bureau
    function showItemframe(id,url,forcereload) {
        $(".pageframereload").remove();
        $(".pageframe").hide();

        // Si force le rechargement et frame existante on la détruit
        if(forcereload&&$("#frameitem-"+id).length)
            $("#frameitem-"+id).remove();

        // Si la frame en cours existe déjà on l'affiche
        if($("#frameitem-"+id).length)
            $("#frameitem-"+id).show();         
        // Sinon on la génère
        else {
            var myclass="";
            if(forcereload) myclass="pageframereload";
            $("#pagecontainer").append("<iframe onload='this.contentWindow.focus()' id='frameitem-"+id+"' class='pageframe "+myclass+"' src='"+url+"' style='border:none; width:100%'></iframe>");
        }
        
        Resize();
    }

    // Affichages des pages
    function showPage(id,catid,canupdate,usage,forcereload,groupid,pagename) {
        // Sauvegarder la page en cours
        idpage=id;   

        // Cacher toutes les pages
        $(".pageframereload").remove();
        $(".pageframe").hide();
        $(".dropdown-menu").hide();

        // Rendre actif le page en cours dans le menu
        $(".menupage").removeClass("active");
        $(".dropdown-toggle").removeClass("active");

        $("#menupage-"+id).addClass("active");
        $("#menugroup-"+groupid).addClass("active");
        

        if(usage=="portal")
            var url="{{ path('app_all_page_portal_view',{id:'xx'}) }}";
        else if(usage=="user")
            var url="{{ path('app_all_page_user_view',{id:'xx'}) }}";
        else 
            var url="{{ path('app_all_page_group_view',{id:'xx'}) }}";

        url=url.replace('xx',id);

        passurl="{{ path('app_home',{id:'xx'}) }}";
        passurl=passurl.replace('xx',id);
        history.pushState('data to be passed', 'Title of the page', passurl);

        // Si force le rechargement et frame existante on la détruit
        if(forcereload&&$("#page-"+id).length)
            $("#page-"+id).remove();

        // Si la frame en cours existe déjà on l'affiche
        if($("#page-"+id).length)
            $("#page-"+id).show();
        // Sinon on la génère
        else {
            var myclass="";
            if(forcereload) myclass="pageframereload";
            $("#pagecontainer").append("<iframe onload='this.contentWindow.focus()' id='page-"+id+"' data-category='"+catid+"' class='pageframe "+myclass+"' src='"+url+"' style='border:none; width:100%'></iframe>");    
        }

        // Cacher les actions possibles sur la page
        $("#menuupdate").hide();
        $("#menushare").hide();
        $("#menudelete").hide();
        $("#menuwidgetuser").hide();
        $("#menuwidgetgroup").hide();

        if(canupdate) {
            $("#menuupdate").show();
            $("#menudelete").show();
        }

        // Si page de type widget on affiche la selection des widgets à insérer
        if($("#page-"+id).data('category')==2&&canupdate) {
            if(usage=="user") $("#menuwidgetuser").show();    
            if(usage=="group") $("#menuwidgetgroup").show();    
        }

        Resize();
    }


    function submitPage() {
        var url="{{ path('app_'~access~'_page_user_submit') }}";
        $(location).attr('href',url);
    }  

    function updatePage() {
        if($("#page-"+idpage).length) {
            var url="{{ path('app_'~access~'_page_user_update',{id:'xx'}) }}";
            url=url.replace('xx',idpage);

            $(location).attr('href',url);
        }
    }    

    function deletePage() {
        if($("#page-"+idpage).length) {
            if (confirm('Êtes-vous sûr de vouloir supprimer ?')) {
                var url="{{ path('app_'~access~'_page_user_delete',{id:'xx'}) }}";
                url=url.replace('xx',idpage);

                $(location).attr('href',url);
            }
        }
    }  

    // Création d'un widget selectionné
    function selWidget(idwidgettype,usage) {
        var url="{{ path('app_all_pagewidget_widget_sumbit',{idpage:'yy',idwidgettype:'xx',usage:'zz'})}}";
        url=url.replace('xx',idwidgettype);
        url=url.replace('yy',idpage);
        url=url.replace('zz',usage);
        
        $(".modal").modal("hide");
        $("#page-"+idpage).attr("src",url);
    };      

</script>
{% endblock %}