<?php
// app/Views/pages/dashboards/hub.php
require_once dirname(__DIR__, 2) . '/layouts/header.php';
require_once dirname(__DIR__, 2) . '/layouts/sidebar.php';

// Categories and their respective analytics cards
$categories = [
    'tab-contracts' => [
        'id' => 'tab-contracts',
        'title' => 'تحليلات العقود',
        'icon' => 'ti ti-file-certificate',
        'color' => '#3b82f6', // Azure
        'items' => [
            ['title' => 'تحليلات عقود الإيجار', 'url' => url('/dashboards/contracts/lease'), 'icon' => 'ti ti-file-analytics', 'status' => 'active', 'desc' => 'تحليل شامل للقيم الإيجارية، نسب التحصيل، والتدفقات النقدية.'],
            ['title' => 'تحليلات عقود التشغيل', 'url' => '#', 'icon' => 'ti ti-settings-automation', 'status' => 'placeholder', 'desc' => 'مراقبة أداء التشغيل والمصروفات المرتبطة بعقود الموردين.'],
            ['title' => 'تحليلات عقود التمويل', 'url' => '#', 'icon' => 'ti ti-building-bank', 'status' => 'placeholder', 'desc' => 'تتبع مديونيات البنوك وتكاليف التمويل المالي.'],
            ['title' => 'تحليلات عقود الاستثمار', 'url' => '#', 'icon' => 'ti ti-chart-infographic', 'status' => 'placeholder', 'desc' => 'حساب العائد على الاستثمار للمحافظ العقارية الكبرى.'],
            ['title' => 'تحليلات عقود الشراكة', 'url' => '#', 'icon' => 'ti ti-users-group', 'status' => 'placeholder', 'desc' => 'توزيع الأرباح والمسؤوليات بين الشركاء المساهمين.'],
            ['title' => 'تحليلات عمليات البيع', 'url' => '#', 'icon' => 'ti ti-home-check', 'status' => 'placeholder', 'desc' => 'تتبع مبيعات الوحدات ونسب الإنجاز في التحصيل.'],
            ['title' => 'تحليلات عمليات الشراء', 'url' => '#', 'icon' => 'ti ti-shopping-cart-check', 'status' => 'placeholder', 'desc' => 'مراقبة الأصول المشتراة وتكاليف الاستحواذ.'],
        ]
    ],
    'tab-org' => [
        'id' => 'tab-org',
        'title' => 'تحليلات الهيكل',
        'icon' => 'ti ti-sitemap',
        'color' => '#14b8a6', // Teal
        'items' => [
            ['title' => 'تحليلات الشركات والمحافظ', 'url' => '#', 'icon' => 'ti ti-building-community', 'status' => 'placeholder', 'desc' => 'تحليل أداء الشركات التابعة والمجموعات المالية.'],
            ['title' => 'تحليلات الفروع الجغرافية', 'url' => '#', 'icon' => 'ti ti-map-pin-2', 'status' => 'placeholder', 'desc' => 'مقارنة الإنتاجية بين الفروع المختلفة.'],
            ['title' => 'تحليلات مراكز التكلفة', 'url' => '#', 'icon' => 'ti ti-hierarchy-2', 'status' => 'placeholder', 'desc' => 'توزيع المصاريف على مراكز التكلفة والمشاريع.'],
            ['title' => 'تحليلات الأطراف والعملاء', 'url' => '#', 'icon' => 'ti ti-users', 'status' => 'placeholder', 'desc' => 'تصنيف العملاء حسب الأهمية الاستراتيجية والالتزام.'],
        ]
    ],
    'tab-admin' => [
        'id' => 'tab-admin',
        'title' => 'تحليلات إدارية',
        'icon' => 'ti ti-briefcase',
        'color' => '#8b5cf6', // Violet
        'items' => [
            ['title' => 'تحليلات الشؤون القانونية', 'url' => '#', 'icon' => 'ti ti-scale', 'status' => 'placeholder', 'desc' => 'متابعة القضايا والنزاعات القانونية والنتائج المالية.'],
            ['title' => 'تحليلات الخطابات والمراسلات', 'url' => '#', 'icon' => 'ti ti-mail-forward', 'status' => 'placeholder', 'desc' => 'كفاءة سير المراسلات وتتبع الوقت المستغرق للرد.'],
            ['title' => 'تحليلات الأرشفة والمستندات', 'url' => '#', 'icon' => 'ti ti-folder-check', 'status' => 'placeholder', 'desc' => 'إحصائيات الوثائق المرفوعة وتنبيهات الأوراق المنتهية.'],
            ['title' => 'تحليلات طلبات الصيانة', 'url' => '#', 'icon' => 'ti ti-tool', 'status' => 'placeholder', 'desc' => 'سرعة الاستجابة لطلبات الصيانة وتكاليف الإصلاح.'],
        ]
    ],
    'tab-services' => [
        'id' => 'tab-services',
        'title' => 'تحليلات خدمية',
        'icon' => 'ti ti-bolt',
        'color' => '#f59f00', // Orange
        'items' => [
            ['title' => 'تحليلات عدادات الخدمات', 'url' => '#', 'icon' => 'ti ti-meter-cube', 'status' => 'placeholder', 'desc' => 'مراقبة استهلاك الكهرباء والمياه والغاز بشكل مركزي.'],
            ['title' => 'تحليلات فواتير الخدمات', 'url' => url('/reports/service-invoices/analysis'), 'icon' => 'ti ti-receipt-2', 'status' => 'placeholder', 'desc' => 'تتبع فواتير الخدمات العامة وتوزيعها على الوحدات.'],
        ]
    ],
    'tab-ops' => [
        'id' => 'tab-ops',
        'title' => 'تحليلات عملياتية',
        'icon' => 'ti ti-chart-dots',
        'color' => '#ff4b2b', // Red
        'items' => [
            ['title' => 'تحليلات فواتير المبيعات', 'url' => '#', 'icon' => 'ti ti-invoice', 'status' => 'placeholder', 'desc' => 'تحليلات ضريبية وإحصائية لفواتير المبيعات الرسمية.'],
            ['title' => 'تحليلات المطالبات المالية', 'url' => '#', 'icon' => 'ti ti-report-money', 'status' => 'placeholder', 'desc' => 'تتبع المطالبات المعلقة والمسددة ونسب التحصيل.'],
            ['title' => 'تحليلات فواتير المشتريات', 'url' => '#', 'icon' => 'ti ti-shopping-cart-check', 'status' => 'placeholder', 'desc' => 'تحليل فواتير الموردين والالتزامات الضريبية والمالية.'],
            ['title' => 'تحليلات سندات القبض', 'url' => '#', 'icon' => 'ti ti-zoom-money', 'status' => 'placeholder', 'desc' => 'مراقبة التدفقات النقدية الواردة عبر السندات المالية.'],
            ['title' => 'تحليلات سندات الصرف', 'url' => '#', 'icon' => 'ti ti-cash-banknote-off', 'status' => 'placeholder', 'desc' => 'تتبع المصروفات والمدفوعات الصادرة للغير.'],
            ['title' => 'تحليلات سندات التسوية', 'url' => '#', 'icon' => 'ti ti-arrows-diff', 'status' => 'placeholder', 'desc' => 'مراقبة التسويات المالية وتأثيرها على الأرصدة.'],
        ]
    ],
    'tab-reports' => [
        'id' => 'tab-reports',
        'title' => 'مركز التقارير',
        'icon' => 'ti ti-report',
        'color' => '#4f46e5', // Indigo
        'items' => [
            ['title' => 'بوابة التقارير العامة', 'url' => url('/reports'), 'icon' => 'ti ti-layout-grid-add', 'status' => 'active', 'desc' => 'الدخول إلى مركز التقارير التفصيلية المطبوعة والرقمية لكافة الموديلات.'],
        ]
    ],
];
?>

<div class="page-wrapper masterpiece-hub" id="hubWrapper">
    <!-- Aurora background decoration -->
    <div class="aurora-layer">
        <div class="blob b1"></div>
        <div class="blob b2"></div>
    </div>

    <div class="container-xl position-relative py-5">
        <!-- Header & Search -->
        <div class="row mb-5 align-items-end">
            <div class="col-lg-6">
                <h1 class="display-5 fw-bold text-gradient-indigo mb-2">منصة تحليلات الإدارة</h1>
                <p class="text-muted fs-4">بوابتك المركزية لمراقبة دقة البيانات والأداء المالي والتشغيلي.</p>
            </div>
            <div class="col-lg-6">
                <div class="input-icon mb-3">
                    <span class="input-icon-addon">
                        <i class="ti ti-search fs-2"></i>
                    </span>
                    <input type="text" id="hubSearch" class="form-control form-control-lg bg-white shadow-sm border-0" placeholder="ابحث في كافة التحليلات... (بحث شامل)">
                </div>
            </div>
        </div>

        <!-- Categorized Tabs Navigation -->
        <div id="tabsNavContainer" class="card mb-4 border-0 bg-transparent shadow-none">
            <ul class="nav nav-pills custom-analytics-tabs justify-content-center gap-3">
                <?php foreach ($categories as $catId => $cat): ?>
                <li class="nav-item">
                    <a href="#<?= $catId ?>" 
                       class="nav-link <?= $catId === 'tab-contracts' ? 'active' : '' ?>" 
                       data-bs-toggle="pill"
                       style="--tab-color: <?= $cat['color'] ?>;">
                        <i class="<?= $cat['icon'] ?> me-2"></i> <?= $cat['title'] ?>
                    </a>
                </li>
                <?php endforeach; ?>
            </ul>
        </div>

        <!-- Global Search Results Header (Hidden by default) -->
        <div id="searchResultsHeader" class="mb-4 d-none text-center">
            <h2 class="text-muted"><i class="ti ti-filter me-2"></i> نتائج البحث الشامل</h2>
            <p id="resultsCount">تم العثور على 0 نتيجة</p>
        </div>

        <!-- Tabs Content Area -->
        <div class="tab-content mt-5" id="hubContent">
            <?php foreach ($categories as $catId => $cat): ?>
            <div class="tab-pane fade <?= $catId === 'tab-contracts' ? 'show active' : '' ?> category-pane" id="<?= $catId ?>" role="tabpanel">
                <div class="row g-3 analytics-grid">
                    <?php foreach ($cat['items'] as $item): ?>
                    <div class="col-md-6 col-lg-3 analytics-tile-item" data-title="<?= mb_strtolower($item['title']) ?>" data-desc="<?= mb_strtolower($item['desc']) ?>">
                        <div class="card h-100 analytics-card <?= $item['status'] === 'active' ? 'active-card' : 'placeholder-card' ?>" style="--accent-color: <?= $cat['color'] ?>;">
                            <div class="card-body d-flex flex-column p-3">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="d-flex align-items-center">
                                        <div class="tile-icon me-2">
                                            <i class="<?= $item['icon'] ?>"></i>
                                        </div>
                                        <h3 class="card-title fw-bold mb-0" style="font-size: 1.05rem;"><?= $item['title'] ?></h3>
                                    </div>
                                    <div class="status-badge">
                                        <?php if($item['status'] === 'active'): ?>
                                            <span class="badge bg-green-lt px-2" style="font-size: 0.65rem;">نشط</span>
                                        <?php else: ?>
                                            <span class="badge bg-secondary-lt px-2" style="font-size: 0.65rem;">حجز</span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <p class="text-muted small lh-base mb-0" style="font-size: 0.8rem;"><?= $item['desc'] ?></p>
                                </div>
                                <div class="mt-3">
                                    <a href="<?= $item['url'] ?>" class="btn btn-sm btn-pill w-100 btn-hub-action <?= $item['status'] === 'active' ? '' : 'disabled' ?>">
                                        <?= $item['status'] === 'active' ? 'دخول' : 'قريباً' ?>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<style>
/* Modern Glassmorphism & Aurora Theme */
.masterpiece-hub {
    min-height: 100vh;
    background: #f8faff;
    position: relative;
    overflow-x: hidden;
    transition: background 1s ease;
}
.aurora-layer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
.blob {
    position: absolute; width: 60vw; height: 60vw;
    border-radius: 50%; filter: blur(80px); opacity: 0.15;
    animation: blobify 20s infinite alternate ease-in-out;
}
.b1 { background: #3b82f6; top: -20%; left: -10%; transition: background 1s ease; }
.b2 { background: #8b5cf6; bottom: -20%; right: -10%; animation-delay: -5s; }

@keyframes blobify {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 50px) scale(1.1); }
}

.text-gradient-indigo {
    background: linear-gradient(135deg, #1e293b 0%, #4263eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Colored Tabs Navigation */
.custom-analytics-tabs .nav-link {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 14px 28px;
    font-weight: 700;
    color: var(--tab-color);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}
.custom-analytics-tabs .nav-link::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--tab-color);
    opacity: 0.08;
    z-index: -1;
}
.custom-analytics-tabs .nav-link.active {
    background: var(--tab-color);
    color: #fff;
    transform: translateY(-8px);
    box-shadow: 0 15px 25px -5px rgba(0,0,0,0.1);
}
.custom-analytics-tabs .nav-link:hover:not(.active) {
    transform: translateY(-4px);
    background: #fff;
    box-shadow: 0 8px 15px -3px rgba(0,0,0,0.08);
}

/* Global Search Mode Styles */
.search-active #tabsNavContainer {
    display: none !important;
}
.search-active .category-pane {
    display: block !important;
    opacity: 1 !important;
    margin-bottom: 2rem;
}
.search-active #searchResultsHeader {
    display: block !important;
}

/* Analytics Tile Cards Redesign */
.analytics-card {
    border: 1px solid rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    transition: all 0.5s ease;
    overflow: hidden;
}
.analytics-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 50px -10px rgba(0,0,0,0.1);
    background: #fff;
    border-color: var(--accent-color);
}
.tile-icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--accent-color);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
}
.active-card {
    border-top: 4px solid var(--accent-color);
}
.placeholder-card {
    opacity: 0.8;
    filter: grayscale(0.5);
}

.btn-hub-action {
    background: #fff;
    border: 1.5px solid var(--accent-color);
    color: var(--accent-color);
    font-weight: 700;
    padding: 8px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}
.active-card:hover .btn-hub-action {
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 8px 15px -4px var(--accent-color);
}

/* RTL Specifics */
[dir="rtl"] .nav-item .nav-link { letter-spacing: 0; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const searchInput = document.getElementById('hubSearch');
    const tiles = document.querySelectorAll('.analytics-tile-item');
    const hubWrapper = document.getElementById('hubWrapper');
    const resultsCount = document.getElementById('resultsCount');
    const panes = document.querySelectorAll('.category-pane');

    // Live Search Functionality (Global Comprehensive)
    searchInput.addEventListener('input', function(e) {
        const query = e.target.value.toLowerCase().trim();
        let foundCount = 0;
        
        if (query.length > 0) {
            hubWrapper.classList.add('search-active');
            
            tiles.forEach(tile => {
                const title = tile.getAttribute('data-title');
                const desc = tile.getAttribute('data-desc');
                
                if (title.includes(query) || desc.includes(query)) {
                    tile.style.display = 'block';
                    tile.parentElement.parentElement.classList.remove('d-none'); // show the row/pane logic
                    foundCount++;
                } else {
                    tile.style.display = 'none';
                }
            });

            // Hide empty category sections in search mode
            panes.forEach(pane => {
                const visibleInPane = pane.querySelectorAll('.analytics-tile-item[style="display: block;"]').length;
                if (visibleInPane === 0) {
                    pane.style.display = 'none';
                } else {
                    pane.style.display = 'block';
                }
            });

            resultsCount.innerText = `تم العثور على ${foundCount} نتيجة بحث`;
        } else {
            // Restore normal state
            hubWrapper.classList.remove('search-active');
            tiles.forEach(tile => tile.style.display = 'block');
            panes.forEach(pane => pane.style.display = ''); // Restore bootstrap default
        }
    });

    // Tab Color Auto-Background & Smooth Transition
    const tabLinks = document.querySelectorAll('.custom-analytics-tabs .nav-link');
    const auroraB1 = document.querySelector('.blob.b1');
    
    // Initial BG set based on active tab
    const activeTab = document.querySelector('.custom-analytics-tabs .nav-link.active');
    if (activeTab) {
        auroraB1.style.background = activeTab.style.getPropertyValue('--tab-color');
    }

    tabLinks.forEach(link => {
        link.addEventListener('shown.bs.tab', function (e) {
            const color = e.target.style.getPropertyValue('--tab-color');
            auroraB1.style.background = color;
        });
    });
});
</script>

<?php require_once dirname(__DIR__, 2) . '/layouts/footer.php'; ?>