<?= $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 d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="page-title"><?= esc($dealer['admin_fullname'] ?? 'Dealer') ?></h4>
                                <p class="text-muted mb-0"><?= esc($dealer['admin_email'] ?? '') ?> — <?= esc($dealer['admin_username'] ?? '') ?></p>
                            </div>
                            <a href="/admin/dealers" class="btn btn-secondary">Retour aux dealers</a>
                        </div>
                    </div>
                </div>

                <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-center">
                                    <div>
                                        <p class="text-muted mb-1">Clients affectés</p>
                                        <h3 class="fw-semibold mb-0"><?= number_format(count($customers_with_ca), 0, ',', ' ') ?></h3>
                                    </div>
                                    <div class="avatar-sm bg-primary rounded d-flex align-items-center justify-content-center">
                                        <i class="ti ti-user-check 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 HT <?= esc($year_comparison['annee_n']) ?></p>
                                        <h3 class="fw-semibold mb-1"><?= number_format($year_comparison['ca_n'], 2, ',', ' ') ?> €</h3>
                                        <p class="mb-0 text-muted small">N-1 : <?= number_format($year_comparison['ca_n1'], 2, ',', ' ') ?> €</p>
                                        <p class="mb-0 small <?= $year_comparison['evolution_ca'] >= 0 ? 'text-success' : 'text-danger' ?>">
                                            <?= $year_comparison['evolution_ca'] >= 0 ? '▲' : '▼' ?> <?= $year_comparison['evolution_ca'] >= 0 ? '+' : '' ?><?= number_format($year_comparison['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-start">
                                    <div>
                                        <p class="text-muted mb-1">Commandes <?= esc($year_comparison['annee_n']) ?></p>
                                        <h3 class="fw-semibold mb-1"><?= number_format($year_comparison['commandes_n'], 0, ',', ' ') ?></h3>
                                        <p class="mb-0 text-muted small">N-1 : <?= number_format($year_comparison['commandes_n1'], 0, ',', ' ') ?></p>
                                        <p class="mb-0 small <?= $year_comparison['evolution_commandes'] >= 0 ? 'text-success' : 'text-danger' ?>">
                                            <?= $year_comparison['evolution_commandes'] >= 0 ? '▲' : '▼' ?> <?= $year_comparison['evolution_commandes'] >= 0 ? '+' : '' ?><?= number_format($year_comparison['evolution_commandes'], 2, ',', ' ') ?> %
                                        </p>
                                    </div>
                                    <div class="avatar-sm bg-info 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-center">
                                    <div>
                                        <p class="text-muted mb-1">Panier moyen <?= esc($year_comparison['annee_n']) ?></p>
                                        <h3 class="fw-semibold mb-0"><?= number_format($year_comparison['commandes_n'] > 0 ? $year_comparison['ca_n'] / $year_comparison['commandes_n'] : 0, 2, ',', ' ') ?> €</h3>
                                    </div>
                                    <div class="avatar-sm bg-warning 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>

                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">Évolution mensuelle — 2 dernières années</h4>
                                <p class="text-muted small"><?= esc($date_debut) ?> → <?= esc($date_fin) ?></p>
                                <div id="dealer-curve-chart" style="height: 350px;"></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">Clients avec CA total et société</h4>
                                <p class="text-muted small">CA N : période 01/01/<?= esc(date('Y')) ?> → <?= esc(date('d/m/Y')) ?> — CA N-1 : période 01/01/<?= esc(date('Y') - 1) ?> → <?= esc(date('d/m/Y', strtotime((date('Y') - 1) . date('-m-d')))) ?></p>
                                <div class="table-responsive">
                                    <table id="table-customers-ca" class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>ID client</th>
                                                <th>Prénom</th>
                                                <th>Nom</th>
                                                <th>Email</th>
                                                <th>Société</th>
                                                <th class="text-end">Commandes</th>
                                                <th class="text-end">CA total HT</th>
                                                <th class="text-end">CA N HT</th>
                                                <th class="text-end">CA N-1 HT</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php foreach ($customers_with_ca as $client): ?>
                                                <tr>
                                                    <td><?= (int) $client['customer_id'] ?></td>
                                                    <td><?= esc($client['firstname']) ?></td>
                                                    <td><?= esc($client['lastname']) ?></td>
                                                    <td><?= esc($client['customer_email']) ?></td>
                                                    <td><?= esc($client['company']) ?></td>
                                                    <td class="text-end" data-order="<?= (int) $client['nb_commandes'] ?>"><?= number_format($client['nb_commandes'], 0, ',', ' ') ?></td>
                                                    <td class="text-end" data-order="<?= (float) $client['ca_total'] ?>"><?= number_format($client['ca_total'], 2, ',', ' ') ?> €</td>
                                                    <td class="text-end" data-order="<?= (float) $client['ca_n'] ?>"><?= number_format($client['ca_n'], 2, ',', ' ') ?> €</td>
                                                    <td class="text-end" data-order="<?= (float) $client['ca_n1'] ?>">
                                                        <?= number_format($client['ca_n1'], 2, ',', ' ') ?> €
                                                        <?php if ($client['ca_n1'] > 0): ?>
                                                            <br>
                                                            <span class="badge bg-<?= $client['evolution_ca_n1'] >= 0 ? 'success' : 'danger' ?>">
                                                                <?= $client['evolution_ca_n1'] >= 0 ? '+' : '' ?><?= number_format($client['evolution_ca_n1'], 2, ',', ' ') ?> %
                                                            </span>
                                                        <?php endif; ?>
                                                    </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-customers-ca');
        });
    </script>

    <script>
        var options = {
            series: [{
                name: 'Nombre de commandes',
                data: <?= json_encode(array_map('intval', $chart_commandes)) ?>
            }, {
                name: 'CA (€)',
                data: <?= json_encode(array_map('floatval', $chart_ca)) ?>
            }],
            chart: {
                height: 350,
                type: 'line',
                toolbar: { show: false }
            },
            colors: ['#727cf5', '#0acf97'],
            dataLabels: { enabled: true },
            stroke: { curve: 'smooth' },
            xaxis: {
                categories: <?= json_encode($chart_months) ?>,
            },
            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("#dealer-curve-chart"), options);
        chart.render();
    </script>
</body>

</html>
