
<?php
  $level = $course->level ;
  $qualification_type = $course->course_category->name;
  $name = 'Level '.$level.' '.$qualification_type;

?>

<style>

    .spec-table td {
        padding: 12px;
        vertical-align: top;
    }
    .sidebar {
        background-color: #f5f5f5;
        padding: 25px;
        border-radius: 10px;
        position: sticky;
        top: 80px; /* distance from top */
        z-index: 100;
    }
    .sidebar h5 {
        margin-bottom: 20px;
    }
    .sidebar a {
        display: block;
        padding: 8px 0;
        color: #000;
        text-decoration: none;
        border-bottom: 1px solid #ddd;
    }
    .sidebar a:hover {
        text-decoration: underline;
    }
    .btn-gold {
        background-color: #c59d36;
        color: white;
        border: none;
        border-radius: 25px;
        padding: 10px 25px;
        font-weight: bold;
        margin-top: 20px;
    }
    .btn-gold:hover {
        background-color: #b28a2e;
    }
    .td-left{
        width: 45%;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .td-right{
        width: 50%;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .bg-primary {
        background-color: #ffc20a !important;
    }
    .bg-header {
        background-color: #b53e27 !important;
    }
    .text-justify {
        text-align: justify;
    }
    .card{
        margin-left: 15px;!important;
    }
</style>
<!-- Header End -->
<div class="container-fluid py-5 bg-dark page-header mb-5">
    <div class="container my-5 pt-5 pb-4">
        <h3 class="display-3 text-white mb-3 animated slideInDown"> <?= h($course->name) ?> </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb text-uppercase">
                <li class="breadcrumb-item"><a href="<?php echo $this->Url->build(["controller" => "Learninghub","action" => "index"]);?>">Home</a></li>
                <li class="breadcrumb-item text-white active" aria-current="page">
                    <a href="<?php echo $this->Url->build(["controller" => "Learninghub","action" => "courses"]);?>">Courses</a>
                </li>
            </ol>
        </nav>
    </div>
</div>
<!-- Header End -->


<!-- Application Process Start -->
<div class="container-xxl py-3">
    <div class="container">
        <div class="row">
            <h3><?= h($course->name) ?></h3>
            <p class="card bg-header text-white fw-bold col-sm-10 col-md-5">Qualification number (RQF): <?= h($course->code) ?></p>
        </div>
        <div class="row">
            <!-- Sidebar (Right column on desktop, but appears first on mobile) -->
            <div class="col-md-3 order-1 order-md-2" style="padding-bottom: 50px">
                <div class="sidebar text-center">
                    <h5 class="fw-bold mb-4"><?= h($course->name) ?></h5>
                    <a href="#" onclick="scrollToSection('specifications'); return false;">Specifications</a>
                    <a href="#" onclick="scrollToSection('overview'); return false;">Overview</a>
                    <a href="#" onclick="scrollToSection('units'); return false;">Units</a>
                    <a href="#" onclick="scrollToSection('outcomes'); return false;">Outcomes</a>
                    <a href="#" onclick="scrollToSection('requirements'); return false;">Requirements</a>
                </div>
            </div>

            <!-- Main Content (Left column on desktop, appears after on mobile) -->
            <div class="col-md-8 order-2 order-md-1">
                <div class="section" id="specifications">
                <h5 class="mb-4">Specifications</h5>
                <table class="table table-bordered table-striped table-hover text-center align-middle mb-3 text-center">
                    <tr>
                        <td class="td-left"><strong>Qualification title:</strong></td>
                        <td class="td-right"><?= h($course->name) ?></td>
                    </tr>
                    <tr>
                        <td class="td-left"><strong>Qualification type:</strong></td>
                        <td class="td-right"><?= h($course->qualification_type->name) ?></td>
                    </tr>
                    <tr>
                        <td class="td-left"><strong>Level:</strong></td>
                        <td class="td-right"><?= h($course->level) ?></td>
                    </tr>
                    <tr>
                        <td class="td-left"><strong>Accreditation status:</strong></td>
                        <td class="td-right"><?= h(ACCREDITATION_STATUS[$course->accreditation_status]) ?></td>
                    </tr>
                    <?php if(!empty($course->qualification_time) && $course->qualification_time>0) {?>
                    <tr>
                        <td class="td-left"><strong>TQT:</strong></td>
                        <td class="td-right"><?= h($course->qualification_time) ?></td>
                    </tr>
                    <?php } ?>
                    <tr>
                        <td class="td-left"><strong>Credit Equivalency:</strong></td>
                        <td class="td-right"><?= h($course->total_credit) ?></td>
                    </tr>
                    <tr>
                        <td class="td-left"><strong>Qualification number (RQF):</strong></td>
                        <td class="td-right"><?= h($course->code) ?></td>
                    </tr>
                    <tr>
                        <td class="td-left"><strong>Progression routes:</strong></td>
                        <td class="td-right"><?= h($course->progression_routes) ?></td>
                    </tr>
                    <tr>
                        <td class="td-left"><strong>Availability:</strong></td>
                        <td class="td-right"><?= h(AVAILABILITY_TYPE[$course->availability_type]) ?></td>
                    </tr>
                    <tr>
                        <td class="td-left"><strong>Centre Specification:</strong></td>
                        <td class="td-right"><a href="<?= h($course->centre_specification_link) ?>" target="_blank">Click here to download
                            </a></td>
                    </tr>

                </table>
                </div>
                <hr/>
                <div class="section" id="overview">
                    <?= $this->element('qualification_overview', ['name' => $name]); ?>

                </div>
                <hr/>
                <!-- Units Section -->
                <div class="section"  id="units">
                    <h5 class="mb-3">Units</h5>
                    <?php if($mandatoryCount>0) {?>
                    <p><strong>Mandatory</strong></p>
                    <?php } ?>
                    <ul class="mt-3">
                        <?php if (!empty($course_subjects)) : ?>
                            <?php foreach ($course_subjects as $subject) :
                                if($subject->is_mandatory == 1){?>
                                <li>
                                    <?= h($subject->title) ?>
                                </li>
                             <?php }endforeach; ?>
                         <?php endif; ?>
                    </ul>
                    <?php if($optionalCount>0) {?>
                        <p><strong>Optional</strong></p>
                    <?php } ?>
                    <ul class="mt-3">
                        <?php if (!empty($course_subjects)) : ?>
                            <?php foreach ($course_subjects as $subject) :
                                if($subject->is_mandatory !== 1){?>
                                    <li>
                                        <?= h($subject->title) ?>
                                    </li>
                                <?php }endforeach; ?>
                        <?php endif; ?>
                    </ul>
                </div>
                <hr/>
                <!-- Learning Outcomes Section -->
                <div class="section"  id="outcomes">
                    <?= $this->element('learning_outcomes', ['name' => $name]); ?>
                </div>
                <hr/>
                <!-- Entry Requirements Section -->
                <div class="section"  id="requirements">
                    <?= $this->element('entry_requirements', ['name' => $name]); ?>
                </div>
            </div>


        </div>
    </div>
</div>

<script type="application/javascript">

    function scrollToSection(id) {
        const element = document.getElementById(id);
        const offset = 100; // height of your fixed header
        const y = element.getBoundingClientRect().top + window.pageYOffset - offset;

        window.scrollTo({ top: y, behavior: 'smooth' });
    }

</script>


