@push('preload')
    <link rel="preload" as="style" href="{{asset('main/css/intlTelInput.min.css')}}">
    <link rel="preload" as="style" href="{{asset('main/css/airport-autocomplete.css')}}">
@endpush

@push('styles')
    <link href="{{asset('main/css/intlTelInput.min.css')}}" rel="stylesheet">
    <link href="{{asset('main/css/airport-autocomplete.css')}}" rel="stylesheet">
@endpush
<form action="{{route('step-1',[$enquiry])}}" method="post">
    @csrf
    <div class="step step-1">
        <h3>User Information</h3>
        <!-- Step 1 form fields here -->
        <div class="row  py-lg-3">
            <div class="form-group  col-md-2 col-12">
                <!-- <label for="name_title">Title</label>-->
                <select class="form-control @error('name_title') is-invalid @enderror " name="name_title" id="name_title" >
                    <option value="">Title</option>
                        @foreach ($titles as $item )
                            <option value="{{$item->title}}" @selected($data['name_title'] == $item->title)>{{ucwords($item->title)}}</option>
                        @endforeach
                </select>
               @error('name_title')
                   <span class="text-danger">{{$message}}</span>
               @enderror

            </div>
            <div class="form-group col-md-5 col-12">
            <input type="text" class="form-control @error('first_name') is-invalid @enderror" placeholder="First Name" name="first_name" id="first_name" value="{{$data['first_name']}}">
            @error('first_name')
                <span class="text-danger">{{$message}}</span>
            @enderror
            </div>
            <div class="form-group col-md-5 col-12">
                <input type="text" class="form-control @error('last_name') is-invalid @enderror" placeholder="Last Name" name="last_name" id="last_name" value="{{$data['last_name']}}">
                @error('last_name')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>
        </div>
        <div class="row py-lg-3">
            <div class="form-group col-md-6 col-12">
                <input type="email" class="form-control @error('email') is-invalid @enderror" placeholder="Email" name="email" id="email" value="{{$data['email']}}">
                @error('email')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>
            <div class="form-group col-md-6 col-12">
            <input type="text" class="form-control wizard-required @error('phone_number') is-invalid @enderror" id="phone" placeholder="Phone Number" name="phone" value="{{$data['phone_number']}}">
            @error('phone_number')
                <span class="text-danger">{{$message}}</span>
            @enderror
            <span id="output"></span>

            </div>
        </div>
        <div class="row py-lg-3">
            <div class="form-group col-md-12 col-12">
                <input type="text" class="form-control @error('origin_airport') is-invalid @enderror " placeholder="Airport where you want service" id="origin_airport" name="origin_airport" value="{{$data['origin_airport']}}">
                @error('origin_airport')
                    <span class="text-danger">{{$message}}</span>
                @enderror
            </div>
        </div>
        <input type="hidden" name="phone_number"id="phone_number" value="{{$data['phone_number']}}">
        <div class="py-3">
            <input type="hidden" name="agent_id" value="{{$agent_id}}">
            <button type="submit" id="first-step" class="btn btn-primary next-step">Next</button>
        </div>
    </div>
</form>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.1/lodash.min.js"></script>
<script src="https://unpkg.com/fuse.js@2.5.0/src/fuse.min.js"></script>
<script src="{{asset('airport/airport-list.js')}}"></script>
<script src="{{asset('main/js/airport-autocomplete.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/js/intlTelInput.min.js"></script>
<script>
   const input = document.querySelector("#phone");
   const iti = window.intlTelInput(input, {
        initialCountry:"us",
        strictMode: true,
        loadUtilsOnInit: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/js/utils.js"
    });
    const handleChange = () => {
  let text;
  if (input.value) {
    if(iti.isValidNumber()){
        $("#output").html('<label class="text-success">Valid number!</label>');
        $('#phone_number').val(iti.getNumber());
        $('#first-step').removeAttr('disabled');
    }else{
        $("#output").html('<label class="text-danger">Invalid number - please try again</label>');
        $('#first-step').attr('disabled','disabled');
    }
  } else {
    $("#output").html('<label class="text-danger">Please enter a valid number below</label>');
    $('input[type="submit"]').attr('disabled','disabled');
  }
};

// listen to "keyup", but also "change" to update when the user selects a country
input.addEventListener('change', handleChange);
input.addEventListener('keyup', handleChange);
</script>
@endpush