@extends('admin.layouts.app')

@section('titulo', 'Módulos de '.$empresa->nombre)
@section('subtitulo', 'Activa qué verá esta empresa en su panel')

@section('contenido')
<div class="max-w-4xl">
    <a href="{{ route('admin.empresas.index') }}" class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-brand-600 mb-4">
        <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>

    <form method="POST" action="{{ route('admin.empresas.modulos.update', $empresa) }}">
        @csrf @method('PUT')

        <div class="flex items-center justify-between bg-white rounded-2xl shadow-sm shadow-slate-200/60 px-6 py-4 mb-5">
            <div class="flex items-center gap-3">
                <div class="h-11 w-11 rounded-xl flex items-center justify-center text-white font-bold" style="background: {{ $empresa->color_primario }}">{{ mb_strtoupper(mb_substr($empresa->nombre, 0, 2)) }}</div>
                <div>
                    <p class="font-semibold text-slate-800">{{ $empresa->nombre }}</p>
                    <p class="text-xs text-slate-400">{{ $empresa->tipoNegocio?->nombre }} · Plan {{ $empresa->planActual?->nombre ?? '—' }}</p>
                </div>
            </div>
            <div class="flex items-center gap-2 text-sm">
                <button type="button" onclick="marcarTodos(true)" class="px-3 py-1.5 rounded-lg text-slate-600 hover:bg-slate-100 font-medium">Todos</button>
                <button type="button" onclick="marcarTodos(false)" class="px-3 py-1.5 rounded-lg text-slate-600 hover:bg-slate-100 font-medium">Ninguno</button>
            </div>
        </div>

        <div class="space-y-5">
            @foreach ($modulos as $grupo => $items)
                <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6">
                    <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-4">{{ $grupo }}</h3>
                    <div class="grid sm:grid-cols-2 gap-3">
                        @foreach ($items as $modulo)
                            @php $on = in_array($modulo->id, $activos); @endphp
                            <label class="mod-item flex items-start gap-3 rounded-xl border p-3.5 cursor-pointer transition {{ $on ? 'border-brand-300 bg-brand-50/40' : 'border-slate-100 hover:border-slate-200' }}">
                                <input type="checkbox" name="modulos[]" value="{{ $modulo->id }}" @checked($on) onchange="pintar(this)" class="mt-0.5 rounded border-slate-300 text-brand-500 focus:ring-brand-400 h-4 w-4">
                                <span class="h-9 w-9 rounded-lg bg-white border border-slate-100 flex items-center justify-center text-brand-500 shrink-0">@include('partials.icon', ['name' => $modulo->icono, 'class' => 'h-5 w-5'])</span>
                                <span class="min-w-0">
                                    <span class="block text-sm font-semibold text-slate-800">{{ $modulo->nombre }}</span>
                                    <span class="block text-xs text-slate-400 leading-tight">{{ $modulo->descripcion }}</span>
                                </span>
                            </label>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>

        <div class="flex items-center justify-end gap-3 mt-6">
            <a href="{{ route('admin.empresas.index') }}" class="px-5 py-2.5 rounded-xl text-slate-600 font-medium hover:bg-slate-100 transition">Cancelar</a>
            <button type="submit" class="px-6 py-2.5 rounded-xl bg-ink-800 hover:bg-ink-900 text-white font-semibold shadow-lg transition">Guardar módulos</button>
        </div>
    </form>
</div>

@push('scripts')
<script>
    function pintar(cb){const b=cb.closest('.mod-item');if(cb.checked){b.classList.add('border-brand-300','bg-brand-50/40');b.classList.remove('border-slate-100');}else{b.classList.remove('border-brand-300','bg-brand-50/40');b.classList.add('border-slate-100');}}
    function marcarTodos(v){document.querySelectorAll('input[name="modulos[]"]').forEach(cb=>{cb.checked=v;pintar(cb);});}
</script>
@endpush
@endsection