@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">
            <form action="{{ url('/all_member_new') }}" method="GET">
               <div class="row">
                   <div class="col-xs-3 col-sm-4">
                       <select name="member_type" class="form-control">
                           <option value="active" @if(request()->get('member_type')=="active") selected @endif>Active Member</option>
                           <option value="all" @if((request()->get('member_type')=="all") || (request()->get('member_type')==" ")) selected @endif>All</option>
                           <option value="member_with_sw" @if(request()->get('member_type')=="member_with_sw") selected @endif>Member With SW</option>
                           <option value="member_without_sw" @if(request()->get('member_type')=="member_without_sw") selected @endif>Member Without SW</option>
                           <option value="inactive" @if(request()->get('member_type')=="inactive") selected @endif>Inactive Member</option>
                       </select>
                   </div>
                   <div class="col-xs-3 col-sm-3">
                        <select name="region" class="form-control">
                           <option value=" ">All Regions</option>
                           @foreach ($regions as $key => $region)
                               <option value="{{ $region->name }}" @if(request()->get('region')==$region->name) selected @endif>{{ $region->name }}</option>
                           @endforeach
                       </select> 
                   </div>
                   <div class="col-xs-3 col-sm-3">
                       <select name="age" class="form-control">
                           <option value="all">All</option>
                           <option value="below_18" @if(request()->get('age')=="below_18") selected @endif>Below 18 Age</option>
                           <option value="above_18" @if(request()->get('age')=="above_18") selected @endif>Above 18 Age </option>
                       </select>
                   </div>
                   <div class="col-xs-3 col-sm-2">
                       <input type="text" name="code" placeholder="Member Code" class="form-control" @if(request()->get('code')!="") value="{{ request()->get('code') }}" @endif>
                   </div>
               </div>
               <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
                 <div class="col-xs-3 col-sm-2">
                       <input type="text" name="fname" placeholder="First Name" class="form-control" @if(request()->get('fname')!="") value="{{ request()->get('fname') }}" @endif>
                   </div>
                   <div class="col-xs-3 col-sm-2">
                        <input type="text" name="mname" placeholder="Middle Name" class="form-control" @if(request()->get('mname')!="") value="{{ request()->get('mname') }}" @endif>
                   </div>
                   <div class="col-xs-3 col-sm-2">
                         <input type="text" name="lname" placeholder="Last Name" class="form-control" @if(request()->get('lname')!="") value="{{ request()->get('lname') }}" @endif>
                   </div>
                   <div class="col-xs-3 col-sm-2">
                       <input type="number" name="number" placeholder="Contact Number" class="form-control" @if(request()->get('number')!="") value="{{ request()->get('number') }}" @endif>
                   </div>
                   <div class="col-xs-3 col-sm-2">
                       <input type="text" name="email" placeholder="Email" class="form-control" @if(request()->get('email')!="") value="{{ request()->get('email') }}" @endif>
                   </div>
                   <div class="col-xs-6 col-sm-2">
                       <button type="submit" class="btn btn-sm btn-outline-success">
                           <i class="icon icon-filter"></i> Refresh
                       </button>
                       <a href="{{ url('/all_member_filtered_excel?member_type='.request()->get('member_type').'&name='.request()->get('name').'&code='.request()->get('code').'&region='.request()->get('region').'&age='.request()->get('age')) }}" class="btn btn-sm btn-outline-primary btn-dark"><i class="icon icon-download"></i> Excel</a>
                   </div>
               </div>
            </form>
            <div class="row">
               <div class="col-xs-12 table-responsive">
                <table class="table table-bordered table-responsive">
                   <thead style="background-color: #171a2b;color:#fff;">
                       <tr>
                           <th>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>Remark</th>
                           <th>Action</th>
                       </tr>
                   </thead>
                   <tbody>
                     @foreach($members as $member)
                     {{--@if (strpos($member->member_type, 'LM') !== false || strpos($member->member_type, 'PM') !== false || strpos($member->member_type, 'NM') !== false)--}}
                     <tr>
                        <td>{{ $loop->iteration + $members->firstItem() - 1}}</td>
                        <td>{{ $member->f_name." ".$member->m_name." ".$member->l_name }}</td>
                        <td>{{ $member->member_type }}</td>
                        <td>{{ $member->member_code }}</td>
                        <td>{{ $member->contact }}</td>
                        <td>{{ $member->email }}</td>
                        <td>{{ $member->getRegionByPincode($member->pincode) }}</td>
                        <td>{{ $member->pincode }}</td>
                        <td>{!! $member->mem_active==1 ? '<span class="label label-lg font-weight-bold label-success label-inline">Active</span>' : '<span class=" label label-lg font-weight-bold label label-danger label-inline">Inactive</span>'!!}</td>

                         <td>
                            <p class="member_id hide">{{ $member->id }}</p>
                            <p class="member_status hide">{{ $member->is_member }}</p>
                            <a href="{{ route('member.edit',$member->id) }}" class="btn btn-outline-success btn-xs edit" title="Edit Member" tooltip><i class="icon icon-edit"></i></a>
                            @if($member->is_member == 1)
                                <button type="button" class="btn btn-xs btn-outline-danger cahnge_status_inactive" data-toggle="tooltip" data-id="{{ $member->id }}" title="Change Status to Inactive"><i class="icon icon-close"></i></button>
                                @if($member->id != null)
                                    <a href="{{ route('member_application_pdf',$member->id) }}" class="btn btn-outline-default btn-xs" title="Print" tooltip target="_blank"><i class="icon icon-file"></i></a>
                                @endif
                            @elseif ($member->is_member == 0)
                                <button type="button" class="btn btn-xs btn-outline-success cahnge_status_active" data-toggle="tooltip" data-id="{{ $member->id }}" title="Change Status to Active"><i class="icon icon-check"></i></button>
                            @endif
                            <a href="#" data-member="{{ $member->id }}" class="btn btn-outline-success btn-xs openSamitiModal" title="Assign Member To Samiti" tooltip><i class="icon icon-edit"></i></a>
                            <a href="#" data-member="{{ $member->id }}" data-samiti="{{ $member->assigned_samiti }}" class="btn btn-outline-success btn-xs removeMemberFromSamiti" title="Remove Member From Samiti" tooltip><i class="icon icon-close"></i></a>
                        </td>
                     </tr>
                     {{--@endif--}}
                     @endforeach
                   </tbody>
               </table>
           </div>

            </div>
           </div>
           <div class="card-footer">
               <div class="row">
                   <div class="col-md-4">
                       <p>Displaying {{$members->count()}} of {{ $members->total() }} record(s).</p>
                   </div>
                   <div class="col-md-8">
                    <ul class="pagination pagination-sm m-0 float-right">
                       {{ $members->appends(Request::except('page'))->render() }}
                    </ul>
                   </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