@extends('auth::layoutsbs4.main',['page_title' => 'Auth::User Types',
'hide_nva_link' => ((Request::get('hide_header') == 'true')? 'true' : 'false')])
@section('content')
@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"> User Types </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 Types</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 Types</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" >
  <div class="col-md-4" id="module_manage">
    <div class="card shadow-sm" >
      <div class="card-header bg-white py-1 px-2 header-elements-inline">
        <h6 class="card-title"><i class="icon-pencil7 mr-2 text-theme"></i>Manage </h6>
        <div class="header-elements">
          <a href="#" class="bg-theme btn-sm float-right list_btn d-md-none"><i class="icon-list3 text-white mr-1"></i>list view</a>
        </div>
      </div>
      <div class="card-body">
        <form id="form_validation">
          <input type="hidden" name="id">
          <div class="form-group">
            <label>User Type Code <span class="text-danger">*</span></label>
            <input type="text" name="user_rights_code"  class="form-control" placeholder="Enter User Rights Code">
          </div>
          <div class="form-group">
            <label>Description <span class="text-danger">*</span></label>
            <input type="text" name="user_rights" class="form-control" placeholder="Enter Description">
          </div>
          <div class="form-group">
             <label>User Type For <span class="text-danger">*</span></label>
             <select class="form-control emp_type_select2" name="emp_type">
               <option value="B" selected>Both</option>
               <option value="S">Site Staff</option>
               <option value="O">Office Staff</option>
             </select>
          </div>
          <div class="form-group row">
            <button type="submit" class="btn m-2 btn-theme" id="form_submit_btn">Submit</button>
            <button type="submit" class="btn m-2 bg-dark" id="form_process_btn" style="display:none;">Processing <i class="icon-spinner2 spinner ml-2"></i></button>
            <a class="btn btn-danger m-2 text-white" href=""> Cancel </a>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="col-md-8" id="module_list">
    <div class="card shadow-sm">
      <div class="card-header bg-white py-1 px-2 header-elements-inline">
        <h6 class="card-title"><i class="icon-list2 mr-2 text-theme"></i>List </h6>
        <div class="header-elements">
          <a href="#" class="bg-theme btn-sm float-right add_new d-md-none"><i class="icon-plus2 mr-1"></i>Add Module</a>
        </div>
      </div>
      <div class="card-body p-2">
        <form id="filter_form">
          <input type="hidden" name="discontinue_tag" value="N">
        </form>
        <div class="table-responsive">
          <table class="table data_list_table table-striped table-bordered">
              <thead class="no-wrap">
                <tr style="border-top: 1px solid #ddd !important;">
                  <th class="d-block d-sm-none">View</th>
                  <th class="text-center d-none d-sm-table-cell">SL.No</th>
                  <th>Short Name</th>
                  <th>Description</th>
                  <th>User Type</th>
                  <th class="text-center">Action</th>
                 </tr>
              </thead>
              <tbody>
              </tbody>
           </table>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
var base_url = {!! json_encode(url('/')) !!};
$('body').tooltip({
    selector: '[data-popup="tooltip"]',
    trigger : 'hover'
});

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

  var is_mobile = window.matchMedia("only screen and (max-width: 760px)").matches;

  $.extend( $.fn.dataTable.defaults, {
    autoWidth: false,
    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();
    $.get(base_url + '/api/auth/user-rights-type/list',$('#filter_form').serialize())
     .done(function(result){
      var table_row = '';
      $('.data_list_table').dataTable().fnClearTable();
      $('.data_list_table').dataTable().fnDestroy();
      if(result.status == 'success'){
        $.each(result.data, function(key,value){
          table_row += '<tr class="no-wrap">'+
                          '<td class="d-block d-sm-none"></td>'+
                          '<td class="text-center d-none d-sm-table-cell">'+ (++key) +'</td>'+
                          '<td >'+ value.Type_UserRights_code +'</td>'+
                          '<td >'+ value.Type_UserRights +'</td>'+
                          '<td >'+ value.Emp_Type +'</td>'+
                          '<td class="text-center">'+
                            '<button type="button" class="btn btn-outline btn-sm btn-clean btn-icon btn-icon-md action-btn bg-info-400 rounded-round text-info-800 update_record mr-2" '+ ((jQuery.inArray(value.Type_UserRights_code,['SA','SY','A']) !== -1)? 'disabled' : '' )+' data-id="'+ value.Id +'" data-popup="tooltip" data-placement="auto" data-animation="true" title="Modify Record"><i class="icon-pencil7"></i></button>'+
                            '<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" '+ ((jQuery.inArray(value.Type_UserRights_code,['SA','SY','A']) !== -1)? 'disabled' : '' )+' data-id="'+ value.Id +'" data-popup="tooltip" data-placement="auto" data-animation="true" title="Remove Record"><i class="icon-trash"></i></button>'+
                          '</td>'+
                        '</tr>';
        });
      }
      $('.data_list_table').find('tbody').empty().append(table_row);
       if(is_mobile){
        $('.data_list_table').dataTable({
          destroy:true,
          "ordering": false,
          responsive: {
              details: {
                type: 'column'
              }
            },
          columnDefs: [
          {
            className: 'control',
            targets:   0,
          },
          {
             "targets": [2],
             "visible": false
          }
          ]
        });
       } else {
         $('.data_list_table').dataTable({
           destroy:true,
           "autoWidth": true,
           "ordering": false,
           columnDefs: [
             {
               className: 'control',
               orderable: false,
               targets:   0,
             },
             {
                "targets": [],
                "visible": false
             }
           ],
         });
        }
        $($.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();
      });

  }

  update_data();


    $('.form-input-styled').uniform({
        fileButtonClass: 'action btn bg-pink-400',
        fileButtonHtml: '<i class="icon-plus2"></i>'
    });
    $('.emp_type_select2').select2();

    $(document).on('click','.update_record', function(e) {
      $(this).tooltip('hide');
      var id = $(this).attr('data-id');
      $.get(base_url + '/api/auth/user-rights-type/list',{ 'id' : id}, function(result) {
          if(result.status == 'success' && result.data && result.response.type == 'data_found'){
            var data = result.data;
            $('#form_validation').bootstrapValidator('resetForm',true);
            $('[name="user_rights_code"]').val(data[0].Type_UserRights_code).trigger('focus');
            $('[name="user_rights"]').val(data[0].Type_UserRights).trigger('focus');
            $('.emp_type_select2').val(data[0].Emp_Type).trigger('change');
            $('[name="id"]').val(data[0].Id);
          }
      });
    });

    $('#form_validation').bootstrapValidator({
       message: 'This value is not valid',
       excluded: [':disabled', ':hidden', ':not(:visible)'],
          fields: {
            user_rights_code : {
                enabled :true,
                  validators: {
                    stringLength : {
                        message : 'User type code should be less than or equal to 5 characters',
                        min : 1,
                        max : 5
                    },
                    notEmpty: {
                        message: 'User Type Code is required'
                    },
                }
            },
            user_rights : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'User type is required'
                    },
                }
            },
            emp_type : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'User Type 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-rights-type/store', $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'){
             $('[name="id"]').val('');
             $('.emp_type_select2').val('B').trigger('change');
             $('#form_validation').bootstrapValidator('resetForm',true);
             $.jGrowl(result.response.message, {
                header: 'Success',
                theme: 'bg-success alert-styled-left ',
                position: 'top-right'
             });
             update_data();
           } 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);
             $('#page_loader_modal').modal('toggle');
             $('#form_submit_btn').show();
             $('#form_process_btn').hide();
             $('#server_response_message').text(error);
             $('#server_error_modal').modal();
         });
       });

       $(document).on('click','.delete_record', function(e) {
         $(this).tooltip('hide');
         var id = $(this).attr('data-id');
         swal({
             text: "You want to Remove.",
             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-rights-type/remove',{ 'id' : id}).done(function(result) {
               $('#page_loader_modal').modal('toggle');
                 if(result.status == 'success'){
                   update_data();
                   $.jGrowl(result.response.message, {
                      header: 'Success',
                      theme: 'bg-success alert-styled-left ',
                      position: 'top-right'
                   });
                 } else {
                   $.jGrowl(result.response.message, {
                      header: 'Failed',
                      theme: 'bg-danger alert-styled-left ',
                      position: 'top-right'
                   });
                 }
             }).fail(function(xhr, status, error) {
                 $('#page_loader_modal').modal('toggle');
                 $('#server_response_message').text(error);
                 $('#server_error_modal').modal();
             });
           }
         });
       });

       $(document).on('click','.add_new', function(e) {
        $('#module_manage').show();
        $('#module_list').hide();
       });
       $(document).on('click','.list_btn', function(e) {
        $('#module_manage').hide();
        $('#module_list').show();
       });
       if(is_mobile){
          $('#module_manage').hide();
       } else {
          $('#module_manage').show();
       }


});

</script>
@stop