@extends('layouts.admin')

@section('page-header', 'Members (Pending Approval)')

@section('styles')

<style>
      div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }

   .dataTables_filter{
    display: none !important;
   }
</style>
@endsection

@section('content')
    <div class="white-component">
    <form class="form-inline header-form-wrapper">

        <div class="form-group ">
            <input type="text" class="form-control" name="filter[name]"
                placeholder="Search by name" value="{{ request()->input('filter.name') }}">
        </div>
        <button class="btn btn-primary" type="submit">Search</button>
    </form>

<div class="table-responsive">
<table id="example" class="table table-striped table-bordered custom-table" >
     <thead>

            <th>Member</th>
            <th>Country</th>
            <th>State</th>
            <th>City</th>
            <th>Mobile</th>
            <th>sign documents</th>
            <th>preferred training session</th>
            <th>date of registration submission</th>
            <th>Date</th>
            <th>Location</th>
            <th class="fixed-col">Action</th>
        </thead>
        <tbody>
        @forelse ($members as $member)

            <tr>
                <td id="fname">
                     <a href="{{ route('profile.show',$member->id) }}" class="">{{ $member->name }}</a>
                    <br>
                    <a href="mailto:{{ $member->email }}">{{ $member->email }}</a>
                </td>
                <td id=""> {{$member->country}}</td>
                <td id=""> {{$member->province}}</td>
                <td id="city"> {{$member->city}}</td>
                <td id="mobile"> {{$member->mobile}}</td>
                <td>
                    Is no document                        <br>
                        <p></p>
                                         </td>

                 <td data-order="{{ $member->trainingSession ? \Carbon\Carbon::parse($member->trainingSession->start_date)->format('Y-m-d') : '0000-00-00' }}">
                   @if($member->trainingSession)
                    {{\Carbon\Carbon::parse($member->trainingSession->start_date)->format('jS F').' - '.
                                        \Carbon\Carbon::parse($member->trainingSession->end_date)->format('jS F Y')
                                        .'  '.$member->trainingSession->location}}
                    @endif
                 </td>

                 <td data-order="{{$member->created_at}}">
                     {{ \Carbon\Carbon::parse($member->created_at)->format('jS F Y') }}
                 </td>

                 <td>
                    <input type="date" name="training_info_date" id="training_info_date" value="{{ old('training_info_date', $member->training_info_date) }}"/>
                </td>

                 <td>
                    <input type="text" id="location" name="training_location" style="width: 130px">
                </td>

                <td  class="fixed-col">
                <div class="col-md-5">
                <button type="button" class="btn btn-outline-danger btn-sm" data-type="delete"
                            onclick="delMember({{ $member->id }},'{{ $member->name}}')">Reject </button>
                    </div>

                <div class="col-md-5 ">
                    @if ($member->isPendingApproval())
                        <div id="location-url" data-location-url="{{ route('admin.approved-members.create') }}"></div>
                        <button style="margin-top: 10px" class="btn btn-outline-info btn-sm" onclick="approveFuntion({{$member->id}})">Approve</button>

                    @else

                        @if ($member->isActive())
                            <button style="margin-top: 10px" class="btn btn-outline-danger btn-sm"
                                data-confirm
                                data-confirm-action="{{ route('admin.active-members.delete', $member->id) }}"
                                data-confirm-title="Deactivate Member Account"
                                data-confirm-text="Are you sure you want to deactivate member &quot;{{ $member->name }}&quot;?">Deactivate</button>
                        @else
                            <button  style="margin-top: 10px" class="btn btn-outline-success btn-sm"
                                data-confirm
                                data-confirm-action="{{ route('admin.active-members.create', $member->id) }}"
                                data-confirm-title="Activate Member Account"
                                data-confirm-text="Are you sure you want to activate member &quot;{{ $member->name }}&quot;?">Activate</button>
                        @endif
                    @endif
                    </div>

                </td>
            </tr>

        </div>
        @empty
            <tr>
                <td><div class="no-data">No Members</div></td>
            </tr>
        @endforelse
        </tbody>

    </table>

    {{ $members->appends(request()->except('page'))->links() }}
</div>
@endsection
@section('scripts')
<script type="text/javascript">

function delMember(id,name) {
        console.log('sdfgh');
        var text = "Are you sure you want to remove member '"+name+"' ? Enter reason for the rejection :"
        swal(text, {
            content: "input"
        }).then(function (value) {
            $.ajax({
              type: "POST",
              url: "/admin/members/reject",
              data: {
                comment: value,
                user_id: id,
              },
              success: function success(msg) {
                 window.location.reload();
              }
            });
        });
  }

function approveFuntion(memberId){
    var locationUrl = $('#location-url').data('location-url');
    var location =document.getElementById('location').value;
    var training_info_date =document.getElementById('training_info_date').value;
    // var memberId =document.getElementById('memberId').value;

    $.ajax({
        type: "POST",
        url: locationUrl,
        data: {location : location, training_info_date : training_info_date ,memberId : memberId },
        success: function( msg ) {
            if (msg == 'success') {
                swal("Approve Member Account", {
                    icon: "success",
                });

            }else{
                swal("Approve Member Account", {
                    icon: "error",
                });
            }
                setTimeout(function(){
                   window.location.reload(1);
                }, 2000);
        }

    });



}

$('#location').selectize({
     plugins: ['restore_on_backspace'],
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});

$(document).ready(function() {
  $('#example').DataTable({
    columnDefs: [
    {bSortable: false, targets: [3,4,5,8,9,10]}
  ],
  "bPaginate": false

  });
} );
</script>
<script>
@endsection