@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <h1 class="mb-4">Dashboard</h1>

        {{-- LINHA DE CARDS COM OS RESUMOS --}}
        <div class="row">
            <!-- Card: Faturamento (Hoje) -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-start-primary shadow-sm h-100">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <div class="text-xs fw-bold text-primary text-uppercase mb-1">Faturamento (Hoje)</div>
                                <div class="h5 mb-0 fw-bold text-gray-800">R$ {{ number_format($faturamentoHoje, 2, ',', '.') }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card: Pedidos (Hoje) -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-start-success shadow-sm h-100">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <div class="text-xs fw-bold text-success text-uppercase mb-1">Pedidos (Hoje)</div>
                                <div class="h5 mb-0 fw-bold text-gray-800">{{ $pedidosHoje }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card: Total de Clientes -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-start-info shadow-sm h-100">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <div class="text-xs fw-bold text-info text-uppercase mb-1">Total de Clientes</div>
                                <div class="h5 mb-0 fw-bold text-gray-800">{{ $clientesTotais }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-users fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card: Estoque Baixo -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-start-danger shadow-sm h-100">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <div class="text-xs fw-bold text-danger text-uppercase mb-1">Produtos com Estoque Baixo</div>
                                <div class="h5 mb-0 fw-bold text-gray-800">{{ $produtosEstoqueBaixo }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- TABELA DE ÚLTIMOS PEDIDOS --}}
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header">
                        <h6 class="m-0 fw-bold">Últimos Pedidos Recebidos</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Data</th>
                                        <th class="text-end">Total</th>
                                        <th class="text-center">Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($ultimosPedidos as $pedido)
                                        <tr>
                                            <td>#{{ $pedido->id }}</td>
                                            <td>{{ $pedido->created_at->format('d/m/Y H:i') }}</td>
                                            <td class="text-end">R$ {{ number_format($pedido->total, 2, ',', '.') }}</td>
                                            <td class="text-center">
                                                <span class="badge bg-info text-dark">{{ ucfirst(str_replace('_', ' ', $pedido->status)) }}</span>
                                            </td>
                                            <td class="text-end">
                                                <a href="{{ route('admin.pedidos.show', $pedido->id) }}" class="btn btn-sm btn-dark">Ver Detalhes</a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center">Nenhum pedido recebido hoje.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('styles')
{{-- Estilos para as bordas coloridas dos cards --}}
<style>
    .border-start-primary { border-left: 0.25rem solid #4e73df !important; }
    .border-start-success { border-left: 0.25rem solid #1cc88a !important; }
    .border-start-info { border-left: 0.25rem solid #36b9cc !important; }
    .border-start-danger { border-left: 0.25rem solid #e74a3b !important; }
    .text-xs { font-size: .7rem; }
    .text-gray-300 { color: #dddfeb !important; }
</style>
@endpush