<form wire:submit="save" class="space-y-6">

    <x-card title="Datos generales">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre del plan *</label>
                <input type="text" wire:model="name" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500" required>
                @error('name') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>
                <textarea wire:model="description" rows="2" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500"></textarea>
            </div>
        </div>
    </x-card>

    <x-card title="Precios y límites">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Precio mensual (COP)</label>
                <input type="number" wire:model="price_monthly" step="100" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Precio anual (COP)</label>
                <input type="number" wire:model="price_yearly" step="100" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Máx. empleados (vacío = ∞)</label>
                <input type="number" wire:model="max_employees" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Máx. servicios</label>
                <input type="number" wire:model="max_services" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Máx. reservas / mes</label>
                <input type="number" wire:model="max_bookings_month" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Máx. sedes</label>
                <input type="number" wire:model="max_branches" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
        </div>

        <div class="mt-4 flex flex-wrap gap-4">
            <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                <input type="checkbox" wire:model="is_active" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                Activo
            </label>
            <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                <input type="checkbox" wire:model="is_featured" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                Destacado
            </label>
            <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                <input type="checkbox" wire:model="is_public" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                Visible públicamente
            </label>
        </div>
    </x-card>

    <x-card title="Módulos incluidos" subtitle="Activa o desactiva cada módulo para este plan. Los cambios aplican a las empresas que usen este plan.">
        @foreach ($modules as $group => $items)
            <div class="mb-4">
                <p class="text-xs font-semibold uppercase text-gray-500 tracking-wider mb-2">{{ $groups[$group] ?? $group }}</p>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                    @foreach ($items as $module)
                        <label class="flex items-start gap-3 p-3 rounded-xl border border-gray-200 hover:bg-gray-50 cursor-pointer transition">
                            <input type="checkbox" wire:model="selected_modules" value="{{ $module->id }}"
                                   class="mt-0.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="min-w-0">
                                <span class="block text-sm font-semibold text-gray-900">{{ $module->name }}</span>
                                <span class="block text-[11px] text-gray-500">{{ $module->key }}</span>
                            </span>
                            @if ($module->is_core)
                                <span class="ml-auto shrink-0"><x-badge color="indigo" size="xs">base</x-badge></span>
                            @endif
                        </label>
                    @endforeach
                </div>
            </div>
        @endforeach
    </x-card>

    <div class="flex items-center justify-end gap-2">
        <x-btn href="{{ route('superadmin.plans.index') }}" variant="secondary">Cancelar</x-btn>
        <x-btn type="submit" variant="primary">{{ $plan ? 'Actualizar plan' : 'Crear plan' }}</x-btn>
    </div>
</form>
