@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">Affiliate status</th>
                                <th class="min-w-100px text-dark fw-bold">Total visits</th>
                                <th class="min-w-100px text-dark fw-bold">Pending referrals</th>
                                <th class="min-w-100px text-dark fw-bold">Successful referrals</th>
                                <th class="min-w-100px text-dark fw-bold">Conversion rate</th>
                                <th class="min-w-100px text-dark fw-bold">Total earnings</th>
                                <th class="min-w-100px text-dark fw-bold">Available earnings</th>
                                <th class="min-w-100px text-dark fw-bold">Status</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.affiliates') }}",
            },
            columns: [{
                    data: 'client_id',
                    name: 'client_id',
                    orderable: true
                },
                {
                    data: 'username',
                    name: 'username',
                    orderable: true
                },
                {
                    data: 'affiliate_status',
                    name: 'affiliate_status',
                    orderable: false
                },
                {
                    data: 'total_visits',
                    name: 'total_visits',
                    orderable: false
                },
                {
                    data: 'pending_referrals',
                    name: 'pending_referrals',
                    orderable: false
                },
                {
                    data: 'successful_referrals',
                    name: 'successful_referrals',
                    orderable: false
                },
                {
                    data: 'conversion_rate',
                    name: 'conversion_rate',
                    orderable: false
                },
                {
                    data: 'total_earnings',
                    name: 'total_earnings',
                    orderable: false
                },
                {
                    data: 'available_earnings',
                    name: 'available_earnings',
                    orderable: false
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false
                },
            ],
            order: [
                [0, 'desc']
            ]
        });
    </script>
@endsection