<?php 
// Christo Lochenberg Developments | info@christodev.co.za | +27 61 523 9126
$appSettings = getSettings();

// --- DYNAMIC SEO ENGINE ---
// Fallback to global app name if a specific page title isn't provided by the Controller
$pageTitle = isset($data['title']) ? htmlspecialchars($data['title']) . ' | ' . htmlspecialchars($appSettings['app_name'] ?? SITENAME) : htmlspecialchars($appSettings['app_name'] ?? SITENAME);

// Fallback to global SEO description if a specific page description isn't provided
$pageDesc = isset($data['description']) ? htmlspecialchars($data['description']) : htmlspecialchars($appSettings['seo_description'] ?? '');
$pageKeywords = htmlspecialchars($appSettings['seo_keywords'] ?? '');

// SEO Image Logic: Target the uploaded Favicon icon. Fallback to the brand folder if nothing is uploaded.
$seoImage = '';
if (!empty($appSettings['favicon'])) {
    $seoImage = URLROOT . '/uploads/' . htmlspecialchars($appSettings['favicon']);
} else {
    $seoImage = URLROOT . '/uploads/brand/icon.png';
}

// Determine current exact URL for Canonical and Open Graph routing
$currentProtocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http";
$currentUrl = $currentProtocol . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

// --- DYNAMIC THEME COLOR ENGINE ---
// Convert HEX theme color to RGB components for CSS Variables
$hexColor = $appSettings['theme_color'] ?? '#2563eb';
$hex = ltrim($hexColor, '#');

if (strlen($hex) == 3) {
    $r = hexdec(substr($hex, 0, 1) . substr($hex, 0, 1));
    $g = hexdec(substr($hex, 1, 1) . substr($hex, 1, 1));
    $b = hexdec(substr($hex, 2, 1) . substr($hex, 2, 1));
} else {
    $r = hexdec(substr($hex, 0, 2));
    $g = hexdec(substr($hex, 2, 2));
    $b = hexdec(substr($hex, 4, 2));
}
$rgbColor = "$r $g $b";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title><?php echo $pageTitle; ?></title>
    <meta name="description" content="<?php echo $pageDesc; ?>">
    <meta name="keywords" content="<?php echo $pageKeywords; ?>">
    <link rel="canonical" href="<?php echo $currentUrl; ?>">
    
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo $currentUrl; ?>">
    <meta property="og:title" content="<?php echo $pageTitle; ?>">
    <meta property="og:description" content="<?php echo $pageDesc; ?>">
    <meta property="og:image" content="<?php echo $seoImage; ?>">
    
    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="<?php echo $currentUrl; ?>">
    <meta name="twitter:title" content="<?php echo $pageTitle; ?>">
    <meta name="twitter:description" content="<?php echo $pageDesc; ?>">
    <meta name="twitter:image" content="<?php echo $seoImage; ?>">
    
    <?php if(!empty($appSettings['favicon'])): ?>
        <link rel="icon" href="<?php echo URLROOT; ?>/uploads/<?php echo htmlspecialchars($appSettings['favicon']); ?>">
    <?php endif; ?>
    
    <link rel="manifest" href="<?php echo URLROOT; ?>/pages/manifest">
    <meta name="theme-color" content="<?php echo $hexColor; ?>">
    <link rel="apple-touch-icon" href="<?php echo $seoImage; ?>">
    
    <link rel="stylesheet" href="<?php echo URLROOT; ?>/css/globals.css">
    <link href="https://cdn.datatables.net/2.0.2/css/dataTables.tailwindcss.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/3.0.0/css/responsive.tailwindcss.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.0.2/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.0.2/js/dataTables.tailwindcss.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.0/js/dataTables.responsive.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.0/js/responsive.tailwindcss.js"></script>

    <style>
        :root {
            --color-primary-rgb: <?php echo $rgbColor; ?>;
            --color-primary-hex: <?php echo $hexColor; ?>;
        }
    </style>
    
    <script src="<?php echo URLROOT; ?>/js/tailwindcss.js" onerror="this.onerror=null;this.src='https://cdn.tailwindcss.com?plugins=typography';"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: 'rgb(var(--color-primary-rgb) / <alpha-value>)',
                    },
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    
    <script>
        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    </script>
</head>
<body class="bg-gray-200 text-gray-900 dark:bg-gray-900 dark:text-gray-100 flex flex-col h-screen overflow-hidden selection:bg-primary/30 selection:text-primary">

    <?php require APPROOT . '/app/Views/layouts/navbar.php'; ?>
    
    <?php if(isLoggedIn()) : ?>
        <div class="flex flex-1 overflow-hidden relative w-full">
            
            <?php require APPROOT . '/app/Views/layouts/sidebar.php'; ?>
            
            <main id="main-scroll-area" class="flex-1 overflow-y-auto w-full flex flex-col relative">
                <div class="p-4 md:p-8 flex-1">
    <?php else : ?>
        <main id="main-scroll-area" class="flex-1 overflow-y-auto w-full flex flex-col relative">
            <div class="container mx-auto px-4 py-8 flex-1">
    <?php endif; ?>