<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Reportes</h1>
            <p class="text-gray-500 text-sm">Genera reportes en Excel de cartera, planilla y productividad</p>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            {{-- Tipo de Reporte --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Reporte</label>
                <select wire:model.live="tipoReporte" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="cartera">Cartera por Cliente</option>
                    <option value="planilla">Planilla de Procesos</option>
                    <option value="productividad">Productividad por Usuario</option>
                </select>
            </div>
            
            {{-- Cliente --}}
            @if(in_array($tipoReporte, ['cartera', 'planilla']))
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Cliente</label>
                <select wire:model="clienteId" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">Todos los clientes</option>
                    @foreach($clientes as $cliente)
                        <option value="{{ $cliente->id }}">{{ $cliente->nombre }}</option>
                    @endforeach
                </select>
            </div>
            @endif
            
            {{-- Fechas (para productividad) --}}
            @if($tipoReporte === 'productividad')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Fecha Inicio</label>
                <input type="date" wire:model="fechaInicio" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Fecha Fin</label>
                <input type="date" wire:model="fechaFin" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
            </div>
            @endif
        </div>
        
        <div class="flex justify-end">
            <button wire:click="generarReporte" 
                    wire:loading.attr="disabled"
                    class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition flex items-center gap-2">
                <span wire:loading.remove wire:target="generarReporte">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </span>
                <span wire:loading wire:target="generarReporte">
                    <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                    </svg>
                </span>
                Generar Excel
            </button>
        </div>
    </div>
    
    {{-- Descripción del reporte --}}
    <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
        <h4 class="font-medium text-blue-900 mb-2">
            @if($tipoReporte === 'cartera')
                📊 Reporte de Cartera
            @elseif($tipoReporte === 'planilla')
                📋 Planilla de Procesos
            @else
                👥 Productividad por Usuario
            @endif
        </h4>
        <p class="text-sm text-blue-700">
            @if($tipoReporte === 'cartera')
                Incluye: Cliente, radicado, deudor, obligación, capital, intereses, honorarios, total, estado, etapa, días en mora, fecha radicación y abogado asignado.
            @elseif($tipoReporte === 'planilla')
                Incluye: Radicados, cliente, deudor, cédula, obligación, juzgado, valores, estado, etapa, fechas, última actuación y equipo asignado.
            @else
                Incluye: Usuario, email, rol, procesos asignados, actuaciones del período, desglose por tipo (autos, oficios, notificaciones, audiencias).
            @endif
        </p>
    </div>
</div>
