@extends('layouts.app')

@section('title', 'Statistiques Détaillées - Administration')

@section('content')
<div class="container-fluid py-4">
    <!-- En-tête -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="fw-bold text-dark mb-1">
                        <i class="fas fa-chart-line text-primary me-3"></i>
                        Statistiques Détaillées
                    </h2>
                    <p class="text-muted mb-0">Analyse complète de la plateforme CayorCity</p>
                </div>
                <div>
                    <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left me-2"></i>Retour
                    </a>
                    <button class="btn btn-outline-primary" onclick="window.print()">
                        <i class="fas fa-print me-2"></i>Imprimer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistiques générales -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary-soft rounded-circle p-3">
                                <i class="fas fa-users fa-2x text-primary"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h3 class="fw-bold mb-1">{{ number_format($stats['totalUsers']) }}</h3>
                            <p class="text-muted mb-1">Utilisateurs totaux</p>
                            <small class="text-success">
                                <i class="fas fa-arrow-up me-1"></i>
                                +{{ $stats['usersThisMonth'] }} ce mois
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success-soft rounded-circle p-3">
                                <i class="fas fa-building fa-2x text-success"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h3 class="fw-bold mb-1">{{ number_format($stats['totalAgencies']) }}</h3>
                            <p class="text-muted mb-1">Agences</p>
                            <small class="text-info">
                                <i class="fas fa-certificate me-1"></i>
                                {{ $stats['approvalRates']['agencies'] }}% approuvées
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning-soft rounded-circle p-3">
                                <i class="fas fa-home fa-2x text-warning"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h3 class="fw-bold mb-1">{{ number_format($stats['totalProperties']) }}</h3>
                            <p class="text-muted mb-1">Propriétés</p>
                            <small class="text-success">
                                <i class="fas fa-arrow-up me-1"></i>
                                +{{ $stats['propertiesThisMonth'] }} ce mois
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info-soft rounded-circle p-3">
                                <i class="fas fa-envelope fa-2x text-info"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h3 class="fw-bold mb-1">{{ number_format($stats['totalContacts']) }}</h3>
                            <p class="text-muted mb-1">Messages</p>
                            <small class="text-primary">
                                <i class="fas fa-plus me-1"></i>
                                {{ $stats['recentActivity']['new_contacts'] }} récents
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Graphiques et analyses -->
    <div class="row mb-4">
        <!-- Évolution des utilisateurs -->
        <div class="col-lg-8 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pt-4">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-chart-line text-primary me-2"></i>
                        Évolution des Utilisateurs (12 derniers mois)
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="usersChart" height="100"></canvas>
                </div>
            </div>
        </div>
        
        <!-- Répartition par type -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pt-4">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-chart-pie text-success me-2"></i>
                        Répartition des Utilisateurs
                    </h5>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center">
                    <canvas id="userTypesChart" width="200" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistiques des propriétés -->
    <div class="row mb-4">
        <!-- Propriétés par type -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pt-4">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-chart-bar text-warning me-2"></i>
                        Propriétés par Type
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="propertiesTypeChart" height="100"></canvas>
                </div>
            </div>
        </div>
        
        <!-- Top villes -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pt-4">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-map-marker-alt text-danger me-2"></i>
                        Top 10 des Villes
                    </h5>
                </div>
                <div class="card-body">
                    @if($stats['propertiesByCity']->count() > 0)
                        @foreach($stats['propertiesByCity'] as $city)
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="d-flex align-items-center">
                                    <div class="bg-primary rounded-circle me-3" style="width: 8px; height: 8px;"></div>
                                    <span class="fw-semibold">{{ $city->city }}</span>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-primary">{{ $city->count }}</span>
                                </div>
                            </div>
                            <div class="progress mb-3" style="height: 4px;">
                                <div class="progress-bar bg-primary" style="width: {{ ($city->count / $stats['propertiesByCity']->first()->count) * 100 }}%"></div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-city fa-3x text-muted mb-3"></i>
                            <p class="text-muted">Aucune donnée de ville disponible</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Activité récente et agences top -->
    <div class="row mb-4">
        <!-- Activité récente -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pt-4">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-clock text-info me-2"></i>
                        Activité Récente (30 derniers jours)
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6 mb-3">
                            <div class="text-center p-3 bg-light rounded">
                                <h4 class="text-primary fw-bold">{{ $stats['recentActivity']['new_users'] }}</h4>
                                <small class="text-muted">Nouveaux utilisateurs</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="text-center p-3 bg-light rounded">
                                <h4 class="text-success fw-bold">{{ $stats['recentActivity']['new_agencies'] }}</h4>
                                <small class="text-muted">Nouvelles agences</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="text-center p-3 bg-light rounded">
                                <h4 class="text-warning fw-bold">{{ $stats['recentActivity']['new_properties'] }}</h4>
                                <small class="text-muted">Nouvelles propriétés</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="text-center p-3 bg-light rounded">
                                <h4 class="text-info fw-bold">{{ $stats['recentActivity']['new_contacts'] }}</h4>
                                <small class="text-muted">Nouveaux messages</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Agences les plus actives -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pt-4">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-trophy text-warning me-2"></i>
                        Top 10 Agences les Plus Actives
                    </h5>
                </div>
                <div class="card-body">
                    @if($stats['topAgencies']->count() > 0)
                        @foreach($stats['topAgencies'] as $index => $agency)
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-{{ $index < 3 ? 'warning' : 'secondary' }} me-3">{{ $index + 1 }}</span>
                                    <div>
                                        <div class="fw-semibold">{{ $agency->name }}</div>
                                        <small class="text-muted">{{ $agency->user_name }}</small>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-primary">{{ $agency->properties_count }} propriétés</span>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-building fa-3x text-muted mb-3"></i>
                            <p class="text-muted">Aucune agence disponible</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Statistiques financières -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-4">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-money-bill-wave text-success me-2"></i>
                        Analyse des Prix
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 mb-3">
                            <div class="text-center p-4 bg-gradient-primary text-white rounded">
                                <h3 class="fw-bold mb-1">{{ number_format($stats['priceStats']['avg_sale_price'] ?? 0, 0, ',', ' ') }} FCFA</h3>
                                <p class="mb-0 opacity-75">Prix moyen vente</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-3">
                            <div class="text-center p-4 bg-gradient-success text-white rounded">
                                <h3 class="fw-bold mb-1">{{ number_format($stats['priceStats']['avg_rent_price'] ?? 0, 0, ',', ' ') }} FCFA</h3>
                                <p class="mb-0 opacity-75">Prix moyen location</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-3">
                            <div class="text-center p-4 bg-gradient-warning text-white rounded">
                                <h3 class="fw-bold mb-1">{{ number_format($stats['priceStats']['max_price'] ?? 0, 0, ',', ' ') }} FCFA</h3>
                                <p class="mb-0 opacity-75">Prix maximum</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-3">
                            <div class="text-center p-4 bg-gradient-info text-white rounded">
                                <h3 class="fw-bold mb-1">{{ number_format($stats['priceStats']['min_price'] ?? 0, 0, ',', ' ') }} FCFA</h3>
                                <p class="mb-0 opacity-75">Prix minimum</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Taux d'approbation -->
    <div class="row mb-4">
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pt-4">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-check-circle text-success me-2"></i>
                        Taux d'Approbation
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="fw-semibold">Propriétés</span>
                            <span class="fw-bold text-success">{{ $stats['approvalRates']['properties'] }}%</span>
                        </div>
                        <div class="progress mb-3" style="height: 10px;">
                            <div class="progress-bar bg-success" style="width: {{ $stats['approvalRates']['properties'] }}%"></div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="fw-semibold">Agences</span>
                            <span class="fw-bold text-primary">{{ $stats['approvalRates']['agencies'] }}%</span>
                        </div>
                        <div class="progress mb-3" style="height: 10px;">
                            <div class="progress-bar bg-primary" style="width: {{ $stats['approvalRates']['agencies'] }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Répartition vente/location -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pt-4">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-exchange-alt text-primary me-2"></i>
                        Types de Transaction
                    </h5>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center">
                    <canvas id="transactionChart" width="200" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.bg-primary-soft { background-color: rgba(13, 110, 253, 0.1) !important; }
.bg-success-soft { background-color: rgba(25, 135, 84, 0.1) !important; }
.bg-warning-soft { background-color: rgba(255, 193, 7, 0.1) !important; }
.bg-info-soft { background-color: rgba(13, 202, 240, 0.1) !important; }

.bg-gradient-primary {
    background: linear-gradient(45deg, #007bff, #0056b3) !important;
}
.bg-gradient-success {
    background: linear-gradient(45deg, #28a745, #1e7e34) !important;
}
.bg-gradient-warning {
    background: linear-gradient(45deg, #ffc107, #e0a800) !important;
}
.bg-gradient-info {
    background: linear-gradient(45deg, #17a2b8, #117a8b) !important;
}

.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

@media print {
    .btn { display: none !important; }
    .navbar { display: none !important; }
    .footer { display: none !important; }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Données des graphiques
    const usersByMonth = @json($stats['usersByMonth']);
    const propertiesByType = @json($stats['propertiesByType']);
    const propertiesByTransaction = @json($stats['propertiesByTransaction']);
    
    // Graphique évolution utilisateurs
    if (usersByMonth && usersByMonth.length > 0) {
        const usersCtx = document.getElementById('usersChart').getContext('2d');
        new Chart(usersCtx, {
            type: 'line',
            data: {
                labels: usersByMonth.map(item => {
                    const [year, month] = item.month.split('-');
                    return new Date(year, month - 1).toLocaleDateString('fr-FR', { month: 'short', year: 'numeric' });
                }),
                datasets: [{
                    label: 'Total utilisateurs',
                    data: usersByMonth.map(item => item.count),
                    borderColor: '#007bff',
                    backgroundColor: 'rgba(0, 123, 255, 0.1)',
                    tension: 0.4,
                    fill: true
                }, {
                    label: 'Agences',
                    data: usersByMonth.map(item => item.agencies),
                    borderColor: '#28a745',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    tension: 0.4
                }, {
                    label: 'Clients',
                    data: usersByMonth.map(item => item.clients),
                    borderColor: '#17a2b8',
                    backgroundColor: 'rgba(23, 162, 184, 0.1)',
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
    
    // Graphique répartition utilisateurs
    const userTypesCtx = document.getElementById('userTypesChart').getContext('2d');
    new Chart(userTypesCtx, {
        type: 'doughnut',
        data: {
            labels: ['Clients', 'Agences'],
            datasets: [{
                data: [{{ $stats['totalClients'] }}, {{ $stats['totalAgencies'] }}],
                backgroundColor: ['#17a2b8', '#28a745'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
    
    // Graphique propriétés par type
    if (propertiesByType && propertiesByType.length > 0) {
        const propertiesTypeCtx = document.getElementById('propertiesTypeChart').getContext('2d');
        new Chart(propertiesTypeCtx, {
            type: 'bar',
            data: {
                labels: propertiesByType.map(item => item.name),
                datasets: [{
                    label: 'Nombre de propriétés',
                    data: propertiesByType.map(item => item.count),
                    backgroundColor: ['#007bff', '#28a745', '#ffc107', '#dc3545', '#6f42c1', '#fd7e14'],
                    borderRadius: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
    
    // Graphique types de transaction
    if (propertiesByTransaction && propertiesByTransaction.length > 0) {
        const transactionCtx = document.getElementById('transactionChart').getContext('2d');
        new Chart(transactionCtx, {
            type: 'pie',
            data: {
                labels: propertiesByTransaction.map(item => item.transaction_type === 'sale' ? 'Vente' : 'Location'),
                datasets: [{
                    data: propertiesByTransaction.map(item => item.count),
                    backgroundColor: ['#ffc107', '#17a2b8'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
});
</script>
@endpush