{{-- resources/views/livewire/crm-dashboard.blade.php --}}
<div class="dx">
    {{-- Ressources --}}
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('css/dashboard-global.css') }}">
    <link rel="stylesheet" href="{{ asset('css/ca-evolution.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <div wire:loading>
        <div class="loading-overlay"><div class="spinner"></div></div>
    </div>

    @php
        $activeFiltersCount = 0;
        if (!empty($centre_id)) $activeFiltersCount++;
        if (!empty($conseiller_id)) $activeFiltersCount++;
        if (!empty($annee_id)) $activeFiltersCount++;
        if (!empty($source_id)) $activeFiltersCount++;
        if ($periode !== 'mois') $activeFiltersCount++;
    @endphp

    <div class="container-fluid" style="max-width:1600px;margin:0 auto;padding:20px 24px">
        {{-- HEADER --}}
        <div class="dx-topbar" style="margin-bottom:20px">
            <div class="dx-brand">
                <div class="dx-mark">P</div>
                <div>
                    <h1>Indicateurs CRM</h1>
                    <p>Suivi du pipeline commercial, des rendez-vous et des conversions</p>
                </div>
            </div>
            <div class="dx-spacer"></div>
            <div class="dx-year"><i class="fas fa-calendar-alt"></i> <span class="y">{{ Carbon\Carbon::now()->format('d/m/Y') }}</span></div>
          
        </div>

        {{-- FILTRES --}}
        <div class="dx-filterbar">
            <button type="button" class="dx-filter-toggle" id="dxFilterToggle">
                <i class="fas fa-sliders-h"></i> Filtres
                @if($activeFiltersCount > 0)
                    <span class="dx-filter-count">{{ $activeFiltersCount }}</span>
                @endif
                <i class="fas fa-chevron-down" style="font-size:10px; margin-left:6px;"></i>
            </button>
            @if($centre_id) <span class="dx-chip">{{ getCenterName($centre_id) }}</span> @endif
            @if($conseiller_id) <span class="dx-chip">{{ getNomConseiller($conseiller_id) }}</span> @endif
            @if($annee_id) <span class="dx-chip">{{ getAnneeName($annee_id) }}</span> @endif
            @if($source_id) <span class="dx-chip">{{ $source_id }}</span> @endif
        </div>

        {{-- PANEL FILTRES --}}
        <form wire:submit.prevent="filtered">
            <div class="dx-filter-panel" id="dxFilterPanel">
                <div class="dx-grid-f">
                    <div><label class="dx-label">Période</label>
                        <select wire:model="periode" wire:change="updatePeriode" class="dx-select">
                            <option value="aujourdhui">Aujourd'hui</option>
                            <option value="semaine">Cette semaine</option>
                            <option value="mois">Ce mois</option>
                            <option value="personnalise">Personnalisée</option>
                        </select>
                    </div>
                    @if($periode === 'personnalise')
                        <div><label class="dx-label">Date début</label><input type="date" wire:model="date_debut" class="dx-select" style="appearance:auto;background-image:none;"></div>
                        <div><label class="dx-label">Date fin</label><input type="date" wire:model="date_fin" class="dx-select" style="appearance:auto;background-image:none;"></div>
                    @endif
                    <div><label class="dx-label">Centre</label>
                        <select wire:model="centre_id" class="dx-select">
                            <option value="">Tous</option>user_ref_id
                            @foreach($centres as $ct)
                                <option value="{{ $ct->ct_id }}">{{ $ct->ct_nom }}</option>
                            @endforeach
                        </select>
                    </div>
                   <div>
                        <label class="dx-label">Conseiller</label>
                        <select wire:model="conseiller_id" class="dx-select">
                            <option value="">Tous</option>
                            @foreach($conseillers as $u)
                                <option value="{{ $u->user_id }}">
                                    {{ $u->membrePersonnel ? $u->membrePersonnel->dir_prenom . ' ' . $u->membrePersonnel->dir_nom : $u->user_nom }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div><label class="dx-label">Année scolaire</label>
                        <select wire:model="annee_id" class="dx-select">
                            <option value="">Toutes</option>
                            @foreach($annees as $an)
                                <option value="{{ $an->annee_id }}">{{ $an->annee_nom }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div><label class="dx-label">Source</label>
                        <select wire:model="source_id" class="dx-select">
                            <option value="">Toutes</option>
                            <option value="Internet : Facebook">Internet : Facebook</option>
                            <option value="Autre : WATTSAPP">Autre : WATTSAPP</option>
                            <option value="Internet : Instagram">Internet : Instagram</option>
                            <option value="Internet : Google">Internet : Google</option>
                            <option value="Internet : linkedin">Internet : linkedin</option>
                        </select>
                    </div>
                </div>
                <div class="dx-filter-foot">
                    <button type="button" class="dx-reset" wire:click="resetFilters">Réinitialiser</button>
                    <button type="submit" class="dx-btn"><i class="fas fa-check"></i> Appliquer</button>
                </div>
            </div>
        </form>

        {{-- KPI --}}
        <div class="dx-kpis" style="margin-bottom:24px">
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">Total préinscriptions</div><div class="dx-icbox ic-teal"><i class="fas fa-user-plus"></i></div></div>
                <div class="val mono">{{ number_format($total_preinscriptions, 0, ',', ' ') }}</div>
                <div class="foot"><span class="dx-trend t-flat">Cumul</span></div>
            </div>
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">Taux de conversion</div><div class="dx-icbox ic-green"><i class="fas fa-percent"></i></div></div>
                <div class="val mono">{{ number_format($taux_conversion, 1) }}<span class="unit">%</span></div>
                <div class="foot"><span class="dx-trend t-up">Inscrits / total</span></div>
            </div>
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">Taux de perte</div><div class="dx-icbox ic-amber"><i class="fas fa-percent"></i></div></div>
                <div class="val mono">{{ number_format($taux_perte, 1) }}<span class="unit">%</span></div>
                <div class="foot"><span class="dx-trend t-down">Perdus / total</span></div>
            </div>
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">Délai moyen → inscription</div><div class="dx-icbox ic-purple"><i class="fas fa-clock"></i></div></div>
                <div class="val mono">{{ number_format($delai_moyen_inscription, 1) }}<span class="unit">j</span></div>
                <div class="foot"><span class="dx-trend t-flat">Préinscription → inscrit</span></div>
            </div>
        </div>

        {{-- STATUTS PIPELINE --}}
        <div class="dx-card pad" style="margin-bottom:24px">
            <div class="dx-sec-head"><h2>Pipeline — répartition par statut</h2></div>
            <div class="table-responsive">
                <table class="dx-lead" style="width:100%">
                    <thead>
                        <tr><th>Statut</th><th>Nombre</th><th>Part</th></tr>
                    </thead>
                    <tbody>
                        @forelse($statuts_repartition as $stat)
                            <tr>
                                <td><span style="display:inline-block;width:12px;height:12px;border-radius:3px;background:{{ $stat->stp_coleur }};margin-right:6px;"></span>{{ $stat->stp_libelle }}</td>
                                <td class="dx-r">{{ number_format($stat->total, 0, ',', '.') }}</td>
                                <td class="dx-r">{{ $total_preinscriptions > 0 ? number_format(($stat->total / $total_preinscriptions) * 100, 1, ',', '.') : '0,0' }} %</td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="dx-empty">Aucun statut</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- PERFORMANCE TEMPORELLE --}}
        <div class="dx-kpis" style="margin-bottom:24px">
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">Nouveaux aujourd'hui</div><div class="dx-icbox ic-amber"><i class="fas fa-calendar-day"></i></div></div>
                <div class="val mono">{{ number_format($nouveaux_aujourdhui, 0, ',', ' ') }}</div>
                <div class="foot"><span class="dx-trend t-flat">Préinscriptions</span></div>
            </div>
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">Nouveaux cette semaine</div><div class="dx-icbox ic-amber"><i class="fas fa-calendar-week"></i></div></div>
                <div class="val mono">{{ number_format($nouveaux_semaine, 0, ',', ' ') }}</div>
                <div class="foot"><span class="dx-trend t-flat">Préinscriptions</span></div>
            </div>
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">Nouveaux ce mois</div><div class="dx-icbox ic-amber"><i class="fas fa-calendar-month"></i></div></div>
                <div class="val mono">{{ number_format($nouveaux_mois, 0, ',', ' ') }}</div>
                <div class="foot"><span class="dx-trend t-flat">Préinscriptions</span></div>
            </div>
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">Inscriptions ce mois</div><div class="dx-icbox ic-green"><i class="fas fa-check-circle"></i></div></div>
                <div class="val mono">{{ number_format($inscriptions_mois, 0, ',', ' ') }}</div>
                <div class="foot">
                    <span class="dx-trend {{ $evolution_inscriptions >= 0 ? 't-up' : 't-down' }}">
                        <i class="fas fa-arrow-{{ $evolution_inscriptions >= 0 ? 'up' : 'down' }}"></i>
                        {{ number_format(abs($evolution_inscriptions), 1) }}%
                    </span>
                    <span class="dx-vsn">vs mois précédent</span>
                </div>
            </div>
        </div>

        {{-- RDV --}}
        <div class="dx-kpis" style="margin-bottom:24px">
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">RDV aujourd'hui</div><div class="dx-icbox ic-purple"><i class="fas fa-calendar-check"></i></div></div>
                <div class="val mono">{{ number_format($rdv_aujourdhui, 0, ',', ' ') }}</div>
                <div class="foot"><span class="dx-trend t-flat">Planifiés</span></div>
            </div>
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">RDV cette semaine</div><div class="dx-icbox ic-purple"><i class="fas fa-calendar-plus"></i></div></div>
                <div class="val mono">{{ number_format($rdv_semaine, 0, ',', ' ') }}</div>
                <div class="foot"><span class="dx-trend t-flat">Planifiés</span></div>
            </div>
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">Taux réalisation RDV</div><div class="dx-icbox ic-green"><i class="fas fa-percent"></i></div></div>
                <div class="val mono">{{ number_format($taux_realisation_rdv, 1) }}<span class="unit">%</span></div>
                <div class="foot"><span class="dx-trend t-up">Réalisés / (réalisés+annulés+absents)</span></div>
            </div>
            <div class="dx-card dx-k">
                <div class="top"><div class="lab">RDV réalisés / annulés / absents</div></div>
                <div class="val mono" style="font-size:16px">
                    {{ number_format($rdv_realises_mois, 0, ',', ' ') }} / {{ number_format($rdv_annules_mois, 0, ',', ' ') }} / {{ number_format($rdv_absents_mois, 0, ',', ' ') }}
                </div>
                <div class="foot"><span class="dx-trend t-flat">Ce mois</span></div>
            </div>
        </div>

        {{-- Évolution mensuelle --}}
     
<div class="pb-panel" style="margin-bottom:24px">
    <div class="pb-panel-header">
        <div class="pb-panel-title"><div class="pb-panel-icon pb-icon-b"><i class="fas fa-chart-line"></i></div><div><span class="pb-panel-name">Évolution mensuelle des inscriptions</span></div></div>
        <span class="pb-panel-badge">Ligne</span>
    </div>
    @if(count($labels_evolution) > 0)
        <div wire:ignore style="height:250px"><canvas id="evolution-inscriptions" style="width:100%;height:100%"></canvas></div>
    @else
        <div class="dx-empty" style="padding:30px;text-align:center;color:#9ca3af;">
            <i class="fas fa-chart-line" style="font-size:32px;display:block;margin-bottom:12px;"></i>
            Aucune donnée d'inscription sur les 12 derniers mois
        </div>
    @endif
</div>

        {{-- Motifs de perte --}}
        <div class="dx-card pad" style="margin-bottom:24px">
            <div class="dx-sec-head"><h2>Motifs de perte</h2></div>
            <div class="table-responsive">
                <table class="dx-lead" style="width:100%">
                    <thead><tr><th>Motif</th><th>Nombre</th><th>Part</th></tr></thead>
                    <tbody>
                        @forelse($motifs_perte as $m)
                            <tr>
                                <td>{{ $m->hs_motif_perte }}</td>
                                <td class="dx-r">{{ number_format($m->total, 0, ',', '.') }}</td>
                                <td class="dx-r">{{ $total_preinscriptions > 0 ? number_format(($m->total / $total_preinscriptions) * 100, 1, ',', '.') : '0,0' }} %</td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="dx-empty">Aucun motif renseigné</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Performance par conseiller --}}
        <div class="dx-card pad" style="margin-bottom:24px">
            <div class="dx-sec-head"><h2>Performance par conseiller</h2></div>
            <div class="table-responsive">
                <table class="dx-lead" style="width:100%">
                    <thead><tr><th>Conseiller</th><th>Prospects assignés</th><th>Inscrits</th><th>Taux conversion</th></tr></thead>
                    <tbody>
                        @forelse($performance_conseillers as $c)
                            <tr>
                                <td>{{ $c->conseiller }}</td>
                                <td class="dx-r">{{ number_format($c->prospects_assignes, 0, ',', '.') }}</td>
                                <td class="dx-r">{{ number_format($c->inscrits, 0, ',', '.') }}</td>
                                <td class="dx-r">{{ number_format($c->taux_conversion, 1) }}%</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="dx-empty">Aucun conseiller</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <script>
        // Toggle filtres
        const toggleBtn = document.getElementById('dxFilterToggle');
        const filterPanel = document.getElementById('dxFilterPanel');
        if(toggleBtn && filterPanel) toggleBtn.addEventListener('click', () => filterPanel.classList.toggle('open'));

        // Graphique évolution mensuelle
        (function(){
            const labels = @json($labels_evolution);
            const data = @json($data_evolution);
            if (labels.length && data.length) {
                const ctx = document.getElementById('evolution-inscriptions').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Inscriptions',
                            data: data,
                            borderColor: '#6366f1',
                            backgroundColor: 'rgba(99,102,241,0.1)',
                            fill: true,
                            tension: 0.3,
                            pointRadius: 3,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: { callbacks: { label: c => ` ${c.dataset.label}: ${Number(c.raw).toLocaleString('fr-FR')}` } }
                        },
                        scales: {
                            x: { grid: { display: false }, ticks: { font: { size: 10 }, color: '#94a3b8' } },
                            y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,.04)' }, ticks: { font: { size: 10 }, color: '#94a3b8', callback: v => Number(v).toLocaleString('fr-FR') } }
                        }
                    }
                });
            }
        })();
    </script>
</div>