@extends('main')

@section('content')

<div class="p-8 bg-gray-100 min-h-screen space-y-8">

    {{-- HEADER EXECUTIVO --}}
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">
                Dashboard Projetos - Tickets 
            </h1>
            <p class="text-sm text-gray-500 mt-1">
                Visão estratégica
            </p>
        </div>

        <div class="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200 text-sm text-gray-600">
            {{ now()->format('d/m/Y H:i') }}
        </div>
    </div>

    {{-- KPIs PRINCIPAIS --}}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">

        {{-- TOTAL --}}
        <div class="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
            <p class="text-xs text-gray-400 uppercase tracking-wider">Total de Chamados</p>
            <h2 class="text-3xl font-bold text-gray-800 mt-3">{{ $total }}</h2>
        </div>

        {{-- PENDENTES (ALERTA) --}}
        <div class="bg-red-50 rounded-2xl p-6 shadow-md border border-red-100">
            <p class="text-xs text-red-500 uppercase tracking-wider">Pendentes</p>
            <h2 class="text-3xl font-bold text-red-600 mt-3">{{ $pendente }}</h2>
            <p class="text-xs text-red-400 mt-2">
                {{ $total ? round(($pendente/$total)*100) : 0 }}% do total
            </p>
        </div>

        {{-- EM ANDAMENTO --}}
        <div class="bg-yellow-50 rounded-2xl p-6 shadow-md border border-yellow-100">
            <p class="text-xs text-yellow-500 uppercase tracking-wider">Em andamento</p>
            <h2 class="text-3xl font-bold text-yellow-600 mt-3">{{ $andamento }}</h2>
        </div>

        {{-- FINALIZADOS --}}
        <div class="bg-green-50 rounded-2xl p-6 shadow-md border border-green-100">
            <p class="text-xs text-green-600 uppercase tracking-wider">Resolvidos</p>
            <h2 class="text-3xl font-bold text-green-700 mt-3">{{ $finalizado }}</h2>
        </div>

    </div>

    {{-- ALERTA OPERACIONAL --}}
    @if($pendente > 10)
    <div class="bg-red-600 text-white p-4 rounded-xl shadow-lg flex justify-between items-center">
        <div>
            <strong>Atenção:</strong>
            Alto volume de chamados pendentes.
        </div>
        <span class="text-sm opacity-80">
            Avaliar redistribuição de equipe
        </span>
    </div>
    @endif


    {{-- GRID ESTRATÉGICO --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        {{-- DISTRIBUIÇÃO VISUAL --}}
        <div class="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-6">
                Distribuição Operacional
            </h3>

            <div class="space-y-5">

                <div>
                    <div class="flex justify-between text-sm">
                        <span>Pendentes</span>
                        <span class="font-semibold text-red-600">{{ $pendente }}</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3 mt-2">
                        <div class="bg-red-500 h-3 rounded-full"
                            style="width: {{ $total ? ($pendente/$total)*100 : 0 }}%">
                        </div>
                    </div>
                </div>

                <div>
                    <div class="flex justify-between text-sm">
                        <span>Em andamento</span>
                        <span class="font-semibold text-yellow-600">{{ $andamento }}</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3 mt-2">
                        <div class="bg-yellow-400 h-3 rounded-full"
                            style="width: {{ $total ? ($andamento/$total)*100 : 0 }}%">
                        </div>
                    </div>
                </div>

                <div>
                    <div class="flex justify-between text-sm">
                        <span>Resolvidos</span>
                        <span class="font-semibold text-green-600">{{ $finalizado }}</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3 mt-2">
                        <div class="bg-green-500 h-3 rounded-full"
                            style="width: {{ $total ? ($finalizado/$total)*100 : 0 }}%">
                        </div>
                    </div>
                </div>

            </div>
        </div>

        {{-- ÚLTIMOS CHAMADOS --}}
        <div class="lg:col-span-2 bg-white rounded-2xl p-6 shadow-md border border-gray-100">

            <div class="flex justify-between items-center mb-6">
                <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">
                    Últimos Chamados
                </h3>

                <a href="{{ route('ticketsout') }}"
                   class="text-sm font-semibold text-[#E55133] hover:underline">
                    Ver todos
                </a>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">

                    <thead>
                        <tr class="text-left text-gray-400 border-b">
                            <th class="py-3">#</th>
                            <th>Solicitante</th>
                            <th>Status</th>
                            <th>Prioridade</th>
                            <th>Responsável</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($latest as $item)
                        <tr class="border-b hover:bg-gray-50 transition">

                            <td class="py-3 font-bold text-gray-700">
                                #{{ $item->id }}
                            </td>

                            <td>{{ $item->name }}</td>

                            <td>
                                <span class="px-3 py-1 text-xs rounded-full
                                    @if($item->status->name == 'Pendente') bg-red-100 text-red-600
                                    @elseif($item->status->name == 'Em andamento') bg-yellow-100 text-yellow-600
                                    @else bg-green-100 text-green-600
                                    @endif
                                ">
                                    {{ $item->status->name }}
                                </span>
                            </td>

                            <td class="font-semibold text-[#E55133]">
                                {{ $item->priority->name }}
                            </td>

                            <td>{{ $item->user->name ?? '-' }}</td>

                        </tr>
                        @endforeach
                    </tbody>

                </table>
            </div>

        </div>

    </div>

</div>

@endsection