<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instruction</title>
    <style>
        .modal {
    z-index: 1050 !important; /* Choose a suitable z-index value */
}

.select2-container {
    z-index: 9999 !important;
}
    </style>
</head>
<body>
    
<!-- <div class="page-header mt-5"> -->
    
    <div class="d-flex justify-content-between">
            <div>
                <h2 class=" tx-24 mg-b-5">Instruction</h2>                    
            </div>
    <!-- <a href="#" class="btn btn-primary my-2 btn-icon-text" id="openCourseModal">
    Add Instruction
</a> -->
    </div>

   
<!-- </div>  -->
  <!-- Row -->

            <div class="row sidemenu-height">
                <div class="col-lg-12">


                <?php
                    if ($this->session->flashdata('alert_success')) {
                    ?>
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <?php echo $this->session->flashdata('alert_success'); ?>
                        </div>
                    <?php
                    }

                    if ($this->session->flashdata('alert_danger')) {
                    ?>
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <?php echo $this->session->flashdata('alert_danger'); ?>
                        </div>
                    <?php
                    }
                    ?>

               
                    <div class="card custom-card">
                        <div class="card-body">
                            <div class="table-responsive">
                    <table id="dmstable" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead>
                                       
                                        <tr>
                                            <th class="wd-20p">S.No</th>
                                            <th class="wd-25p">Title</th>
                                            <th class="wd-25p">Instruction</th>
                                            <th class="wd-15p">Action</th>                                           
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <?php 
                                    $i = 1;
                                   foreach($instruction as $key=>$row){
                                    ?>
                                        <tr>
                                            <td><?= $i ?></td>
                                            <td><?= $row->title ?></td>
                                            <td><?= $row->instruction ?></td>
                                <td>
                                    <a data-toggle="tooltip" id="edit" data-placement="top" title="Edit" data-original-title="Edit" onclick="edit('<?php echo $row->id; ?>', '<?php echo $row->title; ?>' ,'<?php echo $row->instruction; ?>')" class="btn btn-sm btn-info"><i class="ti ti-pencil"></i></a>
                                    <!--  -->

                                </td>                                         
                                        </tr>
                                        <?php $i++; }  ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





<!-- END MAIN-CONTENT -->
<div class="modal show" id="courseModal" style="display: none;" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title" id="formTitle">Add instruction
</h6>
            </div>
            <div class="modal-body">
                <form method="POST" id="courseForm" action="<?php echo base_url('ApplicationController/addCourse'); ?>">
                    <input type="hidden" id='id' name='id'>
                    <div class="form-group">
                        <label class="tx-medium">Title <span class="text-danger">*</span></label>
                        <input type="text" class="form-control title" id="title" name="title" placeholder="Title" >
                    <p class="text-danger mt-2" id="course_name_err"></p>
                    </div>

                    <div class="form-group">
                        <label class="tx-medium">Description <span class="text-danger">*</span></label>
                        <textarea type="text" class="form-control description" id="description" name="description" placeholder="Description" > </textarea>
                    <p class="text-danger mt-2" id="course_name_err"></p>
                    </div>
                    
                    <div class="modal-footer">
                        <button type="submit " class="btn ripple btn-primary" id="save">Save</button>
                        <button type="button" class="btn ripple btn-secondary" id="closemodel" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<!-- //delete modal -->
<div class="modal show" id="statusModal" style="display: none;" aria-modal="true" role="dialog">
    <div class="modal-dialog " role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title" id="formTitle">Change Status</h6>
                
            </div>
            <div class="modal-body">
                <form method="POST" action="<?php echo base_url('ApplicationController/accadamicStatusChange/') ?>" id="courseForm">
                    <input type="hidden" id='courseId' name='id'>
                    <input type="hidden" id='table' name='table' value="accadamic_year">
                    <input type="hidden" id='courseStatus' name='status' >
                    <div class="form-group">
                        <h4>Are You Sure you want to change the status?</h4>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn ripple btn-primary" >Yes</button>
                        <button type="button" class="btn ripple btn-secondary" id="closemodel" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>




<script>
$(document).ready(function() {
       $('#dmstable').DataTable();        
    });
$(document).ready(function () {
        $('#courseForm').validate({
            title: {                
                    required: true,                       
            },
            messages: {
                title: {
                    required: "Please enter your username",
                },
            },
            submitHandler: function (form) {
                // If the form is valid, this function will be called on form submission
                form.submit();
            }
        });
    });


    $(document).ready(function () {
        
        // Load Courses on page load
        loadCourses();

        // Open Course Modal on Add Course Button Click
        $("#openCourseModal").click(function () {
            $('#courseForm')[0].reset();
            $('#formTitle').text('Add instruction');           
            $("#courseModal").show();
            
        });

        $("#closemodel").click(function () {
            $('#course_name_err').text(' ')
            $("#courseModal").hide();
        });



        // Save Course Data using AJAX
        $("#save").click(function () {

        var courseName = document.getElementById('course_name').value;

        var saveButton = document.getElementById('save');

        if(courseName== ''){
            $('#course_name_err').text('Course Name is Required')
        }else{
            // alert('hii')
            $('#course_name_err').text('');
            var formData = $("#courseForm").serialize();
            console.log('')

                $.ajax({
                type: "POST",
                url: "<?php echo base_url('ApplicationController/addCourse'); ?>", // Corrected URL
                data: formData,
                success: function () {
                    $("#courseModal").hide();
                    window.location.reload();
                    $("#course_name").val('')
                    loadCourses(); // Reload the course list
                },
                error: function (error) {
                    console.error(error);
                }
            });
        }
});

        function loadCourses() {

            // console.log('view');
            $.ajax({
                type: "get",
                url: "<?php echo base_url('ApplicationController/getcourse'); ?>", // Replace with your server-side script URL
                success: function (response) {

                    console.log(response);

                    $("#courseList").html(response);
                },
                error: function (error) {
                    console.error(error);
                }
            });
        }

        // Handle Edit and Delete actions
        $("#courseList").on("click", ".edit-course", function () {
            var courseId = $(this).data("id");
            $.ajax({
                type: "GET",
                url: "backend.php", // Replace with your server-side script URL
                data: { action: "getCourse", id: courseId },
                success: function (response) {
                    console.log(response);
                    var course = JSON.parse(response);
                    $("#id").val(course.id);
                    $("#year").val(course.year);
                    $("#description").show();
                   
                },
                error: function (error) {
                    console.error(error);
                }
            });
        });
    });

    function edit(id, title, istruction) { 
        $('#course_name_err').text('');
        $('#id').val(id);
        $('#title').val(name);
        $('#description').val(istruction);
        $('#formTitle').text('Edit instruction');
        $("#courseModal").show();
    }

    function deleteCourse(id,status) { 

        $('#courseId').val(id)
        $('#courseStatus').val(status)
      

        $("#statusModal").show();

        }

    

    // function checkCourseName() {

    //     var courseName = document.getElementById('course_name').value;

    //     var saveButton = document.getElementById('save');

    //     saveButton.disabled = true;
    // }

    // document.getElementById('course_name').addEventListener('input', checkCourseName);

    // document.addEventListener('DOMContentLoaded', checkCourseName);

</script>
</body>
</html>