<style type="text/css">
    .error{
        color: red;
    }
</style>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets-bustracking/css/style-drivers.css">
        <main class="common_margin" id="main"> 
            <div class="row dash-main-row">
                <div class="col-md-10 col-lg-10 p-0">
                    
                    <a href="<?php echo base_url()?>drivers">
                            <button type="button" class="btn btn-dark deleted-btn btn-sm" >Back</button>
                        </a> 
                    <div class="block-head">
                        <h3 class="dash-tab-head"><?php echo $title; ?></h3>                    
                    </div>
                   <?php $firstname=$lastname=$name= $contact_number= $licence= $dob= $address= $image= $doc= $doc2= $doc3 = ''; 
                    if ($driver_id > 0) {
                        if (isset($detailsHere) && !empty($detailsHere)) {
                          foreach ($detailsHere as $key => $value) {
                                $name =explode(' ', $value['name']) ;
                                $firstname = $name[0];
                                $lastname = $name[1];
                                $contact_number = $value['contact_number'];
                                $licence = $value['licence'];
                                $dob = $value['dob'];
                                $address = $value['address'];
                                $image = str_replace('assets-bustracking/images/driver_images/', '', $value['image']);
                                $doc = str_replace('assets-bustracking/images/driver_images/', '', $value['document1']);
                                $doc2 = str_replace('assets-bustracking/images/driver_images/', '', $value['document2']);
                                $doc3 = str_replace('assets-bustracking/images/driver_images/', '', $value['document3']);
                                

                            }
                        }
                    } ?>
            <form action="<?php echo base_url() ?>add-edit-driver/<?php echo $driver_id ?>"  method="post" id="adddriver" enctype="multipart/form-data"> 
                    <div class="input-row"> 
                                <div class="input-wrap">
                                    <label for="">First name <span class="text-danger font-weight-bold">*</span></label>
                                    <input type="text" placeholder="First name" class="form-control add-drivers-input" name="first_name" value="<?php echo $firstname ?>">
                                </div>
                                <div  class="input-wrap">
                                    <label for="">Last Name<span class="text-danger font-weight-bold">*</span></label>
                                    <input type="text" placeholder="Last Name" class="form-control add-drivers-input" name="last_name" value="<?php echo $lastname ?>">
                                </div> 
                                <div  class="input-wrap">
                                    <label for="">Driver's License Number<span class="text-danger font-weight-bold">*</span></label> 
                                    <input type="hidden" name="driver_id" value="<?php echo $driver_id; ?>">
                                    <input type="text" placeholder="Driver's License No" class="form-control add-drivers-input" name="licence" value="<?php echo $licence ?>">
                                </div>
                                <div  class="input-wrap">
                                    <label for="">Contact <span class="text-danger font-weight-bold">*</span></label>
                                    <input type="text" placeholder="Contact" class="form-control add-drivers-input" name="contact" value="<?php echo $contact_number ?>" maxlength="10">
                                </div>
                                <div  class="input-wrap">
                                    <label for="">Date of birth<span class="text-danger font-weight-bold">*</span></label> 
                                    <input type="text" placeholder ="dd-mm-yyyy" name="dob" class="form-control add-drivers-input add-dob" id="dob" value="<?php echo $dob ?>"> 
                                </div>                                
                                <div  class="input-wrap">
                                    <label for="">Address <span class="text-danger font-weight-bold">*</span></label>
                                    <input type="text" placeholder="Address" class="form-control add-drivers-input" name="address" value="<?php echo $address ?>">
                                </div>
                                <?php if ($driver_id > 0) {?>

                                <div class="input-wrap" style="flex-basis: 90%;margin-right: 20px;">
                                   <label for="" class="mt-2">Change Password</label>
                                   <input type="checkbox" placeholder="Address" class="form-control add-drivers-input" name="address" value="<?php echo $address ?>" style="float: left;width: inherit;flex: auto;margin-right: 30px;" id="check-box">
                                </div>    
                                <style type="text/css">
                                    .pass-change-data{
                                        display: none;
                                    }
                                </style>
                                <?php } ?>
                                
                                <div class="input-wrap pass-change-data">
                                        <div class="form-group">
                                            <label for="">Password<span class="text-danger font-weight-bold"> *</span></label>
                                            <div class="password-wrp">
                                                <input type="password" name="password" id="password" class="form-control paswd" >
                                                <span class="passwrd-icon icon-y"><i class="far fa-eye"></i></span>
                                            </div>
                                            <label style="display:none" class="form_err" id='password_error'></label>
                                        </div>		
                                </div> 
                                <div class="input-wrap pass-change-data">
                                    <div class="form-group">
                                        <label for="">Confirm Password<span class="text-danger font-weight-bold"> *</span></label>
                                        <div class="password-wrp">
                                            <input type="password" id="confirm-password" name="confirm_password" class=" form-control password_hide_c" >
                                            <span class="con-pass icon-y"><i class="far fa-eye"></i></span>
                                        </div>
                                        <label style="display:none" class="form_err" id='confirm-password_error'></label>
                                    </div> 
                                </div> 
                                <div  class="input-wrap">
                                    <label for="">Add Image <span class="text-danger font-weight-bold">*</span></label>
                                    <div class="input-group add-drivers-input">
                                        <div class="custom-file">
                                        <input type="file" class="custom-file-input img-file" id="inputGroupFile00" name="image">
                                        <label name="image" class="custom-file-label img-data" for="inputGroupFile00">
                                            <?php echo $image ? $image: 'Add Image' ?> </label>
                                        </div>
                                    </div>
                                    <label id="inputGroupFile00-error" class="error" for="inputGroupFile00"></label>
                                </div>
                                
                                <div  class="input-wrap">
                                        <label for="">Add Document <span class="text-danger font-weight-bold">*</span></label>
                                        <div class="input-group add-drivers-input">
                                            <div class="custom-file add-drivers-input">
                                                <input type="file" class="custom-file-input add-drivers-input doc2-file" id="inputGroupFile02" name="doc2">
                                                <label class="custom-file-label doc2-data" for="inputGroupFile02"><?php echo $doc2 ? $doc2: 'Document 2' ?> </label>
                                            </div>
                                        </div>
                                        <label id="inputGroupFile02-error" class="error" for="inputGroupFile02"></label>
                                    </div>
                                <div  class="input-wrap">
                                    <label for="">Add Document <span class="text-danger font-weight-bold">*</span></label>
                                    <div class="input-group add-drivers-input">
                                        <div class="custom-file">
                                        <input type="file" class="custom-file-input doc-file" id="inputGroupFile01" name="doc1">
                                        <label class="custom-file-label doc-data" for="inputGroupFile01"><?php echo $doc ? $doc: 'Document 1' ?> </label>
                                        </div>
                                    </div>
                                    <label id="inputGroupFile01-error" class="error" for="inputGroupFile01"></label>
                                </div>  
                                    <div  class="input-wrap">
                                        <label for="">Add Document <span class="text-danger font-weight-bold">*</span></label>
                                        <div class="input-group add-drivers-input">
                                            <div class="custom-file">
                                                    <input type="file" class="custom-file-input add-drivers-input doc3-file" id="inputGroupFile03" name="doc3">
                                                    <label class="custom-file-label doc3-data" for="inputGroupFile03"><?php echo $doc3 ? $doc3: 'Document 3' ?> </label>
                                            </div>
                                        </div>
                                        <label id="inputGroupFile03-error" class="error" for="inputGroupFile03"></label>
                                    </div>
                                    <div class="input-wrap">
                            <button type="submit" name="submit" class="btn btn-primary student-update-btn assign-btn" ><?php echo $title; ?></button>

                            </div>
                                </div>
                            </div>
                           
                </form>
            </div>
            </div>
        </main> 
        <!--End right-top side-->   
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script defer src="<?php echo base_url(); ?>assets-bustracking/js/main.js"></script> 

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<style type="text/css">
   .error {
    color: red;
    font-size: 14px;
    /* position: absolute; */
    margin: 0;
}
    .add-drivers-input {
    margin-bottom: 0% !important;
    height: 34px;
}
.mb-4 {
    position: relative;
}
/*.custom-file{
    position: relative;
    margin-bottom: 10px;
} 
label#inputGroupFile00-error {
    position: absolute;
    z-index: 99;
    bottom: -20px;
}*/
.custom-file-label{
    overflow: hidden;
    background: #f2f0f0;
}
</style>
<script>
    $(document).ready(function(){

        jQuery.validator.addMethod("fullnameregex", function(value, element) {
            return this.optional(element) || /^[a-zA-Z ]{1,30}$/.test(value);
        }, 'Please enter alpha characters only ');

        jQuery.validator.addMethod("phonenumberregex", function(value, element) {
            return this.optional(element) || /^[0-9]{10}$/.test(value);
        }, 'Please enter a 10 digits valid phone number.');
        
        jQuery.validator.addMethod("inputregx", function(value, element) {
            return this.optional(element) || /^[a-zA-Z0-9 ]{3,50}$/.test(value);
        }, 'Please enter alpha and numeric characters only ');

                
        jQuery.validator.addMethod("patternregx", function(value, element) {
            return this.optional(element) || /^[A-Z]{2}[0-9]{11}$/.test(value);
            }, 'Please enter Proper Licence Number');

        jQuery.validator.addMethod("passwordregex", function(value, element) {
            return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$#!%*?&])[A-Za-z\d@$!%*#?&]{6,16}$/.test(value);
          }, 'Your password must be atleast 6 characters long, which inculdes one upper case, one numerical value and one special character.');

       
        $("#adddriver").validate({
            rules: {
                first_name: {
                    required: true,
                    fullnameregex: true
                },
                last_name:{
                    required: true,
                    fullnameregex: true
                },
                licence:{
                    required:true                    
                },
                contact:{
                    required:true,
                    phonenumberregex:true
                },
                dob:{
                    required:true
                },
                address:{
                    required:true,
                    inputregx:true
                },
                password:{
                    minlength: 6,
                    maxlength: 12,
                    passwordregex: true

                },
                confirm_password: {
                    required: true,
                    equalTo: '[name="password"]'
                },
                image:{
                    required: function(element){
                        var name = $('.student-update-btn').text();
                        if (name == 'Add Driver') {
                            return true;
                        }else{
                            return false;
                        }
                    }  
                },
                doc2:{
                    required: function(element){
                        var name = $('.student-update-btn').text();
                        if (name == 'Add Driver') {
                            return true;
                        }else{
                            return false;
                        }
                    },
                    extension: "pdf"
                },
                doc1:{
                    required: function(element){
                        var name = $('.student-update-btn').text();
                        if (name == 'Add Driver') {
                            return true;
                        }else{
                            return false;
                        }
                    },
                    extension: "pdf"
                },
                doc3:{
                    required: function(element){
                        var name = $('.student-update-btn').text();
                        if (name == 'Add Driver') {
                            return true;
                        }else{
                            return false;
                        }
                    },
                    extension: "pdf"
                }

            },
            messages: {

                first_name: {
                    required: "Please Enter Name"
                },
                last_name:{
                    required: "Please Enter Last Name"
                },
                licence:{
                    required:"Enter a Valid licence"
                },
                contact:{
                    required:"Enter Valid Mobile Number"
                },
                dob:{
                    required:"Please Enter Date of Birth"
                },
                address:{
                    required:"Please Enter Address"
                },
                image:{
                    required:"Add your Photo"
                },
                doc1:{
                    required:"Enter Your Document",                  
                    extension:"Accept Only PDF"
                },
                doc2:{
                    required:"Enter Your Second Document",                  
                    extension:"Accept Only PDF"
                },
                doc3:{
                    required:"Enter Your Third Document",                  
                    extension:"Accept Only PDF"
                }                

            },
            submitHandler: function(form) {
                form.submit();
            }
        });



          
    });

   $('.img-file').change(function (e) {
        $('.img-data').text(e.target.files[0].name); 
   });
   $('.doc-file').change(function (e) {
        $('.doc-data').text(e.target.files[0].name); 
   });
   $('.doc3-file').change(function (e) {
        $('.doc3-data').text(e.target.files[0].name); 
   });
   $('.doc2-file').change(function (e) {
        $('.doc2-data').text(e.target.files[0].name); 
   });

   //change password check box

   $('input[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $('.pass-change-data').show();
        }
        else if($(this).prop("checked") == false){
            $('.pass-change-data').hide();
        }
    });


   $("#dob").datepicker( { minDate: '-30Y',dateFormat: 'dd-mm-yy', maxDate: '-18Y' });

</script>