@extends('layouts.app')

@section('content')
<div class="admin-layout">
    <!-- Staff Sidebar Nav -->
    <aside class="admin-sidebar glass">
        <h3 class="sidebar-heading">Portal Empleado</h3>
        
        <a href="{{ route('staff.appointments.index') }}" class="sidebar-link {{ request()->routeIs('staff.appointments.*') ? 'active' : '' }}">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            Mis Citas Asignadas
        </a>

        @php
            $unreadNotificationsCount = auth()->user()->notifications()->where('is_read', false)->count();
        @endphp
        <a href="{{ route('notifications.index') }}" class="sidebar-link {{ request()->routeIs('notifications.*') ? 'active' : '' }}" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
            <span style="display: inline-flex; align-items: center; gap: 0.75rem;">
                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                Notificaciones
            </span>
            @if($unreadNotificationsCount > 0)
                <span style="background-color: var(--color-error); color: white; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 9999px;">{{ $unreadNotificationsCount }}</span>
            @endif
        </a>
        
        <span class="sidebar-heading" style="margin-top: 1.5rem;">Mi Perfil</span>
        <div style="padding: 0.5rem 1rem; font-size: 0.85rem; color: var(--text-secondary);">
            <strong style="display: block; color: var(--text-primary);">{{ Auth::user()->name }}</strong>
            <span>{{ Auth::user()->staffProfile->role ?? 'Profesional' }}</span>
        </div>
    </aside>

    <!-- Staff Content Area -->
    <section class="admin-main glass">
        @yield('staff-content')
    </section>
</div>
@endsection