@extends('layouts.master')

 @section('page-content')
 <div class="title-bar">
  <h1 class="title-bar-title">
    <span class="d-ib">All Events</span>
  </h1>
 </div>
 <div class="row gutter-xs">
  <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>Events List</strong>
      </div>
      <div class="card-body ">
<div class="row">
                <div class="col-xs-12 table-responsive">
                 <table class="table table-bordered table-responsive" id="category_table">
                   
     <!--    <table class="table table-bordered table-striped table-nowrap dataTable table-responsive" cellspacing="0" id="category_table"> -->
          <thead>
            <tr>
              <th>#</th>
              <th>Event Name</th>
              <th>Date</th>
              <th>Time</th>
              <th>Venue</th>
              <th>Location</th>
              <th>Samiti</th>
              <th>Region</th>
              <th>Category</th>
             <!--  <th>Date & Time</th>
              --> <th>Action</th>
            </tr>
          </thead>
          <tbody>
                        
          </tbody>
        </table>
      </div>
    </div>
      </div>
    </div>
  </div>
 </div>
 @endsection

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

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">List of Interested Members for event</h4>
                </div>
                <div class="modal-body">
                  <p id="selectTriggerFilter"><label><b>Filter By User Type:</b></label></p>
                       <table class="table table-bordered table-striped table-nowrap" cellspacing="0" width="100%" id="member_list">
                        <thead>
                            <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Member code</th>
                            <th>User Type</th>
                            <!-- <th>View</th> -->
                            
                          </tr>
                        </thead>
                        <tbody>

                        </tbody>


                    </div>

                </div>

            </div>
        </div>
    @endpush


 @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>
  let column_num = parseInt( $(this).parent().index());

  $("#checkAll").click(function() {
    if($('.check-row').click()) {
      if ($(this).is(":checked")) {
     //$('input:checkbox').not(this).prop('checked', this.checked);
     $(".edit").hide();
 }
 else {
  $(".edit").show();
 }
}
});
    let table;

  $('#category_table').DataTable().clear().draw();
    table = $('#category_table').DataTable({
        "destroy": true,
        'language':{
            "loadingRecords": "&nbsp;",
            "processing": "Loading Events...",
            "zeroRecords": " "
        },
        'mark':true,
        "ajax": {
            "url" : "{{route('get_events_all')}}",
            "type" : "POST",
            "data" : function(d){
            },
        },
        "processing": true,
        "columnDefs": [{
            "searchable": false,
            "orderable": false,
            "targets": [0]
        }],
         dom: 'Bfrtip',
       // buttons: [
       //     'copyHtml5','excelHtml5','csvHtml5','pdfHtml5','print'
       // ],

        buttons: [
                {
                    extend: 'csvHtml5',
                    title : 'All Events',
                    exportOptions: {
                        columns: [ 0,1,2,3,4,5,6,7],
                    }
                },
               
            ],
    });
    table.on( 'order.dt search.dt', function () {
        table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        });
    }).draw();

$(document).on('click', '.popup', function(e){
  e.preventDefault();
  var event_id = $(this).data('popup');
  $.ajax({
        url:'/mark_event_as_popup/'+ event_id,
        type:'get',
        dataType: 'json',
        data:{_method:'GET',_token:'{{ csrf_token() }}'},
        success : function(response) {
            console.log(response)
            return response;

        }
  });
});

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

var event_id = $(this).attr('data-event_id');
   

  $(document).ready( function () {
    table =  $('#member_list').DataTable({
      'language':{
        "loadingRecords": "&nbsp;",
        "processing": "Loading customers..."
      },
      "ajax": '/getInterestingMembers/'+ event_id,
      'mark':true,
      "processing": true,
      "lengthChange": false,
      "bPaginate": false,
      'dom': 'Bfrtip',
      "columnDefs": [{
        "searchable": false,
        "orderable": false,
        "targets": [0]
      }],
     
    buttons: [
             
                {
                    extend: 'csvHtml5',
                    title : 'List of Interested Members for event',
                    text : "Export",
                    exportOptions: {
                        columns: [ 0,1,2,3,4,5],
                    }
                },

                 {
                    extend: 'print',
                    title : '',
                    text : "PDF",
                    exportOptions: {
                        columns: [ 0,1,2,3,4,5],
                    },
                    orientation: 'portrait'
                },
               
            ],
      responsive: true,
      initComplete: function() {
      var column = this.api().column(5);

      var select = $('<select class="form-control input-sm filter" name="route"><option value="">All</option></select>')
        .appendTo('#selectTriggerFilter')
        .on('change', function() {
          var val = $(this).val();
          column.search(val ? '^' + $(this).val() + '$' : val, true, false).draw();
        });

      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>');
      });
    }



    });
$('.buttons-excel').addClass('btn btn-sm btn-success');
$('.buttons-print').addClass('btn btn-sm btn-primary');
  });


 
    $('#myModal').modal('show');

});


function getmemberbyuserId(user_id){
    // alert(user_id);
             $.ajax({
                    url:'/getmemberbyuserId/'+ user_id,
                    type:'get',
                    data:{_method:'GET',_token:'{{ csrf_token() }}'},
                    success : function(response) {
                        console.log(response);
                        return response;

                    }
                });
}

</script>


@endpush