@extends('layouts.admin')

@section('content')
<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">

    {{-- HEADER --}}
    <header class="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-6 pt-6">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <span class="w-8 h-[2px] bg-[#06458F]"></span>
                <span class="font-bold text-[10px] uppercase tracking-[0.4em] text-[#06458F]">Sistema de Gestão</span>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold italic tracking-tighter uppercase text-[#06458F]">DASHBOARD</h1>
            <p class="text-slate-500 font-medium mt-1">Bem-vindo, <span class="font-bold text-[#06458F]">{{ auth()->user()->name }}</span>.</p>
        </div>
        <div class="flex items-center gap-3 bg-white border border-slate-200 p-3 rounded-2xl shadow-sm">
            <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Sistema Operacional</span>
        </div>
    </header>

    {{-- KPIs OPERACIONAIS --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        @php
        $kpis = [
            ['label' => 'Notícias', 'value' => $totalNoticias, 'unit' => 'artigos', 'icon' => 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10l4 4v10a2 2 0 01-2 2z'],
            ['label' => 'Equipamentos', 'value' => $totalProdutos, 'unit' => 'itens', 'icon' => 'M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'],
            ['label' => 'Formações', 'value' => $totalFormacoes, 'unit' => 'cursos', 'icon' => 'M12 14l9-5-9-5-9 5 9 5zm0 0v6'],
            ['label' => 'Pedidos', 'value' => $totalPedidos, 'unit' => 'total', 'icon' => 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'],
        ];
        @endphp
        @foreach($kpis as $kpi)
        <div class="bg-white border border-slate-100 rounded-2xl p-6 hover:shadow-md hover:border-[#A9B8C9] transition-all duration-300">
            <div class="flex items-start justify-between mb-4">
                <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400">{{ $kpi['label'] }}</p>
                <div class="w-8 h-8 bg-[#06458F]/5 rounded-xl flex items-center justify-center">
                    <svg class="w-4 h-4 text-[#06458F]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $kpi['icon'] }}"/>
                    </svg>
                </div>
            </div>
            <div class="flex items-baseline gap-1.5">
                <span class="text-4xl font-bold text-[#06458F]">{{ $kpi['value'] }}</span>
                <span class="text-xs text-slate-400 font-bold">{{ $kpi['unit'] }}</span>
            </div>
        </div>
        @endforeach
    </div>

    {{-- KPIs FINANCEIROS --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">

        <div class="bg-[#06458F] rounded-2xl p-6 text-white">
            <p class="text-[10px] font-bold uppercase tracking-widest text-white/60 mb-3">Valor do Estoque</p>
            <p class="text-2xl font-bold leading-tight">{{ number_format($totalValorEstoque, 0, ',', '.') }}</p>
            <p class="text-xs text-white/50 font-bold mt-1">Kz (venda × stock)</p>
        </div>

        <div class="bg-white border border-slate-100 rounded-2xl p-6 hover:shadow-md transition-all">
            <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-3">Total Inscritos</p>
            <div class="flex items-baseline gap-1.5">
                <span class="text-4xl font-bold text-[#06458F]">{{ $totalInscritos }}</span>
                <span class="text-xs text-slate-400 font-bold">inscrições</span>
            </div>
        </div>

        <div class="bg-green-50 border border-green-100 rounded-2xl p-6 hover:shadow-md transition-all">
            <p class="text-[10px] font-bold uppercase tracking-widest text-green-600 mb-3">Pagamentos Confirmados</p>
            <p class="text-2xl font-bold text-green-700 leading-tight">{{ number_format($totalPagoConfirmado, 0, ',', '.') }}</p>
            <p class="text-xs text-green-500 font-bold mt-1">Kz recebidos</p>
        </div>

        <div class="bg-amber-50 border border-amber-100 rounded-2xl p-6 hover:shadow-md transition-all">
            <p class="text-[10px] font-bold uppercase tracking-widest text-amber-600 mb-3">Pagamentos Pendentes</p>
            <p class="text-2xl font-bold text-amber-700 leading-tight">{{ number_format($totalPagoPendente, 0, ',', '.') }}</p>
            <p class="text-xs text-amber-500 font-bold mt-1">Kz a confirmar</p>
        </div>

    </div>

    {{-- GRÁFICO + PEDIDOS PAGOS --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">

        {{-- Gráfico de Inscrições --}}
        <div class="lg:col-span-2 bg-white border border-slate-100 rounded-2xl p-6 shadow-sm">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Evolução</p>
                    <h3 class="text-base font-bold text-[#06458F] uppercase">Inscrições — Últimos 6 Meses</h3>
                </div>
            </div>
            @php
                $meses = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
                $chartLabels = [];
                $chartValues = [];
                $chartValores = [];
                foreach($inscricoesPorMes as $row) {
                    $chartLabels[] = $meses[$row->mes - 1] . '/' . substr($row->ano, 2);
                    $chartValues[] = $row->total;
                    $chartValores[] = round($row->valor / 1000, 1);
                }
                $maxVal = max(array_merge($chartValues, [1]));
            @endphp
            @if(count($chartLabels) > 0)
                <div class="flex items-end gap-3 h-40">
                    @foreach($chartValues as $i => $val)
                    <div class="flex-1 flex flex-col items-center gap-1">
                        <span class="text-[9px] font-bold text-[#06458F]">{{ $val }}</span>
                        <div class="w-full rounded-t-lg bg-[#06458F] transition-all duration-500"
                             style="height: {{ max(4, round(($val / $maxVal) * 120)) }}px"></div>
                        <span class="text-[8px] text-slate-400 font-bold">{{ $chartLabels[$i] }}</span>
                    </div>
                    @endforeach
                </div>
                <div class="mt-4 pt-4 border-t border-slate-100 flex flex-wrap gap-4">
                    @foreach($chartLabels as $i => $label)
                    <div class="text-[9px] text-slate-500">
                        <span class="font-bold text-[#06458F]">{{ $label }}</span>:
                        {{ $chartValues[$i] }} inscrições · {{ $chartValores[$i] }}K Kz
                    </div>
                    @endforeach
                </div>
            @else
                <div class="h-40 flex items-center justify-center text-slate-300 text-xs font-bold uppercase tracking-widest">
                    Sem dados de inscrições ainda
                </div>
            @endif
        </div>

        {{-- Painel de Pedidos --}}
        <div class="bg-white border border-slate-100 rounded-2xl p-6 shadow-sm flex flex-col">
            <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-1">Resumo</p>
            <h3 class="text-base font-bold text-[#06458F] uppercase mb-6">Pedidos & Propostas</h3>
            <div class="space-y-4 flex-1">
                <div class="flex items-center justify-between p-4 bg-slate-50 rounded-xl">
                    <span class="text-xs font-bold text-slate-600 uppercase tracking-wider">Total de Pedidos</span>
                    <span class="text-xl font-bold text-[#06458F]">{{ $totalPedidos }}</span>
                </div>
                <div class="flex items-center justify-between p-4 bg-green-50 rounded-xl">
                    <span class="text-xs font-bold text-green-700 uppercase tracking-wider">Pagos / Confirmados</span>
                    <span class="text-xl font-bold text-green-700">{{ $totalPedidosPagos }}</span>
                </div>
                <div class="flex items-center justify-between p-4 bg-amber-50 rounded-xl">
                    <span class="text-xs font-bold text-amber-700 uppercase tracking-wider">Pendentes</span>
                    <span class="text-xl font-bold text-amber-700">{{ $totalPedidos - $totalPedidosPagos }}</span>
                </div>
            </div>
            <a href="{{ route('admin.pedidos.index') }}"
               class="mt-6 w-full py-3 bg-[#06458F] hover:bg-[#052C56] text-white text-[10px] font-bold uppercase tracking-widest rounded-xl text-center transition-all">
                Ver Todos os Pedidos
            </a>
        </div>
    </div>

    {{-- AÇÕES RÁPIDAS --}}
    <div>
        <p class="text-[10px] font-bold uppercase tracking-[0.5em] text-slate-400 mb-4 flex items-center gap-3">
            Ações Rápidas <span class="flex-1 h-px bg-slate-100"></span>
        </p>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a href="{{ route('admin.noticias.criar') }}" class="group bg-[#06458F] hover:bg-[#052C56] rounded-2xl p-5 flex flex-col items-center gap-3 text-white transition-all hover:-translate-y-1 shadow-md">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                <span class="text-[10px] font-bold uppercase tracking-widest text-center">Nova Notícia</span>
            </a>
            <a href="{{ route('admin.loja.criar') }}" class="group bg-white border border-slate-200 hover:border-[#06458F] rounded-2xl p-5 flex flex-col items-center gap-3 text-slate-600 hover:text-[#06458F] transition-all hover:-translate-y-1">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                <span class="text-[10px] font-bold uppercase tracking-widest text-center">Add Equipamento</span>
            </a>
            <a href="{{ route('admin.formacoes.criar') }}" class="group bg-white border border-slate-200 hover:border-[#06458F] rounded-2xl p-5 flex flex-col items-center gap-3 text-slate-600 hover:text-[#06458F] transition-all hover:-translate-y-1">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                <span class="text-[10px] font-bold uppercase tracking-widest text-center">Nova Formação</span>
            </a>
            <a href="{{ route('admin.inscricoes.lista') }}" class="group bg-white border border-slate-200 hover:border-[#06458F] rounded-2xl p-5 flex flex-col items-center gap-3 text-slate-600 hover:text-[#06458F] transition-all hover:-translate-y-1">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                <span class="text-[10px] font-bold uppercase tracking-widest text-center">Ver Inscrições</span>
            </a>
        </div>
    </div>

</div>
@endsection