{{-- resources/views/admin/partials/report-chart.blade.php --}}
@if(isset($widgets['chart']))
    <div class="row mb-4">
        <div class="col-md-12" style="position: relative;">
            <canvas id="reportChart"></canvas>
        </div>
    </div>

    @php
        $labels  = $widgets['chart']['data']['labels'];
        $avatars = $widgets['chart']['data']['avatars'];
    @endphp

    {{-- AVATAR ROW --}}
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="avatars" style="display: table; width: 100%; table-layout: fixed; padding: 0 40px;">
                @foreach($labels as $i => $label)
                    <div class="avatar-cell" style="display: table-cell; text-align: center; vertical-align: top;">
                        @if(! empty($avatars[$i]))
                            <img
                                src="{{ $avatars[$i] }}"
                                alt="{{ $label }}"
                                style="
                                    width:64px;
                                    height:64px;
                                    border-radius:50%;
                                    object-fit:cover;
                                    box-shadow:0 2px 6px rgba(0,0,0,0.15);
                                    margin-bottom:4px;
                                "
                            >
                        @else
                            <div class="placeholder" style="
                                width:64px;
                                height:64px;
                                border-radius:50%;
                                background:#ddd;
                                margin:0 auto 4px;
                            "></div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    @push('page_scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const raw      = @json($widgets['chart']['data']);
        const dateRange = @json($dateRange);
        const ctx      = document.getElementById('reportChart').getContext('2d');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: raw.labels,
                datasets: [
                    {
                        label: '{{ __("reports.courses.client_payment_incl_tax") }}',
                        data: raw.revenues,
                        backgroundColor: 'rgba(54,162,235,0.7)',
                        borderRadius: 6,
                        yAxisID: 'y',
                    },
                    {
                        label: '{{ __("reports.courses.coach_share") }}',
                        data: raw.shares,
                        backgroundColor: 'rgba(255,159,64,0.7)',
                        borderRadius: 6,
                        yAxisID: 'y',
                    },
                    {
                        label: '{{ __("reports.courses.number_of_courses") }}',
                        data: raw.counts,
                        type: 'line',
                        borderColor: 'rgba(75,192,192,1)',
                        backgroundColor: 'rgba(75,192,192,0.2)',
                        tension: 0.3,
                        pointRadius: 6,
                        yAxisID: 'y1',
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                layout: {
                    padding: { top: 20, bottom: 0, left: 40, right: 40 }
                },
                plugins: {
                    title: {
                        display: true,
                        text: dateRange,
                        font: { size: 14 },
                        padding: { bottom: 10 }
                    },
                    subtitle: {
                        display: false
                    },
                    legend: {
                        position: 'top'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { display: true }
                    },
                    y: {
                        beginAtZero: true,
                        position: 'left',
                        title: {
                            display: true,
                            text: '{{ __("reports.courses.client_payment_incl_tax") }} / {{ __("reports.courses.coach_share") }}'
                        },
                        grid: { color: 'rgba(0,0,0,0.1)' }
                    },
                    y1: {
                        beginAtZero: true,
                        position: 'right',
                        title: {
                            display: true,
                            text: '{{ __("reports.courses.number_of_courses") }}'
                        },
                        grid: { drawOnChartArea: false }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                },
                animation: {
                    duration: 800,
                    easing: 'easeOutQuart'
                }
            }
        });
    });
    </script>
    @endpush
@endif