<?php session_start();
require("template/header.php");
include('conn_db.php');//session_start();
$department = '';
$faculty = $_SESSION["faculty"];
$query = "
    SELECT department FROM department_tbl WHERE faculty = '$faculty'  
";
$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

foreach ($result as $row) {
    $department .= '<option value="' . $row["department"] . '">' . $row["department"] . '</option>';
}

// Get session and semester
$query = "SELECT * FROM session_semester WHERE session = '2019/2020' AND  semester = 'SECOND'";
$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();
foreach ($result as $row) {
    $_SESSION["session"] = $row["session"];

    $_SESSION["semester"] = $row["semester"];
    $_SESSION["ses_sem_id"] = $row["ses_sem_id"];
}

echo $_SESSION["ses_sem_id"];

?>


<!-- Main content area of the student portal-->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.tabletojson.min.js"></script>
<style>
    /*.container{overflow: hidden}*/
    .tab {
        float: left
    }

    #tab {
        float: left
    }

    .tab-btn {
        margin: 50px;
    }

    tr {
        transition: all .25s ease-in-out
    }

    button {
        display: block;
        margin-bottom: 20px;
    }

    tr:hover {
        background-color: #ddd;
    }
</style>
<div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 100%">

        <?php if (($_SESSION["level"] == 'ND I')) { ?>

        <div class="image-caption-wrapper" style="float: right;"><img width="300" height="203"
                                                                      style="margin-top: 7px; margin-right: 7px; margin-bottom: 7px; margin-left: 7px;"
                                                                      alt="" class="art-lightbox"
                                                                      src="images/DSC_1919.jpg">
            <p>Matriculation Number: <?php echo $_SESSION["matricno"] ?></p>
        </div>
        <p style=" text-transform:uppercase; color:#030; font-size:22px; font-weight:bolder; font-stretch:extra-expanded"><?php echo $_SESSION["surname"] ?></p>
        <p style="text-transform:uppercase; color:#033; font-size:14px; font-weight:bolder; font-stretch:expanded">
            Current level: <strong style="color:#030;"><?php echo $_SESSION["level"] ?></strong></p>
        <p style="text-transform:uppercase; color:#033; font-size:14px; font-weight:bolder; font-stretch:expanded">
            Department: <strong style="color:#030; margin-left:20px"><?php echo $_SESSION["department"] ?></strong></p>
        <p style="text-transform:uppercase; color:#033; font-size:14px; font-weight:bolder; font-stretch:expanded">
            Faculty: <strong style="color:#030;"><?php echo $_SESSION["faculty"] ?></strong></p>
        <p style="text-transform:uppercase; color:#033; font-size:14px; font-weight:bolder; font-stretch:expanded">
            Session/Semester: <strong style="color:#030; margin-left:20px"><?php echo $_SESSION["session"] ?>
                /<?php echo $_SESSION["semester"] ?></strong></p>


        <div class="art-content-layout">
            <div class="art-content-layout-row">
                <div class="art-layout-cell layout-item-0" style="width: 50%" align="center">
                    <h3>Current Semester Courses<h3/>
                        <!-- <form method="post" id="insert_data">              -->
                        <table id="mytable2" border="2" align="center" class="">
                            <tr>
                                <th>Course Code</th>
                                <th>Course Title</th>
                                <th>Unit</th>
                                <th>Select</th>
                            </tr>
                        </table>
                        <br>
                        <input type="button" name="selectAll" id="selectAll" class="btn btn-info" value="CheckAll"
                               align="right"/><br>
                        <form method="post" action="Report.php" id="print">
                            <input type="submit" name="print" id="action" class="btn btn-info" value="Print"
                                   align="center"/>
                        </form>
                        <input type="submit" name="register" id="register" class="btn btn-info" value="Register"
                               align="center"/>
                        <!-- </form> -->
                </div>
            </div>
        </div>


    </div>
</div>
<?php
}
else {
    ?>
    <div class="image-caption-wrapper" style="float: right;"><img width="300" height="203"
                                                                  style="margin-top: 7px; margin-right: 7px; margin-bottom: 7px; margin-left: 7px;"
                                                                  alt="" class="art-lightbox" src="images/DSC_1919.jpg">
        <p>Matriculation Number: <?php echo $_SESSION["matricno"] ?></p>
    </div>
    <p style=" text-transform:uppercase; color:#030; font-size:22px; font-weight:bolder; font-stretch:extra-expanded"><?php echo $_SESSION["surname"] ?></p>
    <p style="text-transform:uppercase; color:#033; font-size:14px; font-weight:bolder; font-stretch:expanded">Current
        level: <strong style="color:#030;"><?php echo $_SESSION["level"] ?></strong></p>
    <p style="text-transform:uppercase; color:#033; font-size:14px; font-weight:bolder; font-stretch:expanded">
        Department: <strong style="color:#030; margin-left:20px"><?php echo $_SESSION["department"] ?></strong></p>
    <p style="text-transform:uppercase; color:#033; font-size:14px; font-weight:bolder; font-stretch:expanded">Faculty:
        <strong style="color:#030;"><?php echo $_SESSION["faculty"] ?></strong></p>
    <p style="text-transform:uppercase; color:#033; font-size:14px; font-weight:bolder; font-stretch:expanded">
        Session/Semester: <strong style="color:#030; margin-left:20px"><?php echo $_SESSION["session"] ?>
            /<?php echo $_SESSION["semester"] ?></strong></p>


    <div class="container" id="#tab">

        <div id="disabled">
            <div id="department1">
                <select name="department" id="department" class="action">
                    <option value="">Select Department</option>
                    <?php echo $department; ?>
                </select><br/><br/>
            </div>
            <div id="level1">
                <select name="level" id="level" class="action">
                    <option value="">Select Level</option>
                </select><br/><br/>
            </div>
            <div id="semester1">
                <select name="semester" id="semester" class="action">
                    <option value="">Select Semester</option>
                </select>
            </div>
        </div>
        <br/>
        <div class="art-content-layout">
            <div class="art-content-layout-row">
                <div class="art-layout-cell layout-item-0" style="width: 50%">
                    <h3>Available Semester Courses</h3>
                    <table id="mytable" class="" align="left" border="2">
                        <thead>
                        <tr>
                            <th>Course Code</th>
                            <th>Course Title</th>
                            <th>Unit</th>
                            <th>Select</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <!-- <form method="post" id="register1">                           -->
                <div class="art-layout-cell layout-item-0" style="width: 50%" align="center">
                    <h3>Current Semester Courses<h3/>
                        <table id="mytable2" border="2" align="right">
                            <tr>
                                <th>Course Code</th>
                                <th>Course Title</th>
                                <th>Unit</th>
                                <th>Remove</th>
                            </tr>
                        </table>
                        <span id="sumV"></span>
                        <br/>
                        <input type="button" name="selectAll" id="selectAll" class="btn btn-info" value="CheckAll"
                               align="right"/>
                        <input type="submit" name="register" id="register" class="btn btn-info" value="Register"
                               align="center" onclick="getSum();"/>
                </div>
            </div>
        </div>
        <form method="post" action="Report.php" id="print">
            <br/><br/>
            <input type="submit" name="print" id="action" class="btn btn-info" value="Print" align="center"/>
        </form>
        <div class="tab tab-btn">
            <button onclick="tab1_To_tab2();">ADD>></button>
            <button onclick="tab2_To_tab1();"><<< Remove</button>
            <!-- <button onclick="getSum();">Units</button> -->
        </div>
        <span id="sumV"></span><br>
    </div>   <?php } ?>


</article></div>

<?php require("template/menu.php"); ?>
<?php require("template/footer.php"); ?>


<script>
    $(document).ready(function () {
        $('.action').change(function () {
            if ($(this).val() != '') {

                var action = $(this).attr("id");
                var query = $(this).val();
                var result = '';
                if (action == 'department') {
                    result = 'level';
                }
                else if (action == 'level') {
                    result = 'semester';
                }
                else {
                    result = '';
                }

                $.ajax({
                    url: 'fetch_dl.php',
                    method: "POST",
                    data: {action: action, query: query},
                    success: function (data) {
                        $('#' + result).html(data);

                    }
                })
            }
        });

        $('#semester').change(function () {
            if ($(this).val() != '') {
                var department = $('#department').val();
                var level = $('#level').val();
                var semester = $('#semester').val();
                {
                    $.ajax({
                        url: 'fetch_courses.php',
                        method: 'POST',
                        data: {department: department, level: level, semester: semester},
                        success: function (data) {
                            $('#mytable').html(data);
                        }
                    })
                }
            }
        });


        $('.check:button').toggle(function () {
            $('input:checkbox').attr('checked', 'checked');
            $(this).val('uncheck all');
        }, function () {
            $('input:checkbox').removeAttr('checked');
            $(this).val('check all');
        });


        //Onload
        $.ajax({
            url: 'ses_sem.php',
            success: function (data) {

                $('#mytable2').html(data);
            }
        });
        // convert table to json
        //Ignore first column (name)
        // var table = $('#mytable2').tableToJSON({
        //   ignoreColumns: [0]
        // });

        $("#selectAll").on('click', function () {
            checkboxes = document.getElementsByName("check-tab2");
            if ($(".checkboxes").length == $(".checkboxes:checked").length) {
                $("#selectAll").attr("checked", "checked");
            } else {
                $("#selectAll").removeAttr("checked");
            }
        });


        $('#register').on('click', function (event) {
            var table2 = document.getElementById("mytable2"),
                checkboxes = document.getElementsByName("check-tab2"),
                course_code = "",
                count = 0;
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    course_code += table2.rows[i + 1].cells[0].innerHTML + ',';
                }
            }
            console.log(course_code);
            $.ajax({
                url: "insert_courses.php",
                method: "POST",
                data: {course_code: course_code},
                success: function (data) {
                    alert(data);
                    $('#register').attr('disabled', 'disabled');
                    $('.mytable2').attr("disabled", true)
                }
            })
        });
// dont cut
    });


    function tab1_To_tab2() {
        var table1 = document.getElementById("mytable"),
            table2 = document.getElementById("mytable2"),
            checkboxes = document.getElementsByName("check-tab1");
        for (var i = 0; i < checkboxes.length; i++)
            if (checkboxes[i].checked) {
                // create new row and cells
                var newRow = table2.insertRow(table2.length),
                    cell1 = newRow.insertCell(0),
                    cell2 = newRow.insertCell(1),
                    cell3 = newRow.insertCell(2),
                    cell4 = newRow.insertCell(3);
                // add values to the cells
                cell1.innerHTML = table1.rows[i + 1].cells[0].innerHTML;
                cell2.innerHTML = table1.rows[i + 1].cells[1].innerHTML;
                cell3.innerHTML = table1.rows[i + 1].cells[2].innerHTML;
                cell4.innerHTML = "<input type='checkbox' name='check-tab2' value = 'cell1.innerHTML'>";
                console.log(cell1.innerHTML);
                // var index = table1.rows[i+1].rowIndex;
                // table1.deleteRow(index);                
                // i--;
            }
    }


    function tab2_To_tab1() {
        var table1 = document.getElementById("mytable"),
            table2 = document.getElementById("mytable2"),
            checkboxes = document.getElementsByName("check-tab2");
        for (var i = 0; i < checkboxes.length; i++)
            if (checkboxes[i].checked) {
                var index = table2.rows[i + 1].rowIndex;
                table2.deleteRow(index);

                i--;
            }
    }

    // caculate total/sum value
    var table = document.getElementById("mytable2"),
        checkboxes = document.getElementsByName("check-tab2"), sumVal = 0;
    getSum();
    function getSum() {
        // for(var i = 1; i < table.rows.length; i++){
        //        sumVal = sumVal + parseInt(table.rows[i].cells[2].innerHTML);
        // }
        // document.getElementById("sumV").innerHTML = "Total Units = "+sumVal;

        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                var index;
                sumVal = sumVal + table.rows[index].cells[2].innerHTML;
            }
            console.log("Sum => " + sumVal);

        }
    }


</script>