@extends('layouts.app2')

@section('title', 'Users')
@section('dynamic_css_excpt')
@endsection
@section('dynamic_css')

<link href="{!! asset('css/dataTables.bootstrap4.min.css') !!}" media="all" rel="stylesheet" type="text/css"/>
<style>
    select.form-control:not([size]):not([multiple]) {
       height: calc(1.95rem + 0px);
    }
    .panel-title{
        font-size: 15px;
        display: table-cell;
        vertical-align: middle;
    }
    .custom-col-md-6{
        width:50%;
        display: table;
        height: 40px;
    }
    .table td {
        padding: .5rem 1rem .5rem 1rem;
        vertical-align: middle;
        border-top: 1px solid #dee2e6;
    }
    .table .btn{
            min-width: 89px;
    }
    
    select options {
            text-transform: capitalize;
    }
    
    
    /************************ slider button ************************************/
    
    /* The switch - the box around the slider */
    .switch {
      position: relative;
      display: inline-block;
      width: 55px;
      height: 26px;
    }

    /* Hide default HTML checkbox */
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* The slider */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
       /* background-color: red;*/
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 1px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;

    }

    input:checked + .slider {
      background-color: #2196F3;
        /* background-color: green;*/
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
        /* background-color: green;*/
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }

    .slider.round:before {
      border-radius: 50%;
    } 
    
    .vl{
        height: 26px;
        border-left: 1px solid #999;
    }
    
    .fBlack{
        color:#999;
    }

  /*****************************************************************************/  
    @media (max-width: 768px)
    {
       li.page-item {

            display: none;
        }
       .custom-col-md-6{
            width:50%;
            display: table;
            height: 34px;
        }
        .page-item.previous,
        .page-item.next,
        .page-item:first-child,
        .page-item:last-child,
        .page-item.active {

            display: block;
        }
        
        .result-set{
           padding-left: 15px;
           padding-right: 15px;
        }
        
        .btn.btn-sm,.btn.btn-xsm {
            padding: .3rem .7rem;
            font-size: .54rem;
        }
        .table .btn {
            min-width: 50px;
        }
        
        .btn.btn-xsm{
            padding: .2rem .2rem;
        }

    }
    

    </style>
@endsection

@section('content')
<div class="container">
    <div class="row container_layout">
        <div class="col-md-12 pl0 pr0 mobile_view">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('adminhome')}}">
                            <i class="material-icons">home</i>
                        </a>
                    </li>
                     <li class="breadcrumb-item"><a href="{{ route('usermanagement') }}">User Management</a></li>
                    <li class="breadcrumb-item active"><a href="{{ route('districtadmin.display') }}">District Admin</a></li>
                </ol>
            </nav>
        </div>
        
        
       <div class="col-md-12 p20 bg-white pt0">
         <div class="panel panel-default">
            <div class="panel-heading ">

                    <div class="row e1f5fe bdbdbd custom_row_o">

                            <div class="col-md-12 text-right">
                             @if($level_code==1)
                               @can('add_district_users')
                                 <a href="{{ route('districtadmin.create') }}" class="btn btn-primary btn-sm"> <i class="glyphicon glyphicon-plus-sign"></i> <i class="fa fa-plus-square-o" aria-hidden="true"></i> <span class="label_text"> Create</span> </a>
                               @endcan
                             @endif
                            </div>

                    </div>
         
            </div>
            <div class="panel-body">

                <hr class="mt0">
                <div class="result-set" id="no-more-tables">
                 <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="data-table" style="width:100%;">
                      <thead class="cf">
                        <tr>
                            <th >#</th>
                            <th >Name_Of_User</th>
                            <th >Emp_Code</th>
                            <th >Email</th>
                            <th >Created_At</th>
                            <th >Status</th>
                            <th >Actions</th>
                        </tr>
                       </thead>
                        <tbody id="data-table-body">

                        </tbody>
                    </table>
                    </div>
                  </div>
                  <div class="text-center">

                  </div>
                </div>       
            </div>   
        </div>

           
           
      </div>
    </div>

</div>
@endsection

@section('dynamic_js')
<script src="{{ asset('js/lib/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/lib/dataTables.bootstrap4.min.js') }}"></script>
<script>


   var table=$('#data-table').DataTable({
        "processing": true,
        "serverSide": true,
        "stateSave": true,
        "ajax": "{{ route('districtadmin.getdistrictadmin') }}",
        "createdRow": function (row, data, rowIndex) {
            // Per-cell function to do whatever needed with cells
            $.each($('td', row), function (colIndex) {
                // For example, adding data-* attributes to the cell
                if(colIndex==0)
                  $(this).attr('data-title', "Sl No");
                else if(colIndex==1)
                  $(this).attr('data-title', "Name_Of_User");
                else if(colIndex==2)
                  $(this).attr('data-title', "Emp_Code");
                else if(colIndex==3)
                  $(this).attr('data-title', "Email");                
                else if(colIndex==4)
                  $(this).attr('data-title', "Role");  
                else if(colIndex==5)
                  $(this).attr('data-title', "Status"); 
                else 
                  $(this).attr('data-title', "Actions"); 
                
            });
        },
        "columns":[
            { 
                "data": "DT_Row_Index",
                name: "DT_Row_Index",
                "orderable":false,
                searchable: false 
            },
            { 
                "data": "name",
                searchable: true 
            },
            { 
                "data": "username",
                searchable: true 
            },
            { 
                "data": "email",
                searchable: true 
            },
            { 
                "data": "created_at",
                searchable: true 
            },
            { 
                "data": "is_active",
                searchable: true 
            },
            { 
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]
     });
    

    
    
    
    
    
    
    $('#district').on('change',function(e){
        e.preventDefault()
      var  selected_district=$(this).val();

         $('.page-loader-wrapper').fadeIn();
            $.ajax({
                type: "GET",
                url: "{{ route('get_block_list')}}",
                data: {
                    district_code: selected_district
                },
                dataType: "json",
                success: function (data) {
                    $('#block').empty();
                    $('#block').append('<option value=""  selected>==== Select A Block ====</option>');
                    if (data.msgType == true) {
                        $.each(data.data,function(key,value){
                             $('#block').append('<option value=" '+value.block_id+' ">'+value.block_name+'</option>');
                        });
         
                    }else{
                      toastr.error(data.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            }); 
    })
    
    
    
    
    
    
   

     
    $(document).on('change','#block',function(e){
        e.preventDefault()
      var  selected_gp=$(this).val();
         get_level_by_block();
         $('.page-loader-wrapper').fadeIn();
            $.ajax({
                type: "GET",
                url: "{{ route('get_gp_list')}}",
                data: {
                    gp_code: selected_gp
                },
                dataType: "json",
                success: function (data) {
                    $('#panchyat').empty();
                    $('#panchyat').append('<option value=""  selected>==== Select Gram Panchayat ====</option>');
                    if (data.msgType == true) {
                        $.each(data.data,function(key,value){
                             $('#panchyat').append('<option value=" '+value.gram_panchyat_id+' ">'+value.gram_panchyat_name+'</option>');
                        });
						
						
						
						$('#panchyat').on('change',function(e){
							e.preventDefault();
							get_level_by_gp();
						})
						
						
						
                    }else{
                      toastr.error(data.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            }); 
    })
     
  

   $('.btn-edit').on('click',function(e){
      e.preventDefault;
      var employee_code=$(this).data('id');
      $('#employee_code_of_employee').val(employee_code);
      $('#employeeDataDisplay').submit();
   })



	 function get_level_by_block(){
        $('#level option:selected').removeAttr('selected');
		 
		$("#level > option").each(function() {
			if(this.value=='3'){
				$(this).attr("selected","selected");
			}
		});
		var  program=$('#program').val();
	    var  level='3';
		get_designation_data(program,level) 	 
	 }
	 
	 function get_level_by_gp(){
        $('#level option:selected').removeAttr('selected');
		 
		$("#level > option").each(function() {
			if(this.value=='4'){
				$(this).attr("selected","selected");
			}
		});
		var  program=$('#program').val();
	    var  level='4';
		get_designation_data(program,level) 	 
	 }


     
   
    
 

$('#program').on('change',function(e){
        e.preventDefault()
       var  program=$(this).val();
       var  level=$('#level').val();
      /* get_designation_data(program,level)*/
})  
    
$('#level').on('change',function(e){
        e.preventDefault()
       var  program=$('#program').val();
       var  level=$(this).val();
       get_designation_data(program,level)
})      
    
function get_designation_data(program,level){
             $('.page-loader-wrapper').fadeIn();
            $.ajax({
                type: "GET",
                url: "{{ route('get_designation_by_program')}}",
                data: {
                    program: program,level:level
                },
                dataType: "json",
                success: function (data) {
                    $('#designation').empty();
                    $('#designation').append('<option value=""  selected>==== Select Designation ====</option>');
                    if (data.msgType == true) {
                        $.each(data.data,function(key,value){
                             $('#designation').append('<option value=" '+value.designation_id+' ">'+value.designation_name+'</option>');
                        });
                    }else{
                      /*toastr.error(data.msg);*/
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            }); 
}  
	

    
 $(document).on('input','.account_action',function(e){
   
     var id=$(this).parent('label').data('id');

    /*$('.page-loader-wrapper').fadeIn();*/
            $.ajax({
                type: "GET",
                url: "{{ route('accountaction')}}",
                data: {
                    id: id
                },
                dataType: "json",
                success: function (data) {
                    if (data.msgType == true) {
                       toastr.success(data.msg);
                    }else{
                      toastr.error(data.msg);
                    }
                    
                   table.ajax.reload(null, false);
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                   /* $('.page-loader-wrapper').fadeOut();*/
                }
            }); 
 })   
    

/*function get_user_list(){
    $('.page-loader-wrapper').fadeIn();
     var form = $('#search-form')[0];
     var data = new FormData(form);
     $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            cache: false,
            url: "{{ route('get_user_by_condition')}}",
            data: data,
            dataType: "json",
            success: function (data) {
              if(data.msgType == true) {  
               $('#data-table-body').empty();
               var i=1;
               $.each(data.data,function(key,value){
                   var action_btn='';
                    @can('edit_users', 'delete_users')
                    action_btn='<td class="text-center">Actions</td>'+
                    @endcan
                   $('#data-table-body').append('<tr>'+
                            '<td>'+i+'</td>'+
                            '<td>'+value.username+'</td>'+
                            '<td>'+value.email+'</td>'+
                            '<td>'+value.roles+'</td>'+
                            '<td>Created At</td>'+
                            '<td>Status</td>'+
                            +action_btn+
                        '</tr>');
                    i++;
               });




              }else {
                  toastr.error(data.msg)
              }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
        },
        complete: function (data) {
            $('.page-loader-wrapper').fadeOut();
        }
    });  
  } 	
 
   get_user_list();*/
</script>
@endsection