{$downlines = app('query')->getMyDownlines();}

<!--page section-->
<section class="header-fixed-page-section">
    <div class="container header-flex-group">
        <div>
            <h1><a href="javascript:history.back();" class="back-button"><i class="icon ion-ios-arrow-left"></i> </a> Referral</h1>
            <div class="breadcrumb">
                <ul>
                    <li><a $href="">TripMata</a> </li>
                    <li><a $href="account">Dashboard</a> </li>
                    <li><a href="#" class="active">Referral</a> </li>
                </ul>
            </div>
        </div>

		<div class="wrapper-flex flex-column">
            <h2>₦{number_format($downlines->commission_earned, 2, '.', ',')}</h2>
            <span>Commission Earned</span>
        </div>

    </div>
</section>

<!-- main content with sidebar -->
<div class="container">
    <div class="wrapper-flex flex-space-between">
        <div class="dashboard-sidebar fw30 gray-bg">
            <div class="display-info">
                <h3>Overview</h3>
                <p class="text-gray">Check these stats below in case you have missed something.</p>
            </div>
            <div class="display-list">
                <ul>
                    <li>
                        <span class="list-title">
                            <h5>Total downlines</h5>
                            <p>Showing your total downlines</p>
						</span>

                        <span class="list-content">
                            {$downlines->total_downlines}
                        </span>
                    </li>

                    <li>
                        <span class="list-title">
                            <h5>Completed Bookings</h5>
                            <p>Bookings completed by downlines</p>
						</span>

                        <span class="list-content">
                            {$downlines->completed_bookings}
                        </span>
                    </li>

					<li>
                        <span class="list-title">
                            <h5>Total Bookings</h5>
                            <p>Total bookings initiated by downlines</p>
						</span>

                        <span class="list-content">
                            {$downlines->total_bookings}
                        </span>
                    </li>

                </ul>
            </div>
        </div>

		<div class="dashboard-content fw68">

			<div class="gray-bg notification-ads settings-wrapper" style="margin-top: 0px;">
				<div class="main-support-footer">
					<div class="main-support-footer-content">
						<h3 class="settings-flex-title">Your Referral Link <button data-copy="address">copy</button></h3>
						<textarea class="input settings-wrapper-input" id="address" readonly>{$downlines->referral_link}</textarea>
						<p>This is your unique url address, you can share it on your website or share it with friends to start earning commissions on TripMata for every completed bookings. </p>

						<a href="https://tripmata.com/register-{$downlines->referral_code}" target="_blank" class="btn btn-curve btn-signal" style="width: 150px;">Add a Downline</a>
					</div>
				</div>
			</div>

            <div class="dashboard-reservations">
                <div class="dashboard-reservations-header wrapper-flex flex-space-between flex-middle">
                    <h3>Referral History</h3>
                    <form action="" method="post">
                        <input type="text" class="search" placeholder="Search">
                    </form>
                </div>

                <div class="table-container">
					@if (count($downlines->history) == 0)
					<div class="noting-found">
						<span class="noting-found-image"></span>
						<span class="noting-found-content">No referral history for you at the moment.</span>
					</div>
					@else
						<table class="table" cellspacing="0">
							<thead>
							<tr>
								<th>SN</th>
								<th>First Name</th>
								<th>Last Name</th>
								<th>Referral Link</th>
								<th>Registration Date</th>
							</tr>
							</thead>

							<tbody>
								@foreach ($downlines->history as $id => $data)
								<tr>
									<td>{intval($id) + 1}</td>
									<td>{ucfirst($data->name)}</td>
									<td>{ucfirst($data->surname)}</td>
									<td>
										{$link = 'https://' . str_replace('@', '.', $data->internalEmail);}
										<a href="{$link}" target="_blank">{$link}</a>
									</td>
									<td>{date('m/d/Y', $data->created)}</td>
								</tr>
								@endfor

							</tbody>
						</table>

					@endif
                </div>
            </div>

        </div>
    </div>

</div>


@partial('main-footer', ['message' => $message]);