@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 de signature','count' => $widgets['attente_signature'], 'statuses' =>
        ['waiting_signature', 'signature_reminder']],
        ['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']],
        ];
        $dashWidgets = array_filter($dashWidgets, fn($w) => $w['count'] > 0);
        @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>

{{-- Rappels en cours --}}
<div class="kt-container-fixed mt-5">
    <div class="kt-card">
        <div class="kt-card-header">
            <div class="kt-card-heading">
                <h3 class="kt-card-title">Rappels en cours</h3>
            </div>
        </div>
        <div class="kt-card-content pb-4">
            @if ($reminders->isEmpty())
            <div class="kt-alert kt-alert-light kt-alert-info kt-alert-sm">
                <div class="kt-alert-title">Aucun rappel actif.</div>
            </div>
            @else
            <div class="overflow-x-auto">
                <table class="w-full text-xs">
                    <thead>
                        <tr class="border-b border-border">
                            <th class="px-3 py-2 text-left font-semibold text-secondary-foreground w-28">Date</th>
                            <th class="px-3 py-2 text-left font-semibold text-secondary-foreground w-48">Client</th>
                            <th class="px-3 py-2 text-left font-semibold text-secondary-foreground w-36">Commercial</th>
                            <th class="px-3 py-2 text-left font-semibold text-secondary-foreground">Message</th>
                            <th class="px-3 py-2 w-20"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border">
                        @foreach ($reminders as $reminder)
                        <tr class="hover:bg-accent/40 transition-colors">
                            <td class="px-3 py-2 font-semibold text-destructive whitespace-nowrap">{{
                                $reminder->alert_date }}</td>
                            <td class="px-3 py-2">
                                @if ($reminder->client)
                                <a href="{{ route($reminder->client->type === 'prospect' ? 'admin.crm.prospects.show' : 'admin.crm.clients.show', $reminder->client) }}"
                                    class="font-semibold text-primary hover:underline">
                                    {{ $reminder->client->name }}
                                </a>
                                @else
                                —
                                @endif
                            </td>
                            <td class="px-3 py-2 whitespace-nowrap">{{ $reminder->commercial?->firstname ?? '—' }}</td>
                            <td class="px-3 py-2 text-secondary-foreground">{{ $reminder->note }}</td>
                            <td class="px-3 py-2 text-end">
                                <div class="inline-flex items-center gap-2">
                                    @can('edit-operations')
                                    <button type="button" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                        data-kt-modal-toggle="#modal_confirm_reminder_done"
                                        data-confirm-url="{{ route('admin.reminders.done', $reminder) }}"
                                        data-confirm-name="{{ $reminder->client?->name }} - {{ $reminder->alert_date }}"
                                        data-kt-tooltip="#tt_dash_done_{{ $reminder->id }}"
                                        data-kt-tooltip-placement="bottom">
                                        <i class="ki-outline ki-check text-xs"></i>
                                    </button>
                                    <div id="tt_dash_done_{{ $reminder->id }}" class="kt-tooltip">Marquer fait</div>
                                    <button type="button" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                        data-kt-modal-toggle="#modal_confirm_delete"
                                        data-confirm-url="{{ route('admin.reminders.destroy', $reminder) }}"
                                        data-confirm-name="ce rappel du {{ $reminder->alert_date }}">
                                        <i class="ki-outline ki-trash text-destructive"></i>
                                    </button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Modal de confirmation : marquer un rappel comme fait --}}
<div id="modal_confirm_reminder_done" class="kt-modal kt-modal-center hidden" data-kt-modal="true">
    <div class="kt-modal-content max-w-md">
        <div class="kt-modal-header">
            <h3 class="kt-modal-title">Marquer le rappel comme fait</h3>
            <button type="button" class="kt-modal-close" aria-label="Close modal"
                data-kt-modal-dismiss="#modal_confirm_reminder_done">
                <i class="ki-outline ki-cross text-lg"></i>
            </button>
        </div>
        <div class="kt-modal-body">
            <p class="text-sm text-secondary-foreground">
                Confirmer que ce rappel est fait : <strong id="modal_reminder_done_name"></strong>.
            </p>
        </div>
        <div class="kt-modal-footer justify-end gap-3">
            <button type="button" class="kt-btn kt-btn-outline" data-kt-modal-dismiss="#modal_confirm_reminder_done">
                {{ __('ui.actions.cancel') }}
            </button>
            <form id="form_confirm_reminder_done" method="POST">
                @csrf
                @method('PATCH')
                <button type="submit" class="kt-btn kt-btn-primary">{{ __('ui.actions.confirm') }}</button>
            </form>
        </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>
</div>
@endcan

@endsection

@push('scripts')
<script>
    document.addEventListener('mousedown', e => {
            const btn = e.target.closest('[data-kt-modal-toggle="#modal_confirm_reminder_done"]');
            if (!btn) return;
            document.getElementById('modal_reminder_done_name').textContent = btn.dataset.confirmName ?? '';
            document.getElementById('form_confirm_reminder_done').action = btn.dataset.confirmUrl ?? '';
        });

        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