<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
/**
 * Provides the admin area view for the analytics dashboard.
 *
 * @link       https://trynbuy.edubrazeal.com/
 * @since      1.0.0
 *
 * @package    Ai_Try_N_Buy
 * @subpackage Ai_Try_N_Buy/analytics/views
 */

?>
<div class="wrap aitnb-analytics-dashboard">
	<h1><?php esc_html_e( 'AI Try n Buy Analytics', 'virtual-ai-fit-and-style-assistant' ); ?></h1>

	<div class="aitnb-dashboard-controls">
	<label for="aitnb-period-filter"><?php esc_html_e( 'Date Range:', 'virtual-ai-fit-and-style-assistant' ); ?></label>
		<select id="aitnb-period-filter">
			<option value="all_time"><?php esc_html_e( 'All Time', 'virtual-ai-fit-and-style-assistant' ); ?></option>
			<option value="last_30_days"><?php esc_html_e( 'Last 30 Days', 'virtual-ai-fit-and-style-assistant' ); ?></option>
			<option value="last_7_days"><?php esc_html_e( 'Last 7 Days', 'virtual-ai-fit-and-style-assistant' ); ?></option>
		</select>
	</div>

	<div id="aitnb-dashboard-loader" class="notice notice-info">
	<p><?php esc_html_e( 'Loading analytics data...', 'virtual-ai-fit-and-style-assistant' ); ?></p>
	</div>

	<div id="aitnb-dashboard-widgets" class="aitnb-dashboard-widgets">
		<div id="poststuff">
			<div class="postbox-container">
				
				<div class="postbox">
					<h2 class="hndle"><span><?php esc_html_e( 'Conversion Overview', 'virtual-ai-fit-and-style-assistant' ); ?></span></h2>
					<div class="inside">
						<div class="main">
							<div class="aitnb-chart-container">
								<canvas id="aitnbConversionChart"></canvas>
							</div>
							<div class="aitnb-stats-summary">
								<p><?php esc_html_e( 'Total Tries:', 'virtual-ai-fit-and-style-assistant' ); ?> <strong id="aitnbTotalTries">...</strong></p>
								<p><?php esc_html_e( 'Total Purchases (from Tries):', 'virtual-ai-fit-and-style-assistant' ); ?> <strong id="aitnbTotalPurchases">...</strong></p>
								<p><?php esc_html_e( 'Conversion Rate:', 'virtual-ai-fit-and-style-assistant' ); ?> <strong id="aitnbConversionRate">...</strong></p>
							</div>
						</div>
					</div>
				</div>

				<div class="aitnb-columns-container">
					<div class="postbox">
						<h2 class="hndle"><span><?php esc_html_e( 'Most Popular Try-On Products', 'virtual-ai-fit-and-style-assistant' ); ?></span></h2>
						<div class="inside">
							<ol id="aitnbTopTriedProducts" class="aitnb-top-tried-products"></ol>
						</div>
					</div>

					<div class="postbox">
						<h2 class="hndle"><span><?php esc_html_e( 'Top Converting Products', 'virtual-ai-fit-and-style-assistant' ); ?></span></h2>
						<div class="inside">
							<ol id="aitnbTopPurchasedProducts" class="aitnb-top-purchased-products"></ol>
						</div>
					</div>
				</div>

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

<template id="aitnb-no-data-template">
	<div class="notice notice-info aitnb-analytics-notice">
	<h2><?php esc_html_e( 'No Analytics Data Yet', 'virtual-ai-fit-and-style-assistant' ); ?></h2>
	<p><?php esc_html_e( 'Analytics will appear here once customers start using the Virtual Try-On feature.', 'virtual-ai-fit-and-style-assistant' ); ?></p>
	<p><?php esc_html_e( 'Make sure you have:', 'virtual-ai-fit-and-style-assistant' ); ?></p>
		<ul class="aitnb-analytics-notice-list">
			<li>&#10003; <?php esc_html_e( 'Enabled Try-On for at least one product', 'virtual-ai-fit-and-style-assistant' ); ?></li>
			<li>&#10003; <?php esc_html_e( 'Configured the overlay assets for products', 'virtual-ai-fit-and-style-assistant' ); ?></li>
			<li>&#10003; <?php esc_html_e( 'Had customers interact with the Try-On button', 'virtual-ai-fit-and-style-assistant' ); ?></li>
		</ul>
	</div>
</template>

<template id="aitnb-error-template">
	<div class="notice notice-error aitnb-analytics-notice">
	<h3><?php esc_html_e( 'Error Loading Analytics', 'virtual-ai-fit-and-style-assistant' ); ?></h3>
		<p class="aitnb-error-message"></p>
	<p><button type="button" class="button" id="aitnb-retry-load"><?php esc_html_e( 'Retry', 'virtual-ai-fit-and-style-assistant' ); ?></button></p>
	</div>
</template>

<template id="aitnb-product-list-item-template">
	<li>
		<span class="aitnb-product-name"></span>
		<strong>(<span class="aitnb-event-count"></span>)</strong>
	</li>
</template>

<template id="aitnb-product-list-placeholder-template">
	<li class="aitnb-list-placeholder"></li>
</template>
