@extends('layouts.app')

@section('title', 'Estatísticas do Mercado - ' . $mercado->name)

@section('content')
<div class="sinagem-main">
    <div class="s-card">
        <div class="s-card-header">
            <h4 class="s-card-title">
                <i class="fas fa-chart-bar"></i>
                Estatísticas do Mercado: {{ $mercado->name }}
            </h4>
            <div class="d-flex gap-2">
                <a href="{{ route('mercado.mercados.show', $mercado) }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left"></i>
                    Voltar
                </a>
            </div>
        </div>

        <div class="s-card-body">
            <!-- KPI Cards -->
            <div class="row g-3 mb-4">
                <div class="col-md-3">
                    <div class="kpi-card green">
                        <div class="kpi-info">
                            <h3>Total de Bancadas</h3>
                            <div class="kpi-value">{{ $stats['total_stalls'] }}</div>
                        </div>
                        <div class="kpi-icon">
                            <i class="fas fa-grid-3x3-gap"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="kpi-card orange">
                        <div class="kpi-info">
                            <h3>Bancadas Ocupadas</h3>
                            <div class="kpi-value">{{ $stats['occupied_stalls'] }}</div>
                            <small class="text-muted">{{ $stats['occupation_rate'] }}% de ocupação</small>
                        </div>
                        <div class="kpi-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="kpi-card dark">
                        <div class="kpi-info">
                            <h3>Total de Comerciantes</h3>
                            <div class="kpi-value">{{ $stats['total_merchants'] }}</div>
                        </div>
                        <div class="kpi-icon">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="kpi-card yellow">
                        <div class="kpi-info">
                            <h3>Receita Mensal</h3>
                            <div class="kpi-value">KZ {{ number_format($stats['monthly_revenue'], 0, ',', '.') }}</div>
                        </div>
                        <div class="kpi-icon">
                            <i class="fas fa-money-bill-wave"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Gráficos -->
            <div class="row g-3">
                <!-- Gráfico de Ocupação (Pizza) -->
                <div class="col-md-6">
                    <div class="s-card">
                        <div class="s-card-header">
                            <div class="s-card-title">
                                <i class="fas fa-chart-pie"></i>
                                Distribuição das Bancadas
                            </div>
                        </div>
                        <div class="s-card-body">
                            <div class="chart-container" style="height: 300px;">
                                <canvas id="occupationChart"></canvas>
                            </div>
                            <div class="chart-legend mt-3">
                                <div class="chart-legend-item">
                                    <span class="chart-legend-dot" style="background: #27ae60;"></span>
                                    <span>Disponíveis ({{ $stats['available_stalls'] }})</span>
                                </div>
                                <div class="chart-legend-item">
                                    <span class="chart-legend-dot" style="background: #e03030;"></span>
                                    <span>Ocupadas ({{ $stats['occupied_stalls'] }})</span>
                                </div>
                                <div class="chart-legend-item">
                                    <span class="chart-legend-dot" style="background: #f39c12;"></span>
                                    <span>Manutenção ({{ $stats['maintenance_stalls'] }})</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Gráfico de Taxa de Ocupação (Barra Horizontal) -->
                <div class="col-md-6">
                    <div class="s-card">
                        <div class="s-card-header">
                            <div class="s-card-title">
                                <i class="fas fa-chart-simple"></i>
                                Taxa de Ocupação
                            </div>
                        </div>
                        <div class="s-card-body">
                            <div class="occupation-gauge">
                                <div class="gauge-value">{{ $stats['occupation_rate'] }}%</div>
                                <div class="progress-bar-gauge">
                                    <div class="progress-fill-gauge" style="width: {{ $stats['occupation_rate'] }}%"></div>
                                </div>
                                <div class="gauge-labels">
                                    <span>0%</span>
                                    <span>25%</span>
                                    <span>50%</span>
                                    <span>75%</span>
                                    <span>100%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Gráfico de Evolução Mensal (Linha) -->
                <div class="col-md-12">
                    <div class="s-card">
                        <div class="s-card-header">
                            <div class="s-card-title">
                                <i class="fas fa-chart-line"></i>
                                Evolução da Receita Mensal
                            </div>
                            <div class="d-flex gap-2">
                                <select id="yearSelect" class="form-control form-control-sm" style="width: auto;">
                                    <option value="2024">2024</option>
                                    <option value="2025">2025</option>
                                    <option value="2026" selected>2026</option>
                                </select>
                            </div>
                        </div>
                        <div class="s-card-body">
                            <div class="chart-container" style="height: 350px;">
                                <canvas id="monthlyRevenueChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Top Comerciantes -->
                <div class="col-md-6">
                    <div class="s-card">
                        <div class="s-card-header">
                            <div class="s-card-title">
                                <i class="fas fa-trophy"></i>
                                Top 5 Comerciantes por Pagamento
                            </div>
                        </div>
                        <div class="s-card-body p-0">
                            <div class="table-responsive">
                                <table class="s-table">
                                    <thead>
                                        <tr>
                                            <th>Comerciante</th>
                                            <th class="text-end">Total Pago</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($topMerchants ?? [] as $merchant)
                                        <tr>
                                            <td>{{ $merchant['name'] }}</td>
                                            <td class="text-end fw-600 text-success">KZ {{ number_format($merchant['total'], 2, ',', '.') }}</td>
                                        </tr>
                                        @empty
                                            <tr><td colspan="2" class="text-center">Nenhum dado disponível</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Top Fiscais -->
                <div class="col-md-6">
                    <div class="s-card">
                        <div class="s-card-header">
                            <div class="s-card-title">
                                <i class="fas fa-user-shield"></i>
                                Top 5 Fiscais por Atividade
                            </div>
                        </div>
                        <div class="s-card-body p-0">
                            <div class="table-responsive">
                                <table class="s-table">
                                    <thead>
                                        <tr>
                                            <th>Fiscal</th>
                                            <th class="text-end">Total Arrecadado</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($topFiscals ?? [] as $fiscal)
                                        <tr>
                                            <td>{{ $fiscal['name'] }}</td>
                                            <td class="text-end fw-600 text-success">KZ {{ number_format($fiscal['total'], 2, ',', '.') }}</td>
                                        </tr>
                                        @empty
                                            <tr><td colspan="2" class="text-center">Nenhum dado disponível</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .kpi-card {
        background: var(--bg-card, #ffffff);
        border-radius: var(--radius-lg, 14px);
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.06));
        border: 1px solid var(--border-color, #e5e7eb);
        transition: all var(--transition-fast, 0.2s ease);
    }

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
    }

    .kpi-card .kpi-info h3 {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted, #9ca3af);
        margin-bottom: 0.5rem;
    }

    .kpi-card .kpi-value {
        font-size: 1.75rem;
        font-weight: 800;
        color: var(--text-primary, #1a1a2e);
        line-height: 1.2;
    }

    .kpi-card .kpi-icon {
        width: 48px;
        height: 48px;
        background: var(--sinagem-red-muted, rgba(224, 48, 48, 0.08));
        border-radius: var(--radius-md, 10px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sinagem-red, #e03030);
        font-size: 1.4rem;
    }

    .kpi-card.green .kpi-icon { background: rgba(39, 174, 96, 0.1); color: #27ae60; }
    .kpi-card.orange .kpi-icon { background: rgba(230, 126, 34, 0.1); color: #e67e22; }
    .kpi-card.dark .kpi-icon { background: rgba(26, 26, 46, 0.1); color: #1a1a2e; }
    .kpi-card.yellow .kpi-icon { background: rgba(241, 196, 15, 0.1); color: #f1c40f; }

    .chart-container {
        position: relative;
        width: 100%;
        min-height: 300px;
    }

    .chart-legend {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .chart-legend-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: var(--text-secondary, #6b7280);
    }

    .chart-legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .occupation-gauge {
        text-align: center;
        padding: 1rem;
    }

    .gauge-value {
        font-size: 3rem;
        font-weight: 800;
        color: var(--sinagem-red, #e03030);
        margin-bottom: 1rem;
    }

    .progress-bar-gauge {
        background: var(--border-light, #f1f5f9);
        border-radius: var(--radius-full, 9999px);
        height: 1rem;
        overflow: hidden;
        margin: 1rem 0;
    }

    .progress-fill-gauge {
        background: linear-gradient(135deg, var(--sinagem-red, #e03030) 0%, var(--sinagem-red-dark, #c02020) 100%);
        height: 100%;
        border-radius: var(--radius-full, 9999px);
        transition: width 0.5s ease;
    }

    .gauge-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
        color: var(--text-muted, #9ca3af);
        margin-top: 0.5rem;
    }

    .s-card-body.p-0 .s-table {
        margin-bottom: 0;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gráfico de Pizza - Distribuição das Bancadas
    const occupationCtx = document.getElementById('occupationChart');
    if (occupationCtx) {
        new Chart(occupationCtx, {
            type: 'pie',
            data: {
                labels: ['Disponíveis', 'Ocupadas', 'Manutenção'],
                datasets: [{
                    data: [
                        {{ $stats['available_stalls'] }},
                        {{ $stats['occupied_stalls'] }},
                        {{ $stats['maintenance_stalls'] }}
                    ],
                    backgroundColor: ['#27ae60', '#e03030', '#f39c12'],
                    borderWidth: 2,
                    borderColor: '#fff',
                    hoverOffset: 8,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { font: { size: 12, family: "'Inter', sans-serif" }, usePointStyle: true },
                    },
                    tooltip: {
                        callbacks: {
                            label: (ctx) => {
                                const label = ctx.label || '';
                                const value = ctx.parsed || 0;
                                return `${label}: ${value} bancadas (${((value / {{ $stats['total_stalls'] }}) * 100).toFixed(1)}%)`;
                            },
                        },
                    },
                },
            },
        });
    }

    // Gráfico de Linha - Evolução da Receita Mensal
    const revenueCtx = document.getElementById('monthlyRevenueChart');
    if (revenueCtx) {
        const months = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
        const revenueData = @json($monthlyRevenue ?? array_fill(0, 12, 0));

        new Chart(revenueCtx, {
            type: 'line',
            data: {
                labels: months,
                datasets: [{
                    label: 'Receita Mensal (KZ)',
                    data: revenueData,
                    borderColor: '#e03030',
                    backgroundColor: 'rgba(224, 48, 48, 0.05)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#e03030',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { font: { size: 11, family: "'Inter', sans-serif" } },
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: '#e5e7eb' },
                        ticks: {
                            font: { size: 11, family: "'Inter', sans-serif" },
                            callback: (value) => 'KZ ' + value.toLocaleString('pt-AO'),
                        },
                    },
                },
                plugins: {
                    legend: { position: 'top', align: 'end', labels: { font: { size: 11 }, usePointStyle: true } },
                    tooltip: {
                        callbacks: {
                            label: (ctx) => `Receita: KZ ${ctx.parsed.y.toLocaleString('pt-AO')}`,
                        },
                    },
                },
            },
        });
    }

    // Seletor de ano - recarregar dados
    const yearSelect = document.getElementById('yearSelect');
    if (yearSelect) {
        yearSelect.addEventListener('change', function() {
            window.location.href = '{{ route("mercado.mercados.statistics", $mercado) }}?year=' + this.value;
        });
    }
});
</script>
@endpush