@extends('admin.layouts.app')

@section('title', 'dashboard')
@section('content')
           <div class="container-fluid">

               <!-- start page title -->
               <div class="row">
                   <div class="col-12">
                       <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                           <h4 class="mb-sm-0 font-size-18">Vehicle Registration</h4>

                           <div class="page-title-right">
                               <ol class="breadcrumb m-0">
                                   <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                                   <li class="breadcrumb-item active">Vehicle Registration</li>
                               </ol>
                           </div>

                       </div>
                   </div>
               </div>
               <!-- end page title -->



               <div class="row">
                   <div class="col-xl-8">
                       <!-- card -->
                       <div class="card ">

                           <div class="card-body p-4">

                               <div class="row">
                                   @can('customer-create')
                                       <form method="POST" action="{{ route('customer.store') }}"
                                           enctype="multipart/form-data">
                                           @csrf
                                           @method('POST')
                                           <div class="col-lg-12">
                                               <h5 class="card-title me-2 text-primary text-center">Customer Info</h5>
                                               <div class="mb-3">
                                                   <label class="form-label" for="formrow-firstname-input">Full Name</label>
                                                   <input type="text"
                                                       class="form-control @error('name') is-invalid @enderror"
                                                       id="name" name="name" required>
                                                   @include('admin.partials.form-errors', [
                                                       'field' => 'name',
                                                   ])
                                               </div>
                                               <div class="mb-3">
                                                   <label class="form-label" for="formrow-firstname-input">Mobile</label>
                                                   <input type="text"
                                                       class="form-control @error('mobile') is-invalid @enderror"
                                                       id="mobile" name="mobile" required pattern="[0-9]{10}">
                                                   <small class="form-text text-muted">Please enter a 10-digit mobile
                                                       number.</small>
                                                   <div id="mobile-error" class="invalid-feedback"></div>
                                                   @include('admin.partials.form-errors', [
                                                       'field' => 'mobile',
                                                   ])
                                               </div>

                                               <div class="mb-3">
                                                   <label class="form-label" for="formrow-firstname-input">Email</label>
                                                   <input type="email"
                                                       class="form-control @error('email') is-invalid @enderror"
                                                       id="email" name="email" required>
                                                   @include('admin.partials.form-errors', [
                                                       'field' => 'email',
                                                   ])
                                               </div>

                                               <div class="mb-3">
                                                   <label class="form-label" for="formrow-firstname-input">Address</label>
                                                   <textarea class="form-control @error('address') is-invalid @enderror" id="address" name="address" ></textarea>

                                                   @include('admin.partials.form-errors', [
                                                       'field' => 'details',
                                                   ])
                                               </div>

                                               <div class="mb-3">
                                                   <label class="form-label" for="formrow-firstname-input">Pincode</label>
                                                   <input type="text"
                                                       class="form-control @error('pincode') is-invalid @enderror"
                                                       id="pincode" name="pincode"  pattern="[0-9]{6}">
                                                   <small class="form-text text-muted">Please enter a 6-digit
                                                       pincode.</small>
                                                   @include('admin.partials.form-errors', [
                                                       'field' => 'pincode',
                                                   ])
                                               </div>

                                               {{-- <div class="mb-3">
                                                   <label class="form-label" for="formrow-firstname-input">Upload
                                                       Photo</label>
                                                   <input type="file"
                                                       class="form-control @error('photo') is-invalid @enderror"
                                                       id="photo" name="photo">
                                                   @include('admin.partials.form-errors', [
                                                       'field' => 'photo',
                                                   ])
                                               </div> --}}


                                               <h5 class="card-title me-2 text-primary text-center">Vehicle Information</h5>
                                               <div class="mb-3">
                                                   <label class="form-label" for="formrow-firstname-input">Model</label>
                                                   <select type="model_id" id="model_id" name="model_id"
                                                       class="form-control @error('model_id') is-invalid @enderror"
                                                       required>
                                                       <option value="">{{ __('Select Model') }}</option>
                                                       @foreach ($variants as $var)
                                                           <option value="{{ $var->id }}">{{ $var->name }}</option>
                                                       @endforeach

                                                   </select>
                                                   @include('admin.partials.form-errors', [
                                                       'field' => 'model_id',
                                                   ])
                                               </div>
                                               <div class="mb-3">
                                                   <label class="form-label" for="formrow-firstname-input">Vehicle
                                                       No</label>
                                                   <input type="text"
                                                       class="form-control @error('vehicle_no') is-invalid @enderror"
                                                       id="vehicle_no" name="vehicle_no" required
                                                       pattern="[A-Za-z]{2}[0-9]{1,2}[A-Za-z]{1,2}[0-9]{4}"
                                                       title="Please enter a valid vehicle number">

                                                   @include('admin.partials.form-errors', [
                                                       'field' => 'vehicle_no',
                                                   ])
                                               </div>

                                               <div class="mb-3">
                                                   <label class="form-label" for="formrow-firstname-input">VIN No.</label>
                                                   <input type="text"
                                                       class="form-control @error('vin') is-invalid @enderror"
                                                       id="vin" name="vin" required pattern="[A-Z0-9]{17}">
                                                   @include('admin.partials.form-errors', [
                                                       'field' => 'vin',
                                                   ])
                                               </div>

                                               <div class="mb-3">
                                                   <label class="form-label" for="formrow-firstname-input">Puchase
                                                       Date</label>
                                                   <input type="date"
                                                       class="form-control @error('purchase_date') is-invalid @enderror"
                                                       id="purchase_date" name="purchase_date" max="{{ date('Y-m-d') }}"
                                                       required>

                                                   @include('admin.partials.form-errors', [
                                                       'field' => 'purchase_date',
                                                   ])
                                               </div>
                                               <div class="mt-4">
                                                   <button type="submit" class="btn btn-primary w-md">Submit</button>
                                               </div>
                                           </div>
                                   </div>



                                   </form>

                               @endcan
                               <!-- end col -->

                               <!-- end col -->

                           </div>
                       </div>
                       <!-- end card -->
                   </div>
                   <!-- end col -->
               </div>
               <!-- end row-->
           </div>

<!-- JAVASCRIPT -->
<script src="{{ url('/') }}/assets/libs/jquery/jquery.min.js"></script>
<script src="{{ url('/') }}/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{{ url('/') }}/assets/libs/metismenu/metisMenu.min.js"></script>
<script src="{{ url('/') }}/assets/libs/simplebar/simplebar.min.js"></script>
<script src="{{ url('/') }}/assets/libs/node-waves/waves.min.js"></script>
<script src="{{ url('/') }}/assets/libs/feather-icons/feather.min.js"></script>
<!-- pace js -->
<script src="{{ url('/') }}/assets/libs/pace-js/pace.min.js"></script>

<!-- apexcharts -->
<script src="{{ url('/') }}/assets/libs/apexcharts/apexcharts.min.js"></script>

<!-- Plugins js-->
<script src="{{ url('/') }}/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="{{ url('/') }}/assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js">
</script>
<!-- dashboard init -->
<script src="{{ url('/') }}/assets/js/pages/dashboard.init.js"></script>

<script src="{{ url('/') }}/assets/js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#mobile').on('keyup', function() {
            var mobileValue = $(this).val();

            var url = '{{ route('customer.check-duplicate-mobile') }}';
            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    mobile: mobileValue
                },
                success: function(response) {
                    if (response.duplicate) {
                        $('#mobile-error').text('Mobile number is already in use.');
                        $('#mobile').addClass(
                            'is-invalid'); // Add Bootstrap's is-invalid class
                        $('#mobile').focus(); // Focus on the input field
                    } else {
                        $('#mobile-error').text('');
                        $('#mobile').removeClass('is-invalid'); // Remove is-invalid class
                    }
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        });
    });
</script>
@endsection