@extends('layouts.app')
@section('title', 'Bipagens')

@section('content')

{{-- ── Filtros ───────────────────────────────────────────────────────────── --}}
<form method="GET" class="bg-white rounded-xl border border-slate-200 p-4 mb-4">
    <div class="grid grid-cols-2 lg:grid-cols-5 gap-3">
        <div>
            <label class="block text-xs font-medium text-slate-600 mb-1">Marketplace</label>
            <select name="marketplace_id"
                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
                <option value="">Todos</option>
                @foreach($marketplaces as $mp)
                    <option value="{{ $mp->id }}" {{ request('marketplace_id') == $mp->id ? 'selected' : '' }}>
                        {{ $mp->nome }}
                    </option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-slate-600 mb-1">Período</label>
            <select name="periodo"
                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
                <option value="">Personalizado</option>
                <option value="hoje"   {{ request('periodo') == 'hoje' ? 'selected' : '' }}>Hoje</option>
                <option value="semana" {{ request('periodo') == 'semana' ? 'selected' : '' }}>Esta Semana</option>
                <option value="mes"    {{ request('periodo') == 'mes' ? 'selected' : '' }}>Este Mês</option>
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-slate-600 mb-1">Data Início</label>
            <input type="date" name="data_inicio" value="{{ request('data_inicio') }}"
                class="w-full 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="data_fim" value="{{ request('data_fim') }}"
                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
        </div>
        <div class="flex items-end gap-2">
            <button type="submit"
                class="flex-1 bg-brand-600 hover:bg-brand-700 text-white text-sm py-2 px-3 rounded-lg font-medium transition-colors">
                Filtrar
            </button>
            <a href="{{ route('bipagens.index') }}"
                class="px-3 py-2 border border-slate-300 rounded-lg text-sm text-slate-600 hover:bg-slate-50 transition-colors">
                ✕
            </a>
        </div>
    </div>
</form>

{{-- ── Totais filtrados ─────────────────────────────────────────────────── --}}
<div class="grid grid-cols-2 gap-4 mb-4">
    <div class="bg-brand-50 rounded-xl border border-brand-100 p-4 flex items-center gap-4">
        <div class="text-3xl font-bold text-brand-700">{{ $totais->pacotes }}</div>
        <div class="text-sm text-brand-600">pacotes no filtro selecionado</div>
    </div>
    <div class="bg-slate-800 rounded-xl p-4 flex items-center gap-4">
        <div class="text-2xl font-bold text-white">
            R$ {{ number_format($totais->centavos / 100, 2, ',', '.') }}
        </div>
        <div class="text-sm text-slate-400">ganhos totais</div>
    </div>
</div>

{{-- ── Tabela ────────────────────────────────────────────────────────────── --}}
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-slate-50 border-b border-slate-200">
            <tr>
                <th class="text-left px-4 py-3 text-xs font-medium text-slate-500">Marketplace</th>
                <th class="text-center px-4 py-3 text-xs font-medium text-slate-500">Qtd</th>
                <th class="text-left px-4 py-3 text-xs font-medium text-slate-500 hidden md:table-cell">Rastreio</th>
                <th class="text-right px-4 py-3 text-xs font-medium text-slate-500">Valor Unit.</th>
                <th class="text-right px-4 py-3 text-xs font-medium text-slate-500">Total</th>
                <th class="text-right px-4 py-3 text-xs font-medium text-slate-500">Data</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
            @forelse($bipagens as $b)
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-2">
                            <div class="w-2.5 h-2.5 rounded-full shrink-0"
                                 style="background-color: {{ $b->marketplace->cor }}"></div>
                            <span class="font-medium text-slate-700">{{ $b->marketplace->nome }}</span>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-center font-bold text-slate-800">
                        {{ $b->quantidade }}
                    </td>
                    <td class="px-4 py-3 text-slate-500 font-mono text-xs hidden md:table-cell">
                        {{ $b->codigo_rastreio ?: '—' }}
                    </td>
                    <td class="px-4 py-3 text-right text-slate-500">
                        R$ {{ number_format($b->valor_centavos / 100, 2, ',', '.') }}
                    </td>
                    <td class="px-4 py-3 text-right font-semibold text-slate-800">
                        {{ $b->total_reais }}
                    </td>
                    <td class="px-4 py-3 text-right text-slate-500 text-xs">
                        {{ $b->data_bipagem->format('d/m/Y') }}
                    </td>
                    <td class="px-4 py-3 text-right">
                        <form method="POST" action="{{ route('bipagens.destroy', $b) }}"
                              onsubmit="return confirm('Remover esta bipagem?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-red-400 hover:text-red-600 transition-colors" title="Remover">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="px-4 py-10 text-center text-slate-400 text-sm">
                        Nenhuma bipagem encontrada com os filtros aplicados.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>

    {{-- Paginação --}}
    @if($bipagens->hasPages())
        <div class="px-4 py-3 border-t border-slate-200">
            {{ $bipagens->links('pagination::tailwind') }}
        </div>
    @endif
</div>

@endsection