@extends('layouts.admin')
@section('content')

<style type="text/css">
   .hide{display: none;}
</style>
<div class="main-content-wrap sidenav-open d-flex flex-column">
   <!-- ============ Body content start ============= -->
   <div class="main-content">
      <div class="row">
         <!-- ============Breadcrumb Pagination ============= -->
         <div class="col-sm-11">
            <ul class="breadcrumb">
               <li> <a href="{{url('/admin/instructors')}}">Instructors</a></li>
               <li>Add Vehicle Info</li>
            </ul>
         </div>
         <!-- ============Back Button ============= -->
         <div class="col-sm-1 back-arrow">
            <div class="text-center">
               <a href="javascript:history.back()"> <i class="fas fa-arrow-circle-left fa-1x">Back</i> </a>
            </div>
         </div>
      </div>
      <!-- ========================= -->
      <div class="row">
         <div class="card text-left">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-3">
                     <h3 class="mb-3" style="font-weight:700"> {{ ucwords($user->first_name.' '.$user->last_name)}} @if($user->status=='1')<span class="badge badge-success status-css user-status-css">{{"Active"}}</span>@elseif($user->status=='0')<span class="badge badge-danger status-css user-status-css">{{"Inactive"}}</span>@else<span class="badge badge-warning status-css">{{"Pending"}}</span>@endif<br>
                        <small style="font-size: 66%;">Instructor ID: {{$user->id}}</small>
                     </h3>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12" >
                     @include('admin.instructors.profile.submenu')
                  </div>
               </div>
               <form  method="post" action="{{route('admin.instructors/addVehicleInfo')}}" id="addVehicleInfo" >
                  @csrf
                  <div class="row py-3">
                     <!-- Account Information Form Start-->
                     <div class="col" >
                        <h3 class="text-blue fw-700 py-3">Add Vehicle Information</h3>
                        <input type="hidden" name="user_id" value="{{ Request::segment(6) }}">
                        <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                 <label for="gender" class="form-label">Vehicle Type <span class="text-danger">*</span></label>
                                 <select class="form-control" name="vehicle_type">
                                   <option value="">Select</option>
                                   <option value="1">Auto</option>
                                   <option value="2">Manual</option>
                                 </select>
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-vehicle_type"></p>
                              </div>
                            </div>
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label for="make" class="form-label">Make<span class="text-danger">*</span></label>
                                 <input type="text" class="form-control onlyIgnoreFirstSpace" id="make" name="make" placeholder="Make">
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-make"></p>
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label for="model" class="form-label">Model <span class="text-danger">*</span></label>
                                 <input type="text" class="form-control onlyIgnoreFirstSpace" name="model" id="model"  placeholder="Model">
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-model"></p>
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label for="gender" class="form-label">Fuel Type <span class="text-danger">*</span></label>
                                 <select class="form-control" name="fuel_type">
                                   <option value="">Select</option>
                                   <option value="1">Petrol</option>
                                   <option value="2">Diesel</option>
                                   <option value="3">Electric</option>
                                 </select>
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-fuel_type"></p>
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                 <label for="vnumber" class="form-label">Vehicle Number <span class="text-danger">*</span></label>
                                 <input type="text" class="form-control onlyIgnoreFirstSpace" name="vehicle_number" id="vnumber"  placeholder="Vehicle Number">
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-vehicle_number"></p>
                              </div>
                           </div>
                        </div>
                        <h3 class="text-blue fw-700 py-3">Add Driving Lessons</h3>
                        <div class="row">
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label class="form-label1">Rate less than 1 Hour <span class="text-danger">*</span></label>
                                 <div class="input-field">
                                 <input type="text" class="form-control form-beta-control ignoreZero" name="zero_to_one_hour_rate" placeholder="Rate less than 1 Hour">
                                    <i>$</i>
                                 </div>
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-zero_to_one_hour_rate"></p>
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label class="form-label1">Rate 1-5 Hours<span class="text-danger">*</span></label>
                                 <div class="input-field">
                                 <input type="text" class="form-control form-beta-control ignoreZero" name="one_to_five_hours_rate" placeholder="Rate 1-5 Hours">
                                    <i>$</i>
                                 </div>
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-one_to_five_hours_rate"></p>
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label class="form-label1">Rate 6-9 Hours<span class="text-danger">*</span></label>
                                 <div class="input-field">
                                 <input type="text" class="form-control form-beta-control ignoreZero" name="six_to_nine_hours_rate" placeholder=" Rate 6-9 Hours">
                                 <i>$</i>
                                 </div>
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-six_to_nine_hours_rate"></p>
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label class="form-label1">Rate 10+ Hours<span class="text-danger">*</span></label>
                                 <div class="input-field">
                                 <input type="text" class="form-control form-beta-control ignoreZero" name="ten_hours_rate" placeholder=" Rate 10+ Hours">
                                 <i>$</i>
                                 </div>
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-ten_hours_rate"></p>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col">
                        <h6 class="mt-30"><strong>Vehicle Image</strong></h6>
                        <div class="bg-white pad-15">
                           <div class="col-sm-6">
                              <div class="form-group">
                                 <label for="fileupload" class="form-label"><a class="btn-link" id="clickSelectFile" style="color: #000000; font-size: 14px; " href="javascript:;"><i class="fa fa-plus"></i> Upload Image</a> <span class="text-danger">*</span></label>
                                 <input type="file" id="fileupload" name="file" style="display:none" accept=".png,.jpg,.jpeg"/>
                              </div>
                              <div class="col-sm-12 logoPreview" style="min-height: 120px;">
                                 <div style="border:1px solid #ddd; width:220px; padding:20px; margin-top:15px; text-align:center" id="fileResult">
                                    <div class=''>
                                       <img src= "" id="feature_image" name="file"  alt='Preview'>
                                    </div>
                                 </div>
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-file"></p>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="row py-5">
                     <div class="col-md-6 text-right">
                        <button type="submit" class="btn bg-blue text-white userAuthBtn">Submit</button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>

<script>
   $(function(){
   //
    fileupload.onchange = evt => {
     const [file] = fileupload.files
     if (file) {
         feature_image.src = URL.createObjectURL(file)
     }
    }
       //
   $(document).on('click','#clickSelectFile',function(){
   
       $('#fileupload').trigger('click');
   
   });
    //
     $('.userAuthBtn').on('click', function() {
       var $this = $(this);
       var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
       if ($(this).html() !== loadingText) {
         $this.data('original-text', $(this).html());
         $this.html(loadingText);
       }
    });

    $(document).on('submit', 'form#addVehicleInfo', function (event) {
    event.preventDefault();
    //clearing the error msg
    $('p.error_container').html("");
    $('.error-control').removeClass('border-danger');
    $('.userAuthBtn').attr('disabled',true);

    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");

     $.ajax({
         type: form.attr('method'),
         url: url,
         data: data,
         cache: false,
         contentType: false,
         processData: false,
         success: function (response) {
            var user_id = response.user_id;
            console.log(response);
             if(response.success==true  ) {
                 //notify
                toastr.success("Information created successfully");
                 // redirect to google after 5 seconds
                 window.setTimeout(function() {
                  window.location = "{{ url('/')}}"+"/admin/instructors/profile/vehicle-info/"+user_id;
                 }, 2000);

             }
             //show the form validates error
             if(response.success==false ) {
               $('.userAuthBtn').attr('disabled',false);
                 var loadingText = 'Submit';
                 $('.userAuthBtn').html(loadingText);
                 for (control in response.errors) {
                     $('#error-' + control).html(response.errors[control]);
                 }

                if( response.error_type == 'something_wrong' )
                {
                  toastr.error("Sorry, something went wrong. Please try again later.");
                }
             }
         },
         error: function (xhr, textStatus, errorThrown) {
             // alert("Error: " + errorThrown);
         }
     });
     return false;
    });
   });

</script>
@endsection