<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo $__env->yieldContent('title', 'Ojo de Águila'); ?></title>
    <link rel="stylesheet" href="<?php echo e(asset('css/app.css')); ?>">
    <!-- Leaflet JS (para mapas) -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="app-sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="logo-icon">🦅</div>
                <div class="logo-text">
                    <span class="logo-title">OJO DE ÁGUILA</span>
                    <span class="logo-subtitle">CONTROL DE ACCESO</span>
                </div>
            </div>

            <ul class="sidebar-menu">
                <li class="menu-item">
                    <a href="<?php echo e(route('dashboard')); ?>" class="menu-link <?php echo e(request()->routeIs('dashboard') ? 'active' : ''); ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                        </svg>
                        Dashboard
                    </a>
                </li>
                
                <?php if(Auth::user()->isGuard() || Auth::user()->isClientAdmin() || Auth::user()->hasRole(\App\Enums\UserRole::SUPERVISOR)): ?>
                <li class="menu-item">
                    <a href="<?php echo e(route('access.create')); ?>" class="menu-link <?php echo e(request()->routeIs('access.create') ? 'active' : ''); ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Registrar Ingreso
                    </a>
                </li>
                <?php endif; ?>

                <li class="menu-item">
                    <a href="<?php echo e(route('access.index')); ?>" class="menu-link <?php echo e(request()->routeIs('access.index') ? 'active' : ''); ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12M8.25 17.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                        </svg>
                        Registros de Acceso
                    </a>
                </li>

                <li class="menu-item">
                    <a href="<?php echo e(route('monitoring')); ?>" class="menu-link <?php echo e(request()->routeIs('monitoring') ? 'active' : ''); ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        Monitoreo en Tiempo Real
                    </a>
                </li>

                <li class="menu-item">
                    <a href="<?php echo e(route('tracking')); ?>" class="menu-link <?php echo e(request()->routeIs('tracking') ? 'active' : ''); ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25g9 9 0 1118 0z" />
                        </svg>
                        Monitoreo GPS
                    </a>
                </li>

                <li class="menu-item">
                    <a href="<?php echo e(route('incidents.index')); ?>" class="menu-link <?php echo e(request()->routeIs('incidents.index') ? 'active' : ''); ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                        </svg>
                        Incidencias
                    </a>
                </li>

                <?php if(Auth::user()->isClientAdmin() || Auth::user()->hasRole(\App\Enums\UserRole::SUPERVISOR)): ?>
                <li class="menu-item">
                    <a href="<?php echo e(route('authorizations.index')); ?>" class="menu-link <?php echo e(request()->routeIs('authorizations.index') ? 'active' : ''); ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
                        </svg>
                        Autorizaciones
                    </a>
                </li>
                <?php endif; ?>

                <?php if(Auth::user()->isSuperAdmin()): ?>
                <li class="menu-item">
                    <a href="<?php echo e(route('admin.accounts')); ?>" class="menu-link <?php echo e(request()->routeIs('admin.accounts') ? 'active' : ''); ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
                        </svg>
                        Administración SaaS
                    </a>
                </li>
                <?php endif; ?>
            </ul>

            <div class="sidebar-footer">
                <div class="recinto-card">
                    <div class="recinto-icon">🏢</div>
                    <div class="recinto-info">
                        <div class="recinto-name"><?php echo e(Auth::user()->account ? Auth::user()->account->name : 'SaaS Global'); ?></div>
                        <div class="recinto-status">
                            <span class="status-dot"></span> Acceso Principal
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <div class="app-content">
            <!-- Header -->
            <header class="app-header">
                <div class="header-welcome">
                    <h2 class="welcome-title"><?php echo $__env->yieldContent('header_title', 'Dashboard'); ?></h2>
                    <p class="welcome-subtitle">Hola, <?php echo e(Auth::user()->name); ?>. Bienvenido de vuelta.</p>
                </div>

                <div class="header-actions">
                    <div class="header-datetime" id="datetime-display">
                        Cargando hora...
                    </div>
                    
                    <button class="notification-btn">
                        🔔
                        <span class="notification-badge">3</span>
                    </button>

                    <div class="user-profile" onclick="document.getElementById('logout-form').submit();" title="Cerrar Sesión">
                        <div class="user-avatar">
                            <?php echo e(substr(Auth::user()->name, 0, 1)); ?>

                        </div>
                        <div class="user-info">
                            <span class="user-name"><?php echo e(Auth::user()->name); ?></span>
                            <span class="user-role"><?php echo e(Auth::user()->role->label()); ?></span>
                        </div>
                    </div>
                    
                    <form id="logout-form" action="<?php echo e(route('logout')); ?>" method="POST" style="display: none;">
                        <?php echo csrf_field(); ?>
                    </form>
                </div>
            </header>

            <!-- Page Content -->
            <main class="page-body">
                <?php if(session('success')): ?>
                    <div style="background-color: var(--success-light); color: var(--success-color); border: 1px solid rgba(16, 185, 129, 0.2); padding: 16px; border-radius: var(--radius-md); font-weight: 600; margin-bottom: 24px; font-size: 14px;">
                        <?php echo e(session('success')); ?>

                    </div>
                <?php endif; ?>
                
                <?php if(session('error')): ?>
                    <div style="background-color: var(--danger-light); color: var(--danger-color); border: 1px solid rgba(239, 68, 68, 0.2); padding: 16px; border-radius: var(--radius-md); font-weight: 600; margin-bottom: 24px; font-size: 14px;">
                        <?php echo e(session('error')); ?>

                    </div>
                <?php endif; ?>

                <?php echo $__env->yieldContent('content'); ?>
            </main>
        </div>

        <!-- Mobile Navigation (Bottom Nav) -->
        <nav class="mobile-nav">
            <a href="<?php echo e(route('dashboard')); ?>" class="mobile-nav-item <?php echo e(request()->routeIs('dashboard') ? 'active' : ''); ?>">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                </svg>
                Dashboard
            </a>
            
            <a href="<?php echo e(route('access.index')); ?>" class="mobile-nav-item <?php echo e(request()->routeIs('access.index') ? 'active' : ''); ?>">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12M8.25 17.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                </svg>
                Registros
            </a>

            <?php if(Auth::user()->isGuard() || Auth::user()->isClientAdmin()): ?>
            <div class="mobile-nav-item mobile-nav-center">
                <a href="<?php echo e(route('access.create')); ?>" class="mobile-nav-fab">
                    <span style="font-size: 24px; font-weight: 700;">+</span>
                </a>
            </div>
            <?php endif; ?>

            <a href="<?php echo e(route('monitoring')); ?>" class="mobile-nav-item <?php echo e(request()->routeIs('monitoring') ? 'active' : ''); ?>">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                Monitoreo
            </a>

            <a href="#" onclick="document.getElementById('logout-form').submit();" class="mobile-nav-item">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                </svg>
                Salir
            </a>
        </nav>
    </div>

    <!-- Clock script and GPS Tracking script -->
    <script>
        // Update Time & Date
        function updateDateTime() {
            const now = new Date();
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            const dateStr = now.toLocaleDateString('es-CL', options);
            const timeStr = now.toLocaleTimeString('es-CL', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
            
            document.getElementById('datetime-display').innerHTML = `📅 ${dateStr} - ⏰ ${timeStr}`;
        }
        setInterval(updateDateTime, 1000);
        updateDateTime();

        // Guard GPS Tracking
        <?php if(Auth::user()->isGuard()): ?>
        function trackGuardLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    const accuracy = position.coords.accuracy;

                    // Enviar al servidor via AJAX
                    fetch('/api/tracking/position', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({
                            latitude: lat,
                            longitude: lng,
                            accuracy: accuracy
                        })
                    }).then(response => {
                        if (!response.ok) {
                            console.error('Error sending GPS position');
                        }
                    }).catch(error => {
                        console.error('Error in location API:', error);
                    });
                }, function(error) {
                    console.warn('Geolocation error:', error.message);
                }, {
                    enableHighAccuracy: true,
                    timeout: 20000,
                    maximumAge: 10000
                });
            }
        }
        
        // Enviar la posición cada 30 segundos
        setInterval(trackGuardLocation, 30000);
        trackGuardLocation(); // Primer registro inmediato
        <?php endif; ?>
    </script>
</body>
</html>
<?php /**PATH C:\xampp\htdocs\ojodeaguila\resources\views/layouts/app.blade.php ENDPATH**/ ?>