{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_front_team' %}
{% set breadcrumbs = [
    {
        'link': path('app_front_account'), 'title': 'Home'
    },
	{
		'title': 'Network',
	},
    {
        'title': 'My Team',
    }
]%}
{% block stylesheets %}
	<style>
		.tooltip-container {
			position: relative;
			display: inline-block;
		}
		.tooltip-text {
			visibility: hidden;
			background-color: white;
			color: #000000;
			text-align: center;
			border-radius: 5px;
			padding: 5px;
			position: absolute;
			z-index: 1;
			bottom: 125%; /* Position above the copy button */
			transform: translateX(-50%);
			opacity: 0;
			transition: opacity 0.3s;
			font-size: 12px;
		}

		.tooltip-container:hover .tooltip-text {
			visibility: visible;
			opacity: 1;
		}

		.sidebar-content .tooltip-text {
			left: -48px;
		}

		#copyButton:focus + .tooltip-text {
			visibility: visible;
			opacity: 1;
		}
	</style>
{% endblock %}
{% block content %}
	<!-- Quick stats boxes -->
		<!-- Date Range Filter Section --start  -->
		<div class="row justify-content-center">
			<div class="col-md-12">
				<div class="card">
					<div class="card-header bg-secondary text-white border-bottom-0">
						<h6 class="mb-0">Date Range Filter</h6>
					</div>
					<div class="card-body">
						<div class="card-body">
							<form action="{{ path('app_front_team') }}" method="get">
								<div class="form-group col-md-12" >
                                <div class="input-group datepicker-range">
									<div class="input-group-prepend">
										<span class="input-group-text rounded-end-0">
											<i class="ph ph-calendar" aria-hidden="true" style="font-size: 22px;"></i>
										</span>
									</div>
                                    <input type="text" class="form-control" name="start" id="startDate" placeholder="Start Date" value="{{ app.request.query.get('start') }}">
                                    <div class="input-group-append">
                                        <span class="input-group-text rounded-0">To</span>
                                    </div>
                                    <input type="text" class="form-control rounded rounded-start-0" name="end" id="endDate" placeholder="End Date" value="{{ app.request.query.get('end') }}">
                                    <div class="input-group-append d-flex justify-content-center mt-2 mt-sm-0 mx-2">
                                        <button class="btn btn-primary" name="is_filter" type="submit" value="true">Search</button>
                                        <a class="btn btn-secondary mx-2" href="{{ path('app_front_my_subscription') }}">Reset</a>
                                    </div>
                                </div>
                            </div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Date Range Filter Section --end  -->

	<div class="row">
		<h1>Network</h1>
		<div
			class="col-lg-3">
			<!-- Members online -->
			<div class="card bg-teal text-white">
				<div class="card-body">
					<div class="row">
						<div class="col">
							<h6>Partners</h6>
							<h5>{{ totalPartners ?? 'N/A' }}</h5>
						</div>
						<div class="col">
							<i class="ph ph-users-four" style="font-size: 40px"></i>
						</div>
						<div class="col-5">
							<h6>Team Clients</h6>
							<h5>{{ teamClientCount ?? 'N/A' }}</h5>
						</div>
					</div>
				</div>

				<div class="rounded-bottom overflow-hidden mx-3" id="members-online"></div>
			</div>
			<!-- /members online -->

		</div>

		<div
			class="col-lg-3">

			<!-- Current server load -->
			<div class="card bg-pink text-white">
				<div class="card-body">
					<div class="row">
						<div class="col-2">
							<i class="ph ph-hand-deposit" style="font-size: 40px"></i>
						</div>
						<div class="col">
							<h6>Direct Total Profit</h6>
							<h5>{{ directSaleTotal is defined ?  directSaleTotal|number_format(2, ',', '.') : "0,00"}}<i class="ph ph-currency-eur" style="font-size: 25px"></i>
							</h5>
						</div>
					</div>
				</div>

				<div class="rounded-bottom overflow-hidden" id="server-load"></div>
			</div>
			<!-- /current server load -->

		</div>

		<div
				class="col-lg-3">

			<!-- Current server load -->
			<div class="card bg-gradient text-white">
				<div class="card-body">
					<div class="row">
						<div class="col-2">
							<i class="ph ph-chart-bar" style="font-size: 40px"></i>
						</div>
						<div class="col">
							<h6>Team Total Profit</h6>
							<h5>{{ teamSaleTotal is defined ?  teamSaleTotal|number_format(2, ',', '.') : "0,00"}}<i class="ph ph-currency-eur" style="font-size: 25px"></i>
							</h5>
						</div>
					</div>
				</div>

				<div class="rounded-bottom overflow-hidden" id="server-load"></div>
			</div>
			<!-- /current server load -->

		</div>

		<div
			class="col-lg-3">

			<!-- Today's revenue -->
			<div class="card bg-primary text-white">
				<div class="card-body">
					<div class="row">
						<div class="col-2">
							<i class="ph ph-chart-pie-slice" style="font-size: 40px"></i>
						</div>
						<div class="col">
							<h6>Commission This Month</h6>
							<h4>{{ getCommissionThisMonthTotal.total is defined ? getCommissionThisMonthTotal.total|number_format(2, ',', '.') : "0,00" }}<i class="ph ph-currency-eur" style="font-size: 25px"></i>
							</h4>
						</div>
					</div>
				</div>

				<div class="rounded-bottom overflow-hidden" id="today-revenue"></div>
			</div>
			<!-- /today's revenue -->

		</div>
	</div>
	<!-- /quick stats boxes -->
	<div class="row">
		<h1>Ref Link</h1>
		<div class="col-md">
			<div class="card border-success">
				<div class="card-body">
					<div class="row">
						 <div class="col">
							 <div class="d-flex align-items-center text-nowrap">
								 <i class="ph ph-tree-structure"></i>
								 <span id="linkText" class="mx-1 my-auto">{{ app.request.server.get('REF_LINK_URL') ~ "/ref/" ~ app.user.refcode }}</span>
								 <span class="tooltip-container my-auto">
								  	<i onclick="copyLink('tooltip1')" id="copyButton" class="fas fa-copy"></i> <!-- Font Awesome icon for copy -->
									<span class="tooltip-text" id="tooltip1">Copy to clipboard</span>
								</span>
							 </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<h1>My Team</h1>
		<div class="col-md-12 card overflow-auto">
				<table class="table table-hover mb-0 border">
					<thead>
					<tr>
						<th style="width: 5%"></th>
						<th scope="col" style="width: 11.11%">Username</th>
						<th scope="col" style="width: 11.11%">Clients</th>
						<th scope="col" style="width: 11.11%">Partners</th>
						<th scope="col" style="width: 11.11%">Feedback/Rating</th>
						<th scope="col" style="width: 11.11%">Rank</th>
						<th scope="col" style="width: 11.11%">Running AI / Product</th>
						<th scope="col" style="width: 11.11%">Total Sales</th>
						<th scope="col" style="width: 11.11%">Incoming</th>
						<th scope="col" style="width: 11.11%">This Month</th>
					</tr>
					</thead>
				{% if user_tree is not empty  %}
					{% for user in user_tree %}
						{% set rootLevel = user.level %}
						{{ include('frontend/team/network_tree_row.html.twig') }}
					{% endfor %}
				{% else %}
					<table class="table table-striped border text-center">
						<tbody>
						<tr>
							<th scope="col" colspan="8">Record not found !</th>
						</tr>
						</tbody>
					</table>
				{% endif %}

			{{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': user_tree}) }}
		</div>
	</div>
{% block javascript %}
<script>
	function copylink() {
    const refLink = document.getElementById("refLink").innerText;  // Get the referral link text
    const tempInput = document.createElement("input");  // Create a temporary input element
    tempInput.value = refLink;  // Set the value of the input to the referral link
    document.body.appendChild(tempInput);  // Append the input to the document body
    tempInput.select();  // Select the input text
    document.execCommand("copy");  // Copy the text to the clipboard
    document.body.removeChild(tempInput);  // Remove the temporary input element
}
</script>
{% endblock %}
{% endblock %}