@section('metatags')
    <meta name="description"
          content="">
    <meta property="og:title" content="OfiGest - Software de Gestão de Oficina">
    <meta property="og:url" content="{{ Request::url() }}">
    <meta property="og:description"
          content="Software de Gestão de Oficina.">
    <meta property="og:image" content="{{ asset('assets/img/og_image_lg.png') }}">
    <meta property="og:image" content="{{ asset('assets/img/og_image_sm.png') }}">
    <meta property="og:image" content="{{ asset('assets/img/og_image_xs.png') }}">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endsection

@section('content')
    <div class="container">
        <h1>Repair Shops Dashboard</h1>
        <div class="row">
            <div class="col-md-12">
                <canvas id="repairStatusChart"></canvas>
            </div>
        </div>
    </div>
@endsection
<script>
    $(document).ready(function() {
        function updateChart() {
            $.ajax({
                url: '{{ route('admin.getRepairData') }}',
                method: 'GET',
                success: function(response) {
                    // Extract data from the response
                    var estimatesCount = response.estimates_count;
                    var normalWorkOrdersCount = response.normal_work_orders_count;
                    var purchasesCount = response.purchases_count;

                    // Update or create the Chart.js chart
                    if (window.repairStatusChart) {
                        window.repairStatusChart.data.datasets[0].data = [estimatesCount, normalWorkOrdersCount, purchasesCount];
                        window.repairStatusChart.update();
                    } else {
                        var ctx = document.getElementById('repairStatusChart').getContext('2d');
                        window.repairStatusChart = new Chart(ctx, {
                            type: 'bar',
                            data: {
                                labels: ['Estimates', 'Normal Work Orders', 'Purchases'],
                                datasets: [{
                                    label: 'Repair Status Count',
                                    data: [estimatesCount, normalWorkOrdersCount, purchasesCount],
                                    backgroundColor: [
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(255, 99, 132, 0.2)',
                                        'rgba(75, 192, 192, 0.2)',
                                    ],
                                    borderColor: [
                                        'rgba(54, 162, 235, 1)',
                                        'rgba(255, 99, 132, 1)',
                                        'rgba(75, 192, 192, 1)',
                                    ],
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            }
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        // Initial chart update
        updateChart();

        // Optionally, set an interval to refresh the chart periodically
        setInterval(updateChart, 60000);  // Update every minute
    });
</script>