<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<div class="stats expense">

    <div class="filter-form-wrapper box mb-3 gap-4 flex flex-col xl:flex-row items-center whitespace-nowrap">
        <form action="" id="frm-expenses-stats" class="flex flex-col lg:flex-row gap-3 items-center flex-grow">
            <input type="hidden" name="action" value="anbarak_get_expenses_stats">
            <input type="hidden" name="security" value="<?php echo esc_attr(ANBARAK_AJAX_NONCE) ?>">
            <?php
            anbarak_get_template_part('report/filter-form-dates', [
                'date_from' => $month_start_timestamp,
                'date_to' => $month_end_timestamp,
                'predefined' => true,
                'selected_predefined_date' => 'month'
            ]);
            ?>
            <button type="submit" class="button button--primary"><?php esc_html_e('Apply filters', 'anbarak') ?></button>
            <div class="ms-auto text-sm text-gray-500 px-2.5 py-1 whitespace-nowrap ltr flex items-center gap-1.5 dark:bg-[#1a1a1a] dark:text-gray-400" id="report-date-range">
                <span class="date-range-from"><?php echo esc_attr(anbarak_date_format('Y/m/d', $month_start_timestamp)); ?></span>
                <span class="text-gray-300">–</span>
                <span class="date-range-to"><?php echo esc_attr(anbarak_date_format('Y/m/d', $month_end_timestamp)); ?></span>
            </div>
        </form>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_420px] xl:grid-cols-[minmax(0,1fr)_460px] gap-4 items-start">
        <div id="expenses-stats-holder" class="order-2 lg:order-1" data-filter-form="frm-expenses-stats">
            <?php anbarak_render_expenses_distribution_stats($month_start_timestamp, $month_end_timestamp); ?>
        </div>

        <div class="box charts order-1 lg:order-2 !p-0 overflow-hidden">
            <div class="flex items-center gap-2 px-5 py-4 border-b border-gray-100 dark:border-[#333]">
                <i class="icon icon-pie-chart text-lg text-gray-500 dark:text-gray-400"></i>
                <h2 class="font-bold text-base m-0"><?php esc_html_e('Expense Distribution Chart', 'anbarak'); ?></h2>
            </div>
            <div id="overall-expense-pie-chart" class="h-[300px] min-h-[260px] w-full"></div>
        </div>
    </div>
</div>
