<?php $db =& get_instance(); ?>
<div class="container-fluid">
<div class="row g-4">
	<div class="col-12">

		<!-- V14: Vendor Welcome Hero -->
		<div class="text-white border-0 shadow-lg rounded-4 hero-animated-gradient position-relative overflow-hidden mb-4 fade-in-up" style="background: var(--v14-hero-vendor);">
			<div class="dashboard-welcome-pattern" style="position:absolute;top:0;right:0;width:40%;height:100%;background:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22><circle cx=%2240%22 cy=%2240%22 r=%2230%22 fill=%22rgba(255,255,255,0.03)%22/></svg>') repeat;pointer-events:none;"></div>
			<div class="p-4 p-md-5 position-relative">
				<div class="row align-items-center g-3">
					<div class="col-lg-7">
						<div class="d-flex align-items-center mb-3">
							<div class="border border-white border-opacity-30 rounded-circle p-2 me-3">
								<img src="<?= $db->Product_model->getAvatar($userdetails['avatar']); ?>" alt="" class="rounded-circle" width="56" height="56" />
							</div>
							<div>
								<h2 class="mb-1 fw-bold">
									<?php
									$hour = (int)date('H');
									if ($hour < 12) $greeting = __('user.good_morning');
									elseif ($hour < 18) $greeting = __('user.good_afternoon');
									else $greeting = __('user.good_evening');
									?>
									<?= $greeting ?>, <?= htmlspecialchars($userdetails['firstname']) ?>!
								</h2>
								<p class="mb-0 opacity-90">
									<i class="fas fa-store me-1"></i> <?= __('user.vendor_dashboard') ?>
									<span class="badge bg-success bg-opacity-25 text-white ms-2"><i class="fas fa-check-circle me-1"></i><?= __('user.active') ?></span>
								</p>
							</div>
						</div>
						<!-- Today's highlight -->
						<div class="d-flex gap-3 mt-2">
							<div class="rounded-3 px-3 py-2 text-center" style="background:rgba(255,255,255,0.15)">
								<div class="fw-bold fs-5"><?= $fun_c_format($user_totals['user_balance']) ?></div>
								<small class="opacity-75"><?= __('user.balance') ?></small>
							</div>
							<div class="rounded-3 px-3 py-2 text-center" style="background:rgba(255,255,255,0.15)">
								<div class="fw-bold fs-5"><?= $fun_c_format($user_totals['vendor_sale_localstore_total'] + $user_totals['vendor_order_external_total']) ?></div>
								<small class="opacity-75"><?= __('user.total_sale') ?></small>
							</div>
						</div>
					</div>
					<div class="col-lg-5 text-lg-end text-center">
						<div class="d-flex gap-2 justify-content-lg-end justify-content-center flex-wrap">
							<?php if((isset($userdetails['is_vendor']) && $userdetails['is_vendor']) && (int)$vendor_setting['storestatus'] == 1 && (int)$store_setting['status'] == 1): ?>
							<a href="<?= base_url('usercontrol/store_edit_product') ?>" class="btn btn-light btn-sm rounded-pill btn-micro"><i class="fas fa-plus me-1"></i><?= __('user.add_product') ?></a>
							<?php endif; ?>
							<?php if((isset($userdetails['is_vendor']) && $userdetails['is_vendor']) && (int)$market_vendor['marketvendorstatus'] == 1): ?>
							<a href="<?= base_url('usercontrol/integration_tools') ?>" class="btn btn-outline-light btn-sm rounded-pill btn-micro"><i class="fas fa-bullhorn me-1"></i><?= __('user.page_title_campaigns') ?></a>
							<?php endif; ?>
							<a href="<?= base_url('usercontrol/mywallet') ?>" class="btn btn-outline-light btn-sm rounded-pill btn-micro"><i class="fas fa-wallet me-1"></i><?= __('user.wallet') ?></a>
							<?php if(isset($store_details['store_slug']) && !empty($store_details['store_slug'])): ?>
							<a href="<?= base_url('store/'.$store_details['store_slug']) ?>" target="_blank" class="btn btn-outline-light btn-sm rounded-pill btn-micro"><i class="fas fa-external-link-alt me-1"></i><?= __('user.view_store') ?></a>
							<?php endif; ?>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Statistics Cards -->
		<div class="row g-3 mb-4">
			<div class="col-md-6 col-lg-3 card-animate" data-animate-index="0">
				<div class="card border-0 bg-primary bg-opacity-10 h-100 card-hover-lift stat-card-glow glow-blue rounded-4">
					<div class="card-body text-center p-3">
						<div class="d-flex align-items-center justify-content-center mb-2">
							<i class="fas fa-wallet fa-2x text-primary me-2"></i>
							<h3 class="mb-0 text-primary"><?= $fun_c_format($user_totals['user_balance']) ?></h3>
						</div>
						<p class="text-muted mb-0 small fw-semibold"><?= __('user.balance') ?></p>
						<div class="sparkline-container"><canvas id="vendorSparkBalance"></canvas></div>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-lg-3 card-animate" data-animate-index="1">
				<div class="card border-0 bg-info bg-opacity-10 h-100 card-hover-lift stat-card-glow glow-teal rounded-4">
					<div class="card-body text-center p-3">
						<div class="d-flex align-items-center justify-content-center mb-2">
							<i class="fas fa-piggy-bank fa-2x text-info me-2"></i>
							<h3 class="mb-0 text-info"><?= $fun_c_format($total_deposited) ?></h3>
						</div>
						<p class="text-muted mb-0 small fw-semibold"><?= __('user.deposit_balance') ?></p>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-lg-3 card-animate" data-animate-index="2">
				<div class="card border-0 bg-success bg-opacity-10 h-100 card-hover-lift stat-card-glow glow-green rounded-4">
					<div class="card-body text-center p-3">
						<div class="d-flex align-items-center justify-content-center mb-2">
							<i class="fas fa-store-alt fa-2x text-success me-2"></i>
							<h3 class="mb-0 text-success"><?= $fun_c_format($user_totals['vendor_sale_localstore_total']) ?></h3>
						</div>
						<p class="text-muted mb-0 small fw-semibold"><?= __('user.local_store_sale') ?></p>
						<div class="sparkline-container"><canvas id="vendorSparkStore"></canvas></div>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-lg-3 card-animate" data-animate-index="3">
				<div class="card border-0 bg-warning bg-opacity-10 h-100 card-hover-lift stat-card-glow glow-orange rounded-4">
					<div class="card-body text-center p-3">
						<div class="d-flex align-items-center justify-content-center mb-2">
							<i class="fas fa-box fa-2x text-warning me-2"></i>
							<h3 class="mb-0 text-warning"><?= $fun_c_format($user_totals['vendor_order_external_total']) ?></h3>
						</div>
						<p class="text-muted mb-0 small fw-semibold"><?= __('user.external_order_sale') ?></p>
						<div class="sparkline-container"><canvas id="vendorSparkExternal"></canvas></div>
					</div>
				</div>
			</div>
		</div>

		<!-- V14: Performance Overview with Ring Chart -->
		<?php if(isset($trends)): ?>
		<div class="row g-3 mb-4 card-animate" data-animate-index="4">
			<div class="col-lg-4">
				<div class="card bg-white shadow-sm rounded-4 border-0 h-100 card-hover-lift performance-overview-card">
					<div class="card-body p-4">
						<h6 class="fw-bold mb-3"><i class="fas fa-chart-pie me-2" style="color:#8b5cf6"></i><?= __('user.performance_overview') ?></h6>
						<div class="ring-chart-container mx-auto">
							<canvas id="vendorRingChart"></canvas>
							<div class="ring-chart-center-text">
								<div class="ring-value" style="color:var(--v14-text-primary)"><?= $fun_c_format($user_totals['vendor_sale_localstore_total'] + $user_totals['vendor_order_external_total']) ?></div>
								<div class="ring-label text-muted"><?= __('user.total_sale') ?></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-8">
				<div class="card bg-white shadow-sm rounded-4 border-0 h-100 card-hover-lift">
					<div class="card-body p-4">
						<h6 class="fw-bold mb-3"><i class="fas fa-chart-area text-primary me-2"></i><?= __('user.seven_day_trends') ?></h6>
						<div class="row g-3">
							<div class="col-md-6">
								<div class="p-3 rounded-3" style="background:var(--v14-stat-green)">
									<div class="d-flex justify-content-between align-items-center mb-1">
										<small class="fw-semibold text-success"><?= __('user.store_orders') ?></small>
										<small class="fw-bold"><?= array_sum($trends['store_orders']) ?></small>
									</div>
									<div class="sparkline-container"><canvas id="vendorSparkStoreOrders"></canvas></div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="p-3 rounded-3" style="background:var(--v14-stat-orange)">
									<div class="d-flex justify-content-between align-items-center mb-1">
										<small class="fw-semibold text-warning"><?= __('user.external_orders') ?></small>
										<small class="fw-bold"><?= array_sum($trends['orders']) ?></small>
									</div>
									<div class="sparkline-container"><canvas id="vendorSparkExtOrders"></canvas></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php endif; ?>

		<!-- S2S Tracking Overview (only show if vendor has S2S campaigns or S2S orders) -->
		<?php if(($vendor_s2s_campaigns ?? 0) > 0 || ($vendor_s2s_summary['total_s2s_orders'] ?? 0) > 0): ?>
		<div class="card shadow-sm mb-4 border-primary border-opacity-25">
			<div class="card-header bg-primary bg-opacity-10">
				<div class="d-flex flex-wrap justify-content-between align-items-center">
					<h5 class="mb-0 fw-bold"><i class="fas fa-server text-primary me-2"></i><?= __('user.s2s_tracking_overview') ?></h5>
					<span class="badge bg-primary rounded-pill px-3 py-2"><i class="fas fa-toggle-on me-1"></i><?= $vendor_s2s_campaigns ?? 0 ?> <?= __('user.s2s_campaigns_active') ?></span>
				</div>
			</div>
			<div class="card-body">
				<div class="row g-3">
					<div class="col-6 col-lg-3">
						<div class="bg-primary bg-opacity-10 rounded-3 p-3 text-center">
							<h3 class="fw-bold text-primary mb-0"><?= number_format($vendor_s2s_summary['total_s2s_orders'] ?? 0) ?></h3>
							<small class="text-muted fw-semibold"><?= __('user.s2s_conversions') ?></small>
						</div>
					</div>
					<div class="col-6 col-lg-3">
						<div class="bg-success bg-opacity-10 rounded-3 p-3 text-center">
							<h3 class="fw-bold text-success mb-0"><?= $fun_c_format($vendor_s2s_summary['s2s_revenue'] ?? 0) ?></h3>
							<small class="text-muted fw-semibold"><?= __('user.s2s_revenue') ?></small>
						</div>
					</div>
					<div class="col-6 col-lg-3">
						<div class="bg-warning bg-opacity-10 rounded-3 p-3 text-center">
							<h3 class="fw-bold text-warning mb-0"><?= $fun_c_format($vendor_s2s_summary['s2s_commission'] ?? 0) ?></h3>
							<small class="text-muted fw-semibold"><?= __('user.s2s_commission') ?></small>
						</div>
					</div>
					<div class="col-6 col-lg-3">
						<div class="bg-secondary bg-opacity-10 rounded-3 p-3 text-center">
							<h3 class="fw-bold text-secondary mb-0"><?= number_format($vendor_pixel_orders ?? 0) ?></h3>
							<small class="text-muted fw-semibold"><?= __('user.pixel_conversions') ?></small>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php endif; ?>

		<!-- Vendor Hub Cards -->
		<div class="row g-4 mb-4">
			<?php if((isset($userdetails['is_vendor']) && $userdetails['is_vendor']) && (int)$vendor_setting['storestatus'] == 1 && (int)$store_setting['status'] == 1): ?>
			<div class="col-lg-4">
				<div class="card h-100 border-0 shadow-sm">
					<div class="card-body d-flex flex-column text-center p-4">
						<div class="mb-3">
							<div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center" style="width:60px;height:60px;">
								<i class="fas fa-store fa-xl text-primary"></i>
							</div>
						</div>
						<h6 class="fw-bold"><?= __('user.my_vendor_store') ?></h6>
						<p class="card-text text-muted small flex-grow-1"><?= __('user.my_vendor_store_info') ?></p>
						<a href="<?= base_url('usercontrol/store_dashboard') ?>" class="btn btn-primary btn-sm mt-auto">
							<i class="fas fa-arrow-right me-1"></i><?= __('user.manage_store') ?>
						</a>
					</div>
				</div>
			</div>
			<?php endif; ?>

			<?php if((isset($userdetails['is_vendor']) && $userdetails['is_vendor']) && (int)$market_vendor['marketvendorstatus'] == 1): ?>
			<div class="col-lg-4">
				<div class="card h-100 border-0 shadow-sm">
					<div class="card-body d-flex flex-column text-center p-4">
						<div class="mb-3">
							<div class="rounded-circle bg-info bg-opacity-10 d-inline-flex align-items-center justify-content-center" style="width:60px;height:60px;">
								<i class="fas fa-bullhorn fa-xl text-info"></i>
							</div>
						</div>
						<h6 class="fw-bold"><?= __('user.my_vendor_market_tools') ?></h6>
						<p class="card-text text-muted small flex-grow-1"><?= __('user.my_vendor_market_tools_info') ?></p>
						<a href="<?= base_url('usercontrol/integration_tools') ?>" class="btn btn-info btn-sm mt-auto">
							<i class="fas fa-arrow-right me-1"></i><?= __('user.view_tools') ?>
						</a>
					</div>
				</div>
			</div>
			<?php endif; ?>

			<div class="col-lg-4">
				<div class="card h-100 border-0 shadow-sm">
					<div class="card-body d-flex flex-column text-center p-4">
						<div class="mb-3">
							<div class="rounded-circle bg-success bg-opacity-10 d-inline-flex align-items-center justify-content-center" style="width:60px;height:60px;">
								<i class="fas fa-shopping-bag fa-xl text-success"></i>
							</div>
						</div>
						<h6 class="fw-bold"><?= __('user.my_store') ?></h6>
						<p class="card-text text-muted small flex-grow-1"><?= __('user.view_your_live_store') ?></p>
						<a href="<?= base_url('store/'.$store_details['store_slug']); ?>" target="_blank" class="btn btn-success btn-sm mt-auto">
							<i class="fas fa-external-link-alt me-1"></i><?= __('user.display_my_store') ?>
						</a>
					</div>
				</div>
			</div>
		</div>

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

<!-- Chart.js for Sparklines & Ring Charts -->
<script src="<?= base_url('assets/template/js/chart.umd.min.js') ?>?v=<?= av() ?>"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    <?php if(isset($trends)): ?>
    var trendData = <?= json_encode($trends) ?>;
    createSparkline('vendorSparkBalance', trendData.revenue, '#0d6efd', 'rgba(13,110,253,0.15)');
    createSparkline('vendorSparkStore', trendData.store_orders, '#198754', 'rgba(25,135,84,0.15)');
    createSparkline('vendorSparkExternal', trendData.orders, '#f97316', 'rgba(249,115,22,0.15)');
    createSparkline('vendorSparkStoreOrders', trendData.store_orders, '#198754', 'rgba(25,135,84,0.15)');
    createSparkline('vendorSparkExtOrders', trendData.orders, '#f97316', 'rgba(249,115,22,0.15)');

    // Ring Chart
    var storeTotal = <?= (float)($user_totals['vendor_sale_localstore_total'] ?? 0) ?>;
    var extTotal = <?= (float)($user_totals['vendor_order_external_total'] ?? 0) ?>;
    createRingChart('vendorRingChart',
        ['<?= addslashes(__('user.local_store_sale')) ?>', '<?= addslashes(__('user.external_order_sale')) ?>'],
        [storeTotal, extTotal],
        ['#22c55e', '#f97316']
    );
    <?php endif; ?>
});
</script>
