<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal de Clientes | <?= $this->fetch('title') ?></title>
    <link rel="icon" type="image/png" href="<?= $this->Url->image('logoQP.png') ?>">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        :root {
            --portal-primary: #1d4ed8;
            --portal-primary-dark: #1e3a8a;
            --portal-accent: #0ea5a4;
            --portal-bg: #f4f6fb;
            --portal-surface: #ffffff;
            --portal-ink: #1f2937;
            --portal-muted: #6b7280;
            --portal-border: #e5e7eb;
        }

        body {
            background-color: var(--portal-bg);
            color: var(--portal-ink);
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

        .portal-navbar {
            background: linear-gradient(90deg, var(--portal-primary-dark) 0%, var(--portal-primary) 100%);
            box-shadow: 0 2px 8px rgba(30, 58, 138, 0.15);
        }

        .portal-brand {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-weight: 700;
            font-size: 1.15rem;
            color: #fff !important;
        }

        .portal-logo {
            height: 36px;
            width: auto;
            flex-shrink: 0;
        }

        .portal-navbar .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            transition: color .15s ease;
        }

        .portal-navbar .nav-link:hover,
        .portal-navbar .nav-link.active {
            color: #fff !important;
        }

        .portal-client-chip {
            background: rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            padding: .35rem .9rem;
            color: #fff;
            font-size: .875rem;
        }

        .card {
            border: 1px solid var(--portal-border);
            border-radius: 10px;
        }

        .btn-portal-primary {
            background-color: var(--portal-primary);
            border-color: var(--portal-primary);
            color: #fff;
        }

        .btn-portal-primary:hover {
            background-color: var(--portal-primary-dark);
            border-color: var(--portal-primary-dark);
            color: #fff;
        }

        .btn-portal-accent {
            background-color: var(--portal-accent);
            border-color: var(--portal-accent);
            color: #fff;
        }

        .btn-portal-accent:hover {
            background-color: #0b8685;
            border-color: #0b8685;
            color: #fff;
        }

        .table thead {
            background-color: var(--portal-primary-dark);
            color: #fff;
        }

        a {
            color: var(--portal-primary);
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg portal-navbar">
        <div class="container">
            <a class="navbar-brand portal-brand" href="<?= $this->Url->build(['prefix' => 'Portal', 'controller' => 'Dashboard', 'action' => 'index']) ?>">
                <img src="<?= $this->Url->image('logoQP.png') ?>" alt="Logo QP" class="portal-logo">
                Portal de Clientes
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navPortal">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navPortal">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="<?= $this->Url->build(['prefix' => 'Portal', 'controller' => 'Dashboard', 'action' => 'index']) ?>">
                            <i class="fas fa-house me-1"></i> Inicio
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?= $this->Url->build(['prefix' => 'Portal', 'controller' => 'Facturas', 'action' => 'index']) ?>">
                            <i class="fas fa-file-invoice me-1"></i> Mis Facturas
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?= $this->Url->build(['prefix' => 'Portal', 'controller' => 'Presupuestos', 'action' => 'index']) ?>">
                            <i class="fas fa-file-invoice-dollar me-1"></i> Mis Presupuestos
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?= $this->Url->build(['prefix' => 'Portal', 'controller' => 'Citas', 'action' => 'index']) ?>">
                            <i class="fas fa-calendar-check me-1"></i> Mis Citas
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?= $this->Url->build(['prefix' => 'Portal', 'controller' => 'Pagos', 'action' => 'index']) ?>">
                            <i class="fas fa-sync-alt me-1"></i> Mis Pagos
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav align-items-lg-center gap-2">
                    <?php if (!empty($clienteAutenticado)): ?>
                    <li class="nav-item">
                        <span class="portal-client-chip"><i class="fas fa-user me-1"></i><?= h($clienteAutenticado->nombre_razon_social) ?></span>
                    </li>
                    <?php endif; ?>
                    <li class="nav-item">
                        <a class="nav-link" href="<?= $this->Url->build(['prefix' => 'Portal', 'controller' => 'Portal', 'action' => 'logout']) ?>">
                            <i class="fas fa-sign-out-alt"></i> Salir
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4 mb-5">
        <!-- <?= $this->Flash->render() ?> -->
        <?= $this->fetch('content') ?>
    </div>
</body>
</html>
