{% import "_modules/bsmacros.html.twig" as bs %}
{% extends "baseadmin.html.twig" %}

{% block title %}Dashboard -
	{{ parent() }}
{% endblock %}

{% block breadcrumb %}
	{{ parent() }}
	<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
{% endblock %}

{% block content %}
	{# <h1 class="mt-4">Welcome back,
		{{ app.user.username }}!</h1> #}
	<div
		class="row mt-4">

		<!-- Notifications -->
		<div class="col-xl-12 col-md-12">
			{# {% include "admin/_notifications.html.twig" %} #}
		</div>

		<!-- Quick Stats Cards -->
		<div class="col-xl-4 col-md-6 mb-4">
			<div class="card border-left-primary shadow h-100 py-2">
				<div class="card-body d-flex justify-content-between align-items-center">
					<div>
						<div class="fw-bold font-weight-bold text-primary text-uppercase mb-1">YTD Revenue</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">
							${{ytd|number_format(2)}}
						</div>
					</div>
					<i class="fas fa-calendar fa-2x text-gray-300"></i>
				</div>
			</div>
		</div>

		<div class="col-xl-4 col-md-6 mb-4">
			<div class="card border-left-success shadow h-100 py-2">
				<div class="card-body d-flex justify-content-between align-items-center">
					<div>
						<div class="fw-bold font-weight-bold text-success text-uppercase mb-1">MTD Revenue</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">${{ mtd|number_format(2) }}</div>
					</div>
					<i class="fas fa-calendar-days fa-2x text-gray-300"></i>
				</div>
			</div>
		</div>

		<div class="col-xl-4 col-md-6 mb-4">
			<div class="card border-left-info shadow h-100 py-2">
				<div class="card-body d-flex justify-content-between align-items-center">
					<div>
						<div class="fw-bold font-weight-bold text-info text-uppercase mb-1">Today's Revenue</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">
							${{ today|number_format(2) }}
						</div>
					</div>
					<i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
				</div>
			</div>
		</div>
	</div>

	<!-- Top Spenders Table -->
	<div class="card shadow mb-4">
		<div class="card-header py-3 d-flex justify-content-between">
			<h6 class="m-0 font-weight-bold">Top 5 Spenders</h6>
		</div>
		<div class="card-body p-0">
			<div class="table-responsive">
				<table class="table table-hover mb-0">
					<thead class="thead-light">
						<tr>
							<th></th>
							<th>
								<i class="fas fa-user"></i>
								User</th>
							<th>
								<i class="fas fa-calendar"></i>
								Last Transaction</th>
							<th class="text-end">
								<i class="fas fa-dollar-sign"></i>
								Total Spent</th>
						</tr>
					</thead>
					<tbody>
						{% for spender in topSpenders %}
							<tr>
								<td>{{ loop.index }}</td>
								<td>
									<a href="{{ path("admin.customers", {"steamid": spender.steamid}) }}" class="text-decoration-none">
										{{ spender.username }}
										<sup>
											<i class="fas fa-magnifying-glass"></i>
										</sup>
									</a>
								</td>
								<td>{{ tx_repository.findLastTransaction(spender.steamid).timestamp|date_tz }}</td>
								<td class="text-end">${{ spender.total|number_format(2) }}</td>
							</tr>
						{% else %}
							<tr>
								<td colspan="4" class="text-center">No spenders found.</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>


	<!-- Recent Transactions Table -->
	<div class="card shadow mb-4">
		<div class="card-header py-3 d-flex justify-content-between">
			<h6 class="m-0 font-weight-bold">Recent Transactions</h6>
			<a href="{{ path('admin.transactions') }}" class="btn btn-sm btn-outline-primary">View All</a>
		</div>
		<div class="card-body p-0">
			<div class="table-responsive">
				<table class="table table-hover mb-0">
					<thead class="thead-light">
						<tr>
							<th>UUID</th>
							<th class="text-center">Amount</th>
							<th class="text-end">Timestamp</th>
							<th class="text-end">User</th>
							<th class="text-end">Recipient</th>
						</tr>
					</thead>
					<tbody>
						{% for txn in transactions %}
							<tr>
								<td>
									<code class="text-reset">{{ txn.uuid }}</code>
								</td>
								<td class="text-center">${{ txn.amount|number_format(2) }}</td>
								<td class="text-end">{{ txn.timestamp|date_tz }}</td>
								<td class="text-end">
									<a href="{{ path("admin.customers", {"steamid": txn.userSteamid}) }}" class="text-decoration-none">
										{{ get_user_by_steam(txn.userSteamid).username ?? txn.userSteamid }}
										<sup>
											<i class="fas fa-magnifying-glass"></i>
										</sup>
									</a>
								</td>
								<td class="text-end">
									<a href="{{ path("admin.customers", {"steamid": txn.recipientSteamid}) }}" class="text-decoration-none">
										{{ get_user_by_steam(txn.recipientSteamid).username ?? txn.recipientSteamid }}
										<sup>
											<i class="fas fa-magnifying-glass"></i>
										</sup>
									</a>
								</td>
							</tr>
						{% else %}
							<tr>
								<td colspan="6" class="text-center">No transactions found.</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
	{{ parent() }}
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}