{% extends 'admin\\baseadmin.html.twig' %}
{% trans_default_domain 'webusers' %}
{% block content%}
				<!--START PAGE CONTENT -->
				<section class="page-content container-fluid">
                    <div class="row">
                    <div class="modal fade show-choose-friendly-url" id="choose-friendly-url-modal" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-lg" role="document">
                            
                                <div class="modal-content">
                                  <form  method="post" action="{{ path('admin_web_roles_new') }}">

                                  <input type="hidden" name="idRole" value="">
                                    <div class="modal-header">
                                        <h5 class="modal-title">{{ 'add_role'|trans({},'pages')}}</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">                                      
                                        <div id="std_users_form">
                                            <div class="form-group">
                                                <label for="std_users_form_name">Nome</label><input type="text"  name="name" maxlength="255" class="form-control">
                                            </div>

                                           
                                            <div class="form-group">
                                            <p class="f-w-400 font-size-12  m-t-20">Imagem</p>
                                                {% for img in imgsPersonas %}
                                                
                                                <div class="custom-control custom-radio custom-control-inline">
                                                    <input type="radio" id="{{img}}" name="image" class="custom-control-input" value="{{img}}">
                                                    <label class="custom-control-label" for="{{img}}"><img src="{{ asset('/assets/personas/')}}{{img}}" width="65"></label>
                                                </div>
                                                 {% endfor %}
                                                
                                            </div>
                                            <div class="form-group">


                                                <div class="custom-control custom-checkbox checkbox-primary">
                                                    <input type="checkbox" class="custom-control-input check-page" checked="checked" value="1" id="check_page_id" name="isActive">
                                                    <label class="custom-control-label" for="check_page_id">Active</label>
                                                </div>
                                            
                                                
                                            </div>
                                            <div class="form-group">
                                                 <div class="custom-control custom-checkbox checkbox-primary">
                                                    <input type="checkbox" class="custom-control-input check-page" value="1" id="check_page_id2" name="isDefault">
                                                    <label class="custom-control-label" for="check_page_id2">Default</label>
                                                </div>
                                            </div>
                                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <input type="submit" class="btn btn-success" value="{{ 'save'|trans({},'pages')}}">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'close'|trans({},'studio')}}</button>
                                    </div>
                                    </form>
                                </div>
                            
                        </div>
                    </div>
                        <div class="col-lg-12 col-xl-12">
                        <input type="hidden" value="" name="selectedRole" id="selectedRole">

                            <div class="card">
                                <div class="card-header">
                                    {% trans %}Personas{% endtrans %}
                                    <ul class="actions top-right">
                                        <li><a href="javascript:void(0)"><i class="icon dripicons-plus" id="add_persona"></i></a></li>
                                        <li>
								    <i class="icon dripicons-gear" style="cursor:pointer" id="enable_title"></i>
							</li>
                                    </ul>
                                </div>
                                <div class="card-body">
                                 <div class="row p-15">
                                   
                                        <div class="col-lg-2  col-md-2 col-xl-2" style="border-left:3px solid #fff;margin-bottom:5px" data-id="#">
                                        <div class="row handle">									
                                              
                                        </div>

                                            <div class="row box-color text-center all" style="color:#fff;padding:10px;height:120px;">
                                                <div class="col-md-12 " >
                                                <a href="#" style="color:#FFF">
                                                   
                                                        <!--<i class="icon dripicons-user" style="margin-top:14px;font-size:23px;color:#778DC9"></i>-->
                                                        <img src="{{ asset('/assets/personas/PersonaAll.png')}}"  width="70">
                                                    
                                                </a>
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="sub-title" style="font-weight:bolder;font-size:13px">
                                                        <a href="#" style="color:#FFF">
                                                            All
                                                        </a>
                                                    </span>
                                                </div>

                                            </div>
                                        </div> 
                                        

                                {% for persona in personas %}
                               
                                    <div class="col-lg-2  col-md-2 col-xl-2" style="border-left:3px solid #fff;margin-bottom:5px">
                                        <div class="row handle">									

                                                <a href="#" style="text-align:right">
                                                    <i class="icon dripicons-pencil edit-role" style="font-size:14px;right:32px;top:6px;position:absolute"  data-id="{{persona.id}}"></i>
                                                </a>

                                                <a href="{{path('admin_web_roles_delete',{'id' : persona.id})}}" style="text-align:right">
                                                    <i class="icon dripicons-trash" style="font-size:14px;right:7px;top:6px;position:absolute"></i>
                                                </a>
                                        </div>
										<div class="row box-color text-center" style="background-color:#77C9C8;color:#fff;padding:10px;height:120px;"  data-id="{{persona.name}}">
											<div class="col-md-12 " >
										
												{# <div style=" border-radius: 30px; background: #FFF;height:60px;width:60px;margin: 0 auto;">
													<i class="icon dripicons-user" style="margin-top:14px;font-size:23px;color:#77C9C8"></i>
												</div> #}
                                                <img src="{{ asset('/assets/personas/')}}{{persona.image}}" width="65">
											
											</div>
											<div class="col-md-12">
												<span class="sub-title" style="font-weight:bolder;font-size:13px;color:#FFF">
												
														{{persona.name}}
													
												</span>
										    </div>

									    </div>
                                    </div>                                
                                {% endfor %}
                                </div>
                            </div>
                            </div>
                       


                            <div class="card">
                                <div class="card-header">
                                    <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-responsive">
                                        <table class="table table-striped table-bordered datatable-init" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>{% trans %}username{% endtrans %}</th>
                                                    <th>{% trans %}email{% endtrans %}</th>
                                                    <th>{% trans %}roles{% endtrans %}</th>
                                                    <th>{% trans %}status{% endtrans %}</th>
                                                    <th class="no-sort tableactions">{% trans %}actions{% endtrans %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
{% endblock %}
{% block javascripts %}
{{parent()}}
    <script>

        var config={
            processing: true,
            serverSide: true,
            stateSave: true,
            stateDuration: -1,
            //serverMethod: 'post',
            //'searching': false, // Remove default Search Control
            ajax: {
            'url':'/{{ app.request.getLocale() }}/admin/webusers',
            'data': function(data){
                // Read values
                var selectedRole = $("#selectedRole").val();
               
                // Append to data
                data.selectedRole = selectedRole;                
            }
            },
            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: 'username' },
                { data: 'email' },
                { data: 'roles' },
                { data: 'status' },
                { data: 'actions',
                  render: function (data,type,row,meta){
                      var result='';
                      jQuery.each(data,function(index,item){
                          switch (item.type){
                              case "edit":
                                cssclass='edit';
                                itemfunction='';
                                break;
                              case "delete":
                                cssclass='trash';
                                itemfunction='onclick="return confirm(\'Are you sure?\')"';
                                break;
                          }
                          result+='<a href="'+item.url+'"><i class="la la-'+cssclass+'" '+itemfunction+'></i></a>';
                      });
                      return result;
                  } }
            ],
            columnDefs: [
                {
                    className: "tableactions", 
                    "targets": [ "tableactions" ],
                    orderable:false,
                    "targets": [ "tableactions" ]
                }
            ]
        };

    $("#add_persona").click(function(){
        $('input[name=idRole]').val("");
        $('input[name=name]').val("");  
        $(".show-choose-friendly-url").modal("show");

    });

    $('.box-color').not('.roxo').on("mouseover", function (e) {
    $(this).attr('style', "color:#fff;padding:10px;height:120px;background-color:#778DC9")
    });
    $('.box-color').not('.roxo').on("mouseout", function (e) {
    $(this).attr('style', "color:#fff;padding:10px;height:120px;background-color:#77C9C8")
    });


    $("#enable_title").on("click", function (e) {
    $('.handle').show();

    });
    $('.box-color').on("click", function (e) {
       
        $('.box-color').removeClass('roxo');
        value= $(this).attr('data-id');
        $('.all').addClass('verde');
         $("#selectedRole").val(value);

        $(this).addClass('roxo');

        $("input[aria-controls='DataTables_Table_0']").val(value);
        $("input[aria-controls='DataTables_Table_0']").keyup();
     })

     $('.all').addClass('roxo');

$('.edit-role').on("click", function (e) {
    value1= $(this).attr('data-id');
   
    
     $.ajax({
            url: '/{{ app.request.getLocale() }}/admin/webroles/info',
            type: "POST",
            data: {
            'id': value1
             },
             success: function (html) {

                
                 $('input[name=idRole]').val(html.id);
                 $('input[name=name]').val(html.name);             

                if(html.default == true)
                   {                      
                       $('input[name=isDefault]').prop("checked",true);
                   } 
                 $("input[name='image'][value='"+html.image+"']").prop("checked",true);
                 $(".show-choose-friendly-url").modal("show");
            }
    });
});



    </script>

    <style>
    .handle {
        background: #f5f5f5 !important;
        display: none;
        height: 25px;
    }

    .roxo {
        background: #778DC9 !important;
    }

    .verde {
        background: #77C9C8 ;
    }
      .custom-control .custom-control-label {padding-top:4px;}
      
      .custom-radio .custom-control-label::before{margin-top:20px !important;}
      .custom-radio .custom-control-label::after{margin-top:20px !important;}
      .box-color{cursor:pointer}
    </style>
{% endblock %}