<?php
/**
 * Main application layout — RTL Arabic-first.
 * All authenticated pages use this layout.
 */

use App\Core\App;
use App\Core\CSRF;
use App\Modules\Settings\Services\BrandingService;

$app = App::getInstance();
$employee = $app->currentEmployee();
$employeeName = $employee ? ($employee->full_name_ar ?? 'مستخدم') : 'زائر';
$employeeInitial = mb_substr($employeeName, 0, 1);
$currentPath = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH);
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?= e(CSRF::token()) ?>">
    <title><?= $__template->yield('title', 'لوحة التحكم') ?> — THE CLUB</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="<?= url('assets/css/main.css') ?>?v=<?= @filemtime(dirname(__DIR__, 3) . '/public/assets/css/main.css') ?: time() ?>">
    <?= $__template->yield('styles', '') ?>
</head>
<body>

<!-- Page Loading Overlay -->
<div class="page-loading" id="page-loading">
    <div class="loader">
        <div class="loader-dot"></div>
        <div class="loader-dot"></div>
        <div class="loader-dot"></div>
    </div>
</div>

<!-- Sidebar Mobile Overlay -->
<div class="sidebar-overlay" id="sidebar-overlay" onclick="closeSidebar()"></div>

<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
    <?php $__template->include('Shared.Components.sidebar'); ?>
</aside>

<!-- Main Wrapper -->
<div class="main-wrapper" id="main-wrapper">

    <!-- Top Header -->
    <header class="top-header" id="top-header">
        <div class="header-right">
            <button class="sidebar-toggle-btn" onclick="toggleSidebar()" aria-label="toggle sidebar">
                <i data-lucide="menu" style="width:20px;height:20px;"></i>
            </button>
            <div class="header-title">
                <h1><?= $__template->yield('title', 'لوحة التحكم') ?></h1>
            </div>
        </div>
        <div class="header-left">
            <?= $__template->yield('page_actions', '') ?>
            <div class="header-user">
                <span class="header-user-name"><?= e($employeeName) ?></span>
                <div class="header-user-avatar"><?= e($employeeInitial) ?></div>
                <a href="/logout" class="header-logout" title="تسجيل الخروج">
                    <i data-lucide="log-out" style="width:18px;height:18px;"></i>
                </a>
            </div>
        </div>
    </header>

    <!-- Alerts -->
    <?php $__template->include('Shared.Components.alerts'); ?>

    <!-- Toast Container -->
    <div id="toast-container"></div>

    <!-- Page Content -->
    <main class="page-content">
        <?= $__template->yield('content', '') ?>
    </main>

    <!-- Footer -->
    <footer class="page-footer">
        <span><?= e(BrandingService::clubNameEn()) ?> &copy; <?= date('Y') ?></span>
        <span>v1.0.0</span>
        <span><?= arabic_date(date('Y-m-d')) ?></span>
    </footer>
</div>

<script src="<?= url('assets/js/app.js') ?>?v=<?= @filemtime(dirname(__DIR__, 3) . '/public/assets/js/app.js') ?: time() ?>"></script>
<script>
// Initialize Lucide icons
lucide.createIcons();

// Sidebar functions
function toggleSidebar() {
    var sb = document.getElementById('sidebar');
    var mw = document.getElementById('main-wrapper');
    var overlay = document.getElementById('sidebar-overlay');
    var isMobile = window.innerWidth <= 1024;

    if (isMobile) {
        sb.classList.toggle('show');
        overlay.classList.toggle('active');
    } else {
        sb.classList.toggle('collapsed');
        mw.classList.toggle('sidebar-collapsed');
    }
}

function closeSidebar() {
    var sb = document.getElementById('sidebar');
    var overlay = document.getElementById('sidebar-overlay');
    sb.classList.remove('show');
    overlay.classList.remove('active');
}

function toggleSubmenu(el) {
    var parent = el.parentElement;
    var submenu = parent.querySelector('.sidebar-submenu');
    if (!submenu) return;

    var isOpen = parent.classList.contains('open');

    if (!isOpen) {
        // Opening: show first, then animate height
        submenu.style.display = 'block';
        submenu.style.overflow = 'hidden';
        submenu.style.maxHeight = '0px';
        // Force reflow so the browser registers the 0 height
        submenu.offsetHeight;
        submenu.style.transition = 'max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1)';
        submenu.style.maxHeight = submenu.scrollHeight + 'px';
        parent.classList.add('open');
        // Clean up after transition
        submenu.addEventListener('transitionend', function handler() {
            submenu.removeEventListener('transitionend', handler);
            if (parent.classList.contains('open')) {
                submenu.style.maxHeight = '';
                submenu.style.overflow = '';
                submenu.style.transition = '';
            }
        });
    } else {
        // Closing: set explicit height first, then animate to 0
        submenu.style.overflow = 'hidden';
        submenu.style.maxHeight = submenu.scrollHeight + 'px';
        submenu.offsetHeight;
        submenu.style.transition = 'max-height 0.25s ease';
        submenu.style.maxHeight = '0px';
        parent.classList.remove('open');
        submenu.addEventListener('transitionend', function handler() {
            submenu.removeEventListener('transitionend', handler);
            if (!parent.classList.contains('open')) {
                submenu.style.display = 'none';
                submenu.style.maxHeight = '';
                submenu.style.overflow = '';
                submenu.style.transition = '';
            }
        });
    }
}

// Header scroll shadow
var header = document.getElementById('top-header');
if (header) {
    window.addEventListener('scroll', function() {
        header.classList.toggle('scrolled', window.scrollY > 10);
    }, { passive: true });
}

// Hide page loading
window.addEventListener('load', function() {
    var loader = document.getElementById('page-loading');
    if (loader) {
        loader.classList.add('hidden');
        setTimeout(function() { loader.remove(); }, 300);
    }
});
</script>
<?= $__template->yield('scripts', '') ?>
<?php if ($app->isDebug()): ?>
<?= \App\Core\DebugBar::render() ?>
<?php endif; ?>
</body>
</html>
