<div class="content-wrapper">
 <section class="content-header">
  <h1>
    <?= $page_title ?>
    <small><?= $page_desc ?></small>
  </h1>
  <ol class="breadcrumb">
   <li><a href="<?= base_url() ?>"><i class="fa fa-star-o" aria-hidden="true"></i>Home</a></li>
   <li><?= $menu ?></li>
   <li class="active"><?= $sub_menu ?></li>
 </ol>
</section>
<section class="content">
  <div class="row">
     <div class="col-md-12">
      <?php if($this->session->flashdata('message')) { 
        $flashdata = $this->session->flashdata('message'); ?>
        <div class="alert alert-<?= $flashdata['class'] ?>">
         <button class="close" data-dismiss="alert" type="button">×</button>
         <?= $flashdata['message'] ?>
       </div>
     <?php } ?>
   </div>
   <div class="col-md-12">
    <div class="box box-warning">
     <div class="box-header with-border">
       <h3 class="box-title">Driver Details</h3>
     </div>
      <form role="form" action="<?=base_url('Driver/addDriver')?>" method="post" class="validate" data-parsley-validate="" enctype="multipart/form-data">
        <div class="box-body">
          <div class="col-md-6">
           <div class="form-group">
             <label>First Name</label>
             <input type="text" class="form-control required" data-parsley-trigger="change"  
             data-parsley-minlength="2"  data-parsley-pattern="^[a-zA-Z\ . ! @ # $ % ^ & * () + = , \/]+$" required="" name="first_name"  placeholder="Enter Driver Name">
             <span class="glyphicon  form-control-feedback"></span>
           </div>
           <div class="form-group">
             <label>Last Name</label>
             <input type="text" class="form-control required" data-parsley-trigger="change"  
             data-parsley-minlength="2"  data-parsley-pattern="^[a-zA-Z\ . ! @ # $ % ^ & * () + = , \/]+$" required="" name="last_name"  placeholder="Enter Driver Name">
             <span class="glyphicon  form-control-feedback"></span>
           </div>
           <div class="form-group">
             <label>Phone</label>
             <input type="number" class="form-control required" data-parsley-trigger="change"  
               data-parsley-minlength="2"  required="" name="phone" placeholder="Enter Driver Phone Number">
               <span class="glyphicon  form-control-feedback"></span> 
           </div>
           <div class="form-group">
             <label>Email</label>
             <input type="email" class="form-control required" data-parsley-trigger="change"  
             data-parsley-minlength="2"  required="" name="email_id" placeholder="Enter Driver email ID">
             <span class="glyphicon  form-control-feedback"></span>
           </div> 
           <div class="form-group">
             <label>Password</label>
             <input type="password" class="form-control required" data-parsley-trigger="change"  
             data-parsley-minlength="2"  required="" name="password"  placeholder="Enter Pasword">
             <span class="glyphicon  form-control-feedback"></span>
           </div>   
          <div class="form-group">
            <label>Address</label>
            <input type="text" class="form-control required" data-parsley-trigger="change"  
             data-parsley-minlength="2" required="" name="address"  placeholder="Enter Driver Address">
            <span class="glyphicon  form-control-feedback"></span>
          </div>
          <div class="form-group">
            <label>City</label>
            <input type="text" class="form-control required" data-parsley-trigger="change" 
             data-parsley-minlength="2" required="" 
             name="city" placeholder="Enter Driver City">
            <span class="glyphicon  form-control-feedback"></span>
          </div>
          <div class="form-group">
            <label>State</label>
            <input type="text" class="form-control required" data-parsley-trigger="change"  
             data-parsley-minlength="2" required="" name="state" placeholder="Enter Driver State">
            <span class="glyphicon  form-control-feedback"></span> 
          </div>
          <div class="form-group">
            <label>Online Timing</label>
            <div style="display: flex;">
              <div class="clockpicker" data-placement="right" data-align="top" 
                   data-autoclose="true"  style="padding-right: 5px;width: 50%;">
                <div class="input-group date" id='online_start_time'>
                  <input type="text" class="form-control required" data-parsley-trigger="change" data-parsley-minlength="2" required="" name="online_start_time" placeholder="Pick Online Check In Time" autocomplete="off">
                  <div class="input-group-addon">
                    <i class="fa fa-clock-o"></i>
                  </div>
                </div>
              </div>  
              <div class="clockpicker" data-placement="right" data-align="top" 
                   data-autoclose="true"  style="padding-left: 5px;width: 50%;">
                <div class="input-group date" id='online_end_time'>
                  <input type="text" class="form-control required" data-parsley-trigger="change" data-parsley-minlength="2" required="" name="online_end_time" placeholder="Pick Online Check Out Time" autocomplete="off">
                  <div class="input-group-addon">
                    <i class="fa fa-clock-o"></i>
                  </div>
                </div>
              </div>  
            </div>  
          </div>
        </div>
        <div class="col-md-6">
         <div class="form-group">
            <label>Profile Picture</label>
            <div class="col-md-12">
              <div class="col-md-3">
                <img id="profile_image" src="" onerror="this.src='<?=base_url("assets/images/user_avatar.jpg")?>'" height="75" width="75" />
              </div>
              <div class="col-md-9" style="padding-top: 25px;">
                <input name="profile_image" type="file" accept="image/*" class="required" onchange="setImg(this,'profile_image')" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label style="padding-top:10px;">Licence</label>
            <div class="col-md-12">
              <div class="col-md-3">
                <img id="licence_img" src="" onerror="this.src='<?=base_url("assets/images/no_image.png")?>'" height="75" width="75" />
              </div>
              <div class="col-md-9" style="padding-top: 25px;">
                <input name="licence" type="file" accept="image/*" class="required" onchange="setImg(this,'licence_img')" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label style="padding-top:12px;">Licence Number</label>
            <input type="text" class="form-control required" data-parsley-trigger="change"  
            data-parsley-minlength="2"  required="" name="licence_number"  placeholder="Enter Driver Licence Number">
            <span class="glyphicon  form-control-feedback"></span>
          </div>
          <div class="form-group">
            <label>Licence Expiry Date</label>
            <div class="input-group date" data-provide="datepicker">
              <input id="datepicker" type="text" class="form-control required" data-parsley-trigger="change" data-parsley-minlength="2" required="" name="licence_exp_date" placeholder="Pick Licence Expiry Date" autocomplete="off">
              <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
              </div>
            </div>
          </div> 
          <div class="form-group">
            <label>Active Location</label>
            <input type="text" class="form-control required" data-parsley-trigger="change" required="" 
                   id="pickup_location" name="active_location" placeholder="Select Active Location">
            <span class="glyphicon  form-control-feedback"></span>
          </div>   
          <?php if($this->session->userdata['user_type'] == 1){ ?>
            <div class="form-group">
              <label>Company</label>
              <select name="company_id" class="form-control required" data-parsley-trigger="change" required>
                <option selected disabled>Select Company</option>
                <?php 
                  if(!empty($companies)){
                    foreach ($companies as $company) {
                      echo '<option value="'.$company->company_id.'">'.$company->company_name.'</option>';
                    } 
                  }
                ?>
              </select> 
            </div>
          <?php }else{ ?>
            <input type="hidden" name="company_id" value="<?= $this->session->userdata['id'] ?>">
          <?php } ?>
        <div class="form-group">
            <label>Select Vehicle Type</label>
            <select name="vehicle_id" class="form-control required" data-parsley-trigger="change" required>
              <option selected disabled>Select Vehicle Type</option>
              <?php 
                if(!empty($vehicles)){
                  foreach ($vehicles as $vehicle) {
                    echo '<option value="'.$vehicle->vehicle_id.'">'.$vehicle->vehicle_type.'</option>';
                  } 
                }
              ?>
            </select> 
          </div>
        <div id="vehicleModelCont" class="form-group hide">
            <label>Select Vehicle Model</label>
            <select name="vehicle" class="form-control required" data-parsley-trigger="change" required>
              <option selected disabled>Select Vehicle Model</option>
            </select> 
          </div>
        </div> 
        <div class="col-md-12" style="text-align: center; padding-top: 20px;">          
          <div class="box-footer">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>        
        </div> 
      </form>
    </div>
  </section>
</div>