{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/store_sidebar.html' %}
{% include 'includes/navbar.html' %}

<style>
	.filter-bar {
		background: white;
		padding: 1rem;
		border-radius: 12px;
		margin-bottom: 2rem;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.kpi-card-mini {
		border: none;
		border-radius: 12px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
		height: 100%;
		background: #fff;
	}

	.icon-box {
		width: 50px;
		height: 50px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
	}

	.kpi-label {
		font-size: 0.9rem;
		color: #6c757d;
		font-weight: 600;
		margin-bottom: 2px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.kpi-value {
		font-size: 1.5rem;
		font-weight: 800;
		margin-bottom: 5px;
		color: #333;
	}

	.kpi-subtext {
		font-size: 0.8rem;
		color: #888;
		font-weight: 500;
	}
</style>

<div class="container-xxl flex-grow-1 container-p-y">
	<!-- Filter Bar -->
	<div class="filter-bar d-flex align-items-center justify-content-between p-3"
		style="background: #fff; border-radius: 12px; margin-bottom: 2rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
		<h4 class="mb-0 fw-bold d-flex align-items-center gap-2">
			<i class="fas fa-chart-line text-primary"></i> Live Store Dashboard
		</h4>
		<div class="d-flex align-items-center gap-3">
			<form method="GET" id="filterForm" class="d-flex align-items-center gap-2">
				<span class="text-muted small fw-bold">TIME RANGE:</span>
				<select name="period" id="periodSelect" class="form-select form-select-sm"
					style="width: auto; border-radius: 8px; font-weight: 600;">
					<option value="today" {% if period == 'today' %}selected{% endif %}>Today</option>
					<option value="yesterday" {% if period == 'yesterday' %}selected{% endif %}>Yesterday</option>
					<option value="last_7_days" {% if period == 'last_7_days' %}selected{% endif %}>Last 7 Days</option>
					<option value="this_month" {% if period == 'this_month' %}selected{% endif %}>This Month</option>
					<option value="last_month" {% if period == 'last_month' %}selected{% endif %}>Last Month</option>
					<option value="this_year" {% if period == 'this_year' %}selected{% endif %}>This Year</option>
					<option value="all" {% if period == 'all' %}selected{% endif %}>All Time</option>


				</select>
			</form>
			<button class="btn btn-primary btn-sm d-flex align-items-center gap-1 shadow-sm" id="refreshBtn"
				style="border-radius: 8px; height: 32px;">
				<i class="fas fa-sync-alt" id="refreshIcon"></i> <span id="refreshText">Refresh</span>
			</button>
		</div>
	</div>

	<!-- 6 KPI Row -->
	<div class="row g-4 mb-4">
		<!-- 1. Total Sales -->
		<div class="col-md-2">
			<div class="card kpi-card-mini">
				<div class="card-body p-4">
					<div class="d-flex align-items-center justify-content-between">
						<div>
							<div class="kpi-label">Revenue Overview</div>
							<h3 class="kpi-value" id="val_total_sales">₹{{ total_sales|floatformat:0 }}</h3>
							<div class="kpi-subtext">Total Gross Sales | <span id="val_total_orders_sub">{{total_orders}}</span> Orders</div>
						</div>
						<div class="icon-box bg-label-primary">
							<i class="fas fa-wallet"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 2. Total Purchase -->
		<div class="col-md-2">
			<div class="card kpi-card-mini">
				<div class="card-body p-4">
					<div class="d-flex align-items-center justify-content-between">
						<div>
							<div class="kpi-label">Inward Inventory</div>
							<h3 class="kpi-value" id="val_total_purchase">₹{{ total_purchase|floatformat:0 }}</h3>
							<div class="kpi-subtext">Purchase | <span id="val_purchase_orders">{{purchase_orders}}</span> Invoices</div>
						</div>
						<div class="icon-box bg-label-success">
							<i class="fas fa-shopping-basket"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 3. Total Expenses -->
		<div class="col-md-2">
			<div class="card kpi-card-mini">
				<div class="card-body p-4">
					<div class="d-flex align-items-center justify-content-between">
						<div>
							<div class="kpi-label">Total Outflow</div>
							<h3 class="kpi-value" id="val_total_expenses">₹{{ total_expenses|floatformat:0 }}</h3>
							<div class="kpi-subtext">Operating Expenses</div>
						</div>
						<div class="icon-box bg-label-danger">
							<i class="fas fa-receipt"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 4. Total Orders -->
		<div class="col-md-2">
			<div class="card kpi-card-mini">
				<div class="card-body p-4">
					<div class="d-flex align-items-center justify-content-between">
						<div>
							<div class="kpi-label">Order Volume</div>
							<h3 class="kpi-value" id="val_total_orders">{{ total_orders }}</h3>
							<div class="kpi-subtext">Sales Invoices</div>
						</div>
						<div class="icon-box bg-label-info">
							<i class="fas fa-file-invoice"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 5. Available Stock -->
		<div class="col-md-2">
			<div class="card kpi-card-mini">
				<div class="card-body p-4">
					<div class="d-flex align-items-center justify-content-between">
						<div>
							<div class="kpi-label">Current Stock</div>
							<h3 class="kpi-value" id="val_available_stock">{{ available_stock }}</h3>
							<div class="kpi-subtext">Available Units</div>
						</div>
						<div class="icon-box bg-label-warning">
							<i class="fas fa-boxes"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 6. New Customers -->
		<div class="col-md-2">
			<div class="card kpi-card-mini">
				<div class="card-body p-4">
					<div class="d-flex align-items-center justify-content-between">
						<div>
							<div class="kpi-label">Customer Base</div>
							<h3 class="kpi-value" id="val_new_customers">{{ new_customers }}</h3>
							<div class="kpi-subtext">New Signups</div>
						</div>
						<div class="icon-box bg-label-secondary">
							<i class="fas fa-user-friends"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Premium Vibrant Secondary Row -->
	<div class="row g-4 mt-2">
		<!-- Card 1: Colorful Vibrant Greeting -->
		<div class="col-md-6">
			<div class="card h-100 shadow-none border-0 overflow-hidden"
				style="background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%); border-radius: 20px; box-shadow: 0 15px 35px rgba(168, 85, 247, 0.25) !important;">
				<!-- Decorative Blobs -->
				<div class="position-absolute translate-middle"
					style="width: 151px; height: 151px; background: rgba(255,255,255,0.1); border-radius: 50%; top: 10%; right: -20px;">
				</div>
				<div class="position-absolute translate-middle"
					style="width: 80px; height: 80px; background: rgba(255,255,255,0.05); border-radius: 50%; bottom: 10%; left: 10%;">
				</div>

				<div class="card-body p-3 position-relative">
					<div class="d-flex align-items-center gap-3 mb-3">
						<div class="flex-shrink-0">
							<div class="position-relative">
								<div class="p-1 rounded-circle bg-white shadow-lg" style="width: 80px; height: 80px;">
									<img src="{% if employee.image %}{{ employee.image.url }}{% else %}{% static 'assets/img/avatars/1.png' %}{% endif %}"
										alt="user-avatar"
										class="rounded-circle w-100 h-100 object-fit-cover border border-white border-2" />
								</div>
								<span
									class="position-absolute bottom-0 end-0 bg-success border border-white border-4 rounded-circle pulse-online"
									style="width: 18px; height: 18px;"></span>
							</div>
						</div>
						<div>
							<h2 class="mb-1 fw-bold text-white shadow-text" style="font-size: 1.5rem;">{{ greeting }},
								{{ employee.name|default:"Partner" }}! <span class="wave">👋</span></h2>
							<p class="mb-0 text-white opacity-90 fw-medium" style="font-size: 1rem;">Welcome to Boys
								Mobiles to start our successful journey!</p>
						</div>
					</div>

					<!-- Glassmorphism Info Strip -->
					<div class="d-flex align-items-center justify-content-between p-2"
						style="background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.2);">
						<div class="text-center flex-grow-1 border-end border-white border-opacity-25 px-1">
							<div class="text-white mb-0" style="font-size: 0.9rem;"><i
									class="fas fa-store shadow-sm"></i></div>
							<div class="fw-bold text-white"
								style="font-size: 0.75rem; text-shadow: 0 1px 2px rgba(0,0,0,0.1);">{{ branch.name }}
							</div>
							<div class="text-white opacity-75"
								style="font-size: 0.6rem; text-transform: uppercase; font-weight: 800;">Branch</div>
						</div>
						<div class="text-center flex-grow-1 border-end border-white border-opacity-25 px-1">
							<div class="text-white mb-0" style="font-size: 0.9rem;"><i
									class="fas fa-id-badge shadow-sm"></i></div>
							<div class="fw-bold text-white"
								style="font-size: 0.75rem; text-shadow: 0 1px 2px rgba(0,0,0,0.1);">{{employee.employee_code|default:"EMP001" }}</div>
							<div class="text-white opacity-75"
								style="font-size: 0.6rem; text-transform: uppercase; font-weight: 800;">ID Code</div>
						</div>
						<div class="text-center flex-grow-1 border-end border-white border-opacity-25 px-1">
							<div class="text-white mb-0" style="font-size: 0.9rem;"><i
									class="fas fa-calendar-alt shadow-sm"></i></div>
							<div class="fw-bold text-white"
								style="font-size: 0.75rem; text-shadow: 0 1px 2px rgba(0,0,0,0.1);">{{current_date }}
							</div>
							<div class="text-white opacity-75"
								style="font-size: 0.6rem; text-transform: uppercase; font-weight: 800;">Login</div>
						</div>
						<div class="text-center flex-grow-1 px-1">
							<div class="text-white mb-0" style="font-size: 0.9rem;"><i
									class="fas fa-bolt shadow-sm"></i></div>
							<div class="fw-bold text-white" id="sync_time"
								style="font-size: 0.75rem; text-shadow: 0 1px 2px rgba(0,0,0,0.1);">{{ current_time }}
							</div>
							<div class="text-white opacity-75"
								style="font-size: 0.6rem; text-transform: uppercase; font-weight: 800;">Live sync</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Card 2: Premium Quick Navigation Grid -->
		<div class="col-md-6">
			<div class="card h-100 shadow-none border-0 overflow-hidden"
				style="background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;">
				<div class="card-header border-0 bg-transparent p-3 pb-0">
					<div class="d-flex justify-content-between align-items-center">
						<h5 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
							<span class="p-2 bg-label-primary rounded-circle"
								style="width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;"><i
									class="fas fa-rocket" style="font-size: 0.7rem;"></i></span>
							Quick Navigation
						</h5>
						<!-- <div class="bg-label-primary rounded-pill px-3 py-1 small fw-bold shadow-sm hover-scale" -->
							<!-- style="cursor: pointer; font-size: 0.75rem;">Shop Console <i -->
								<!-- class="fas fa-sliders-h ms-1 rotate-90"></i></div> -->
					</div>
				</div>
				<div class="card-body p-3">
					<div class="row g-3">
						<div class="col-4">
							<a href="/sales/add" class="nav-tile-ultimate">
								<div class="tile-icon-glass bg-primary"><i class="fas fa-shopping-cart"></i></div>
								<div class="tile-title">Sales</div>
							</a>
						</div>
						<div class="col-4">
							
							<a href="/imei-stock-list/" class="nav-tile-ultimate">
								<div class="tile-icon-glass bg-success"><i class="fas fa-boxes"></i></div>
								<div class="tile-title">IMEI Stock List</div>
							</a>
						</div>
						{% if request.session.is_ho == 1 %}
						<div class="col-4">
							<a href="/purchase-inward/add" class="nav-tile-ultimate">
								<div class="tile-icon-glass bg-info"><i class="fas fa-truck-loading"></i></div>
								<div class="tile-title">Purchase Inward</div>
							</a>
						</div>
						{% else %}
						<div class="col-4">
							<a href="/transfer-inward/add" class="nav-tile-ultimate">
								<div class="tile-icon-glass bg-info"><i class="fas fa-truck-loading"></i></div>
								<div class="tile-title">Transfer Inward</div>
							</a>
						</div>
						
						{% endif%}
						<div class="col-4">
							<a href="/expenses" class="nav-tile-ultimate">
								<div class="tile-icon-glass bg-danger"><i class="fas fa-receipt"></i></div>
								<div class="tile-title">Store Expenses</div>
							</a>
						</div>
						<div class="col-4">
							<a href="/ledger" class="nav-tile-ultimate">
								<div class="tile-icon-glass bg-warning"><i class="fas fa-university"></i></div>
								<div class="tile-title">ledger</div>
							</a>
						</div>
						<div class="col-4">
							<a href="/customer-ledger" class="nav-tile-ultimate">
								<div class="tile-icon-glass bg-secondary"><i class="fas fa-address-book"></i></div>
								<div class="tile-title">Customer Ledger</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	const refreshBtn = document.getElementById('refreshBtn');
	const refreshIcon = document.getElementById('refreshIcon');
	const refreshText = document.getElementById('refreshText');
	const periodSelect = document.getElementById('periodSelect');

	async function updateDashboardData() {
		// Start Loading state
		refreshBtn.classList.add('btn-secondary');
		refreshBtn.classList.remove('btn-primary');
		refreshIcon.classList.add('fa-spin');
		refreshText.innerText = 'Syncing...';

		const period = periodSelect.value;
		try {
			const response = await fetch(`${window.location.pathname}?period=${period}&ajax=1`);
			const data = await response.json();

			// Update values with a small fade effect
			updateValue('val_total_sales', data.total_sales);
			updateValue('val_total_purchase', data.total_purchase);
			updateValue('val_total_expenses', data.total_expenses);
			updateValue('val_total_orders', data.total_orders);
			updateValue('val_total_orders_sub', data.total_orders);
			updateValue('val_purchase_orders', data.purchase_orders);
			updateValue('val_available_stock', data.available_stock);
			updateValue('val_new_customers', data.new_customers);
			updateValue('sync_time', data.current_time);

		} catch (error) {
			console.error('Speed Sync Error:', error);
		} finally {
			// Restore state
			setTimeout(() => {
				refreshBtn.classList.add('btn-primary');
				refreshBtn.classList.remove('btn-secondary');
				refreshIcon.classList.remove('fa-spin');
				refreshText.innerText = 'Refresh';
			}, 300);
		}
	}

	function updateValue(elementId, newValue) {
		const el = document.getElementById(elementId);
		if (el) {
			el.style.opacity = '0';
			setTimeout(() => {
				el.innerText = newValue;
				el.style.opacity = '1';
			}, 150);
		}
	}

	refreshBtn.onclick = updateDashboardData;
	periodSelect.onchange = updateDashboardData;
</script>

<style>
	.shadow-text {
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	}

	.pulse-online {
		animation: pulse-green 2s infinite;
	}

	@keyframes pulse-green {
		0% {
			box-shadow: 0 0 0 0 rgba(75, 222, 128, 0.7);
		}

		70% {
			box-shadow: 0 0 0 10px rgba(75, 222, 128, 0);
		}

		100% {
			box-shadow: 0 0 0 0 rgba(75, 222, 128, 0);
		}
	}

	.nav-tile-ultimate {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 1rem 0.75rem;
		background: #fff;
		border-radius: 18px;
		border: 1px solid #f0f0f0;
		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		text-align: center;
		text-decoration: none;
	}

	.nav-tile-ultimate:hover {
		background: #f8fbff;
		border-color: #6366f1;
		transform: translateY(-5px) scale(1.03);
		box-shadow: 0 10px 20px rgba(99, 102, 241, 0.1);
	}

	.tile-icon-glass {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		font-size: 1.2rem;
		margin-bottom: 0.5rem;
		color: #fff;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	}

	.tile-title {
		font-size: 0.8rem;
		font-weight: 800;
		color: #1e293b;
		letter-spacing: -0.2px;
	}

	.hover-scale:hover {
		transform: scale(1.05);
		transition: 0.2s;
	}

	.kpi-value,
	#sync_time {
		transition: opacity 0.2s ease;
	}

	.wave {
		display: inline-block;
		animation: waving 2.5s infinite;
		transform-origin: 70% 70%;
	}
</style>
</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}