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

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

    <link rel="stylesheet" href="css/bootstrap1.min.css" />
    <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" />

    <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="vendors/scroll/scrollable.css" />
    <link rel="stylesheet" href="vendors/staff_sidebar/style.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">
    <div id="uploadSidenav" class="sidenav" style="background-color: white;">
        <a href="javascript:void(0)" class="closebtn" onclick="closeSideNav()">&times;</a>
        <div class="container">
            <h5>Submit New Topics</h5>
            <div class="row">
                <div class="col-lg-12">
                    <div>
                        <label>Project Type</label>
                        <select name="" id="projType" class="form-select shadow-none">
                            <option value="1">Final Year Research Report</option>
                            <option value="2">Seminar Report</option>
                            <option value="4">Siwes Report</option>
                        </select>
                        <input type="hidden" id="lecturer_id" value="<%= supervisoDetails?.user_id%>">
                        <input type="hidden" id="user_id" value="<%= user.id%>">
                        <label>How many project topic do you want to submit?</label>
                        <select name="projNum" id="projNum" class="form-select shadow-none">
                            <option selected value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div><br>
                    <div id="topicBlock">
                        <label> Topic</label><br>
                        <textarea name="" id="topic1" class="form-control" cols="40" rows="2"></textarea>

                    </div><br>
                    <!-- <div >
                        <label> CBO Validation</label><br>
                        <input name="cbo_username" type="hidden" id="cbo_username" placeholder="Username" class="form-control" ><br>
                        <input name="cbo_otp" type="hidden"  id="cbo_otp" placeholder="OTP"  class="form-control" >
                        
                    </div><br> -->

                    <div style="display: flex;">
                        <div class="mt-3" style="margin-left: 15px;">
                            <button type="button" id="submitTopic" class="btn"
                                style="background-color: #068F3F;color:white;"> Submit </button>
                        </div>
                        <div class="mt-3" style="margin-left: 15px;">
                            <button type="button" class="btn btn-outline-success">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <%- include('../component/student-sidebar.ejs')%>
        <section class="main_content dashboard_part large_header_bg">

            <%- include('../component/student-profile-info.ejs')%>

                <div class="main_content_iner">
                    <div class="container-fluid p-0">
                        <div class="row">
                            <div class="col-lg-12">
                                <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">Project Topics</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="white_card_body">
                                        <div class="QA_section">
                                            <div class="row">
                                                <p>Summary of submitted project topic appear here with there status
                                                    [Pending,Approved,Rejected].
                                                    To submit new project topic(s) to your supervisor for review, click
                                                    the action button below.</p><br><br>
                                                <div class="white_box_tittle list_header">
                                                    <!-- <small class="text text-danger">Topic Submission Closed for this session!</small> -->
                                                    <div class="submit_button  mt-3" style="margin-left: 15px;">
                                                        <!-- <a class="btn" disabled
                                                            style="background-color:  rgb(136, 137, 136); color: white;">Submit
                                                            New Topics</a> -->
                                                        <a class="btn" onclick="openSideNav()" disabled
                                                            style="background-color:  rgb(42, 127, 42); color: white;">Submit
                                                            New Topics</a>
                                                    </div> <br>
                                                    <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"
                                                                            placeholder="Search content here..." />
                                                                    </div>
                                                                    <button type="submit">
                                                                        <i class="ti-search"></i>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="QA_table mb_30">
                                                    <table class="table mt-5 responsive">
                                                        <thead class="table"
                                                            style="background-color: #069140; color: white;">
                                                            <tr>
                                                                <th>
                                                                    <h5>Project Topic</h5>
                                                                </th>
                                                                <th>
                                                                    <h5>Supervisor</h5>
                                                                </th>
                                                                <th>
                                                                    <h5>Status</h5>
                                                                </th>
                                                                <th>
                                                                    <h5>Date Submitted</h5>
                                                                </th>
                                                                <th>
                                                                    <h5>Action</h5>
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <% if(ProjectTopicData && ProjectTopicData.length> 0){
                                                                for(topic of ProjectTopicData){
                                                                %>
                                                                <tr>
                                                                    <td>
                                                                        <%=topic?.topic%>
                                                                    </td>
                                                                    <td>
                                                                        <%=topic?.lecturer?.title%>
                                                                            <%=topic?.lecturer?.firstname%>
                                                                                <%=topic?.lecturer?.lastname%>
                                                                    </td>

                                                                    <%if(topic.is_approved==true &&
                                                                        topic.active==true){%>
                                                                        <td><span
                                                                                class="badge badge-success">Approved</span>
                                                                        </td>
                                                                        <td>
                                                                            <%=(topic.createdAt).toString() %>
                                                                        </td>
                                                                        <td></td>
                                                                        <%}else if(topic.is_approved==false &&
                                                                            topic.active==true){%>
                                                                            <td><span
                                                                                    class="badge badge-warning">Pending</span>
                                                                            </td>
                                                                            <td>
                                                                                <%=(topic.createdAt).toString() %>
                                                                            </td>
                                                                            <td><a href="/user/delete-topic/<%=topic.id%>"
                                                                                    class="btn btn-danger text text-white">Delete</a>
                                                                            </td>
                                                                            <%} else if (topic.is_approved==false &&
                                                                                topic.active==false) {%>
                                                                                <td><span
                                                                                        class="badge badge-danger">Rejected</span>
                                                                                </td>
                                                                                <td>
                                                                                    <%=(topic.createdAt).toString()%>
                                                                                </td>
                                                                                <td></td>
                                                                                <%}%>
                                                                </tr>
                                                                <%}}%>
                                                        </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>

                            <section>

                                <script>
                                    function openSideNav() {
                                        document.getElementById("uploadSidenav").style.width = "350px";
                                    }

                                    function closeSideNav() {
                                        document.getElementById("uploadSidenav").style.width = "0";
                                    }
                                </script>
                                <script src="js/jquery1-3.4.1.min.js"></script>

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

                                <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></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="js/toastr.min.js"></script>
                                <script src="js/corass.js"></script>
                                <script src="js/custom.js"></script>
</body>


</html>