<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>" class="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo $__env->yieldContent('title', 'Área de Cliente | Secure Vision'); ?></title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700|outfit:400,500,600,700,800&display=swap" rel="stylesheet" />

    <style>
        body { font-family: 'Inter', sans-serif; }
        h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; }
        [x-cloak] { display: none !important; }
    </style>

    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
</head>
<body class="antialiased bg-slate-950 text-slate-300 selection:bg-blue-500 selection:text-white flex h-screen overflow-hidden" x-data="{ sidebarOpen: false }">

    <!-- Mobile Sidebar Backdrop -->
    <div x-cloak x-show="sidebarOpen" @click="sidebarOpen = false" class="fixed inset-0 z-40 bg-slate-900/80 backdrop-blur-sm lg:hidden"></div>

    <!-- Sidebar -->
    <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="fixed inset-y-0 left-0 z-50 w-72 bg-slate-900 border-r border-white/5 transition-transform duration-300 lg:translate-x-0 lg:static lg:w-72 flex flex-col">
        <!-- Sidebar Header -->
        <div class="h-20 flex items-center px-8 border-b border-white/5 shrink-0">
            <a href="<?php echo e(route('home')); ?>" class="flex items-center gap-3 group shrink-0">
                <div class="w-10 h-10 rounded-lg bg-linear-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold shadow-lg shadow-blue-500/20">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
                    </svg>
                </div>
                <span class="text-xl font-bold font-heading text-white tracking-tight">Portal<span class="text-blue-500">Cliente</span></span>
            </a>
        </div>

        <!-- Sidebar Links -->
        <nav class="flex-1 overflow-y-auto py-6 px-4 space-y-1 custom-scrollbar">
            
            <a href="<?php echo e(route('client.dashboard')); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl <?php echo e(request()->routeIs('client.dashboard') ? 'bg-blue-600/10 text-blue-400' : 'text-slate-400 hover:bg-white/5 hover:text-white'); ?> transition-colors">
                <svg class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                <span class="font-medium text-sm">Visão Geral</span>
            </a>

            <a href="<?php echo e(route('client.equipment.index')); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl <?php echo e(request()->routeIs('client.equipment.*') ? 'bg-blue-600/10 text-blue-400' : 'text-slate-400 hover:bg-white/5 hover:text-white'); ?> transition-colors">
                <svg class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
                <span class="font-medium text-sm">Minhas Aparelhagens</span>
            </a>

            <a href="<?php echo e(route('client.billing.index')); ?>" class="flex items-center justify-between px-4 py-3 rounded-xl <?php echo e(request()->routeIs('client.billing.*') ? 'bg-blue-600/10 text-blue-400' : 'text-slate-400 hover:bg-white/5 hover:text-white'); ?> transition-colors">
                <div class="flex items-center gap-3">
                    <svg class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
                    <span class="font-medium text-sm">Contratos e Faturas</span>
                </div>
            </a>

            <div class="pt-6 pb-2">
                <p class="px-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">Assistência</p>
            </div>

            <a href="<?php echo e(route('client.tickets.index')); ?>" class="flex items-center justify-between px-4 py-3 rounded-xl <?php echo e(request()->routeIs('client.tickets.*') ? 'bg-blue-600/10 text-blue-400' : 'text-slate-400 hover:bg-white/5 hover:text-white'); ?> transition-colors">
                <div class="flex items-center gap-3">
                    <svg class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                    <span class="font-medium text-sm">Suporte Técnico</span>
                </div>
            </a>
            
        </nav>

        <!-- User bottom section -->
        <div class="p-4 border-t border-white/5">
            <div class="flex items-center flex-col gap-3 px-4 py-4 rounded-xl bg-slate-950 border border-white/5 relative overflow-hidden text-center group">
                <div class="absolute inset-0 bg-linear-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
                <div class="relative z-10 w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center text-white font-bold text-lg">
                    <?php echo e(substr(Auth::user()->name ?? 'C', 0, 1)); ?>

                </div>
                <div class="relative z-10 min-w-0 flex-1">
                    <p class="text-sm font-medium text-white truncate"><?php echo e(Auth::user()->name ?? 'Cliente'); ?></p>
                    <p class="text-xs text-slate-400 truncate mb-3">ID: <?php echo e(Auth::id() ?? '---'); ?></p>
                </div>
                <form method="POST" action="<?php echo e(route('logout')); ?>" class="relative z-10 w-full">
                    <?php echo csrf_field(); ?>
                    <button type="submit" class="w-full py-2 flex items-center justify-center gap-2 text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/10 rounded-lg border border-white/10 transition-colors">
                        <svg class="h-4 w-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>
                        Terminar Sessão
                    </button>
                </form>
            </div>
        </div>
    </aside>

    <!-- Main Content Wrapper -->
    <div class="flex-1 flex flex-col min-w-0 bg-slate-950 relative">
        <!-- Floating Header -->
        <header class="h-20 px-6 lg:px-10 flex items-center justify-between z-30 relative shrink-0 border-b border-white/5">
            <div class="flex items-center gap-4">
                <button @click="sidebarOpen = true" class="p-2 -ml-2 text-slate-400 hover:text-white lg:hidden">
                    <svg class="h-6 w-6" 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>
                <div>
                    <h2 class="text-2xl font-bold font-heading text-white"><?php echo $__env->yieldContent('header_title', 'Área Privada'); ?></h2>
                    <p class="text-sm text-slate-400 hidden sm:block"><?php echo $__env->yieldContent('header_subtitle', 'Consulte as informações da sua conta.'); ?></p>
                </div>
            </div>

            <div class="flex items-center gap-4">
                <a href="<?php echo e(route('client.tickets.create')); ?>" class="hidden sm:flex px-4 py-2 rounded-lg bg-blue-600/10 text-blue-400 text-sm font-semibold hover:bg-blue-600/20 transition-colors">
                    Reportar Problema
                </a>
            </div>
        </header>

        <!-- Page Content -->
        <main class="flex-1 overflow-y-auto px-6 lg:px-10 py-8 custom-scrollbar relative">
            <!-- Background Decoration -->
            <div class="absolute top-0 right-0 w-1/2 h-96 bg-[radial-gradient(circle_at_top_right,var(--tw-gradient-stops))] from-blue-900/10 via-transparent to-transparent blur-3xl rounded-full z-0 pointer-events-none"></div>

            <div class="relative z-10">
                <?php echo $__env->yieldContent('content'); ?>
            </div>
        </main>
    </div>

    <!-- Extra global scripts/styles -->
    <style>
        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }
    </style>
</body>
</html>
<?php /**PATH C:\laragon\www\secure-vision-app\resources\views\layouts\client.blade.php ENDPATH**/ ?>