<?php
$from = isset($_GET['from']) ? sanitize_text_field($_GET['from']) : date('Y-m-d', strtotime('-30 days'));
$to = isset($_GET['to']) ? sanitize_text_field($_GET['to']) : date('Y-m-d');
?>
<div class=" ads-analytics-dashboard">
    <h1><?php esc_html_e('Incomplete Orders Analytics', 'ad-saver'); ?></h1>

    <div class="ads-date-filter">

        <form method="get" action="">
            <input type="hidden" name="page" value="ads-incomplete-analytics" />
            <label for="from"><?php esc_html_e('From:', 'ad-saver'); ?></label>
            <input type="date" name="from" id="from" value="<?php echo esc_attr($from); ?>" />

            <label for="to"><?php esc_html_e('To:', 'ad-saver'); ?></label>
            <input type="date" name="to" id="to" value="<?php echo esc_attr($to); ?>" />

            <button type="submit" class="button button-primary"><?php esc_html_e('Apply', 'ad-saver'); ?></button>
        </form>
    </div>

    <div class="ads-summary-cards">
        <div class="ads-card">
            <h3><?php esc_html_e('Total Incomplete Orders', 'ad-saver'); ?></h3>
            <div class="ads-value" id="total-incomplete-orders">0</div>
        </div>

        <!-- Replace the two cards with this new one -->
        <div class="ads-card">
            <h3><?php esc_html_e('Total Recovery Orders', 'ad-saver'); ?></h3>
            <div class="ads-value" id="total-recovery-orders">0</div>
        </div>

        <div class="ads-card">
            <h3><?php esc_html_e('Recovery Rate', 'ad-saver'); ?></h3>
            <div class="ads-value" id="recovery-rate">0%</div>
        </div>
        <div class="ads-card">
            <h3><?php esc_html_e('Recovery Amount', 'ad-saver'); ?></h3>
            <div class="ads-value" id="recovery-amount">0.00৳</div>
        </div>
    </div>

    <div class="ads-charts-container">
        <div class="ads-chart-box">
            <h2><?php esc_html_e('Incomplete Orders by Day', 'ad-saver'); ?></h2>
            <div class="ads-chart-wrapper">
                <canvas id="incomplete-orders-chart"></canvas>
            </div>
        </div>

        <div class="ads-chart-box">
            <h2><?php esc_html_e('Orders by Status', 'ad-saver'); ?></h2>
            <div class="ads-chart-wrapper">
                <canvas id="orders-by-status-chart"></canvas>
            </div>
        </div>
    </div>

    <div class="ads-table-container p-6 bg-white rounded-lg shadow-md">
        <h2 class="text-2xl font-bold text-gray-800 mb-4"><?php esc_html_e('Top Recovery Days (Last 30 Days)', 'ad-saver'); ?></h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><?php esc_html_e('Date', 'ad-saver'); ?></th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><?php esc_html_e('Recovered Carts', 'ad-saver'); ?></th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><?php esc_html_e('Recovered Revenue', 'ad-saver'); ?></th>
                </tr>
                </thead>
                <tbody id="top-recovery-days-tbody" class="bg-white divide-y divide-gray-200">
                <tr>
                    <td colspan="3" class="px-6 py-4 text-center text-gray-500"><?php esc_html_e('No data available', 'ad-saver'); ?></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<?php