@extends('layouts.app')
@section('title', 'Relatórios')

@section('content')

{{-- ── Filtro de período ────────────────────────────────────────────────── --}}
<form method="GET" class="bg-white rounded-xl border border-slate-200 p-4 mb-6">
    <div class="flex flex-wrap gap-3 items-end">
        <div>
            <label class="block text-xs font-medium text-slate-600 mb-1">Data Início</label>
            <input type="date" name="inicio" value="{{ $inicio }}"
                class="rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
        </div>
        <div>
            <label class="block text-xs font-medium text-slate-600 mb-1">Data Fim</label>
            <input type="date" name="fim" value="{{ $fim }}"
                class="rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
        </div>
        {{-- Atalhos --}}
        <a href="{{ route('relatorios.index', ['inicio' => now()->startOfMonth()->toDateString(), 'fim' => now()->toDateString()]) }}"
           class="px-3 py-2 text-xs border border-slate-300 rounded-lg hover:bg-slate-50 text-slate-600 transition-colors">
            Este Mês
        </a>
        <a href="{{ route('relatorios.index', ['inicio' => now()->subMonth()->startOfMonth()->toDateString(), 'fim' => now()->subMonth()->endOfMonth()->toDateString()]) }}"
           class="px-3 py-2 text-xs border border-slate-300 rounded-lg hover:bg-slate-50 text-slate-600 transition-colors">
            Mês Passado
        </a>
        <a href="{{ route('relatorios.index', ['inicio' => now()->startOfYear()->toDateString(), 'fim' => now()->toDateString()]) }}"
           class="px-3 py-2 text-xs border border-slate-300 rounded-lg hover:bg-slate-50 text-slate-600 transition-colors">
            Este Ano
        </a>
        <button type="submit"
            class="bg-brand-600 hover:bg-brand-700 text-white text-sm py-2 px-4 rounded-lg font-medium transition-colors">
            Aplicar
        </button>
    </div>
</form>

{{-- ── Métricas do período ──────────────────────────────────────────────── --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-slate-200 p-4">
        <div class="text-xs text-slate-500 mb-1">Total Pacotes</div>
        <div class="text-2xl font-bold text-slate-800">{{ number_format($totais->pacotes, 0, ',', '.') }}</div>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 p-4">
        <div class="text-xs text-slate-500 mb-1">Total Ganho</div>
        <div class="text-2xl font-bold text-brand-600">
            R$ {{ number_format($totais->centavos / 100, 2, ',', '.') }}
        </div>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 p-4">
        <div class="text-xs text-slate-500 mb-1">Média Diária</div>
        <div class="text-2xl font-bold text-slate-800">{{ number_format($mediaDiaria, 1, ',', '.') }}</div>
        <div class="text-xs text-slate-400">pacotes/dia</div>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 p-4">
        <div class="text-xs text-slate-500 mb-1">Melhor Dia</div>
        @if($melhorDia)
            <div class="text-2xl font-bold text-slate-800">{{ $melhorDia->total_pacotes }}</div>
            <div class="text-xs text-slate-400">{{ \Carbon\Carbon::parse($melhorDia->data_bipagem)->format('d/m/Y') }}</div>
        @else
            <div class="text-2xl font-bold text-slate-400">—</div>
        @endif
    </div>
</div>

{{-- ── Por Marketplace ──────────────────────────────────────────────────── --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-slate-200 p-4">
        <h2 class="text-sm font-semibold text-slate-700 mb-4">Por Marketplace</h2>
        @forelse($porMarketplace as $item)
            @php $pct = $totais->pacotes > 0 ? ($item->total_pacotes / $totais->pacotes * 100) : 0; @endphp
            <div class="mb-3">
                <div class="flex items-center justify-between text-xs mb-1">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full"
                             style="background-color: {{ $item->marketplace->cor }}"></div>
                        <span class="font-medium text-slate-700">{{ $item->marketplace->nome }}</span>
                    </div>
                    <div class="text-right">
                        <span class="font-bold text-slate-800">{{ $item->total_pacotes }} pac.</span>
                        <span class="text-slate-400 ml-2">R$ {{ number_format($item->total_centavos / 100, 2, ',', '.') }}</span>
                    </div>
                </div>
                <div class="h-1.5 bg-slate-100 rounded-full overflow-hidden">
                    <div class="h-full rounded-full transition-all duration-500"
                         style="width: {{ $pct }}%; background-color: {{ $item->marketplace->cor }}"></div>
                </div>
            </div>
        @empty
            <p class="text-xs text-slate-400 text-center py-6">Sem bipagens neste período.</p>
        @endforelse
    </div>

    {{-- Gráfico diário --}}
    <div class="bg-white rounded-xl border border-slate-200 p-4">
        <h2 class="text-sm font-semibold text-slate-700 mb-4">Volume Diário</h2>
        <div class="h-52">
            <canvas id="graficoDiario"></canvas>
        </div>
    </div>
</div>

{{-- ── Por Semana ───────────────────────────────────────────────────────── --}}
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden mb-6">
    <div class="px-4 py-3 border-b border-slate-100">
        <h2 class="text-sm font-semibold text-slate-700">Resumo por Semana</h2>
    </div>
    <table class="w-full text-sm">
        <thead class="bg-slate-50">
            <tr>
                <th class="text-left px-4 py-2 text-xs font-medium text-slate-500">Semana</th>
                <th class="text-right px-4 py-2 text-xs font-medium text-slate-500">Pacotes</th>
                <th class="text-right px-4 py-2 text-xs font-medium text-slate-500">Ganho</th>
                <th class="text-right px-4 py-2 text-xs font-medium text-slate-500">Média/dia</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
            @forelse($porSemana as $semana)
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-2.5 text-slate-600 text-xs">
                        {{ \Carbon\Carbon::parse($semana->inicio_semana)->format('d/m') }}
                        —
                        {{ \Carbon\Carbon::parse($semana->fim_semana)->format('d/m/Y') }}
                    </td>
                    <td class="px-4 py-2.5 text-right font-bold text-slate-800">
                        {{ $semana->total_pacotes }}
                    </td>
                    <td class="px-4 py-2.5 text-right font-semibold text-brand-600">
                        R$ {{ number_format($semana->total_centavos / 100, 2, ',', '.') }}
                    </td>
                    <td class="px-4 py-2.5 text-right text-slate-500 text-xs">
                        @php
                            $diasNaSemana = \Carbon\Carbon::parse($semana->inicio_semana)
                                ->diffInDays(\Carbon\Carbon::parse($semana->fim_semana)) + 1;
                        @endphp
                        {{ number_format($semana->total_pacotes / max($diasNaSemana, 1), 1, ',', '.') }}
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="px-4 py-6 text-center text-slate-400 text-xs">
                        Sem dados no período.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@endsection

@push('scripts')
<script>
const diasLabels = @json($porDia->pluck('data_bipagem')->map(fn($d) => \Carbon\Carbon::parse($d)->format('d/m')));
const diasPacotes = @json($porDia->pluck('total_pacotes'));

const ctx = document.getElementById('graficoDiario').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: diasLabels,
        datasets: [{
            label: 'Pacotes',
            data: diasPacotes,
            borderColor: '#16a34a',
            backgroundColor: 'rgba(22,163,74,0.08)',
            borderWidth: 2,
            pointRadius: 3,
            pointBackgroundColor: '#16a34a',
            tension: 0.3,
            fill: true,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, ticks: { precision: 0, font: { size: 10 } }, grid: { color: '#f1f5f9' } },
            x: { ticks: { font: { size: 9 } }, grid: { display: false } }
        }
    }
});
</script>
@endpush