<div class="content-header">
   <div class="container-fluid">
      <div class="row mb-2">
         <div class="col-sm-6">
            <h1 class="m-0 text-dark">Vehicle Group
            </h1>
         </div>
         <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
               <li class="breadcrumb-item"><a href="<?= base_url(); ?>/dashboard">Dashboard</a></li>
               <li class="breadcrumb-item active">Vehicle Group</li>
            </ol>
         </div>
      </div>
      <?php if(userpermission('lr_vech_group_action')) { ?>
         <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal-add">
            Add New Group
         </button>
      <?php } ?>
   </div>
</div>
<section class="content">
   <div class="container-fluid">
      <div class="card">
         <div class="card-body p-0">
            <div class="table-responsive">
               <table id="vehiclelisttbl" class="table card-table table-vcenter text-nowrap">
                  <thead>
                     <tr>
                        <th class="w-1">S.No</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Per Kilometer Price</th>
                        <th>Waiting Per Mintue Price</th>
                        <th>Waiting Time</th>
                        <th>Waiting Grace Time</th>
                        <!-- <th>Created Date</th> -->
                        <?php if(userpermission('lr_vech_group_action')) { ?>
                           <th>Action</th>
                        <?php } ?>
                     </tr>
                  </thead>
                  <tbody>
                     <?php if(!empty($vehiclegroup)){  $count=1;
                        foreach($vehiclegroup as $vehiclegroupdata){
                           ?>
                           <tr>
                              <td> <?php echo output($count); $count++; ?></td>
                              <td> <?php echo output($vehiclegroupdata['gr_name']); ?></td>
                              <td> <?php echo output($vehiclegroupdata['gr_desc']); ?></td>
                              <td> <?php echo output($vehiclegroupdata['gr_price']); ?></td>
                              <td> <?php echo output($vehiclegroupdata['gr_waiting_price']); ?></td>
                              <td> <?php echo output($vehiclegroupdata['gr_waiting_time'].'min'); ?></td>
                              <td> <?php echo output($vehiclegroupdata['gr_grace_time'].'min'); ?></td>
                              <!-- <td> <?php echo output($vehiclegroupdata['gr_created_date']); ?></td> -->
                              <?php if(userpermission('lr_vech_group_action')) { ?>
                                 <td>
                                    <a class="icon" href="<?php echo base_url(); ?>tracking/livestatus/<?php echo output($vehiclegroupdata['gr_id']); ?>">
                                       <i class="fa fa-map"></i> |  
                                       <a class="icon" href="<?php echo base_url(); ?>vehicle/vehiclegroup_delete/<?php echo output($vehiclegroupdata['gr_id']); ?>">
                                          <i class="fa fa-trash text-danger"></i>
                                       </a> |
                                       <a class="icon" href="<?php echo base_url(); ?>vehicle/vehiclegroup_edit/<?php echo output($vehiclegroupdata['gr_id']); ?>">
                                          <i class="fa fa-edit"></i>
                                       </a>
                                    </td>
                                 <?php } ?>
                              </tr>
                           <?php } } ?>
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <div class="modal fade show" id="modal-add" aria-modal="true">
         <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <h4 class="modal-title">Add New Group</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">×</span>
                  </button>
               </div>
               <div class="modal-body">
                  <form id="geofencesave" method="post" action="<?php echo base_url(); ?>vehicle/addgroup">
                     <div class="card-body">
                        <div class="form-group row">
                           <label for="geo_name" class="col-sm-4 col-form-label">Name</label>
                           <div class="form-group col-sm-8">
                              <input type="text" class="form-control" maxlength="50" name="gr_name" id="gr_name" required="true" placeholder="Enter Group Name" onkeydown="return /[a-z ]/i.test(event.key)">
                           </div>
                        </div>
                        <div class="form-group row">
                           <label for="Cateogry" class="col-sm-4 col-form-label">Description</label>
                           <div class="form-group col-sm-8">
                              
                             <textarea class="form-control" maxlength="100" name="gr_desc" id="gr_desc"  placeholder="Enter  Description"  onkeydown="return /[a-z ]/i.test(event.key)" required></textarea> 
                          </div>
                       </div>
                       <div class="form-group row">
                        <label for="Cateogry" class="col-sm-4 col-form-label">Price Per KM After 1.5km</label>
                        <div class="form-group col-sm-8">
                           <input type="number" class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"type = "number"
                           maxlength = "5" name="gr_price" id="gr_price" required="true" placeholder="Enter Price">
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="Cateogry" class="col-sm-4 col-form-label">Waiting Per Mintue Time</label>
                        <div class="form-group col-sm-8">
                           <input type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"type = "number"maxlength = "5"
                           class="form-control"  name="gr_waiting_time" id="gr_waiting_time" required="true" placeholder="Enter Waiting Time">
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="Cateogry" class="col-sm-4 col-form-label">Waiting Price</label>
                        <div class="form-group col-sm-8">
                           <input type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                           type = "number"
                           maxlength = "5" class="form-control"  name="gr_waiting_price" id="gr_waiting_price" required="true" placeholder="Enter Waiting Price">
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="Cateogry" class="col-sm-4 col-form-label">Waiting Grace Time</label>
                        <div class="form-group col-sm-8">
                           <input type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                           type = "number"
                           maxlength = "3" class="form-control" min="1" name="gr_grace_time" id="gr_grace_time" required="true" placeholder="Enter Grace Price">
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="Cateogry" class="col-sm-4 col-form-label">Fixed KM</label>
                        <div class="form-group col-sm-8">
                           <input type="number" class="form-control"  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                           type = "number"
                           maxlength = "3" name="gr_fixed_km" id="gr_fixed_km" required="true" placeholder="Enter Fixed KM">
                        </div>
                     </div>
                     
                     <div class="form-group row">
                        <label for="Cateogry" class="col-sm-4 col-form-label">Up to 1.5 Fixed Amount day time</label>
                        <div class="form-group col-sm-8">
                           <input type="number" class="form-control"  name="gr_fixed_amount" id="gr_fixed_amount" required="true" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                           type = "number"
                           maxlength = "5" placeholder="Enter Fixed Amount">
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="Cateogry" class="col-sm-4 col-form-label">Up to 1.5 at night time</label>
                        <div class="form-group col-sm-8">
                           <input type="number" class="form-control"  name="gr_mid_night_charge" id="gr_mid_night_charge" required="true" placeholder="Enter night charge"oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                           type = "number"
                           maxlength = "5">
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="Cateogry" class="col-sm-4 col-form-label">Extra amount in night in %</label>
                        <div class="form-group col-sm-8">
                           <input type="number" class="form-control"  name="gr_mid_night_extra" id="gr_mid_night_extra" required="true" placeholder="Enter night charge  Amount in %"oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                           type = "number"
                           maxlength = "5">
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="Cateogry" class="col-sm-4 col-form-label">Extra charge start time from</label>
                        <div class="form-group col-sm-8">
                           <input type="time" class="form-control"  name="gr_mid_night_time_start" id="gr_mid_night_time_start" required="true" placeholder="Enter start time" onkeydown="return '/^([01][0-9]|2[0-3]):([0-5][0-9])$/'.test(event.key)">
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="Cateogry" class="col-sm-4 col-form-label">Extra charge end time </label>
                        <div class="form-group col-sm-8">
                           <input type="time" class="form-control"  name="gr_mid_night_time_to" id="gr_mid_night_time_to" required="true" placeholder="Enter time">
                        </div>
                     </div>
                     
                     
                  </div>
               </div>
               <div class="modal-footer justify-content-between">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="submit" id="geofenvaluesave" class="btn btn-primary">Save</button>
               </div>
            </form>
         </div>
      </div>
   </div>