@extends('admin.layouts.app')

@section('titulo', 'Empresas Cliente')
@section('subtitulo', 'Crea el perfil de cada negocio, elige su rubro y decide qué módulos verá')

@php
    $q = request('q'); $tipoActual = request('tipo');
    $planClases = [
        'basico'     => 'bg-slate-100 text-slate-600',
        'pro'        => 'bg-brand-50 text-brand-600',
        'enterprise' => 'bg-violet-50 text-violet-600',
    ];
    $totalModulos = \App\Models\Modulo::count();
@endphp

@section('contenido')
{{-- KPIs --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    @foreach ([
        ['Empresas', $stats['total'], 'building', 'from-brand-500 to-brand-400', 'text-brand-500'],
        ['Activas', $stats['activas'], 'check', 'from-emerald-500 to-teal-400', 'text-emerald-500'],
        ['En prueba', $stats['prueba'], 'clipboard', 'from-amber-500 to-orange-400', 'text-amber-500'],
        ['MRR', 'S/ '.number_format($stats['mrr'], 0), 'wallet', 'from-violet-500 to-fuchsia-400', 'text-violet-500'],
    ] as [$label, $valor, $icono, $color, $tint])
        <div class="relative overflow-hidden bg-white rounded-2xl p-5 shadow-sm shadow-slate-200/60 hover:shadow-md transition">
            <div class="absolute -right-5 -top-5 h-24 w-24 rounded-full bg-gradient-to-br {{ $color }} opacity-[0.08]"></div>
            <div class="relative flex items-center gap-4">
                <div class="h-12 w-12 rounded-2xl bg-gradient-to-br {{ $color }} text-white flex items-center justify-center shadow-lg shrink-0">
                    @include('partials.icon', ['name' => $icono, 'class' => 'h-6 w-6'])
                </div>
                <div class="min-w-0">
                    <p class="text-2xl font-extrabold text-slate-800 leading-tight">{{ $valor }}</p>
                    <p class="text-sm text-slate-500">{{ $label }}</p>
                </div>
            </div>
        </div>
    @endforeach
</div>

{{-- Barra de herramientas --}}
<div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-6">
    <form method="GET" class="relative flex-1 max-w-md">
        <svg class="h-5 w-5 text-slate-400 absolute left-3.5 top-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/></svg>
        @if ($tipoActual)<input type="hidden" name="tipo" value="{{ $tipoActual }}">@endif
        <input type="text" name="q" value="{{ $q }}" placeholder="Buscar empresa..."
               class="w-full rounded-xl border border-slate-200 bg-white pl-11 pr-4 py-2.5 text-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-100">
    </form>
    <form method="GET">
        @if ($q)<input type="hidden" name="q" value="{{ $q }}">@endif
        <select name="tipo" onchange="this.form.submit()" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400">
            <option value="">Todos los rubros</option>
            @foreach ($tipos as $t)
                <option value="{{ $t->slug }}" @selected($tipoActual === $t->slug)>{{ $t->nombre }}</option>
            @endforeach
        </select>
    </form>
    <a href="{{ route('admin.empresas.create') }}"
       class="inline-flex items-center justify-center gap-2 rounded-xl bg-ink-800 hover:bg-ink-900 text-white font-semibold px-4 py-2.5 shadow-lg transition sm:ml-auto">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg>
        Nueva empresa
    </a>
</div>

{{-- Grid de tarjetas --}}
@if ($empresas->count())
    <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
        @foreach ($empresas as $empresa)
            @php
                $sub = $empresa->suscripciones->whereIn('estado', ['activa', 'prueba'])->sortByDesc('fecha_inicio')->first();
                $color = $empresa->color_primario ?: '#2f6bff';
                $mods = $empresa->modulos_activos_count;
                $pct = $totalModulos ? min(100, round($mods / $totalModulos * 100)) : 0;
            @endphp
            <div class="group bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition duration-200">

                {{-- Acento de color superior (no se superpone con nada) --}}
                <div class="h-1.5" style="background: linear-gradient(90deg, {{ $color }}, {{ $color }}99);"></div>

                <div class="p-5">
                    {{-- Cabecera: avatar + nombre + estado (todo sobre blanco) --}}
                    <div class="flex items-start gap-3">
                        <div class="h-14 w-14 rounded-2xl flex items-center justify-center text-white text-xl font-extrabold shadow-md shrink-0"
                             style="background: linear-gradient(135deg, {{ $color }}, {{ $color }}cc);">
                            {{ mb_strtoupper(mb_substr($empresa->nombre, 0, 1)) }}
                        </div>
                        <div class="min-w-0 flex-1">
                            <a href="{{ route('admin.empresas.show', $empresa) }}" class="font-bold text-slate-800 hover:text-brand-600 transition block truncate">{{ $empresa->nombre }}</a>
                            <p class="text-xs text-slate-400 truncate">{{ $empresa->email ?? 'sin correo' }}</p>
                        </div>
                        @if ($empresa->activo)
                            <span class="inline-flex items-center gap-1.5 text-[11px] font-bold tracking-wide px-2.5 py-1 rounded-lg bg-emerald-50 text-emerald-600 shrink-0"><span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>ACTIVA</span>
                        @else
                            <span class="inline-flex items-center gap-1.5 text-[11px] font-bold tracking-wide px-2.5 py-1 rounded-lg bg-slate-100 text-slate-500 shrink-0"><span class="h-1.5 w-1.5 rounded-full bg-slate-400"></span>INACTIVA</span>
                        @endif
                    </div>

                    {{-- Chips --}}
                    <div class="flex flex-wrap items-center gap-2 mt-4">
                        <span class="text-xs font-medium px-2.5 py-1 rounded-lg bg-brand-50 text-brand-600">{{ $empresa->tipoNegocio?->nombre ?? 'Sin rubro' }}</span>
                        @if ($empresa->planActual)
                            <span class="text-xs font-medium px-2.5 py-1 rounded-lg {{ $planClases[$empresa->planActual->slug] ?? 'bg-slate-100 text-slate-600' }}">Plan {{ $empresa->planActual->nombre }}</span>
                        @else
                            <span class="text-xs font-medium px-2.5 py-1 rounded-lg bg-slate-100 text-slate-400">Sin plan</span>
                        @endif
                    </div>

                    {{-- Módulos y usuarios --}}
                    <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-4 text-xs text-slate-500">
                        <span class="inline-flex items-center gap-1.5">
                            <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"/></svg>
                            <span><span class="font-semibold text-slate-700">{{ $mods }}</span> de {{ $totalModulos }} módulos</span>
                        </span>
                        <span class="inline-flex items-center gap-1.5">
                            <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87m6-2a4 4 0 10-6 0m9 0a3 3 0 10-4 0"/></svg>
                            <span><span class="font-semibold text-slate-700">{{ $empresa->usuarios_count }}</span> {{ $empresa->usuarios_count == 1 ? 'usuario' : 'usuarios' }}</span>
                        </span>
                    </div>
                    <div class="h-1.5 rounded-full bg-slate-100 overflow-hidden mt-2">
                        <div class="h-full rounded-full" style="width: {{ $pct }}%; background: {{ $color }};"></div>
                    </div>

                    {{-- Datos --}}
                    <div class="grid grid-cols-3 gap-2 mt-4">
                        <div class="rounded-xl bg-slate-50 p-2.5">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">RUC / ID</p>
                            <p class="text-sm font-semibold text-slate-700 truncate">{{ $empresa->ruc ?? '—' }}</p>
                        </div>
                        <div class="rounded-xl bg-slate-50 p-2.5">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Precio/mes</p>
                            <p class="text-sm font-semibold text-slate-700">S/ {{ number_format($empresa->planActual?->precio_mensual ?? 0, 0) }}</p>
                        </div>
                        <div class="rounded-xl bg-slate-50 p-2.5">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Vence</p>
                            <p class="text-sm font-semibold text-slate-700">{{ $sub?->fecha_fin?->format('d/m/y') ?? '—' }}</p>
                        </div>
                    </div>

                    {{-- Acciones --}}
                    <div class="flex items-center gap-2 mt-4 pt-4 border-t border-slate-100">
                        <a href="{{ route('admin.empresas.edit', $empresa) }}" class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 hover:border-brand-300 text-slate-700 hover:text-brand-600 font-medium px-3 py-1.5 text-sm transition">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            Editar
                        </a>
                        <a href="{{ route('admin.empresas.modulos', $empresa) }}" class="inline-flex items-center gap-1.5 rounded-lg bg-brand-500 hover:bg-brand-600 text-white font-medium px-3 py-1.5 text-sm shadow-sm shadow-brand-500/30 transition">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"/></svg>
                            Módulos
                        </a>
                        <form method="POST" action="{{ route('admin.empresas.toggle', $empresa) }}">
                            @csrf @method('PATCH')
                            <button type="submit" title="{{ $empresa->activo ? 'Desactivar' : 'Activar' }}" class="inline-flex items-center rounded-lg border border-slate-200 hover:border-amber-300 text-slate-600 hover:text-amber-600 font-medium px-3 py-1.5 text-sm transition">
                                {{ $empresa->activo ? 'Desactivar' : 'Activar' }}
                            </button>
                        </form>
                        <form method="POST" action="{{ route('admin.empresas.destroy', $empresa) }}" onsubmit="return confirm('¿Eliminar la empresa {{ $empresa->nombre }}? Se borrarán sus usuarios y datos. Esta acción no se puede deshacer.');" class="ml-auto">
                            @csrf @method('DELETE')
                            <button type="submit" title="Eliminar" class="h-9 w-9 rounded-lg border border-slate-200 hover:border-red-300 hover:bg-red-50 text-slate-400 hover:text-red-600 flex items-center justify-center transition">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="mt-6">{{ $empresas->links() }}</div>
@else
    <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-16 text-center">
        <div class="mx-auto h-16 w-16 rounded-2xl bg-gradient-to-br from-brand-500 to-brand-400 text-white flex items-center justify-center mb-4 shadow-lg">
            @include('partials.icon', ['name' => 'building', 'class' => 'h-8 w-8'])
        </div>
        <p class="text-slate-700 font-semibold">No hay empresas registradas @if($q || $tipoActual)con ese filtro @endif</p>
        <p class="text-sm text-slate-400 mt-1">Crea la primera empresa cliente para comenzar.</p>
        <a href="{{ route('admin.empresas.create') }}" class="mt-4 inline-flex items-center gap-2 rounded-xl bg-ink-800 hover:bg-ink-900 text-white font-semibold px-4 py-2.5 shadow-lg transition">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg>
            Nueva empresa
        </a>
    </div>
@endif
@endsection