Your IP : 3.129.63.214
@extends('layouts.instructor')
@section('page_title', 'Affiliate | Compensation')
@section('page_content')
<div class="pt-5 pb-5">
<div class="container">
{!!affiliateInfo() !!}
<div class="row mt-0 mt-md-4">
@include('affiliate.nav')
<div class="col-lg-8 col-md-7 col-12">
<div class="row">
<div class="col-xl-12 col-12 mb-5">
<div class="card">
<div class="card-header">
<h1 class="mb-1 fw-bold">Compensation Plan</h1>
</div>
<hr>
<div class="table-responsive" id="comp_plan_table">
<table class="table text-nowrap mb-0">
<thead style="background-color: #036; color:#fff;">
<tr>
<th colspan="6">
<div class="text-center">
<span class="spinner-border spinner-border-sm"
aria-hidden="true"></span> <span>Loading Data ... </span>
</div>
</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-0">
<script>
$(function () {
getCompensationPlans();
function getCompensationPlans() {
$.ajax({
method: 'GET',
url: api_url + `affiliate/compensation_plan`,
}).done(function (res) {
console.log(res);
table = $('#comp_plan_table');
table.html('');
res.map((data) =>
table.append(`
<table class="table text-nowrap mb-0">
<thead style="background-color: #036; color:#fff;">
<tr>
<th colspan="6">${data.title} Membership Plan
<span style="float: right;">Upgrade fee: #${naira(data.upgrade_fee)}</span>
</th>
</tr>
<tr>
<th>Position</th>
<th>G1</th>
<th>G2</th>
<th>G3</th>
<th>G4</th>
<th>G5</th>
</tr>
</thead>
<tbody>
<tr>
<td>${data.x_data[0].stage_title}</td>
<td>${(data.x_data[0].x1 == 0) ? '-' : data.x_data[0].x1 + '%'}</td>
<td>${(data.x_data[0].x2 == 0) ? '-' : data.x_data[0].x2 + '%'}</td>
<td>${(data.x_data[0].x3 == 0) ? '-' : data.x_data[0].x3 + '%'}</td>
<td>${(data.x_data[0].x4 == 0) ? '-' : data.x_data[0].x4 + '%'}</td>
<td>${(data.x_data[0].x5 == 0) ? '-' : data.x_data[0].x5 + '%'}</td>
</tr>
<tr>
<td>${data.x_data[1].stage_title}</td>
<td>${(data.x_data[1].x1 == 0) ? '-' : data.x_data[1].x1 + '%'}</td>
<td>${(data.x_data[1].x2 == 0) ? '-' : data.x_data[1].x2 + '%'}</td>
<td>${(data.x_data[1].x3 == 0) ? '-' : data.x_data[1].x3 + '%'}</td>
<td>${(data.x_data[1].x4 == 0) ? '-' : data.x_data[1].x4 + '%'}</td>
<td>${(data.x_data[1].x5 == 0) ? '-' : data.x_data[1].x5 + '%'}</td>
</tr>
<tr>
<td>${data.x_data[2].stage_title}</td>
<td>${(data.x_data[2].x1 == 0) ? '-' : data.x_data[2].x1 + '%'}</td>
<td>${(data.x_data[2].x2 == 0) ? '-' : data.x_data[2].x2 + '%'}</td>
<td>${(data.x_data[2].x3 == 0) ? '-' : data.x_data[2].x3 + '%'}</td>
<td>${(data.x_data[2].x4 == 0) ? '-' : data.x_data[2].x4 + '%'}</td>
<td>${(data.x_data[2].x5 == 0) ? '-' : data.x_data[2].x5 + '%'}</td>
</tr>
<tr>
<td>${data.x_data[3].stage_title}</td>
<td>${(data.x_data[3].x1 == 0) ? '-' : data.x_data[3].x1 + '%'}</td>
<td>${(data.x_data[3].x2 == 0) ? '-' : data.x_data[3].x2 + '%'}</td>
<td>${(data.x_data[3].x3 == 0) ? '-' : data.x_data[3].x3 + '%'}</td>
<td>${(data.x_data[3].x4 == 0) ? '-' : data.x_data[3].x4 + '%'}</td>
<td>${(data.x_data[3].x5 == 0) ? '-' : data.x_data[3].x5 + '%'}</td>
</tr>
</tbody>
</table>
`))
}).fail(function (res) {
console.log(res);
})
}
})
</script>
@endsection