@extends('layouts.user_app')
@section('content')
@if (session()->has('message'))
<div class="alert alert-success">{{ session()->get('message') }}</div>
@endif
@if (session()->has('error'))
<div class="alert alert-danger">{{ session()->get('error') }}</div>
@endif

@php $residence_choose = Session::has('residence_choose')? Session::get('residence_choose'):'no'; @endphp
<form action="{{ route('QAForm2Save')}}" method="POST">
    @csrf
    <div class="form-grp row">
        <div class="col-12 col-md-12">
            <div class="form-group">
                <h3>1. Address<span class="important">*</span></h3>
                <div class="left-space">
                    <input type="text" class="form-control" name="address" id="address" placeholder="Enter address" value="{{old('address')}}">
                    @error('address')
                    <div class="error" style="color:red;">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group" id="latitudeArea">
                <label>Latitude</label>
                <input type="text" id="latitude" name="latitude" class="form-control">
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group" id="longtitudeArea">
                <label>Longitude</label>
                <input type="text" name="longitude" id="longitude" class="form-control">
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group" id="cityArea">
                <label>city</label>
                <input type="text" id="city" name="city" class="form-control">
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group" id="stateArea">
                <label>state</label>
                <input type="text" id="state" name="state" class="form-control">
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group" id="zipArea">
                <label>zip</label>
                <input type="text" id="zip" name="zip" class="form-control">
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group">
                <h3>2. Do you have a number, a side, a unit, or a lot number
                    associated with your residence?</h3>

                <div class="left-space">
                    <ul class="check-lists">
                        <li>
                            <input type="radio" class="custom-radio-s1" id="residence_yes" name="residence" value="yes" {{ $residence_choose=='yes' ? 'checked' : '' }}>
                            <label for="residence_yes">Yes</label>
                        </li>
                        <li>
                            <div class="clearfix w-100 d-none" id="unit_sec">
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="row fix-row fix-row gap-8px">
                                            <div class="col-6 col-md-6 fix-col">
                                                <div class="form-group mb-0">
                                                    <input type="number" class="form-control size2" name="unit_no" placeholder="Unit Number" value="{{old('unit_no')}}">
                                                    @error('unit_no')
                                                    <div class="error" style="color:red;">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-6 col-md-6 fix-col">
                                                <div class="form-group mb-0">
                                                    <input type="number" class="form-control size2" name="gate_code" placeholder="Gate Code" value="{{old('gate_code')}}">
                                                    @error('gate_code')
                                                    <div class="error" style="color:red;">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>

                            <input type="radio" class="custom-radio-s1" id="residence_no" name="residence" value="no" {{ $residence_choose=='no' ? 'checked' : '' }}>
                            <label for="residence_no">No</label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group">
                <h3>3. Applicant's Name<span class="important">*</span></h3>
                <div class="left-space">
                    <div class="row fix-row fix-row">
                        <div class="col-12 col-md-6 fix-col">
                            <div class="form-group mb-4">
                                <input type="text" class="form-control" placeholder="First Name" name="first_name" value="{{old('first_name')}}">
                                @error('first_name')
                                <div class="error" style="color:red;">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 fix-col">
                            <div class="form-group mb-4">
                                <input type="text" class="form-control" placeholder="Last Name" name="last_name" value="{{old('last_name')}}">
                                @error('last_name')
                                <div class="error" style="color:red;">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="form-group">
                <h3>4. Contact No.<span class="important">*</span></h3>
                <div class="left-space">
                    <input type="text" class="form-control" placeholder="e.g 123-456-7890" id="contact_no" name="contact_no" value="{{old('contact_no')}}" maxlength="12">
                    @error('contact_no')
                    <div class="error" style="color:red;">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="form-group">
                <h3>5. Email Address.<span class="important">*</span></h3>
                <div class="left-space remove-space-for-desktop">
                    <input type="email" class="form-control" placeholder="" name="email" value="{{old('email')}}" id="email_id" autocomplete="new-password">
                    <div class="email_err" style="color:red;"></div>
                    @error('email')
                    <div class="serverEmailerror" style="color:red;">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group">
                <h3>6. How many people live in your household?</h3>
                <div class="left-space">
                    <h5>(This includes the adults permanently living there and the person completing this
                        application.)
                    </h5>
                    <div class="selcet-with-left-value-sm">
                        <select type="text" class="form-control" name="household_no">
                            @for($i=1;$i<=10;$i++) <option value="{{$i}}">{{$i}}</option>
                                @endfor
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-12">
            <div class="form-group">
                @php $max_age = Session::get('max_age'); Session::forget('max_age'); @endphp
                <h3>7.How many members of the household will be {{ $max_age}} years of
                    age or under on or before Christmas Day of this year?</h3>
                <div class="left-space">
                    <div class="selcet-with-left-value-sm">
                        <select type="text" class="form-control" value="{{ old('christmas_household') }}" name="christmas_household" id="child_household">
                            @for($i=1;$i<=10;$i++) <option value="{{$i}}">{{$i}}</option>
                                @endfor

                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group">
                <h3>8. What is your relationship to the children?</h3>
                <div class="left-space">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <ul class="check-lists2 inline-2">
                                <li>
                                    <input type="radio" class="custom-radio-s2" id="t1" name="relwithchildern" value="parent" checked>
                                    <label for="t1">Parent</label>
                                </li>
                                <li>
                                    <input type="radio" class="custom-radio-s2" id="t2" name="relwithchildern" value="brother or sister">
                                    <label for="t2">Brother/Sister</label>
                                </li>
                                <li>
                                    <input type="radio" class="custom-radio-s2" id="t3" name="relwithchildern" value="grandparent">
                                    <label for="t3">Grandparent</label>
                                </li>

                                <li>
                                    <input type="radio" class="custom-radio-s2" id="t4" name="relwithchildern" value="legal_guardian">
                                    <label for="t4">Legal Guardian</label>
                                </li>
                                <li>
                                    <input type="radio" class="custom-radio-s2" id="t5" name="relwithchildern" value="aunt or uncle">
                                    <label for="t5">Aunt/Uncle</label>
                                </li>
                                <li>
                                    <input type="radio" class="custom-radio-s2 t6-cls" id="t6" name="relwithchildern" value="other">
                                    <label for="t6">Other</label>

                                </li>
                            </ul>
                            <div class="col-12 col-md-6 fix-col other-dv" style="display:none">
                                <div class="form-group mb-4">
                                    <input type="text" class="form-control" placeholder="Other Relationship" name="other_relationship" value="{{old('other_relationship')}}">
                                    @error('other_relationship')
                                    <div class="error" style="color:red;">{{ $message }}</div>
                                    @enderror
                                    <div class="error_client" style="color:red;"></div>
                                </div>
                            </div>

                            @error('relwithchildern')
                            <div class="error" style="color:red;">{{ $message }}</div>
                            @enderror



                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group">
                <h3>9. Please provide information on each child?<span class="important">*</span></h3>
                <div class="left-space">
                    <div class="row">
                        <div class="col-12 col-md-10" id="childdv">
                            @php $no_of_child = (Session::has('child_no'))?Session::get('child_no'):1; Session::forget('child_no') ; @endphp
                            @for($i=1;$i<=$no_of_child;$i++) <h4>Child {{$i}}</h3>
                                <div class="row fix-row fix-row">
                                    <div class="col-12 col-md-6 fix-col">
                                        <div class="form-group mb-4">
                                            <input type="text" class="form-control" placeholder="First Name" name="ch_info[{{$i}}][first_name]" value={{ Session::has('child_first_name') && $i==1 ? Session::get('child_first_name') : "" }}>
                                            @php $f_err = (Session::has('child_f_name'))? 'Please enter atleast one child first name' : ''; Session::forget('child_f_name') ; @endphp
                                            <div class="error" style="color:red;">{{ $f_err }}</div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 fix-col">
                                        <div class="form-group mb-4">
                                            <input type="text" class="form-control" placeholder="Last Name" name="ch_info[{{$i}}][last_name]" value={{ Session::has('child_last_name') && $i==1? Session::get('child_last_name') : "" }}>
                                            <!--@error('ch_info.*.last_name')-->
                                            <!--<div class="error" style="color:red;">{{ $message }}</div>-->
                                            <!--@enderror-->
                                            @php $l_err = (Session::has('child_l_name'))? 'Please enter atleast one child last name' : ''; Session::forget('child_l_name') ; @endphp
                                            <div class="error" style="color:red;">{{ $l_err }}</div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 fix-col">
                                        <div class="form-group mb-4">
                                            {{-- <input type="text" class="form-control" placeholder="Gender of child {{$i}}" name="ch_info[{{$i}}][gender]" value={{ Session::has('child_entered_gender') && $i==1? Session::get('child_entered_gender') : "" }}> --}}
                                            <select class="form-control" name="ch_info[{{$i}}][gender]">
                                                <option value="">Select gender</option>
                                                <option value="male" {{ Session::has('child_entered_gender') && $i==1 && Session::get('child_entered_gender')=='Male' ? 'selected' : '' }}>Male</option>
                                                <option value="female" {{ Session::has('child_entered_gender') && $i==1 && Session::get('child_entered_gender')=='Female' ? 'selected' : '' }}>Female</option>
                                            </select>
                                            @php $g_err = (Session::has('child_gender'))? 'Please enter atleast one child gender' : ''; Session::forget('child_gender') ; @endphp
                                            <div class="error" style="color:red;">{{ $g_err }}</div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 fix-col">
                                        <div class="form-group mb-4">
                                            <input type="text" class="form-control m-input datepicker" data-provide="datepicker" data-date-format='dd-mm-yyyy'  data-date-end-date="+0d" data-date-autoclose="true" data-date-today-highlight="true" placeholder="Date of Birth" name="ch_info[{{$i}}][dob]" value={{ Session::has('child_entered_dob') && $i==1 ? Session::get('child_entered_dob') : "" }}>
                                            @php $dob_err = (Session::has('child_dob'))? 'Please enter atleast one child DOB' : ''; Session::forget('child_dob') ; @endphp
                                            <div class="error" style="color:red;">{{ $dob_err }}</div>
                                        </div>
                                    </div>
                                </div>
                                @endfor
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group">

                <h3>10. Would you like to pickup your Blue Santa package or
                    would you like it delivered to the address above?<span class="important">*</span></h3>
                <div class="left-space">
                    <ul class="check-lists2 size3">
                        <li>
                            <input type="radio" class="custom-radio-s2 pickup_d" id="tat1" name="theaddress" value='yes' {{ old('theaddress')=="yes" ? 'checked=' .'"'.'checked'.'"' : '' }} checked>
                            <label for="tat1">Pickup between 8:00am – 5:00pm.</label>
                        </li>
                        @php $settings =Session::has('settings')?Session::get('settings')[0]:[]; $available_dates = (explode(",",(data_get($settings,'pickup_dates'))));  @endphp
                        @if(!empty($available_dates))
                        @foreach($available_dates as $key => $value)
                            <li class="shw_pickup">
                                <input type="radio" class="custom-radio-s2" id="tat1" name="pickup_custom_date" value="{{$value}}" >
                                <label for="tat1"> {{$value}}</label>
                            </li>
                        @endforeach
                        @endif
                        @error('pickup_custom_date')
                        <div class="error" style="color:red;">{{ $message }}</div>
                        @enderror
                        <li>
                            <input type="radio" class="custom-radio-s2 delivery_d" id="tat2" name="theaddress" value='no' {{ old('theaddress')=="no" ? 'checked=' .'"'.'checked'.'"' : '' }}>
                            <label for="tat2">Delivery on {{data_get($settings,'delivery_date')}}</label>
                        </li>
                        <input type ="hidden" name="delivery_date" value="{{data_get($settings,'delivery_date')}}" >
                    </ul>
                    @error('theaddress')
                    <div class="error" style="color:red;">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-action-group">
                <button class="theme-btn submit-btn" type="submit">Submit</button>
            </div>
        </div>
    </div>
</form>

@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyAvzZMHoOxBNefqUmzqJkKv1hlcY49huLM&libraries=places"></script>
    <script>
        $(document).ready(function () {
            $("#latitudeArea").addClass("d-none");
            $("#longtitudeArea").addClass("d-none");
            $("#cityArea").addClass("d-none");
            $("#stateArea").addClass("d-none");
            $("#zipArea").addClass("d-none");
        });
    </script>
<script>
google.maps.event.addDomListener(window, 'load', initAutocomplete);

let autocomplete;
let address1Field;

let postalField;



function initAutocomplete() {
  address1Field = document.querySelector("#address");
  postalField = document.querySelector("#zip");

  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: ["usa","ind"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });


  //address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);

}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  $('#latitude').val(place.geometry['location'].lat());
  $('#longitude').val(place.geometry['location'].lng());

  //$("#latitudeArea").removeClass("d-none");
  //$("#longtitudeArea").removeClass("d-none");

  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    const componentType = component.types[0];
    console.log(component);
    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#city").value = component.long_name;
        break;

      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      // case "country":
      //   document.querySelector("#country").value = component.long_name;
      //   break;
    }
  }
  postalField.value = postcode;
  address1Field.focus();
}

</script>
<script>
    $(document).ready(function() {

        $('#contact_no').keydown(function (e) {
            var key = e.which || e.charCode || e.keyCode || 0;
            $phone = $(this);
            // Auto-format- do not expose the mask as the user begins to type
            console.log(key);
            if (key !== 8 && key !== 9) {
                if ($phone.val().length === 3) {
                    $phone.val($phone.val() + '-');
                }
                if ($phone.val().length === 7) {
                    $phone.val($phone.val() + '-');
                }
            }
            // Allow numeric (and tab, backspace, delete) keys only
            return (key == 8 ||
                    key == 9 ||
                    key == 46 ||
                    (key >= 48 && key <= 57) ||
                    (key >= 96 && key <= 105));
        })

        $("#email_id").blur(function() {
            if ($('#email_id').val() != "") {
                var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z]+(?:\.[a-zA-Z]+)+.[a-zA-Z]*$/;
                if ($('#email_id').val().match(validRegex)) {
                    $('.submit-btn').prop('disabled', false);
                    $('.email_err').html('');
                    //$(".submit-btn").css("background-color", "#001B69");
                    return true;

                } else {
                    $('.email_err').html('Please enter a valid email address');
                    $('.serverEmailerror').html('');
                    $('.submit-btn').prop('disabled', true);
                    // $(".submit-btn").css("background-color", "gray");
                    return false;
                }
            }
        });
        var selectedval = '';
        if (selectedval == 'yes') {
            $("#unit_sec").removeClass('d-none');
        } else {
            $("#unit_sec").addClass('d-none');
        }

        $("#residence_yes").click(function() {
            $("#unit_sec").removeClass('d-none');
            $("#unit_sec").show();

        });
        $("#residence_no").click(function() {
            $("#unit_sec").addClass('d-none');
            $("#unit_sec").hide();
        });
        $("#child_household").change(function() {
            var child_info = $("#child_household").val();
            $.ajax({
                url: "{!! route('childHouseHoldInfo') !!}",
                type: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    child_info: child_info
                },
                success: function(result) {
                    console.log(result);
                    $("#childdv").load(" #childdv");
                }
            });
        });

        $("#t6").click(function() {
            $(".other-dv").show();
            // $(".error_client").html('This field is required');
        });
        $("#t1,#t2,#t3,#t4,#t5").click(function() {
            $(".other-dv").hide();
            // $(".error_client").html('');
        });
        $(".pickup_d").click(function(){
           $(".shw_pickup").removeClass('d-none');
        })
        $(".delivery_d").click(function(){
           $(".shw_pickup").addClass('d-none');
        })
    });

</script>