<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
 <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
 <script src="<?php echo base_url()?>/public/validation/js/jquery.validate.js"></script>
  <script src="<?php echo base_url();?>public/admin_assets/plugins/select2/select2.full.min.js"></script>
<!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h3>
            Job Settings
            
          </h3>         
        </section>

        <!-- Main content -->
        <section class="content"> 
      <div class="row">
        <!-- general form elements -->
        <div class="col-md-12">
            <div class="box box-primary">
            <div class="box-header with-border">
            <div class="admin-tab-wrapper">
              <div class="admin_tab">
                <!--<button class="btn btn-primary dropdown-toggle btn-algnmt" type="button" data-toggle="dropdown">Action
                <span class="caret"></span></button>-->
                <ul>
                  <li><a href="javascript:void(0);" onclick="window.history.back();">Back</a></li>
                </ul>
              </div>
            </div>
              <h3 class="box-title"></h3>
               <?php if($this->session->flashdata('error_msg')){?>
                <span style="color:red; font-weight:bold"><?php echo $this->session->flashdata('error_msg');?></span>
              <?php }?>
              <?php if($this->session->flashdata('success_msg')){?>
                <span style="color:green; font-weight:bold"><?php  echo $this->session->flashdata('success_msg'); ?></span>
              <?php }?>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form id="signupForm" role="form" class="mtbresize" method="post" action="<?php echo base_url('admin/job/update');?>" enctype="multipart/form-data" autocomplete="off">
              <input type="hidden" name="job_id" value="<?php echo $job_details['job_id']; ?>">
              <div class="box-body">  
                
              <div class="form-group">

                <label for="car">Car<sup class="superr">*</sup></label>
                <select class="form-control" id="car" name="car">
                <option value="">Select</option>
                <option value="<?php echo $selected_car[0]['car_id'];?>" selected="selected"><?php echo $selected_car[0]['car_no'];?></option> 
                <?php foreach($cars as $car){?>
                  <option value="<?php echo $car['car_id']; ?>" 
                    <?php if($job_details['car_id']==$car['car_id']){ ?> selected="selected"<?php }?>><?php echo $car['car_no']; ?></option>
                <?php } ?>  
                </select>
                <?php echo form_error('car','<span class="error">', '</span>'); ?>
              </div>
              <div class="form-group">
                <label for="service_date">Service Date<sup class="superr">*</sup></label>
                <?php $selected_service_date_arr=explode('-',$selected_services_date[0]['service_date']);
                $selected_services_date_str=$selected_service_date_arr[2]."/".$selected_service_date_arr[1]."/".$selected_service_date_arr[0];
                ?>
                <div class='input-group date'>
                  <input type='text' class="form-control" placeholder="Service Date" id="service_date" name="service_date" value="<?php echo $selected_services_date_str;?>"/>
                  <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                  </span>
                </div>
                <?php echo form_error('expiry_date','<span class="error">', '</span>'); ?>
              </div>  
              <div class="form-group">
                <label for="mechanic">Mechanic<sup class="superr">*</sup></label>
                <select class="form-control" id="mechanic" name="mechanic"> 
                <option value="<?php echo $assigned_mechanic['mechanic_id'];?>" selected="selected"><?php echo $assigned_mechanic['name'];?></option> 
                <?php foreach($available_mechanic as $mechanic) { ?>
                  <option value="<?php echo $mechanic['admin_id'];?>"><?php echo $mechanic['name'];?></option> 
                <?php } ?>               
                </select>
                <?php echo form_error('mechanic','<span class="error">', '</span>'); ?>
              </div>              
              <div class="form-group">
                <label>Service<sup class="superr">*</sup></label>
                <select class="form-control select2" name="service[]" id="service" required multiple="multiple">
                <?php foreach($services as $service){?>
                  <option value="<?php echo $service['service_id']; ?>" 
                  <?php if (in_array($service['service_id'], $selected_service_arr)){?> selected="selected"<?php } ?>
                    ><?php echo $service['service_name'] ?></option>
                <?php }?>
                </select>
                  <?php echo form_error('service','<span class="error">', '</span>'); ?>
              </div>  
              
                                      
              </div>
              <!-- /.box-body -->
              <div class="box-footer">              
              <button type="submit" class="btn btn-sm btn-primary">Submit</button>
              </div>
            </form>
            </div>
        </div>
          <!-- /.box -->
          </div><!-- /.row -->  
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<script>

$('#service_date').datepicker({
  format: 'dd/mm/yyyy',
  startDate: new Date()
});

$( "#signupForm" ).validate( {
          rules: {
            car:"required", 
            mechanic:"required",
            service:"required",
            service_date: "required"          
            
          },
          messages: { 
            car: {required:"Car field is required"},
            mechanic:{required:"Mechanic field is required"}, 
            service:{required:"Service field is required"},
            service_date: {required:"Service Date field is required"}
            
            
          },
          errorElement: "em",
          
          highlight: function ( element, errorClass, validClass ) {
            $( element ).parents( ".form-control" ).addClass( "has-error" ).removeClass( "has-success" );
          },
          unhighlight: function (element, errorClass, validClass) {
            $( element ).parents( ".form-control" ).addClass( "has-success" ).removeClass( "has-error" );
          }
        } );


$('#service_date').on('changeDate', function(event, date) {
  var content ='<option value="">Select</option>';  
    var date = $('#service_date').val();
    
  $.ajax({
      type:'POST',
      url :'<?php echo base_url('admin/job/getmechanicList');?>',
      data:'date='+date,
      dataType:'json',
      success:function(result){       
      $.each( result.new_mechanic_list, function( key, value ) {
         content+='<option value="'+value.admin_id+'">'+value.first_name+' '+value.last_name+'</option>';       
        $("#mechanic").html(content);
      }); 
      } ,error:function(){     

      }
     });
});

$(".select2").select2();

// $(document).ready(function(){
//   $("#mechanic").html('<option value="">Select</option>');
// });
  
</script>