@extends('layouts.master')

@section('page-content')
<div class="title-bar">
   <h1 class="title-bar-title">
       <span class="d-ib">All Member</span>
   </h1>
</div>
<div class="row gutter-xs">
   @if( Session::has('success'))
   <div class="alert alert-success alert-dismissible">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
       <strong>Success!</strong> {{ Session::get('success') }}
   </div>
   @endif
   @if( Session::has('danger'))
   <div class="alert alert-danger alert-dismissible">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
       <strong>Success!</strong> {{ Session::get('danger') }}
   </div>
   @endif
   <div class="col-xs-12">  
       <div class="card">
           <div class="card-header bg-primary">
               <div class="card-actions">
                   <button type="button" class="card-action card-toggler" title="Collapse"></button>
               </div>
               <strong>Member List</strong>
           </div>
           <div class="card-body">
               <div class="row">
               <div class="col-xs-12">
                   <div class="col-xs-3">
                       <select name="filter" id="filter" class="form-control">
                           <option value="active" selected="">Active Member</option>                            
                           <option value="all" >All</option>
                           <option value="member_with_sw">Member With SW</option>
                           <option value="member_without_sw">Member Without SW</option>
                           <option value="inactive">Inactive Member</option>
                       </select>
                   </div>
                   <div class="col-xs-3">
                       <input type="text" name="" placeholder="Pincode" id="pincode" class="form-control">
                   </div>
                   <div class="col-xs-2">
                      <!--  <input type="text" name="" placeholder="Region" id="region" class="form-control">
                       -->  <select name="" id="region" class="form-control select">
                           <option value=" ">All Regions</option>
                           @foreach ($regions as $key => $region)

                               <option value="{{ $region->name }}">{{ $region->name }}</option>

                           @endforeach
                       </select> 
                   </div>
                   <div class="col-xs-2">
                       <select name="age" id="age" class="form-control">
                           <option value="all">All</option>
                           <option value="below_18">Below 18 Age</option>
                           <option value="above_18">Above 18 Age </option>
                       </select>
                   </div>
                   <div class="col-xs-2">
                       <button type="button" class="btn btn-sm btn-outline-success filter">
                           <i class="icon icon-paper-plane"></i> Refresh
                       </button>
                   </div>
               </div>
</div>
<div class="row">
               <div class="col-xs-12 table-responsive">
                <table class="table table-bordered table-responsive" id="category_table">
                   <thead>
                       <tr>
                           <th style="width: 15px !important;">Sr No.</th>
                           <th>Name</th>
                           <th>Code-Prefix</th>
                           <th>Code</th>
                           <th>Contact</th>
                           <th>Email</th>
                           <th>Region</th>
                           <th>Pincode</th>
                           <th width="62px">Action</th>
                           <th>Status</th>
                           <th>DOB</th>
                           <th>DOM</th>
                           <th>Alt Email</th>
                           <th>Marital Status</th>
                           <th>Address</th>
                           <th>Dist</th>
                           <th>Alt Contact</th>
                           <th>Tel</th>
                           <th>Business Email</th>
                           <th>Office Phone</th>
                           <th>Correspondence Address</th>
                           <th>Direction</th>
                           <th>Nearest Railway</th>
                           <th>Website</th>
                           <th>Blood Group</th>
                           <th>Resident Proof</th>
                           <th>Khanp</th>
                           <th>Up khanp</th>
                           <th>Occupation</th>
                           <th>Company details</th>
                           <th>qualification</th>
                           <th>Native Address</th>
                           <th>Family Address</th>
                           <th>Family memberid</th>
                           <th>Office Address</th>
                           <th>Other Address</th>
                           <th>Is Member</th>
                           <th>Inactive Reason</th>
                           <th>Inactive Remark</th>
                           <th>Inactive Date</th>
                           <th>Native Pincode</th>
                           <!-- <th>profile_photo</th> -->
                          <!--  <th>member_update_regional</th>
                           <th>member_update_super_admin</th> -->
                           <!-- <th>is_sawarswani</th>
                           <th>approve_on</th>
                           <th>receipt_file</th> -->
                           <th>Receipt Date</th>
                           <th>Receipt No</th>
                           <!-- <th>meeting_date</th> -->
                           <th>Member Fee</th>
                           <th>Alt Pincode</th>
                           <th>Created At</th>
                           <!-- <th>updated_at</th> -->

                       </tr>
                   </thead>
                   <tbody>
                     
                   </tbody>
               </table>
           </div>

       </div>
           </div>
       </div>
   </div>
</div>

@endsection
@push('page-script')
<script type="text/javascript" src="https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js)"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
<script>
$(document).on('click', '.openSamitiModal', function(e){
       e.preventDefault();
       $('#samitiModal').modal('show');
       $('#member_id').val('');
       $('#member_id').val($(this).data("member"));
       
   });

$(document).on('click', '.removeMember', function(e){ 
    e.preventDefault();
    var samiti_id = $(this).data('smiti');
    var member_id = $('#remove_member_id').val();
    $.ajax({
                   url:'/remove-member-from-summiti/'+ samiti_id +'/'+ member_id,
                   type:'post',
                   data:{_token:'{{ csrf_token() }}'},
                   success : function(response) {
                     alert('Member Removed From Samiti Successfully');
                     location.reload();
                   }
               })
});

$(document).on('click', '.removeMemberFromSamiti', function(e){
    e.preventDefault();
    $("#assign_smiti").html('');

    var samiti_id = $(this).data('samiti');
    var member_id = $(this).data('member');
    
    const words = samiti_id.toString().split(',');
    $('#removeSamitiModal').modal('show');

    $('#remove_member_id').val(member_id);
    
    var data= jQuery.parseJSON($('#samities-id').val())
    var myarray = [];
    jQuery.each(words, function(ii, val1 ) {
        jQuery.each(data, function( i, val ) {
            if(val.id == val1) {
                myarray.push(val);
            }
        });
    });

  
    for (var i = 0; i < myarray.length; i += 1) {
        $("#assign_smiti").append("<tr><td>" +myarray[i]['name'] + "</td><td> <i style='cursor:pointer' class='icon icon-close removeMember' data-smiti ="+myarray[i]['id']+"></i></td></tr>");
    }
});
let table;
table = $('#category_table').DataTable({
           'language':{
               "loadingRecords": "&nbsp;",
               "processing": "Loading Members...",
               "zeroRecords": " " 
           },
           'mark':true,
           "ajax": {
               "url" : "{{route('get_member_by_page')}}",
               "type" : "POST",
               'data' : function(d){
               }
           },
           "processing": true,
            // "paging":   false,
            "lengthMenu": [[100, 250, 500, -1], [100, 250, 500, "All"]],
           "columnDefs": [{
               "searchable": false,
               "orderable": false,
               "targets": [0]
           },
             {
              "targets": [9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],
               "visible": false,
               "searchable": false
           },


           ],
            dom: 'lBfrtip',
      // buttons: [
      //     'copyHtml5','excelHtml5','csvHtml5','pdfHtml5','print'
      // ],

       buttons: [
               {
                   extend: 'csvHtml5',
                   text : "Export",
                   title : 'All Member',
                   exportOptions: {
                       // columns: [ 0,1,2,3,4],
                        order : 'current',  
                       page : 'all',    
                       search : 'none' 
                   }
               },
              
           ],
            responsive: true,
       });
   table.on( 'order.dt search.dt', function () {
       table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
           cell.innerHTML = i+1;
       });
         table.column(2, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
          
       });
   }).draw();

 
   $(document).on('click', '.delete', function(){
       let id = $(this).attr('data-id');

       swal({
           title: "Are you sure?",
           text: "Once deleted, you will not be able to recover this imaginary file!",
           icon: "warning",
           buttons: true,
           dangerMode: true,
       })
       .then((willDelete) => {
           if (willDelete) {
               $.ajax({
                   url:'/member/'+ id,
                   type:'post',
                   data:{_method:'delete',_token:'{{ csrf_token() }}'},
                   success : function(response) {
                       swal("Poof! Your imaginary file has been deleted!", {
                           icon: "success",
                       });
                       $( ".dataTable" ).load( "/member .dataTable" );
                   }
               })
           } else {

           }
       });
   });

   $(document).on('click', '.cahnge_status_inactive', function(){

        var member_id = $(this).parent().find(".member_id").text();
        var member_status = $(this).parent().find(".member_status").text();

        $("#member_inactive_id").val(member_id);
        $("#member_inactive_status").val(member_status);
        $('#myModal_inactive').modal('show');

   });

   $(document).on('click', '.cahnge_status_active', function(){

        var member_id = $(this).parent().find(".member_id").text();
        var member_status = $(this).parent().find(".member_status").text();

        $("#member_active_id").val(member_id);
        $("#member_active_status").val(member_status);
        $('#myModal_active').modal('show');

   });

   $(document).on('click', '.filter', function(){
       var filter = $("#filter").val();
       var pincode =$('#pincode').val();
       var region =$('#region').val();
       var age = $('#age').val();
/*alert(region);*/
       $('#category_table').DataTable().clear().draw();

       table = $('#category_table').DataTable({
            dom: 'Bfrtip',
           "destroy": true,
           'language':{
               "loadingRecords": "&nbsp;",
               "processing": "Loading Members...",
               "zeroRecords": " " 
           },
           
           'mark':true,
           "ajax": {
               "url" : "{{route('get_member_by_page_filter')}}",
               "type" : "POST",
               'data' : {

                   'filter' : filter,
                   'pincode':pincode,
                   'region':region,
                   'age':age
               }
           },
           cache: false,
         "processing": true,
            // "paging":   false,
            "lengthMenu": [[100, 250, 500, -1], [100, 250, 500, "All"]],
           "columnDefs": [{
               "searchable": false,
               "orderable": false,
               "targets": [0]
           },
             {
              "targets": [9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],
               "visible": false,
               "searchable": false
           },


           ],
            dom: 'lBfrtip',
      // buttons: [
      //     'copyHtml5','excelHtml5','csvHtml5','pdfHtml5','print'
      // ],

       buttons: [
               {
                   extend: 'csvHtml5',
                   text : "Export",
                   title : 'All Member',
                   exportOptions: {
                       // columns: [ 0,1,2,3,4],
                        order : 'current',  
                       page : 'all',    
                       search : 'none' 
                   }
               },
              
           ],
            responsive: true,
       });
   table.on( 'order.dt search.dt', function () {
       table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
           cell.innerHTML = i+1;
       });
   }).draw();
   });
</script>
@endpush

@push('modals')
   <div id="myModal_inactive" class="modal fade" role="dialog">
       <div class="modal-dialog">

           <!-- Modal content-->
           <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                   <h3 class="modal-title">Inactiving Reason</h3><br>
                   <h4>Please mention the reason to inactivate member</h4>
               </div>
               <form action="{{ route('cahnge_status') }}" method="post" onsubmit="return check_no();">
                   {{ csrf_field() }}
                    <div class="modal-body">
                       <input type="hidden" name="member_id" id="member_inactive_id" value="">
                       <input type="hidden" name="member_status" id="member_inactive_status"  value="">
                               
                           <div class="row">
                            <div class="col-sm-4">
                               <label class="custom-control custom-control-primary custom-radio">
                                   <input class="custom-control-input" type="radio" name="inactive_reason" value="Misconduct"checked>
                                   <span class="custom-control-indicator"></span>
                                   <span class="custom-control-label">Misconduct</span>
                               </label>
                           </div>
                   
                           <div class="col-sm-4">
                               <label class="custom-control custom-control-primary custom-radio">
                                   <input class="custom-control-input" type="radio" name="inactive_reason" value="Death">
                                   <span class="custom-control-indicator"></span>
                                   <span class="custom-control-label">Death</span>
                               </label>
                           </div>
                       
                           <div class="col-sm-4">
                               <div class="form-group">
                                   <label for="inactive_date">Inactive Date</label>
                                   <input name="inactive_date" class="form-control input-sm" type="date" placeholder="">
                               </div>
                           </div> 
                           
                          
                           <div class="col-sm-12">
                               <div class="form-group">
                                   <label for="inactive_remark">Explain Briefly if required</label>
                                   <textarea class="form-control input-sm" rows="5" style="resize: none;" name="inactive_remark" id="inactive_remark" spellcheck="false"></textarea>
                                </div>
                           </div>
                           </div>
                   </div>
                   <div class="modal-footer">
                       <button type="submit" class="btn btn-sm btn-outline-success" title="Save">
                           <i class="icon icon-check"></i> Submit
                       </button>
                   </div>
               </form>
           </div>
       </div>
   </div>
<div class="clear"></div>
   <div id="myModal_active" class="modal fade" role="dialog">
       <div class="modal-dialog">

           <!-- Modal content-->
           <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                   <h4 class="modal-title">Activate Member</h4>
               </div>
               <form action="{{ route('cahnge_status') }}" method="post" onsubmit="return check_no();">
                   {{ csrf_field() }}
                    <div class="modal-body">
                       <input type="hidden" name="member_id" id="member_active_id" value="">
                       <input type="hidden" name="member_status" id="member_active_status"  value="">
                       <div class="col-sm-4">
                           <h3>Are You Sure, you want to activate this member again?</h3>
                       </div>
                   </div>
                   <div class="modal-footer">
                       <button type="submit" class="btn btn-lg btn-outline-success" title="Save">
                           <i class="icon icon-check"></i> Submit
                       </button>
                   </div>
               </form>
           </div>
       </div>
   </div>
<div class="modal" tabindex="-1" role="dialog" id="samitiModal">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title">Assign Samiti To Member</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
        <form action="{{ route('assign_member_to_samiti') }}" method="post">
         {{ csrf_field() }}
           <div class="form-group">
               <label for="samiti1">Select Samiti</label>
               <select class="form-control" id="samiti1" name="samiti">
                  @foreach ($samities as $samiti)
                   <option value="{{$samiti->id}}">{{$samiti->name}}</option>
                   @endforeach
               <select>
               <input type="hidden" value="" name="id" id="member_id">
               <label for="designation">Designation</label>
               <input type="text" value="" name="designation" class="form-control">
           </div>
     </div>
     <div class="modal-footer">
       <button type="submit" class="btn btn-primary">Assign Member</button>
       </form>
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
     </div>
   </div>
 </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="removeSamitiModal">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
        <input type="hidden" value="" name="id" id="remove_member_id">
       <input type="hidden" id="samities-id" value="{{json_encode($samities)}}">
     <div class="modal-header">
       <h5 class="modal-title">Remove Samiti To Member</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
        <table class="table table-dark">
            <thead>
                <tr>
                    <th>Samiti Name</th>
                    <th>Action</th>
                </tr>
            </thead>
<tbody id="assign_smiti">
  
</tbody>
        </table>
     </div>
   </div>
 </div>
</div>
@endpush