@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"/>
<link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css"></link>
<link href=" https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css"></link>
    
   

<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 active"><a href="{{ route('team_view') }}">GP Team Formed</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%;">
                              
                            </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 text-right margin-auto">
                            <button type="button" class="btn btn-primary btn-sm " id="team-search-btn"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
                            <a href="{{ route('team_view') }}" 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-responsive-lg" id="team-table">
                            <thead>
                                <tr>
                                    <th>SL No.</th><th>District</th><th>Block</th><th>Total GP</th><th>GP Team updated</th>
                                </tr>
                            </thead>
                            <tbody id="team-body">
                                @php
                                    $i = 1;
                                @endphp
                                @foreach ($teams as $value)
                                    <tr>
                                        <td>{{$i}}</td><td>{{$value->district_name}}</td><td>{{$value->block_name}}</td><td>{{$value->gp_count}}</td><td>{{$value->team_count}}</td>
                                    </tr>
                                @php
                                    $i++;
                                @endphp
                                @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 src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js"></script>


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

    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) 	 
	 }

     $(document).ready(function() {
		$('#team-table').DataTable( {
			dom: 'Bfrtip',
			buttons: [
			   'excel'
			]
		} );
	} );

    $(document).on('click','#team-search-btn',function(){
        $.get("{{route('team_formed')}}",{
            district:$('#district').val(),
            block:$('#block').val(),
            gp:$('#panchyat').val()
        },function(j){

            var tr = "";
            for(var i = 1; i <j.length; i++){
                tr += "<tr><td>"+i+"</td><td>"+j[i].district_name+"</td><td>"+j[i].block_name+"</td><td>"+j[i].gp_count+"</td><td>"+j[i].team_count+"</td></tr>";
            }
            var table = $('#team-table').DataTable();
            table.destroy();
            $('#team-body').html(tr);
            $(document).ready(function() {
		$('#team-table').DataTable( {
			dom: 'Bfrtip',
			buttons: [
			   'excel'
			]
		} );
	} );
        });

    });
</script>
@endsection