@extends('layouts.v2.frontend-user-backend')

@section('title', '| Free Living Will')
@section('css')
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
@endsection
@section('content')
@include('frontend.forms.v2.Living-Will.stepIndicator')
 <!-- start -->
<div class="container">
    <form action="{{route('LivingWillFormStore')}}" method="POST" id="signUpForm" class="multiple-form">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="4">
      <div class="multiple-form dashboard-radio">
         <h4>Your information</h4>
         <p>Who is this Living Will being created for?</p>
 
         <div class="form">
            <div class="row">
               <div class="checkbox-items form-check-input-child mb-3">
                  <input class="custom-checkbox" type="checkbox" value="" id="userCheckbox">
                  <label class="form-check-label" for="flexCheckDefault">
                     <p>Auto fill your previous information</p>
                  </label>
               </div>
               <div class="col-12">
                 <p class="sub-title">Gender</p>
                  <div class="dashboard-radio-form">
                   
                        <div class="form-check">
                           <input id="female" name="gender" class="form-check-input"  type="radio" value="female" {{ isset($your_information['gender']) &&  $your_information['gender'] == "female" ? 'checked' : ''}}>
                           <label for="female">
                           <p>Female</p>
                           </label>
                        </div>
                        <div class="form-check"> 
                           <input id="male" name="gender" class="form-check-input" type="radio" value="male" {{ isset($your_information['gender']) &&  $your_information['gender'] == "male" ? 'checked' : ''}}>
                           <label for="male">
                           <p>Male</p>
                           </label>
                        </div>
                  </div>
               </div>
            </div>
            <div class="row mt-5">
               <div class="col-md-6">
                  <div class="form-group">
                     <label>Name</label>
                     <input type="text" oninput="addCityToZoho(this);" class="form-control modified-input" name="name" id="name" value="{{ isset($your_information['name']) ? $your_information['name'] : '' }}"  >
                  </div>
               </div>

               <div class="col-md-6">
                  <div class="form-group">
                     <label>Street Address1</label>
                     <input type="text" class="form-control modified-input" name="street_1" id="street" value="{{ isset($your_information['street_1']) ? $your_information['street_1'] : '' }}" >
                  </div>
               </div>

               <div class="col-md-6">
                  <div class="form-group">
                     <label>Street Address2</label>
                     <input type="text" class="form-control modified-input" name="street_2" id="street2" value="{{ isset($your_information['street_2']) ? $your_information['street_2'] : '' }}" >
                  </div>
               </div>

               <div class="col-md-6">
                  <div class="form-group">
                     <label>City/Town</label>
                     <input type="text" oninput="addCityToZoho(this);" class="form-control modified-input" name="city" id="city" value="{{ isset($your_information['city']) ? $your_information['city'] : '' }}"  >
                  </div>
               </div>



               <div class="col-md-6">
                  <div class="form-group ">
                     <label>Country</label>
                     {{-- <input type="text" class="form-control modified-input" name="country" id="country" value="{{ isset($your_information['country']) ? $your_information['country'] : 'United States' }}"  > --}}
                     <input type="hidden" name="country_value" id="country_value" value="{{ isset($your_information['country']) ? $your_information['country'] : 'United States' }}"/>
                     <input type="hidden" id="country_code_value">
                     <select id="country_dropdown_a" name="country" class="form-control" data-country-dropdown data-country-value="country_value" data-state-dropdown="state_dropdown_a" data-state-value="state_value" data-userdefined-country-code="country_code_value">
                        <option value="">Select Country</option>
                     </select>
                  </div>
               </div>

               <div class="col-md-6">
                  <div class="form-group">
                     <label>State</label>
                     {{-- <input type="text"  class="form-control modified-input" name="state" id="state" value="{{ isset($your_information['state']) ? $your_information['state'] : '' }}"  > --}}
                     {{-- <input id="state_abbreviation" type="hidden" class="form-control modified-input" name="state_abbreviation" value=""> --}}
                     <input type="hidden" name="state_value" id="state_value"  value="{{ isset($your_information['state']) ? $your_information['state'] : '' }}"/>
                     <select id="state_dropdown_a" name="state" class="form-control" data-state-dropdown>
                        <option value="">Select State</option>
                     </select>
                  </div>
               </div>

               <div class="col-md-6">
                  <div class="form-group">
                  <input type="hidden" id="userdefinedCountryCode" value="US" />
                     <label>ZIP Code</label>
                     <input type="text" name="zip_code" id="zip" value="{{ isset($your_information['zip_code']) ? $your_information['zip_code'] : '' }}" data-zipcode-input maxlength="5" data-message-element="zipcode_message" data-userdefined-country-code="userdefinedCountryCode" data-country-dropdown="country_dropdown_a" data-state-dropdown="state_dropdown_a">
                     <span class="invalid-zipcode invalid-feedback d-block text-danger" id="zipcode_message" role="alert"></span>
                  </div>
               </div>

               <div class="col-md-6">
                  <div class="form-group">
                     <label>Birthday</label>
                     <input type="text" class="form-control modified-input" id="bdate" name="bdate" value="{{ isset($your_information['bdate']) ? $your_information['bdate'] : '' }}"  id="bdate" placeholder="mm-dd-yy"  autocomplete="off" readonly>
                  </div>
               </div>

            </div>
         </div>
      </div>
      <!-- start previous / next buttons -->
      <div class="submit-button-multiple">
         <button type="button" onclick="window.location.href = '{{ route('livingwill.create.step.three_1') }}'">Back</button>
         <button type="submit" class="submit-btn">Save and Continue</button>
         <button type="submit" class="d-none"  name="preview_submit" value="preview">{{env('PREVIEW_BUTTON_TEXT')}}</button>
         <button type="button" class="skip-btn d-none">Skip Step</button>
      </div>
      <!-- end previous / next buttons -->

    </form>
      <div class="faq-box d-none">
         <div class="title">Frequently Asked Questions</div>
         <div class="tooltip">
            <p>Who can complete a Living Will?</p>
            <span class="tooltiptext">A Living Will, also known as an Advance Healthcare Directive, can typically be completed by any mentally competent adult. It allows individuals to express their healthcare preferences in advance, especially where they cannot make their own decisions.</span>
         </div>
      </div>

@endsection
@section('page-js')
<script src="{{ url('frontend/assets/js/forms/living-will-multi-step.js') }}?v={{ time() }}"></script>
<script src="{{ url('frontend/assets/js/forms/custom.js?v=10.4') }}"></script>
{{-- 
Developer Name: Theshan Thanushka
Date: April 12, 2024
Description: JavaScript code snippet that utilizes jQuery to populate input fields with user data retrieved via AJAX when a checkbox is checked. If the checkbox is unchecked, it clears the input fields. 

Authour : Gurupriya Solanki
Update  Date : 30 May 2024
Description : added address response in the relevent input
--}}

<script>
   $(document).ready(function(){
       $('#userCheckbox').click(function(){
           if($(this).is(":checked")) {
               $.ajax({
                   url: '{{ route('populateUserData', ['form' => '2']) }}',
                   type: 'GET',
                   success: function(response){
                       $('#name').val(response.username);
                       $('#street').val(response.street_1);
                       $('#street2').val(response.street_2);
                       $('#state').val(response.state);
                       $('#city').val(response.city);
                       $('#zip').val(response.zip_code);
                       $('#country').val(response.country);
                       $('#bdate').val(response.bdate);
                       $('#gender').val(response.gender);
                       if(response.gender === 'female') {
                              $('#female').prop('checked', true);
                        } else if(response.gender === 'male') {
                              $('#male').prop('checked', true);
                        }
                       
                   },
                   error: function(xhr){
                       console.log(xhr.responseText);
                   }
               });
           } else {
               // Clear the fields if the checkbox is unchecked
               $('#name').val('');
               $('#street').val('');
               $('#street2').val('');
               $('#state').val('');
               $('#city').val('');
               $('#zip').val('');
               $('#country').val('United States');
               $('#bdate').val('');
               // Uncheck the gender radio buttons
               $('#female').prop('checked', false);
               $('#male').prop('checked', false);
           }
       });
   });
</script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $(function() {
       $( "#bdate" ).datepicker({
         changeMonth: true, // Allow changing of month
         changeYear: true, // Allow changing of year
         dateFormat: 'mm-dd-yy', // Set the desired date format
         yearRange: "-200:+0", // Set range of selectable years
         maxDate: new Date() // Prevent selecting future dates
       });
    });
 </script>
 <!-- 
   /*
   * Author: Vidhi Shah
   * Updated date: 24th May 2024
   * Description: Script has been added for autopopulate address from zip code.
   */
 -->
 <script src="{{ url('fetch_complete_address_by_zipcode.js') }}"></script>
 <script src="{{ url('v2/js/form-validation.js') }}?v={{ time() }}"></script>
 <script src="{{ url('frontend/assets/js/forms/custom.js?v=10.3') }}"></script>

@endsection