@extends('layouts.tecnico.app')

@section('content')

<div class="container-fluid py-4">

{{-- ================= HEADER ================= --}}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
    <div class='text-light'>
        <h4 class="fw-bold mb-0">Painel do Técnico</h4>
        <small class="text">Resumo operacional do sistema</small>
    </div>
    <small class="text-light">
        {{ now()->format('d/m/Y H:i') }}
    </small>
</div>

{{-- ================= KPI CARDS ================= --}}
<div class="row g-4 mb-4">

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 card-hover">
            <div class="text-center card-body">
                <small class="text-light">Pedidos Hoje</small>
                <h3 class="fw-bold text-primary mb-0">
                    {{ $ordersToday ?? 0 }}
                </h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 card-hover">
            <div class="text-center card-body">
                <small class="text-light">Pendentes</small>
                <h3 class="fw-bold text-warning mb-0">
                    {{ $pendingOrders ?? 0 }}
                </h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 card-hover">
            <div class="text-center card-body">
                <small class="text-light">Proformas Hoje</small>
                <h3 class="fw-bold text-success mb-0">
                    {{ $proformasToday ?? 0 }}
                </h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 card-hover">
            <div class="text-center card-body">
                <small class="text-light">Total Produtos</small>
                <h3 class="fw-bold text-light mb-0">
                    {{ $totalProducts ?? 0 }}
                </h3>
            </div>
        </div>
    </div>

</div>

{{-- ================= GRID PRINCIPAL ================= --}}
<div class="row g-4 mb-4">

    {{-- GRÁFICO --}}
    <div class="col-xl-8">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body">
                <div class="text-light d-flex justify-content-between mb-3">
                    <h6 class="fw-bold mb-0">Pedidos por mês</h6>
                    <small class="text-light">Últimos 12 meses</small>
                </div>

                <div style="height:300px">
                    <canvas id="ordersChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- AÇÕES RÁPIDAS --}}
    <div class="col-xl-4">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="text-light card-body">
                <h6 class="fw-bold mb-3">Ações rápidas</h6>

                <div class="d-grid gap-3">
                    <a href="{{ route('dashboard.tecnico.encomendas.index') }}"
                       class="btn btn-primary rounded-3">
                        Ver Encomendas
                    </a>

                    <a href="{{ route('dashboard.tecnico.produtos.index') }}"
                       class="btn btn-dark rounded-3">
                        Gerir Produtos
                    </a>

                    <a href="{{ route('dashboard.tecnico.stock.index') }}"
                       class="btn btn-warning rounded-3 text-white">
                        Controlar Stock
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- ================= TABELA ================= --}}
<div class="card border-0 shadow-sm rounded-4">
    <div class="text-light card-body">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="fw-bold mb-0">Últimos Pedidos</h6>
            <a href="{{ route('dashboard.tecnico.encomendas.index') }}" class="small">
                Ver todos
            </a>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle">

                <thead class="table-light">
                    <tr>
                        <th>Nº</th>
                        <th>Cliente</th>
                        <th>Total</th>
                        <th>Status</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($recentOrders ?? [] as $o)

                        @php
                            $badge = match($o->status) {
                                'aprovado' => 'success',
                                'reprovado' => 'danger',
                                default => 'warning'
                            };
                        @endphp

                        <tr>
                            <td class="fw-semibold">{{ $o->numero }}</td>
                            <td>{{ $o->cliente_nome }}</td>
                            <td class="fw-bold text-success">
                                {{ number_format($o->total,2,',','.') }} Kz
                            </td>
                            <td>
                                <span class="badge bg-{{ $badge }}">
                                    {{ ucfirst($o->status ?? 'pendente') }}
                                </span>
                            </td>
                        </tr>

                    @empty
                        <tr>
                            <td colspan="4" class="text-center text-light py-4">
                                Nenhum pedido encontrado
                            </td>
                        </tr>
                    @endforelse
                </tbody>

            </table>
        </div>

    </div>
</div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // 🔥 IMPORTANTE: usar [] em vez de {}
    const ordersByMonth = @json($ordersByMonth ?? []);

    const monthlyData = [];

    for (let m = 1; m <= 12; m++) {
        monthlyData.push(ordersByMonth[m] ?? 0);
    }

    const ctx = document.getElementById('ordersChart');

    if (ctx) {
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
                datasets: [{
                    data: monthlyData,
                    borderColor: '#0d6efd',
                    backgroundColor: 'rgba(13,110,253,0.12)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { display: false } },
                scales: { y: { beginAtZero: true } }
            }
        });
    }
});
</script>
@endpush