@php
    // PIZZAS triés par NB VENDUES
    $stats_pizzas = $stats['recap']['pizzas'];
    $stats_pizzas = collect($stats_pizzas)->sortByDesc('vendues');
    $slice = 10;
    $stats_pizzas_bests = $stats_pizzas->take($slice);
    $stats_pizzas_suite = $stats_pizzas->slice($slice);
@endphp

@section('page-script')

    <script type="module">

        // BAR stat PETITES / MOYENNES / GRANDES
        var options = {
            chart: {
                type: 'bar',
                height: 220,
                toolbar: { show: false },
            },
            colors: ['#b992fe'],
            xaxis: { categories: ['Petites', 'Moyennes', 'Grandes'], },
            yaxis: {
                title: { text: 'Pizzas vendues' }
            },
            fill: {
                opacity: 0.8
            },
            tooltip: {
                enabled: false,
            }
        };

        @foreach($stats_pizzas as $key => $pizza)
            options.series = [{
            name: 'Serie',
            data: @json(array($pizza['petites'], $pizza['moyennes'], $pizza['grandes'])),
        }];
        var chart = new ApexCharts(document.querySelector("#petitesMoyennesGrandes-{{ $key }}"), options);
        chart.render();
        @endforeach


        // PIE SEMAINE
        var options = {
            series: [],
            labels: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
            chart: {
                height: 210,
                width: 350,
                type: 'pie',
            }
        };

        @foreach($stats_pizzas as $key => $pizza)
            {{--            @dd($pizza['jours'])--}}
            options.series = @json(array_values($pizza['jours']));
        var chart = new ApexCharts(document.querySelector("#semaine-{{ $key }}"), options);
        chart.render();
        @endforeach

    </script>
@endsection

<div class="card mt-4 mb-4">
    <div class="">
        <h5 class="card-title m-4 mb-0">
            Les 10 Pizzas qui marchent le mieux
        </h5>
    </div>

    <div class="accordion accordion-custom-button mt-4 mb-4" id="accordionPizzasBests">
        @foreach($stats_pizzas_bests as $key => $pizza)

            <div class="accordion-item">
                <h2 class="accordion-header" id="heading-{{ $key }}">
                    <button type="button"
                            {{-- Autorise la visu des stats avancées --}}
                            @if($allowed)
                                data-bs-toggle="collapse"
                                data-bs-target="#accordionPizzasBests-{{ $key }}"
                                aria-expanded="@if ($loop->first) true @else false @endif"
                                aria-controls="accordion-{{ $key }}"
                            @endif
                            style="background: #abb7d270 !important;"
                            class="accordion-button collapsed d-flex align-items-center p-1"

                    >
                        <div class="me-2 m-3" style="width: 140px" >
                            @if($loop->first) <i class="ri-vip-crown-2-fill me-1 text-warning"></i> @endif
                            <span> {{ $pizzas[$key] }} </span>
                        </div>
                        <div class="me-4 rounded-pill btn-icon btn-label-secondary waves-effect" style="width: 80px;">
                            <span class="fw-bold">@number($pizza['vendues'])</span>
                        </div>
                        <div class="">
                                <span class="rounded-pill btn-icon btn-label-secondary waves-effect p-0 me-2">
                                    <span class="tf-icons ri-line-chart-line"></span>
                                </span>
                            @euro($pizza['ca'])
                        </div>
                    </button>
                </h2>

                <div id="accordionPizzasBests-{{ $key }}"
                     {{--                             class="accordion-collapse collapse @if($loop->first) show @endif "--}}
                     class="accordion-collapse collapse "
                     data-bs-parent="#accordionPizzasBests">
                    <div class="accordion-body d-flex justify-content-between">

                        <div class="border-1 flex-grow-1" style="max-width: 400px;">
                            <div class="border-1" id="petitesMoyennesGrandes-{{ $key }}"></div>
                        </div>
                        <div class="" style="height: 205px;">
                            <div class="border-1" id="semaine-{{ $key }}"></div>
                        </div>
                    </div>
                </div>
            </div>

        @endforeach

        <div class="accordion-item">

            @if(!$stats_pizzas_suite->isEmpty())
                <h2 class="accordion-header" id="headingSuite">
                    <button type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#accordionPizzasSuiteContainer"
                            aria-expanded="false"
                            style="background: rgba(171,183,210,0.29) !important;"
                            class="accordion-button collapsed d-flex align-items-center p-1"
                    >
                        <div class="me-2 m-3" style="width: 140px" >
                            <i class="ri-file-list-3-line me-1 text-muted"></i> Voir les autres
                        </div>
                    </button>
                </h2>
            @endif

            <div id="accordionPizzasSuiteContainer"
                 class="accordion-collapse collapse"
                 data-bs-parent="#accordionPizzasBests"
            >

                @foreach($stats_pizzas_suite as $key => $pizza)
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="heading-{{ $key }}">
                            <button type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#accordionPizzasSuite-{{ $key }}"
                                    aria-expanded="@if ($loop->first) true @else false @endif"
                                    aria-controls="accordionPizzasSuite-{{ $key }}"
                                    style="background: #abb7d270 !important;"
                                    class="accordion-button collapsed d-flex align-items-center p-1"
                            >
                                <div class="me-2 m-3" style="width: 140px" >
                                    <span> {{ $pizzas[$key] }} </span>
                                </div>
                                <div class="me-4 rounded-pill btn-icon btn-label-secondary waves-effect" style="width: 80px;">
                                    <span class="fw-bold">@number($pizza['vendues'])</span>
                                </div>
                                <div class="">
                                        <span class="rounded-pill btn-icon btn-label-secondary waves-effect p-0 me-2">
                                            <span class="tf-icons ri-line-chart-line"></span>
                                        </span>
                                    @euro($pizza['ca'])
                                </div>
                            </button>
                        </h2>

                        <div id="accordionPizzasSuite-{{ $key }}"
                             {{--                             class="accordion-collapse collapse @if($loop->first) show @endif "--}}
                             class="accordion-collapse collapse "
                             data-bs-parent="#accordionPizzasSuiteContainer">
                            <div class="accordion-body d-flex justify-content-between">

                                <div class="border-1 flex-grow-1" style="max-width: 400px;">
                                    <div class="border-1" id="petitesMoyennesGrandes-{{ $key }}"></div>
                                </div>
                                <div class="" style="height: 205px;">
                                    <div class="border-1" id="semaine-{{ $key }}"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                @endforeach
            </div>
        </div>
    </div>
</div>