<?php
session_start();
ob_start(); // Start output buffering

include "../include/config.php";
$userlogin = $_SESSION['email'];
$email = $_SESSION['email'];
$intake = $_SESSION['department'];

if (isset($_SESSION['email'])) {
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Course Management</title>
    <!-- All your existing CSS and JS includes -->
    <link rel="stylesheet" href="../../boostrap/1.css">
    <link rel="stylesheet" href="../../boostrap/2.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="icon" href="favicon.png" type="image/png">
    <meta name="theme-color" content="#d03f4d">
    <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300..700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="res/bootstrap@5.2.0.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    
    <style>
        /* Your existing styles */
        body {
            padding: 0px;
            margin: 0px;
            font-size: 16px;
            width: 100%;
            background: white;
        }
        nav {
            background: #d03f4d;
            line-height: 60px;
        }
        nav a {
            color: white;
            text-decoration: none;
        }
        .pro, .money {
            display: flex;
            justify-content: center;
        }
        .pro p {
            margin-left: 30px;
        }
        @media only screen and (max-width: 500px) {
            nav a {
                margin-left: %;
                color: white;
                text-decoration: none;
            }
            .header {
                width: 100%;
            }
            .flex .box {
                width: 100%;
            }
            form {
                width: 100%;
            }
            input {
                width: 100%;
            }
        }
        .iterm {
            justify-content: center;
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
            margin-top: 10px;
            color: white;
            overflow: scroll;
            height: 100%;
            text-align: center;
        }
        .iterm1 {
            padding: 20px;
            padding-left: 30px;
            padding-right: 30px;
        }
        .iterm a {
            width: 45%;
            height: %;
            box-shadow: rgba(99, 99, 99, 0.4) 0px 2px 8px 0px;
            padding: 10px;
            text-align: center;
            border-radius: 5px;
            margin: 5px;
            background: white;
            text-decoration: none;
            border: 1px solid gray;
        }
        .header {
            margin-top: px;
            background: #d03f4d;
            background-size: cover;
            background-blend-mode: darken;
            height: 200px;
            width: 100%;
            color: white;
            padding: px;
            text-align: center;
        }
        .header {
            width: 100%;
        }
        part {
            margin-top: -50px;
            position: absolute;
            background: white;
            width: 93%;
            height: 210px;
            top: 60px;
            left: 50%;
            transform: translate(-50%);
            color: gray;
            display: block;
            border-radius: 6px;
        }
        .header img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 5px solid white;
            float: right;
            margin-right: 15px;
        }
        .iterm_box img {
        }
        .iterm i {
            font-size: 20px;
            background: #d03f4d;
            padding: 9px;
            border-radius: 5px;
        }
        .iterm_box p {
            font-size: 13px;
            margin-top: 5px;
            color: #d03f4d;
            margin-bottom: 10px;
        }
        .btn {
            background: #d03f4d;
            border: none;
            border-radius: 2px;
            outline: none;
            color: white;
        }
        .dash {
            color: white;
            font-weight: 900px;
            text-align: center;
        }
        .money {
            justify-content: ;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }
        .money .card1 {
            width: 60px;
            margin-left: 10px;
            box-shadow: 2px 1px 10px 0px rgb(199, 235, 202);
            margin-top: -10px;
        }
        #btn {
            background: orange;
        }
        .in {
            justify-content: center;
            display: flex;
            flex-wrap: wrap;
            padding: px;
            font-weight: 1000;
        }
        .in p {
            font-size: 15px;
            margin-top: 10px;
        }
        .in .card2 {
            width: 100%;
            margin: 5px;
            text-align: center;
            padding: 5px;
            box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
            border-radius: 6px;
            background: ;
            color: #d03f4d;
            border: none;
            font-size: 14px;
            height: 100%;
            text-decoration: none;
        }
        .in a {
            width: 46%;
            margin: 5px;
            text-decoration: none;
        }
        .in .card2 img {
            font-size: 30px;
            color: #d03f4d;
            opacity: 0.4;
        }
        .loading {
            display: none;
            text-align: center;
            margin: 1rem 0;
        }
        .content {
            margin-left: 210px;
            padding: 10px;
        }
        .flex {
            justify-content: center;
            display: flex;
            flex-wrap: wrap;
            padding: px;
        }
        .flex .box {
            width: %;
        }
        label {
            margin-bottom: -10px;
        }
        .content {
            margin-left: 200px;
            padding: 15px;
        }
        .btn:hover {
            background: gray;
        }
        
        /* Additional styles for course management */
        .csv-template {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        .csv-download {
            margin-bottom: 15px;
        }
        
        /* Program selection styles */
        .program-checkboxes {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
        }
        .program-item {
            margin-bottom: 8px;
        }
        .select-all {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
<?php include "../include/nav.php"; ?>

<div class="content" style="padding:20px">

    <!-- Success/Error Messages -->
    <?php
    if (isset($_GET['error'])) { ?>
        <div class="alert alert-danger" style="text-align:center;">
            <p><i class="fa fa-check"></i> <?php echo $_GET['error']; ?></p>
        </div>
    <?php } ?>
    
    <?php if (isset($_GET['success'])) { ?>
        <div class="alert alert-success" style="text-align:center;">
            <p><i class="fa fa-check"></i> <?php echo $_GET['success']; ?></p>
        </div>
    <?php } ?>
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4>Course Management</h4>
        <button class="btn btn-primary" data-toggle="modal" data-target="#addCourseModal">
            <i class="fa fa-plus"></i> Add New Course
        </button>
    </div>
    
    <!-- CSV Upload Section -->
    <div class="card mb-4">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0">Bulk Upload Courses via CSV</h5>
        </div>
        <div class="card-body">
            <div class="csv-download">
                <a href="generate_csv_template.php" class="btn btn-outline-success btn-sm">
                    <i class="fa fa-download"></i> Download CSV Template
                </a>
                <p class="csv-template">CSV format: course, semester, program (one per line)</p>
            </div>
            
            <form method="POST" enctype="multipart/form-data" action="upload_courses.php">
                <div class="form-group">
                    <label for="csvFile">Select CSV File</label>
                    <input type="file" class="form-control-file" id="csvFile" name="csvFile" accept=".csv" required>
                </div>
                <button type="submit" name="uploadCsv" class="btn btn-success">
                    <i class="fa fa-upload"></i> Upload CSV
                </button>
            </form>
        </div>
    </div>
    
    <!-- Courses Table -->
    <div class="card">
        <div class="card-header bg-secondary text-white">
            <h5 class="mb-0">Existing Courses</h5>
        </div>
        <div class="card-body">
            <div class="mb-3">
                <input type="text" id="courseSearch" class="form-control" placeholder="Search courses...">
            </div>
            
            <div style="overflow:auto; max-height:500px;">
                <table class="table table-bordered table-hover align-middle" id="coursesTable">
                    <thead class="thead-light">
                        <tr>
                            <th>ID</th>
                            <th>Course</th>
                            <th>Semester</th>
                            <th>Year</th>

                            <th>Program(s)</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $sql = "SELECT 
                                *FROM course 
                               
                                GROUP BY id 
                                ORDER BY program DESC";
                        $result = $conn->query($sql);
                        
                        if ($result->num_rows > 0) {
                            while($row = $result->fetch_assoc()) {
                                echo "<tr>
                                    <td>{$row['id']}</td>
                                    <td>{$row['course']}</td>
                                    <td>{$row['semester']}</td>
                                    <td>{$row['year']}</td>

                                    <td>{$row['program']}</td>
                                    <td>
                                        <a href='edit_course.php?id={$row['id']}' class='btn btn-sm btn-info'>
                                            <i class='fa fa-edit'></i> Edit
                                        </a>
                                        <a href='delete_course.php?id={$row['id']}' class='btn btn-sm btn-danger' 
                                           onclick='return confirm(\"Are you sure you want to delete this course?\");'>
                                            <i class='fa fa-trash'></i> Delete
                                        </a>
                                    </td>
                                </tr>";
                            }
                        } else {
                            echo "<tr>
                                <td colspan='5' class='text-center text-muted'>No courses found</td>
                            </tr>";
                        }
                        ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Course Modal -->
<div class="modal fade" id="addCourseModal" tabindex="-1" role="dialog" aria-labelledby="addCourseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addCourseModalLabel">Add New Course</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="add_course.php">
                    <div class="form-group">
                        <label for="courseName">Course Name</label>
                        <input type="text" class="form-control" id="courseName" name="courseName" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="semester">Semester</label>
                        <select class="form-control" id="semester" name="semester" required>
                            <option value="">-- Select Semester --</option>
                            <option value="1">Semester 1</option>
                            <option value="2">Semester 2</option>
                          
                        </select>
                    </div>
                      <div class="form-group">
                        <label for="year">Year</label>
                        <select class="form-control" id="year" name="year" required>
                            <option value="">-- Select year --</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>

                          
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="programs">Program(s)</label>
                        <div class="select-all">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="selectAllPrograms">
                                <label class="form-check-label" for="selectAllPrograms">
                                    Select All Programs
                                </label>
                            </div>
                        </div>
                        <div class="program-checkboxes">
                            <?php
                            $programs = $conn->query("SELECT id, program FROM programs ORDER BY program");
                            if ($programs->num_rows > 0) {
                                while($program = $programs->fetch_assoc()) {
                                    echo "<div class='program-item form-check'>
                                        <input class='form-check-input program-checkbox' type='checkbox' 
                                               name='programs[]' value='{$program['program']}' id='program_{$program['id']}'>
                                        <label class='form-check-label' for='program_{$program['id']}'>
                                            {$program['program']}
                                        </label>
                                    </div>";
                                }
                            } else {
                                echo '<p class="text-muted">No programs found. Please add programs first.</p>';
                            }
                            ?>
                        </div>
                    </div>
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" name="addCourse" class="btn btn-primary">Add Course</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Live search for courses
document.getElementById('courseSearch').addEventListener('keyup', function() {
    let filter = this.value.toLowerCase();
    let rows = document.querySelectorAll('#coursesTable tbody tr');
    
    rows.forEach(row => {
        let text = row.textContent.toLowerCase();
        row.style.display = text.includes(filter) ? '' : 'none';
    });
});

// Select all programs functionality
document.getElementById('selectAllPrograms').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.program-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// Individual checkbox logic
const programCheckboxes = document.querySelectorAll('.program-checkbox');
programCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const allChecked = Array.from(programCheckboxes).every(cb => cb.checked);
        const noneChecked = Array.from(programCheckboxes).every(cb => !cb.checked);
        
        if (allChecked) {
            document.getElementById('selectAllPrograms').checked = true;
            document.getElementById('selectAllPrograms').indeterminate = false;
        } else if (noneChecked) {
            document.getElementById('selectAllPrograms').checked = false;
            document.getElementById('selectAllPrograms').indeterminate = false;
        } else {
            document.getElementById('selectAllPrograms').checked = false;
            document.getElementById('selectAllPrograms').indeterminate = true;
        }
    });
});
</script>

</body>
</html>

<?php
} else {
    header("location:../index.php");
}