<div class="wrapper">
    <div class="container-full" style="padding-left:20px;">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12 ">
                <div class="btn-group pull-right m-t-15">
                    
                </div>
                <h4 class="page-title" >Service Comparision across branches</h4>
            </div>
            
            
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Service Comparision across branches</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12" style="height: 500px; overflow-x:scroll; overflow-y:scroll;">                                
                                <table class="table">
                                    <tr>
                                    <?php foreach($business as $data){?>                                     
                                        <td>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title"><?php echo $data['business_name'];?></h3>
                                                </div>
                                                <div class="panel-body">

                                                        <table class="table table-responsive">
                                                            <thead>
                                                                <tr>
                                                                    <th class="hidden">ID</th>
                                                                    <th>Ref</th>
                                                                    <th>Name</th>
                                                                    <th>Price</th>
                                                                </tr>
                                                                <tr>
                                                                    <td colspan="4">
                                                                        <input type="text" class="form-control" id="search_input_<?php echo $data['id_business'] ?>" name="search_input" placeholder="Search">
                                                                    </td>
                                                                </tr>
                                                            <tbody>
                                                                
                                                                <?php foreach($data['services'] as $service){?>
                                                                    <tr style="cursor:pointer;" ondblclick="open_edit_modal(<?php echo $service['id_business_services'];?>);">
                                                                        <td class="hidden"><?php echo $service['id_business_services'];?></td>
                                                                        <td><?php echo $service['ref_number'];?></td>
                                                                        <td><?php echo $service['service_name'];?></td>
                                                                        <td><?php echo $service['price'];?> <label onclick="open_branches(<?php echo $service['id_business_services'];?>);" style="cursor:pointer" class="label label-sm label-pink">COPY</label></td>
                                                                    </tr>
                                                                <?php }?>
                                                            </tbody>
                                                        </table>

                                                </div>
                                            </div>
                                        </td>
                                    <?php } ?>                                
                                </tr>
                            </div>    
                        </div>
                    </div>
                </div>
            </div>
        </div>


    <!-- Modal -->
    <!--Edit Service  Modal-->
    <div id="editservice" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="editservice" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <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 </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txteditserviceid" class="control-label">ID</label>
                                            <input readonly="readonly" type="text" class="form-control" placeholder="Service ID" id="txteditserviceid" name="txteditserviceid">
                                        </div> 
                                    </div> 
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txteditcategory" class="control-label">Category</label>
                                            <input id="txteditcategory" name="txteditcategory" class="form-control" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txteditservice" class="control-label">Service Name</label>
                                            <input type="text" class="form-control" placeholder="Service Name" id="txteditservice" name="txteditservice">
                                        </div> 
                                    </div> 
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txteditservicedesc" class="control-label">Description</label>
                                            <input type="text" class="form-control" placeholder="Service Desc" id="txteditservicedesc" name="txteditservicedesc">
                                        </div> 
                                    </div> 
                                    
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txteditserviceactive" class="control-label">Active</label>
                                            <select class="form-control" id="txteditserviceactive" name="txteditserviceactive">
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div> 
                                    </div>
                                                                     
                                </div>

                            </div>
                            <div class="col-lg-6">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="txteditserviceprice" class="control-label">Price</label>
                                            <input type="text" <?php if(isset($business[0]['allow_price_update']) && $business[0]['allow_price_update']==='No' && $this->session->userdata('role')=="Store Manager"){?> readonly="readonly" <?php } ?> class="form-control" placeholder="Price" id="txteditserviceprice" name="txteditserviceprice">
                                        </div> 
                                    </div> 
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="txteditrefnumber" class="control-label">Ref#.(cross branches)</label>
                                            <input type="text" class="form-control numeric" placeholder="Ref. #" id="txteditrefnumber" name="txteditrefnumber">
                                        </div> 
                                    </div>     
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="txteditstaffcommission" class="control-label">Staff Commission %</label>
                                            <input type="text" class="form-control decimal" placeholder="Staff Commission" id="txteditstaffcommission" name="txteditstaffcommission">
                                        </div> 
                                    </div> 
                                     <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="txtedithelpercommission" class="control-label">Helper Commission %</label>
                                            <input type="text" class="form-control decimal" placeholder="Helper Commission" id="txtedithelpercommission" name="txtedithelpercommission">
                                        </div> 
                                    </div> 
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="txteditservicecolor" class="control-label">Color</label>
                                            <input id="txteditservicecolor" type="text" class="colorpicker-default form-control" value="#8fff00">
                                        </div> 
                                    </div> 
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="txteditservicemode" class="control-label">Payment Type</label>
                                            <select id="txteditservicemode" name="txteditservicemode" type="text" class="form-control">
                                                <option value="OneTime">One Time</option>
                                                <option value="Subscription">Subscription</option>
                                            </select>
                                        </div> 
                                    </div> 
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txteditservicedept" class="control-label">Service Department</label>
                                            <select class="form-control" id="txteditservicedept" name="txteditservicedept">
                                                <?php  foreach($servicedepartments as $dept){?>
                                                <option value="<?php echo $dept['service_department'];?>"><?php echo $dept['service_department'];?></option>
                                                <?php } ?>
                                            </select>
                                        </div> 
                                    </div> 
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <label for="txteditserviceduration" class="control-label">Service Duration</label>
                                        <div class="input-group" >
                                            <div class="bootstrap-timepicker" >
                                                <input id="txteditserviceduration" name="txteditserviceduration" type="text" class="form-control" style="position:relative; z-index: 99999999 !important;">
                                            </div>
                                            <span class="input-group-addon bg-pink b-0 text-white"><i class="glyphicon glyphicon-time"></i></span>
                                        </div>
                                    </div>
                                </div>         
                                
                               

                            </div>
                        </div>
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <button onclick="update();" type="button" class="btn btn-custom waves-effect waves-light">Save</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Edit Service  Modal-->

        <!--Modals-->
        <div id="branchmodal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="branchmodal" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-md" >
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel">Pick Branch</h4>
                    </div>
                    <div class="modal-body">
                        <!-- Business -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group" style="border: 1px solid #eaeaea; padding: 10px;">
                                    <input type="hidden" id="business_package_id">                                                                        
                                    <div id="pick-business-div" class="nicescroll_service_types visit-services-types services" style="height: 500px; overflow-y: scroll; outline: none;">
                                        <ul>
                                            <?php foreach($businesses as $business){?>
                                            <li onclick="copytobranch(<?php echo $business['id_business'];?>);" business_id='<?php echo $business['id_business'];?>' style="cursor: pointer;"><?php echo $business['business_name'];?></li>
                                            <?php } ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Business -->
                    </div>
                </div> 
            </div>
        </div>


        <script type="text/javascript">
        
            $(document).ready(function(){
                $('input[name="search_input"]').on('keyup',function(){
                    var search_input = $(this).val();
                    var id = $(this).attr('id').split('_')[2];
                    var table = $(this).closest('table');
                    table.find('tbody tr').each(function(){
                        var tr = $(this);
                        var td = tr.find('td').eq(2);
                        if(td.text().toLowerCase().indexOf(search_input.toLowerCase()) != -1){
                            tr.show();
                        }else{
                            tr.hide();
                        }
                    });
                });



                $("#txteditserviceduration").datetimepicker({
                    format: 'HH:mm:00',
                    enabledHours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    allowInputToggle: true,
                    stepping: 15
                });

            });

            
       

        function open_edit_modal(id_business_services) {
            
            $.ajax({
                type: 'POST',
                url: '<?php echo base_url(); ?>service_controller/edit_services',
                data: {id_business_services: id_business_services},
                dataType: "json",
                cache: false,
                async: true,
                success: function(data){
                    var service = data['services'];
                    var serviceproduct = data['services_products'];
                    
                    $("#txteditserviceid").val(service.id_business_services);
                    $("#txteditservice").val(service.service_name);
                    $("#txteditservicedesc").val(service.service_desc);
                    $("#txteditserviceprice").val(service.service_rate);
                    $("#txteditserviceactive").val(service.service_active);
                    $("#txteditrefnumber").val(service.ref_number);                        
                    $("#txteditstaffcommission").val(service.commission_perc);
                    $("#txtedithelpercommission").val(service.helper_perc);
                    $("#txteditservicecolor").val(service.service_color);
                    $("#txteditservicemode").val(service.service_mode);
                    $("#txteditserviceduration").val(service.service_duration);
                    $("#txteditservicedept").val(service.service_department);
                    $("#txteditcategory").val(service.service_category_id);
           
                    
                    $("#editservice").modal('show');
                    
                }
                
            });

            
            
        }
        
        function update() {
            if ($("#txteditservice").val() !== "") {
              
                $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url(); ?>service_controller/update_service',
                    data: {id_business_services: $("#txteditserviceid").val(), 
                            service_name: $("#txteditservice").val(), 
                            service_desc: $("#txteditservicedesc").val(), 
                            service_rate: $("#txteditserviceprice").val(), 
                            service_active: $("#txteditserviceactive :selected").val(), 
                            ref_number: $("#txteditrefnumber").val(),
                            commission_perc: $("#txteditstaffcommission").val(), 
                            helper_perc: $("#txtedithelpercommission").val(), 
                            service_color: $("#txteditservicecolor").val(), 
                            service_mode: $("#txteditservicemode").val(), 
                            service_duration: $("#txteditserviceduration").val(), 
                            service_department: $("#txteditservicedept option:selected").val(),                             
                            service_category_id: $("#txteditcategory").val()
                        },
                    success: function(data) {
                        var result = data.split("|");
                        if (result[0] === "success") {
                            toastr.success(data, 'Service Updated');
                            location.reload();
                        }
                    }
                });
            }
        }

       
        function copytobranch(business_id){

            console.log(business_id);
            swal({
                title: "Are you sure?",
                text: "This action will copy this service to selected branch!",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: 'btn-warning',
                confirmButtonText: "Yes, Copy it!",
                closeOnConfirm: true
            }, function() {
                $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url();?>service_controller/copy_to_branches',
                    data: {id_business_services: $("#business_package_id").val() , business_id: business_id},
                    success: function(data) {
                        var result = data.split("|");

                        if (result[0] === "success") {
                            swal("Copied!", "Service has been copied.", "success");
                            //location.reload();
                        } else {
                            swal("Error!", "Service was not copied!.", "error");
                        }
                    }
                });
            });
        }


        function open_branches(package_id){

            $("#business_package_id").val(package_id);
            $("#branchmodal").modal("show");


        }

        </script>