{{-- =====================================================
     SINAGEM — Dashboard
     resources/views/admin/dashboard.blade.php
     ===================================================== --}}

@extends('layouts.app')

@section('title', 'Dashboard — SINAGEM')

@section('page-title', 'Dashboard')
@section('breadcrumb')
    <span class="bc-item">Dashboard</span>
    <i class="fas fa-chevron-right"></i>
    <span class="bc-current">Principal</span>
@endsection

@push('styles')
<style>
    /* Chart.js canvas */
    .chart-canvas {
        display: block;
        width: 100% !important;
        max-height: 280px;
    }

    /* Animações */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fade-in-up {
        animation: fadeInUp 0.4s ease forwards;
        opacity: 0;
    }

    .delay-1 { animation-delay: 0.05s; }
    .delay-2 { animation-delay: 0.1s; }
    .delay-3 { animation-delay: 0.15s; }
    .delay-4 { animation-delay: 0.2s; }
</style>
@endpush

@section('content')
<div class="sinagem-main">

    {{-- ── KPI Row ── --}}
    <div class="kpi-grid">
        <div class="kpi-card green fade-in-up delay-1">
            <div class="kpi-info">
                <h3>Receita de Hoje</h3>
                <div class="kpi-value">KZ {{ number_format($receitaHoje ?? 0, 2, ',', '.') }}</div>
                <small class="text-muted">Últimas 24 horas</small>
            </div>
            <div class="kpi-icon">
                <i class="fas fa-money-bill-wave"></i>
            </div>
        </div>

        <div class="kpi-card dark fade-in-up delay-2">
            <div class="kpi-info">
                <h3>Taxa de Ocupação</h3>
                <div class="kpi-value">{{ $taxaOcupacao ?? '82' }}%</div>
                <small class="text-muted">Bancadas ocupadas</small>
            </div>
            <div class="kpi-icon">
                <i class="fas fa-chart-line"></i>
            </div>
        </div>

        <div class="kpi-card orange fade-in-up delay-3">
            <div class="kpi-info">
                <h3>Taxa de Inadimplência</h3>
                <div class="kpi-value">{{ $taxaInadimplencia ?? '35' }}%</div>
                <small class="text-muted">Pagamentos em atraso</small>
            </div>
            <div class="kpi-icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
        </div>

        <div class="kpi-card yellow fade-in-up delay-4">
            <div class="kpi-info">
                <h3>Fiscais Activos</h3>
                <div class="kpi-value">{{ $fiscaisActivos ?? 12 }}</div>
                <small class="text-muted">Em serviço</small>
            </div>
            <div class="kpi-icon">
                <i class="fas fa-user-shield"></i>
            </div>
        </div>
    </div>

    {{-- ── Operacional + Financeiro ── --}}
    <div class="row g-3 mb-4">
        {{-- Operacional --}}
        <div class="col-12 col-lg-6">
            <div class="s-card fade-in-up delay-2">
                <div class="s-card-header">
                    <div class="s-card-title">
                        <i class="fas fa-chart-pie"></i>
                        Operacional
                    </div>
                </div>
                <div class="s-card-body">
                    <h6 class="fw-600 mb-3 text-secondary">Ocupação por Sector</h6>
                    <div class="chart-container" style="height: 280px;">
                        <canvas id="chartOcupacaoSector" class="chart-canvas"></canvas>
                    </div>
                </div>
            </div>
        </div>

        {{-- Financeiro --}}
        <div class="col-12 col-lg-6">
            <div class="s-card fade-in-up delay-3">
                <div class="s-card-header">
                    <div class="s-card-title">
                        <i class="fas fa-chart-bar"></i>
                        Financeiro
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <input type="date" id="date-selector-input"
                               class="form-control form-control-sm"
                               style="width: auto; display: none;">
                        <button id="date-selector-btn" class="date-filter">
                            <i class="fas fa-calendar-alt"></i>
                            Selecione a data
                        </button>
                    </div>
                </div>
                <div class="s-card-body">
                    <h6 class="fw-600 mb-3 text-secondary">Arrecadação Semanal (Previsto vs Real)</h6>
                    <div class="chart-container" style="height: 280px;">
                        <canvas id="chartArrecadacaoSemanal" class="chart-canvas"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Últimos Desembarques + Alertas Devedores ── --}}
    <div class="row g-3">
        {{-- Últimos Desembarques --}}
        <div class="col-12 col-lg-6">
            <div class="s-card fade-in-up delay-4">
                <div class="s-card-header">
                    <div class="s-card-title">
                        <i class="fas fa-ship"></i>
                        Últimos Desembarques
                    </div>
                    <a href="{{ route('pesca.desembarques.index') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-eye"></i> Ver todos
                    </a>
                </div>
                <div class="s-card-body p-0">
                    <div class="s-table-wrapper">
                        <table class="s-table">
                            <thead>
                                <tr>
                                    <th>Designação</th>
                                    <th>Responsável</th>
                                    <th>Pescado</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($ultimosDesembarques ?? [] as $d)
                                    <tr data-href="{{ route('pesca.desembarques.show', $d->id) }}" style="cursor: pointer;">
                                        <td>{{ $d->designacao ?? 'N/A' }}</td>
                                        <td>{{ $d->responsavel ?? 'N/A' }}</td>
                                        <td>{{ $d->pescado ?? 'N/A' }}</td>
                                    </tr>
                                @empty
                                    @foreach([
                                        ['B/001', 'João Silva', 'Carapau (450kg)'],
                                        ['B/002', 'Manuel Costa', 'Sardinha (320kg)'],
                                        ['B/003', 'António Mendes', 'Garopa (180kg)'],
                                        ['B/004', 'Francisco Neto', 'Polvo (95kg)'],
                                        ['B/005', 'Carlos Alberto', 'Carapau (520kg)'],
                                        ['B/006', 'Paulo Jorge', 'Sardinha (280kg)'],
                                        ['B/007', 'Luis Fernando', 'Polvo (110kg)'],
                                        ['B/008', 'José Augusto', 'Carapau (390kg)'],
                                    ] as $row)
                                        <tr>
                                            <td>{{ $row[0] }}</td>
                                            <td>{{ $row[1] }}</td>
                                            <td>{{ $row[2] }}</td>
                                        </tr>
                                    @endforeach
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Alertas Bancadas Devedoras --}}
        <div class="col-12 col-lg-6">
            <div class="s-card fade-in-up delay-5">
                <div class="s-card-header">
                    <div class="s-card-title">
                        <i class="fas fa-exclamation-triangle"></i>
                        Alertas de Maiores Bancadas Devedoras
                    </div>
                    <a href="{{ route('financas.pagamentos.index') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-eye"></i> Ver todos
                    </a>
                </div>
                <div class="s-card-body p-0">
                    <div class="s-table-wrapper">
                        <table class="s-table">
                            <thead>
                                <tr>
                                    <th>Nome</th>
                                    <th>Status</th>
                                    <th class="text-end">Valor (AOA)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($bancadasDevedoras ?? [] as $b)
                                    <tr>
                                        <td>{{ $b->nome ?? 'N/A' }}</td>
                                        <td><span class="badge badge-danger">Atrasado</span></td>
                                        <td class="text-end fw-600 text-danger">{{ number_format($b->valor ?? 0, 2, ',', '.') }}</td>
                                    </tr>
                                @empty
                                    @foreach([
                                        ['Bancada A-001', 158.500,00],
                                        ['Bancada B-023', 124.300,00],
                                        ['Bancada C-045', 98.750,00],
                                        ['Bancada D-012', 87.200,00],
                                        ['Bancada E-078', 76.400,00],
                                        ['Bancada F-034', 65.900,00],
                                        ['Bancada G-056', 54.300,00],
                                        ['Bancada H-089', 43.800,00],
                                    ] as $b)
                                        <tr>
                                            <td>{{ $b[0] }}</td>
                                            <td><span class="badge badge-danger"><i class="fas fa-clock"></i> Atrasado</span></td>
                                            <td class="text-end fw-600 text-danger">KZ {{ number_format($b[1], 2, ',', '.') }}</td>
                                        </tr>
                                    @endforeach
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
(function() {
    'use strict';

    // =====================================================
    // Gráfico de Pizza: Ocupação por Sector
    // =====================================================
    const pieCtx = document.getElementById('chartOcupacaoSector');
    if (pieCtx) {
        new Chart(pieCtx, {
            type: 'pie',
            data: {
                labels: ['Comerciantes', 'Pescadores', 'Ambulantes'],
                datasets: [{
                    data: [62.5, 25, 12.5],
                    backgroundColor: ['#27ae60', '#f39c12', '#e74c3c'],
                    borderWidth: 2,
                    borderColor: '#fff',
                    hoverOffset: 8,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: { size: 12, family: "'Inter', sans-serif" },
                            padding: 14,
                            usePointStyle: true,
                        },
                    },
                    tooltip: {
                        callbacks: {
                            label: (ctx) => {
                                const label = ctx.label || '';
                                const value = ctx.parsed || 0;
                                return `${label}: ${value}%`;
                            },
                        },
                    },
                },
            },
        });
    }

    // =====================================================
    // Gráfico de Barras: Arrecadação Semanal
    // =====================================================
    const barCtx = document.getElementById('chartArrecadacaoSemanal');
    if (barCtx) {
        const labels = ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'];
        const previsto = [108000, 95000, 112000, 89000, 125000, 98000];
        const real = [87500, 82000, 94500, 76000, 108000, 85000];

        new Chart(barCtx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Previsto (KZ)',
                        data: previsto,
                        backgroundColor: 'rgba(39, 174, 96, 0.15)',
                        borderColor: '#27ae60',
                        borderWidth: 1.5,
                        borderRadius: 6,
                    },
                    {
                        label: 'Real (KZ)',
                        data: real,
                        backgroundColor: '#e03030',
                        borderColor: '#c02020',
                        borderWidth: 0,
                        borderRadius: 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, family: "'Inter', sans-serif" },
                            boxWidth: 12,
                            padding: 16,
                            usePointStyle: true,
                        },
                    },
                    tooltip: {
                        callbacks: {
                            label: (ctx) => {
                                const label = ctx.dataset.label || '';
                                const value = ctx.parsed.y || 0;
                                return `${label}: KZ ${value.toLocaleString('pt-AO')}`;
                            },
                        },
                    },
                },
            },
        });
    }

    // =====================================================
    // Date Selector
    // =====================================================
    const btn = document.getElementById('date-selector-btn');
    const input = document.getElementById('date-selector-input');

    if (btn && input) {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            input.style.display = 'inline-block';
            input.focus();
            try {
                input.showPicker();
            } catch(err) {
                // Fallback para navegadores que não suportam showPicker
            }
        });

        input.addEventListener('change', function() {
            if (input.value) {
                const d = new Date(input.value);
                const formatted = d.toLocaleDateString('pt-AO', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric'
                });
                btn.innerHTML = `<i class="fas fa-calendar-alt"></i> ${formatted}`;

                // Disparar evento para recarregar dados
                document.dispatchEvent(new CustomEvent('date-changed', {
                    detail: { date: input.value }
                }));
            }
            input.style.display = 'none';
        });

        input.addEventListener('blur', function() {
            setTimeout(() => {
                input.style.display = 'none';
            }, 200);
        });
    }

    // =====================================================
    // Table Row Click (data-href)
    // =====================================================
    document.querySelectorAll('tr[data-href]').forEach(row => {
        row.addEventListener('click', function(e) {
            if (!e.target.closest('a') && !e.target.closest('button')) {
                window.location.href = this.dataset.href;
            }
        });
    });

})();
</script>
@endpush