<form name="vehicleForm" id="vehicleForm">
    <div class="row">
        <div class="col-md-6">

            <div class="form-group">
                <label for="reg">Registration Plate</label>     
                <input type="text" class="form-control col-md-4" name="reg" id="reg" style="text-transform:uppercase" />        
            </div>

            <div class="form-group">
                <label class="control-label" for="desc">Description</label>
                <input type="text" class="form-control col-md-10"  name="desc" placeholder="E.g. Blue ford van">
            </div>

            <div class="form-group">
                <label class="control-label" for="desc">Engine Size</label>
                <select name="engine" class="form-control autocomplete col-md-12" data-placeholder="Select">
                    <option value="">Select</option>
                    <option value="petrol_u1400">Petrol/Hybrid 1400cc or less</option>
                    <option value="petrol_u2000">Petrol/Hybrid  1401cc to 2000cc</option>
                    <option value="petrol_02000">Petrol/Hybrid  Over 2000cc</option>
                    <option value="diesel_u1600">Diesel Under 1600cc</option>
                    <option value="diesel_u2000">Diesel 1600cc to 2000cc</option>
                    <option value="diesel_o2000">Diesel Over 2000cc</option>
                    <option value="lpg_u1400">LPG 1400cc or less</option>
                    <option value="lpg_u2000">LPG 1401cc to 2000cc</option>
                    <option value="lpg_02000">LPG Over 2000cc</option>
                    <option value="electric">Fully Electric</option>
                </select>
            </div>

            <div class="form-group">
                <label class="control-label" for="miles">Initial Mileage</label>
               <input type='number' pattern='[0-9]{10}'  class="form-control col-md-4"  name="miles">
            </div>


        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label class="control-label" for="tDate">Fuel Type</label>                
                <select name="fuel" class="form-control autocomplete col-md-12" data-placeholder="Select">
                    <option value="">Select</option>
                    <option value="Petrol/Hybrid">Petrol/Hybrid</option>
                    <option value="Diesel">Diesel</option>
                    <option value="LPG">LPG</option>
                    <option value="Electric">Electric</option>
                </select>               
            </div>

            <div class="form-group">
                <label class="control-label" for="tDate">Tax Due Date</label>
                <div class="input-group"><input class="form-control datepicker col-md-6" type="text" name="tdate" id="tDate"  /></div>
            </div>

            <div class="form-group">
                <label class="control-label" for="iDate">Insurance Due Date</label>
                <div class="input-group"><input class="form-control datepicker col-md-6" type="text" name="idate" id="iDate" /></div>
            </div>

            <div class="form-group">
                <label class="control-label" for="mot">MOT Due Date</label>
                <div class="input-group"><input class="form-control datepicker col-md-6" type="text" name="mot" id="mot" /></div>
            </div>

        </div>
    </div>
    <input type="hidden" name="FUNCTION" style="display: " value="createVehicle">
</form>


 
<script>
$(".datepicker").pickadate({
    format: "dd-mm-yyyy",
    formatSubmit: "dd-mm-yyyy",
    selectMonths: true,
  });

  $(".autocomplete").select2({ theme: "bootstrap" });
$('#popupBox .modal-header').html('<a href="javascript:void(0)" class="sa">New Vehicle</a>')
$('#popupBox .modal-footer').html('<a id="btnConfirm" href="javascript:void(0)" class="btn btn-info mr-5">Save</a><a id="btnCancel" href="javascript:void(0)" class="btn btn-danger">Cancel</a>');
$("#btnCancel").click(function(){$('#popupBox').modal('hide');})

$("#btnConfirm").click(function(){
var reg=$("#vehicleForm input[name=reg]").val();
var engine=$("#vehicleForm select[name=engine]").val();
var fuel=$("#vehicleForm select[name=fuel]").val();
//alert(reg)
if(reg==="" || engine==="" || fuel===""){
response('danger','YOU MUST ENTER A VALID VEHICLE REGISTRATION, ENGINE SIZE AND FUEL TYPE');
}
else{$("#vehicleForm").submit()}
})

$("#vehicleForm").submit(function(event){
    event.preventDefault();
    var reg=$("#vehicleForm input[name=reg]").val();
    $.ajax({
    url:'includes/finance/finance_functions.php',
    type:'POST',
    data:$('#vehicleForm').serialize(),
    success:function(result){//debug(result)
        if($.trim(result)=="success"){
            response('success','Your vehicle has been saved successfully');
            $('#vReg').append('<option value="'+reg+'" SELECTED>'+reg+'</option>');
            $('#popupBox').modal('hide')
        }
    }
    });
});

</script>