@extends('admin.layouts.app')

@section('titulo', $empresa->nombre)
@section('subtitulo', $empresa->tipoNegocio?->nombre.' · '.($empresa->planActual?->nombre ?? 'sin plan'))

@php
    $estadosSub = [
        'activa' => 'bg-emerald-50 text-emerald-600',
        'prueba' => 'bg-amber-50 text-amber-600',
        'vencida' => 'bg-red-50 text-red-600',
        'cancelada' => 'bg-slate-100 text-slate-500',
    ];
@endphp

@section('contenido')
<div class="flex items-center justify-between mb-4">
    <a href="{{ route('admin.empresas.index') }}" class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-brand-600">
        <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="M15 19l-7-7 7-7"/></svg>
        Volver a empresas
    </a>
    <div class="flex items-center gap-2">
        <a href="{{ route('admin.empresas.modulos', $empresa) }}" class="inline-flex items-center gap-2 rounded-xl bg-white border border-slate-200 hover:border-brand-300 text-slate-700 font-medium px-4 py-2 text-sm transition">Módulos</a>
        <a href="{{ route('admin.empresas.edit', $empresa) }}" class="inline-flex items-center gap-2 rounded-xl bg-ink-800 hover:bg-ink-900 text-white font-medium px-4 py-2 text-sm transition">Editar</a>
    </div>
</div>

<div class="grid lg:grid-cols-3 gap-5">
    <div class="lg:col-span-2 space-y-5">
        <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6 sm:p-7">
            <div class="flex items-center gap-4">
                <div class="h-16 w-16 rounded-2xl flex items-center justify-center text-white text-2xl font-extrabold shadow" style="background: {{ $empresa->color_primario }}">{{ mb_strtoupper(mb_substr($empresa->nombre, 0, 2)) }}</div>
                <div>
                    <h2 class="text-xl font-extrabold text-slate-800">{{ $empresa->nombre }}</h2>
                    <p class="text-sm text-slate-500">{{ $empresa->email }} · {{ $empresa->telefono }}</p>
                </div>
            </div>
            <dl class="mt-5 pt-5 border-t border-slate-100 grid sm:grid-cols-2 gap-x-8 gap-y-3 text-sm">
                @foreach ([
                    'Tipo de negocio' => $empresa->tipoNegocio?->nombre ?? '—',
                    'RUC' => $empresa->ruc ?? '—',
                    'Dirección' => $empresa->direccion ?? '—',
                    'Estado' => $empresa->activo ? 'Activa' : 'Inactiva',
                ] as $label => $valor)
                    <div class="flex justify-between gap-4"><dt class="text-slate-400">{{ $label }}</dt><dd class="text-slate-700 font-medium text-right">{{ $valor }}</dd></div>
                @endforeach
            </dl>
        </div>

        <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6">
            <h3 class="font-bold text-slate-800 mb-4">Usuarios ({{ $empresa->usuarios->count() }})</h3>
            <div class="space-y-2">
                @forelse ($empresa->usuarios as $u)
                    <div class="flex items-center gap-3 py-2">
                        <div class="h-8 w-8 rounded-full bg-brand-50 text-brand-600 flex items-center justify-center text-xs font-bold">{{ $u->iniciales() }}</div>
                        <div class="flex-1 min-w-0"><p class="text-sm font-medium text-slate-700 truncate">{{ $u->name }}</p><p class="text-xs text-slate-400 truncate">{{ $u->email }}</p></div>
                        <span class="text-xs font-medium px-2 py-1 rounded-lg bg-slate-100 text-slate-600 capitalize">{{ $u->rol }}</span>
                    </div>
                @empty
                    <p class="text-sm text-slate-400">Sin usuarios.</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="space-y-5">
        <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6">
            <h3 class="font-bold text-slate-800 mb-3">Suscripción</h3>
            @php $sub = $empresa->suscripcionActiva(); @endphp
            @if ($sub)
                <div class="rounded-xl bg-slate-50 p-4">
                    <div class="flex items-center justify-between">
                        <span class="font-semibold text-slate-800">{{ $sub->plan?->nombre }}</span>
                        <span class="text-xs font-medium px-2 py-1 rounded-lg capitalize {{ $estadosSub[$sub->estado] ?? 'bg-slate-100 text-slate-600' }}">{{ $sub->estado }}</span>
                    </div>
                    <p class="text-2xl font-extrabold text-slate-800 mt-2">S/ {{ number_format($sub->precio, 2) }}<span class="text-sm font-medium text-slate-400">/{{ $sub->ciclo }}</span></p>
                    <p class="text-xs text-slate-400 mt-1">Vence: {{ $sub->fecha_fin?->format('d/m/Y') ?? '—' }}</p>
                </div>
            @else
                <p class="text-sm text-slate-400">Sin suscripción vigente.</p>
            @endif
            <a href="{{ route('admin.suscripciones.index') }}" class="mt-3 inline-block text-sm font-medium text-brand-600 hover:underline">Ver suscripciones</a>
        </div>

        <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6">
            <div class="flex items-center justify-between mb-3">
                <h3 class="font-bold text-slate-800">Módulos activos</h3>
                <span class="text-xs font-medium text-slate-400">{{ $modulosActivos->count() }}</span>
            </div>
            <div class="flex flex-wrap gap-1.5">
                @foreach ($modulosActivos as $m)
                    <span class="text-xs font-medium px-2 py-1 rounded-lg bg-brand-50 text-brand-600">{{ $m->nombre }}</span>
                @endforeach
            </div>
            <a href="{{ route('admin.empresas.modulos', $empresa) }}" class="mt-4 inline-block text-sm font-medium text-brand-600 hover:underline">Gestionar módulos</a>
        </div>
    </div>
</div>
@endsection