@push('css')
@endpush
<x-app-layout>
    <!-- Header -->
    <div class="header text-center">
        <div class="header-body">
            <div class="row ">
                <div class="col">
                    <h1 class="header-title">
                        Bienvenido
                    </h1>
                </div>
            </div>
        </div>
    </div>
    {{-- Graficas --}}
    <div class="row  m-1">
        <div class="col">
            <div class="card lift">
                <div class="card-body text-center">
                    <div class="chart">
                        <canvas class="chart-canvas" id="feedChart"></canvas>
                    </div>
                    <h2>Ingresos autos</h2>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card lift">
                <div class="card-body text-center">
                    <div class="chart">
                        <canvas class="chart-canvas" id="earningsChart"></canvas>
                    </div>
                    <h2>Ingresos peatones</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 m-1">
        <div class="col-md-3">
            <a href="/auto" style="text-decoration: none; color: inherit">
            <div class="card lift">
                <div class="card-body text-center">
                    <h2>{{$autosCount}}</h2>
                    <span class="fe fe-truck"></span>
                    <h3>Autos Registrados</h3>
                </div>
            </div>
        </a>
        </div>
        <div class="col-md-3">
            <a href="/peaton" style="text-decoration: none; color: inherit">
            <div class="card lift">
                <div class="card-body text-center">
                    <h2>{{$peatonesCount}}</h2>
                    <span class="fe fe-users"></span>
                    <h3>Peatones Registrados</h3>
                </div>
            </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="/evento" style="text-decoration: none; color: inherit">
            <div class="card lift">
                <div class="card-body text-center">
                    <h2>{{$eventosCount}}</h2>
                    <span class="fe fe-bell"></span>
                    <h3>Eventos Registrados</h3>
                </div>
            </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="/tag" style="text-decoration: none; color: inherit">
            <div class="card lift">
                <div class="card-body text-center">
                    <h2>{{$tagsCount}}</h2>
                    <span class="fe fe-credit-card"></span>
                    <h3>Tags Registrados</h3>
                </div>
            </div>
            </a>
        </div>
    </div>
</x-app-layout>
<script>
    fetch('/data1')
        .then(response => response.json())
        .then(data => {
            // Mapea los datos recibidos al formato que espera tu gráfico
            const formattedData1 = data.map(item => ({
                month: item.month, 
                count: item.count
            }));        
    new Chart('feedChart', {
        type: 'bar',
        options: {
            scales: {
                y: {
                    ticks: {
                        callback: function(value) {
                            return value;
                        }
                    }
                }
            }
        },
        data: {
                    labels: formattedData1.map(item => item.month),
                    datasets: [{
                        label: 'ingresos',
                        data: formattedData1.map(item => item.count)
                    }]
                }
            });
        })
        .catch((error) => {
            console.error('Error fetching data:', error);
        });    

        fetch('/data2')
        .then(response => response.json())
        .then(data => {
            // Mapea los datos recibidos al formato que espera tu gráfico
            const formattedData2 = data.map(item => ({
                month: item.month, 
                count: item.count
            }));    
    new Chart('earningsChart', {
        type: 'bar',
        options: {
            scales: {
                y: {
                    ticks: {
                        callback: function(value) {
                            return value;
                        }
                    }
                }
            }
        },
        data: {
                    labels: formattedData2.map(item => item.month),
                    datasets: [{
                        label: 'ingresos',
                        data: formattedData2.map(item => item.count)
                    }]
                }
            });
        })
        .catch((error) => {
            console.error('Error fetching data:', error);
        });
</script>