<main class="common_margin" id="main"> 
    <div class="main-wrap">
            <div class="dashboard-cover"> 
            <div class="subject_r">
                <div class="subject_rsec">
                <a href="javascript:history.back()"><button class="btn btn-dark btn-sm">Back</button></a>
                    <div class="common-heading">
                        <h2>Categories</h2>
                        <div class="dashboard-btn-wrap">  
                            <button class="btn btn-success" data-toggle="modal" onclick="showModal()">Add Category</button>
                        </div>
                    </div>
                    <div class="alert alert-danger" id="errShow" style="display:none;"><strong>Failure!</strong> The category having dependent data you cannot delete this category.</div>
                    <div class="alert alert-success" id="success" style="display:none;"><strong>Success!</strong> The category deleted successfully.</div>
                    <div class="alert alert-success" id="successMsg" style="display:none;"><strong>Success!</strong> The changes done on category table successfully.</div>
                    <div class="settings-tbl">
                        <table id="tbl" class="display dataTable table-responsive">
                            <thead>
                                <tr> 
                                    <th>S.No</th>
                                    <th>Category Name</th>
                                    <th>Status</th> 
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            <?php if(isset($categoryData) && !empty($categoryData)){ $i=1; foreach($categoryData as $cData) { ?>
                            <tr>
                                <td><span class="text-center"><?= $i; ?></span></td>
                                <td><?= $cData['name']; ?></td>
                                <td><?php if($cData['is_active'] == 'Y'){ echo 'Active';}else{echo 'Inactive'; } ?></td> 
                                <td>
                                    <div class="sub_tabbtnsec">   
                                        <div class="sub_editbtn" onclick="editCategory(<?= $cData['id']; ?>)"><i class="fas fa-pencil-alt"></i></div>
                                        <div class="sub_delbtn" onclick="deleteCategory(<?= $cData['id']; ?>)"><i class="fa fa-trash" aria-hidden="true"></i></div>
                                    </div>
                                </td>
                            </tr> 
                            <?php $i++; } } ?>
                            </tbody> 
                        </table> 
                    </div>
                </div>
            </div> 
        </div> 
    </div>
</main> 
<!--End right-top side-->  
</div>
<div class="addCategory_modal">
<div class="modal fade" id="addCategory" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form id="categoryForm" method="POST">
                <input type="hidden" name="id" id="id" value="0">
                <div class="modal-body" id="modalBody">
                    <div class="form-group"> 
                        <label>Category Name</label>
                        <input type="text" class="form-control txtData" name="name" id="name" placeholder="Category Name">
                        <p class="form_err" id="error-name"></p>
                    </div>
                    <div class="form-group"> 
                        <label>Status</label>
                        <select class="form-control txtData" name="is_active" id="is_active" style="padding:0;">
                            <option value="">Select Option</option>
                            <option value="Y">Active</option>
                            <option value="N">Inactive</option>
                        </select>
                        <p class="form_err" id="error-is_active"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="dashboard-btn-wrap">
                        <button type="submit" class="btn btn-success btn-sm" id="buttonName">Add</button>
                        <button class="btn btn-dark btn-sm" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
    
<!-- <script src="assets/js/jquery-3.2.1.slim.min.js"></script> -->
<script src="<?= base_url(); ?>assets-lms/js/jquery-3.4.1.min.js" ></script>
<script src="<?= base_url(); ?>assets-lms/js/jquery.validate.js"></script>
<script src="<?= base_url(); ?>assets-lms/js/additional-methods.js"></script>
<script src="<?= base_url(); ?>assets-lms/js/bootstrap.min.js"></script>
<script src="<?= base_url(); ?>assets-lms/js/popper.min.js"></script>

<script defer src="<?= base_url(); ?>assets-lms/js/all.js"></script>
<script defer src="<?= base_url(); ?>assets-lms/js/main.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="<?= base_url(); ?>assets-lms/owl-carousel/js/owl.carousel.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>  
<script>
    $(document).ready(function(){
        $('.user-drpdown').click(function(){
            $('.drpdown-items').toggle();
        });
    });


    //table js
    $('#tbl').DataTable( {
        "lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]]
    } );
    //table js end
    //multiple select js start
    $('select').selectpicker();
    //multiple select js end

</script>
<script>
    $.validator.addMethod("nameRegex", function(value, element) {
        return this.optional(element) || /^[a-zA-Z\s]*$/.test(value);
    }, "Category must contain only letters.");

    $( "#categoryForm" ).validate({
        errorClass: 'error',
        rules: {
            name: {
                required: true,
				minlength : 3,
                maxlength : 50,
                nameRegex: true
            },
            is_active: {
				required: {
					depends: function(element) {
						return $("#is_active").val() == '';
					}
				}
			}
        },
        messages: {
            name: {
                required: "Category name is required",
				minlength : "At least 3 characters long",
            	maxlength : "Should not exceed 50 characters",
                nameRegex: "Contain only letters."
            },
            is_active:{
                required: "Option is required"
            }
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "name") {
                error.appendTo($("#error-name"));
            }else if (element.attr("name") == "is_active") {
                error.appendTo($("#error-is_active"));
            }else {
                error.appendTo(element);
            }
        },
        submitHandler: function (form)
        {
            var formdata = new FormData(form);
            $.ajax({
                type: 'post',
                url: '<?= base_url(); ?>LmsAdmin/getCategoryData',
                data: formdata,
                cache:false,
                contentType: false,
                processData: false,
                success: function(result){
                    if(result == 0)
                    {
                        $('#error-name').text('Category already exists');
                    }
                    if(result == 1){
                        $('#addCategory').modal('hide');
                        $('#successMsg').show();
                        setTimeout(() => { location.reload(); }, 2000);
                    }
                }
            });	
        }
    });
</script>
<script>
    function deleteCategory(cat_id)
    {
        swal({
            title: "Are you sure?",
            text: "Once deleted, you will not be able to recover this category!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willDelete) => {
        if (willDelete) {
            var tableName = 'lms_categories';
            $.ajax({
                type: 'post',
                url: '<?= base_url(); ?>LmsAdmin/deleteCategoryData',
                data: {'categoryId': cat_id, 'tableName': tableName},
                success: function(result){
                    if(result == 0)
                    {
                        $('#success').hide();
                        $('#errShow').show();
                    }
                    else if(result == 1)
                    {
                        $('#errShow').hide();
                        $('#success').show();
                        setTimeout(function(){ location.reload(); }, 3000);
                    }
                }
            });
        }
        })
    }

    function editCategory(cat_id)
    {
        var tableName= 'lms_categories';
        $('#id').val(cat_id);
        $.ajax({
            type: 'post',
            url: '<?= base_url(); ?>LmsAdmin/getCategoryById',
            data: {'categoryId': cat_id, 'tableName': tableName},
            success: function(result){
                $('#buttonName').text('Update');
                $('#modalBody').html(result);
                $('#addCategory').modal('show');
            }
        });	
    }

    function showModal()
    {
        $('#buttonName').text('Add');
        $('.txtData').val('');
        $('#error-name').html('');
        $('#error-is_active').html('');
        $('#addCategory').modal('show');
    }
</script>
</body>
</html>