<!DOCTYPE html>
<html lang="es" x-data="themeManager()" :class="{ 'dark': dark }" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo e($title ?? 'Admin OLT C300'); ?></title>
    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
</head>
<body class="h-full bg-gray-50 dark:bg-surface-900 text-gray-900 dark:text-gray-100 font-sans">

<div class="flex h-full min-h-screen" x-data="{ mobileOpen: false }">

    
    <div x-show="mobileOpen"
         x-transition:enter="transition-opacity ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="mobileOpen = false"
         class="fixed inset-0 bg-black/50 z-20 lg:hidden"
         style="display:none"></div>

    
    
    <aside class="fixed inset-y-0 left-0 z-30 flex flex-col w-72 sm:w-64
                  bg-white dark:bg-surface-850
                  border-r border-gray-200/80 dark:border-white/5
                  transition-transform duration-300
                  lg:static lg:inset-auto lg:!translate-x-0 lg:z-auto"
           :class="mobileOpen ? 'translate-x-0' : '-translate-x-full'">

        
        <div class="flex items-center gap-3 px-5 py-5 border-b border-gray-200/80 dark:border-white/5">
            <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700
                        flex items-center justify-center shadow-glow-purple flex-shrink-0">
                <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/>
                </svg>
            </div>
            <div class="flex-1">
                <div class="font-bold text-gray-900 dark:text-white leading-tight">Admin OLT</div>
                <div class="text-xs text-gray-400 dark:text-gray-500 font-mono">ZTE C300</div>
            </div>
            
            <button @click="mobileOpen = false"
                    class="lg:hidden p-1.5 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-200
                           hover:bg-gray-100 dark:hover:bg-white/8 transition-colors">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        
        <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
            <div class="section-title">Principal</div>

            <a href="<?php echo e(route('dashboard')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('dashboard') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
                </svg>
                Dashboard
            </a>

            <div class="section-title pt-4">Dispositivos</div>

            <a href="<?php echo e(route('devices.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('devices.*') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01"/>
                </svg>
                Dispositivos OLT
            </a>

            <div class="section-title pt-4">ONUs</div>

            <a href="<?php echo e(route('onus.create')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('onus.create') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Autorizar ONU
            </a>

            <a href="<?php echo e(route('onus.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('onus.index') || request()->routeIs('onus.show') || request()->routeIs('onus.edit') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
                </svg>
                Lista de ONUs
            </a>

            <a href="<?php echo e(route('rogue.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('rogue.*') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                ONUs Rogue
                <span class="ml-auto">
                    <span class="w-2 h-2 rounded-full bg-yellow-400 animate-pulse-slow inline-block"></span>
                </span>
            </a>

            <a href="<?php echo e(route('pon-power.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('pon-power.*') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                Potencia PON
            </a>

            <a href="<?php echo e(route('onu-status.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('onu-status.*') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                Estado ONUs
            </a>

            <a href="<?php echo e(route('onu-search.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('onu-search.*') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                Buscar ONU
            </a>

            <a href="<?php echo e(route('backup-config.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('backup-config.*') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                </svg>
                Backup Config
            </a>

            <a href="<?php echo e(route('power-alerts.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('power-alerts.*') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                Alertas Potencia
                <?php $unackCount = \App\Models\PowerAlert::where('acknowledged', false)->count(); ?>
                <?php if($unackCount > 0): ?>
                    <span class="badge-red text-[10px] ml-auto"><?php echo e($unackCount); ?></span>
                <?php endif; ?>
            </a>

            <div class="section-title pt-4">Monitoreo</div>

            <a href="<?php echo e(route('monitor.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('monitor.*') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
                Monitor OLT
            </a>

            <div class="section-title pt-4">Sistema</div>

            <a href="<?php echo e(route('logs.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('logs.*') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                </svg>
                Historial
            </a>

            <?php if(auth()->user()->isAdmin()): ?>
            <a href="<?php echo e(route('users.index')); ?>" @click="mobileOpen = false"
               class="nav-link flex items-center gap-3 <?php echo e(request()->routeIs('users.*') ? 'nav-link-active' : 'nav-link-inactive'); ?>">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                </svg>
                Usuarios
            </a>
            <?php endif; ?>
        </nav>

        
        <div class="px-3 py-4 border-t border-gray-200/80 dark:border-white/5">
            <div class="flex items-center gap-3 px-3 py-2 rounded-lg">
                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-accent-500
                            flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                    <?php echo e(strtoupper(substr(auth()->user()->name, 0, 2))); ?>

                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
                        <?php echo e(auth()->user()->name); ?>

                    </div>
                    <div class="text-xs text-gray-400 truncate flex items-center gap-1.5">
                        <?php if(auth()->user()->isAdmin()): ?>
                            <span class="w-1.5 h-1.5 rounded-full bg-primary-400"></span>
                            <span>Admin</span>
                        <?php else: ?>
                            <span><?php echo e(auth()->user()->email); ?></span>
                        <?php endif; ?>
                    </div>
                </div>
                <form method="POST" action="<?php echo e(route('logout')); ?>">
                    <?php echo csrf_field(); ?>
                    <button type="submit" title="Cerrar sesión"
                            class="text-gray-400 hover:text-red-400 transition-colors p-1 rounded">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                        </svg>
                    </button>
                </form>
            </div>
        </div>
    </aside>

    
    <div class="flex-1 flex flex-col min-w-0 overflow-hidden">

        
        <header class="flex items-center justify-between h-14 px-4 sm:px-6
                       bg-white dark:bg-surface-850
                       border-b border-gray-200/80 dark:border-white/5
                       flex-shrink-0 z-10">
            <div class="flex items-center gap-3">
                
                <button @click="mobileOpen = !mobileOpen"
                        class="lg:hidden p-1.5 rounded-lg text-gray-500 hover:text-gray-700 dark:text-gray-400
                               dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/8 transition-colors">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </button>

                
                <?php if(isset($breadcrumb)): ?>
                    <div class="hidden sm:flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                        <?php echo e($breadcrumb); ?>

                    </div>
                <?php endif; ?>
            </div>

            <div class="flex items-center gap-2">
                
                <button @click="toggle()"
                        class="p-2 rounded-lg text-gray-500 hover:text-gray-700 dark:text-gray-400
                               dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/8 transition-colors"
                        :title="dark ? 'Modo claro' : 'Modo oscuro'">
                    <svg x-show="!dark" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                    </svg>
                    <svg x-show="dark" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                </button>

                
                <a href="<?php echo e(route('onus.create')); ?>"
                   class="btn btn-accent btn-sm hidden sm:inline-flex">
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
                    </svg>
                    Nueva ONU
                </a>

                
                <a href="<?php echo e(route('onus.create')); ?>"
                   class="sm:hidden p-2 rounded-lg text-accent-600 dark:text-accent-400
                          hover:bg-accent-50 dark:hover:bg-accent-900/20 transition-colors"
                   title="Autorizar ONU">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
                    </svg>
                </a>
            </div>
        </header>

        
        <div class="px-4 sm:px-6 pt-4 space-y-2 flex-shrink-0">
            <?php if(session('success')): ?>
                <div class="alert-success animate-fade-in" x-data x-init="setTimeout(() => $el.remove(), 5000)">
                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="flex-1 text-sm"><?php echo e(session('success')); ?></span>
                    <button onclick="this.parentElement.remove()" class="ml-2 opacity-60 hover:opacity-100">&times;</button>
                </div>
            <?php endif; ?>
            <?php if(session('error')): ?>
                <div class="alert-error animate-fade-in" x-data x-init="setTimeout(() => $el.remove(), 7000)">
                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="flex-1 text-sm"><?php echo e(session('error')); ?></span>
                    <button onclick="this.parentElement.remove()" class="ml-2 opacity-60 hover:opacity-100">&times;</button>
                </div>
            <?php endif; ?>
        </div>

        
        <main class="flex-1 overflow-y-auto px-4 py-4 sm:px-6 sm:py-5">
            <?php echo e($slot); ?>

        </main>
    </div>
</div>


<div id="globalModal"
     class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden"
     onclick="if(event.target===this) closeModal()">
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
    <div id="modalPanel"
         class="relative w-full max-w-md rounded-2xl shadow-2xl
                bg-white dark:bg-surface-850
                border border-gray-200/80 dark:border-white/5
                transform transition-all duration-200 scale-95 opacity-0">
        <div class="flex items-start gap-4 p-6">
            <div id="modalIconWrap" class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg id="modalIcon" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"></svg>
            </div>
            <div class="flex-1 min-w-0">
                <h3 id="modalTitle" class="text-base font-semibold text-gray-900 dark:text-white leading-snug"></h3>
                <p id="modalMessage" class="mt-1.5 text-sm text-gray-600 dark:text-gray-400 leading-relaxed"></p>
            </div>
            <button onclick="closeModal()"
                    class="flex-shrink-0 p-1.5 rounded-lg text-gray-400 hover:text-gray-600
                           dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/8 transition-colors">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div id="modalDetailWrap" class="hidden px-6 pb-4">
            <div class="rounded-lg bg-gray-900 dark:bg-black/50 border border-white/5 p-4 max-h-48 overflow-auto">
                <pre id="modalDetail" class="text-xs font-mono text-gray-300 whitespace-pre-wrap break-words"></pre>
            </div>
        </div>
        <div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-gray-100 dark:border-white/5">
            <div id="modalExtraAction" class="mr-auto"></div>
            <button onclick="closeModal()" class="btn-ghost btn-sm">Cerrar</button>
            <button id="modalPrimaryBtn" onclick="closeModal()" class="btn-primary btn-sm hidden"></button>
        </div>
    </div>
</div>

<script>
function themeManager() {
    return {
        dark: localStorage.getItem('theme') === 'dark' ||
              (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches),
        toggle() {
            this.dark = !this.dark;
            localStorage.setItem('theme', this.dark ? 'dark' : 'light');
        }
    }
}

const MODAL_TYPES = {
    success: { wrap: 'bg-accent-100 dark:bg-accent-900/30',   icon: 'text-accent-600 dark:text-accent-400',  path: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' },
    error:   { wrap: 'bg-red-100 dark:bg-red-900/30',         icon: 'text-red-600 dark:text-red-400',        path: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z' },
    warning: { wrap: 'bg-yellow-100 dark:bg-yellow-900/30',   icon: 'text-yellow-600 dark:text-yellow-400',  path: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z' },
    info:    { wrap: 'bg-primary-100 dark:bg-primary-900/30', icon: 'text-primary-600 dark:text-primary-400',path: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },
};

function showModal({ type = 'info', title = '', message = '', detail = '', primaryBtn = null } = {}) {
    const cfg = MODAL_TYPES[type] || MODAL_TYPES.info;
    document.getElementById('modalIconWrap').className = `w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${cfg.wrap}`;
    document.getElementById('modalIcon').className    = `w-6 h-6 ${cfg.icon}`;
    document.getElementById('modalIcon').innerHTML    = `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${cfg.path}"/>`;
    document.getElementById('modalTitle').textContent   = title;
    document.getElementById('modalMessage').textContent = message;
    const detailWrap = document.getElementById('modalDetailWrap');
    if (detail) { document.getElementById('modalDetail').textContent = detail; detailWrap.classList.remove('hidden'); }
    else { detailWrap.classList.add('hidden'); }
    const primaryBtnEl = document.getElementById('modalPrimaryBtn');
    if (primaryBtn) {
        primaryBtnEl.textContent = primaryBtn.text;
        primaryBtnEl.onclick     = () => { closeModal(); primaryBtn.action?.(); };
        primaryBtnEl.className   = `btn btn-sm ${primaryBtn.class || 'btn-primary'}`;
        primaryBtnEl.classList.remove('hidden');
    } else {
        primaryBtnEl.classList.add('hidden');
    }
    document.getElementById('modalExtraAction').innerHTML = '';
    const modal = document.getElementById('globalModal');
    const panel = document.getElementById('modalPanel');
    modal.classList.remove('hidden');
    requestAnimationFrame(() => { panel.style.transform = 'scale(1)'; panel.style.opacity = '1'; });
}

function closeModal() {
    const modal = document.getElementById('globalModal');
    const panel = document.getElementById('modalPanel');
    panel.style.transform = 'scale(0.95)';
    panel.style.opacity   = '0';
    setTimeout(() => modal.classList.add('hidden'), 180);
}

document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
</script>

</body>
</html>
<?php /**PATH C:\xampp\htdocs\adminolt\resources\views/layouts/app.blade.php ENDPATH**/ ?>