@extends('layouts.app')
@section('title')Add Job @endsection
@section('content')
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">

<link rel="stylesheet" href="{{asset('dist/css/select2.min.css')}}">

 
<div class="box box-default color-palette-box">
  <div class="box-header with-border">
    <div class="row">
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            @if (session()->has("error"))

            <h3 class="alert alert-danger">{{session()->get("error")}}</h3>

            @endif


            <h3 class="box-title">Add Jobs</h3>



          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="box-group">
              <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
              <form role="form" id="frm1" method="post" action="{{url('store_job')}}" enctype="multipart/form-data">
                @csrf
                <!-- Start -->
				
				<div id="OneTwoThree" class="">
					<div class="panel box box-primary">
					  <div class="box-header with-border" id="OneTwoThreeFour" Style="font-weight:800;">
						 Personal Details <!-- Flat No: <input type="number" id="" value="{{isset($fore)}}"  class="col-md-2" name="" step="1" style=" float:inherit; border-right: none;border-left: none;border-top: none;border-bottom: none;"> >-->
						 
						<div class="box-tools pull-right">
							<button type="button" class="btn btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
							</button>
						</div>
					  </div>
					  <div class="box-body">
						<!-- text input -->
						<div class="col-md-12" style="padding: 0px;">
							<div class="row" >
								<div class="form-group col-md-2" >
								  <label>Title</label>
								  <select class="form-control" name="title" style="padding:0px;">
									<option>Mr</option>
									<option>Mrs</option>
									<option>Miss</option>
								  </select>
								</div>
								<div class="form-group col-md-5">
								  <label>Fore Name*</label>
								  <input type="text" id="forename" name="forename" required="" class="form-control"
									value="{{isset($fore)}}" placeholder="Fore Name">
								</div>
								<div class="form-group col-md-5">
								  <label>Last Name*</label>
								  <input type="text" id="lastname" name="lastname" required="" class="form-control"
									value="{{isset($last)}}" placeholder="Last Name">
								</div>
								<div class="form-group  col-md-3">
								  <label>DOB</label>
								  <input type="text" id="datePickerr" value="{{isset($DOB)}}" class="form-control" name="dob"
									placeholder="dd-mm-yy">
								</div>
								<div class="form-group  col-md-5">
								  <label>Email</label>
								  <input type="email" value="{{isset($email)}}" name="email" class="form-control"
									placeholder="Email">
								</div>
								<div class="form-group  col-md-4">
								  <label>Contact Number*</label>
								  <input type="text" id="contact_no" name="contact_no" required="" class="form-control"
									value="{{isset($contact_no)}}" placeholder="Contact Number">
								</div>									
							</div>
							<div class="row" >
							
							</div>
						</div>
						
					  </div>
					</div>
				</div>
				
				<div class="panel box box-primary" id="manualAdd" style="display: none">
                  <div class="box-header with-border"> 
                    Manual Address Details  
					<div class="box-tools pull-right">
						<button type="button" onclick="enableApiAdd()" class="btn btn-box-tool" ><i class="fa fa-exchange"></i></button>
						<button type="button" onclick="refreshAddress()" class="btn btn-box-tool" ><i class="fa fa-refresh"></i></button>
					</div>
                  </div>
                  <div class="box-body">
					<div class="col-md-12"  style="padding: 0px;">
						
						<div class="form-group">
						  <label>Post Code*</label>
						  <input type="text" name="postcode1" id="postcode1" onkeyup="postupper(this.value)"
							value="{{isset($postcode1)}}" class="form-control" placeholder="POST CODE">
							<!--<select class="form-control" id="select2"></select>-->
						</div>
						<div class="form-group">
						  <label>Address</label>
						  <input type="text" name="address" id="address" 
							value="{{isset($address)}}" class="form-control" placeholder="Address">
							<!--<select class="form-control" name="address" id="select2" ></select>-->
						</div>
						
						<div class="form-group">
						  <label>Aditional Number</label>
						  <input type="text" id="additional_no" name="additional_no" class="form-control"
							value="{{isset($add_no)}}" placeholder="Aditional Number">
						</div>
					</div>
					
                  </div>
                </div> <!-- /.box-header -->
                <!-- End -->
				
				<div class="panel box box-primary" id="apiAdd" style="display: true">
                  <div class="box-header with-border">
                    Address Details  
					<div class="box-tools pull-right">
						<button type="button" onclick="enableManualAdd()" class="btn btn-box-tool" ><i class="fa fa-exchange"></i></button>
						<button type="button" onclick="refreshAddress()" class="btn btn-box-tool" ><i class="fa fa-refresh"></i></button>
					</div>
                  </div>
                  <div class="box-body">
					<div class="col-md-12"  style="padding: 0px;">
						
						<div class="form-group">
						  <label>Post Code*</label>
						  <input type="text" name="postcode" id="postcode" onkeyup="postupper(this.value)"required=""
							value="{{isset($postcode)}}" class="form-control" placeholder="POST CODE">
							<!--<select class="form-control" id="select2"></select>-->
						</div>
						<div class="form-group">
						  <label>Address</label>
							<select class="form-control" name="address" id="select2" ></select>
						</div>
						
						<div class="row" >
							<div class="col-md-6">
								<div class="form-group">
								  <label>Town/City</label>
								  <input type="text" id="town_or_city" name="town_or_city" class="form-control" readonly
									value="">
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
								  <label>District</label>
								  <input type="text" id="district" name="district" class="form-control" readonly
									value="">
								</div>
							</div>
						</div>
						<div class="row" >
							<div class="col-md-6">
								<div class="form-group">
								  <label>County</label>
								  <input type="text" id="county" name="county" class="form-control" readonly
									value="" >
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
								  <label>Country</label>
								  <input type="text" id="country" name="country" class="form-control" readonly
									value="">
								</div>
							</div>
						</div>
						
						<!--<div class="form-group">
						  <label>Address*</label>
						  <textarea class="form-control" name="address" required="" rows="3" value=""
							placeholder="Enter Adress"></textarea>
						</div>-->
						<div class="form-group">
						  <label>Aditional Number</label>
						  <input type="text" id="additional_no" name="additional_no" class="form-control"
							value="{{isset($add_no)}}" placeholder="Aditional Number">
						</div>
					</div>
					
                  </div>
                </div> <!-- /.box-header -->
                <!-- End -->

                <!-- Start -->
                <div class="panel box box-primary">
                  <div class="box-header with-border">
                    Rental Detail
                  </div>
                  <div class="box-body">
                    <div class="form-group">
                      <label>Is This Property Rented </label> &nbsp
                      <input type="radio" name="is_rented" id="yes" value="yes" @if (isset($is_rented))
                        {{$is_rented=="yes"?"checked":""}} @endif>
                      Yes
                      <input type="radio" name="is_rented" id="no" value="no" checked>
                      No
                    </div>
                    <div id="rented">
                      <div class="form-group">
                        <label>Landloard/Agent Name</label>
                        <input type="text" name="landloard" value="{{isset($landloard)}}" class="form-control"
                          placeholder="Landloard/Agent">
                      </div>
                      <div class="form-group">
                        <label>Contact Name</label>
                        <input type="text" value="{{isset($contact_name)}}" name="contact_name" class="form-control"
                          placeholder="Contact Name">
                      </div>
                      <div class="form-group">
                        <label>Phone Number</label>
                        <input type="text" value="{{isset($phone_number)}}" id="phone_number" name="phone_number"
                          class="form-control" placeholder="Phone Number">
                      </div>
                      <div class="form-group">
                        <label>Email</label>
                        <input type="email" name="r_email" value="{{isset($email_address)}}" class="form-control"
                          placeholder="Email">
                      </div>
                      <div class="form-group">
                        <label>Notes</label>
                        <textarea class="form-control" value="{{isset($notes)}}" name="notes" rows="3"
                          placeholder="Notes"></textarea>
                      </div>
                    </div>
                  </div>
                </div> <!-- /.box-header -->
                <!-- End -->
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <h3 class="box-title"></h3>
          </div>
          <div class="box-body">
            <div class="box-group">
              <!-- Start -->
              <div class="panel box box-primary">
                <div class="box-header with-border">
                  Property Details
                </div>
                <div class="box-body">
                  <!-- radio -->
				  <div class="form-group">
                      <label>Communal Hatch</label> &nbsp
                      <input type="radio" name="is_communal_hatch" id="yes" value="yes" @if (isset($is_communal_hatch))
                        {{$is_communal_hatch=="yes"?"checked":""}} @endif>
                      Yes
                      <input type="radio" name="is_communal_hatch" id="no" value="no" checked>
                      No
                  </div> 
				  <div class="form-group">
                      <label>Loft Checked</label> &nbsp
                      <input type="radio" name="is_loft_checked" id="yes" value="yes" @if (isset($is_loft_checked))
                        {{$is_loft_checked=="yes"?"checked":""}} @endif>
                      Yes
                      <input type="radio" name="is_loft_checked" id="no" value="no" checked>
                      No
                  </div> 
				  <div class="form-group">
                      <label>Hatch Making Job</label> &nbsp
                      <input type="radio" name="is_hatch_making_job" id="yes" value="yes" @if (isset($is_hatch_making_job))
                        {{$is_hatch_making_job=="yes"?"checked":""}} @endif>
                      Yes
                      <input type="radio" name="is_hatch_making_job" id="no" value="no" checked>
                      No
                  </div> 
                  <div class="form-group">
                    <label>Heating Type</label>
                    <div class="radio">
                      <label>
                        <input type="radio" name="heating_type" id="gas" value="GAS" checked>
                        Gas
                      </label>
                    </div>
                    <div class="radio">
                      <label>
                        <input type="radio" name="heating_type" id="electric" value="electric">
                        Electric <i id="msg" style="color:red" focus>(Select Sub Category)</i>
                      </label>
                    </div>
                    <div id="heat" style="padding-left:30px">
                      <div class="radio">
                        <label>
                          <input type="radio" name="heating_type" id="eb" value="EB">
                          Electric Boiler
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="heating_type" id="rh" value="RH">
                          Room Heater
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="heating_type" id="esh" value="ESH">
                          Electric Storage Heater
                        </label>
                      </div>
                    </div>
                  </div>
                </div>


                <div class="form-group">
                  <label>Property Type</label>
                  <select name="property_type" onchange="hmo_selected(this)" class="form-control">
                    <option value="Flat">Flat</option>
                    <option value="House">House</option>
                    <option value="Bungalow">Bungalow</option>
                    <option value="HMO">HMO</option>
                  </select>
                </div>

                <div class="form-group" id="noofflats">
                  <label>No of Flats</label>
                  <input type="number" min="0" id="no_of_flats" name="no_of_flats" onchange="number_of_flats(this)"
                    class="form-control" placeholder="No of Flats">
                </div>

                <div class="form-group" id="noofflats_beds">

                </div>

                <div class="form-group" id="noofbeds">
                  <label>No of Beds</label>
                  <input type="text" id="no_of_beds" name="no_of_beds" class="form-control" placeholder="No of Beds">
                </div>
                <input type="text" style="display: none" id="test1" name="test1">


                <div class="form-group">
                  <label>External Walls</label>
                  <select name="external_walls" class="form-control">
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                  </select>
                </div>

              </div>
            </div> <!-- /.box-header -->
            <!-- End -->

            <!-- Start -->
            <div class="panel box box-primary">
              <div class="box-header with-border">
                Services
              </div>
              <div class="box-body">
                <div class="form-group">
                  <label>Service Type</label>
                  <select name="service_type" class="form-control">
                    <option value="1">Loft Insulation</option>
                    <option value="2">Electric Storage Heater</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>Survey Date</label>
                  <input type="date" name="survey_date" placeholder="dd-mm-yyyy" class="form-control" id="survey_date1">
                </div>
                @if(isset($date2))
                <div class="form-group">
                  <label>Booking Date</label>
                  <input type="date" name="booking_date" placeholder="dd-mm-yyyy" class="form-control"
                    id="booking_date4" value="{{$date2}}" readonly>
                </div>
                @else
                <div class="form-group">
                  <label>Booking Date</label>
                  <input type="date" name="booking_date" placeholder="dd-mm-yyyy" class="form-control"
                    id="booking_date">
                </div> @endif
                @if(isset($time))
                <div class="form-group">
                  <label>Booking Time</label>
                  <input type="time" name="booking_time" value='{{$time}}' id="booking_time1" class="form-control"
                    readonly><span id="errorname" style="color:red;"></span>
                </div>
                @else
                <div class="form-group">
                  <label>Booking Time</label>
                  <input type="time" name="booking_time" value='' id="booking_time" class="form-control"><span
                    id="errorname" style="color:red;"></span>
                </div>@endif
                <div class="form-group">
                  <label>Notes</label>
                  <textarea class="form-control" name="final_notes" rows="3" placeholder="Notes"></textarea>
                </div>

                <!-- Start code by Qaisar
                <div class="form-group">
                  <label>Funder</label>
                  <select class="form-control" name="funder_value" id="">
                    <option value="0">select funder</option>
                    <option value="1">E-ON</option>
                    <option value="2">BRITISH GAS</option>
                    <option value="3">NPOWER</option>

                  </select>
                </div>
                End Code by Qaisar-->
				<!--
					<div class="form-group">
					  <label>Add images</label>

					  photos (can attach more than one): <br>
					  <input multiple name="images[]" type="file">
					  <br><br>
					  <a href="https://www.dropbox.com/home/lclfolder" >DropBox Link</a>
						<br><br>

					</div>
				-->

              </div>
            </div> <!-- /.box-header 
            <!-- End -->

          </div>
          <input type="submit" class="btn btn-success" id="save">
		  
			<input type="hidden" id="building_name" name="building_name" value="">
			<input type="hidden" id="building_number" name="building_number" value="">
			<input type="hidden" id="formatted_address" name="formatted_address" value="">
			<input type="hidden" id="line_1" name="line_1" value="">
			<input type="hidden" id="line_2" name="line_2" value="">
			<input type="hidden" id="line_3" name="line_3" value="">
			<input type="hidden" id="line_4" name="line_4" value="">
			<input type="hidden" id="locality" name="locality" value="">
			<input type="hidden" id="sub_building_name" name="sub_building_name" value="">
			<input type="hidden" id="sub_building_number" name="sub_building_number" value="">
			<input type="hidden" id="thoroughfare" name="thoroughfare" value="">
			
          </form>
          <br>
          <br>
          <div class="input-group-btn">
            <a type="button" class="btn btn-primary" onclick="formReset()">Clear</a> 
            <a type="button" class="btn btn-danger" style="margin:10px;" href="{{route('jobs_list')}}">Close</a>
          </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer with-border">

        </div>
      </div>
      <!-- /.box -->
    </div>
  </div>
  <!-- /.row -->
</div>
</div>
<!-- <script type="text/javascript">
  $( "#survey_date" ).datepicker(
  
      { 
        maxDate: '0', 
        beforeShow : function()
        {
          jQuery( this ).datepicker('option','maxDate', jQuery('#booking_date').val() );
        },
        altFormat: "dd/mm/yy", 
        dateFormat: 'dd/mm/yy'
        
      }
      
  );

  $( "#booking_date" ).datepicker( 
  
      {
        maxDate: '0', 
        beforeShow : function()
        {
          jQuery( this ).datepicker('option','minDate', jQuery('#survey_date').val() );
        } , 
        altFormat: "dd/mm/yy", 
        dateFormat: 'dd/mm/yy'
        
      }
      
  );
</script>
 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>

<script>

const settings = {
	"async": true,
	"crossDomain": true,
	"url": "https://samsinfield-postcodes-4-u-uk-address-finder.p.rapidapi.com/byid/json?key=NRU3-OHKW-J8L2-38PX&id=14439843&username=guest&callback=return",
	"method": "GET",
	"headers": {
		"x-rapidapi-key": "413442b2a1msh6bf5be3a323082cp1d52d4jsnbf524dfe9da8",
		"x-rapidapi-host": "samsinfield-postcodes-4-u-uk-address-finder.p.rapidapi.com"
	}
};

$.ajax(settings).done(function (response) {
	console.log(response);
});

  $( "#datePickerr" ).datepicker({
  dateFormat: "dd-mm-yy"
});
   
    

$("#noofflats_beds").hide();
    $("#noofflats").hide();


function hmo_selected(id)
{
  var selected=$(id).val()
  var i=1, num=3;
  if(selected=="HMO")
  {
    $("#noofbeds").hide();
    $("#noofflats_beds").show();
    $("#noofflats").show();
	
	
  }
  else
  {
    $("#noofbeds").show();
    $("#noofflats_beds").hide();
    $("#noofflats").hide();
  }

}

function number_of_flats(id)
{ 



 
    $('#noofflats_beds').html('<label>No of Beds in Each Flat</label>');    
  var flats=$(id).val();
  var output12="";
  for($i=1;$i<=flats;$i++)
  {
   
    $('#noofflats_beds').append('<input type="number" min="0"  name="no_of_beds'+$i+'"  class="form-control mb-01 forget1" placeholder="No of beds in flat '+$i+'">');    

     
		//$('#noofflats').append('<input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" />');
	
  }
  /*$('#OneTwoThreeFour').empty();
  $('#OneTwoThreeFour').append('Flat No: <input type="number" id="flatnumb" required value=""  class="col-md-2" name="flatnumb" step="1" style=" float:inherit; border-right: none;border-left: none;border-top: none;border-bottom: none;"> <div class="box-tools pull-right"> <button type="button" class="btn btn-sm" data-widget="collapse"><i class="fa fa-minus"></i> </button></div>');
  for($i=2;$i<=flats;$i++)
	{
		$('#OneTwoThree').append('<div class="panel box box-primary"><div class="box-header with-border" Style="font-weight:800;"> Flat No: <input type="number" id="flatnumb" required value=""  class="col-md-2" name="flatnumb'+$i+'" step="1" style=" float:inherit; border-right: none;border-left: none;border-top: none; border-bottom: none;"> <!--<div class="box-tools pull-right"> <button type="button" class="btn btn-sm" data-widget="collapse"><i class="fa fa-minus"></i> </button></div>--> </div><div class="box-body"><div class="col-md-12" style="padding: 0px;"><div class="row" ><div class="form-group col-md-2"> <label>Title</label> <select class="form-control" name="title'+$i+'" style="padding:0px;"><option>Mr</option><option>Mrs</option><option>Miss</option> </select></div><div class="form-group col-md-5"> <label>Fore Name*</label> <input type="text" id="forename" name="forename'+$i+'" required="" class="form-control"value="{{isset($fore)}}" placeholder="Fore Name"></div><div class="form-group col-md-5"> <label>Last Name*</label> <input type="text" id="lastname" name="lastname'+$i+'" required="" class="form-control"value="{{isset($last)}}" placeholder="Last Name"></div> <div class="form-group col-md-3"> <label>DOB</label> <input type="text" id="datePickerr" value="{{isset($DOB)}}" class="form-control" name="dob'+$i+'" placeholder="dd-mm-yy"></div><div class="form-group col-md-5"> <label>Email</label> <input type="email" value="{{isset($email)}}" name="email'+$i+'" class="form-control" placeholder="Email"></div><div class="form-group col-md-4"> <label>Contact Number*</label> <input type="text" id="contact_no" name="contact_no'+$i+'" required="" class="form-control" value="{{isset($contact_no)}}" placeholder="Contact Number"></div></div></div></div></div>');
  
	}*/
	
   
}



var output12="";
  $("#save").on("click",function(){
    
      $(".forget1").each(function(index){

          
            output12 += $(this).val()+",";
          



      });
       
        $("#test1").val(output12);
      
   
});




 var sendbtn = document.getElementById('save');

$('#msg').hide();

var checker = document.getElementById('rh');
 checker.onchange = function(){
if(this.checked)
    sendbtn.disabled = false;
}

var checker = document.getElementById('eb');
 checker.onchange = function(){
if(this.checked)
    sendbtn.disabled = false;
}

var checker = document.getElementById('esh');
 checker.onchange = function(){
if(this.checked)
    sendbtn.disabled = false;
}


$(function(){     
  var d = new Date(),        
      h = d.getHours(),
      m = d.getMinutes();
  if(h < 10) h = '0' + h; 
  if(m < 10) m = '0' + m; 
  $('input[type="time"][value="now"]').each(function(){ 
    $(this).attr({'value': h + ':' + m});
  });
});


function formReset()
  {
      document.getElementById("frm1").reset();
  }

$(document).ready(function () {
    $('#yes').change(function () {
        if (this.checked) 
        //  ^
           $('#rented').fadeIn('slow');
        else 
            $('#rented').fadeOut('slow');
    });
    $('#no').change(function () {
        if (!this.checked) 
        //  ^
           $('#rented').fadeIn('slow');
        else 
            $('#rented').fadeOut('slow');
    });
    $('#electric').change(function () {
        if (this.checked) 
        //  ^
           {
             $('#heat').fadeIn('slow');
              sendbtn.disabled = true;
              $('#msg').show();
           }
        else 
            $('#heat').fadeOut('slow');
    });
    $('#gas').change(function () {
        if (!this.checked) 
        //  ^
        {
          $('#heat').fadeIn('slow');
        }
        else 
            {
            sendbtn.disabled = false;
            $('#heat').fadeOut('slow');
            }
    });
    $('#heat').hide();
    $('#rented').hide();

});

///


// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

$("#contact_no").mask("00000 000 000");
$("#additional_no").mask("00000 000 000");
$("#phone_number").mask("00000 000 000");

$("#postcode").on("keyup",function(){
      $post=$("#postcode");
      
      if($post.val().length===3){
            
    $post.mask('AAA AAAA', {'translation': {
    A: {pattern: /[A-Za-z0-9]/}
    }
    }); 
      console.log(3);
      }
      else if($post.val().length===5){
        $post.mask('A AAAAAA', {'translation': {
    A: {pattern: /[A-Za-z0-9]/}
      }
         }); 
         console.log(4);
      }
      else if($post.val().length===6){
        $post.mask('AA AAAAA', {'translation': {
    A: {pattern: /[A-Za-z0-9]/}
    }
    }); 

      }
      else if($post.val().length===7){
        $post.mask('AAA AAAA', {'translation': {
    A: {pattern: /[A-Za-z0-9]/}
    }
    }); 

      }
      else if($post.val().length===8){
        $post.mask('AAAA AAA', {'translation': {
    A: {pattern: /[A-Za-z0-9]/}
    }
    }); 

      }

});



/* $('#postcode').mask('AAAA AAA', {'translation': {
    A: {pattern: /[A-Za-z0-9]/}
  }
}); */
function postupper(value)
{
  $('#postcode').val(value.toUpperCase());
}
// Install input filters.
// setInputFilter(document.getElementById("contact_no"), function(value) {
//   return /^\d*$/.test(value); });
// setInputFilter(document.getElementById("additional_no"), function(value) {
//   return /^\d*$/.test(value); });
// setInputFilter(document.getElementById("phone_number"), function(value) {
//   return /^\d*$/.test(value); });
setInputFilter(document.getElementById("no_of_beds"), function(value) {
  return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 10); });
setInputFilter(document.getElementById("forename"), function(value) {
  return /^[a-z '-]*$/i.test(value); });
setInputFilter(document.getElementById("lastname"), function(value) {
  return /^[a-z '-]*$/i.test(value); });
</script>


<script src="{{asset('bower_components/select2/dist/js/select2.full.min.js')}}"></script>


	
<script>
//$('.select2').select2();

function enableManualAdd()
{	
	$('#apiAdd').fadeOut('slow');
	$('#manualAdd').fadeIn('slow');
	$("postcode1").attr("required", "true");
	$("postcode").attr("required", "false");
	
}

function enableApiAdd()
{	
	$('#manualAdd').fadeOut('slow');
	$('#apiAdd').fadeIn('slow');
	$("postcode").attr("required", "true");
	$("postcode1").attr("required", "false");
}

function refreshAddress()
{
	$("#postcode").val("");
	$('#town_or_city').val("");
	$('#district').val("");
	$('#county').val("");
	$('#country').val("");
	$('#additional_no').val("");
	$('#postcode').prop('readonly', false);
	//$('#select2').val('val', 'All');
	
	//$('#select2').val("");
	 $("#select2").val(null).trigger("change");

	
	$("#select2").select2({
			placeholder: "Select Address",
			initSelection: function(element, callback) {                   
			}
		});
		
	var yourApiKey = '_x3LKoMGdUGs-YqIyrWyBQ30664';

			$('#select2').select2({
				width: '100%',
				minimumInputLength: 2,
				placeholder: "Find your address",
				language: {
					inputTooShort: function() {
						return '';
					}
				},
				ajax: {
					url: function (params) {
						if(params.term) return 'https://api.getaddress.io/suggest/' + params.term;
						return '';
					},
					dataType: 'json',
					data: function (params) {
						var query = { 'api-key': yourApiKey };
						return query;
					},
					processResults: function (data) {
						var results = [];

						if (data.suggestions && data.suggestions.length > 0) {

							for (var i = 0; i < data.suggestions.length; i++) {
								var suggestion = data.suggestions[i];
								var result = {
									idd:suggestion.id,
									id:suggestion.address,
									text:suggestion.address
								}
								results.push(result);
							}
						}

						return {
							results: results
						};
					}
				}
			});

			$('#select2').on('select2:select', function (e) {
			   var data = e.params.data;
				var idd = data.idd;
				$.get('https://api.getaddress.io/get/' + idd, {'api-key':yourApiKey}, function (address, status)
				{
					/*$('#address').show();
					$('#line1').val(address.formatted_address[0]);
					$('#line2').val(address.formatted_address[1]);
					$('#line3').val(address.formatted_address[2]);
					$('#town').val(address.formatted_address[3]);
					$('#county').val(address.formatted_address[4]);*/
					
					var formatted_address_str = ""
						for (var j = 0; j < address.formatted_address.length; j++)
						{
							if(address.formatted_address[j]!=""){
									if(j==4){
										
											if(address.formatted_address[j]!=""){
												formatted_address_str = formatted_address_str+', ';
											}
										
										formatted_address_str = formatted_address_str+address.formatted_address[j];
									}
									else{
										
										if(j>0){
											if(address.formatted_address[j]!=""){
												formatted_address_str = formatted_address_str+', ';
											}
										}
										formatted_address_str = formatted_address_str+address.formatted_address[j];
									}
								}
						}
					//console.log();
					$('#postcode').val(address.postcode);
					$('#town_or_city').val(address.town_or_city);
					$('#district').val(address.district);
					$('#county').val(address.county);
					$('#country').val(address.country);
					
					$('#building_name').val(address.building_name);
					$('#building_number').val(address.building_number);
					$('#formatted_address').val(formatted_address_str);
					$('#line_1').val(address.line_1);
					$('#line_2').val(address.line_2);
					$('#line_3').val(address.line_3);
					$('#line_4').val(address.line_4);
					$('#locality').val(address.locality);
					$('#sub_building_name').val(address.sub_building_name);
					$('#sub_building_number').val(address.sub_building_number);
					$('#thoroughfare').val(address.thoroughfare);
					
					$('#postcode').prop('readonly', true);
				
				});
			});	
	
		
}

$(document).ready(function(){
	$(document).ready(function() {
		var postcode = $("#postcode").val();	
	
		if(postcode==""){
			
			
			
			var yourApiKey = '_x3LKoMGdUGs-YqIyrWyBQ30664';

			$('#select2').select2({
				width: '100%',
				minimumInputLength: 2,
				placeholder: "Find your address",
				language: {
					inputTooShort: function() {
						return '';
					}
				},
				ajax: {
					url: function (params) {
						if(params.term) return 'https://api.getaddress.io/suggest/' + params.term;
						return '';
					},
					dataType: 'json',
					data: function (params) {
						var query = { 'api-key': yourApiKey };
						return query;
					},
					processResults: function (data) {
						var results = [];

						if (data.suggestions && data.suggestions.length > 0) {

							for (var i = 0; i < data.suggestions.length; i++) {
								var suggestion = data.suggestions[i];
								var result = {
									idd:suggestion.id,
									id:suggestion.address,
									text:suggestion.address
								}
								results.push(result);
							}
						}

						return {
							results: results
						};
					}
				}
			});

			$('#select2').on('select2:select', function (e) {
			   var data = e.params.data;
				var idd = data.idd;
				$.get('https://api.getaddress.io/get/' + idd, {'api-key':yourApiKey}, function (address, status)
				{
					/*$('#address').show();
					$('#line1').val(address.formatted_address[0]);
					$('#line2').val(address.formatted_address[1]);
					$('#line3').val(address.formatted_address[2]);
					$('#town').val(address.formatted_address[3]);
					$('#county').val(address.formatted_address[4]);*/
					
					var formatted_address_str = ""
						for (var j = 0; j < address.formatted_address.length; j++)
						{
							if(address.formatted_address[j]!=""){
									if(j==4){
										
											if(address.formatted_address[j]!=""){
												formatted_address_str = formatted_address_str+', ';
											}
										
										formatted_address_str = formatted_address_str+address.formatted_address[j];
									}
									else{
										
										if(j>0){
											if(address.formatted_address[j]!=""){
												formatted_address_str = formatted_address_str+', ';
											}
										}
										formatted_address_str = formatted_address_str+address.formatted_address[j];
									}
								}
						}
					//console.log();
					$('#postcode').val(address.postcode);
					$('#town_or_city').val(address.town_or_city);
					$('#district').val(address.district);
					$('#county').val(address.county);
					$('#country').val(address.country);
					
					$('#building_name').val(address.building_name);
					$('#building_number').val(address.building_number);
					$('#formatted_address').val(formatted_address_str);
					$('#line_1').val(address.line_1);
					$('#line_2').val(address.line_2);
					$('#line_3').val(address.line_3);
					$('#line_4').val(address.line_4);
					$('#locality').val(address.locality);
					$('#sub_building_name').val(address.sub_building_name);
					$('#sub_building_number').val(address.sub_building_number);
					$('#thoroughfare').val(address.thoroughfare);
					
					$('#postcode').prop('readonly', true);
				
				});
			});
		}
    });
	
	
	var a = 1;
  $("#postcode").blur(function(){
	var postcode = $("#postcode").val();
	
	if(postcode!=""){
		
		var yourApiKey = '_x3LKoMGdUGs-YqIyrWyBQ30664';

			$('#select2').select2({
				width: '100%',
				placeholder: "Find your address",
				ajax: {
					url: function (params) {
						//if(params.term) return 'https://api.getaddress.io/suggest/' + params.term;
						if(params.term) {
							//alert('https://api.getAddress.io/find/'+postcode+'/'+params.term);
							return 'https://api.getAddress.io/find/'+postcode+'/'+params.term+'?api-key=_x3LKoMGdUGs-YqIyrWyBQ30664&expand=true';
						}
						else{
							//alert('https://api.getAddress.io/find/'+postcode+'?api-key=_x3LKoMGdUGs-YqIyrWyBQ30664&expand=true');
							return 'https://api.getAddress.io/find/'+postcode+'?api-key=_x3LKoMGdUGs-YqIyrWyBQ30664&expand=true';
						}
						
					},
					type: "get",
					dataType: 'json',
					delay: 50,
					data: function (params) {
						var query = { 'api-key': yourApiKey };
						return query;
					},
					processResults: function (data) {
						var results = [];

					//console.log(data.addresses[0]);
					 var arr = JSON.parse(JSON.stringify(data.addresses));
					//console.log(arr);
					//console.log(arr.length);
					//console.log(arr[0].formatted_address[0]);

					for (var i = 0; i < arr.length; i++) {
						var suggestion = arr[i];
						var formatted_address_str = ""
							for (var j = 0; j < suggestion.formatted_address.length; j++)
							{
								if(suggestion.formatted_address[j]!=""){
									if(j==4){
										
											if(suggestion.formatted_address[j]!=""){
												formatted_address_str = formatted_address_str+', ';
											}
										
										formatted_address_str = formatted_address_str+suggestion.formatted_address[j];
									}
									else{
										
										if(j>0){
											if(suggestion.formatted_address[j]!=""){
												formatted_address_str = formatted_address_str+', ';
											}
										}
										formatted_address_str = formatted_address_str+suggestion.formatted_address[j];
									}
								}
							}
						var result = {
							id:formatted_address_str,
							//text:suggestion.line_1+', '+ suggestion.line_2+' '+ suggestion.line_3,
							text:formatted_address_str,
							building_name:suggestion.building_name,
							building_number:suggestion.building_number,
							country:suggestion.country,
							county:suggestion.county,
							district:suggestion.district,
							formatted_address:formatted_address_str,
							line_1:suggestion.line_1,
							line_2:suggestion.line_2,
							line_3:suggestion.line_3,
							line_4:suggestion.line_4,
							locality:suggestion.locality,
							sub_building_name:suggestion.sub_building_name,
							sub_building_number:suggestion.sub_building_number,
							thoroughfare:suggestion.thoroughfare,
							town_or_city:suggestion.town_or_city
						}
						//console.log(result);
						
						results.push(result);
					}
							

					return {
						
						results: results
						

					};
					}
				}
			});

			$('#select2').on('select2:select', function (e) {
		   var data = e.params.data;
			//var id = data.;
			 var arr = JSON.parse(JSON.stringify(data));
				console.log(arr);
				//console.log(arr.length);
				$('#town_or_city').val(arr.town_or_city);
				$('#district').val(arr.district);
				$('#county').val(arr.county);
				$('#country').val(arr.country);
				
				$('#building_name').val(arr.building_name);
				$('#building_number').val(arr.building_number);
				$('#formatted_address').val(arr.formatted_address);
				$('#line_1').val(arr.line_1);
				$('#line_2').val(arr.line_2);
				$('#line_3').val(arr.line_3);
				$('#line_4').val(arr.line_4);
				$('#locality').val(arr.locality);
				$('#sub_building_name').val(arr.sub_building_name);
				$('#sub_building_number').val(arr.sub_building_number);
				$('#thoroughfare').val(arr.thoroughfare);
				$('#postcode').prop('readonly', true);
				
			/*$.get('https://api.getaddress.io/get/' + id, {'api-key':yourApiKey}, function (address, status)
			{
				
				$('#address').show();
				$('#line1').val(address.formatted_address[0]);
				$('#line2').val(address.formatted_address[1]);
				$('#line3').val(address.formatted_address[2]);
				$('#town').val(address.formatted_address[3]);
				$('#county').val(address.formatted_address[4]);
				$('#postcode').val(address.postcode);
			});*/
		});
	}else{
		
	//alert("This input field has lost its focus.else");
	//$('#select2').val(null)
		$("#select2").select2({
			placeholder: "Select Address",
			initSelection: function(element, callback) {                   
			}
		});
		
		var yourApiKey = '_x3LKoMGdUGs-YqIyrWyBQ30664';

			$('#select2').select2({
				width: '100%',
				minimumInputLength: 2,
				placeholder: "Find your address",
				language: {
					inputTooShort: function() {
						return '';
					}
				},
				ajax: {
					url: function (params) {
						if(params.term) return 'https://api.getaddress.io/suggest/' + params.term;
						return '';
					},
					dataType: 'json',
					data: function (params) {
						var query = { 'api-key': yourApiKey };
						return query;
					},
					processResults: function (data) {
						var results = [];

						if (data.suggestions && data.suggestions.length > 0) {

							for (var i = 0; i < data.suggestions.length; i++) {
								var suggestion = data.suggestions[i];
								var result = {
									idd:suggestion.id,
									id:suggestion.address,
									text:suggestion.address
								}
								results.push(result);
							}
						}

						return {
							results: results
						};
					}
				}
			});

			$('#select2').on('select2:select', function (e) {
			   var data = e.params.data;
				var idd = data.idd;
				$.get('https://api.getaddress.io/get/' + idd, {'api-key':yourApiKey}, function (address, status)
				{
					/*$('#address').show();
					$('#line1').val(address.formatted_address[0]);
					$('#line2').val(address.formatted_address[1]);
					$('#line3').val(address.formatted_address[2]);
					$('#town').val(address.formatted_address[3]);
					$('#county').val(address.formatted_address[4]);*/
					
					var formatted_address_str = ""
						for (var j = 0; j < address.formatted_address.length; j++)
						{
							if(address.formatted_address[j]!=""){
									if(j==4){
										
											if(address.formatted_address[j]!=""){
												formatted_address_str = formatted_address_str+', ';
											}
										
										formatted_address_str = formatted_address_str+address.formatted_address[j];
									}
									else{
										
										if(j>0){
											if(address.formatted_address[j]!=""){
												formatted_address_str = formatted_address_str+', ';
											}
										}
										formatted_address_str = formatted_address_str+address.formatted_address[j];
									}
								}
						}
					//console.log();
					$('#postcode').val(address.postcode);
					$('#town_or_city').val(address.town_or_city);
					$('#district').val(address.district);
					$('#county').val(address.county);
					$('#country').val(address.country);
					
					$('#building_name').val(address.building_name);
					$('#building_number').val(address.building_number);
					$('#formatted_address').val(formatted_address_str);
					$('#line_1').val(address.line_1);
					$('#line_2').val(address.line_2);
					$('#line_3').val(address.line_3);
					$('#line_4').val(address.line_4);
					$('#locality').val(address.locality);
					$('#sub_building_name').val(address.sub_building_name);
					$('#sub_building_number').val(address.sub_building_number);
					$('#thoroughfare').val(address.thoroughfare);
					
					$('#postcode').prop('readonly', true);
				
				});
			});
		
	}
  });
  
});
</script>

@endsection