<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header custom_head">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h3>Supervisors</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="">Home</a></li>
                        <li class="breadcrumb-item active">Supervisor</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

        <!-- Default box -->
        <div class="card">
            <!--				<div class="card-header">
                                                    <h3 class="card-title">Title</h3>

                                                    <div class="card-tools">
                                                            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                                                                    <i class="fas fa-minus"></i></button>
                                                            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
                                                                    <i class="fas fa-times"></i></button>
                                                    </div>
                                            </div>-->
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-12">
                        <table id="table1" class="display dataTable responsive nowrap" width="100%">
                            <thead>
                                <tr>
                                    <td hidden="">Id</td>
                                    <td>Name</td>
                                    <td>Emp ID</td>
                                    <td>Department</td>
                                    <td>Duration of employment</td>
                                    <td>Status</td>
                                    <td hidden="">st</td>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($SupList as $value) { ?>
                                    <tr>
                                        <td hidden=""><?= $value->id; ?></td>
                                        <td><?= $value->name; ?></td>
                                        <td><?= $value->username; ?></td>
                                        <td><?= $value->department; ?></td>
                                        <td><?= $value->text; ?></td>
                                        <td id="st_<?= $value->id; ?>"><?php if ($value->active == "1") { ?>Active<?php } else { ?>Inactive<?php } ?></td>
                                        <td hidden=""><input id="Status_<?= $value->id; ?>" type="hidden" value="<?php if ($value->active == "1") { ?>Active<?php } else { ?>Inactive<?php } ?>"></td>
                                    </tr>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                </div>



            </div>

        </div>
        <!-- /.card -->

    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<div class="modal fade" id="update_model" style="display: none;" tabindex="-1" aria-hidden="true" role="dialog">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Supervisor</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <input type="hidden" id="sup_id" value="">
                    <div class="form-group col-12">
                        <label class="form-lable">Name : &nbsp;</label> <span id="name"></span>
                    </div>
                    <div class="form-group col-12">
                        <label class="form-lable">Emp Id : &nbsp;</label><span id="empId"></span>
                    </div>
                    <div class="form-group col-12">
                        <label class="form-lable">Department : &nbsp;</label><span id="department"></span>
                    </div>
                    <div class="form-group col-12">
                        <label class="form-lable">Duration of employment : &nbsp;</label> <span id="duration"></span>
                    </div>
                    <div class="form-group col-12">
                        <label class="form-lable">Status : &nbsp;</label><span id="status"></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer pull-right">
                <button type="button" onclick="updatestatus('0', 'Inactive')" id="deActive" class="btn btn-primary modal_button">Deactivate</button>
                <button type="button" id="Active" onclick="updatestatus('1', 'Active')" class="btn btn-primary modal_button">Activate</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>

    <!-- /.modal-dialog -->
</div>


<script>
                    $(document).ready(function () {
                        $("a").removeClass("active");
                        $(".Supervisor_list_class").addClass("active");
                        var table = $('#table1').DataTable(
						{
							"paging": false,
								"scrollX": true,
								dom: 'Bfrtip',
								buttons: [
							'copy', 'csv', 'excel', 'pdf', 'print'
						],
							"paging": false,
							"scrollX": true,
						}
                        );

                        $('#table1 tbody').on('click', 'tr', function () {
                            var data = table.row(this).data();
                            if (data == undefined) {
                                return true;
                            }

                            $("#name ,#duration, #empId ,#status ,#department").html("");
                            $(".modal_button").hide();
                            $("#sup_id").val(data[0]);
                            $("#name").html(data[1]);
                            $("#empId").html(data[2]);
                            $("#department").html(data[3]);
                            $("#duration").html(data[4]);
                            var st=$("#Status_"+data[0]).val();
                            $("#status").html(st);
                            if (st == "Active") {
                                $("#deActive").show();
                            } else {
                                $("#Active").show();
                            }
                            $("#update_model").modal();

                        });
                    });

                    function updatestatus(st, val) {
                        var id = $("#sup_id").val();
                        var data = {
                            'st': st,
                            'id': id
                        }
                        if (st == "" || id == "") {
                            return false;
                        }
                        $.ajax({
                            url: "<?php echo base_url(); ?>Supervisor_Contoller/updateSupervisorSt",
                            type: "post",
                            data: data,
                            success: function (d) {
                                $("#status").html(val);
                                $("#st_" + id).html(val);
                                $(".modal_button").hide();
                                 $("#Status_"+id).val(val);
                                if (st === 1) {
                                    $("#deActive").show();
                                } else {
                                    $("#Active").show();
                                }
//                                HoldOn.close();
//                                Swal.fire('Success')
//                                location.reload(true);?
//                                $('#table1').DataTable().destroy();
//                                var table = $('#table1').DataTable({
//                                    "paging": false,
//                                    "scrollX": true,
//                                });
                            },
                            error: function (jqXhr) {
                                if (jqXhr.status == 400) { //Validation error or other reason for Bad Request 400
                                    var json = $.parseJSON(jqXhr.responseText);
                                }
//                                HoldOn.close();
//                                Swal.fire({
//                                    icon: 'error',
//                                    title: 'Error...',
//                                    text: 'Internal server error!',
//                                })

                            }
                        });
                    }

</script>

