@extends('layouts.app')

@section('title', 'Tableau de bord')

@section('breadcrumb')
    <li class="breadcrumb-item active">Tableau de bord</li>
@endsection

@section('content')

{{-- ===================== KPIs PRINCIPAUX ===================== --}}
<div class="row g-3 mb-3">
    <div class="col-xl-3 col-md-6">
        <div class="card kpi-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="kpi-icon bg-success bg-opacity-10 text-success">
                    <i class="bi bi-collection fs-4"></i>
                </div>
                <div>
                    <div class="kpi-value">{{ number_format($totalAnimals) }}</div>
                    <div class="kpi-label">Cheptel total ({{ $activeLots }} lots)</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card kpi-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="kpi-icon bg-danger bg-opacity-10 text-danger">
                    <i class="bi bi-exclamation-triangle fs-4"></i>
                </div>
                <div>
                    <div class="kpi-value">{{ $mortalityRate }}%</div>
                    <div class="kpi-label">Mortalité ce mois</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card kpi-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="kpi-icon bg-warning bg-opacity-10 text-warning">
                    <i class="bi bi-egg-fried fs-4"></i>
                </div>
                <div>
                    <div class="kpi-value">{{ number_format($eggsToday) }}</div>
                    <div class="kpi-label">Œufs collectés aujourd'hui</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card kpi-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="kpi-icon bg-purple bg-opacity-10 text-primary">
                    <i class="bi bi-box-seam fs-4"></i>
                </div>
                <div>
                    <div class="kpi-value">{{ number_format($monthlyProduction) }}</div>
                    <div class="kpi-label">Production ce mois</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ===================== LIGNE FINANCIÈRE ===================== --}}
<div class="row g-3 mb-3">
    <div class="col-xl-4 col-md-6">
        <div class="card kpi-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="kpi-icon bg-primary bg-opacity-10 text-primary">
                    <i class="bi bi-graph-up-arrow fs-4"></i>
                </div>
                <div>
                    <div class="kpi-value text-success">{{ number_format($monthlyRevenue, 0, ',', ' ') }} FCFA</div>
                    <div class="kpi-label">Chiffre d'affaires du mois</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6">
        <div class="card kpi-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="kpi-icon bg-danger bg-opacity-10 text-danger">
                    <i class="bi bi-graph-down-arrow fs-4"></i>
                </div>
                <div>
                    <div class="kpi-value text-danger">{{ number_format($monthlyExpenses, 0, ',', ' ') }} FCFA</div>
                    <div class="kpi-label">Dépenses du mois</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6">
        <div class="card kpi-card h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="kpi-icon bg-{{ $monthlyMargin >= 0 ? 'success' : 'danger' }} bg-opacity-10 text-{{ $monthlyMargin >= 0 ? 'success' : 'danger' }}">
                    <i class="bi bi-cash-stack fs-4"></i>
                </div>
                <div>
                    <div class="kpi-value text-{{ $monthlyMargin >= 0 ? 'success' : 'danger' }}">{{ number_format($monthlyMargin, 0, ',', ' ') }} FCFA</div>
                    <div class="kpi-label">Marge brute du mois</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ===================== INDICATEURS SECONDAIRES ===================== --}}
<div class="row g-3 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="card kpi-card border-start border-warning border-3 h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="kpi-label">Stock bas</div>
                        <small class="text-muted">Articles sous seuil minimum</small>
                    </div>
                    <span class="badge bg-warning fs-6">{{ $lowStockItems }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card kpi-card border-start border-info border-3 h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="kpi-label">Vaccinations à venir</div>
                        <small class="text-muted">Dans les 7 prochains jours</small>
                    </div>
                    <span class="badge bg-info fs-6">{{ $upcomingVaccinations }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card kpi-card border-start border-primary border-3 h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="kpi-label">Tâches en cours</div>
                        <small class="text-muted">En attente ou en cours</small>
                    </div>
                    <span class="badge bg-primary fs-6">{{ $pendingTasks }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card kpi-card border-start border-danger border-3 h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="kpi-label">Alertes non lues</div>
                        <small class="text-muted">Nécessitant attention</small>
                    </div>
                    <span class="badge bg-danger fs-6">{{ $unreadAlerts }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ===================== GRAPHIQUES LIGNE 1 ===================== --}}
<div class="row g-3 mb-4">
    {{-- Revenus vs Dépenses (6 mois) --}}
    <div class="col-xl-8">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-bar-chart-line me-2"></i>Revenus vs Dépenses — 6 derniers mois</h6>
            </div>
            <div class="card-body">
                <canvas id="chartRevDepenses" style="max-height:280px"></canvas>
            </div>
        </div>
    </div>

    {{-- Mortalité (6 mois) --}}
    <div class="col-xl-4">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-activity me-2"></i>Mortalité — 6 mois</h6>
            </div>
            <div class="card-body">
                <canvas id="chartMortalite" style="max-height:280px"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- ===================== GRAPHIQUES LIGNE 2 ===================== --}}
<div class="row g-3 mb-4">
    {{-- Production par type --}}
    <div class="col-xl-6">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-pie-chart me-2"></i>Production par type — mois en cours</h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center">
                @if(count($chartProductionLabels) > 0)
                <canvas id="chartProduction" style="max-height:250px;max-width:350px"></canvas>
                @else
                <p class="text-muted">Aucune production enregistrée ce mois.</p>
                @endif
            </div>
        </div>
    </div>

    {{-- Dépenses par catégorie --}}
    <div class="col-xl-6">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-pie-chart-fill me-2"></i>Dépenses par catégorie — mois en cours</h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center">
                @if(count($chartExpCatLabels) > 0)
                <canvas id="chartDepCat" style="max-height:250px;max-width:350px"></canvas>
                @else
                <p class="text-muted">Aucune dépense enregistrée ce mois.</p>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- ===================== STOCK CRITIQUE + TÂCHES EN RETARD ===================== --}}
<div class="row g-3 mb-4">
    {{-- Stock critique --}}
    <div class="col-xl-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="bi bi-exclamation-diamond text-warning me-2"></i>Stock critique</h6>
                <a href="{{ route('stock-items.index') }}" class="btn btn-sm btn-outline-warning">Voir le stock</a>
            </div>
            <div class="card-body p-0">
                @forelse($criticalStockList as $item)
                <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
                    <div>
                        <div class="fw-semibold">{{ $item->name }}</div>
                        <small class="text-muted">Seuil : {{ $item->minimum_quantity }} {{ $item->unit }}</small>
                    </div>
                    <span class="badge bg-danger">{{ $item->current_quantity }} {{ $item->unit }}</span>
                </div>
                @empty
                <div class="px-3 py-3 text-muted text-center">
                    <i class="bi bi-check-circle text-success"></i> Aucun article en rupture.
                </div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Tâches en retard --}}
    <div class="col-xl-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="bi bi-clock-history text-danger me-2"></i>Tâches en retard</h6>
                <a href="{{ route('tasks.index') }}" class="btn btn-sm btn-outline-danger">Toutes les tâches</a>
            </div>
            <div class="card-body p-0">
                @forelse($overdueTasks as $task)
                <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
                    <div>
                        <div class="fw-semibold">{{ $task->title }}</div>
                        <small class="text-muted">Assigné à : {{ $task->assignee->name ?? 'N/A' }}</small>
                    </div>
                    <div class="text-end">
                        <div class="badge bg-{{ $task->priority === 'urgent' ? 'danger' : ($task->priority === 'high' ? 'warning' : 'secondary') }}">
                            {{ ucfirst($task->priority) }}
                        </div>
                        <div><small class="text-danger">{{ $task->due_date->format('d/m/Y') }}</small></div>
                    </div>
                </div>
                @empty
                <div class="px-3 py-3 text-muted text-center">
                    <i class="bi bi-check-circle text-success"></i> Aucune tâche en retard.
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- ===================== CHEPTEL + ALERTES + VENTES ===================== --}}
<div class="row g-3 mb-4">
    {{-- Cheptel par espèce --}}
    <div class="col-xl-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="bi bi-collection me-2"></i>Cheptel par espèce</h6>
                <a href="{{ route('lots.index') }}" class="btn btn-sm btn-outline-success">Lots</a>
            </div>
            <div class="card-body">
                @forelse($lotsBySpecies as $item)
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span>{{ $item->species->name ?? 'N/A' }}</span>
                    <span class="badge bg-success">{{ number_format($item->total) }} têtes</span>
                </div>
                @empty
                <p class="text-muted mb-0">Aucun lot actif.</p>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Alertes récentes --}}
    <div class="col-xl-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="bi bi-bell me-2"></i>Alertes récentes</h6>
                <a href="{{ route('alerts.index') }}" class="btn btn-sm btn-outline-danger">Toutes</a>
            </div>
            <div class="card-body">
                @forelse($recentAlerts as $alert)
                <div class="border rounded mb-2 py-2 px-3 bg-light">
                    <div class="d-flex justify-content-between">
                        <strong class="small">{{ $alert->title }}</strong>
                        <small class="text-muted">{{ $alert->created_at->diffForHumans() }}</small>
                    </div>
                    <small class="text-muted">{{ Str::limit($alert->message, 70) }}</small>
                </div>
                @empty
                <p class="text-muted mb-0">Aucune alerte.</p>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Dernières ventes --}}
    <div class="col-xl-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="bi bi-cart me-2"></i>Dernières ventes</h6>
                <a href="{{ route('sales.index') }}" class="btn btn-sm btn-outline-primary">Toutes</a>
            </div>
            <div class="card-body p-0">
                @forelse($recentSales as $sale)
                <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
                    <div>
                        <a href="{{ route('sales.show', $sale) }}" class="fw-semibold text-decoration-none">{{ $sale->code }}</a>
                        <div><small class="text-muted">{{ $sale->customer->name ?? 'Anonyme' }}</small></div>
                    </div>
                    <div class="text-end">
                        <div class="small fw-semibold">{{ number_format($sale->total_amount, 0, ',', ' ') }} F</div>
                        <span class="badge bg-{{ $sale->status === 'livree' ? 'success' : ($sale->status === 'annulee' ? 'danger' : 'warning') }} small">
                            {{ ucfirst($sale->status) }}
                        </span>
                    </div>
                </div>
                @empty
                <div class="px-3 py-3 text-muted text-center">Aucune vente.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function () {
    // Palette de couleurs
    const COLORS = [
        '#198754','#0d6efd','#ffc107','#dc3545','#0dcaf0',
        '#6f42c1','#fd7e14','#20c997','#6c757d','#d63384'
    ];

    // 1. Revenus vs Dépenses (6 mois)
    const ctxFinance = document.getElementById('chartRevDepenses');
    if (ctxFinance) {
        new Chart(ctxFinance, {
            type: 'bar',
            data: {
                labels: @json($chartMonths),
                datasets: [
                    {
                        label: 'Revenus (FCFA)',
                        data: @json($chartRevenue),
                        backgroundColor: 'rgba(25,135,84,0.75)',
                        borderColor: '#198754',
                        borderWidth: 1,
                    },
                    {
                        label: 'Dépenses (FCFA)',
                        data: @json($chartExpenses),
                        backgroundColor: 'rgba(220,53,69,0.75)',
                        borderColor: '#dc3545',
                        borderWidth: 1,
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'top' } },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: v => new Intl.NumberFormat('fr-FR').format(v) + ' F'
                        }
                    }
                }
            }
        });
    }

    // 2. Mortalité (6 mois)
    const ctxMort = document.getElementById('chartMortalite');
    if (ctxMort) {
        new Chart(ctxMort, {
            type: 'line',
            data: {
                labels: @json($chartMonths),
                datasets: [{
                    label: 'Mortalité (têtes)',
                    data: @json($chartMortality),
                    backgroundColor: 'rgba(220,53,69,0.15)',
                    borderColor: '#dc3545',
                    borderWidth: 2,
                    pointBackgroundColor: '#dc3545',
                    fill: true,
                    tension: 0.3,
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { display: false } },
                scales: { y: { beginAtZero: true } }
            }
        });
    }

    // 3. Production par type (doughnut)
    const ctxProd = document.getElementById('chartProduction');
    if (ctxProd) {
        new Chart(ctxProd, {
            type: 'doughnut',
            data: {
                labels: @json($chartProductionLabels),
                datasets: [{
                    data: @json($chartProductionData),
                    backgroundColor: COLORS.slice(0, {{ count($chartProductionLabels) }}),
                    borderWidth: 2,
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'bottom' } }
            }
        });
    }

    // 4. Dépenses par catégorie (doughnut)
    const ctxDep = document.getElementById('chartDepCat');
    if (ctxDep) {
        new Chart(ctxDep, {
            type: 'doughnut',
            data: {
                labels: @json($chartExpCatLabels),
                datasets: [{
                    data: @json($chartExpCatData),
                    backgroundColor: COLORS.slice(0, {{ count($chartExpCatLabels) }}),
                    borderWidth: 2,
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'bottom' } }
            }
        });
    }
})();
</script>
@endpush