Your IP : 216.73.217.117

Current Path : /var/www/cesa.co.za/php/
Upload File :
Current File : /var/www/cesa.co.za/php/scecourses.php

<h1>Upcoming Courses Lists</h1>
<?php
include_once('inc_db.php');
include_once($_SERVER['DOCUMENT_ROOT'] . '/php/includes/SchoolCourses.php');

$schoolCourses = new SchoolCourses($sqlf);
$scheduledGroups = $schoolCourses->groupPublicCatalogueByCategory(
    $schoolCourses->getPublicCatalogueCourses('scheduled')
);
$onRequestGroups = $schoolCourses->groupPublicCatalogueByCategory(
    $schoolCourses->getPublicCatalogueCourses('on_request')
);

$filterCategories = array();
foreach ($scheduledGroups as $group) {
    $filterCategories[] = array(
        'slug' => $group['category_slug'],
        'label' => $group['category'],
    );
}

/**
 * @param array $groups
 * @param string $listId
 * @param string $emptyMessage
 */
function sce_render_course_groups(array $groups, $listId, $emptyMessage)
{
    echo '<ul id="' . htmlspecialchars($listId) . '" class="sce-course-list">';
    if (count($groups) <= 0) {
        echo '<li class="sce-course-empty">' . htmlspecialchars($emptyMessage) . '</li>';
        echo '</ul>';
        return;
    }

    $first = true;
    foreach ($groups as $group) {
        $catId = htmlspecialchars($group['category_slug']);
        if (!$first) {
            echo '<p class="sce-course-line-break" id="line-break-' . $catId . '" data-cat-id="' . $catId . '">&nbsp;</p>';
        }
        $first = false;

        echo '<div class="course-list" id="cat-' . $catId . '" data-cat-id="' . $catId . '">';
        echo '<h4>' . htmlspecialchars($group['category']) . '</h4>';
        foreach ($group['courses'] as $course) {
            $courseId = intval($course['SchoolCourseID']);
            $name = htmlspecialchars($course['CourseName']);
            echo '<li><a href="/sce/school-course?courseid=' . $courseId . '">' . $name . '</a></li>';
        }
        echo '</div>';
    }
    echo '</ul>';
}
?>
<style>
.sce-course-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 12px;
    border-bottom: 2px solid #d7e0f0;
    padding-bottom: 0;
}
.sce-course-tab {
    appearance: none;
    border: 1px solid #b0b0b0;
    background: #e8e8e8;
    color: #666;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-bottom: -2px;
}
.sce-course-tab.is-active {
    border-color: #325eab;
    background: #325eab;
    color: #fff;
}
.sce-course-panel { display: none; }
.sce-course-panel.is-active { display: block; }
.sce-course-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
}
.sce-course-filter {
    appearance: none;
    border: 1px solid #325eab;
    background: #f5f8fc;
    color: #325eab;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
}
.sce-course-filter.is-active {
    background: #325eab;
    color: #fff;
}
.sce-course-search {
    margin: 8px 0 16px;
}
.sce-course-empty {
    list-style: none;
    color: #555;
    margin: 12px 0;
}
.sce-course-list .course-list h4 {
    margin-top: 0;
}
</style>

<div class="sce-course-tabs" role="tablist" aria-label="Course list views">
    <button type="button" class="sce-course-tab is-active" data-tab="scheduled" role="tab" aria-selected="true">Course List</button>
    <button type="button" class="sce-course-tab" data-tab="on-request" role="tab" aria-selected="false">Courses Available on request</button>
</div>

<div class="sce-course-search printhide">
    <input type="text" name="quicksearch" id="myInput" placeholder="Enter keywords to search the course list" size="40">
</div>

<div id="panel-scheduled" class="sce-course-panel is-active" role="tabpanel">
    <div class="sce-course-filters printhide" id="sceCategoryFilters" aria-label="Course categories">
        <button type="button" class="sce-course-filter is-active" data-cat-filter="all">All Courses</button>
        <?php foreach ($filterCategories as $filter) { ?>
            <button type="button" class="sce-course-filter" data-cat-filter="<?php echo htmlspecialchars($filter['slug']); ?>">
                <?php echo htmlspecialchars($filter['label']); ?>
            </button>
        <?php } ?>
    </div>
    <?php
    sce_render_course_groups(
        $scheduledGroups,
        'courselist',
        'No scheduled courses are currently listed.'
    );
    ?>
</div>

<div id="panel-on-request" class="sce-course-panel" role="tabpanel" hidden>
    <p class="printhide">
        These courses are not scheduled on our course calendar. For more information, contact Blessings at 
        <a href="mailto:Blessings@cesa.co.za">Blessings@cesa.co.za</a>
    </p>
    <?php
    sce_render_course_groups(
        $onRequestGroups,
        'courselist-on-request',
        'No on-request courses are currently listed.'
    );
    ?>
</div>

<script>
jQuery(document).ready(function() {
    var $ = jQuery;

    function activeList() {
        return $('.sce-course-panel.is-active .sce-course-list');
    }

    function matchesSearch(el, value) {
        return $(el).text().toLowerCase().indexOf(value) > -1;
    }

    function applySearchAndCategory() {
        var value = String($('#myInput').val() || '').toLowerCase();
        var $panel = $('.sce-course-panel.is-active');
        var $list = $panel.find('.sce-course-list');
        var catFilter = 'all';

        if ($panel.attr('id') === 'panel-scheduled') {
            var $activeFilter = $('#sceCategoryFilters .sce-course-filter.is-active');
            if ($activeFilter.length) {
                catFilter = String($activeFilter.data('cat-filter') || 'all');
            }
        }

        $list.find('li').each(function() {
            var isEmptyMsg = $(this).hasClass('sce-course-empty');
            if (isEmptyMsg) {
                return;
            }
            $(this).toggle(matchesSearch(this, value));
        });

        $list.find('.course-list').each(function() {
            var catId = String($(this).data('cat-id') || '');
            var categoryAllowed = (catFilter === 'all' || catFilter === catId);
            var hasMatch = $(this).find('li').filter(function() {
                return $(this).css('display') !== 'none' && matchesSearch(this, value);
            }).length > 0;
            var show = categoryAllowed && hasMatch;
            $(this).toggle(show);
            $list.find('#line-break-' + catId).toggle(show);
        });
    }

    $('#myInput').on('keyup', applySearchAndCategory);

    $('#sceCategoryFilters').on('click', '.sce-course-filter', function() {
        $('#sceCategoryFilters .sce-course-filter').removeClass('is-active');
        $(this).addClass('is-active');
        applySearchAndCategory();
    });

    $('.sce-course-tabs').on('click', '.sce-course-tab', function() {
        var tab = String($(this).data('tab') || 'scheduled');
        $('.sce-course-tab').removeClass('is-active').attr('aria-selected', 'false');
        $(this).addClass('is-active').attr('aria-selected', 'true');
        $('.sce-course-panel').removeClass('is-active').attr('hidden', true);
        if (tab === 'on-request') {
            $('#panel-on-request').addClass('is-active').removeAttr('hidden');
        } else {
            $('#panel-scheduled').addClass('is-active').removeAttr('hidden');
        }
        applySearchAndCategory();
    });
});
</script>
<?php
mysql_close();