{% extends 'admin\\baseadmin.html.twig' %}
{% block content%}
    <!--START PAGE CONTENT -->

    {# Modal Roles #}
        {% include 'admin\\stdpages\\modalroles.html.twig' %}
        {% include 'admin\\stdpages\\modallanguage.html.twig' %}
    {# End Modal Attributes #}
    <section class="page-content container-fluid">
        <div class="row">
            <div class="col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header">
                        {# {% trans %}stdpages.pages{% endtrans %} #}
                        <ul class="actions top-right">
                            <li><a href="javascript:void(0)" data-q-action="card-expand"><i class="icon dripicons-expand-2"></i></a></li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="">
                            <table class="table table-striped table-bordered datatable-init tablepages" style="width:100%;margin-bottom:118px !important">
                                <thead>
                                    <tr>
                                        <th>{{'name'|trans({},'studio')}}</th>
                                        <th>{{'description'|trans({},'studio')}}</th>
                                        <th>{{'status'|trans({},'studio')}}</th>
                                        <th class="no-sort tableactions">{{'languageactions'|trans({},'studio')}}</th>
                                        <th class="no-sort tableactions">{{'actions'|trans({},'studio')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <style>

    .language{
    height: 30px;
    width: 30px;
    text-align:center;
    float:left;
    margin-right:3px;
    padding-top:5px;    
    cursor:pointer;
    }

    .language:hover{
    background-color :#5accca;
    -webkit-border-radius: 100px 100px 100px 100px;
    border-radius: 100px 100px 100px 100px;
    height: 30px;
    width: 30px;
    text-align:center;
    float:left;
    margin-right:3px;
    padding-top:5px;
    color:#fff;
    
    }

    .language_actions{
        width: 300px;
        height: 170px;
        position:relative;
        background:#81cdcc;
        margin-left:-305px;
        margin-top:-27px;
        text-align:left;
        display:none;     
        -webkit-box-shadow: 1px 3px 5px 3px rgba(214,214,214,0.85);
        -moz-box-shadow: 1px 3px 5px 3px rgba(214,214,214,0.85);
        box-shadow: 1px 3px 5px 3px rgba(214,214,214,0.85);    

    }
    .language_actions div{
        color:#000;
        margin-left:10px;
        padding-top:10px;    
    }

    .language_actions i{
        color:#000;
        font-size:18px        
    }
    .language_actions a{
        color:#000;        
    }
    .language_actions a:hover{
        color:#999;        
    }

    .more_language{
        -webkit-box-shadow: 3px 5px 3px 0px rgba(214,214,214,0.85);
        -moz-box-shadow: 3px 5px 3px 0px rgba(214,214,214,0.85);
        box-shadow: 3px 5px 3px 0px rgba(214,214,214,0.85);
        float:right;
        background:#81cdcc;
        position:relative;
        height:35px;
        width:35px;
        margin-right:-35px;
        top:-31px;
        border-left:none;
    }

    .more_language .circle{
        -webkit-border-radius: 100px 100px 100px 100px;
        border-radius: 100px 100px 100px 100px;
        height: 28px;
        width: 28px;
        text-align:center;
        background:#77c2c7;
        margin-left:3px;
        margin-top:-6px;
        color:#fff;
        padding-top:4px;
    }

    .plus{
        -webkit-border-radius: 100px 100px 100px 100px;
        border-radius: 100px 100px 100px 100px;
        font-size:18px;
        height: 28px;
        width: 28px;
        cursor:pointer;
        background:#e5eefd;
        float:left;
        text-align:center;
        padding-top:1px;
        color:#77c2c7;
    }

    .circle_modal{
        -webkit-border-radius: 100px 100px 100px 100px;
        border-radius: 100px 100px 100px 100px;
        font-size:16px;
        height: 30px;
        width: 30px;
        cursor:pointer;
        background:#e5eefd;
        float:left;
        text-align:center;
        padding-top:1px;
        color:#77c2c7;
        margin-bottom:20px;
        margin-right:5px;
    }

    .circle_modal:hover{
    background-color :#5accca;
    -webkit-border-radius: 100px 100px 100px 100px;
    border-radius: 100px 100px 100px 100px;
    height: 30px;
    width: 30px;
    text-align:center;
    float:left;   
    color:#fff;
    
    }

     .tableactions > a > i{
        font-size: 24px
    }

    .show-choose-languages{
        width: 350px;
        margin: 0 auto;
    }
    .show-choose-languages .modal-body{
        text-align:center;
    }
   
        


    </style>
{% endblock %}
{% block javascripts %}
{{parent()}}
    <script>
         
        const getLanguageRoute = '{{ path('admin_snippets_get_languages') }}';

        $('body').on('click','.language',function(e){
            let trigger = this;
            let table = trigger.closest('table');
            table.querySelectorAll('.language').forEach(element => {
                if (element !== trigger && element.classList.contains('open')) {
                    element.classList.remove('open');
                    $(element.querySelector('.language_actions')).hide();
                } else if (element === trigger) {
                    trigger.classList.toggle('open');
                    $(trigger.querySelector('.language_actions')).toggle(trigger.classList.contains('open'));
                }
            });
        });  

        var config={
            processing: true,
            serverSide: true,
            stateSave: true,
            stateDuration: -1,
            ajax: {
                url:"{{app.request.uri}}",
                type:"POST"
            },
            language: {
                "sEmptyTable": "{{'emptytable'|trans({},'studio')}}",
                "sLoadingRecords": "{{'loadingrecords'|trans({},'studio')}}",
                "sProcessing": "{{'processing'|trans({},'studio')}}",
                "sLengthMenu": "{{'showmenulength'|trans({},'studio')}}",
                "sZeroRecords":  "{{'zerorecords'|trans({},'studio')}}",
                "sSearch": "{{'searchlabel'|trans({},'studio')}}",
                "sInfo":   "{{'infostart'|trans({},'studio')}}",
                "sInfoFiltered": "{{'infofiltered'|trans({},'studio')}}",
                "sInfoEmpty":    "{{'infoempty'|trans({},'studio')}}",
                "oPaginate": {
                    "sFirst":    "{{'first'|trans({},'studio')}}",
                    "sPrevious": "{{'previous'|trans({},'studio')}}",
                    "sNext":     "{{'next'|trans({},'studio')}}",
                    "sLast":     "{{'last'|trans({},'studio')}}"
                },
            },
            columns: [
                { data: 'name' },
                { data: 'description' },
                { data: 'status' },
                { data: 'language_actions',width:'140px',                
                render: function (data,type,row,meta){       
                
                    
                var result = "";
                if(data.languages){
                    jQuery.each(data.languages.split(';'),function(index,item){
                        if(index == 0){
                            result += '<div class="language active" language-id="'+meta.row+index+'">'+item;
                        }else{
                            result += '<div class="language" language-id="'+meta.row+index+'">'+item;                        
                        }                    
                        ///{_locale}/admin/snippets/edit/{id}/{language_code}
                        result += '<div class="language_actions" language-action-id="'+meta.row+index+'"><div>{{'languageactions'|trans({},'studio')}}</div>';
                        result += '<div class="more_language"><div class="circle">'+item+'</div></div>';
                        result += '<div><a href="/{{ app.request.getLocale() }}/admin/snippets/edit/'+row.id+'/'+item+'"><i title="edit" class="la la-edit"></i> {{'edit'|trans({},'studio')}}</a></div>';
                        result += '<div class="show-modal-languages" data-id-content="snippet" data-id-snippet='+row.id+' data-id-page='+row.id+' data-id-language="'+item+'"><i title="copy" class="la la-copy"></i> Replicar idioma</div>'
                        result += '<div><a href="/{{ app.request.getLocale() }}/admin/snippets/removelanguage/'+row.id+'/language/'+item+'"><i title="delete" class="la la-trash"></i> {{'delete'|trans({},'studio')}}</a></div>';
                        result +=  '</div> ';
                        result +=  '</div> ';
                    });

                }

                 if(data.add){
                    result += '<div class="plus"><a href="/{{ app.request.getLocale() }}/admin/snippets/edit/'+row.id+'/0"><i title="mais" class="la la-plus"></i></a></div>';
                 }
                return result;
                } },
                { data: 'actions', width: '140px',
                  render: function (data,type,row,meta){
                      var result='';
                      jQuery.each(data,function(index,item){
                          switch (item.type){
                              case "view" :
                                cssclass='la la-external-link';
                                target='target="_blank"';
                                itemfunction='';
                                title="{{'view'|trans({},'studio')}}";
                                break;
                              case "edit":
                                  cssclass='la la-edit';
                                itemfunction='';
                                target='';
                                title="{{'edit'|trans({},'studio')}}";
                                break;
                              case "delete":
                                cssclass='la la-trash';
                                itemfunction='';
                                target='';
                                title="{{'delete'|trans({},'studio')}}";
                                break;
                            case "copy":
                                cssclass='la la-copy';
                                itemfunction='';
                                target='';
                                title="{{'copy'|trans({},'studio')}}";
                                break;
                            case "favorite":
                                cssclass='la la-heart-o';
                                itemfunction='';
                                target='';
                                title="{{'favorite'|trans({},'studio')}}";
                                break;
                            case "removeFavorite":
                                cssclass='la la-heart';
                                itemfunction='';
                                target='';
                                title="{{'removefavorite'|trans({},'studio')}}";
                                break;
                            case "roles":
                                cssclass='la la-user';
                                itemfunction='';
                                target='';
                                title="{{'addpersonas'|trans({},'studio')}}";
                               
                                break;
                          }
                          result+='<a href="'+item.url+'" class="'+item.type+'" ' + target+' ' + (item.roles ? ('data-roles="' + item.roles + '"') : '') + '><i title="'+title+'" class="'+cssclass+'" '+itemfunction+'></i></a>';
                      });
                      return result;
                  } }
            ],
            columnDefs: [
                {
                    className: "tableactions", 
                    "targets": [ "tableactions" ],
                    orderable:false,
                    "targets": [ "tableactions" ]
                }
            ]
        };
        $('body').on("click",".delete",function(e){
            e.preventDefault();
            Swal.fire({
                title: "{{'deletealerttitle'|trans({},'studio')}}",
                text: "{{'deletealerttext'|trans({},'studio')}}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: "{{'confirmyes'|trans({},'studio')}}",
                cancelButtonText: "{{'confirmno'|trans({},'studio')}}"
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        url:$(this).attr("href"),
                        cache:false,
                        success:function(data){                            
                            $(".tablepages").data("datatable").ajax.reload(null,false);
                            if(data){
                                Swal.fire(
                                "{{'deletesuccesstitle'|trans({},'studio')}}",
                                "{{'deletesuccesstext'|trans({},'studio')}}",
                                'success'
                                )
                            }else{
                                Swal.fire(
                                "{{'deleteerrortitle'|trans({},'studio')}}",
                                "{{'deleteerrortext'|trans({},'studio')}}",
                                'error'
                                )
                            }
                        }
                    });
                }
            });
        });

        $('body').on("click",".copy",function(e){
            e.preventDefault();
            Swal.fire({
                title: "{{'copyalerttitle'|trans({},'studio')}}",
                text: "{{'copyalerttext'|trans({},'studio')}}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: "{{'confirmyes'|trans({},'studio')}}",
                cancelButtonText: "{{'confirmno'|trans({},'studio')}}"
            }).then((result) => {
                if (result.value) {
                    window.location.href=$(this).attr("href");
                }
            });

        })

         {% include 'admin\\stdpages\\modalroles.js.twig' %}
         {% include 'admin\\stdpages\\modallanguage.js.twig' %}


     

    </script>

    

    
{% endblock %}