<style type="text/css">
.assignment-calendar.po-calendar {
    margin: 25px 0;
}
.po-relative {
    position: relative;
}
.assignment-calendar .po-relative {
    width: 40%;
    margin-bottom: 10px;
}
</style>

<main class="common_margin" id="main">
    <div class="main-wrap">
        <div class="assignment-section">
            <div class="assignment-section-wrap">
                <div class="class-head">
                    <h3 class="common-heading">Assignment</h3>
                </div>
                <div class="po-calendar assignment-calendar">
                    <div class="po-relative">
                        <input type="text" class="form-control" placeholder="Select a date" id="nepali-datepicker">
                        <i class="fas fa-calendar-alt cal-icon"></i>
                    </div>
                    <p>Note : To view different months notification, please select the required month and any day</p>
                </div>  
                <div class="assignment-main">
                    <div class="assignment-subj">

                    </div>
                    <div class="assignment-detail-main">
                        <div class="assignment-detail">
                            <div class="assgnmt-upload">
                                <div class="uploaded-assignmnts">
                                    
                                </div>
                                <div class="submit-assignment-text">
                                    <h5 class="text-success text-center "><small>Assignment submitted waiting for Teacher Remark</small></h5>
                                </div>
                                <div class="upload-btn-wrap btn-upload">
                                    <button class="upload-btn"><span><i class="fas fa-cloud-upload-alt"></i></span>Upload Assignment</button>
                                    <input type="file" name="myfile[]" id="imgInp" multiple />
                                </div>
                                <div class="upload-btn-wrap btn-submit">
                                    <button class="upload-btn btn-success" data-toggle="modal" data-target="#confirmModal" style="background:green"> Submit </button>
                                </div>
                                <div class="upload-btn-wrap re-upload-btn">
                                    <button class="upload-btn"><span><i class="fas fa-cloud-upload-alt"></i></span>Re - Upload </button>
                                    <input type="file" name="myfile[]" id="re-imgInp" multiple />
                                </div>
                                <div class="upload-btn-wrap btn-cancel">
                                    <button class="upload-btn" style="background:black"> Cancel </button>
                                </div>
                            </div>
                        </div>
                        <div class="assignmt-remark">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<div class="syllabus-modal assignment-modal">
    <div class="modal fade" id="viewAssignment" role="dialog">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="down-btn-wrap">
                    <div class="page-number">
                        <div class="slider-counter">
                            <div class="slider-no"></div>
                            <div class="tot-slider"></div>
                            <span>Pages</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="viewDoc accept-modal-wrap">
        <div class="modal fade" id="confirmModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content-one">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="accept-modal">
                        <input type="hidden" id="reject" />
                        <h3 class="text-center">Are you sure?</h3>
                        <p>You won't be able to alter/re-upload the assignment after submission</p>
                        <div class="delete-modal-btn mr-auto ml-auto">
                            <button type="button" id="asgn_submit" class="subject_addbtn btn-success ">Submit</button>
                        </a>
                        <button type="button" class="subject_addbtn subject_addbtn_cancel" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style type="text/css">
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 6rem auto;
    }
}

.modal-content-one {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0;
}

#loader {
    position: relative;   
    z-index: 1;
    width: 40px;
    height: 40px;
    margin: auto;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
<script>
    $(document).ready(function() {
        var asgn = '0',
        m = '0',
        y = '0';
        $('.submit-assignment-text').hide();
        get_assignment_list(m, y);
        get_assginment(asgn, m, y);
    });

    function get_assignment_list(month = '', year = '') {
        $('.assignment-sub-tab').remove();
        $.ajax({
            url: '<?php echo base_url() . 'student/get_assignment_list/' ?>' + month + '/' + year,
            type: 'GET',
            dataType: 'json',
            success: function(result) {

                var assign = '';
                var i = 1;
                var id = '';
                $.each(result, function(k, v) {

                    if (result) {
                        if (i == 1) {
                            id = v['assignment_id'];
                        }

                        if (v['status']) {
                            if (v['flag'] == '1') {
                                assign += '<div class="assignment-sub-tab" id="border_' + v['assignment_id'] + '"><a href="#" onClick="get_assginment(' + v['assignment_id'] + ', 0 , 0)" style="text-decoration:none;color:inherit;"><div class="assignmnt-tab-head"><img src="<?= base_url(); ?>assets_admin/images/icons/' + v['subject_icon'] + '"><h3> ' + v['subject_name'] + ' </h3></div><div class="assignmt-detail" style="overflow-wrap: break-word;">' + v['remark'] + '</div><div class="assignmt-bott"><p>By:  ' + v['teacher_name'] + '</p><span>Due Date: ' + v['due_date'] + '</span></div><div class="select-tab"><i class="fas fa-check"></i></div></a></div>';
                            } else {
                                assign += '<div class="assignment-sub-tab" id="border_' + v['assignment_id'] + '"><a href="#" onClick="get_assginment(' + v['assignment_id'] + ', 0 ,0)" style="text-decoration:none;color:inherit;"><div class="assignmnt-tab-head"><img src="<?= base_url(); ?>assets_admin/images/icons/' + v['subject_icon'] + '"><h3> ' + v['subject_name'] + ' </h3></div><div class="assignmt-detail" style="overflow-wrap: break-word;">' + v['remark'] + '</div><div class="assignmt-bott"><p>By:  ' + v['teacher_name'] + '</p><span>Due Date: ' + v['due_date'] + '</span></div></a></div>';
                            }
                        } else {
                            assign += '<div class="assignment-sub-tab" id="border_' + v['assignment_id'] + '"><a href="#" onClick="get_assginment(' + v['assignment_id'] + ', 0 ,0)" style="text-decoration:none;color:inherit;"><div class="assignmnt-tab-head"><img src="<?= base_url(); ?>assets_admin/images/icons/' + v['subject_icon'] + '"><h3> ' + v['subject_name'] + ' </h3></div><div class="assignmt-detail" style="overflow-wrap: break-word;">' + v['remark'] + '</div><div class="assignmt-bott"><p>By:  ' + v['teacher_name'] + '</p><span>Due Date: ' + v['due_date'] + '</span></div></a></div>';
                        }

                        i++;

                    } else {
                        assign += '<div class="assignment-sub-tab" > No Assignment Available</div>';
                    }

                });

                $('.assignment-subj').append(assign);
                $("#border_" + id).css("border-left", "5px solid #032da1");
            }
        });
    }

    function get_assginment(asgn_id, month, year) {
        $('.assignment-sub-tab').css("border-left", "5px solid #fff");
        $("#border_" + asgn_id).css("border-left", "5px solid #032da1");
        $('.btn-upload').show();
        $('.submit-assignment-text').hide();
        $('.assignmt-detail-top').remove();
        $('.assignmt-sub-detail').remove();
        $('.assignmt-remark-wrap').remove();

        $.ajax({
            url: '<?php echo base_url() . 'student/get_assignment/' ?>' + asgn_id + '/' + month + '/' + year,
            type: 'GET',
            dataType: 'json',
            success: function(result) {
                console.log('hello word');
                $('.re-upload-btn').hide();
                $('.btn-submit').hide();
                $('.btn-cancel').hide();
                $('.no_data_div').remove();
                $('.assgnmt-upload').show();

                var assign_details = '<div class="assignmt-detail-top"><div class="assignmt-sub-name"><h5>' + result['subject'][0]['subject_name'] + '</h5><p>By: ' + result['subject'][0]['teacher_name'] + '</p></div><div class="assignmt-date">Due Date : ' + result['subject'][0]['due_date'] + '</div></div><div class="assignmt-sub-detail"><h4 style="overflow-wrap: break-word;">' + result['subject'][0]['subject_name'] + ' assignment essay on: ' + result['subject'][0]['title'] + '</h4><p style="overflow-wrap: break-word;">' + result['subject'][0]['remark'] + '</p></div><input type="hidden" id="asgn_id" name="asgn_id" value="' + result['subject'][0]['assignment_id'] + '">';

                if (result['images'] != '') {

                    $('.btn-upload').hide();
                        // $('.re-upload-btn').show();
                        $('.re-upload-btn').css('display', 'inline-block');
                        $('.btn-submit').css('display', 'inline-block');
                        $('.btn-cancel').css('display', 'inline-block');

                    }
                    console.log(result['remark_by_teacher']);
                    if (result['remark_by_teacher'].length != 0 || result['remark_by_teacher'].length != "") {
                        if (result['remark_by_teacher'][0]['Flag'] == 2) {
                            console.log('images blank');
                            $('.btn-upload').hide();
                            // $('.re-upload-btn').show();
                            $('.re-upload-btn').css('display', 'none');
                            $('.btn-submit').css('display', 'none');
                            $('.btn-cancel').css('display', 'none');
                            $('.submit-assignment-text').show();

                        }
                    }

                    if (result['remark_by_teacher'].length != 0 && result['remark_by_teacher'].length != "" && result['remark_by_teacher'][0]['remark'] != '') {
                        $('.re-upload-btn').css('display', 'none');
                        $('.btn-submit').css('display', 'none');
                        $('.btn-cancel').css('display', 'none');
                        var assignmt_remark = '<div class="assignmt-remark-wrap"><div class="assignmt-remark-head"><h5>Remarks</h5><p>By:<span> ' + result['subject'][0]['teacher_name'] + '</span></p></div><div class="remark-detail">' + result['remark_by_teacher'][0]['remark'] + '</div>';
                        $('.submit-assignment-text').hide();
                    } else {
                        var assignmt_remark = '';
                    }

                    var images = '';

                    var img = Object.keys(result['images']).length;
                    var owl_img = '';

                    $('.modal-content').html('<div id="testing" class="owl-carousel"></div>');
                    for (var i = 2; i <= img + 1; i++) {
                        images += '<div class="uploaded-img uploaded_img" data-toggle="modal" data-target="#viewAssignment"><img src="<?= base_url(); ?>' + result['images'][i] + '" id="upImage"></div>';
                        if (i == 2) {
                            $(".owl-carousel").append('<div class="item active"><img src="<?= base_url(); ?>' + result['images'][i] + '" alt="" /></div>');
                        } else {
                            $(".owl-carousel").append('<div class="item"><img src="<?= base_url(); ?>' + result['images'][i] + '" alt=""  /></div>');
                        }

                    }
                    images += '<div id="loader" style="display:none;"></div>';
                    $('.assignment-detail').prepend(assign_details);
                    if (assignmt_remark != '') {
                        $('.assignmt-remark').css('display', 'block');
                        $('.assignmt-remark').append(assignmt_remark);
                    } else {
                        $('.assignmt-remark').css('display', 'none');
                    }
                    // $('.assignmt-remark').append(assignmt_remark);
                    $('.uploaded-assignmnts').html(images);

                    var owl = $("#testing");
                    owl.owlCarousel({
                        nav: true,
                        loop: true,
                        slideSpeed: 300,
                        paginationSpeed: 400,
                        items: 1,
                        itemsDesktop: false,
                        itemsDesktopSmall: false,
                        itemsTablet: false,
                        itemsMobile: false
                    });

                },
                error: function(jqXHR, status, err) {
                    $('.assgnmt-upload').hide();
                    $('.no_data_div').remove();
                    $('.assignment-detail').append('<div class="no_data_div"><div class="No_data"><span><h5>No Assignments</h5></span></div></div>');
                }
            });
}

$('#imgInp').on('change', function() {
    var id = 'imgInp';
    var count = 1;
    $('#loader').show();

    upload_images_multiple(id, count);
});

$('#re-imgInp').on('change', function() {
    var id = 're-imgInp';
    var count = 2;
    $('#loader').show();
    upload_images_multiple(id, count);
});

function upload_images_multiple(id, count) {

    var file_img = $('#' + id)[0].files;
            var error = '';
            var form_data = new FormData();
            
            for (var i = 0; i < file_img.length; i++) {
                var name = file_img[i].name;
                var extension = name.split('.').pop().toLowerCase();
                
                if (jQuery.inArray(extension, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
                    error += "Upload Only Images";
                    $('.btn-submit').css('display', 'none');
                    alert(error);
                    return;
                } else {
                    form_data.append("images[]", file_img[i]);
                }

            }
            
           
    if (count == 1) {
        $('.btn-upload').hide();
                // $('.re-upload-btn').show();
                $('.btn-submit').css('display', 'inline-block');
                $('.re-upload-btn').css('display', 'inline-block');
                $('.btn-cancel').css('display', 'inline-block');
            }
            if (count == 2) {
                $('.submit-btn').hide();
            }

            $('.uploaded_img').remove();


            // var file_img = $('#' + id)[0].files;
            // var error = '';
            // form_data = new FormData();
            // for (var i = 0; i < file_img.length; i++) {
            //     var name = file_img[i].name;
            //     var extension = name.split('.').pop().toLowerCase();
            //     if (jQuery.inArray(extension, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            //         error += "Invalid" + count + "Image File";
            //         alert(error);
            //         return;
            //     } else {
            //         form_data.append("images[]", file_img[i]);
            //     }

            // }
            var asgn_id = $('#asgn_id').val();
            form_data.append("asgn_id", asgn_id);

            if (error == '') {
                $.ajax({
                    url: '<?php echo base_url() . 'student/assignment_image' ?>',
                    method: 'POST',
                    data: form_data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        // $().html("<label class='text success'>Uploading.....</label>")
                    },

                    success: function(result) {
                        var obj = JSON.parse(result);
                        console.log(obj);
                        //console.log(result);
                        var image = '',
                        owl_img = '';
                        var count = 1;

                        $('.modal-content').html('<div id="testing" class="owl-carousel"></div>');
                        $.each(obj, function(index, value) {

                            image += '<div class="uploaded-img uploaded_img" data-toggle="modal" data-target="#viewAssignment"><img src="' + value + '" id="upImage"></div>';

                            if (count == 1) {
                                $(".owl-carousel").append('<div class="item active"><img src="' + value + '" alt="" /></div>');
                                // owl_img += '<div class="item "><img src="'+ value +'" alt="" class="img-fluid w-100" /></div>';
                            } else {
                                $(".owl-carousel").append('<div class="item"><img src="' + value + '" alt=""  /></div>');
                                // owl_img += '<div class="item"><img src="'+ value +'" alt="" class="img-fluid w-100"/></div>';
                            }

                            count++;
                        });
                        $('.uploaded-assignmnts').append(image);
                        $('#loader').hide();
                        var owl = $("#testing");
                        owl.owlCarousel({
                            nav: true,
                            loop: true,
                            slideSpeed: 300,
                            paginationSpeed: 400,
                            items: 1,
                            itemsDesktop: false,
                            itemsDesktopSmall: false,
                            itemsTablet: false,
                            itemsMobile: false
                        });

                        // $('.owl-carousel.slider').html(owl_img);
                        // console.log($('.owl-carousel.slider'));

                    }
                });
            } else {
                alert("Please add only images...!");
            }
            // get_assignment_list();
        }

        $(function() {
            $("#assignCal").datepicker({
                numberOfMonths: 1,
                changeYear: true,
                changeMonth: true,
                showOtherMonths: true,
                onChangeMonthYear: function(year, month) {
                    var m = month;
                    var y = year;
                    var asgn = '0';
                    get_assignment_list(m, y);
                    get_assginment(asgn, m, y);
                }
            });
        });

        $('#nepali-datepicker').nepaliDatePicker({
            language : 'english',
            ndpYear: true,
            ndpMonth: true,
            ndpYearCount: 10,
            language : 'english',
            onChange: function(data) {
              console.log(data)
              var m = data.object.month;
              var y = data.object.year;
              var asgn = '0';
              get_assignment_list(m, y);
              get_assginment(asgn, m, y);
          }
      });

        $('#asgn_submit').click(function() {

            var asgn_id = $('#asgn_id').val();
            $.ajax({
                url: '<?php echo base_url() . 'student/assignment_class_submit/' ?>' + asgn_id,
                type: 'POST',
                dataType: 'json',
                success: function(result) {
                    if (result) {
                        var m = '0',
                        y = '0';
                        $('.modal').modal('toggle');
                        get_assginment(asgn_id, m, y);
                    }
                }
            });

        });

        $('.btn-cancel').click(function() {

            var asgn_id = $('#asgn_id').val();

            $.ajax({
                url: '<?php echo base_url() . 'student/assignment_class_cancel/' ?>' + asgn_id,
                type: 'POST',
                dataType: 'json',
                success: function(result) {
                    if (result) {
                        var m = '0',
                        y = '0';
                        get_assginment(asgn_id, m, y);
                    }
                }
            });

        });
    </script>