<x-filament-panels::page>

    {{-- ── Barra de filtros ─────────────────────────────────────────────────── --}}
    <div class="flex flex-wrap items-end gap-3 mb-6">

        {{-- Tabs Account / Vendedor --}}
        <div class="flex gap-1 mr-4">
            <button wire:click="setTab('account')"
                class="px-4 py-1.5 rounded-lg text-sm font-semibold transition-colors
                    {{ $activeTab === 'account'
                        ? 'bg-primary-600 text-white'
                        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50' }}">
                Account Manager
            </button>
            <button wire:click="setTab('vendedor')"
                class="px-4 py-1.5 rounded-lg text-sm font-semibold transition-colors
                    {{ $activeTab === 'vendedor'
                        ? 'bg-primary-600 text-white'
                        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50' }}">
                Vendedor
            </button>
        </div>

        {{-- Presets --}}
        <div class="flex gap-1">
            @foreach(['month' => 'Este mes', 'lastmonth' => 'Mes pasado', 'months3' => 'Últ. 3 meses', 'year' => 'Este año'] as $key => $label)
                <button wire:click="setPreset('{{ $key }}')"
                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors
                        {{ $preset === $key
                            ? 'bg-gray-700 text-white'
                            : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50' }}">
                    {{ $label }}
                </button>
            @endforeach
        </div>

        {{-- Desde / Hasta --}}
        <div class="flex items-center gap-2">
            <input type="date" wire:model.live="desde"
                class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-sm px-3 py-1.5 focus:ring-primary-500 focus:border-primary-500">
            <span class="text-gray-400 text-sm">—</span>
            <input type="date" wire:model.live="hasta"
                class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-sm px-3 py-1.5 focus:ring-primary-500 focus:border-primary-500">
        </div>
    </div>

    {{-- ══════════════════════════════════════════════════════════════════════
         TAB: ACCOUNT MANAGER
    ══════════════════════════════════════════════════════════════════════ --}}
    @if($activeTab === 'account')
        @php $d = $this->getAccountReportData(); @endphp

        {{-- KPI cards --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">

            <div class="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Account Manager</p>
                <p class="text-xl font-bold text-gray-900 dark:text-white mt-1">
                    {{ $d['account_manager']?->name ?? 'Sin asignar' }}
                </p>
                <p class="text-xs text-gray-400 mt-0.5">
                    Comisión {{ number_format($d['pct'], 2) }}% sobre cobrado
                </p>
            </div>

            <div class="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Proyectos cobrados</p>
                <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $d['rows']->count() }}</p>
                <p class="text-xs text-gray-400 mt-0.5">
                    {{ \Carbon\Carbon::parse($d['desde'])->format('d/m/Y') }} —
                    {{ \Carbon\Carbon::parse($d['hasta'])->format('d/m/Y') }}
                </p>
            </div>

            <div class="rounded-xl bg-primary-50 dark:bg-primary-900/30 border border-primary-200 dark:border-primary-700 p-4 shadow-sm">
                <p class="text-xs font-semibold text-primary-500 uppercase tracking-wide">Comisión Total</p>
                <p class="text-2xl font-bold text-primary-600 dark:text-primary-400 mt-1">
                    Bs. {{ number_format($d['total_comision_bs'], 2) }}
                </p>
                <p class="text-xs text-primary-400 mt-0.5">TC: {{ number_format($d['rate'], 2) }} BOB/USD</p>
            </div>
        </div>

        {{-- Tabla --}}
        <div class="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden shadow-sm">
            <table class="min-w-full text-sm">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">Cliente</th>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">Proyecto</th>
                        <th class="px-4 py-3 text-right font-semibold text-gray-600 dark:text-gray-300">Cobrado USD</th>
                        <th class="px-4 py-3 text-right font-semibold text-gray-600 dark:text-gray-300">Cobrado BOB</th>
                        <th class="px-4 py-3 text-right font-semibold text-gray-600 dark:text-gray-300">Total Bs.</th>
                        <th class="px-4 py-3 text-right font-semibold text-gray-600 dark:text-gray-300">{{ number_format($d['pct'], 0) }}% Comisión</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                    @forelse($d['rows'] as $row)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                            <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $row['client'] }}</td>
                            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">{{ $row['title'] }}</td>
                            <td class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">
                                {{ $row['cobrado_usd'] > 0 ? '$' . number_format($row['cobrado_usd'], 2) : '—' }}
                            </td>
                            <td class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">
                                {{ $row['cobrado_bob'] > 0 ? 'Bs. ' . number_format($row['cobrado_bob'], 2) : '—' }}
                            </td>
                            <td class="px-4 py-3 text-right font-medium text-gray-800 dark:text-gray-200">
                                Bs. {{ number_format($row['cobrado_bs'], 2) }}
                            </td>
                            <td class="px-4 py-3 text-right font-bold text-primary-600 dark:text-primary-400">
                                Bs. {{ number_format($row['comision_bs'], 2) }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-gray-400">
                                Sin proyectos cobrados en el período seleccionado.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
                @if($d['rows']->isNotEmpty())
                    <tfoot class="bg-gray-50 dark:bg-gray-700 border-t-2 border-gray-200 dark:border-gray-600">
                        <tr>
                            <td colspan="5" class="px-4 py-3 text-right font-bold text-gray-700 dark:text-gray-200">
                                TOTAL COMISIÓN
                            </td>
                            <td class="px-4 py-3 text-right font-bold text-primary-600 dark:text-primary-400 text-base">
                                Bs. {{ number_format($d['total_comision_bs'], 2) }}
                            </td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
    @endif

    {{-- ══════════════════════════════════════════════════════════════════════
         TAB: VENDEDOR
    ══════════════════════════════════════════════════════════════════════ --}}
    @if($activeTab === 'vendedor')
        @php $d = $this->getSalesRepReportData(); @endphp

        @if(empty($d['sellers_data']))
            <div class="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-8 text-center shadow-sm">
                <p class="text-gray-400">No hay vendedores registrados o ninguno tiene ventas asignadas en este período.</p>
            </div>
        @else
            @foreach($d['sellers_data'] as $sellerData)
                {{-- Header del vendedor --}}
                <div class="flex flex-wrap items-center justify-between gap-4 mb-3 mt-6 first:mt-0">
                    <div>
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">
                            {{ $sellerData['seller']->name }}
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            {{ $sellerData['total_count'] }} venta(s) •
                            {{ $sellerData['cobrados_count'] }} cobrada(s)
                        </p>
                    </div>

                    {{-- KPI del vendedor --}}
                    <div class="flex gap-3">
                        <div class="rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-4 py-2 text-center shadow-sm">
                            <p class="text-xs text-gray-400 uppercase tracking-wide">Bruto total</p>
                            <p class="font-bold text-gray-800 dark:text-gray-200">
                                Bs. {{ number_format($sellerData['total_gross_bs'], 2) }}
                            </p>
                        </div>
                        <div class="rounded-lg bg-primary-50 dark:bg-primary-900/30 border border-primary-200 dark:border-primary-700 px-4 py-2 text-center shadow-sm">
                            <p class="text-xs text-primary-500 uppercase tracking-wide">Comisión</p>
                            <p class="font-bold text-primary-600 dark:text-primary-400">
                                Bs. {{ number_format($sellerData['total_comision_bs'], 2) }}
                            </p>
                        </div>
                    </div>
                </div>

                {{-- Tabla del vendedor --}}
                <div class="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden shadow-sm mb-6">
                    <table class="min-w-full text-sm">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">Cliente</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">Proyecto</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">Fecha</th>
                                <th class="px-4 py-3 text-right font-semibold text-gray-600 dark:text-gray-300">Monto</th>
                                <th class="px-4 py-3 text-right font-semibold text-gray-600 dark:text-gray-300">En Bs.</th>
                                <th class="px-4 py-3 text-center font-semibold text-gray-600 dark:text-gray-300">Estado pago</th>
                                <th class="px-4 py-3 text-right font-semibold text-gray-600 dark:text-gray-300">% Com.</th>
                                <th class="px-4 py-3 text-right font-semibold text-gray-600 dark:text-gray-300">Comisión Bs.</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                            @forelse($sellerData['rows'] as $row)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $row['client'] }}</td>
                                    <td class="px-4 py-3 text-gray-600 dark:text-gray-300 max-w-xs truncate">{{ $row['title'] }}</td>
                                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ $row['sale_date'] }}</td>
                                    <td class="px-4 py-3 text-right text-gray-700 dark:text-gray-300 whitespace-nowrap">
                                        @if($row['gross_usd'])
                                            ${{ number_format($row['gross_usd'], 2) }}
                                        @else
                                            Bs. {{ number_format($row['gross_bob'], 2) }}
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">
                                        Bs. {{ number_format($row['gross_bs'], 2) }}
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        @if($row['pagado'])
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400">
                                                Pagado
                                            </span>
                                        @elseif($row['parcial'])
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-400">
                                                Parcial
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400">
                                                Pendiente
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-right text-gray-500 dark:text-gray-400">
                                        {{ number_format($row['pct'], 0) }}%
                                        @if($row['pct'] != $d['default_pct'])
                                            <span class="text-xs text-amber-500" title="Personalizado">*</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-right font-bold text-primary-600 dark:text-primary-400">
                                        Bs. {{ number_format($row['comision_bs'], 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-4 py-6 text-center text-gray-400">
                                        Sin ventas asignadas en el período.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                        @if($sellerData['rows']->isNotEmpty())
                            <tfoot class="bg-gray-50 dark:bg-gray-700 border-t-2 border-gray-200 dark:border-gray-600">
                                <tr>
                                    <td colspan="7" class="px-4 py-3 text-right font-bold text-gray-700 dark:text-gray-200">
                                        TOTAL
                                    </td>
                                    <td class="px-4 py-3 text-right font-bold text-primary-600 dark:text-primary-400 text-base">
                                        Bs. {{ number_format($sellerData['total_comision_bs'], 2) }}
                                    </td>
                                </tr>
                            </tfoot>
                        @endif
                    </table>
                </div>
            @endforeach

            <p class="text-xs text-gray-400 mt-2">
                * = Porcentaje personalizado por venta. Por defecto: {{ number_format($d['default_pct'], 0) }}%.
                TC: {{ number_format($d['rate'], 2) }} BOB/USD.
            </p>
        @endif
    @endif

</x-filament-panels::page>
