{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_front_my_commission' %}
{% set breadcrumbs = [
    {
        'link': path('app_front_dashboard'), 'title': 'Home'
    },
	{
		'title': 'Network',
	},
    {
        'title': 'My Commission',
    }
]%}

{% block content %}
    <div class="row">
			<div class="col-lg-4">

			<!-- Current server load -->
			<div class="card bg-teal 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">
							<h4>Total Commission</h4>
							<h5>{{ total_commission.total is defined ?  total_commission.total|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-4">

			<!-- 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-calendar" style="font-size: 40px"></i>
						</div>
						<div class="col">
							<h4>This Month</h4>
							<h5>{{ current_month_commission.total is defined ?  current_month_commission.total|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-4">
			<!-- 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-calendar" style="font-size: 40px"></i>
						</div>
						<div class="col">
							<h4>Last Month</h4>
							<h4>{{ last_month_commission.total is defined ? last_month_commission.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>
	<div class="row justify-content-center">
		<!-- Left Section -->
		<div class="col-md-12">
			<div class="card">
				<div class="card-header bg-secondary text-white border-bottom-0">
					<h6 class="mb-0">Search</h6>
				</div>
				<div class="card-body">
					<form action="{{ path('app_front_my_commission') }}" method="get">
						<div class="form-row">
							<div class="form-group col-12 col-md-3" style="float:left; padding:5px">
								<input type="text" class="form-control" name="search_value" id="search_value" placeholder="Search by Custom Name/Product Name / Commission Amount / Level / Status value="{{ app.request.query.get('search_value') }}">
							</div>
							<div class="form-group col-md-9" style="float:right; padding:5px;">
								<div class="input-group datepicker-range">
									<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 custom-label 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 col-12 col-sm-2 d-flex justify-content-center mt-2 mt-sm-0" style="float:right; margin-left: 10px;">
										<button class="btn btn-primary me-2" name="is_filter" type="submit" value="true">Search</button>
										<a class="btn btn-secondary" href="{{ path('app_front_my_commission') }}">Reset</a>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- Right Section -->
	</div>
    <div class="card">
        <div class="table-responsive">
            <table class="table table-bordered table-striped text-center">
                <thead>
                <tr>
                    <th>{{ knp_pagination_sortable(user_commission_data, 'Date', 'user_commission_data.commission_date') }}</th>
                    <th>{{ knp_pagination_sortable(user_commission_data, 'Customer', 'user_commission_data.user_name') }}</th>
                    <th>{{ knp_pagination_sortable(user_commission_data, 'Product Name', 'user_commission_data.product_name') }}</th>
                    <th>{{ knp_pagination_sortable(user_commission_data, 'Commission Amount', 'user_commission_data.amount') }}</th>
					<th>{{ knp_pagination_sortable(user_commission_data, 'Level', 'user_commission_data.getLevel') }}</th>
                    <th>{{ knp_pagination_sortable(user_commission_data, 'Status', 'user_commission_data.status') }}</th>
                </tr>
                </thead>
                <tbody>
                {% for commission in user_commission_data %}
                    {% include 'frontend/my_commissions/row.html.twig' %}
                {% else %}
                    <tr class="w-100 text-center">
                        <td class="border-none" colspan="6">No Records found</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': user_commission_data}) }}
    </div>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('assets/js/timezone.js') }}"></script>
{% endblock %}