@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;
    }
    
    .text-blue{
        color: #304192;
        font-weight: 600;
        font-size: 14px;
    }
    /************************ 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('employeeusers.display') }}">Employee Users</a></li>
                </ol>
            </nav>
        </div>
        
        
       <div class="col-md-12 p20 bg-white">
         <div class="panel panel-default">
            <div class="panel-heading ">

                    <div class="row e1f5fe bdbdbd grey lighten-1 custom_row_o" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample" style="cursor: pointer;">
                            <div class="col-md-6 custom-col-md-6" style="max-width: 50%;">

                                <div class="panel-title pl5">
                                    <i class="fa fa-filter"></i> <span class="label_text"> Custom Filter </span>
                                </div>

                            </div>
                            <div class="col-md-6 custom-col-md-6 text-right" style="max-width: 50%;">
                              @hasrole('Admin')
                                <a href="{{ route('employeeusers.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 User</span> </a>
                              @endhasrole 
                                <a href="{{ route('employees.display')}}" class="btn btn-info btn-sm"> <i class="glyphicon glyphicon-plus-sign"></i> <i class="fa fa-plus-square-o" aria-hidden="true"></i> <span class="label_text">Employee Account</span> </a>
                            </div>
                    </div>
         
            </div>
            <div class="panel-body">
                <div class="row bg_body custom_row_o">
                
                  <div class="col-md-12 collapse show mt10" id="collapseExample">
                    <form method="POST" action="{{ route('search_data') }}" id="search-form" role="form" class="form-horizontal">
                      {{ csrf_field() }}
                      <div class="row result-set">
                        <div class="col-md-3 mb-3">
                            <label class="control-label text-blue"> District </label>
                            <select class="form-control input-md" id="district" name="district">
                               @if($data['districts'])
                                 <option value="" selected disabled>==== Select District ====</option>
                                 <option value="1" @if($data['district']==1) {{'selected'}} @endif> All </option>
                                
                                  @foreach($data['districts'] as $dist)
                                    @if(($data['district']) && ($data['district']==$dist->district_code))
                                       <option value="{{ $dist->district_code}}" selected> {{ $dist->district_name }} </option>
                                    @else
                                        <option value="{{ $dist->district_code}}"> {{ $dist->district_name }} </option>
                                    @endif
                                  @endforeach
                              @else
                                 <option value="{{$data['district']}}" selected>{{$data['district_name']}}</option>
                              @endif
                           </select>
                        </div>
                        <div class="col-md-3 mb-3">
                               <label class="control-label text-blue">Block</label>
                               <select class="form-control input-md" id="block" name="block">
                                
                               @if($data['block_list'])
                                 <option value="" disabled selected>==== Select A Block ====</option>    
                                  @foreach($data['block_list'] as $blk)
                                    @if(($data['block']) && ($data['block']==$blk->block_id))
                                       <option value="{{ $blk->block_id}}" selected> {{ $blk->block_name }} </option>
                                    @else
                                      <option value="{{ $blk->block_id}}"> {{ $blk->block_name }} </option>
                                   @endif
                                  @endforeach
                              @elseif($data['block'])
                                 <option value="{{$data['block']}}" selected>{{$data['block_name']}}</option>
                              @else
                                   <option value="" disabled selected>==== Select A Block ====</option>    
                              @endif

                              </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="control-label text-blue">Gram Panchayat</label>
                               <select class="form-control input-md" id="panchyat" name="panchyat">
                               <option value="">==== Select Gram Panchayat ====</option>
                            @if($data['panchyat_list'])
                                @foreach($data['panchyat_list'] as $pan)
                                   @if(($data['panchyat']) && ($data['panchyat']==$pan->gram_panchyat_id))
                                       <option value="{{ $pan->gram_panchyat_id}}" selected> {{ $pan->gram_panchyat_name }} </option>
                                   @else
                                    <option value="{{ $pan->gram_panchyat_id}}"> {{ $pan->gram_panchyat_name }} </option>
                                   @endif
                                @endforeach
                            @endif
                               </select>



                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="control-label text-blue">Program</label>
                            <select class="form-control input-md" id="program" name="program">
                                 <option value=""  selected>==== Select Program ====</option>
                                 @if($data['programe'])
                                    @foreach($data['programe'] as $pr)

                                           @if(($data['program_s']) && ($data['program_s']==$pr->program_id))
                                              <option value="{{ $pr->program_id}}" selected> {{ $pr->program_name }} </option>
                                           @else
                                               <option value="{{ $pr->program_id}}"> {{ $pr->program_name }} </option>
                                           @endif
                                    @endforeach
                                 @endif
                             </select>
                        </div>
                      </div>
                      <div class="row result-set">
                        <div class="col-md-3 mb-3">
                            <label class="control-label text-blue">Level</label>
                                 <select class="form-control input-md" id="level" name="level">
                                     <option value=""  selected>==== Select Levels ====</option>
                                     @if($data['level'])
                                        @foreach($data['level'] as $lev)
                                           @if(($data['level_s']) && ($data['level_s']==$lev->level_code))
                                              <option value="{{ $lev->level_id}}" selected> {{ $lev->level }} </option>
                                           @else
                                              <option value="{{ $lev->level_id}}"> {{ $lev->level }} </option>
                                           @endif
                                        @endforeach
                                     @endif
                                  </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="control-label text-blue"> Designation </label>
                               <select class="form-control input-md" id="designation" name="designation">
                                     <option value="">==== Select Designation ====</option>	
                            @if($data['designation_list'])
                                @foreach($data['designation_list'] as $des)
                                   @if(($data['designation_s']) && ($data['designation_s']==$des->designation_id))
                                       <option value="{{ $des->designation_id}}" selected> {{ $des->designation_name }} </option>
                                   @else
                                     <option value="{{ $des->designation_id}}"> {{ $des->designation_name }} </option>
                                   @endif
                                @endforeach
                            @endif
                               </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="control-label text-blue">Service Status</label>
                                <select class="form-control input-md" id="service_status" name="service_status">
                                    <option value="" disabled selected>==== Select Service Status ====</option>
                                     @if($data['status'])
                                        @foreach($data['status'] as $st)


                                           @if(($data['service_status']) && ($data['service_status']==$st->status_id))
                                               <option value="{{ $st->status_id }}" selected> {{ $st->status_name }} </option>
                                           @else
                                               <option value="{{ $st->status_id }}"> {{ $st->status_name }} </option>
                                           @endif
                                        @endforeach
                                     @endif
                                </select>
                        </div>
                        <div class="col-md-3 text-right margin-auto">
                            <button type="submit" class="btn btn-primary btn-sm "><i class="fa fa-search" aria-hidden="true"></i> Search</button>
                            <a href="{{ route('employeeusers.display') }}" class="btn btn-warning  btn-sm"> <i class="fa fa-refresh" aria-hidden="true"></i> Reset</a>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
       <!--         <hr class="mt0">-->
                <div class="result-set mt10" 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 data-title="Name_Of_User">Name_Of_User</th>
                            <th data-title="Emp_Code">Emp_Code</th>
                            <th data-title="Email">Email</th>
                            <th data-title="Role">Role</th>
                            <th data-title="Status">Status</th>
                            <th data-title="Actions">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('employeeusers.getemployeeusers') }}",
        "ajax": {
            url: "{{ route('employeeusers.getemployeeusers') }}",
            data: function(d) {
                d.district = $('select[name=district]').val();
                d.block = $('select[name=block]').val();
                d.panchyat = $('select[name=panchyat]').val();
                d.program = $('select[name=program]').val();
                d.level = $('select[name=level]').val();
                d.designation = $('select[name=designation]').val();
                d.service_status = $('select[name=service_status]').val();
            }
        },
        "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
            }
        ]
     });
    

    
    $('#search-form').on('submit', function(e) {
        table.draw();
        e.preventDefault();
    });  
    
    
    
    
    $('#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