<!-- Main content -->
<div class="content-wrapper">
    <div class="content-inner">

        <!-- ── Filter card ────────────────────────────────────────────────────── -->
        <div class="card card-header">

            <div class="border-bottom">
                <div class="text-center">
                    <h4 class="page-title fw-bold"><?= htmlspecialchars($translate['enterprise_statistic']) ?></h4>
                </div>
            </div>

            <div class="row mt-3">

                <?php if ($_SESSION['user_profile'] === 'ROOT'): ?>

                    <div class="col-lg-12 col-md-12 col-sm-12 mb-3">
                        <label class="form-label fw-medium text-uppercase">
                            <?= htmlspecialchars($translate['enterprise']) ?>
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ph ph-building-office"></i></span>
                            <select class="form-control form-control-lg select2"
                                id="ent_id_value"
                                data-width="1%" onchange="selectBranchByUserPermission(this.value);">
                                <?php
                                $sql = "SELECT ent_id, ent_name FROM tb_enterprises
                                        WHERE ent_contract_status = 'Enabled'
                                        ORDER BY ent_name ASC";
                                $enterprises = executePDOFetchAll($sql, '');
                                foreach ($enterprises as $enterprise):
                                ?>
                                    <option value="<?= htmlspecialchars($enterprise['ent_id']) ?>">
                                        <?= htmlspecialchars($enterprise['ent_name']) ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                <?php else: ?>

                    <input type="hidden"
                        id="ent_id_value"
                        value="<?= htmlspecialchars($_SESSION['user_ent_id']) ?>">

                <?php endif; ?>

                <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                    <label class="form-label fw-medium text-uppercase">
                        <?= htmlspecialchars($translate['branch']) ?>
                    </label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="ph ph-storefront"></i></span>
                        <select class="form-control form-control-lg select2"
                            id="pos_id_value"
                            data-width="1%"></select>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                    <label class="form-label fw-medium text-uppercase">
                        <?= htmlspecialchars($translate['date']) ?>
                    </label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="ph-calendar"></i></span>
                        <input type="text"
                            class="form-control form-control-lg daterange-single dashboardDate"
                            value="<?= htmlspecialchars($currentDayStart) ?>">
                    </div>
                </div>

                <div class="col-lg-4 col-md-12 col-sm-12 mb-2">
                    <label class="form-label fw-medium text-uppercase">&nbsp;</label>
                    <div class="btn-group d-flex">
                        <button type="button" class="btn btn-warning text-uppercase btnSearch">
                            <i class="ph-arrows-clockwise me-1"></i>
                            <?= htmlspecialchars($translate['refresh']) ?>
                        </button>
                    </div>
                </div>

            </div>
        </div>
        <!-- /filter card -->


        <!-- ── Stat tiles ─────────────────────────────────────────────────────── -->
        <div class="card card-header">
            <div class="row">

                <?php
                // Each tile: [spanClass, translationKey, bgColor]
                $statTiles = [
                    ['spanTodaySale',            'today_sales',                  '#147a3d'],
                    ['spanDebtsCollectedToday',  'debts_collected_today',        '#008080'],
                    ['spanPendingAccounts',      'today_pending',                '#BC5862'],
                    ['spanWeekSale',             'sales_of_the_week',            '#757943'],
                    ['spanMonthSale',            'sales_of_the_month',           '#3351AB'],
                    ['spanMonthlyDailyExpenses', 'daily_expenses_of_the_month',  '#8D6751'],
                    ['spanMonthlyFixedExpenses', 'fixed_expenses_of_the_month',  '#9655a8'],
                    ['spanPurchasesOfTheMonth',  'purchases_of_the_month',       '#107dac'],
                ];
                foreach ($statTiles as [$spanClass, $labelKey, $bg]):
                ?>
                    <div class="col-sm-6 col-xl-3 mt-1 popover-container">
                        <div class="card card-header text-white little-card"
                            style="background-color: <?= $bg ?>;">
                            <div class="d-flex align-items-center">
                                <div class="flex-fill">
                                    <?= htmlspecialchars($translate[$labelKey]) ?>
                                    <h4 class="mb-0">
                                        <span class="loadingSpinner"></span>
                                        <span class="<?= $spanClass ?>"></span>
                                    </h4>
                                </div>
                                <i class="ph-currency-circle-dollar ph-2x opacity-60 ms-3"></i>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>

                <hr class="mb-2 mt-2">

                <?php
                $generalTiles = [
                    ['spanGeneralExpenses',  'total_expenses',  '#8c3f3f'],
                    ['spanGeneralPurchases', 'total_purchases', '#07435D'],
                    ['spanGeneralDebts',     'total_pending',   '#89111D'],
                    ['spanGeneralSale',      'total_sales',     '#004444'],
                ];
                foreach ($generalTiles as [$spanClass, $labelKey, $bg]):
                ?>
                    <div class="col-sm-6 col-xl-3 mt-2 popover-container">
                        <div class="card card-header text-white little-card"
                            style="background-color: <?= $bg ?>;">
                            <div class="d-flex align-items-center">
                                <div class="flex-fill text-uppercase">
                                    <?= htmlspecialchars($translate[$labelKey]) ?>
                                    <h4 class="mb-0">
                                        <span class="loadingSpinner"></span>
                                        <span class="<?= $spanClass ?>"></span>
                                    </h4>
                                </div>
                                <i class="ph-currency-circle-dollar ph-2x opacity-60 ms-3"></i>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>

            </div>
        </div>
        <!-- /stat tiles -->


        <!-- ── Charts ─────────────────────────────────────────────────────────── -->
        <div class="row">

            <div class="col-sm-12 col-xl-12">
                <div class="card card-header little-card">
                    <div class="col-lg-12 text-center">
                        <p class="fw-medium text-uppercase">
                            <?= htmlspecialchars($translate['monthly_sales_charts']) ?>
                        </p>
                        <div id="MontlhySaleIncomeChart"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-xl-6">
                <div class="card card-header little-card">
                    <div class="col-lg-12 text-center">
                        <p class="fw-medium text-uppercase">
                            <?= htmlspecialchars($translate['monthly_expense_charts']) ?>
                        </p>
                        <div id="monthly_expense_charts"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-xl-6">
                <div class="card card-header little-card">
                    <div class="col-lg-12 text-center">
                        <p class="fw-medium text-uppercase">
                            <?= htmlspecialchars($translate['monthly_purchase_charts']) ?>
                        </p>
                        <div id="purchases_charts"></div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /charts -->

    </div>
</div>

<!-- Highcharts -->
<script src="assets/js/highcharts/v2/highcharts.js"></script>
<script src="assets/js/highcharts/v2/exporting.js"></script>
<script src="assets/js/highcharts/v2/export-data.js"></script>
<script src="assets/js/highcharts/v2/accessibility.js"></script>

<!-- filemtime() busts cache only when the file actually changes -->
<script src="scripts/dashboard.js?v=<?= filemtime('scripts/dashboard.js') ?>"></script>