<link href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.semanticui.min.css" rel="stylesheet" type="text/css" />
    <div class="container panel panel-blue md-margin-bottom-40">
        <div class="headline">
            <h1>All Courses</h1>
        </div>
        <?php
            $session = \Config\Services::session();
            if ($session->getFlashdata('success')) {
                echo '<div class="alert alert-success">'.$session->getFlashdata("success").'</div>';
            }
        ?>
        
        
       <table id="courses" class="ui celled table" style="width:90%">
        <thead>
            <tr>
                <th>#</th>
                <th>Title</th>
                <th>Duration</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <?php
        $i = 1;
        foreach ($courses as $course) :
        ?>
            <tr>
                <td><?php echo $i; ?></td>
                <td><?php echo ucwords(strtolower($course->courseName)); ?></td>
                <td><?php echo $course->duration . ' ' . $course->typeName; ?></td>
                <td><a class="btn-xs btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" title="Edit Course" href="updatecourse/<?php echo $course->courseID; ?>"><i class="fa fa-pencil"></i></a></td>
                <td><a class="btn-xs btn btn-danger" data-bs-toggle="tooltip" data-bs-html="true" title="Delete Course"  href="deletecourse/<?php echo $course->courseID; ?>"><i class="fa fa-trash"></i></a></td>
            </tr>
             <?php
            $i++;
        endforeach;
        ?>
        </tbody>
        <tfoot>
            <tr>
                <th>#</th>
                <th>Title</th>
                <th>Duration</th>
                <th>Edit</th>
                <th>Delete</th></th>
            </tr>
        </tfoot>
    </table>
    
    
    
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.semanticui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.js"></script>
    
    <script>
    $(document).ready(function() {
        $('#courses').DataTable({
            "paging": true,  // Adjust as needed
            "ordering": true,  // Adjust as needed
            // Add other options as needed
        });
    });
</script>

