<?php
use App\Models\Backend\Visit;
use Carbon\Carbon;
$labels7 = []; $data7 = [];
for ($i = 6; $i >= 0; $i--) {
    $date = Carbon::now()->subDays($i);
    $labels7[] = $date->format('D');
    $data7[] = Visit::whereDate('created_at', $date)->count();
}
$labels30 = []; $data30 = [];
for ($i = 29; $i >= 0; $i--) {
    $date = Carbon::now()->subDays($i);
    $labels30[] = $date->format('d M');
    $data30[] = Visit::whereDate('created_at', $date)->count();
}
?>
<style>
.chart-row {
    display: flex;
    gap: 1.25rem;
    width: 100%;
}
.chart-row > div {
    flex: 1;
    min-width: 0;
}
.chart-row h3 {
    text-align: center;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}
.dark .chart-row h3 { color: #e2e8f0; }
@media (max-width: 768px) {
    .chart-row { flex-direction: column; }
}
</style>
<h3 style="text-align:center;margin-bottom:16px;font-size:17px;font-weight:600;color:#1e293b;">Visitor Statistics</h3>
<div class="chart-row">
    <div>
        <h3>Last 7 Days</h3>
        <div id="chartBar"></div>
    </div>
    <div>
        <h3>Last 30 Days</h3>
        <div id="chartLine"></div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var barOptions = {
        series: [{ name: 'Visits', data: <?= json_encode($data7) ?> }],
        chart: { type: 'bar', height: 250, toolbar: { show: false } },
        colors: ['#3b82f6'],
        plotOptions: { bar: { borderRadius: 4, columnWidth: '60%' } },
        dataLabels: { enabled: false },
        xaxis: { categories: <?= json_encode($labels7) ?> },
        yaxis: { min: 0 },
        legend: { show: false }
    };
    new ApexCharts(document.getElementById('chartBar'), barOptions).render();

    var lineOptions = {
        series: [{ name: 'Visits', data: <?= json_encode($data30) ?> }],
        chart: { type: 'line', height: 250, toolbar: { show: false } },
        colors: ['#3b82f6'],
        stroke: { curve: 'smooth', width: 2 },
        fill: { type: 'solid', opacity: 0.1 },
        markers: { size: 2 },
        dataLabels: { enabled: false },
        xaxis: { categories: <?= json_encode($labels30) ?> },
        yaxis: { min: 0 },
        legend: { show: false }
    };
    new ApexCharts(document.getElementById('chartLine'), lineOptions).render();
});
</script>