@extends('layouts.app2')


@section('dynamic_css')
<link rel="stylesheet" href="{{ asset('css/buttons.dataTables.css') }}">
@endsection

@section('content')
<div class="container">
    <div class="row">
       <div class="col-md-12 text-center">          
            @if ($errors->has('success_msg'))
                 <div class="alert alert-success alert-dismissible">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                       <strong>{{ $errors->first('success_msg') }}</strong>
                  </div>               
             @endif
            
            @if ($errors->has('error_msg'))
                 <div class="alert alert-danger alert-dismissible">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                       <strong>{{ $errors->first('error_msg') }}</strong>
                  </div>
                     
             @endif
        </div>
        
        <div class="col-md-5"> 
            
            <div class="form-group row">
              <label for="example-text-input" class="col-5 col-form-label">SELECT A DISTRICT</label>
              <div class="col-7">
                  <select class="form-control" id="district_select">
                        <option value="" disabled selected>==== Select A District ====</option>
                 @foreach($districts as $key =>$value)
                        <option value="{{$value}}">{{$key}}</option>
                  @endforeach
                  </select>
              </div>
            </div>
        
        </div>
        
        <div class="col-md-5 offset-md-1"> 
            
            <div class="form-group row">
              <label for="example-text-input" class="col-5 col-form-label">SELECT A BLOCK</label>
              <div class="col-7">
                  <select class="form-control" id="block_select">
                        <option value="" disabled selected>==== Select A Block ====</option>

                  </select>
              </div>
            </div>
        
        </div>        
        
        <div class="col-md-12 col-md-push-0 p20 bg-white display_none mt30" id="table_view">
            <table class="table table-bordered table-condensed table table-striped table-responsive" id="postsTable">
                <thead>
                <tr>
                    <th>Gp Code</th>
                    <th>Gp Name</th>
                    <th>Action</th>
                </tr>
                </thead>
            </table>         
        </div>
        

        
    </div>
</div>


<div class="modal fade" id="gp_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">GRAM PANCHAYAT CREATE</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
          <form id="gp_form">
            @csrf
            <div class="modal-body mx-3">
                <div class="mb-2">
                    <label class="form" data-error="wrong" data-success="right" for="form29">Gram Panchayat Name</label>
                    <input type="text" id="gp_name" name="gp_name" class="form-control">
                    <label id="gp_name-error" class="error" for="gp_name"></label>  
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-success">SAVE <i class="fa fa-paper-plane-o ml-1"></i></button>
            </div>
        </form>
        </div>
    </div>
</div>


<div class="modal fade" id="gp_modal_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">EDIT GRAM PANCHAYAT</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
          <form id="gp_form_edit">
            @csrf
            <input type="hidden" name="block_id" id="gp_id" value="">
            <div class="modal-body mx-3">
                <div class="mb-2">
                    <label class="form" data-error="wrong" data-success="right" for="form29">Gram Panchayat Name</label>
                    <input type="text" id="gp_name_edit" name="gp_name_edit" class="form-control">
                    <label id="gp_name_edit-error" class="error" for="gp_name_edit"></label>  
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-success">SAVE <i class="fa fa-paper-plane-o ml-1"></i></button>
                <button class="btn btn-warning" data-dismiss="modal" aria-label="Close"> Cancel <i class="fa fa-paper-plane-o ml-1"></i></button>
            </div>
        </form>
        </div>
    </div>
</div>


@endsection

@section('dynamic_js')






<script src="{{ asset('js/lib/dataTables.buttons.js') }}"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>

<script>
    var selected_district=0;
    var selected_block=0;
    
    
    
    $('#district_select').on('change',function(e){
       e.preventDefault();
       var district_code=$(this).val();
       selected_district=district_code;
       get_block_list(district_code);
   }) 
    
    
    
    
   function get_block_list(district_code){
         $('.page-loader-wrapper').fadeIn();
            $.ajax({
                type: "GET",
                url: 'get_block_list',
                data: {
                    district_code: district_code
                },
                dataType: "json",
                success: function (data) {
                    $('#block_select').empty();
                    $('#block_select').append('<option value="" disabled selected>==== Select A Block ====</option>');
                    if (data.msgType == true) {
                        $.each(data.data,function(key,value){
                             $('#block_select').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();
                }
            });
   }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    function getData(block_code) {
        
        if ($.fn.dataTable.isDataTable('#postsTable')) {
            $('#postsTable').DataTable().destroy(); 
        }   
        $('#postsTable tbody').empty();     
            
        var table =$('#postsTable').DataTable({
            dom: 'Bfrtip',
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            buttons: [    {
                text: '<i class="fa fa-plus"></i> Create',
                className: 'badge-primary text-white',
                action: function ( e, dt, node, config ) {
                   $('#gp_name').val('');
                   $('#gp_modal').modal({ backdrop: 'static',keyboard: false})
                }
            },{
                extend: 'collection',
                text: '<i class="fa fa-download"></i> Export',
                buttons: ['csv', 'excel', 'pdf']
            },'reset'
                
            ],
            ajax: 'gp_data?id='+block_code,
            columns: [
                {data: 'gram_panchyat_id', name: 'gram_panchyat_id'},
                {data: 'gram_panchyat_name', name: 'gram_panchyat_name'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            order: [[0, 'desc']],
            fnInitComplete: function(oSettings, json) {
                       load_dynamic();
                 }
        });
        

    }
   
    
    
    
$('#block_select').on('change',function(e){
       e.preventDefault();
       var block_code=$(this).val();
       $('#table_view').show(500);
       selected_block=block_code;
       getData(block_code);     
}) 
      

    
 
$("#gp_form").validate({
    rules: {
        gp_name: {
            required: true,
            maxlength:200,
        }
    },
    messages: {
        gp_name: {
            required: "Gram Panchayat Name is mandatory",
        }
    }
});




$('#gp_form').on('submit',function(e){
    e.preventDefault();
    $("#gp_form").validate();
    if($("#gp_form").valid()){ 
            var gp_name = $('#gp_name').val();
            $.ajax({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: 'gp_save',
                data: {
                    gp_name: gp_name,block_id:selected_block
                },
                dataType: "json",
                success: function (data) {
                    if (data.msgType == true) {
                        $('#gp_modal').modal('hide')
                         getData(selected_block);
                        toastr.success(data.msg);
                    }else{
                        if(data.error.gp_name_err){
                           $('#gp_name-error').append(data.error.gp_name_err);
                           $('#gp_name-error').show();
                        }else{
                           $('#gp_name-error').empty();
                        }
                        
                        
                        if(data.error.block_id_err){
                            toastr.error('Something Went Wrong.');
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

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

function load_dynamic(){
      $('.btn-edit').on('click',function(e){
          e.preventDefault();
          var gp_id=$(this).data('id');
               $.ajax({
                type: "GET",
                url: 'get_gp_data',
                data: {
                    gp_id: gp_id
                },
                dataType: "json",
                success: function (data) {
                    if (data.msgType == true) {
                        $('#gp_id').val(data.data.gram_panchyat_id);
                        $('#gp_name_edit').val(data.data.gram_panchyat_name);
                        $('#gp_modal_edit').modal({ backdrop: 'static',keyboard: false});
                    }else{
                      toastr.error(data.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function (data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });       
      })  
    
    
$('.btn-delete').on('click',function(e){
          e.preventDefault();
          var gp_id=$(this).data('id');

            
 	  swal({
          title: "Are you sure?",
          text: "You, want to delete!",
          type: "warning",
          showCancelButton: true,
          confirmButtonClass: "btn-success",
          cancelButtonClass: "btn-danger",
          confirmButtonText: "Yes, Submit it!",
          cancelButtonText: "No, cancel!",
          closeOnConfirm: false,
          closeOnCancel: true
        }).then((result) => {
           if (result.value) {
    
                $.ajax({
                    type: "GET",
                    url: 'delete_gp_data',
                    data: {
                        gp_id: gp_id
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.msgType == true) {
                             getData(selected_block);
                            toastr.success(data.msg);
                        }else{
                          toastr.error(data.msg);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {

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


  $("#gp_form_edit").validate({
    rules: {
        gp_name_edit: {
            required: true,
            maxlength:200,
        }
    },
    messages: {
        gp_name_edit: {
            required: "Gram Panchayat Name is mandatory",
        }
    }
});
  
 $('#gp_form_edit').on('submit',function(e){
    e.preventDefault();
    $("#gp_form_edit").validate();
    if($("#gp_form_edit").valid()){ 
            var gp_name = $('#gp_name_edit').val();
            var gp_id = $('#gp_id').val();
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: 'gp_update',
                data: {
                    gp_name: gp_name,gp_id:gp_id
                },
                dataType: "json",
                success: function (data) {
                    if (data.msgType == true) {
                        $('#gp_modal_edit').modal('hide')
                         getData(selected_block);
                        toastr.success(data.msg);
                    }else{
                        if(data.error.block_name_err){
                           $('#gp_name_edit-error').append(data.error.gp_name_err);
                           $('#gp_name_edit-error').show();
                        }else{
                           $('#gp_name_edit-error').empty();
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

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

@endsection