@extends('layouts.app')
@section('head')

@endsection
@section('page-title')
<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Approved Members</h1>
@endsection
@section('body')
<div class="card shadow">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <th>Member ID</th>
                    <th>Comapny Name</th>
                    <th>Company Phone</th>
                    <th>Action</th>
                </thead>
                <tbody>
                    <tbody>
                        @foreach ($member as $item)
                            <tr>
                                <td>{{ $item->agi_member_id }}</td>
                                <td>{{ $item->company_name }}</td>
                                <td>{{ $item->comp_phone }}</td>
                                <td><button class=" btn btn-primary btn-sm" id="btnApprove" data-id="{{ $item->agi_member_id }}">Approve</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
$(document).ready(function () {
    $(document).on('click','#btnApprove', function(){
        var member_id = $(this).data('id')
        $.ajax({
            type: "post",
            url: "approve_member",
            data: { 'member_id' : member_id },
            success: function (response) {
                window.location.href = '/pending-members';
                alert('Member Approved')
            }
        });
    })
});
</script>
@endsection