@extends('Main.layout.app')
@push('preload')
    <link rel="preload" as="style" href="{{asset('main/css/form1.css')}}">
    <link rel="preload" as="style" href="{{asset('main/css/intlTelInput.min.css')}}">
@endpush

@push('styles')
    <!-- Customized Stylesheet -->
    <link href="{{asset('main/css/form1.css')}}" rel="stylesheet">
    <link href="{{asset('main/css/intlTelInput.min.css')}}" rel="stylesheet">
@endpush

@section('content')
<main>
  <x-main.request.wizard-section />

  <div id="container" class="container">
    <div class="form-bg mb-lg-5">
             <h2 class="fs-title">Request Details </h2>

      
       <form action="#" method="post">
         @csrf
      <div class="step step-1">
      <h3>User Information</h3>


    <div class="row py-lg-3">
      <div class="form-group col-md-2 col-12">
   <select class="form-control " name="name_title" id="title">
         <option value="">Title</option>
             @foreach($titles as $item)
             <option value="{{$item->title}}" {{($item->title == old('title')) ? "selected" :  ""}}>{{ucwords($item->title)}}</option>
             @endforeach

         </select>
      </div>
      <div class="form-group col-md-5 col-12">
        <input type="text" class="form-control" placeholder="First Name">
      </div>
      <div class="form-group col-md-5 col-12">
        <input type="text" class="form-control" placeholder="Last Name">
      </div>
    </div>

  
    <div class="row py-lg-3">
      <div class="form-group col-md-6 col-12">
        <input type="email" class="form-control" placeholder="Email">
      </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="">
            @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-6">
         <select name="country" id="country"  class="form-control">
                                    <option value="">Country where you want service</option>
                                    @foreach ($countries  as $item )
                                       <option value="{{$item->id}}"@selected(old('country') == $item->id)>{{$item->title}}</option> 
                                    @endforeach
        </select>
      </div>

      <div class="form-group col-6">
        <input type="text" class="form-control" placeholder="No.of Passengers">
      </div>
    </div>

    <div class="row py-lg-3">
  <div class="form-group col-md-6 col-12">
    <input type="text" class="form-control" placeholder="Departure Date" onfocus="(this.type='date')" onblur="if(this.value===''){this.type='text'}">
  </div>

  <div class="form-group col-md-6 col-12">
    <input type="text" class="form-control" placeholder="Departure Time" onfocus="(this.type='time')" onblur="if(this.value===''){this.type='text'}">
  </div>
</div>


    <!--   <div class="form-group col-3">
        <input type="text" class="form-control" placeholder="you are specifying the time as">
      </div> -->
    

       <div class="row py-lg-3">
      <div class="form-group col-6">
        <input type="text" class="form-control" placeholder="Departure City">
      </div>

      <div class="form-group col-6">
        <input type="text" class="form-control" placeholder="Destination City">
      </div>

        
    </div>

    
    <!-- Hidden Fields -->
    <input type="hidden" name="phone_number" value="">
    <input type="hidden" name="agent_id" value="">

    <!-- Submit Button -->
    <div class="py-3">  
      <button type="submit" class="btn btn-primary next-step">Submit</button>
    </div>
  </div>
</form>

    </div>
  </div>
</main>
<!--Register Area Ends-->
@endsection


@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="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