<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>متصفح الأنشطة<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<div style="display:grid;grid-template-columns:280px 1fr 1fr;gap:16px;height:calc(100vh - 180px);min-height:500px;">

    <!-- Right Panel: Disciplines -->
    <div class="card" style="overflow-y:auto;padding:0;">
        <div style="padding:12px 16px;border-bottom:1px solid #E5E7EB;position:sticky;top:0;background:#fff;z-index:1;">
            <h3 style="margin:0;font-size:14px;font-weight:700;color:#1A1A2E;">الألعاب الرياضية</h3>
        </div>
        <div id="disciplineList" style="padding:8px;">
            <?php foreach ($disciplines as $d): ?>
            <div class="discipline-item" data-id="<?= (int) $d['id'] ?>" style="padding:10px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px;margin-bottom:4px;transition:background .15s;">
                <div style="width:36px;height:36px;border-radius:10px;background:#F3F4F6;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i data-lucide="<?= e($d['icon'] ?? 'activity') ?>" style="width:18px;height:18px;color:#1e3a5f;"></i>
                </div>
                <div style="flex:1;min-width:0;">
                    <div style="font-size:13px;font-weight:600;color:#1A1A2E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"><?= e($d['name_ar']) ?></div>
                    <div style="font-size:11px;color:#9CA3AF;"><?= (int) $d['program_count'] ?> برنامج</div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- Middle Panel: Programs -->
    <div class="card" style="overflow-y:auto;padding:0;">
        <div style="padding:12px 16px;border-bottom:1px solid #E5E7EB;position:sticky;top:0;background:#fff;z-index:1;">
            <h3 style="margin:0;font-size:14px;font-weight:700;color:#1A1A2E;" id="programsTitle">البرامج</h3>
        </div>
        <div id="programList" style="padding:12px;">
            <div style="text-align:center;padding:40px 20px;color:#9CA3AF;font-size:13px;">
                <i data-lucide="mouse-pointer-click" style="width:32px;height:32px;display:block;margin:0 auto 10px;color:#D1D5DB;"></i>
                اختر نشاط رياضي من القائمة
            </div>
        </div>
    </div>

    <!-- Left Panel: Groups -->
    <div class="card" style="overflow-y:auto;padding:0;">
        <div style="padding:12px 16px;border-bottom:1px solid #E5E7EB;position:sticky;top:0;background:#fff;z-index:1;">
            <h3 style="margin:0;font-size:14px;font-weight:700;color:#1A1A2E;" id="groupsTitle">المجموعات</h3>
        </div>
        <div id="groupList" style="padding:12px;">
            <div style="text-align:center;padding:40px 20px;color:#9CA3AF;font-size:13px;">
                <i data-lucide="users" style="width:32px;height:32px;display:block;margin:0 auto 10px;color:#D1D5DB;"></i>
                اختر برنامج لعرض مجموعاته
            </div>
        </div>
    </div>
</div>

<style>
.discipline-item:hover, .discipline-item.active { background: #EFF6FF; }
.discipline-item.active { border-right: 3px solid #2563EB; }
.program-card { padding:12px;border:1px solid #E5E7EB;border-radius:8px;cursor:pointer;margin-bottom:8px;transition:border-color .15s,box-shadow .15s; }
.program-card:hover, .program-card.active { border-color:#2563EB;box-shadow:0 0 0 2px rgba(37,99,235,.1); }
.group-card { padding:12px;border:1px solid #E5E7EB;border-radius:8px;margin-bottom:8px; }
.capacity-bar { height:6px;border-radius:3px;background:#E5E7EB;overflow:hidden;margin-top:6px; }
.capacity-fill { height:100%;border-radius:3px;transition:width .3s; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();

    var items = document.querySelectorAll('.discipline-item');
    items.forEach(function(item) {
        item.addEventListener('click', function() {
            items.forEach(function(i) { i.classList.remove('active'); });
            this.classList.add('active');
            loadPrograms(this.dataset.id, this.querySelector('div > div').textContent.trim());
        });
    });

    function loadPrograms(disciplineId, name) {
        document.getElementById('programsTitle').textContent = 'برامج: ' + name;
        document.getElementById('programList').innerHTML = '<div style="text-align:center;padding:20px;color:#6B7280;font-size:13px;">جاري التحميل...</div>';
        document.getElementById('groupList').innerHTML = '<div style="text-align:center;padding:40px 20px;color:#9CA3AF;font-size:13px;">اختر برنامج لعرض مجموعاته</div>';
        document.getElementById('groupsTitle').textContent = 'المجموعات';

        fetch('/api/sa/activities/programs?discipline_id=' + disciplineId)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (!data.success || !data.programs.length) {
                    document.getElementById('programList').innerHTML = '<div style="text-align:center;padding:20px;color:#9CA3AF;font-size:13px;">لا توجد برامج</div>';
                    return;
                }
                var html = '';
                data.programs.forEach(function(p) {
                    var meta = [];
                    if (p.age_from || p.age_to) meta.push((p.age_from||'?') + '-' + (p.age_to||'?') + ' سنة');
                    if (p.sessions_per_week) meta.push(p.sessions_per_week + ' حصة/أسبوع');
                    html += '<div class="program-card" data-id="' + p.id + '">' +
                        '<div style="font-size:13px;font-weight:600;color:#1A1A2E;">' + escHtml(p.name_ar) + '</div>' +
                        '<div style="font-size:11px;color:#6B7280;margin-top:4px;">' + escHtml(meta.join(' • ')) + '</div>' +
                        '<div style="font-size:11px;color:#2563EB;margin-top:4px;">' + (p.group_count || 0) + ' مجموعة</div>' +
                        '</div>';
                });
                document.getElementById('programList').innerHTML = html;

                document.querySelectorAll('.program-card').forEach(function(card) {
                    card.addEventListener('click', function() {
                        document.querySelectorAll('.program-card').forEach(function(c) { c.classList.remove('active'); });
                        this.classList.add('active');
                        loadGroups(this.dataset.id, this.querySelector('div').textContent.trim());
                    });
                });
            });
    }

    function loadGroups(programId, name) {
        document.getElementById('groupsTitle').textContent = 'مجموعات: ' + name;
        document.getElementById('groupList').innerHTML = '<div style="text-align:center;padding:20px;color:#6B7280;font-size:13px;">جاري التحميل...</div>';

        fetch('/api/sa/activities/groups?program_id=' + programId)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (!data.success || !data.groups.length) {
                    document.getElementById('groupList').innerHTML = '<div style="text-align:center;padding:20px;color:#9CA3AF;font-size:13px;">لا توجد مجموعات</div>';
                    return;
                }
                var html = '';
                data.groups.forEach(function(g) {
                    var pct = g.max_capacity > 0 ? Math.round((g.current_count / g.max_capacity) * 100) : 0;
                    var barColor = pct >= 90 ? '#DC2626' : (pct >= 70 ? '#F59E0B' : '#059669');
                    var statusBadge = g.status === 'active' ? '<span style="color:#059669;font-size:10px;">● نشطة</span>' : '<span style="color:#6B7280;font-size:10px;">● ' + escHtml(g.status) + '</span>';
                    html += '<div class="group-card">' +
                        '<div style="display:flex;justify-content:space-between;align-items:center;">' +
                        '<a href="/sa/groups/' + g.id + '" style="font-size:13px;font-weight:600;color:#1A1A2E;text-decoration:none;">' + escHtml(g.name_ar) + '</a>' +
                        statusBadge + '</div>' +
                        '<div style="font-size:11px;color:#6B7280;margin-top:4px;">المدرب: ' + escHtml(g.coach_name || '—') + '</div>' +
                        '<div style="font-size:11px;color:#6B7280;margin-top:2px;">الرسوم: ' + (g.monthly_fee_member || 0) + ' / ' + (g.monthly_fee_nonmember || 0) + ' ج.م</div>' +
                        '<div class="capacity-bar"><div class="capacity-fill" style="width:' + pct + '%;background:' + barColor + ';"></div></div>' +
                        '<div style="font-size:10px;color:#6B7280;margin-top:3px;">' + g.current_count + ' / ' + g.max_capacity + ' (' + pct + '%)</div>' +
                        '</div>';
                });
                document.getElementById('groupList').innerHTML = html;
            });
    }

    function escHtml(str) {
        var div = document.createElement('div');
        div.textContent = str || '';
        return div.innerHTML;
    }
});
</script>
<?php $__template->endSection(); ?>
