@extends('auth::layoutsbs4.main',['page_title' => 'Auth::User Lists',
'hide_nva_link' => ((Request::get('hide_header') == 'true')? 'true' : 'false')
])
@section('content')
  <style>
  .select2-result-repository__meta {
      margin-left: 0px;
  }
  </style>
@if ($agent_type == 'desktop')
  {{-- <div class="page-header page-header-light mb-2 ">
      <div class="breadcrumb-line   header-elements-md-inline">
        <div class="page-title d-flex pb-2 pt-2">
          <h6><a href="javascript:history.back()" class="" data-popup="tooltip" title="Go Previous"><i class="icon-arrow-left52 mr-2"></i></a><b class="font-weight-semibold"> Users </b> - <span > Entry</span>  </h6>
          <a href="" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
        </div>
       <div class="header-elements d-none">
          <div class="breadcrumb justify-content-center">
            <a href="{{ route("cabinet.selection") }}" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
            <span class="breadcrumb-item">Menu Access</span>
            <span class="breadcrumb-item active">User Lists</span>
          </div>
        </div>
     </div>
  </div> --}}
@else
  {{-- <div class="row mt-0">
    <div class="col-12">
      <div class="card mb-2 shadow-sm border-0">
        <div class="card-header bg-white p-2 header-elements-inline">
          <h6 class="card-title"><i class="icon-copy mr-2 text-theme"></i>User Lists</h6>
          <div class="header-elements">
            <a href="javascript:history.back()" class="float-right text-theme"><i class="icon-arrow-left52 mr-2"></i>Go Back</a>
          </div>
        </div>
      </div>
    </div>
  </div> --}}
@endif
<div class="row mb-4" id="list_user_blog" >
  <div class="col-md-12">
        <div class="card">
          <div class="card-header bg-white py-1 px-2 header-elements-inline">
            <h6 class="card-title"><i class="icon-users mr-2 text-theme"></i>List </h6>
            <div class="header-elements">
              <a href="#" class="bg-theme btn-sm float-right manage_users"><i class="icon-plus2 mr-1"></i>Add Users</a>
            </div>
          </div>
          <div class="card-body p-2">
            <form id="filters_form">
              <input type="hidden" name="emp_type" value="O">
            <div class="row">
              <div class="col-md-2">
                <div class="form-group">
                  <label>Cabinet</label>
                  <select class="form-control filter_cabinet_select2" name="cabinet_id">
                    @if (Request::get('cabinet_id'))
                      <option value="{{ Request::get('cabinet_id') }}" selected>{{ Request::get('cabinet_name') }}</option>
                    @endif
                  </select>
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group">
                  <label>Main Module </label>
                  <select class="form-control filter_main_module_select2" name="main_module_id">
                    @if (Request::get('main_module_id'))
                      <option value="{{ Request::get('main_module_id') }}" selected>{{ Request::get('main_module_name') }}</option>
                    @endif
                  </select>
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group">
                  <label>Sub Module</label>
                  <select class="form-control filter_sub_module_select2" name="sub_module_id">
                    @if (Request::get('sub_module_id'))
                      <option value="{{ Request::get('sub_module_id') }}" selected>{{ Request::get('sub_module_name') }}</option>
                    @endif
                  </select>
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group">
                  <label>User Type</label>
                  <select class="form-control filter_user_type_select2" name="user_type"></select>
                </div>
              </div>
              <div class="col-md-1 col-12">
                <div class="form-group ">
                  <label class="invisible d-none d-sm-inline-block">Display</label>
                  <button class="btn bg-theme btn-block btn-theme text-center other_filters_form_btn">Display</button>
                </div>
              </div>
            </div>
            </form>
            <div class="table-responsive">
              <table class="table user_table table-striped table-bordered">
                 <thead class="no-wrap">
                    <tr>
                      <th class="d-block d-sm-none invisible"></th>
                       <th class="text-center">SL No.</th>
                       <th>Cabinet</th>
                       <th>Sub Module</th>
                       <th>User Name</th>
                       <th>Employee Name</th>
                       <th>Designation</th>
                       <th>User Type</th>
                       <th class="text-center" >Action</th>
                    </tr>
                 </thead>
                 <tbody>
                 </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row mb-4" id="manage_user_blog" style="display:none">
      <div class="col-md-12">
            <div class="card">
              <div class="card-header bg-white header-elements-inline py-1 px-2">
                 <h6 class="card-title"><i class="icon-pencil7 text-theme mr-2" aria-hidden="true"> </i>Manage</h6>
                 <div class="header-elements"></div>
               </div>
              <div class="card-body p-2">
                <form id="form_validation">
                  <input type="hidden" name="emp_type" value="O">
                  <div class="row">
                    <div class="col-md-3">
                      <div class="form-group">
                        <label>Employee ID <span class="text-danger">*</span></label>
                        <select class="form-control employee_select2" name="employee_id"></select>
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group">
                        <label>Employee Name</label>
                        <input type="text" name="employee_name" value="" class="form-control" placeholder="Employee Name">
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group">
                        <label>Cabinet <span class="text-danger">*</span></label>
                        <select class="form-control cabinet_select2" name="cabinet_id">
                          @if (Request::get('cabinet_id'))
                            <option value="{{ Request::get('cabinet_id') }}" selected>{{ Request::get('cabinet_name') }}</option>
                          @endif
                        </select>
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group">
                        <label>User Type <span class="text-danger">*</span></label>
                        <div class="form-group mt-1">
                           <div class="form-check-inline">
                             <label class="form-check-label">
                               <input type="radio" name="user_type" class="form-input-styled user_type_selection" value="A" checked>
                               Admin
                             </label>
                           </div>
                           <div class="form-check-inline">
                             <label class="form-check-label">
                               <input type="radio" name="user_type" class="form-input-styled user_type_selection" value="O">
                               Other User Types
                             </label>
                           </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row mb-3 sub_module_list_blog"  style="display:none;">
                    <div class="col-md-12">
                      <div class="table-responsive">
                         <table class="table table-bordered sub_module_list_table">
                            <thead class="bg-indigo">
                              <tr >
                                  <th>Module Name</th>
                                  <th class="">Sub Module</th>
                                  <th> User Type</th>
                                  <th style="width:15%;" >Grant Permission</th>
                               </tr>
                            </thead>
                            <tbody>
                            </tbody>
                         </table>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <button type="submit" class="btn mr-2 bg-indigo text-white-800 border-indigo" id="form_submit_btn">Save </button>
                        <button type="button" class="btn mr-2  bg-dark text-white-800 border-dark  legitRipple" id="form_process_btn" style="display:none;" >Processing <i class="icon-spinner2 spinner ml-1"></i></button>
                        <button type="button" class="btn  bg-warning text-white-800 border-warning btn_clear" data-dismiss="modal">Cancel </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>

<script>
   var base_url = {!! json_encode(url('/')) !!};
   $('body').tooltip({
       selector: '[data-popup="tooltip"]',
       trigger : 'hover'
   });

   document.addEventListener('DOMContentLoaded', function() {

     $.extend( $.fn.dataTable.defaults, {
       autoWidth: true,
       dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
       language:{
         search: '<span>Search:</span> _INPUT_',
         searchPlaceholder: 'Type to search...',
         lengthMenu: '<span>Show:</span> _MENU_',
         paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'}
       }
     });

     function update_data(){
       $('#page_loader_modal').modal();
       var form_values = $("#filters_form").serializeArray();
       form_values.push({
           name: "user_type",
           value: "%"
       });
       form_values = jQuery.param(form_values);
       $.get(base_url + '/api/auth/user/list',form_values)
        .done(function(result){
         var table_row = '';
         $('.user_table').dataTable().fnClearTable();
         $('.user_table').dataTable().fnDestroy();
         if(result.status == 'success'){
           $.each(result.data, function(key,value){
             if (jQuery.inArray(value.usertype,['SA','SY']) == -1) {
               table_row += '<tr class="no-wrap">'+
                        '<td class="d-block d-sm-none"></td>'+
                         '<td class="text-center" >'+ (++key) +'</td>'+
                         '<td >'+ ((value.CabinetName)? value.CabinetName : '') +'</td>'+
                         '<td >'+ ((value.SubModuleName)? value.SubModuleName : '') +'</td>'+
                         '<td >'+ value.userid +'</td>'+
                         '<td >'+ value.employeename +'</td>'+
                         '<td >'+ value.designation +'</td>'+
                         '<td >'+ value.usertype_desc  +'</td>'+
                         '<td class="text-center" >'+
                           '<button type="button" class="btn btn-outline btn-sm btn-clean btn-icon btn-icon-md action-btn bg-danger-400 rounded-round text-danger-800  delete_record mr-2" data-id="'+ value.ID +'" data-popup="tooltip" data-placement="auto" data-animation="true" title="Discontinue Record"><i class="icon-trash"></i></button>'+
                         '</td>'+
                       '</tr>';
             }
           });
         }
         $('.user_table').find('tbody').empty().append(table_row);
          var is_mobile = window.matchMedia("only screen and (max-width: 760px)").matches;
          if(is_mobile){
             if (window.matchMedia("(orientation: landscape)").matches) {
               $('.user_table').dataTable({
                 destroy:true,
                 "autoWidth": true,
                 "ordering": false,
                 columnDefs: [
                 {
                   className: 'control',
                   orderable: false,
                   targets:   0,
                 },
                 ]
               });
             }
             if (window.matchMedia("(orientation: portrait)").matches) {
               $('.user_table').dataTable({
                 destroy:true,
                 "ordering": false,
                 responsive: true,
                 columnDefs: [
                 {
                   className: 'control',
                   targets:   0,
                 },
                 ]
               });
             }
             } else {
                  $('.user_table').dataTable({
                    destroy:true,
                    "autoWidth": true,
                    "ordering": false,
                    columnDefs: [
                    {
                      className: 'control',
                      orderable: false,
                      targets:   0,
                    },
                    ]
                  });

                }
               $($.fn.dataTable.tables( true ) ).css('width', '100%');
             $('#page_loader_modal').modal('toggle');
         })
         .fail(function(xhr, status, error) {
            $('#page_loader_modal').modal('toggle');
             $('#server_response_message').text(error);
             $('#server_error_modal').modal();
         });

     }


     $('.employee_select2').select2({
       placeholder: "Search Employee",
       width: '100%',
       language: {
          noResults: function (params) {
            return "No Employee were found";
          }
        },
        allowClear: true,
        maximumSelectionSize: 1,
        // minimumInputLength:4,
        ajax: {
          url:  base_url + '/api/stellar_track/master/usp-list-user',
          dataType: 'json',
          async: true,
          data:{
            pagination:false
          },
          data: function (keyword) {
            return {
              search_param : keyword.term,
              // emp_type : '%Office Staff%'
            };
          },
          processResults: function (data) {
           return {
              results: $.map(data.data, function(value) {
                return {
                      text : value.employee_name,
                      id : value.employee_id,
                   }
              })
           };
          },
          cache: true
        },
        templateResult: formatEmployeeRepo,
        templateSelection: formatRepoEmployeeSelection,
        escapeMarkup: function (markup) { return markup; },
     }).on('change',function(e){
       // e.stopImmediatePropagation();
       if($(this).select2('data')[0]){
         $('[name="employee_name"]').val($(this).select2('data')[0].text);
       } else {
         $('[name="employee_name"]').val('');
         $('#form_validation').find('.user_type_selection[value="A"]').prop('checked', true).trigger('change')
       }
     });

     function formatEmployeeRepo (repo) {
     if (repo.loading) {
       return  repo.id || repo.text;
     }

     var $container = $(
       "<div class='select2-result-repository clearfix'>" +
       "<div class='select2-result-repository__avatar d-inline-block'></div>" +
         "<div class='select2-result-repository__meta'>" +
           "<div class='select2-result-repository__title'>"+ repo.text +"</div>" +
         "</div>" +
       "</div>"
     );
       $container.find(".select2-result-repository__title").text(repo.text);
       return $container;
     }

     function formatRepoEmployeeSelection (repo) {
       return repo.id || repo.text;
     }


     $('.filter_user_type_select2').select2({
       placeholder: "Select User Type",
       width: '100%',
       language: {
          noResults: function (params) {
            return "No User Type were found";
          }
        },
        allowClear: true,
        maximumSelectionSize: 1,
        // minimumInputLength:4,
        ajax: {
          url: base_url + '/api/auth/user-rights-type/list',
          dataType: 'json',
          async: true,
          data:{
            pagination:false
          },
          data: function (keyword) {
            return {
              search_param : keyword.term,
              emp_type : $('#form_validation').find('[name="emp_type"]').val(),
              discontinue_tag : 'N'
            };
          },
          processResults: function (data) {
           return {
              results: $.map(data.data, function(value) {
                if(jQuery.inArray(value.Type_UserRights_code,['SA','SY']) == -1){
                  return {
                        text : value.Type_UserRights+' - '+value.Type_UserRights_code,
                        id : value.Type_UserRights_code,
                  }
                }
              })
           };
          },
          cache: true
        },
        escapeMarkup: function (markup) { return markup; },
     });


      $('#form_validation').bootstrapValidator({
        message: 'This value is not valid',
        excluded: [':disabled', ':hidden', ':not(:visible)'],
           fields: {
             employee_id: {
               enabled : true,
                   validators: {
                     notEmpty: {
                         message: 'Employee is required'
                     },
                 }
             },
             cabinet_id: {
               enabled : true,
                   validators: {
                     notEmpty: {
                         message: 'Cabinet is required'
                     },
                 }
             },
          }
        }).on('success.field.bv', function(e, data) {
            var $parent = data.element.parents('.form-group');
            $parent.removeClass('has-success');
        }).on('success.form.bv', function(e, data) {
          e.preventDefault();
          var $form = $(e.target);
          var bv = $form.data('bootstrapValidator');
          $('#form_submit_btn').hide();
          $('#form_process_btn').show();
          $.post(base_url + '/api/auth/user/change-user-type-bulk', $form.serialize()).done(function(result) {
            bv.disableSubmitButtons(false);
            $('#form_submit_btn').show();
            $('#form_process_btn').hide();
            if(result.status == 'success' && result.response.type == 'save_success'){
              $('#form_validation').bootstrapValidator('resetForm',true);
              $.jGrowl(result.response.message, {
                 header: 'Success',
                 theme: 'bg-success alert-styled-left ',
                 position: 'top-right'
              });
              update_data();
              $('#list_user_blog').show();
              $('#manage_user_blog').hide();
            } else if(result.status == 'failure' && (result.response.type == 'validation_errors' || result.response.type == 'duplicate_entry')){
              $.jGrowl(result.response.message, {
                 header: 'Warning',
                 theme: 'bg-warning alert-styled-left ',
                 position: 'top-right'
              });
            } else {
              $.jGrowl(result.response.message, {
                 header: 'Warning',
                 theme: 'bg-danger alert-styled-left ',
                 position: 'top-right'
              });
            }
          }).fail(function(xhr, status, error) {
              bv.disableSubmitButtons(false);
              $('#form_submit_btn').show();
              $('#form_process_btn').hide();
              $('#server_response_message').text(error);
              $('#server_error_modal').modal();
          });
        });

        $(document).on('click','.manage_users',function(){
          $('#form_validation').bootstrapValidator('resetForm',true);
          $('#form_validation').find('[name="emp_type"]').val('O');
          $('#form_validation').bootstrapValidator('enableFieldValidators','cabinet_id',false);
          $('#form_validation').find('.cabinet_select2').val('').trigger('change');
          $('#form_validation').find('.employee_select2').val('').trigger('change');
          if ("{{ Request::get('cabinet_id') }}") {
            $('#form_validation').find('.cabinet_select2').empty().append(new Option("{{ Request::get('cabinet_name') }}","{{ Request::get('cabinet_id') }}",true)).trigger('change');
          }
          $('#form_validation').bootstrapValidator('enableFieldValidators','cabinet_id',true);
          $('#form_validation').find('.user_type_selection[value="A"]').prop('checked', true).trigger('change')
          $('#list_user_blog').hide();
          $('#manage_user_blog').show();
          $('.form-input-styled').uniform();
        });

        $(document).on('click','.delete_record', function(e) {
          $(this).tooltip('hide');
          var id = $(this).attr('data-id');
          swal({
              text: "You want to discontinue.",
              type: 'warning',
              showCancelButton: true,
              confirmButtonText: 'Yes',
              cancelButtonText: 'No, cancel!',
              confirmButtonClass: 'btn btn-success',
              cancelButtonClass: 'btn btn-danger',
              buttonsStyling: true
          }).then(function (result) {
            if(result.value == true) {
              $('#page_loader_modal').modal();
              $.post(base_url + '/api/auth/user/remove',{ 'id' : id}).done(function(result) {
                $('#page_loader_modal').modal('toggle');
                  if(result.status == 'success'){
                    $.jGrowl(result.response.message, {
                       header: 'Success',
                       theme: 'bg-success alert-styled-left ',
                       position: 'top-right'
                    });
                    update_data();
                  } else {
                    $.jGrowl(result.response.message, {
                       header: 'Failed',
                       theme: 'bg-danger alert-styled-left ',
                       position: 'top-right'
                    });
                  }
              }).fail(function(xhr, status, error) {
                  bv.disableSubmitButtons(false);
                  $('#page_loader_modal').modal('toggle');
                  $('#server_response_message').text(error);
                  $('#server_error_modal').modal();
              });
            }
          });
        });


                $(document).on('click','.other_filters_form_btn',function(e){
                  e.preventDefault();
                    update_data();
                });
                $('.cabinet_select2').select2({
                  placeholder: "Search Cabinet",
                  width: '100%',
                  language: {
                     noResults: function (params) {
                       return "No Cabinet were found";
                     }
                   },
                   allowClear: false,
                   maximumSelectionSize: 1,
                });

        $('.filter_sub_module_select2').select2({
          placeholder: "Search Sub Module",
          width: '100%',
          language: {
             noResults: function (params) {
               return "No Sub Module were found";
             }
           },
           allowClear: true,
           maximumSelectionSize: 1,
           // minimumInputLength:4,
           ajax: {
             url:  base_url + '/api/auth/sub-module/list',
             dataType: 'json',
             async: true,
             data: function (keyword) {
               return {
                 name : ((keyword.term)? '%' + keyword.term + '%' : ''),
                 main_module_id : $('.filter_main_module_select2').val()
               };
             },
             processResults: function (data) {
              return {
                 results: $.map(data.data, function(value) {
                   return {
                           text : value.ShortName + ' - ' + value.MainModuleName,
                           id : value.ID,
                      }
                 })
              };
             },
             cache: true
           },
           escapeMarkup: function (markup) { return markup; },
        });



        $('.filter_main_module_select2').select2({
          placeholder: "Search Main Module",
          width: '100%',
          language: {
             noResults: function (params) {
               return "No Main Module were found";
             }
           },
           allowClear: true,
           maximumSelectionSize: 1,
           // minimumInputLength:4,
           ajax: {
             url:  base_url + '/api/auth/main-module/list',
             dataType: 'json',
             async: true,
             data: function (keyword) {
               return {
                 name : ((keyword.term)? '%' + keyword.term + '%' : ''),
                 discontinue_tag : 'N',
                 cabinet_id : $('.filter_cabinet_select2').val()
               };
             },
             processResults: function (data) {
              return {
                 results: $.map(data.data, function(value) {
                   return {
                           text : value.ShortName,
                           id : value.ID,
                      }
                 })
              };
             },
             cache: true
           },
           escapeMarkup: function (markup) { return markup; },
        });


        $('.filter_cabinet_select2').select2({
          placeholder: "Search Cabinet",
          width: '100%',
          language: {
             noResults: function (params) {
               return "No Cabinet were found";
             }
           },
           allowClear: false,
           maximumSelectionSize: 1,
           // minimumInputLength:4,
           ajax: {
             url:  base_url + '/api/auth/cabinet/list',
             dataType: 'json',
             async: true,
             data:{
               pagination:false
             },
             data: function (keyword) {
               return {
                 search_param : keyword.term,
                 discontinue_tag : 'N'
               };
             },
             processResults: function (data) {
              return {
                 results: $.map(data.data, function(value) {
                   return {
                           text : value.Cabinet_Name,
                           id : value.CabinetID,
                      }
                 })
              };
             },
             cache: true
           },
           escapeMarkup: function (markup) { return markup; },
        });


            $(document).on('change','.user_type_selection',function(){
              $('.sub_module_list_table').find('tbody').empty();
              if ($('.user_type_selection:checked').val() == 'O') {
                if ($('.employee_select2').val()) {
                  var form_values = {
                    'cabinet_id' : $('.cabinet_select2').val(),
                    'employee_id' : $('.employee_select2').val(),
                    'sub_module_id' : '{{ Request::get("sub_module_id") }}'
                  }
                  $('#page_loader_modal').modal();
                  $.get(base_url + '/api/auth/user/sub-module-wise-user-type',form_values)
                   .done(function(result){
                     $('#page_loader_modal').modal('toggle');
                     $('.sub_module_list_blog').show();
                    var table_row = '';
                    if(result.status == 'success'){
                      $.each(result.data, function(key,value){
                        table_row += '<tr>'+
                                          ((value.rowspan != 'hide')? '<td class="" rowspan="'+value.rowspan+'">'+value.main_module_name+'</td>' : '') +
                                         '<td class="">'+value.sub_module_name+'<input type="hidden" name="sub_module_id['+ value.sub_module_id +']" value="'+ value.sub_module_id +'"></td>'+
                                         '<td class="no-wrap">'+
                                          '<select class="form-control user_type_select2" name="user_types['+ value.sub_module_id +']">'+
                                           ((value.assigned_id)? '<option value="'+ value.user_type +'">'+ value.user_type_desc +'</option>' : '') +
                                          '</select>'+
                                         '</td>'+
                                         '<td class="">'+
                                           '<div class="form-check ml-4">'+
                                            '<label class="form-check-label">'+
                                             '<input type="checkbox" name="grant_chk['+ value.sub_module_id +']" value="1" class="form-check-input-styled" '+((value.assign_user_type == 'Y')? 'checked' : '')+'>'+
                                            '</label>'+
                                         '</div>'+
                                       '</td>'+
                                      '</tr>';
                      });
                    }
                      $('.sub_module_list_table').find('tbody').empty().append(table_row);
                      $('.form-check-input-styled').uniform();

                      $('.user_type_select2').select2({
                        placeholder: "Select User Type",
                        width: '100%',
                        language: {
                           noResults: function (params) {
                             return "No User Type were found";
                           }
                         },
                         allowClear: true,
                         maximumSelectionSize: 1,
                         // minimumInputLength:4,
                         ajax: {
                           url: base_url + '/api/auth/user-rights-type/list',
                           dataType: 'json',
                           async: true,
                           data:{
                             pagination:false
                           },
                           data: function (keyword) {
                             return {
                               search_param : keyword.term,
                               emp_type : $('#form_validation').find('[name="emp_type"]').val(),
                               discontinue_tag : 'N'
                             };
                           },
                           processResults: function (data) {
                            return {
                               results: $.map(data.data, function(value) {
                                 if(jQuery.inArray(value.Type_UserRights_code,['SA','SY','A']) == -1){
                                   return {
                                         text : value.Type_UserRights+' - '+value.Type_UserRights_code,
                                         id : value.Type_UserRights_code,
                                   }
                                 }
                               })
                            };
                           },
                           cache: true
                         },
                         escapeMarkup: function (markup) { return markup; },
                      });

                    })
                    .fail(function(xhr, status, error) {
                      $('#page_loader_modal').modal('toggle');
                    });
                }
              } else {
                $('.sub_module_list_blog').hide();
              }
            });

            $(document).on("click",".btn_clear",function(){
              update_data();
              $('#list_user_blog').show();
              $('#manage_user_blog').hide();
            });

        update_data();
   });


</script>
<script>
window.addEventListener("orientationchange", function() {
  if (window.matchMedia("(orientation: portrait)").matches) {
      $($.fn.dataTable.tables( true ) ).DataTable({ destroy:true, responsive : false}).responsive.rebuild();
   }
  if (window.matchMedia("(orientation: landscape)").matches) {
    $($.fn.dataTable.tables( true ) ).DataTable({ destroy:true, responsive : true}).responsive.rebuild();
   }
   $($.fn.dataTable.tables( true ) ).css('width', '100%');
}, false);
</script>
@stop