<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" >Color Records</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>
                    <div class="table-container">
                        <div class="table-actions-wrapper ">

                        </div>

                        <table id="loadedlist" class="table table-striped table-bordered dt-responsive" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Color Record</th>
                                <th>Customer ID</th>
                                <th>Customer</th>
                                <th>Cell</th>
                                <th>Type</th>
                                <th>Color</th>
                                <th>Water Content</th>
                                <th>Date</th>
                                <th>Duration</th>
                                <th>Charge</th>
                                <th>Remarks</th>
                                <th>Recommendation</th>
                                <th class='noprint'>Action</th>
                            </tr>
                            <tr role="row" class="filter">
                                        
                                <td width="2%"></td>
                                <td width="3%"></td>
                                <td width="5%">
                                    <input type="text" class="form-control form-filter input-sm" style='width: 70px;' name="customer_name">
                                </td>
                                <td width="3%">
                                    <input type="text" class="form-control form-filter input-sm numeric" style='width: 70px;' name="customer_cell">
                                </td>
                                <td width="5%">
                                    <select type="text" class="form-control form-filter input-sm" style='width: 70px;' name="color_type" id="color_type">
                                        <option value=""></option>
                                        <?php foreach($color_type_list as $color_type){?>
                                            <option value="<?php echo $color_type['type'];?>"><?php echo $color_type['type'];?></option>
                                        <?php } ?>
                                    </select>
                                </td>
                                <td width="2%">
                                    <input type="text" class="form-control form-filter input-sm" style='width: 70px;' name="color_number">
                                </td>
                                <td width="3%">
                                     <select type="text" class="form-control form-filter input-sm" style='width: 70px;' name="water_content" id="water_content">
                                        <option value=""></option>
                                        <?php foreach($water_content_list as $water_content){?>
                                            <option value="<?php echo $water_content['content'];?>"><?php echo $water_content['content'];?></option>
                                        <?php } ?>
                                    </select>
                                </td>

                                <td width="5%">
                                    <input type="text" class="form-control form-filter input-sm date-picker" style='width: 70px;' id="date" name="date">
                                </td>
                                <td width="5%">
                                    <input name="time" class="form-control form-filter input-sm"  style='width: 70px;'>
                                </td>
                                <td width="5%">
                                    <input name="charge" class="form-control form-filter input-sm"  style='width: 70px;'>
                                </td>
                                <td width="30%">
                                    <input name="remarks" class="form-control form-filter input-sm"  style='width: 70px;'>
                                </td>
                                <td width="5%">
                                    <input name="recommendation" class="form-control form-filter input-sm" style='width: 70px;'>
                                </td>
                                <td width="25%">
                                    <div class="margin-bottom-5">
                                        <button class="btn btn-sm teal-500 filter-submit margin-bottom"><i class="icon-magnifier"></i> Search</button>
                                    </div>
                                    <button class="btn btn-sm orange-500 filter-cancel"><i class="icon-refresh"></i> Reset</button>
                                </td>
                            </tr>
                        </thead>

                        <tbody>
                            
                        </tbody>
                    </table>
                    </div>
                </div>
            </div><!-- end col -->
        </div>
        <!-- end row -->

        <!--Modals-->

        <!--Add color record Modal-->
        <div id="addlist" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="addlist" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg" style="width:80%">
                <div class="modal-content">
                    <form id="addlistForm" action="<?php echo base_url("colors_controller/color_record_add"); ?>" method="POST">
                        <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 Color Record</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="txtselectcustomer" class="control-label">Customer</label>
                                                <input onchange="oncustomerchange();" type="text" class="form-control" placeholder="Customer" id="txtselectcustomer" name="txtselectcustomer">
                                                <input type='hidden' id ='txtcustomer'  name ='txtcustomer_id' >
                                            </div> 
                                        </div> 
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txttype" class="control-label">Color Type</label>
                                                <select id="txttype" name="txttype" required class="form-control">
                                                    <option value=""></option>
                                                    <?php
                                                    if (isset($color_type_list)) {
                                                        foreach ($color_type_list as $color_type) {
                                                            if ($color_type['status'] == "Yes") {
                                                                ?>
                                                                <option value="<?php echo $color_type['id']; ?>"><?php echo $color_type['type']; ?></option>
                                                            <?php }
                                                        }
                                                    } ?>
                                                </select>
                                            </div> 
                                        </div> 
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtdate" class="control-label">Date</label>
                                                <input type="text" class="form-control" placeholder="Date" id="txtdate" name="txtdate">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtw_content" class="control-label">Water Content</label>
                                                <select class="form-control" name="txtw_content" id="txtw_content">
                                                    <?php foreach ($WaterContent as $content){ ?>
                                                    <option value="<?php echo $content['content']; ?>"><?php echo $content['content']; ?></option>
                                                    <?php } ?>
                                                </select>
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                </div>
                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtcharge" class="control-label">Charge</label>
                                                <input type="text" class="form-control numeric" placeholder="Charge" id="txtcharge" name="txtcharge">
                                            </div> 
                                        </div> 
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txttypenumber" class="control-label">Color</label>
                                                <input class="form-control" type="text" name="txttypenumber" id="txttypenumber" />
                                            </div> 
                                        </div> 
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txttime" class="control-label">Duration (in minutes)</label>
                                                <input type="text" class="form-control numeric" placeholder="Time" id="txttime" name="txttime">
                                            </div> 
                                        </div> 
                                    </div>
                                </div>
                            </div>
                            <!--Base Color Roots -->
                        <div class="row">                            
                            <div class="col-lg-12">
                                <label for="textdetails" class="control-label">Base Color & Roots:</label>
                                <ul id="rootsul" style="line-height: 32px;  list-style-type: none;">
                                    <li>
                                        
                                        <input style="display:inline;"  type="checkbox" class="checkbox checkbox-circle checkbox-info" name="rootscheckbox"> 
                                        
                                        Roots were 
                                        <select name="workdone" style="display: inline; width:100px; border:none;  ">
                                            <option value=""></option>
                                            <option value="glossed">glossed</option>
                                            <option value="colored">colored</option>
                                        </select> 
                                        with 
                                        <select name="colortype" style="display: inline; width:80px; border:none;  ">
                                            <option value=""></option>
                                                <?php
                                                if (isset($color_type_list)) {
                                                    foreach ($color_type_list as $color_type) {
                                                        if ($color_type['status'] == "Yes") {
                                                            ?>
                                                            <option value="<?php  echo $color_type['type']; ?>"><?php echo $color_type['type']; ?></option>
                                                        <?php }
                                                    }
                                                } ?>  
                                        </select>
                                        <select name="colornumber" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>         
                                        for 
                                        <select name="time" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select>                 
                                        mins.
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="rootscheckbox"> Roots were 
                                        <select name="workdone" style="display: inline; width:100px; border:none;  ">
                                            <option value=""></option>
                                            <option value="glossed">glossed</option>
                                            <option value="colored">colored</option>
                                        </select>  
                                        with 
                                        <select name="colortype" style="display: inline; width:80px; border:none;  ">
                                            <option value=""></option>
                                                <?php
                                                if (isset($color_type_list)) {
                                                    foreach ($color_type_list as $color_type) {
                                                        if ($color_type['status'] == "Yes") {
                                                            ?>
                                                            <option value="<?php  echo $color_type['type']; ?>"><?php echo $color_type['type']; ?></option>
                                                        <?php }
                                                    }
                                                } ?>  
                                        </select>
                                        <select name="colornumber" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>  
                                        for 
                                        <select name="time" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins and the length were glossed with 
                                        <select name="colortype1" style="display: inline; width:80px; border:none;  ">
                                            <option value=""></option>
                                                <?php
                                                if (isset($color_type_list)) {
                                                    foreach ($color_type_list as $color_type) {
                                                        if ($color_type['status'] == "Yes") {
                                                            ?>
                                                            <option value="<?php  echo $color_type['type']; ?>"><?php echo $color_type['type']; ?></option>
                                                        <?php }
                                                    }
                                                } ?>  
                                        </select>
                                        <select name="colornumber1" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>  
                                        for  
                                        <select name="time_1" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select>
                                        mins.
                                    </li>
                                    <li><input type="checkbox" class="checkbox-circle" name="rootscheckbox"> Fullhead was 
                                        <select name="workdone" style="display: inline; width:100px; border:none;  ">
                                            <option value=""></option>
                                            <option value="glossed">glossed</option>
                                            <option value="colored">colored</option>
                                        </select>   
                                        with 
                                        <select name="colortype" style="display: inline; width:80px; border:none;  ">
                                            <option value=""></option>
                                                <?php
                                                if (isset($color_type_list)) {
                                                    foreach ($color_type_list as $color_type) {
                                                        if ($color_type['status'] == "Yes") {
                                                            ?>
                                                            <option value="<?php  echo $color_type['type']; ?>"><?php echo $color_type['type']; ?></option>
                                                        <?php }
                                                    }
                                                } ?>  
                                        </select>
                                        <select name="colornumber" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                        <?php foreach($color_numbers as $cn){?>
                                            <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                        <?php } ?>   
                                        </select>  
                                        for 
                                        <select name="time" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins in the roots and 
                                        <select name="time_1" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins through the length.                                        
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="rootscheckbox"> Braids were  
                                        <select name="workdone" style="display: inline; width:100px; border:none;  ">
                                            <option value=""></option>
                                            <option value="glossed">glossed</option>
                                            <option value="colored">colored</option>
                                        </select>    
                                        with 
                                        <select name="colortype" style="display: inline; width:80px; border:none;  ">
                                            <option value=""></option>
                                                <?php
                                                if (isset($color_type_list)) {
                                                    foreach ($color_type_list as $color_type) {
                                                        if ($color_type['status'] == "Yes") {
                                                            ?>
                                                            <option value="<?php  echo $color_type['type']; ?>"><?php echo $color_type['type']; ?></option>
                                                        <?php }
                                                    }
                                                } ?>  
                                        </select>
                                        <select name="colornumber" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                        <?php foreach($color_numbers as $cn){?>
                                            <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                        <?php } ?>   
                                        </select>  
                                        for
                                        <select name="time" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins.
                                    </li>
                                </ul>
                            </div>
                            
                        </div>
                        
                      <!-- HighLights -->
                      <div class="row">                            
                            <div class="col-lg-12">
                                <label for="textdetails" class="control-label">Lights:</label>
                                <ul id="lightsul" style="line-height: 32px;  list-style-type: none;">
                                    <li>
                                        
                                        <input style="display:inline;"  type="checkbox" class="checkbox checkbox-circle checkbox-info" name="lightscheckbox"> 
                                        
                                        Lights were Pre-lightened with 
                                         <select name="colornumber" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <option value="10">10</option>
                                            <option value="20">20</option>
                                            <option value="30">30</option>
                                            <option value="40">40</option>  
                                        </select>         
                                        vol.
                                    </li>
                                    <li><input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Lights were Toned with
                                        <select name="colornumber" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>  
                                        for 
                                        <select name="time" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins throughout.
                                    </li>
                                    <li><input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Lights were Toned with
                                        <select name="colornumber" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>  
                                        in the roots and 
                                        <select name="colornumber1" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>  
                                        through the length for
                                        <select name="time" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins.
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Smart Bond
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Color Correction
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Double Application
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Open Foils
                                    </li>
                                </ul>
                            </div>
                            
                        </div>
                             <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="txtcolorremarks" class="control-label">Remarks</label>
                                    <textarea id="txtcolorremarks" class="form-control"  style="height:100px;"></textarea>
                                </div> 
                            </div> 
                        </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="txtrecommendation" class="control-label">Recommendation</label>
                                        <textarea id="txtrecommendation" name="txtrecommendation" class="form-control"></textarea>
                                    </div> 
                                </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>
        <!--End Service Category Modal-->

        <!--Edit Color Modal-->
        <div id="edittype" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="edit$records" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg" style="width:80%;">
                <div class="modal-content">
                    <form id="editlistForm" action="<?php echo base_url("colors_controller/color_record_update"); ?>" method="POST">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="custom-width-modalLabel">Update a Color Record</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="txteditcustomer" class="control-label">Customer</label>
                                                <input id="txteditcustomer" readonly="readonly" name="txteditcustomer" required class="form-control">
                                                <input id="txteditcustomer_id" type="hidden" name="txteditcustomer_id" >
                                            </div> 
                                        </div> 
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtedittype" class="control-label">Color Type</label>
                                                <select id="txtedittype" name="txtedittype" required class="form-control">
                                                    <option value=""></option>
                                                    <?php
                                                    if (isset($color_type_list)) {
                                                        foreach ($color_type_list as $color_type) {
                                                            if ($color_type['status'] == "Yes") {
                                                                ?>
                                                                <option value="<?php echo $color_type['id']; ?>"><?php echo $color_type['type']; ?></option>
                                                            <?php }
                                                        }
                                                    } ?>
                                                </select>
                                            </div> 
                                        </div> 
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txteditdate" class="control-label">Date</label>
                                                <input type="text" class="form-control" placeholder="Date" id="txteditdate" name="txteditdate">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txteditw_content" class="control-label">Water Content</label>
                                                <select class="form-control" name="txteditw_content" id="txteditw_content">
                                                    <?php foreach ($WaterContent as $content){ ?>
                                                    <option value="<?php echo $content['content']; ?>"><?php echo $content['content']; ?></option>
                                                    <?php } ?>
                                                </select>
                                            </div> 
                                        </div> 
                                    </div>

                                    
                                </div>
                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txteditcharge" class="control-label">Charge</label>
                                                <input type="text" class="form-control numeric" placeholder="Charge" id="txteditcharge" name="txteditcharge">
                                            </div> 
                                        </div> 
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtedittypenumber" class="control-label">Color Number</label>
                                                <input class="form-control" type="text" name="txtedittypenumber" id="txtedittypenumber" />
                                            </div> 
                                        </div> 
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtedittime" class="control-label">Duration (in minutes)</label>
                                                <input type="text" class="form-control numeric" placeholder="Time" id="txtedittime" name="txtedittime">
                                            </div> 
                                        </div> 
                                    </div>
                                </div>
                            </div>
                          
                            <!--Base Color Roots -->
                            <div class="row">
                                <div class='col-lg-12'>
                                    <strong>Existing Remark Lines:</strong>
                                </div>
                                <div id='diveditremarks' class='col-lg-12'>
                                    
                                </div>
                                <div class='col-lg-12'>
                                    <strong class="text-danger">TO REPLACE YOUR REMARK LINES SELECT BELOW AND SAVE:</strong>
                                </div>
                            </div>
                            
                        <div class="row">                            
                            <div class="col-lg-12">
                                <label for="textdetails" class="control-label">Base Color & Roots:</label>
                                <ul id="rootseditul" style="line-height: 32px;  list-style-type: none;">
                                    <li>
                                        
                                        <input style="display:inline;"  type="checkbox" class="checkbox checkbox-circle checkbox-info" name="rootscheckbox"> 
                                        
                                        Roots were 
                                        <select name="workdone" style="display: inline; width:100px; border:none;  ">
                                            <option value=""></option>
                                            <option value="glossed">glossed</option>
                                            <option value="colored">colored</option>
                                        </select> 
                                        with 
                                        <select name="colortype" style="display: inline; width:80px; border:none;  ">
                                            <option value=""></option>
                                                <?php
                                                if (isset($color_type_list)) {
                                                    foreach ($color_type_list as $color_type) {
                                                        if ($color_type['status'] == "Yes") {
                                                            ?>
                                                            <option value="<?php  echo $color_type['type']; ?>"><?php echo $color_type['type']; ?></option>
                                                        <?php }
                                                    }
                                                } ?>  
                                        </select>
                                        <select name="colornumber" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>         
                                        for 
                                        <select name="time" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select>                 
                                        mins.
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="rootscheckbox"> Roots were 
                                        <select name="workdone" style="display: inline; width:100px; border:none;  ">
                                            <option value=""></option>
                                            <option value="glossed">glossed</option>
                                            <option value="colored">colored</option>
                                        </select>  
                                        with 
                                        <select name="colortype" style="display: inline; width:80px; border:none;  ">
                                            <option value=""></option>
                                                <?php
                                                if (isset($color_type_list)) {
                                                    foreach ($color_type_list as $color_type) {
                                                        if ($color_type['status'] == "Yes") {
                                                            ?>
                                                            <option value="<?php  echo $color_type['type']; ?>"><?php echo $color_type['type']; ?></option>
                                                        <?php }
                                                    }
                                                } ?>  
                                        </select>
                                        <select name="colornumber" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>  
                                        for 
                                        <select name="time" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins and the length were glossed with 
                                        <select name="colortype1" style="display: inline; width:80px; border:none;  ">
                                            <option value=""></option>
                                                <?php
                                                if (isset($color_type_list)) {
                                                    foreach ($color_type_list as $color_type) {
                                                        if ($color_type['status'] == "Yes") {
                                                            ?>
                                                            <option value="<?php  echo $color_type['type']; ?>"><?php echo $color_type['type']; ?></option>
                                                        <?php }
                                                    }
                                                } ?>  
                                        </select>
                                        <select name="colornumber1" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>  
                                        for  
                                        <select name="time_1" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select>
                                        mins.
                                    </li>
                                    <li><input type="checkbox" class="checkbox-circle" name="rootscheckbox"> Fullhead was 
                                        <select name="workdone" style="display: inline; width:100px; border:none;  ">
                                            <option value=""></option>
                                            <option value="glossed">glossed</option>
                                            <option value="colored">colored</option>
                                        </select>   
                                        with 
                                        <select name="colortype" style="display: inline; width:80px; border:none;  ">
                                            <option value=""></option>
                                                <?php
                                                if (isset($color_type_list)) {
                                                    foreach ($color_type_list as $color_type) {
                                                        if ($color_type['status'] == "Yes") {
                                                            ?>
                                                            <option value="<?php  echo $color_type['type']; ?>"><?php echo $color_type['type']; ?></option>
                                                        <?php }
                                                    }
                                                } ?>  
                                        </select>
                                        <select name="colornumber" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                        <?php foreach($color_numbers as $cn){?>
                                            <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                        <?php } ?>   
                                        </select>  
                                        for 
                                        <select name="time" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins in the roots and 
                                        <select name="time_1" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins through the length.                                        
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="rootscheckbox"> Braids were  
                                        <select name="workdone" style="display: inline; width:100px; border:none;  ">
                                            <option value=""></option>
                                            <option value="glossed">glossed</option>
                                            <option value="colored">colored</option>
                                        </select>    
                                        with 
                                        <select name="colortype" style="display: inline; width:80px; border:none;  ">
                                            <option value=""></option>
                                                <?php
                                                if (isset($color_type_list)) {
                                                    foreach ($color_type_list as $color_type) {
                                                        if ($color_type['status'] == "Yes") {
                                                            ?>
                                                            <option value="<?php  echo $color_type['type']; ?>"><?php echo $color_type['type']; ?></option>
                                                        <?php }
                                                    }
                                                } ?>  
                                        </select>
                                        <select name="colornumber" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                        <?php foreach($color_numbers as $cn){?>
                                            <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                        <?php } ?>   
                                        </select>  
                                        for
                                        <select name="time" style="display: inline; width:50px; border:none;  ">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins.
                                    </li>
                                </ul>
                            </div>
                            
                        </div>
                        
                      <!-- HighLights -->
                      <div class="row">                            
                            <div class="col-lg-12">
                                <label for="textdetails" class="control-label">Lights:</label>
                                <ul id="lightseditul" style="line-height: 32px;  list-style-type: none;">
                                    <li>
                                        
                                        <input style="display:inline;"  type="checkbox" class="checkbox checkbox-circle checkbox-info" name="lightscheckbox"> 
                                        
                                        Lights were Pre-lightened with 
                                         <select name="colornumber" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <option value="10">10</option>
                                            <option value="20">20</option>
                                            <option value="30">30</option>
                                            <option value="40">40</option>  
                                        </select>         
                                        vol.
                                    </li>
                                    <li><input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Lights were Toned with
                                        <select name="colornumber" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>  
                                        for 
                                        <select name="time" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins throughout.
                                    </li>
                                    <li><input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Lights were Toned with
                                        <select name="colornumber" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>  
                                        in the roots and 
                                        <select name="colornumber1" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <?php foreach($color_numbers as $cn){?>
                                                <option value="<?php echo $cn['number'];?>"><?php echo $cn['number'];?></option>
                                            <?php } ?>   
                                        </select>  
                                        through the length for
                                        <select name="time" style="display: inline; width:50px; border:none; border-bottom:1px solid #808080;">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                            <option value="25">25</option>
                                            <option value="30">30</option>
                                            <option value="35">35</option>
                                            <option value="40">40</option>
                                        </select> 
                                        mins.
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Smart Bond
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Color Correction
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Double Application
                                    </li>
                                    <li>
                                        <input type="checkbox" class="checkbox-circle" name="lightscheckbox"> 
                                        Open Foils
                                    </li>
                                </ul>
                            </div>
                            
                        </div>
                        
                            
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="txteditcolorremarks" class="control-label">Remarks</label>
                                        <textarea id="txteditcolorremarks" class="form-control"  style="height:100px;"></textarea>
                                    </div> 
                                </div> 
                            </div>
                      
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="txteditrecommendation" class="control-label">Recommendation</label>
                                        <textarea id="txteditrecommendation" name="txtrecommendation" class="form-control"></textarea>
                                    </div> 
                                </div> 
                            </div>    
                        </div>
                        <div class="modal-footer">
                            <input type="hidden" name="idcolor_record" id="idcolor_record"  />
                            <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>
        <!--End Edit Service Category Modal-->
        
      
        <script src="<?php echo base_url(); ?>assets/js/datatable.js"></script>

        <script>
            $(document).ready(function() {
               
                $("#rootsul select").change( function(){
                    $(this).parent().children("input[name='rootscheckbox']").prop('checked','checked');
                });
                $("#lightsul select").change( function(){
                    $(this).parent().children("input[name='lightscheckbox']").prop('checked','checked');
                });
                
                $("#rootseditul select").change( function(){
                    $(this).parent().children("input[name='rootscheckbox']").prop('checked','checked');
                });
                $("#lightseditul select").change( function(){
                    $(this).parent().children("input[name='lightscheckbox']").prop('checked','checked');
                });
               
               $("#txtselectcustomer").select2({
                 ajax: {
                   url: '<?php echo base_url();?>customer_controller/searchnameforco',
                   dataType: 'json',
                   quietMillis: 1000,
                   data: function (term, page) {

                     return {
                         customername: term, // search term
                         page_limit: 30, // page size
                         page: page // page number
                     };
                   },
                   results: function (data, page) {

                         var more = (page * 30) < data.length;
                         return {results: data, more: more};
                     }
                   },
                 escapeMarkup: function (m) { return m; }, // let our custom formatter work
                 minimumInputLength: 3,
                 formatResult: function (option) {
                    return option.customer_name + ' ' + option.customer_cell;
                 },
                 formatSelection: function (option) {
                     return option.customer_name ;
                 }
               });
               
               
                $('#datatable-buttons').DataTable({
                    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    stateSave: true,
                    <?php if(DOWNLOAD == true || $this->session->userdata('role') == 'Admin' || $this->session->userdata('role')=='Super User'){ ?>
                    dom: "Bfrtlip",
                    buttons: [{extend: "copy", className: "btn-sm btn-custom btn-trans"}, {extend: "csv", className: "btn-sm btn-pink btn-trans"}, {
                            extend: "excel",
                            className: "btn-sm btn-warning btn-trans"
                        }, {extend: "pdf", className: "btn-sm btn-purple btn-trans"}],
                    <?php } else { ?>
                        dom: "frtlip",
                    <?php } ?> 
                    responsive: !0
                });


                toastr.options = {
                    "closeButton": true,
                    "debug": true,
                    "newestOnTop": true,
                    "progressBar": true,
                    "positionClass": "toast-bottom-center",
                    "preventDuplicates": true,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
                
                

                $('#txtdate').datepicker({
                    autoclose: true,
                    todayHighlight: true,
                    format: 'yyyy-mm-dd'
                });
                
                $('#txteditdate').datepicker({
                    autoclose: true,
                    todayHighlight: true,
                    format: 'yyyy-mm-dd'
                });

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

                

            $('#addlistForm').on('submit', function(e) {
                e.preventDefault();
                   
                    
                    var data = $("#txtselectcustomer").select2('data');
                    $("#txtcustomer").val(data.id_customers);
                    
                    var txtcustomer_id = data.id_customers;
                    var txtcustomer = data.id;
                    
                    var txttype_id = $('#txttype option:selected').val();
                    var txttype = $('#txttype option:selected').text();
                    //var txttypenumber_id = $('#txttypenumber option:selected').val();
                    var txttypenumber = $('#txttypenumber').val();
                    
                    var rootsoptions = rootsoptionchecked();
                    
                    var lightsoptions = lightsoptionchecked();
                    
                    
                    $.ajax({
                    url: $(this).attr('action') || window.location.pathname,
                    type: "POST",
                    data: {txtcustomer_id: txtcustomer_id, 
                        txtcustomer: txtcustomer, 
                        txttype_id: txttype_id, 
                        txttype: txttype, 
                        txttypenumber: txttypenumber, 
                        txttime: $('#txttime').val(), 
                        txtcharge: $('#txtcharge').val(), 
                        txtremarks: $('#txtcolorremarks').val(), 
                        txtrecommendation: $('#txtrecommendation').val(), 
                        txtdate: $('#txtdate').val(), 
                        water_content: $('#txtw_content').val(),
                        rootsoptions: rootsoptions,
                        lightsoptions: lightsoptions
                    
                    },
                    //data: 'txtcustomer_id='+txtcustomer_id+'&txtcustomer='+txtcustomer+'&txttype_id='+txttype_id+'&txttype='+txttype+'&txttypenumber='+txttypenumber+'&txttime='+$('#txttime').val()+'&txtcharge='+$('#txtcharge').val()+'&txtremarks='+$('#txtremarks').val()+'&txtdate='+$('#txtdate').val(),
                    success: function(data) {
                        var result = data.split("|");
                        if (result[0] === "success") {
                            toastr.success('Color record added');
                            location.reload();
                        } 
                    },
                    error: function(jXHR, textStatus, errorThrown) {
                    
                    }
                    });
                });
                
                $('#editlistForm').on('submit', function(e) {
                e.preventDefault();
                    var txtcustomer_id = $('#txteditcustomer_id').val();
                    var txtcustomer = $('#txteditcustomer').val();
                    var txttype_id = $('#txtedittype option:selected').val();
                    var txttype = $('#txtedittype option:selected').text();
                    //var txttypenumber_id = $('#txtedittypenumber option:selected').val();
                    var txttypenumber = $('#txtedittypenumber').val();
                    
                    
                    var rootsoptions = rootseditoptionchecked();
                    var lightsoptions = lightseditoptionchecked();
                    
                    $.ajax({
                    url: $(this).attr('action') || window.location.pathname,
                    type: "POST",
                    data: {idcolor_record: $('#idcolor_record').val(), 
                        txtcustomer_id: txtcustomer_id, 
                        txtcustomer: txtcustomer, 
                        txttype_id: txttype_id, 
                        txttype: txttype, 
                        txttypenumber: txttypenumber, 
                        txttime: $('#txtedittime').val(), 
                        txtcharge: $('#txteditcharge').val(), 
                        txtremarks: $('#txteditcolorremarks').val(), 
                        txtrecommendation: $('#txteditrecommendation').val(), 
                        txtdate: $('#txteditdate').val(), 
                        water_content: $('#txteditw_content').val(),
                        rootsoptions: rootsoptions,
                        lightsoptions: lightsoptions
                    },
                    //data:  'idcolor_record='+$('#idcolor_record').val()+'&txtcustomer_id='+txtcustomer_id+'&txtcustomer='+txtcustomer+'&txttype_id='+txttype_id+'&txttype='+txttype+'&txttypenumber='+txttypenumber+'&txttime='+$('#txtedittime').val()+'&txtcharge='+$('#txteditcharge').val()+'&txtremarks='+$('#txteditremarks').val()+'&txtdate='+$('#txteditdate').val(),
                    success: function(data) {
                        //console.log(data);
                        var result = data.split("|");
                        if (result[0] === "success") {
                            toastr.success('Color record updated');
                            location.reload();
                        } 
                    },
                    error: function(jXHR, textStatus, errorThrown) {
                    
                    }
                    });
                });
                
                $(".numeric").keypress(function(e) {
                    //if the letter is not digit then display error and don't type anything
                    if (e.which != 13 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                        return false;
                    }
                });
                colorlist.init();
            });


        var colorlist = function () {
          var initPickers = function () {
            //init date pickers
                $('.date-picker').datepicker({
                    format: 'yyyy-mm-dd',
                    autoclose: true
                });
            }

            var handleColors = function () {
                var grid = new Datatable();

                grid.init({
                    src: $("#loadedlist"),
                    onSuccess: function (grid) {
                        // execute some code after table records loaded
                    },
                    onError: function (grid) {
                        // execute some code on network or other general error  
                    },
                    loadingMessage: 'Loading...',
                    dataTable: {// here you can define a typical datatable settings from http://datatables.net/usage/options 
                        // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
                        // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: js/datatable.js). 
                        // So when dropdowns used the scrollable div should be removed. 
                        "dom": "<'row'<'col-md-8 col-sm-12'li><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-12 col-sm-12'><'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'p><'col-md-12 col-sm-12'i>>",
                        "lengthMenu": [
                            [10, 20, 50, 100, 150, -1],
                            [10, 20, 50, 100, 150, "All"] // change per page values here
                        ],
                        "pageLength": 10, // default record count per page
                        "pagingType": "full_numbers",
                        "stateSave":"true",
                        "ajax": {
                            "url": "<?php echo base_url(); ?>colors_controller/get_colorbysearch" // ajax source
                        },
                        "order": [
                            [0, "desc"]
                        ], // set first column as a default sort by asc
                        "columns": [
                           
                            {"data": "id"},
                            {"data": "customer_id"},
                            {"data": "customer"},
                            {"data": "customer_cell"},
                            {"data": "color_type"},
                            {"data": "color_number"},
                            {"data": "water_content"},
                            {"data": "date"},
                            {"data": "time"},
                            {"data": "charge"},
                            {"data": "remarks"},
                            {"data": "recommendation"},
                            {"data": "action"}
                        ],
                        "columnDefs": [{"sortable": false, "targets": 3}]

                    }
                });


                // handle group actionsubmit button click
                grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
                    e.preventDefault();
                    var action = $(".table-group-action-input", grid.getTableWrapper());
                    if (action.val() !== "" && grid.getSelectedRowsCount() > 0) {
                        grid.setAjaxParam("customActionType", "group_action");
                        grid.setAjaxParam("customActionName", action.val());
                        grid.setAjaxParam("id", grid.getSelectedRows());
                        grid.getDataTable().ajax.reload();
                        grid.clearAjaxParams();
                    } else if (action.val() == "") {
                        swal({
                            title: "Please select an action",
                            text: "",
                            type: "warning",
                            confirmButtonText: 'OK!'
                        });
                        
                    } else if (grid.getSelectedRowsCount() === 0) {
                         swal({
                            title: "No record selected",
                            text: "",
                            type: "danger",
                            confirmButtonText: 'OK!'
                        });
                    }
                });
            }
            return {
                //main function to initiate the module
                init: function () {

                    initPickers();
                    handleColors();
                }

            };

        }();


//            function color_type(idtype) {
//                if (idtype && idtype != '') {
//                    $('#txttypenumber').html('');
//                    $('#txtedittypenumber').html('');
//                    $.ajax({
//                        type: 'POST',
//                        url: 'colors_controller/get_color_number_id/' + idtype,
//                        dataType: "json",
//                        cache: false,
//                        async: true,
//                        success: function(data) {
//                            for (var i = 0; i < data.length; i++) {
//                                //$('#txttypenumber').append('<option value = ' + data[i]['id'] + '>' + data[i]['number'] + '</option>');
//                                //$('#txtedittypenumber').append('<option value = ' + data[i]['id'] + '>' + data[i]['number'] + '</option>');
//                            }
//
//                        }
//                    });
//                }
//            }

            function oncustomerchange(){
                 var data = $("#txtselectcustomer").select2('data');
                 
                    $("#txtcustomer").val(data.id_customers);
                
            }

            function openaddnew() {
                $("#addlist").modal('show');
            }
            
            function openupdate(id) {
                
                $.ajax({
                    type: 'POST',
                    url: 'colors_controller/edit_color_record',
                    data: {id: id},
                    dataType: "json",
                    cache: false,
                    async: true,
                    success: function(data) {
                        
                        var record=data.record;
                        var remarks=data.remarks;
                        console.log(data.remarks);
                        $("#txteditcustomer").val(record.customer);
                        $("#txteditcustomer_id").val(record.customer_id);
                        $("#txtedittype").val(record.color_type_id);
                        $("#txtedittypenumber").val(record.color_number);
                        $("#txteditdate").val(record.date);
                        $("#txtedittime").val(record.time);
                        
                        var temp = record.remarks;
                        var n= temp.indexOf("</br>");
                        temp = temp.substr(n+5, temp.length);
                        
                        $("#txteditcolorremarks").val(temp);
                        $("#txteditrecommendation").val(record.recommendation);
                        $("#txteditcharge").val(record.charge);
                        $("#txteditw_content").val(record.water_content);
                        var x=0;
                        
                        for(x=0; x<remarks.length; x++){
                            //console.log(remarks[x]);
                            $("#diveditremarks").html($("#diveditremarks").html() + '<br/>'+ remarks[x]['color_record_remark']);
                            
                        }

                        $('#idcolor_record').val(id);

                        $("#edittype").modal('show');
                    }
                });
            }
            
            
            
            
        function addremark(){
        
            var newhtml = "<li onclick='$(this).remove();'>"+$("#txtwork option:selected").val()+ " were " +  $("#txtfor").val() + " with " + $("#txtremarktype option:selected").text() + " " + $("#txtremarktypenumber").val() + " for " + $("#txtremarktime").val() + " min " + $("#txtlength option:selected").text() + "</li>";

            $("#coloraddremarkslist").append(newhtml);

        }
         
         function addeditremark(){
             
            var newhtml = "<li onclick='$(this).remove();'>"+$("#txteditwork option:selected").val()+ " were " +  $("#txteditfor").val() + " with " + $("#txteditremarktype option:selected").text() + " " + $("#txteditremarktypenumber").val() + " for " + $("#txteditremarktime").val() + " min " + $("#txteditlength option:selected").text() + "</li>";
            console.log(newhtml);
            $("#coloreditremarkslist").append(newhtml);

        }
        function rootsoptionchecked(){
        $x=1;
        var rootoptions=[];
        $('#rootsul li').each(function() {
            if($x==1){
                var checked = $(this).find("input[name='rootscheckbox']").prop('checked');
                
                var var1 = $(this).find("select[name='workdone'] option:selected").val();
                var var2 = $(this).find("select[name='colortype'] option:selected").val();
                var var3 = $(this).find("select[name='colornumber'] option:selected").val();
                var var4 = $(this).find("select[name='time'] option:selected").val();
                if(checked==true){
                    var result = 'Roots were '+var1+' with '+var2+' '+ var3 + ' for '+var4+' mins.';
                    rootoptions.push(result);
                }
                
            }
            
            if($x==2){
                var checked = $(this).find("input[name='rootscheckbox']").prop('checked');
                var var1 = $(this).find("select[name='workdone'] option:selected").val();
                var var2 = $(this).find("select[name='colortype'] option:selected").val();
                var var3 = $(this).find("select[name='colornumber'] option:selected").val();
                var var4 = $(this).find("select[name='time'] option:selected").val();
                var var5 = $(this).find("select[name='colortype1'] option:selected").val();
                var var6 = $(this).find("select[name='colornumber1'] option:selected").val();
                var var7 = $(this).find("select[name='time_1'] option:selected").val();
                
                if(checked==true){
                    var result = 'Roots were '+var1+' with '+var2+' '+var3+' for '+var4+' mins and the Length were glossed with '+var5+' '+var6 +' for '+ var7 + ' mins.';
                    rootoptions.push(result);
                }
                
            }
            
            if($x==3){
                var checked = $(this).find("input[name='rootscheckbox']").prop('checked');
                var var1 = $(this).find("select[name='workdone'] option:selected").val();
                var var2 = $(this).find("select[name='colortype'] option:selected").val();
                var var3 = $(this).find("select[name='colornumber'] option:selected").val();
                var var4 = $(this).find("select[name='time'] option:selected").val();
                var var5 = $(this).find("select[name='time_1'] option:selected").val();                
                
                if(checked==true){
                    var result = 'Fullhead was '+var1+' with '+var2+' ' +var3 +' for '+var4+' mins in the roots and '+var5+' min through the length';
                    rootoptions.push(result);
                }
                
            }
            
            if($x==4){
                var checked = $(this).find("input[name='rootscheckbox']").prop('checked');
                var var1 = $(this).find("select[name='workdone'] option:selected").val();
                var var2 = $(this).find("select[name='colortype'] option:selected").val();
                var var3 = $(this).find("select[name='colornumber'] option:selected").val();
                var var4 = $(this).find("select[name='time'] option:selected").val();
                
                if(checked==true){
                    var result = 'Braids were '+var1+' '+var2+' with '+var3+' for '+var4+' mins.';
                    rootoptions.push(result);
                }
                
            }
            
            $x++; 
        });
        return rootoptions;
    }
    
    function lightsoptionchecked(){
        $x=1;
        var lightsoptions=[];
        $('#lightsul li').each(function() {
            if($x==1){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                var var1 = $(this).find("select[name='colornumber'] option:selected").val();                
                if(checked==true){
                    var result = 'Lights were Pre-lightened with '+var1+' vol.';
                    lightsoptions.push(result);
                }
                
            }
            
            if($x==2){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                
                var var1 = $(this).find("select[name='colornumber'] option:selected").val();
                var var2 = $(this).find("select[name='time'] option:selected").val();
                
                if(checked==true){
                    var result = 'Lights were Toned with '+var1+' for '+var2+' mins throughtout.';
                    lightsoptions.push(result);
                }
                
            }
            
            if($x==3){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                
                var var1 = $(this).find("select[name='colornumber'] option:selected").val();
                var var2 = $(this).find("select[name='colornumber1'] option:selected").val();
                var var3 = $(this).find("select[name='time'] option:selected").val();
                if(checked==true){
                    var result = 'Lights were Toned with '+var1+' in the roots and '+var2+' through the length for '+var3+' mins.';
                    lightsoptions.push(result);
                }
                
            }
            
            if($x==4){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                               
                if(checked==true){
                    var result = 'Smart Bond';
                    lightsoptions.push(result);
                }
                
            }
            if($x==5){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                               
                if(checked==true){
                    var result = 'Color Correction';
                    lightsoptions.push(result);
                }
                
            }
            if($x==6){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                               
                if(checked==true){
                    var result = 'Double Application';
                    lightsoptions.push(result);
                }
                
            }
            if($x==7){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                               
                if(checked==true){
                    var result = 'Open Foils';
                    lightsoptions.push(result);
                }
                
            }
            
            $x++; 
        });
        return lightsoptions;
    }
    
    function rootseditoptionchecked(){
        $x=1;
        var rootoptions=[];
        $('#rootseditul li').each(function() {
            if($x==1){
                var checked = $(this).find("input[name='rootscheckbox']").prop('checked');
                
                var var1 = $(this).find("select[name='workdone'] option:selected").val();
                var var2 = $(this).find("select[name='colortype'] option:selected").val();
                var var3 = $(this).find("select[name='colornumber'] option:selected").val();
                var var4 = $(this).find("select[name='time'] option:selected").val();
                if(checked==true){
                    var result = 'Roots were '+var1+' with '+var2+' '+ var3 + ' for '+var4+' mins.';
                    rootoptions.push(result);
                }
                
            }
            
            if($x==2){
                var checked = $(this).find("input[name='rootscheckbox']").prop('checked');
                var var1 = $(this).find("select[name='workdone'] option:selected").val();
                var var2 = $(this).find("select[name='colortype'] option:selected").val();
                var var3 = $(this).find("select[name='colornumber'] option:selected").val();
                var var4 = $(this).find("select[name='time'] option:selected").val();
                var var5 = $(this).find("select[name='colortype1'] option:selected").val();
                var var6 = $(this).find("select[name='colornumber1'] option:selected").val();
                var var7 = $(this).find("select[name='time_1'] option:selected").val();
               
                if(checked==true){
                    var result = 'Roots were '+var1+' with '+var2+' '+var3+' for '+var4+' mins and the Length were glossed with '+var5+' '+var6 +' for '+ var7 + ' mins.';
                    rootoptions.push(result);
                }
                
            }
            
            if($x==3){
                var checked = $(this).find("input[name='rootscheckbox']").prop('checked');
                var var1 = $(this).find("select[name='workdone'] option:selected").val();
                var var2 = $(this).find("select[name='colortype'] option:selected").val();
                var var3 = $(this).find("select[name='colornumber'] option:selected").val();
                var var4 = $(this).find("select[name='time'] option:selected").val();
                var var5 = $(this).find("select[name='time_1'] option:selected").val();                
                
                if(checked==true){
                    var result = 'Fullhead was '+var1+' with '+var2+' ' +var3 +' for '+var4+' mins in the roots and '+var5+' min through the length';
                    rootoptions.push(result);
                }
                
            }
            
            if($x==4){
                var checked = $(this).find("input[name='rootscheckbox']").prop('checked');
                var var1 = $(this).find("select[name='workdone'] option:selected").val();
                var var2 = $(this).find("select[name='colortype'] option:selected").val();
                var var3 = $(this).find("select[name='colornumber'] option:selected").val();
                var var4 = $(this).find("select[name='time'] option:selected").val();
                
                if(checked==true){
                    var result = 'Braids were '+var1+' '+var2+' with '+var3+' for '+var4+' mins.';
                    rootoptions.push(result);
                }
                
            }
            
            $x++; 
        });
        return rootoptions;
    }
    
    function lightseditoptionchecked(){
        $x=1;
        var lightsoptions=[];
        $('#lightseditul li').each(function() {
            if($x==1){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                var var1 = $(this).find("select[name='colornumber'] option:selected").val();                
                if(checked==true){
                    var result = 'Lights were Pre-lightened with '+var1+' vol.';
                    lightsoptions.push(result);
                }
                
            }
            
            if($x==2){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                
                var var1 = $(this).find("select[name='colornumber'] option:selected").val();
                var var2 = $(this).find("select[name='time'] option:selected").val();
                
                if(checked==true){
                    var result = 'Lights were Toned with '+var1+' for '+var2+' mins throughtout.';
                    lightsoptions.push(result);
                }
                
            }
            
            if($x==3){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                
                var var1 = $(this).find("select[name='colornumber'] option:selected").val();
                var var2 = $(this).find("select[name='colornumber1'] option:selected").val();
                var var3 = $(this).find("select[name='time'] option:selected").val();
                if(checked==true){
                    var result = 'Lights were Toned with '+var1+' in the roots and '+var2+' through the length for '+var3+' mins.';
                    lightsoptions.push(result);
                }
                
            }
            
            if($x==4){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                               
                if(checked==true){
                    var result = 'Smart Bond';
                    lightsoptions.push(result);
                }
                
            }
            if($x==5){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                               
                if(checked==true){
                    var result = 'Color Correction';
                    lightsoptions.push(result);
                }
                
            }
            if($x==6){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                               
                if(checked==true){
                    var result = 'Double Application';
                    lightsoptions.push(result);
                }
                
            }
            if($x==7){
                var checked = $(this).find("input[name='lightscheckbox']").prop('checked');
                               
                if(checked==true){
                    var result = 'Open Foils';
                    lightsoptions.push(result);
                }
                
            }
            
            $x++; 
        });
        return lightsoptions;
    }
        </script>