<?php
declare(strict_types=1);

/**
 * 🔒 MUST BE FIRST — NO OUTPUT BEFORE THIS
 */
require_once __DIR__ . '/security/auth_guard.php';

/**
 * Layout bootstrap
 */
require_once __DIR__ . '/partials/main.php';
?>

<head>
    
    <?php includeFileWithVariables(
        __DIR__ . '/partials/title-meta.php',
        ['title' => 'Dashboard']
    ); ?>
    <?php require_once __DIR__ . '/partials/head-css.php'; ?>
</head>

<body>

    <div id="layout-wrapper">

        <?php require_once __DIR__ . '/partials/header.php'; ?>
        <?php require_once __DIR__ . '/partials/sidebar.php'; ?>

        <main class="app-wrapper">
            <div class="container-fluid">

                <?php includeFileWithVariables(
                    __DIR__ . '/partials/page-title.php',
                    ['title' => 'CRM', 'title_sub' => 'Dashboard']
                ); ?>

                <!-- ===================== WELCOME ===================== -->
              <div class="row">

    <!-- ===================== WELCOME CARD ===================== -->
    <div class="col-xxl-5 col-xl-12">
        <div class="row">
            <div class="col-12">
                <div class="card card-h-100">
                    <div class="card-body">
                        <div class="d-flex flex-md-row flex-column align-items-center">
                            <div class="welcome-content text-md-start text-center">
                                <h4 class="mb-1 fw-normal">
                                    Welcome Back
                                    <span class="fw-semibold" id="employeeName">Employee Name</span> 🎉
                                </h4>
                                <p class="mb-5 fs-15 text-opacity-70">
                                    Boost your sales and track leads effortlessly.
                                </p>
                                <h4 class="fw-medium mb-1 fs-18">-</h4>
                                <p class="text-opacity-70">85% of salling target</p>
                                <a href="javascript:void(0)" class="btn btn-primary mt-1">
                                    View Reports
                                </a>
                            </div>
                            <div class="vector-image ms-md-auto text-center">
                                <img src="assets/images/dashboard/welcome.png"
                                     alt="CRM Vector"
                                     class="img-fluid welcome-img w-208px">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ===================== TOP STATS ===================== -->
    <div class="col-xxl-7 col-xl-12">
        <div class="row">

            <?php
            $topCards = [
                ['Total Website Traffic', 'success', 85],
                ['New Subscribers', 'warning', 68],
                ['Total Leads', 'info', 92],
                ["Active FAQ's", 'danger', 55],
            ];
            foreach ($topCards as [$label, $color, $progress]):
            ?>
                <div class="col-md-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <p class="mb-5 fw-medium text-truncate"><?= $label ?></p>
                            <h3 class="mb-1">-</h3>
                            <p class="text-muted mb-2 text-truncate">This Month</p>
                            <div class="d-flex align-items-end justify-content-between">
                                <span class="badge bg-<?= $color ?>-subtle text-<?= $color ?> mb-4">-</span>
                                <div class="circular-progress circular-md circular-progress-<?= $color ?>"
                                     style="--progress: <?= $progress ?>;">
                                    <svg class="circular-inner" viewBox="0 0 76 76">
                                        <circle class="bg-circular-progress"></circle>
                                        <circle class="fg-circular-progress"></circle>
                                    </svg>
                                    <div class="circular-text">-</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>

        </div>
    </div>

</div>

<!-- ===================== KPI CARDS ===================== -->
<div class="row">

    <?php
    $kpis = [
        ['Total Dealers', 'academy-bg1.png', 'bg-info', 'ri-graduation-cap-line'],
        ['Total Employees', 'academy-bg3.png', 'bg-primary', 'ri-presentation-line'],
        ['Total Leads', 'academy-bg2.png', 'bg-secondary', 'ri-group-line'],
        ['Total Retail Products', 'academy-bg4.png', 'bg-warning', 'ri-wallet-line'],
        ['Total Hospitality Products', 'academy-bg5.png', 'bg-success', 'ri-award-line'],
    ];
    foreach ($kpis as [$label, $bg, $iconBg, $icon]):
    ?>
        <div class="col-xxl col-sm-6">
            <div class="card overflow-hidden">
                <div class="card-body position-relative z-1">
                    <div class="d-flex gap-2 justify-content-between">
                        <div>
                            <span class="d-block mb-5"><?= $label ?></span>
                            <h4 class="mb-4 fw-semibold">- Active</h4>
                            <p class="mb-0 fw-medium">-</p>
                            <p class="mb-0 fs-12">Inactive</p>
                        </div>
                        <div
                            class="h-50px w-50px d-flex justify-content-center align-items-center <?= $iconBg ?> rounded-pill text-white fs-4">
                            <i class="<?= $icon ?>"></i>
                        </div>
                    </div>
                </div>
                <img src="<?= ADMIN_BASE_URL ?>assets/images/dashboard/<?= $bg ?>"
                     class="position-absolute bottom-0 right h-100 w-100 object-fit-cover opacity-5">
            </div>
        </div>
    <?php endforeach; ?>

</div>

<!-- ===================== TABLES ===================== -->

<?php
$tables = [
    'Latest Blogs',
    'Latest Faq',
    'Top Performing Dealers',
    'Top Performing Pages',
    'Top Performin Cities (Leads)'
];
?>

<div class="row">

    <?php foreach ($tables as $title): ?>
        <div class="col-xl-6">
            <div class="card courses-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0"><?= $title ?></h5>
                    <a href="javascript:void(0)"
                       class="link link-primary fs-13 text-muted text-decoration-underline">
                        See All
                        <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="table-box table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Category</th>
                                    <th>Author</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="7" class="text-center text-muted">
                                        Loading...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    <?php endforeach; ?>

</div>

        </main>

        <?php require_once __DIR__ . '/partials/footer.php'; ?>
    </div>

    <?php require_once __DIR__ . '/partials/vendor-scripts.php'; ?>

    <script>
        const ADMIN_BASE_URL = "<?= ADMIN_BASE_URL ?>";
    </script>

    <script src="<?= ADMIN_BASE_URL ?>assets/js/dashboard/dashboard.api.js"></script>
    <script src="<?= ADMIN_BASE_URL ?>assets/js/auth/me.js"></script>

</body>

</html>