@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;
    }

    select options {
            text-transform: capitalize;
    }
    
    .text-blue{
        color: #304192;
        font-weight: 600;
        font-size: 14px;
    }
  /*****************************************************************************/  
    @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('blockadmin.display') }}">Block 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">
                              @can('add_block_users')
                                <a href="{{ route('blockadmin.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 
                            </div>

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

                <div class="row bg_body custom_row_o">
                    <div class="col-md-12 mt10">
                    <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-4 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-4 mb-3">
                               <label class="control-label text-blue">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-4 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('blockadmin.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 >User Name</th>
                            <th >Emp Code</th>
                            <th >Email</th>
                            <th >District</th>
                            <th >Block</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('blockadmin.getblockadmin') }}",
        "ajax": {
            url: "{{ route('blockadmin.getblockadmin') }}",
            data: function(d) {
                d.district = $('select[name=district]').val();
                d.block = $('select[name=block]').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": "district_name",
                searchable: true 
            },
            { 
                "data": "block_name",
                searchable: true 
            },
            { 
                "data": "is_active",
                searchable: true 
            },
            { 
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ],
        "columnDefs": [
             {
                'targets': 0,
                'createdCell':  function (td, cellData, rowData, row, col) {
                   $(td).attr('data-title', 'Sl No'); 
                }
             },
             {
                'targets': 1,
                'createdCell':  function (td, cellData, rowData, row, col) {
                   $(td).attr('data-title', 'User Name'); 
                }
             },
             {
                'targets': 3,
                'createdCell':  function (td, cellData, rowData, row, col) {
                   $(td).attr('data-title', 'Emp Code'); 
                }
             }
          ]
     });
    

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

     

     
  

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




	 



     
   
    
 

     
    
 
	

    
 $(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();*/
                }
            }); 
 })   
    


</script>
@endsection