@php
    $user = auth()->user();

    // Activo por "route name" (acepta comodines tipo empresa.tags.*)
    $isActive = fn (string $pattern) => request()->routeIs($pattern);

    // Clase final para cada link del sidebar (misma lógica desktop + mobile)
    $navClass = function (string $pattern) use ($isActive) {
        return 'nav-link sidebar-link' . ($isActive($pattern) ? ' active' : '');
    };

    // ✅ Pendientes por empresa (en este proyecto el user tiene empresa_id)
    $empresaId = (int) ($user->empresa_id ?? 0);
    $pendientes = 0;

    if ($empresaId) {
        $pendientes = \App\Models\Recordatorio::where('empresa_id', $empresaId)
                        ->where('estado','pendiente')
                        ->count();
    }
@endphp

{{-- =======================
   CSS (puedes moverlo a app.css)
======================= --}}
<style>
    /* Links del sidebar: SIEMPRE blancos (evita azul por defecto de Bootstrap) */
    .sidebar-link{
        color:#fff !important;
        border-radius:.5rem;
        padding:.65rem .85rem;
        display:flex;
        align-items:center;
        gap:.5rem;
    }
    .sidebar-link i{ opacity:.95; }

    .sidebar-link:hover{
        color:#fff !important;
        background: rgba(255,255,255,.06);
    }

    /* Estado activo */
    .nav-pills .sidebar-link.active{
        color:#fff !important;
        background:#0d6efd !important; /* azul bootstrap */
    }

    /* Encabezado sección */
    .sidebar-section{
        letter-spacing:.08em;
    }
</style>

{{-- =======================
   SIDEBAR DESKTOP
======================= --}}
<aside class="bg-dark text-white d-none d-md-flex flex-column"
       style="width:280px; flex:0 0 280px; min-height:100vh;">

    {{-- Logo --}}
    <div class="border-bottom border-secondary text-center py-3">
        <a href="{{ route('dashboard') }}" class="d-block">
            <img src="{{ asset('images/logoMensajeando.png') }}"
                 alt="Mensajeando"
                 style="height:120px; width:auto;">
        </a>
    </div>

    <nav class="p-3 flex-grow-1">

        <div class="fw-semibold">{{ $user->name }}</div>
        <small class="text-white-50 d-block mb-3">{{ $user->email }}</small>

        <ul class="nav nav-pills flex-column gap-1">
            <li class="nav-item">
                <a class="{{ $navClass('dashboard') }}"
                   href="{{ route('dashboard') }}">
                    <i class="bi bi-speedometer2"></i> Dashboard
                </a>
            </li>
        </ul>

        <div class="sidebar-section text-uppercase text-white-50 small px-2 mt-3">Trabajo</div>

        <ul class="nav nav-pills flex-column gap-1 mt-2">
            <li class="nav-item">
                <a class="{{ $navClass('empresa.campanas.*') }}"
                   href="{{ route('empresa.campanas.index') }}">
                    <i class="bi bi-megaphone"></i> Campañas
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.contactos.*') }}"
                   href="{{ route('empresa.contactos.index') }}">
                    <i class="bi bi-person-lines-fill"></i> Contactos
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.reportes.*') }}"
                   href="#">
                    <i class="bi bi-graph-up"></i> Reportes
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.plantillas.*') }}"
                   href="{{ route('empresa.plantillas.index') }}">
                    <i class="bi bi-file-earmark-text"></i> Plantillas
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.tags.*') }}"
                   href="{{ route('empresa.tags.index') }}">
                    <i class="bi bi-tags"></i> Tags
                </a>
            </li>
           <li class="nav-item">
                <a class="{{ $navClass('empresa.servicios.*') }}"
                href="{{ route('empresa.servicios.index') }}">
                    <i class="bi bi-briefcase"></i> Servicios
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.clientes.*') }}"
                href="{{ route('empresa.clientes.index') }}">
                    <i class="bi bi-people"></i> Clientes
                </a>
            </li>

            {{-- ✅ Recordatorios + badge --}}
            <li class="nav-item">
                <a class="{{ $navClass('empresa.recordatorios.*') }}"
                   href="{{ route('empresa.recordatorios.index') }}">
                    <i class="bi bi-alarm"></i> Recordatorios

                    @if($pendientes > 0)
                        <span class="badge bg-warning text-dark ms-auto">
                            {{ $pendientes }}
                        </span>
                    @endif
                </a>
            </li>
        </ul>

    </nav>

    <div class="p-3 border-top border-secondary">
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button class="btn btn-outline-light w-100">
                <i class="bi bi-box-arrow-right me-2"></i> Cerrar sesión
            </button>
        </form>
    </div>
</aside>

{{-- =======================
   SIDEBAR MOBILE (OFFCANVAS)
======================= --}}
<div class="offcanvas offcanvas-start bg-dark text-white d-md-none"
     tabindex="-1"
     id="mobileSidebar"
     style="width:280px;">

    <div class="offcanvas-header border-bottom border-secondary">
        <img src="{{ asset('images/logoMensajeando.png') }}"
             alt="Mensajeando"
             style="height:120px; width:auto;">
        <button type="button"
                class="btn-close btn-close-white"
                data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body">

        <div class="fw-semibold">{{ $user->name }}</div>
        <small class="text-white-50 d-block mb-3">{{ $user->email }}</small>

        <ul class="nav nav-pills flex-column gap-1">
            <li class="nav-item">
                <a class="{{ $navClass('dashboard') }}"
                   href="{{ route('dashboard') }}">
                    <i class="bi bi-speedometer2"></i> Dashboard
                </a>
            </li>
        </ul>

        <div class="sidebar-section text-uppercase text-white-50 small px-2 mt-3">Trabajo</div>

        <ul class="nav nav-pills flex-column gap-1 mt-2">
            <li class="nav-item">
                <a class="{{ $navClass('empresa.campanas.*') }}"
                   href="{{ route('empresa.campanas.index') }}">
                    <i class="bi bi-megaphone"></i> Campañas
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.contactos.*') }}"
                   href="{{ route('empresa.contactos.index') }}">
                    <i class="bi bi-person-lines-fill"></i> Contactos
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.reportes.*') }}"
                   href="#">
                    <i class="bi bi-graph-up"></i> Reportes
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.plantillas.*') }}"
                   href="{{ route('empresa.plantillas.index') }}">
                    <i class="bi bi-file-earmark-text"></i> Plantillas
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.tags.*') }}"
                   href="{{ route('empresa.tags.index') }}">
                    <i class="bi bi-tags"></i> Tags
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.servicios.*') }}"
                href="{{ route('empresa.servicios.index') }}">
                    <i class="bi bi-briefcase"></i> Servicios
                </a>
            </li>

            <li class="nav-item">
                <a class="{{ $navClass('empresa.clientes.*') }}"
                href="{{ route('empresa.clientes.index') }}">
                    <i class="bi bi-people"></i> Clientes
                </a>
            </li>

            {{-- ✅ Recordatorios + badge --}}
            <li class="nav-item">
                <a class="{{ $navClass('empresa.recordatorios.*') }}"
                   href="{{ route('empresa.recordatorios.index') }}">
                    <i class="bi bi-alarm"></i> Recordatorios

                    @if($pendientes > 0)
                        <span class="badge bg-warning text-dark ms-auto">
                            {{ $pendientes }}
                        </span>
                    @endif
                </a>
            </li>
        </ul>

        <div class="mt-4 border-top border-secondary pt-3">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button class="btn btn-outline-light w-100">
                    <i class="bi bi-box-arrow-right me-2"></i> Cerrar sesión
                </button>
            </form>
        </div>

    </div>
</div>