@extends('admin.layouts.app')

@section('content')
<!--begin::Content container-->
<div id="kt_app_content_container" class="app-container container-fluid" data-bs-backdrop='static'>
    <div class="p-2"></div>
    <!--begin::Card-->
    <div class="card">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="card-title">
                <a href="{{route('admin.affiliates')}}" class="btn btn-sm fw-semibold btn-dark mx-1 create-service-modal-btn">Affiliates</a>
                <a href="{{route('admin.referrals')}}" class="btn btn-sm fw-semibold btn-dark mx-1 create-subscriptions-modal-btn">Referrals</a>
                <a href="{{route('admin.payouts')}}" class="btn btn-sm fw-semibold btn-dark mx-1 create-category-modal-btn">Payouts</a>
            </div>
            <!--begin::Card title-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body py-4">
            <div class="table-responsive mt-5">
            <!--begin::Table-->
            <table class="table table-rounded table-striped table-row-bordered table-row-gray-400 gy-7 gs-7" id="kt_table_services">
                <!--begin::Table head-->
                <thead>
                    <!--begin::Table row-->
                    <tr class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-700">
                        <th class="min-w-10px text-dark fw-bold">User ID</th>
                        <th class="min-w-100px text-dark fw-bold">Affiliate</th>
                        <th class="min-w-100px text-dark fw-bold">Referral</th>
                        <th class="min-w-100px text-dark fw-bold">Payments</th>
                        <th class="min-w-100px text-dark fw-bold">Total Commission</th>
                    </tr>
                    <!--end::Table row-->
                </thead>
                <!--end::Table head-->
                <!--begin::Table body-->
                <tbody class="text-dark fw-semibold">
                </tbody>
                <!--end::Table body-->
            </table>
            </div>
            <!--end::Table-->
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->
</div>
@endsection

@section('script')
<script>
var table = $('#kt_table_services').DataTable({
    "lengthMenu": [ 200, 500, 1000],
    ajax: {
        url: "{{ route('admin.referrals') }}",
    },
    columns: [
        {data: 'user_id', name: 'user_id', orderable: true},
        {data: 'affiliate', name: 'affiliate', orderable: true},
        {data: 'referral', name: 'referral', orderable: true},
        {data: 'payments', name: 'payments', orderable: true},
        {data: 'commission', name: 'commission', orderable: true},
    ]
});

</script>
@endsection