<?= $this->include('partials/html') ?>

<head>
    <?php echo view("partials/title-meta", array("title" => $title)) ?>
    <?= $this->include('partials/head-css') ?>
</head>

<body>
    <div class="wrapper">
        <?= $this->include('partials/menu') ?>

        <div class="page-content">
            <div class="page-container">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <h4 class="page-title">Tableau de bord - Magento</h4>
                        </div>
                    </div>
                </div>

                <!-- KPI Cards -->
                <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1 g-3">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <p class="text-muted mb-1">Total commandes - Année en cours</p>
                                        <h3 class="fw-semibold mb-1"><?= number_format($total_commandes, 0, ',', ' ') ?></h3>
                                        <p class="mb-0 text-muted small">N-1 : <?= number_format($commandes_annee_precedente, 0, ',', ' ') ?></p>
                                        <p class="mb-0 small <?= $evolution_commandes >= 0 ? 'text-success' : 'text-danger' ?>">
                                            <?= $evolution_commandes >= 0 ? '▲' : '▼' ?> <?= $evolution_commandes >= 0 ? '+' : '' ?><?= number_format($evolution_commandes, 2, ',', ' ') ?> %
                                        </p>
                                    </div>
                                    <div class="avatar-sm bg-primary rounded d-flex align-items-center justify-content-center">
                                        <i class="ti ti-shopping-cart text-white fs-20"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <p class="text-muted mb-1">CA total HT - Année en cours</p>
                                        <h3 class="fw-semibold mb-1"><?= number_format($ca_total, 2, ',', ' ') ?> €</h3>
                                        <p class="mb-0 text-muted small">N-1 : <?= number_format($ca_annee_precedente, 2, ',', ' ') ?> €</p>
                                        <p class="mb-0 small <?= $evolution_ca >= 0 ? 'text-success' : 'text-danger' ?>">
                                            <?= $evolution_ca >= 0 ? '▲' : '▼' ?> <?= $evolution_ca >= 0 ? '+' : '' ?><?= number_format($evolution_ca, 2, ',', ' ') ?> %
                                        </p>
                                    </div>
                                    <div class="avatar-sm bg-success rounded d-flex align-items-center justify-content-center">
                                        <i class="ti ti-currency-euro text-white fs-20"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <p class="text-muted mb-1">Panier moyen HT</p>
                                        <h3 class="fw-semibold mb-0"><?= number_format($panier_moyen, 2, ',', ' ') ?> €</h3>
                                    </div>
                                    <div class="avatar-sm bg-info rounded d-flex align-items-center justify-content-center">
                                        <i class="ti ti-chart-pie text-white fs-20"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <p class="text-muted mb-1">Commandes aujourd'hui</p>
                                        <h3 class="fw-semibold mb-0"><?= number_format($commandes_aujourdhui, 0, ',', ' ') ?></h3>
                                    </div>
                                    <div class="avatar-sm bg-warning rounded d-flex align-items-center justify-content-center">
                                        <i class="ti ti-calendar-event text-white fs-20"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <p class="text-muted mb-1">CA aujourd'hui HT</p>
                                        <h3 class="fw-semibold mb-0"><?= number_format($ca_aujourdhui, 2, ',', ' ') ?> €</h3>
                                    </div>
                                    <div class="avatar-sm bg-danger rounded d-flex align-items-center justify-content-center">
                                        <i class="ti ti-cash text-white fs-20"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <p class="text-muted mb-1">Commandes ce mois</p>
                                        <h3 class="fw-semibold mb-0"><?= number_format($commandes_mois, 0, ',', ' ') ?></h3>
                                    </div>
                                    <div class="avatar-sm bg-secondary rounded d-flex align-items-center justify-content-center">
                                        <i class="ti ti-chart-bar text-white fs-20"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <p class="text-muted mb-1">CA ce mois HT</p>
                                        <h3 class="fw-semibold mb-0"><?= number_format($ca_mois, 2, ',', ' ') ?> €</h3>
                                    </div>
                                    <div class="avatar-sm bg-dark rounded d-flex align-items-center justify-content-center">
                                        <i class="ti ti-trending-up text-white fs-20"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Charts & Status -->
                <div class="row mt-4">
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">Évolution CA HT - 7 derniers jours</h4>
                                <div id="ventes-chart" style="height: 350px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">Commandes par statut - Année en cours</h4>
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>Statut</th>
                                                <th class="text-end">Nombre</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php foreach ($commandes_par_statut as $statut): ?>
                                                <tr>
                                                    <td><span class="badge bg-<?= $statut['status'] === 'complete' ? 'success' : ($statut['status'] === 'canceled' ? 'danger' : 'info') ?>"><?= esc($statut['status']) ?></span></td>
                                                    <td class="text-end"><?= number_format($statut['total'], 0, ',', ' ') ?></td>
                                                </tr>
                                            <?php endforeach; ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title mb-3">Évolution mensuelle - Marques (Top 10)</h4>
                                <p class="text-muted mb-3 small">CA HT du mois en cours vs N-1 (même période, à la même heure)</p>
                                <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-2">
                                    <?php foreach ($top_marques as $marque): ?>
                                        <?php
                                            $evo = (float) ($marque['evolution_pct'] ?? 0);
                                            $badgeClass = $evo >= 0 ? 'success' : 'danger';
                                            $arrow = $evo >= 0 ? '▲' : '▼';
                                        ?>
                                        <div class="col">
                                            <div class="card h-100 border-0 shadow-sm">
                                                <div class="card-body p-3">
                                                    <h5 class="card-title mb-1 fs-18 fw-bold text-truncate w-100" title="<?= esc($marque['marque'] !== '' ? $marque['marque'] : '(Sans marque)') ?>">
                                                        <?= esc($marque['marque'] !== '' ? $marque['marque'] : '(Sans marque)') ?>
                                                    </h5>
                                                    <div class="mt-2">
                                                        <p class="text-muted mb-0 small">CA mois</p>
                                                        <h4 class="fw-semibold mb-0 fs-16"><?= number_format((float) ($marque['ca_mois'] ?? 0), 0, ',', ' ') ?> €</h4>
                                                        <p class="mb-0 text-muted small">N-1 : <?= number_format((float) ($marque['ca_mois_n1'] ?? 0), 0, ',', ' ') ?> €</p>
                                                        <p class="mb-0 mt-1 small <?= $evo >= 0 ? 'text-success' : 'text-danger' ?>">
                                                            <span class="badge bg-<?= $badgeClass ?> fs-12">
                                                                <?= $arrow ?> <?= $evo >= 0 ? '+' : '' ?><?= number_format($evo, 2, ',', ' ') ?> %
                                                            </span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tables -->
                <div class="row mt-4">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">Top 10 clients - Année en cours</h4>
                                <div class="table-responsive">
                                    <table id="table-top-clients" class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Client</th>
                                                <th class="text-end">Commandes</th>
                                                <th class="text-end">CA</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php foreach ($top_clients as $client): ?>
                                                <tr>
                                                    <td><?= esc($client['customer_firstname'] . ' ' . $client['customer_lastname']) ?><br><small class="text-muted"><?= esc($client['customer_email']) ?></small></td>
                                                    <td class="text-end"><?= number_format($client['nb_commandes'], 0, ',', ' ') ?></td>
                                                    <td class="text-end"><?= number_format($client['ca_total'], 2, ',', ' ') ?> € HT</td>
                                                </tr>
                                            <?php endforeach; ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">Top 10 produits - Année en cours</h4>
                                <div class="table-responsive">
                                    <table id="table-top-produits" class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Produit</th>
                                                <th class="text-end">Qté</th>
                                                <th class="text-end">CA</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php foreach ($top_produits as $produit): ?>
                                                <tr>
                                                    <td><?= esc($produit['product_name']) ?><br><small class="text-muted"><?= esc($produit['sku']) ?></small></td>
                                                    <td class="text-end"><?= number_format($produit['qty_total'], 0, ',', ' ') ?></td>
                                                    <td class="text-end"><?= number_format($produit['ca_total'], 2, ',', ' ') ?> € HT</td>
                                                </tr>
                                            <?php endforeach; ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">Dernières commandes</h4>
                                <div class="table-responsive">
                                    <table id="table-recent-commandes" class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Client</th>
                                                <th>Email</th>
                                                <th>Total</th>
                                                <th>Statut</th>
                                                <th>Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php foreach ($recent_commandes as $commande): ?>
                                                <tr>
                                                    <td><?= esc($commande['increment_id']) ?></td>
                                                    <td><?= esc($commande['customer_firstname'] . ' ' . $commande['customer_lastname']) ?></td>
                                                    <td><?= esc($commande['customer_email']) ?></td>
                                                    <td><?= number_format($commande['subtotal'], 2, ',', ' ') ?> € HT</td>
                                                    <td><span class="badge bg-<?= $commande['status'] === 'complete' ? 'success' : ($commande['status'] === 'canceled' ? 'danger' : 'info') ?>"><?= esc($commande['status']) ?></span></td>
                                                    <td><?= esc($commande['created_at']) ?></td>
                                                </tr>
                                            <?php endforeach; ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <?= $this->include('partials/footer-scripts') ?>
    <?= $this->include('partials/datatables') ?>
    <script src="/vendor/apexcharts/apexcharts.min.js"></script>

    <script>
        $(document).ready(function() {
            initDataTable('#table-top-clients');
            initDataTable('#table-top-produits');
            initDataTable('#table-recent-commandes');
        });
    </script>

    <script>
        var options = {
            series: [{
                name: 'Nombre de commandes',
                data: <?= json_encode(array_map('intval', $chart_nb_commandes)) ?>
            }, {
                name: 'CA (€)',
                data: <?= json_encode(array_map('floatval', $chart_ca)) ?>
            }],
            chart: {
                height: 350,
                type: 'line',
                dropShadow: {
                    enabled: true,
                    color: '#000',
                    top: 18,
                    left: 7,
                    blur: 10,
                    opacity: 0.2
                },
                toolbar: {
                    show: false
                }
            },
            colors: ['#727cf5', '#0acf97'],
            dataLabels: {
                enabled: true,
            },
            stroke: {
                curve: 'smooth'
            },
            xaxis: {
                categories: <?= json_encode($chart_dates) ?>,
            },
            yaxis: [{
                title: {
                    text: 'Commandes',
                },
            }, {
                opposite: true,
                title: {
                    text: 'CA (€)'
                }
            }],
            legend: {
                position: 'top',
                horizontalAlign: 'right',
                floating: true,
                offsetY: -25,
                offsetX: -5
            }
        };

        var chart = new ApexCharts(document.querySelector("#ventes-chart"), options);
        chart.render();
    </script>
</body>

</html>
