@php
	$route = Route::current();
	$annee = Request::get('annee') ?? '';
	$mois = Request::get('mois') ?? '';

    //dump($stats);
@endphp

<!-- Total Revenue Chart -->
<div class="col-xl-4 col-md-6 m-3">
    <div class="card h-100">
        <div class="card-header pb-1">
            <div class="d-flex justify-content-between">
                <h5 class="mb-0">Total </h5>
                <div class="dropdown">
                    <button class="btn text-muted p-0" type="button" id="totalRevenueDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="ri-more-2-line ri-24px"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">

            <div id="totalRevenueChart"></div>

            <div class="d-flex justify-content-around mt-3">
                <div>
                    <div class="d-flex align-items-center">
                        <div class="badge badge-dot bg-primary me-2 mb-1"></div>
                        <h6 class="mb-0">@euro($stats['ventes'][49])</h6>
                    </div>
                    <p class="mb-0">Mauleon</p>
                </div>
                <div class="vr bg-light"></div>
                <div>
                    <div class="d-flex align-items-center">
                        <div class="badge badge-dot bg-success me-2 mb-1"></div>
                        <h6 class="mb-0">@euro($stats['ventes'][2])</h6>
                    </div>
                    <p class="mb-0">Tardets</p>
                </div>
                <div class="vr bg-light"></div>
                <div>
                    <div class="d-flex align-items-center">
                        <div class="badge badge-dot bg-warning me-2 mb-1"></div>
                        <h6 class="mb-0">@euro($stats['ventes'][46])</h6>
                    </div>
                    <p class="mb-0">Navarrenx</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/ Total Revenue Chart -->


@push('scripts')
	<script type="module">
        // Total RevenueChart Chart
        // --------------------------------------------------------------------
        const totalRevenueChartEl = document.querySelector('#totalRevenueChart'),
            totalRevenueChartConfig = {
                series: [{{ $stats['ventes'][49]/100 }}, {{ $stats['ventes'][2]/100 }}, {{ $stats['ventes'][46]/100 }}],
                chart: {
                    height: 274,
                    type: 'radialBar'
                },
                grid: {
                    padding: {
                        top: -10,
                        left: -20,
                        right: -20,
                        bottom: -20
                    }
                },
                plotOptions: {
                    radialBar: {
                        hollow: {
                            size: '45%'
                        },
                        track: {
                            margin: 10,
                            show: false
                        },
                        dataLabels: {
                            name: {
                                offsetY: 25,
                                fontSize: '15px',
                                fontFamily: 'Inter',
                                fontWeight: 400,
                                color: config.bodyColor
                            },
                            value: {
                                offsetY: -12,
                                fontWeight: 500,
                                fontSize: '24px',
                                fontFamily: 'Inter',
                                color: config.headingColor,
                                formatter: function (val) {
                                    return parseInt(val) + 'K';
                                }
                            },
                            total: {
                                show: true,
                                label: '{{ $mois ? $mois . '/' : '' }}{{ $annee }}',
                                fontSize: '15px',
                                fontFamily: 'Inter',
                                fontWeight: 400,
                                color: config.bodyColor,
                                formatter: function (w) {
                                    return '{{ round($stats['total_k'] / 1000, 2) }} K';
                                }
                            }
                        }
                    }
                },
                stroke: {
                    lineCap: 'round'
                },
                colors: [config.colors.primary, config.colors.success, config.colors.warning],
                labels: ['Mauléon', 'Tardets', 'Navarrenx']
            };

            const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartConfig);
            totalRevenueChart.render();

	</script>
@endpush