<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Corass - Project Topic</title>
    <link rel="icon" href="img/kp.png" type="image/png">

    <link rel="stylesheet" href="css/bootstrap1.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="vendors/themefy_icon/themify-icons.css" />

    <link rel="stylesheet" href="vendors/niceselect/css/nice-select.css" />

    <link rel="stylesheet" href="vendors/owl_carousel/css/owl.carousel.css" />

    <link rel="stylesheet" href="vendors/gijgo/gijgo.min.css" />

    <link rel="stylesheet" href="vendors/font_awesome/css/all.min.css" />
    <link rel="stylesheet" href="vendors/tagsinput/tagsinput.css" />

    <link rel="stylesheet" href="vendors/datepicker/date-picker.css" />

    <link rel="stylesheet" href="vendors/scroll/scrollable.css" />

    <link rel="stylesheet" href="vendors/datatable/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="vendors/datatable/css/responsive.dataTables.min.css" />
    <link rel="stylesheet" href="vendors/datatable/css/buttons.dataTables.min.css" />

    <link rel="stylesheet" href="vendors/text_editor/summernote-bs4.css" />

    <link rel="stylesheet" href="vendors/morris/morris.css">

    <link rel="stylesheet" href="vendors/material_icon/material-icons.css" />

    <link rel="stylesheet" href="css/metisMenu.css">

    <link rel="stylesheet" href="css/style1.css" />
    <link rel="stylesheet" href="css/colors/default.css" id="colorSkinCSS">
    <!-- toastr -->
    <link href="../js/toastr.css" rel="stylesheet">
</head>

<body class="crm_body_bg">
    <%- include('../component/staff-sidebar.ejs') %>
        <section class="main_content dashboard_part large_header_bg">
            <%- include('../component/staff-profile-info.ejs') %>
                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Topic
                                    Approval/Rejection comment</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" id="actionType">
                                <input type="hidden" id="student_id">
                                <input type="hidden" id="topic_id">
                                <input type="hidden" id="project_type_id">
                                <textarea class="form-control" name="topicUpdate" id="topicUpdate" style="display:none;"
                                    cols="20" rows="5"></textarea> <br />
                                <textarea class="form-control" name="comment" id="comment"
                                    placeholder="Your comment here..." cols="20" rows="5"></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" id="closeModal"
                                    data-dismiss="modal">Close</button>
                                <button type="button" id="saveComment" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="app-content content main_content_iner ">
                    <!-- BEGIN: Header-->
                    <div class="content-overlay"></div>
                    <div class="header-navbar-shadow"></div>

                    <div class="content-wrapper container-xxl p-0">

                        <div class="col-12">
                            <div class="dashboard_header mb_50">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="dashboard_header_title">
                                            <h3>Project Topics Approval</h3>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="dashboard_breadcam text-end">
                                            <p>
                                                <a href="">Dashboard</a>
                                                <i class="fas fa-caret-right"></i>Topics
                                                Approval
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="content-body">

                            <div class="container">
                                <section id="homesection" data-username="REG/P/1724" data-name="AYODEJI FATAI ABOLARIN"
                                    data-email="">

                                    <p class="mb-2">
                                        Summary of all submitted project topics
                                        submitted to me for review.
                                    </p>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="single_element">
                                                <div class="quick_activity">
                                                    <div class="row">
                                                        <div class="col-lg-4">
                                                            <div class="single_quick_activity">
                                                                <div class="count_content">
                                                                    <div style="display: inline-block;margin: 10px;">
                                                                        <h6>
                                                                            <%= pendingApprove %>
                                                                        </h6>
                                                                        <p>Pending</p>
                                                                    </div>
                                                                    <div style="display: inline-block;height: 50px;width: 50px;border-radius: 30px;background-color:#FFF3E8;"
                                                                        class="bg-col mx-3 ">
                                                                        <img src="img/icon/open-book-svgrepo-com.svg"
                                                                            alt="" height="30px" width="30px">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-lg-4">
                                                            <div class="single_quick_activity">
                                                                <div class="count_content">
                                                                    <div style="display: inline-block;margin: 10px;">
                                                                        <h6>
                                                                            <%= approved %>
                                                                        </h6>
                                                                        <p> Approved</p>
                                                                    </div>
                                                                    <div style="display: inline-block;height: 50px;width: 50px;border-radius: 30px;background-color:#E5F6EB;"
                                                                        class="bg-col mx-3 ">
                                                                        <img src="img/icon/open-book-svgrepo-com.svg"
                                                                            alt="" height="30px" width="30px">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-4">
                                                            <div class="single_quick_activity">
                                                                <div class="count_content">
                                                                    <div style="display: inline-block;margin: 10px;">
                                                                        <h6>
                                                                            <%= rejected %>
                                                                        </h6>
                                                                        <p>Rejected</p>
                                                                    </div>
                                                                    <div style="display: inline-block;height: 50px;width: 50px;border-radius: 30px;background-color:#FDEAEA;"
                                                                        class="bg-col mx-3 ">
                                                                        <img src="img/icon/open-book-svgrepo-com.svg"
                                                                            alt="" height="30px" width="30px">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                            <div class="col-lg-12 mt-4">
                                <div class="white_card card_height_100 mb_30">
                                    <div class="white_card_header">
                                        <div class="box_header m-0">
                                            <div class="main-title">
                                                <h3 class="m-0">Projects</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="white_card_body">
                                        <div class="QA_section">
                                            <div class="row">
                                                <div class="col-lg-4 col-sm-3 col-md-3">
                                                    <label>HND/ND</label>
                                                    <select name="" class="filterBtn form-select shadow-none">
                                                        <option selected>Select Level
                                                        </option>
                                                        <option value="ND">National
                                                            Diploma(ND)</option>
                                                        <option value="HND">Higher
                                                            National Diploma(HND)
                                                        </option>
                                                    </select>
                                                </div>
                                                <div class="col-lg-4">
                                                    <label>FT/PT</label>
                                                    <select name="" class=" filterBtn form-select shadow-none">
                                                        <option selected>Select Mode
                                                        </option>
                                                        <option value="FT">FULL TIME(FT)
                                                        </option>
                                                        <option value="PT">PART TIME(PT)
                                                        </option>
                                                    </select>
                                                </div>
                                                <div class="col-lg-4">
                                                    <label>Status</label>
                                                    <select name="" class="filterBtn form-select shadow-none">
                                                        <option selected>Select Status
                                                        </option>
                                                        <option value="Pending">Pending
                                                        </option>
                                                        <option value="Approved">
                                                            Approved </option>
                                                    </select>
                                                </div>
                                            </div><br>
                                            <div class="white_box_tittle list_header">
                                                <h4>Table</h4>
                                                <div class="box_right d-flex lms_block">
                                                    <!-- <div class="serach_field_2">
                  <div class="search_inner">
                    <form Active="#">
                      <div class="search_field">
                        <input
                          type="text",
                          id="mySearch"
                          placeholder="Search content here..."
                        />
                      </div>
                      <button type="submit">
                        <i class="ti-search"></i>
                      </button>
                    </form>
                  </div>
                </div> -->
                                                </div>
                                            </div>
                                            <div class="QA_table table-responsive  mb_30">
                                                <table id="stu" class="table ">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Topic</th>
                                                            <th scope="col">Student</th>
                                                            <th scope="col">Matric
                                                                Number</th>
                                                            <th scope="col">Status</th>
                                                            <th scope="col">Level</th>
                                                            <th scope="col">Study Mode
                                                            </th>
                                                            <th scope="col">Project Type
                                                            </th>
                                                            <th scope="col">Date
                                                                Submitted</th>
                                                            <th scope="col">Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <% if (topics && topics.length> 0) {
                                                            for (var topic of topics) { %>
                                                            <tr>
                                                                <th scope="row">
                                                                    <a href="#" class="question_content">
                                                                        <%= topic.topic %>
                                                                    </a>
                                                                </th>
                                                                <td>
                                                                    <div class="container">
                                                                        <div class="row">
                                                                            <div class="col-lg-6">
                                                                                <%= topic.student?.profile?.firstname %>
                                                                                    <%= topic.student?.profile?.lastname
                                                                                        %>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="">
                                                                    <%= topic.student?.username %>
                                                                </td>
                                                                <td>
                                                                    <% if (topic.is_approved) { %>
                                                                        <span
                                                                            class="badge badge-success">Approved</span>
                                                                        <% } else { %>
                                                                            <span
                                                                                class="badge badge-warning">Pending</span>


                                                                            <% } %>
                                                                </td>
                                                                <td>
                                                                    <%= topic.student?.profile?.level?.code %>
                                                                </td>
                                                                <td>
                                                                    <%= topic.student?.profile?.study_mode?.code %>
                                                                </td>
                                                                <td>
                                                                    <%= topic.project_type?.name %>
                                                                </td>
                                                                <td>
                                                                    <%= (topic.createdAt).toLocaleDateString('en-US') %>
                                                                </td>
                                                                <!-- <td>
                                                                    <small class="text text-danger">Topic Actions closed for this session!</small></td> -->
                                                                <td>
                                                                    <% if (topic.active && !topic.is_approved) { %>
                                                                        <button type="button"
                                                                            onclick="updateTopicAction('accept','<%= topic.project_type_id %>','<%= topic.student?.profile?.user_id %>','<%= topic?.id %>')"
                                                                            class="btn btn-success btn-sm"
                                                                            data-toggle="modal"
                                                                            data-target="#exampleModal">
                                                                            Accept
                                                                        </button>
                                                                        <button type="button"
                                                                            onclick="updateTopicAction('reject','<%= topic.project_type_id %>','<%= topic.student?.profile?.user_id %>','<%= topic?.id %>')"
                                                                            class="btn btn-danger btn-sm"
                                                                            data-toggle="modal"
                                                                            data-target="#exampleModal">
                                                                            Reject
                                                                        </button>
                                                                        <button type="button"
                                                                            onclick="updateTopicAction('edit','<%= topic.project_type_id %>','<%= topic.student?.profile?.user_id %>','<%= topic?.id %>')"
                                                                            class="btn btn-warning btn-sm"
                                                                            data-toggle="modal"
                                                                            data-target="#exampleModal">
                                                                            Edit
                                                                        </button>
                                                                        <% } else if (topic.active && topic.is_approved)
                                                                            { %>
                                                                            <span class="badge badge-warning">Topic
                                                                                has been
                                                                                approved!</span>

                                                                            <button type="button"
                                                                                onclick="updateTopicAction('edit','<%= topic.project_type_id %>','<%= topic.student?.profile?.user_id %>','<%= topic?.id %>')"
                                                                                class="btn btn-success btn-sm"
                                                                                data-toggle="modal"
                                                                                data-target="#exampleModal">
                                                                                Edit
                                                                            </button>


                                                                            <% } %>
                                                                </td>
                                                            </tr>
                                                            <% } } else { %>
                                                                <p>No record found</p>


                                                                <% } %>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <footer class="footer footer-light  footer-static  footer1">
                            <p class="clearfix mb-0">
                                <span class="float-md-start d-block d-md-inline-block mt-25 text-center">COPYRIGHT
                                    &copy;
                                    <script>
                                        document.write(new Date().getFullYear())
                                    </script><a class="ms-25" href="">CORASS</a>,
                                    <span class="d-inline-block">All rights
                                        Reserved</span>
                                </span>
                                <span class="float-md-end d-block text-center">Centralized
                                    Online Research Assessment and Submission System<i
                                        data-feather="file-text"></i></span>
                            </p>
                        </footer>
                        <div id="back-top" style="display: none;">
                            <a title="Go to Top" href="#">
                                <i class="ti-angle-up"></i>
                            </a>
                        </div>
                    </div>

                    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
                        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                        crossorigin="anonymous"></script>
                    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
                        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                        crossorigin="anonymous"></script>
                    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
                        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                        crossorigin="anonymous"></script>
                    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
                    <script src="../js/jquery1-3.4.1.min.js"></script>
                    <script src="../js/toastr.min.js"></script>

                    <script src="js/popper1.min.js"></script>

                    <script src="js/bootstrap1.min.js"></script>

                    <script src="js/metisMenu.js"></script>

                    <script src="vendors/count_up/jquery.waypoints.min.js"></script>

                    <script src="vendors/chartlist/Chart.min.js"></script>

                    <script src="vendors/count_up/jquery.counterup.min.js"></script>

                    <script src="vendors/niceselect/js/jquery.nice-select.min.js">
                    </script>

                    <script src="vendors/owl_carousel/js/owl.carousel.min.js"></script>

                    <script src="vendors/datatable/js/jquery.dataTables.min.js">
                    </script>
                    <script src="vendors/datatable/js/dataTables.responsive.min.js">
                    </script>
                    <script src="vendors/datatable/js/dataTables.buttons.min.js">
                    </script>
                    <script src="vendors/datatable/js/buttons.flash.min.js"></script>
                    <script src="vendors/datatable/js/jszip.min.js"></script>
                    <script src="vendors/datatable/js/pdfmake.min.js"></script>
                    <script src="vendors/datatable/js/vfs_fonts.js"></script>
                    <script src="vendors/datatable/js/buttons.html5.min.js"></script>
                    <script src="vendors/datatable/js/buttons.print.min.js"></script>
                    <script src="js/chart.min.js"></script>

                    <script src="vendors/progressbar/jquery.barfiller.js"></script>

                    <script src="vendors/tagsinput/tagsinput.js"></script>

                    <script src="vendors/text_editor/summernote-bs4.js"></script>
                    <script src="vendors/am_chart/amcharts.js"></script>

                    <script src="vendors/scroll/perfect-scrollbar.min.js"></script>
                    <script src="vendors/scroll/scrollable-custom.js"></script>
                    <script src="vendors/chart_am/core.js"></script>
                    <script src="vendors/chart_am/charts.js"></script>
                    <script src="vendors/chart_am/animated.js"></script>
                    <script src="vendors/chart_am/kelly.js"></script>
                    <script src="vendors/chart_am/chart-custom.js"></script>
                    <script>
                        function updateTopicAction(str, project_type_id, student_id,
                            topic_id) {
                            $('#actionType').val(str)
                            $('#student_id').val(student_id)
                            $('#topic_id').val(topic_id)
                            $('#project_type_id').val(project_type_id)

                            if (str == "edit") {
                                document.getElementById("saveComment").innerHTML =
                                    "Save & Approved";
                                document.getElementById("topicUpdate").style.display =
                                    "block";
                                jQuery.ajax({
                                    url: `/view-topic/${topic_id}`,
                                    method: 'GET',
                                    success: function (data) {
                                        console.log(data)
                                        if (data.success == false) {
                                            toastr.error(
                                                data.message,
                                                "ERROR", {
                                                timeOut: 9000
                                            }
                                            );
                                            return
                                        }
                                        document.getElementById(
                                            "topicUpdate").innerHTML =
                                            data.topic.topic;
                                    }
                                });

                            }
                        }

                        $('#closeModal').on('click', function () {
                            document.getElementById("topicUpdate").style
                                .display = "none";
                            document.getElementById("saveComment").innerHTML =
                                "Save";
                        });
                        $('#saveComment').on('click', function () {

                            const actionType = $('#actionType').val();
                            const student_id = $('#student_id').val()
                            const topic_id = $('#topic_id').val();
                            const message = $('#comment').val();
                            const project_type_id = $('#project_type_id').val();
                            const topicUpdate = $('#topicUpdate').val();

                            if (!message && actionType != "edit") {
                                toastr.error(
                                    "Please provide next instruction to student",
                                    "ERROR", {
                                    timeOut: 9000
                                }
                                );
                                return
                            }

                            jQuery.ajax({
                                url: `/approve-topic`,
                                method: 'POST',
                                data: {
                                    id: topic_id,
                                    message,
                                    student_id,
                                    actionType,
                                    project_type_id,
                                    topicUpdate
                                },
                                success: function (data) {
                                    console.log(data)
                                    if (data.success == false) {
                                        toastr.error(
                                            data.message,
                                            "ERROR", {
                                            timeOut: 9000
                                        }
                                        );
                                        return
                                    }
                                    toastr.success(
                                        data.message,
                                        "SUCCESS", {
                                        timeOut: 11000
                                    }
                                    );
                                    location.reload();
                                }
                            });
                        });
                    </script>
                    <script>
                        var table = $('#stu').DataTable();
                        $('#mySearch').on('keyup', function () {
                            table.search(this.value).draw();
                        });

                        $('.filterBtn').on('change', function () {
                            table.search(this.value).draw();
                        });
                    </script>
                    <script src="js/custom.js"></script>
                    <% if (error) { %><input hidden id="errorHandler" value="<%= error %>">

                        <script>
                            toastr.options.progressBar = true;
                            toastr.error(
                                document.getElementById('errorHandler').value,
                                "ERROR", {
                                timeOut: 9000
                            }
                            );
                        </script>


                        <% } %><!--Start of Tawk.to Script-->
                            <script type="text/javascript">
                                var Tawk_API = Tawk_API || {},
                                    Tawk_LoadStart = new Date();
                                (function () {
                                    var s1 = document.createElement("script"),
                                        s0 = document.getElementsByTagName("script")[0];
                                    s1.async = true;
                                    s1.src =
                                        'https://embed.tawk.to/61c33018c82c976b71c2a947/1fnh77ocr';
                                    s1.charset = 'UTF-8';
                                    s1.setAttribute('crossorigin', '*');
                                    s0.parentNode.insertBefore(s1, s0);
                                })();
                            </script>
                            <!--End of Tawk.to Script-->
                            <!-- END: Page JS-->
</body>

</html>