@extends('back.layout.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@push('styles')
<style>
.channel-stats-bg { background-image: url("{{ asset('assets/media/images/2600x1200/bg-3.png') }}"); background-size: cover; background-position: center; }
.dark .channel-stats-bg { background-image: url("{{ asset('assets/media/images/2600x1200/bg-3-dark.png') }}"); }
</style>
@endpush

@section('content')

<div class="kt-container-fixed">
    <div class="grid grid-cols-6 max-sm:grid-cols-2 max-lg:grid-cols-3 gap-4">
        @php
        $dashWidgets = [
            ['label' => 'BdC à envoyer',          'count' => $widgets['bdc_a_envoyer'],    'statuses' => ['waiting_deal']],
            ['label' => "En attente d'éléments",  'count' => $widgets['attente_elements'], 'statuses' => ['waiting_element', 'requested_elements']],
            ['label' => 'En attente de maquette', 'count' => $widgets['attente_maquette'], 'statuses' => ['waiting_draft', 'waiting_draft_walidation', 'draft_reminder']],
            ['label' => 'En attente justifs',     'count' => $widgets['attente_justif'],   'statuses' => ['waiting_proof']],
            ['label' => 'À facturer',             'count' => $widgets['a_facturer'],       'statuses' => ['waiting_billing']],
            ['label' => 'Opérations facturées',   'count' => $widgets['facturees'],        'statuses' => ['billing_done']],
        ];
        @endphp

        @foreach ($dashWidgets as $w)
        <button
            type="button"
            data-kt-modal-toggle="#modal_dashboard_ops"
            onclick="Livewire.dispatch('open-dashboard-modal', { label: {{ json_encode($w['label']) }}, statuses: {{ json_encode($w['statuses']) }} })"
            class="kt-card channel-stats-bg flex flex-col gap-2 p-4 hover:opacity-90 transition-opacity text-left cursor-pointer">
            <span class="text-xs font-semibold text-secondary-foreground leading-tight">{{ $w['label'] }}</span>
            <span class="text-2xl font-bold text-mono">{{ $w['count'] }}</span>
        </button>
        @endforeach

{{-- Modal dashboard opérations --}}
<div class="kt-modal " data-kt-modal="true" id="modal_dashboard_ops" data-kt-modal-disable-scroll="false">
    <div class="kt-modal-content">
        <livewire:back.layouts.dashboard-modal />
    </div>
</div>
    </div>
</div>

@can('stats-dashboard')
{{-- Graphique mensuel --}}
<div class="kt-container-fixed mt-5">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <div class="kt-card lg:col-span-2" x-data="chartNav()">
            <div class="kt-card-header">
                <div class="kt-card-heading">
                    <h3 class="kt-card-title">Montants/mois <span class="text-xs font-normal text-gray-500 ml-1" x-text="periodLabel"></span></h3>
                </div>
                <div class="kt-card-toolbar flex items-center gap-2">
                    <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" @click="prev()" :disabled="!canPrev">
                        <i class="ki-outline ki-left text-sm"></i>
                    </button>
                    <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" @click="next()" :disabled="offset === 0">
                        <i class="ki-outline ki-right text-sm"></i>
                    </button>
                </div>
            </div>
            <div class="kt-card-content pb-4">
                <div id="chart_monthly"></div>
            </div>
    </div>

    <div class="kt-card" x-data="donutNav()">
            <div class="kt-card-header">
                <div class="kt-card-heading">
                    <h3 class="kt-card-title">Opérations par type <span class="text-xs font-normal text-gray-500 ml-1" x-text="periodLabel"></span></h3>
                </div>
                <div class="kt-card-toolbar flex items-center gap-2">
                    <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" @click="prev()">
                        <i class="ki-outline ki-left text-sm"></i>
                    </button>
                    <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" @click="next()" :disabled="offset === 0">
                        <i class="ki-outline ki-right text-sm"></i>
                    </button>
                </div>
            </div>
            <div class="kt-card-content pb-4">
                <div id="chart_by_type"></div>
            </div>
        </div>
</div>
@endcan

@endsection

@push('scripts')
<script>
function donutNav() {
    return {
        chart: null,
        offset: 0,
        periodLabel: '',
        total: 0,

        init() {
            this.periodLabel = {!! json_encode($typeMonthLabel) !!};
            this.total = {!! $typeCounts->sum() !!};
            const self = this;
            this.chart = new ApexCharts(this.$el.querySelector('#chart_by_type'), {
                chart: { type: 'donut', height: 240, fontFamily: 'inherit' },
                series: {!! $typeCounts->toJson() !!},
                labels: {!! $typeLabels->toJson() !!},
                dataLabels: { enabled: false },
                plotOptions: { pie: { donut: { size: '65%', labels: { show: true, total: { show: true, label: 'Total', formatter: () => self.total } } } } },
                legend: { position: 'bottom', horizontalAlign: 'center', fontSize: '11px', itemMargin: { horizontal: 6, vertical: 2 } },
                tooltip: { y: { formatter: val => val + ' opération(s)' } },
                noData: { text: 'Aucune donnée pour cette période' },
            });
            this.chart.render();
        },

        prev() { this.offset -= 1; this.load(); },
        next() { if (this.offset < 0) { this.offset += 1; this.load(); } },

        async load() {
            const url = '{{ route('admin.dashboard.chart-by-type') }}?offset=' + this.offset;
            const data = await (await window.fetch(url)).json();

            this.periodLabel = data.monthLabel;
            this.total = data.counts.reduce((a, b) => a + Number(b), 0);
            this.chart.updateOptions({
                labels: data.labels,
            }, false, true);
            this.chart.updateSeries(data.counts, true);
        },
    };
}

function chartNav() {
    const formatEur = val => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(val);

    const baseOptions = {
        chart: { type: 'bar', height: 240, toolbar: { show: false }, fontFamily: 'inherit' },
        plotOptions: { bar: { horizontal: false, borderRadius: 5, borderRadiusApplication: 'end' } },
        dataLabels: { enabled: false, position: 'top', formatter: formatEur, style: { fontSize: '8px', colors: ['#555'] }, offsetY: -18 },
        stroke: { show: true, width: 2, colors: ['transparent'] },
        fill: { opacity: 1 },
        yaxis: { labels: { formatter: formatEur } },
        tooltip: { y: { formatter: formatEur } },
        legend: { show: false },
    };

    return {
        chart: null,
        offset: 0,
        canPrev: true,
        periodLabel: '',

        init() {
            const labels = {!! $chartLabels->toJson() !!};
            this.periodLabel = labels.length ? labels[0] + ' — ' + labels[labels.length - 1] : '';
            this.chart = new ApexCharts(this.$el.querySelector('#chart_monthly'), {
                ...baseOptions,
                series: [
                    { name: 'Frais Média',  data: {!! $chartMedia->toJson() !!} },
                    { name: 'Frais Agence', data: {!! $chartAgence->toJson() !!} },
                    { name: 'Total CA',     data: {!! $chartCA->toJson() !!} },
                ],
                xaxis: { categories: {!! $chartLabels->toJson() !!} },
            });
            this.chart.render();
        },

        prev() { if (this.canPrev) { this.offset -= 6; this.load(); } },
        next() { if (this.offset < 0) { this.offset += 6; this.load(); } },

        async load() {
            const url = '{{ route('admin.dashboard.chart') }}?offset=' + this.offset;
            const data = await (await window.fetch(url)).json();

            if (!data.labels.length) {
                // Aucune donnée — on annule et bloque
                this.offset += 6;
                this.canPrev = false;
                return;
            }

            this.canPrev = true;
            this.periodLabel = data.labels[0] + ' — ' + data.labels[data.labels.length - 1];
            this.chart.updateOptions({
                xaxis: { categories: data.labels },
                series: [
                    { name: 'Frais Média',  data: data.media  },
                    { name: 'Frais Agence', data: data.agence },
                    { name: 'Total CA',     data: data.ca     },
                ],
            }, false, true);
        },
    };
}
</script>
@endpush