<div class="max-w-4xl mx-auto">

    {{-- Barra de progreso --}}
    <div class="mb-6">
        <div class="flex items-center gap-1">
            @foreach(['Datos generales','Plan de inversión','Actividades','Documentos','Revisión'] as $i => $label)
            <div class="flex items-center {{ $i < 4 ? 'flex-1' : '' }}">
                <div class="flex flex-col items-center">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition
                        {{ $paso > $i+1 ? 'bg-green-600 text-white' : ($paso == $i+1 ? 'bg-blue-700 text-white' : 'bg-gray-200 text-gray-500') }}">
                        {{ $paso > $i+1 ? '✓' : $i+1 }}
                    </div>
                    <span class="text-xs mt-1 hidden sm:block {{ $paso == $i+1 ? 'text-blue-700 font-semibold' : 'text-gray-400' }}">
                        {{ $label }}
                    </span>
                </div>
                @if($i < 4)
                <div class="flex-1 h-0.5 mx-2 {{ $paso > $i+1 ? 'bg-green-400' : 'bg-gray-200' }}"></div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">

        {{-- PASO 1 --}}
        @if($paso == 1)
        <h2 class="text-xl font-bold text-gray-800 mb-5">Datos generales del proyecto</h2>

        <div class="bg-blue-50 border-l-4 border-blue-600 p-3 mb-5 rounded-r-xl">
            <p class="text-blue-800 text-sm">
                <strong>Límite máximo:</strong> hasta 10 SMMLV = <strong>${{ $maxFormato }} COP</strong>
            </p>
        </div>

        <div class="space-y-5">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de emprendimiento *</label>
                <div class="grid grid-cols-2 gap-4">
                    @foreach(['creacion' => ['🚀','Creación','Empresa no constituida legalmente'], 'fortalecimiento' => ['📈','Fortalecimiento','Empresa legalmente constituida']] as $val => $info)
                    <label class="cursor-pointer">
                        <input type="radio" wire:model.live="tipo_emprendimiento" value="{{ $val }}" class="sr-only peer">
                        <div class="border-2 rounded-xl p-4 transition peer-checked:border-blue-600 peer-checked:bg-blue-50 hover:border-blue-300">
                            <p class="font-semibold text-gray-700">{{ $info[0] }} {{ $info[1] }}</p>
                            <p class="text-xs text-gray-500 mt-1">{{ $info[2] }}</p>
                        </div>
                    </label>
                    @endforeach
                </div>
                @error('tipo_emprendimiento') <p class="text-red-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            @if($tipo_emprendimiento === 'fortalecimiento')
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nombre empresa</label>
                    <input wire:model.lazy="nombre_empresa" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Razón social">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">NIT</label>
                    <input wire:model.lazy="nit" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="900.123.456-7">
                </div>
            </div>
            @endif

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Descripción del negocio *</label>
                <textarea wire:model.lazy="descripcion_negocio" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Describe la actividad económica, productos/servicios..."></textarea>
                @error('descripcion_negocio') <p class="text-red-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Descripción del proyecto *</label>
                <textarea wire:model.lazy="descripcion_proyecto" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="¿En qué se invertirá el capital semilla?"></textarea>
                @error('descripcion_proyecto') <p class="text-red-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Monto solicitado (COP) *</label>
                    <input wire:model.lazy="monto_solicitado" type="number" step="1000" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500" placeholder="Máx ${{ $maxFormato }}">
                    @error('monto_solicitado') <p class="text-red-600 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Plazo *</label>
                    <select wire:model="plazo_meses" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500">
                        @foreach(config('fempha.plazos_disponibles', [12,24,36,48,60]) as $p)
                        <option value="{{ $p }}">{{ $p }} meses</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        @endif

        {{-- PASO 2 --}}
        @if($paso == 2)
        <h2 class="text-xl font-bold text-gray-800 mb-2">Plan de inversión — Anexo 1</h2>
        <p class="text-sm text-gray-500 mb-5">Detalla los rubros a financiar con el Capital Semilla.</p>

        <div class="space-y-4">
            @foreach($items as $i => $item)
            <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                <div class="flex justify-between items-center mb-3">
                    <span class="font-semibold text-gray-700 text-sm">Ítem #{{ $i+1 }}</span>
                    @if(count($items) > 1)
                    <button wire:click="eliminarItem({{ $i }})" class="text-red-500 hover:text-red-700 text-xs">🗑 Eliminar</button>
                    @endif
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="text-xs font-medium text-gray-600">Rubro *</label>
                        <input wire:model.lazy="items.{{ $i }}.rubro" type="text" class="w-full border rounded-lg px-2 py-1.5 text-sm mt-1 focus:ring-2 focus:ring-blue-500" placeholder="Ej: Compra laptop">
                        @error("items.{$i}.rubro") <p class="text-red-500 text-xs">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="text-xs font-medium text-gray-600">Categoría *</label>
                        <select wire:model="items.{{ $i }}.categoria" class="w-full border rounded-lg px-2 py-1.5 text-sm mt-1 focus:ring-2 focus:ring-blue-500">
                            @foreach($categorias as $val => $lbl)
                            <option value="{{ $val }}">{{ $lbl }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-medium text-gray-600">Valor (COP) *</label>
                        <input wire:model.lazy="items.{{ $i }}.valor" type="number" step="1000" class="w-full border rounded-lg px-2 py-1.5 text-sm mt-1" placeholder="0">
                        @error("items.{$i}.valor") <p class="text-red-500 text-xs">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="text-xs font-medium text-gray-600">Proveedor</label>
                        <input wire:model.lazy="items.{{ $i }}.proveedor" type="text" class="w-full border rounded-lg px-2 py-1.5 text-sm mt-1" placeholder="Opcional">
                    </div>
                    <div class="col-span-2">
                        <label class="text-xs font-medium text-gray-600">Descripción *</label>
                        <input wire:model.lazy="items.{{ $i }}.descripcion" type="text" class="w-full border rounded-lg px-2 py-1.5 text-sm mt-1" placeholder="Especificación del ítem">
                        @error("items.{$i}.descripcion") <p class="text-red-500 text-xs">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>
            @endforeach

            <button wire:click="agregarItem" class="w-full border-2 border-dashed border-blue-300 text-blue-600 hover:border-blue-500 hover:bg-blue-50 rounded-xl py-3 text-sm font-medium transition">
                + Agregar ítem
            </button>
        </div>

        <div class="mt-5 bg-blue-700 text-white rounded-xl p-4 flex justify-between items-center">
            <span class="font-semibold">Total Plan de Inversión:</span>
            <span class="text-2xl font-bold">${{ $totalFormato }} COP</span>
        </div>
        @endif

        {{-- PASO 3 --}}
        @if($paso == 3)
        <h2 class="text-xl font-bold text-gray-800 mb-2">Actividades período de gracia — Anexo 2</h2>
        <p class="text-sm text-gray-500 mb-5">Define qué harás durante los 6 meses de gracia.</p>

        <div class="space-y-4">
            @foreach($actividades as $i => $act)
            <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                <div class="flex justify-between items-center mb-3">
                    <span class="font-semibold text-gray-700 text-sm">Actividad #{{ $i+1 }}</span>
                    @if(count($actividades) > 1)
                    <button wire:click="eliminarActividad({{ $i }})" class="text-red-500 hover:text-red-700 text-xs">🗑 Eliminar</button>
                    @endif
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div class="col-span-2">
                        <label class="text-xs font-medium text-gray-600">Actividad *</label>
                        <input wire:model.lazy="actividades.{{ $i }}.actividad" type="text" class="w-full border rounded-lg px-2 py-1.5 text-sm mt-1" placeholder="Ej: Apertura del negocio">
                        @error("actividades.{$i}.actividad") <p class="text-red-500 text-xs">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="text-xs font-medium text-gray-600">Fecha inicio *</label>
                        <input wire:model="actividades.{{ $i }}.fecha_inicio" type="date" class="w-full border rounded-lg px-2 py-1.5 text-sm mt-1">
                    </div>
                    <div>
                        <label class="text-xs font-medium text-gray-600">Fecha fin *</label>
                        <input wire:model="actividades.{{ $i }}.fecha_fin" type="date" class="w-full border rounded-lg px-2 py-1.5 text-sm mt-1">
                    </div>
                    <div>
                        <label class="text-xs font-medium text-gray-600">Mes de ejecución (1-6) *</label>
                        <select wire:model="actividades.{{ $i }}.mes_ejecucion" class="w-full border rounded-lg px-2 py-1.5 text-sm mt-1">
                            @for($m = 1; $m <= 6; $m++)
                            <option value="{{ $m }}">Mes {{ $m }}</option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-medium text-gray-600">Costo estimado (COP)</label>
                        <input wire:model.lazy="actividades.{{ $i }}.costo_estimado" type="number" step="1000" class="w-full border rounded-lg px-2 py-1.5 text-sm mt-1" placeholder="0">
                    </div>
                </div>
            </div>
            @endforeach
            <button wire:click="agregarActividad" class="w-full border-2 border-dashed border-blue-300 text-blue-600 hover:border-blue-500 hover:bg-blue-50 rounded-xl py-3 text-sm font-medium transition">
                + Agregar actividad
            </button>
        </div>
        @endif

        {{-- PASO 4 --}}
        @if($paso == 4)
        <h2 class="text-xl font-bold text-gray-800 mb-5">Documentos requeridos</h2>
        @php
            $tipos = $tipo_emprendimiento === 'creacion'
                ? \App\Models\DocumentoAdjunto::tiposCreacion()
                : \App\Models\DocumentoAdjunto::tiposFortalecimiento();
        @endphp
        <div class="space-y-3">
            @foreach($tipos as $key => $label)
            <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-200">
                <span class="text-blue-600">📄</span>
                <span class="text-sm text-gray-700 flex-1">{{ $label }}</span>
                <span class="text-xs text-orange-600 font-medium">Requerido</span>
            </div>
            @endforeach
        </div>
        <div class="mt-4 bg-yellow-50 border border-yellow-200 rounded-xl p-4">
            <p class="text-yellow-800 text-sm font-medium">📎 Nota</p>
            <p class="text-yellow-700 text-xs mt-1">Los documentos se cargan en el portal después de radicar la solicitud, desde el detalle de tu solicitud.</p>
        </div>
        @endif

        {{-- PASO 5 --}}
        @if($paso == 5)
        <h2 class="text-xl font-bold text-gray-800 mb-5">Revisión y radicación</h2>

        <div class="bg-gray-50 rounded-xl p-5 mb-6 border border-gray-200">
            <p class="font-semibold text-gray-700 mb-3">📋 Resumen de tu solicitud</p>
            <div class="grid grid-cols-2 gap-y-2 text-sm">
                <div><span class="text-gray-500">Tipo:</span> <span class="font-medium">{{ $tipo_emprendimiento === 'creacion' ? 'Creación' : 'Fortalecimiento' }}</span></div>
                <div><span class="text-gray-500">Monto:</span> <span class="font-medium">${{ number_format((float)$monto_solicitado, 0, ',', '.') }} COP</span></div>
                <div><span class="text-gray-500">Plazo:</span> <span class="font-medium">{{ $plazo_meses }} meses</span></div>
                <div><span class="text-gray-500">Ítems plan:</span> <span class="font-medium">{{ count($items) }}</span></div>
                <div><span class="text-gray-500">Actividades:</span> <span class="font-medium">{{ count($actividades) }}</span></div>
                <div><span class="text-gray-500">Total inversión:</span> <span class="font-medium">${{ $totalFormato }} COP</span></div>
            </div>
        </div>

        <label class="flex items-start gap-3 cursor-pointer">
            <input type="checkbox" wire:model="acepta_terminos" class="mt-1 h-4 w-4 text-blue-600 rounded">
            <span class="text-sm text-gray-700 leading-relaxed">
                Declaro que la información es verídica y completa. Entiendo que el Capital Semilla está sujeto a
                aprobación del Comité y la Junta Directiva de FEMPHA, y me comprometo a presentar los
                <strong>6 informes mensuales</strong> durante el período de gracia.
            </span>
        </label>
        @error('acepta_terminos') <p class="text-red-600 text-xs mt-2">Debes aceptar los términos para continuar.</p> @enderror
        @endif

        {{-- Botones de navegación --}}
        <div class="flex justify-between items-center mt-8 pt-6 border-t border-gray-100">
            <button wire:click="anterior"
                class="px-5 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm transition {{ $paso == 1 ? 'invisible' : '' }}">
                ← Anterior
            </button>

            @if($paso < $totalPasos)
            <div class="flex gap-2">
                <button wire:click="guardarBorrador"
                    class="px-4 py-2 text-blue-700 border border-blue-300 rounded-lg hover:bg-blue-50 text-sm transition">
                    💾 Guardar borrador
                </button>
                <button wire:click="siguiente"
                    class="px-6 py-2 text-white rounded-lg font-semibold text-sm transition"
                    style="background:linear-gradient(135deg,#FF6600,#e05500);box-shadow:0 4px 12px rgba(255,102,0,0.35);">
                    Siguiente →
                </button>
            </div>
            @else
            <button wire:click="radicar"
                class="px-8 py-3 bg-green-700 text-white rounded-lg hover:bg-green-800 font-bold transition">
                📤 Radicar solicitud
            </button>
            @endif
        </div>
    </div>
</div>