<link rel="stylesheet" href="<?php echo base_url(); ?>assets_admin/css/bootstrap-select.css">
<style>
    .error {
        color: red;
        padding-top: 2px;
        /* padding-bottom: 5px; */
    }

    .form-group.assign_subject {
        position: relative;
        margin: 0px 0px 15px 0px;
    }

    label#course-error {
        position: absolute;
        bottom: -25px;
    }
</style>
<div class="wraper responsive-width">
    <main class="" id="main">

        <!----admin template section---->
        <div class="admin_tempblock">
            <div class="admin_tempsec">
                <div class="admin_sec">
                    <div class="subsec_sec subsec_sec_assign">
                        <div class="subject_l">
                            <div class="subject_lsec">
                                <div class="subject_lhead"><?php echo $title . $subject['subject_name']; ?></div>
                                <br>
                                <form id="assignsubjectfrom" method="post" action="<?php echo $action_url . '/' . $subject['id']; ?>" enctype="multipart/form-data">

                                    <div class="subject_lformarea">

                                        <div class="form-group assign_subject">
                                            <label>Assign Subject*</label>
                                            <!-- <select name="subject" id="csubject" class="selectpicker" multiple data-live-search="true"> </select> -->
                                            <input type="text" class="form-control" id="subject" placeholder="Please Enter Subject" value="<?= $subject['subject_name']; ?>" readonly>
                                            <input type="hidden" name="subject_id" value="<?php echo $subject['id'] ?>" ?>
                                        </div>

                                        <div class="form-group assign_subject">
                                            <label>Course*</label>
                                            <select name="course_id" id="course" class="selectpicker course" data-live-search="true">
                                                <option value="">-- Please Select Class --</option>
                                                <?php
                                                if (!empty($courses)) {
                                                    foreach ($courses as $course_value) { ?>

                                                        <option value="<?php echo $course_value['course_id']; ?>"><?php echo $course_value['course_name']; ?>
                                                        </option>
                                                <?php }
                                                }
                                                ?>

                                            </select>

                                        </div>

                                        <div class="sub_syllabus d-none">
                                            <label class="view_syllabus"></label>
                                            <label class="text-danger" style="font-size:10px"> ** Accepted Only JPG,PNG and PDF (Max : 5MB) </label>
                                            <br><div class="upload-doc upload-doc-img">
                                                
                                                <input type="file" name="syllabus" id="tpic" class="form-control">
                                                <label for="tpic" class="upload-btn" id="uploadBtn">Browse Syllabus</label>

                                                <p id="tpic_error" style="color:red;"></p>
                                                <p id="success" style="color:green;"></p>
                                            </div>
                                        </div>

                                        <div class="d-flex">
                                        <button type="submit" class="subject_addbtn">Assign</button>
                                        <a href="<?= base_url(); ?>admin/subject"><button type="button" class=" ml-2 subject_addbtn bg-dark">Back</button></a>
                                        </div>
                                        
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="subject_r subject_r_table">
                            <div class="subject_lsec">
                                <hr>
                                <table class="display table table-responsive" id="tbl">
                                    <thead>
                                        <tr>
                                            <th>SNO</th>
                                            <th>Course Name</th>
                                            <th>Syllabus</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php

                                        $sno = 1;
                                        foreach ($syllabuslist as $s_value) { ?>
                                            <tr>
                                                <td><?php echo $sno; ?></td>
                                                <td><?php echo $s_value['course_name']; ?></td>
                                                <td><a href="<?php echo base_url() . $s_value['syllabus']; ?>" target="_blank">View</a></td>
                                            </tr>
                                        <?php $sno++;
                                        } ?>
                                    </tbody>

                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!----admin template section end---->
    </main>
    <!--End right-top side-->

</div>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> -->
<script defer src="<?php echo base_url(); ?>assets_admin/js/bootstrap-select.min.js"></script>
<script>
    $(document).ready(function() {
        //table js
        $('#tbl').DataTable({
            "lengthMenu": [
                [5, 10, 15, -1],
                [5, 10, 15, "All"]
            ]
        });
        //table js end
    });
    $(document).ready(function() {

        $('#course').change(function() {
            var selectvalue = $(this).val();
            if (selectvalue != '') {
                // alert(selectvalue);
                var subjectId = <?php echo $subject['id'] ?>;

                $.ajax({
                    url: "<?= base_url() ?>admin/checksyllabus",
                    data: {
                        subject_id: subjectId,
                        course_id: selectvalue
                    },
                    type: 'POST',
                    async: false,
                    success: function(response) {
                        console.log(response);
                        var base_url = "<?php echo base_url(); ?>";
                        if (response != 0)
                            $('.view_syllabus').html("<a href='" + base_url + response + "' target='_blank' >View Syllabus</a>");
                    }
                });

                $('.sub_syllabus').removeClass('d-none');
            } else {
                $('.sub_syllabus').addClass('d-none');
            }
        });

        $("#assignsubjectfrom").validate({
            ignore: "input[type='text']:hidden",
            rules: {
                subject_id: {
                    required: true
                },
                course_id: {
                    required: true
                },
                syllabus: {
                    required: true
                }
            },
            messages: {
                subject_id: {
                    required: "Please enter subject name ",
                },
                course_id: {
                    required: "Please Select Course",
                },
                syllabus: {
                    required: "Please upload Syllabus",
                },
            },
            submitHandler: function(form) {
                form.submit();
            }
        });

    });
</script>