EVOLUTION-NINJA

Edit File: request_course.php

<?php echo view('includes/faculty_header'); ?>

<div class="row my_header">
        <h3 style="padding-bottom:10px;border-bottom:2px dashed #468662;margin-bottom:20px; font-weight: bold;">REQUEST ADDITIONAL COURSE</h3>
        <a href="javascript:history.back()" class="btn btn-primary" style="float:right; margin-right:50px;">Back</a>
        <div class="col-md-2"></div>

<input type="hidden" class="login_id" name="login_id" value="<?php echo session()->get('faculty_login_id'); ?>" />
                <input type="hidden" class="user_type_id" name="user_type_id" value="<?php echo session()->get('faculty_user_type_id'); ?>" />
                <input type="hidden" class="faculty_institution_id" name="faculty_institution_id" value="<?php echo session()->get('faculty_institution_id'); ?>" />

<div class="form-group">
                    <label class="control-label col-sm-4">Category</label>
                    <div class="col-sm-8">
                        <select class="form-control catagory" id="catagory" name="catagory" required>
                            <option value="">Select Category</option>
                            <?php foreach ($domain as $val) {    ?>
                                <option value="<?php echo $val->domain_id ?>"><?php echo $val->domain_name ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
                <div class="form-group" id="sub_catagory">
                    <label class="control-label col-sm-4">Sub Category</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="catagory1" name="sub_catagory" required>
                            <option value="">Select</option>
                        </select>
                    </div>
                </div>

<div class="form-group">
                    <label class="control-label col-sm-4">Comment</label>
                    <div class="col-sm-8">
                        <textarea class="comment" name="comments" style="border-radius:5px;" rows="5" cols="55" style="width:100%;"></textarea>
                    </div>
                </div>

<div class="form-group">
                    <label class="control-label col-sm-4">Course Type</label>
                    <div class="col-sm-8">
                        <input class="course_type" style="width: 8% !important;margin-top: 10px;" type="checkbox" value="live" name="course_type[]">Live</label>
                        <input class="course_type" style="width: 8% !important;margin-top: 10px;margin-left: 40px;" type="checkbox" value="recorded" name="course_type[]">Recorded</label>
                    </div>
                </div>

<div class="form-group duration_div">
                    
                </div>

<div class="form-group timings_div" style="margin-bottom: -15px !important;">
                    
                </div>

<div class="form-group" id="batch_size_div">
                    <label class="control-label col-sm-4">Batch size</label>
                    <div class="col-sm-8">
                        <select class="form-control select" id="" name="batch_size">
                            <option value="">Select one...</option>
                            <option value="1 - 1">1 - 1</option>
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                            <option value="50">50</option>
                            <option value="60">60</option>
                            <option value="70">70</option>
                            <option value="80">80</option>
                            <option value="90">90</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                </div>

<div class="form-group" style="padding-top:10px;">

<div class=" row view_faculty" style="margin-left:30%;">
                                <div class="col-sm-6">
                               <center><button type="submit" class="btn btn-primary submit">Send Reques</button></center>
                                </div>
                                <div class="col-sm-6">
                           <button type="button" id="cancel" class="btn btn-danger center-block cancel cancel_1" style="margin-right:50%;">Cancel</button>
                            </div>
                            </div>

</div>

</form>

</div>

<div id="jaytab" style="margin-top:3%" class="grid">
            <div class="grid_div"></div>
            <table id="list2"></table>
            <div id="pager2"></div>
            <div id="dialogSelectRow" title="Warning" style="display:none">
                <p>Please select row</p>
            </div>
        </div>

</div>

</div>

$("#catagory").change(function() {
        var domain_id = $("#catagory").val();
        CallCategory(domain_id);
    });

$('.course_type').click(function() {
        var sel = $('input[type=checkbox]:checked').map(function(_, el) {
            return $(el).val();
        }).get();

var available_type_state = $('input[type=radio]:checked').val();

if (jQuery.inArray("live", sel) !== -1) {
            $("#batch_size_div").show();
            $("#batch_size_id").prop('required', true);
            var available_type = '';
            available_type += '<div class="form-group">';
            available_type += '<label class="control-label col-sm-4 available_type_label">Available Type</label>';
            available_type += '<div class="col-sm-8">';
            //   available_type += '<input class="available_type" style="width: 8% !important;margin-top: 10px;" type="radio" value="full_day" name="available_type">Full Day</label>';
            available_type += '<input class="available_type" style="width: 8% !important;margin-top: 21px;margin-left: 20px;" type="radio" value="timings" name="available_type">Timings</label>';
            available_type += '</div>';
            available_type += '</div>';

$(".duration_div").html(available_type);
            $('input[value="' + available_type_state + '"]').prop("checked", true);
        } else {
            $("#batch_size_div").hide();
            $("#batch_size_id").prop('required', false);

$(".timings_div").empty();
            $(".multiple_fields").empty();
            $(".duration_div").empty();
        }

$('.available_type').click(function() {

var sel = $('input[type=radio]:checked').map(function(_, el) {
                return $(el).val();
            }).get();

console.log(sel);

if (jQuery.inArray("timings", sel) !== -1) {
                var available_timings = '';
                available_timings += '<div class="form-group">';
                available_timings += '<label class="control-label col-sm-4 col-xs-12">Available Timings</label>';
                available_timings += '<div class="col-sm-8" style="margin-bottom:10px">';
                available_timings += '<div class="row">';
                available_timings += '<div class="col-sm-5 col-xs-5 space">';
                available_timings += '<input id="onselectExample" type="text" class="form-control" name="from_time[]" placeholder="From Time" required />';
                available_timings += '</div>';
                available_timings += '<div class="col-sm-5 col-xs-5 space2 check">';
                available_timings += '<input id="timepicker2" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />';
                available_timings += '</div>';
                available_timings += '<div class="col-sm-2 col-xs-2">';
                available_timings += '<button type="button" class="btn btn-default center-block add_fields">Add</button>';
                available_timings += '</div>';
                available_timings += '</div>';
                available_timings += '</div>';
                available_timings += '</div>';

$(".timings_div").html(available_timings);

$('#onselectExample').timepicker({
                    'timeFormat': 'h:i A',
                    minuteStepping: 15
                });
                $('#timepicker2').timepicker({
                    'timeFormat': 'h:i A',
                    minuteStepping: 15
                });
                $('#onselectExample').on('changeTime', function() {
                    var value = $(this).val();
                    var field = '';
                    field += '<input id="onselectExampless" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />';
                    $('.check').html(field);

if (value == '11:00 PM') {
                        var getTime = value.split(":");
                        var newTime = '12:00 AM';

} else if (value == '11:30 PM') {
                        var getTime = value.split(":");
                        var newTime = '12:30 AM';
                    } else {
                        var getTime = value.split(":"); //split time by colon
                        var hours = parseInt(getTime[0]) + 1; //add two hours
                        if (hours == 13) {
                            hours = 1;
                        }
                        var newTime = hours + ":" + getTime[1];
                    }

var max_hours = parseInt(getTime[0]) + 11;
                    var max_time = max_hours + ":" + getTime[1];

$('#onselectExampless').val(newTime);

$('#onselectExampless').timepicker({
                        interval: 60,
                        minTime: newTime,
                        maxTime: max_time,
                        'timeFormat': 'h:i A'
                    });

if (max_time == "NaN:undefined") {
                        $("#onselectExampless").val(' ');
                        //$("#onselectExampless").attr("placeholder", "To Time");

var input = '';
                        input += '<input id="onselectExampless" type="text" class="form-control ui-timepicker-input" name="to_time[]" placeholder="To Time" required="" autocomplete="off">';
                        $(".space2").html(input);
                    }

});
            } else {
                $(".timings_div").empty();
            }

var i = 0;
            $('.add_fields').click(function(e) {
                var fields = '';

fields += '<div class="additonal_field">';
                fields += '<label class="control-label col-sm-4 col-xs-12"></label>';
                fields += '<div class="col-sm-8 append_time">';
                fields += '<div class="row"><div class="col-sm-5 col-xs-5 space">';
                fields += '<input id="onselectExample' + i + '" onchange="change_from_time(' + i + ');" type="text" class="form-control" name="from_time[]" placeholder="From Time" required />';
                fields += '</div>';
                fields += '<div class="col-sm-5 col-xs-5 space2 to_time' + i + '">';
                fields += '<input id="timepicker2' + i + '" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />';
                fields += '</div>';
                fields += '<div class="col-sm-2 col-xs-2"><a href="javascript:void(0);" class="remove_fields">';
                fields += '<span class="glyphicon glyphicon-remove"></span>';
                fields += '</a>';

fields += '</div>';
                fields += '</div>';
                fields += '</div>';
                fields += '</div>';

$('.multiple_fields').append(fields);
                $('#onselectExample' + i).timepicker({
                    'timeFormat': 'h:i A',
                    minuteStepping: 15
                });
                $('#timepicker2' + i).timepicker({
                    'timeFormat': 'h:i A',
                    minuteStepping: 15
                });

$(".remove_fields").click(function() {
                    $(this).closest('.additonal_field').remove();
                });

i = i + 1;
            });

})

function change_from_time(id) {
        var values = $('#onselectExample' + id).val();
        var fieldss = '';
        fieldss += '<input id="onselect' + id + '" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />';
        $('.to_time' + id).html(fieldss);

if (values == '11:00 PM') {
            var getTimes = values.split(":");
            var newTimes = '12:00 AM';
            $('#onselect' + id).val(newTimes);
        } else if (values == '11:30 PM') {
            var getTimes = values.split(":");
            var newTimes = '12:30 AM';
            $('#onselect' + id).val(newTimes);
        } else {
            var getTimes = values.split(":"); //split time by colon
            var hourss = parseInt(getTimes[0]) + 1; //add two hours
            if (hourss == 13) {
                hourss = 1;
            }
            var newTimes = hourss + ":" + getTimes[1];
            $('#onselect' + id).val(newTimes);
        }

var max_hours = parseInt(getTimes[0]) + 11;
        var max_time = max_hours + ":" + getTimes[1];

$('#onselect' + id).timepicker({
            interval: 60,
            minTime: newTimes,
            maxTime: max_time,
            'timeFormat': 'h:i A'
        });
    }

CallCategory(domain_id);

var empty = '';
                    empty += '<label class="control-label col-sm-4">Sub Category</label>';
                    empty += '<div class="col-sm-8">';
                    empty += '<select class="form-control" id="catagory1" name="sub_catagory" required>';
                    empty += '<option value="">Select</option>';
                    empty += '</select>';
                    empty += '</div>';

$('#sub_catagory').html(empty);
                }
            }
        });
    }

$(document).ready(function() {

$('#request_course').submit(function(e) {
            e.preventDefault();

var count_checked = $("[name='course_type[]']:checked").length;
            if (count_checked == 0) {
                toastr["error"]("Select course type");
            } else {

formdata = new FormData($(this)[0]);

$(".submit").attr('disabled', 'disabled');
                $(".submit").text("Submitting...");

$.ajax({

type: 'post',
                    url: '<?php echo site_url('add_requested_course') ?>',
                    data: formdata,

contentType: false,
                    processData: false,

success: function(response) {
                         response = jQuery.parseJSON(response);
                        console.log(response);

if (response.result == 1) {
                            $("#loading").hide();
                            $(".submit").text("Submit");
                            $(".submit").removeAttr('disabled');
                            toastr["success"]("Added Successfully");
                            $('#request_course')[0].reset();
                            $("#list2").setGridParam({
                                datatype: 'json',
                                page: 1
                            }).trigger('reloadGrid');
                            var domain_id = $("#catagory").val();
                            CallCategory(domain_id);
                            $(".duration_div").empty();
                            $(".timings_div").empty();
                            $('.multiple_fields').empty();

} else {
                            $("#loading").hide();
                            toastr["error"](response.message);
                            $(".submit").text("Submit");
                            $(".submit").removeAttr('disabled');

//toastr["success"]("Added Successfully");
                        }
                    }
                });
            }
        });

//grid

CallGrid();

function CallGrid(access_rights_global, access_result_global) {
            jQuery("#list2").jqGrid({

url: "<?php echo site_url('get_requested_courses') ?>",
                mtype: "get",
                datatype: "json",
                colNames: ['ID', 'Category', 'Sub-Category', 'Course type', 'Timings', 'Comment', 'Status'],
                colModel: [{
                        name: 'mapping_id',
                        index: 'mapping_id',
                        width: 40,
                        hidden: true,
                        editable: false,
                        key: true
                    },
                    {
                        name: 'domain_name',
                        index: 'domain_name',
                        editable: false,
                        width: 150,
                    },
                    {
                        name: 'sub_domains',
                        index: 'sub_domains',
                        width: 150,
                        editable: false
                    },
                    {
                        name: 'available_type',
                        index: 'available_type',
                        width: 150,
                        editable: false
                    },
                    {
                        name: 'faculty_timings',
                        index: 'faculty_timings',
                        width: 150,
                        editable: false
                    },
                    {
                        name: 'comments',
                        index: 'comments',
                        editable: false,
                        width: 250
                    },

{
                        name: 'approval_status',
                        index: 'approval_status',
                        width: 150,
                        editable: false,
                        formatter: function(cellvalue, options, rowObject) {
                            if (rowObject.approval_status == 'APPROVED') {

var retVal = '';

retVal += '<b>APPROVED</b>';

return retVal;

} else if (rowObject.return_status == 'RETURNED') {
                                var retVal = '';
                                retVal += 'RETURNED';
                                return retVal;
                            } else {

var retVal = '';
                                retVal += 'NOT APPROVED';
                                return retVal;
                            }

}
                    },

rowNum: 20,
                rowTotal: 2000,
                rowList: [20, 30],
                rownumbers: true,
                //rownumWidth: 60,
                pager: "#pager2",
                sortname: 'id',
                viewrecords: true,
                gridview: true,
                autowidth: true,
                sortorder: "asc",
                shrinkToFit: true,
                loadonce: true,
                caption: "Requested Course List",

});
            $("#list2").jqGrid("setLabel", "rn", "SL");
            $("#list2").jqGrid('filterToolbar', {
                searchOperators: false,
                stringResult: true,
                searchOnEnter: false,
                defaultSearch: "cn"
            }); //for multisearch code,remove if not required

$("#list2").jqGrid('navGrid', '#pager2', {
                    edit: false,
                    add: false,
                    del: false,
                    search: false,
                    refreshstate: "current"
                }, {}, {}, {}, {
                    sopt: ['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
                    closeOnEscape: true,
                    multipleSearch: true,
                    closeAfterSearch: true,
                    closeAfterDelete: true,
                    closeAfterEdit: true
                },

);

}

});

const cancelButton = document.getElementById("cancel");

// Add a click event listener to the cancel button
cancelButton.addEventListener("click", function() {
  // Clear the form data
  document.forms[0].reset();
});

</script>

<?php echo view('includes/faculty_footer'); ?>

#FrmGrid_list2 {
        width: 100% !important;
    }

.ui-jqdialog .ui-jqdialog-titlebar {
        height: 29px !important;
        background-color: #001a00;
        color: white;
        padding-left: 10px;
    }

.fm-button {
        height: 21px !important;
        padding: 1px;
        margin-right: 10px !important;
        height: 21px !important;
        width: 43%;
        margin-top: -7px !important;
    }

.ui-jqdialog-content td.navButton {
        padding-top: 12px !important;
    }

.ui-jqgrid .ui-jqgrid-titlebar {
        height: 27px !important;
        /*background:#1e7ad7 !important;*/
        color: white !important;
    }

.ui-jqgrid-bdiv {
        height: auto !important;

}

.ui-widget-overlay {
        z-index: 0 !important;
    }

#request_course{
        margin-right: 25%;
    }

/* .ui-widget-header
{
background: #1e7ad7 !important;
} */
    .ui-jqgrid-hdiv ui-state-default {
        /* width: 873px !important;  */
        cursor: default !important
    }

ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        border: 1px solid #fed22f;
        background: #ffe45c;
    }

.ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        font-weight: bold;
        color: black;
    }

/* .ui-jqgrid .ui-jqgrid-bdiv {
    overflow-y: scroll;
    overflow-x: scroll ;
}

.ui-jqgrid-htable{
    width: 100% !important;
}
#list2{
    width: 100% !important;
}
     */

@media only screen and (min-width:320px) and (max-width:640px) {
        #jaytab {
            width: auto !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
            width: 900px !important;
        }

.ui-jqgrid-view {
            width: 900px !important;
        }

.ui-jqgrid-hdiv {
            width: 900px !important;
        }

.ui-jqgrid-htable {
            width: 900px !important;
        }

.ui-jqgrid-bdiv {
            width: 900px !important;
        }

#list2 {
            width: 900px !important;
        }

#pager2 {
            width: 900px !important;
        }

.available_div {
            padding-left: 0px !important;
            padding-right: 30px !important;
        }
    }

@media only screen and (min-width:320px) and (max-width:640px) {
        #jaytab {
            width: auto !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
            width: 900px !important;
        }

.ui-jqgrid-view {
            width: 900px !important;
        }

.ui-jqgrid-hdiv {
            width: 900px !important;
        }

.ui-jqgrid-htable {
            width: 900px !important;
        }

.ui-jqgrid-bdiv {
            width: 900px !important;
        }

#list2 {
            width: 900px !important;
        }

#pager2 {
            width: 900px !important;
        }

.available_div {
            padding-left: 0px !important;
            padding-right: 30px !important;
        }
    }

@media only screen and (min-width:641px) and (max-width:991px) {
        #jaytab {
            width: auto !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
            width: 900px !important;
        }

.ui-jqgrid-view {
            width: 900px !important;
        }

.ui-jqgrid-hdiv {
            width: 900px !important;
        }

.ui-jqgrid-htable {
            width: 900px !important;
        }

.ui-jqgrid-bdiv {
            width: 900px !important;
        }

#list2 {
            width: 900px !important;
        }

#pager2 {
            width: 900px !important;
        }
    }
</style>