@extends('layouts.app')

@section('title') Downlines @endsection

@section('content')
<div class="container py-5">
	<div class="heading-box">
		<h1 class="heading display-4">Downlines</h1>

		@if ($downlines->count() == 0)
		<p class="lead">You have no downline.</p>
		@endif
	</div>

	<div class="row">
		<div class="col-lg-8 col-xl-9">
			@if ($downlines->count() > 0)
			<form id="form-downline" action="{{ route('downlines.purchase_amount') }}" method="POST">
				<div class="form-group">
					<select class="form-control form-control-lg" name="downline_id">
						<option value="" selected>All</option>
						@foreach ($downlines as $downline)
						<option value="{{ $downline->id }}">{{ $downline->full_name }} &bull; {{ $downline->email }}</option>
						@endforeach
					</select>
				</div>	
			</form>

			<table class="table table-borderless">
				<thead>
					<tr>
						<th>Level</th>
						<th>Total Amount Spent</th>
					</tr>
				</thead>

				<tbody>
					<tr>
						<td class="text-center">1ST</td>
						<td class="text-center">MYR <span data-level="first">0.00</span></td>
					</tr>

					<tr>
						<td class="text-center">2ND</td>
						<td class="text-center">MYR <span data-level="second">0.00</span></td>
					</tr>

					<tr>
						<td class="text-center @if (!$fulfil_total_amount_paid_requirement) text-red @endif">3RD</td>
						<td class="text-center @if (!$fulfil_total_amount_paid_requirement) text-red @endif">MYR <span data-level="third">0.00</span></td>
					</tr>
				</tbody>
			</table>
			@endif
		</div>

		<div class="col-xl-3 col-lg-4">
			@include('partials.customer_sidebar')
		</div>
	</div>
</div>
@endsection

@section('js')
<script>
	$(function()
	{
		$('#form-downline').submit();
	});

	$('[name="downline_id"]').change(function()
	{
		$(this).closest('form').submit();
	});

	$('#form-downline').submit(function(e)
	{
		$.Event(e).preventDefault();

		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: $(this).serialize(),
			dataType: 'json'

		}).done(function(data)
		{
			if (data.status == 'error')
			{
				showNoty(data);
			}

			else
			{
				$('[data-level="first"]').text(data.data.first_level);
				$('[data-level="second"]').text(data.data.second_level);
				$('[data-level="third"]').text(data.data.third_level);
			}
		});
	});	
</script>
@endsection