@extends('layouts.app2')

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

<link href="{!! asset('css/dataTables.bootstrap4.min.css') !!}" media="all" rel="stylesheet" type="text/css"/>
@endsection
@section('dynamic_css')

 <!--<link href="https://cdn.datatables.net/1.10.19/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;
    }
    @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('users.index') }}">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%;">
                                <a href="{{ route('users.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>
                            </div>
                    </div>

            </div>
            <div class="panel-body">
                <div class="collapse 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-upper"> District </label>
                        <select class="form-control input-md" id="district" name="district">
                             <option value="" selected disabled>==== Select District ====</option>
                             <option value="1"> All </option>
                            @if($data['districts'])
                              @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
                            @endif
                       </select>
                    </div>
                    <div class="col-md-3 mb-3">
                           <label class="control-label text-upper">Block</label>
                           <select class="form-control input-md" id="block" name="block">
                              <option value="" disabled selected>==== Select A Block ====</option>
                        @if($data['block_list'])
                            @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
                        @endif

                          </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="control-label text-upper">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-upper">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-upper">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}}" selected> {{ $lev->name }} </option>
                                       @else
                                          <option value="{{ $lev->level}}"> {{ $lev->name }} </option>
                                       @endif
                                    @endforeach
                                 @endif
                              </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="control-label text-upper"> 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-upper">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('users.index') }}" class="btn btn-warning  btn-sm"> <i class="fa fa-refresh" aria-hidden="true"></i> Reset</a>
                    </div>
                  </div>
                </form>
              </div>
                <hr>
                <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 >Role</th>
                            <th >Created_At</th>
                            <th >Status</th>
                            @can('edit_users', 'delete_users')
                            <th class="text-center">Actions</th>
                            @endcan
                        </tr>
                       </thead>
                        <tbody id="data-table-body">
                                               @foreach($result as $index=>$item)
                                                        <tr>

                                <td data-title="Sl No">{{ $i }}</td>
                                <td data-title="Name">{{ $item->name }}</td>
                                <td data-title="Employee Code">{{ $item->username }}</td>
                                <td data-title="Email">{{ $item->email }}</td>
                                <td data-title="Role">{{ $item->roles->implode('name', ', ') }}</td>
                                <td data-title="Created At">{{ $item->created_at->toFormattedDateString() }}</td>
                                <td data-title="Status"><span class="badge badge-pill red p5">Deactive</span></td>

                                @can('edit_users','delete_users')
                                <td data-title="Actions" class="text-center ">
                                    @include('shared._actions', [
                                        'entity' => 'users',
                                        'id' => $item->id
                                    ])

                                    @can('delete_users')
                                         @if($item->is_active)
                                            {!! Form::open(['method' => 'DELETE','class' =>'inline_form', 'route' => ['users.destroy', $item->id] ]) !!}
                                            {!! Form::button('<i class="fa fa-times" aria-hidden="true"></i> Deactivate', ['type' => 'submit','class' => 'btn btn-outline-danger btn-xsm mt0 mb0']) !!}
                                            {!! Form::close() !!}
                                         @else
                                            {!! Form::open(['method' => 'DELETE','class' =>'inline_form', 'route' => ['users.destroy', $item->id] ]) !!}
                                            {!! Form::button('<i class="fa fa-check-circle-o" aria-hidden="true"></i> Activate', ['type' => 'submit','class' => 'btn btn-outline-success btn-xsm mt0 mb0']) !!}
                                            {!! Form::close() !!}
                                         @endif
                                    @endcan
                                </td>
                                @endcan
                            </tr>
                        @endforeach
                        </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>
    $('#data-table').dataTable({
            paging: true,
            pagingType: "full_numbers",
            pageLength: 5,
            stateSave: true,
            lengthMenu: [[5 ,10, 25, 50, -1], [5 ,10, 25, 50, "All"]],
            columnDefs: [
                { "width": "200px", "targets":7 }
            ],
    });




    $('#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();
                }
            });
}



/*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