<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 Type
            </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 Type</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 Type
         </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>Image</th>
                        <th>Group</th>
                        <th>Action</th>

                     </tr>
                  </thead>
                  <tbody>
                     <?php if(!empty($vehicletype)){  $count=1;
                        foreach($vehicletype as $vehicletype){
                           ?>
                           <tr>
                              <td> <?php echo output($count); $count++; ?></td>
                              <td> <?php echo output($vehicletype['v_type']); ?></td>
                              <td> <?php echo output($vehicletype['image']); ?></td>
                              <td><?php echo output($vehicletype['gr_name']); ?></td>
                              <!--  <img src="../../assets/uploads/<?php echo $vehicletype['image']; ?>" width="100" height="100"> -->

                              <td>

                                 <a class="icon" href="<?php echo base_url(); ?>vehicle/vehicletype_delete/<?php echo output($vehicletype['id']); ?>">
                                    <i class="fa fa-trash text-danger"></i>
                                 </a> | 
                                 <a class="icon" href="<?php echo base_url(); ?>vehicle/vehicletype_edit/<?php echo output($vehicletype['id']); ?>">
                                    <i class="fa fa-edit"></i>
                                 </a>
                              </td>

                           </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 Type</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" enctype="multipart/form-data" action="<?php echo base_url(); ?>vehicle/addtype">
                  <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" onkeydown="return /[a-z ]/i.test(event.key)" name="v_type" id="v_type" required="true" placeholder="Enter Type Name">
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="geo_name" class="col-sm-4 col-form-label">Image</label>
                        <div class="form-group col-sm-8">
                           <input type="file" class="form-control" name="image" id="image" required="true" placeholder="Enter Group Name" accept=".jpg,.jpeg,.png" onchange="validateFileType1()"/>

                           <span  class="bg-gradient-success btn-xs">Image sholud be in 2MB  and jpg jpeg png format</span>
                        </div>
                     </div>
                     <div class="form-group row">
                        <label for="geo_name" class="col-sm-4 col-form-label">Side Image</label>
                        <div class="form-group col-sm-8">
                           <input type="file" class="form-control" name="sideimage" id="sideimage"  required="true"  accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
                           <span  class="bg-gradient-success btn-xs">Image sholud be in 2MB  and jpg jpeg png format</span>
                        </div>

                     </div>

                     <div class="form-group">
                        <label for="vt_group" class="form-label">Vehicle Group</label>
                        <select id="vt_group" name="vt_group" class="form-control " required="">
                         <option value="">Select Vehicle Group</option> 
                         <?php if(!empty($v_group)) { foreach($v_group as $v_groupdata) { ?>
                            <option <?= (isset($vehicledetails[0]['v_group']) && $vehicledetails[0]['v_group'] == $v_groupdata['gr_id'])?'selected':''?> value="<?= $v_groupdata['gr_id'] ?>"><?= $v_groupdata['gr_name'] ?></option> 
                         <?php } } ?>
                      </select>
                   </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>
         <?php if (isset($success_msg)) { echo $success_msg; } ?>
      </div>

   </div>
</div>
<script type="text/javascript">
  function validateFileType(){
    var fileName = document.getElementById("sideimage").value;
const oFile = document.getElementById("sideimage").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>

if (oFile.size > 2097152) // 2 MiB for bytes.
{
   event.target.value = '';
   alert("File size must under 2MiB!");
   return;
}
var idxDot = fileName.lastIndexOf(".") + 1;
var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();

if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
         }else{
           event.target.value = '';
           alert("Only jpg/jpeg and png files are allowed!");


        }   
     }
  </script>

  <script type="text/javascript">
     function validateFileType1(){
       var fileName = document.getElementById("image").value;
        const oFile = document.getElementById("image").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>

if (oFile.size > 2097152) // 2 MiB for bytes.
{
   event.target.value = '';
   alert("File size must under 2MiB!");
   return;
}
var idxDot = fileName.lastIndexOf(".") + 1;
var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
         }else{
           event.target.value = '';
           alert("Only jpg/jpeg and png files are allowed!");


        }   
     }
  </script>