<style type="text/css">
    @media print
    {
        .noprint {display:none;}
    }
</style>
<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button"  onclick="openaddnew();" class="btn btn-custom waves-effect waves-light" >Add <span class="m-l-5"><i class="fa fa-plus"></i></span></button>
                   
                </div>
                <h4 class="page-title" >Service Departments</h4>

            </div>


        </div>
       
        <div class="row">
            <div class="col-sm-12">
                <div class="card-box table-responsive">

                    <h4 class="header-title m-t-0 m-b-30">&nbsp;</h4>

                    <table id="tbldepartments" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Service Department</th>
                                <th>Status</th>
                                <th></th>
                            </tr>                                
                        </thead>
                        <tbody>
                            <?php foreach($department as $d){ ?>
                                <tr id="<?php echo $d['id_service_department'];?>">
                                <td ><?php echo $d['id_service_department']; ?></td>
                                <td><?php echo $d['service_department']; ?></td>
                                <td><?php echo $d['department_status']; ?></td>
                                <td><button id='btnedit' onclick="openupdate(<?php echo $d['id_service_department']; ?>);" class="btn btn-icon waves-effect waves-light btn-warning m-b-5"> <i class="fa fa-keyboard-o"></i> </button></td>
                                </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!--Add Department  Modal-->
        <div id="adddepartment" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="adddepartment" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                <form class="row" id="addform" method="Post" action="<?php echo base_url(); ?>servicedepartment_controller/addservicedepartment">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel">Add a new Service</h4>
                    </div>
                    <div class="modal-body">
                        
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Service Department</label>
                                </div>
                                <div class="col-md-6">
                                    <input class="form-control" name="service_department">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Status</label>
                                </div>
                                <div class="col-md-6">
                                    <select class="form-control" name="department_status">
                                        <option value="Active">Active</option>
                                        <option value="InActive">InActive</option>
                                    </select>
                                </div>
                            </div>                               
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-custom waves-effect waves-light">Save</button>
                    </div>
                    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

        <!--Edit Department  Modal-->
        <div id="editdepartment" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="editdepartment" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                <form class="row" id="editform" method="Post" action="<?php echo base_url(); ?>servicedepartment_controller/updateservicedepartment">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel">Edit Service Department</h4>
                    </div>

                    <div class="modal-body">
                        
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">ID</label>
                                </div>
                                <div class="col-md-6">
                                    <input class="form-control" name="id_service_department"  id="id_service_department">
                                </div>
                            </div> 
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Service Department</label>
                                </div>
                                <div class="col-md-6">
                                    <input class="form-control" name="service_department" id="service_department">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Status</label>
                                </div>
                                <div class="col-md-6">
                                    <select class="form-control" name="department_status" id="department_status">
                                        <option value="Active">Active</option>
                                        <option value="InActive">InActive</option>
                                    </select>
                                </div>
                            </div>                               
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-custom waves-effect waves-light">Save</button>
                    </div>
                </form>    
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

        <script>
            function openaddnew() {
                $("#adddepartment").modal('show');
            }

            function openupdate(id){
               
                $('#tbldepartments tr').each(function(row, tr) {                   
                    if ($(tr).find('td:eq(0)').text() == id) {                        
                        $("#id_service_department").val($(tr).find('td:eq(0)').text());
                        $("#service_department").val($(tr).find('td:eq(1)').text());
                        $("#department_status").val($(tr).find('td:eq(2)').text());
                    }
                });
                
                $("#editdepartment").modal('show');
            }

        </script>