<?php
// Grouped sections for the mobile menu
$uri = $_SERVER['REQUEST_URI'] ?? '';
?>
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 fw-bold"><i class="fa-solid fa-grid-2 me-2 text-primary"></i>القائمة الرئيسية</h1>
    </div>

    <!-- Core Operations -->
    <div class="mb-4">
        <h5 class="text-secondary small fw-bold mb-3 px-2">العمليات الأساسية</h5>
        <div class="row g-3">
            <div class="col-6">
                <a href="<?= BASE_URL ?>/" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-house fs-2 mb-2 text-primary"></i>
                    <div class="fw-bold text-dark">الرئيسية</div>
                </a>
            </div>
            <div class="col-6">
                <a href="<?= BASE_URL ?>/journal" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-book-open fs-2 mb-2 text-info"></i>
                    <div class="fw-bold text-dark">اليومية</div>
                </a>
            </div>
            <div class="col-6">
                <a href="<?= BASE_URL ?>/todo" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-list-check fs-2 mb-2 text-success"></i>
                    <div class="fw-bold text-dark">المهام</div>
                </a>
            </div>
            <div class="col-6">
                <a href="<?= BASE_URL ?>/calendar" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block position-relative">
                    <i class="fa-regular fa-calendar-days fs-2 mb-2 text-warning"></i>
                    <div class="fw-bold text-dark">التقويم</div>
                    <?php if(($calCount ?? 0) > 0): ?>
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="transform: translate(-30%, 30%) !important;">
                            <?= $calCount ?>
                        </span>
                    <?php endif; ?>
                </a>
            </div>
        </div>
    </div>

    <!-- Intelligence & Strategy -->
    <div class="mb-4">
        <h5 class="text-secondary small fw-bold mb-3 px-2">الذكاء والتخطيط</h5>
        <div class="row g-3">
            <div class="col-6">
                <a href="<?= BASE_URL ?>/monthlyplan" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-calendar-check fs-2 mb-2 text-danger"></i>
                    <div class="fw-bold text-dark">خطة الشهر</div>
                </a>
            </div>
            <div class="col-6">
                <a href="<?= BASE_URL ?>/advisor" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-robot fs-2 mb-2" style="color: #8b5cf6;"></i>
                    <div class="fw-bold text-dark">المستشار الذكي</div>
                </a>
            </div>
            <div class="col-12">
                <a href="<?= BASE_URL ?>/analytics" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none p-3 d-flex flex-row align-items-center">
                    <div class="bg-light rounded-circle p-3 me-3 d-flex align-items-center justify-content-center">
                        <i class="fa-solid fa-chart-line fs-4 text-secondary"></i>
                    </div>
                    <div class="fw-bold fs-5 text-dark">التحليلات والإحصائيات</div>
                </a>
            </div>
        </div>
    </div>

    <!-- Growth & Identity -->
    <div class="mb-4">
        <h5 class="text-secondary small fw-bold mb-3 px-2">النمو والهوية</h5>
        <div class="row g-3">
            <div class="col-6">
                <a href="<?= BASE_URL ?>/health" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-heart-pulse fs-2 mb-2 text-danger"></i>
                    <div class="fw-bold text-dark">الصحة</div>
                </a>
            </div>
            <div class="col-6">
                <a href="<?= BASE_URL ?>/finance" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-wallet fs-2 mb-2 text-success"></i>
                    <div class="fw-bold text-dark">الماليات</div>
                </a>
            </div>
            <div class="col-6">
                <a href="<?= BASE_URL ?>/behavior" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-brain fs-2 mb-2 text-warning"></i>
                    <div class="fw-bold text-dark">السلوكيات</div>
                </a>
            </div>
            <div class="col-6">
                <a href="<?= BASE_URL ?>/habits" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-fire fs-2 mb-2 text-orange" style="color: #f97316;"></i>
                    <div class="fw-bold text-dark">العادات</div>
                </a>
            </div>
            <div class="col-6">
                <a href="<?= BASE_URL ?>/spiritual" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-kaaba fs-2 mb-2 text-dark"></i>
                    <div class="fw-bold text-dark">الروحانيات</div>
                </a>
            </div>
            <div class="col-6">
                <a href="<?= BASE_URL ?>/education" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none h-100 p-3 text-center d-block">
                    <i class="fa-solid fa-graduation-cap fs-2 mb-2 text-primary"></i>
                    <div class="fw-bold text-dark">التعليم</div>
                </a>
            </div>
        </div>
    </div>

    <!-- Security & Settings -->
    <div class="mb-4">
        <h5 class="text-secondary small fw-bold mb-3 px-2">النظام والأمان</h5>
        <div class="row g-3">
            <div class="col-12">
                <a href="<?= BASE_URL ?>/vault" class="card bg-dark text-white border-0 shadow-lg rounded-4 text-decoration-none p-3 d-flex flex-row align-items-center">
                    <div class="bg-white bg-opacity-25 rounded-circle p-3 me-3 d-flex align-items-center justify-content-center">
                        <i class="fa-solid fa-fingerprint fs-4 text-success"></i>
                    </div>
                    <div class="fw-bold fs-5 text-white">الخزنة السرية</div>
                </a>
            </div>
            <div class="col-12">
                <a href="<?= BASE_URL ?>/system/notifications" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none p-3 d-flex flex-row align-items-center position-relative">
                    <div class="bg-light rounded-circle p-3 me-3 d-flex align-items-center justify-content-center">
                        <i class="fa-solid fa-bell fs-4 text-secondary"></i>
                    </div>
                    <div class="fw-bold fs-5 text-dark">الإشعارات</div>
                    <?php if(($unreadCount ?? 0) > 0): ?>
                        <span class="position-absolute top-50 start-0 translate-middle-y ms-3 badge rounded-pill bg-danger">
                            <?= $unreadCount ?>
                        </span>
                    <?php endif; ?>
                </a>
            </div>
            <div class="col-12">
                <a href="<?= BASE_URL ?>/system/settings" class="card bg-white border-0 shadow-sm rounded-4 text-decoration-none p-3 d-flex flex-row align-items-center">
                    <div class="bg-light rounded-circle p-3 me-3 d-flex align-items-center justify-content-center">
                        <i class="fa-solid fa-gear fs-4 text-secondary"></i>
                    </div>
                    <div class="fw-bold fs-5 text-dark">الإعدادات والتفضيلات</div>
                </a>
            </div>
        </div>
    </div>
    
    <div class="text-center mt-5 mb-4">
        <a href="<?= BASE_URL ?>/auth/logout" class="btn btn-outline-danger rounded-pill px-4 py-2 fw-bold">
            <i class="fa-solid fa-arrow-right-from-bracket me-2"></i> تسجيل الخروج
        </a>
    </div>

</div>
