@extends('layouts.frontend')

@section('title', '| Free Living Will')

@section('content')
<div class="wrap-sec">
    <div class="container form-holder">
       <div class="breadcrumb-holder">
          <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('userhomePage')}}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{route('willsEstate')}}">Will & Estate</a></li>
                <li class="breadcrumb-item active" aria-current="page">Living Will</li>
             </ol>
          </nav>
       </div>
       <section id="form-sec-head">
          <div class="sec-title">FREE LIVING WILL</div>
          <div class="form-stepIndicator-top">
             <div id="signUpForm">
                <div class="form-header mb-4">
                   <span class="stepIndicator">Start</span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator">Location</span>
                   <span class="stepIndicator">Care Choices</span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator">Your Info</span>
                   <span class="stepIndicator">Proxy</span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator">Final Details</span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator">Preview</span>
                </div>
             </div>
          </div>
       </section>
    </div>
 </div>

 <div class="container">
    <form id="signUpForm" class="livingWill" onsubmit="handleFormSubmit(event)">
       @csrf
       <input type="hidden" id="stepInput" name="step" value="1"> 
       <div class="card">
        <div class="card-body">
            <!-- step 1 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                   <div class="card-title">Create Your Living Will</div>
                   <div class="card-sub-title">
                      Do you want to appoint someone to make your health care decisions if you are unable to?
                   </div>
                   <div class="custom-button-yn">
                      <input id="livingwill-y" name="livingwill" value="yes" type="radio" checked>
                      <label for="livingwill-y">Yes</label>
                      <input id="livingwill-n" name="livingwill" value="no" type="radio">
                      <label for="livingwill-n">No</label>
                   </div>
                </div>
              </div>
            </div>
            <!-- step 1.1 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                   <div class="card-title">Health Care Preferences</div>
                   <div class="card-sub-title">
                      Do you want to list your health care preferences so caregivers have instruction to follow?
                   </div>
                   <div class="custom-button-yn">
                      <input id="healthCare-y" name="healthCare" value="yes" type="radio" checked>
                      <label for="healthCare-y">Yes</label>
                      <input id="healthCare-n" name="healthCare" value="no" type="radio">
                      <label for="healthCare-n">No</label>
                   </div>
                </div>
              </div>
            </div>
            <!-- step 2 -->
            <div class="step">
                <div class="row">
                  <div class="col-md-8">
                    <div class="card-title">Location</div>
                    <div class="form-group mb-3">
                      <label for="name">What state do you live in?</label>
                      <input type="text" class="form-control modified-input" name="full_name" aria-describedby="nameHelp" placeholder="Location">
                    </div>
                  </div>
                </div>
            </div>
            <!-- step 3 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                   <div class="card-title">Care if in Terminal Condition</div>
                   <div class="card-sub-title">If you are in a terminal condition with no hope of recovery, which of the following treatments do you want:</div>
                  
                  
                  <div class="card-sub-title mt-3">Life Sustaining Treatment:</div>
                  <div class="custom-m-status">
                    <input id="lst-y" name="life_sustaining_treatment" type="radio" value="yes" checked>
                    <label for="lst-y" class="marital-box" id="lst-y">
                      <p>I want to receive this treatment</p>
                    </label>
                    <input id="lst-n" name="life_sustaining_treatment" type="radio" value="no">
                    <label for="lst-n" class="marital-box" id="lst-n">
                      <p>I do NOT want to receive this treatment</p>
                    </label>
                  </div>

                  <div class="card-sub-title mt-3">Artificially Provided Food and Water:</div>
                  <div class="custom-m-status">
                    <input id="apfw-y" name="apfw" type="radio" value="yes" checked>
                    <label for="apfw-y" class="marital-box" id="apfw-y">
                      <p>I want to receive this treatment</p>
                    </label>
                    <input id="apfw-n" name="apfw" type="radio" value="no">
                    <label for="apfw-n" class="marital-box" id="apfw-n">
                      <p>I do NOT want to receive this treatment</p>
                    </label>
                  </div>

                </div>
                <div class="col-md-4">
                    <div class="faq-box">
                      <div class="title">Frequently Asked Questions</div>
                      <div class="tooltip">
                        <p>What is a terminal condition?</p>
                        <span class="tooltiptext">A terminal condition is an incurable injury or illness that will likely result in death within the near future. Additional medical treatment will only serve to postpone the moment of death.</span>
                      </div>
                      <div class="tooltip">
                        <p>What is life-sustaining treatment?</p>
                        <span class="tooltiptext">Life-sustaining treatment includes any life-prolonging procedure that helps to restore, replace, or maintain a spontaneous and vital bodily function. For example, assistance with maintaining breathing or blood pressure.<br><br>

                          Life support does not include medical treatment performed in a pre-hospital situation or artificially administered food/water or pain relief.</span>
                      </div>
                      <div class="tooltip">
                        <p>What is artificially provided food and water?</p>
                        <span class="tooltiptext">Artificially provided food and water means that if you become permanently unconscious you may need to be given food and water through a tube or an IV to keep you alive if you can no longer chew or swallow on your own or with someone helping you</span>
                      </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- step 3.1 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                   <div class="card-title">Care if Permanently Unconscious</div>
                   <div class="card-sub-title">If you are permanently unconscious which of the following treatments do you want:</div>
                  
                  
                  <div class="card-sub-title mt-3">Life Sustaining Treatment:</div>
                  <div class="custom-m-status">
                    <input id="c_lst-y" name="c_life_sustaining_treatment" type="radio" value="yes" checked>
                    <label for="c_lst-y" class="marital-box" id="c_lst-y">
                      <p>I want to receive this treatment</p>
                    </label>
                    <input id="c_lst-n" name="c_life_sustaining_treatment" type="radio" value="no">
                    <label for="c_lst-n" class="marital-box" id="c_lst-n">
                      <p>I do NOT want to receive this treatment</p>
                    </label>
                  </div>

                  <div class="card-sub-title mt-3">Artificially Provided Food and Water:</div>
                  <div class="custom-m-status">
                    <input id="c_apfw-y" name="c_apfw" type="radio" value="yes" checked>
                    <label for="c_apfw-y" class="marital-box" id="c_apfw-y">
                      <p>I want to receive this treatment</p>
                    </label>
                    <input id="c_apfw-n" name="c_apfw" type="radio" value="no">
                    <label for="c_apfw-n" class="marital-box" id="c_apfw-n">
                      <p>I do NOT want to receive this treatment</p>
                    </label>
                  </div>

                </div>
                <div class="col-md-4">
                    <div class="faq-box">
                      <div class="title">Frequently Asked Questions</div>
                      <div class="tooltip">
                        <p>What does permanent unconsciousness mean?</p>
                        <span class="tooltiptext">Permanent unconsciousness is when your doctor and another doctor agree that, within a reasonable degree of medical certainty, you can no longer think, feel anything, knowingly move, or be aware of being alive. They believe this condition will last indefinitely without hope for improvement and have watched you long enough to make that decision. At least one of these doctors must be qualified to make such a diagnosis</span>
                      </div>
                      <div class="tooltip">
                        <p>What is life-sustaining treatment?</p>
                        <span class="tooltiptext">Life-sustaining treatment includes any life-prolonging procedure that helps to restore, replace, or maintain a spontaneous and vital bodily function. For example, assistance with maintaining breathing or blood pressure.
                          <br><br>
                          Life support does not include medical treatment performed in a pre-hospital situation or artificially administered food/water or pain relief.</span>
                      </div>
                      <div class="tooltip">
                        <p>What is artificially provided food and water?</p>
                        <span class="tooltiptext">Artificially provided food and water means that if you become permanently unconscious you may need to be given food and water through a tube or an IV to keep you alive if you can no longer chew or swallow on your own or with someone helping you.</span>
                      </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- step 4 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                   <div class="card-title">Your Information</div>
                   <div class="card-sub-title">
                      Who is this Living Will being created for?
                   </div>
                   <div class="custom-m-status">
                      <div class="card-sub-title">
                         Gender:
                      </div>
                      <input id="female" name="m-status" type="radio" value="single">
                      <label for="female" class="marital-box" id="single-label">
                         <p>Female</p>
                      </label>
                      <input id="male" name="m-status" type="radio" value="single">
                      <label for="male" class="marital-box" id="single-label">
                         <p>Male</p>
                      </label>
                   </div>
                   <div>
                    <div class="card" id="child">
                      <div class="card-body">
                        <div class="form-group mb-3">
                          <label for="name">Name</label>
                          <input type="text" class="form-control modified-input" name="name" id="name" placeholder="Full Name">
                          </div>
                          <div class="form-group mb-3">
                          <label for="street">Street Address</label>
                          <input type="text" class="form-control modified-input" name="state" id="street" placeholder="Street Address">
                          </div>
                          <div class="form-group mb-3">
                          <label for="state">State</label>
                          <input type="text" class="form-control modified-input" name="state" id="state" placeholder="State">
                          </div>
                          <div class="form-group mb-3">
                          <label for="city">City/Town</label>
                          <input type="text" class="form-control modified-input" name="city" id="city" placeholder="City/Town">
                          </div>
                          <div class="form-group mb-3">
                          <label for="zip_code">ZIP Code</label>
                          <input type="text" class="form-control modified-input" name="zip_code" id="zip_code" placeholder="ZIP Code">
                          </div>
                          <div class="form-group mb-3">
                            <label for="birthday">Birthday</label>
                            <input type="date" class="form-control modified-input" name="date" id="date" placeholder="{{ date('Y-m-d') }}">
                            </div>
                        </div>
                      </div>
                    </div>
                </div>
                <div class="col-md-4">
                   <div class="faq-box">
                      <div class="title">Frequently Asked Questions</div>
                      <div class="tooltip">
                         <p>Who can complete a Living Will?</p>
                         <span class="tooltiptext">Anyone over 18 years old with a sound mind can create a Living Will.</span>
                      </div>
                      <div class="tooltip">
                         <p>How do I change my State?</p>
                         <span class="tooltiptext">The questionnaire is customized based on the State you live in. To change your resident State, visit the "Location" step in the progress bar above.</span>
                      </div>
                   </div>
                </div>
             </div>
            </div>
            <!-- step 5 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                   <div class="card-title">If I need someone to speak for me</div>
                   <div class="card-sub-title">First choice for Health Care Proxy</div>
         
                    <div class="card" id="child">
                      <div class="card-body">
                          <div class="form-group mb-3">
                          <label for="name">Name</label>
                          <input type="text" class="form-control modified-input" name="proxy_name" id="proxy_name" placeholder="Full Name">
                          </div>

                          <div class="form-group mb-3">
                          <label for="street">Street Address</label>
                          <input type="text" class="form-control modified-input" name="proxy_street" id="proxy_street" placeholder="Street Address">
                          </div>

                          <div class="form-group mb-3">
                          <label for="state">State</label>
                          <input type="text" class="form-control modified-input" name="proxy_state" id="proxy_state" placeholder="State">
                          </div>

                          <div class="form-group mb-3">
                          <label for="city">City/Town</label>
                          <input type="text" class="form-control modified-input" name="proxy_town" id="proxy_town" placeholder="City/Town">
                          </div>

                          <div class="form-group mb-3">
                            <label for="zip_code">ZIP Code</label>
                            <input type="text" class="form-control modified-input" name="proxy_zip_code" id="proxy_zip_code" placeholder="ZIP Code">
                          </div>

                          <div class="form-group mb-3">
                            <label for="zip_code">Relationship</label>
                            <input type="text" class="form-control modified-input" name="proxy_relationship" id="proxy_relationship" placeholder="relationship">
                            <small id="cityHelp" class="form-text text-muted">e.g. brother, wife, friend, etc</small>
                          </div>
                        
                      </div>
                    </div>
                </div>
                <div class="col-md-4">
                   <div class="faq-box">
                      <div class="title">Frequently Asked Questions</div>
                      <div class="tooltip">
                         <p>Who can complete a Living Will?</p>
                         <span class="tooltiptext">Anyone over 18 years old with a sound mind can create a Living Will.</span>
                      </div>
                      <div class="tooltip">
                         <p>How do I change my State?</p>
                         <span class="tooltiptext">The questionnaire is customized based on the State you live in. To change your resident State, visit the "Location" step in the progress bar above.</span>
                      </div>
                   </div>
                </div>
             </div>
            </div>
            <!-- step 5.1 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                   <div class="card-title">Alternate Health Care Proxy</div>
                   <div class="card-sub-title">Alternative Proxy's Information</div>
         
                    <div class="card" id="child">
                      <div class="card-sub-title">Alternative Representative</div>
                      <div class="card-body">
                          <div class="form-group mb-3">
                          <label for="name">Name</label>
                          <input type="text" class="form-control modified-input" name="alternative_name" id="alternative_name" placeholder="Full Name">
                          </div>

                          <div class="form-group mb-3">
                          <label for="street">Street Address</label>
                          <input type="text" class="form-control modified-input" name="alternative_street" id="alternative_street" placeholder="Street Address">
                          </div>

                          <div class="form-group mb-3">
                          <label for="state">State</label>
                          <input type="text" class="form-control modified-input" name="alternative_state" id="alternative_state" placeholder="State">
                          </div>

                          <div class="form-group mb-3">
                          <label for="city">City/Town</label>
                          <input type="text" class="form-control modified-input" name="alternative_town" id="alternative_town" placeholder="City/Town">
                          </div>

                          <div class="form-group mb-3">
                            <label for="zip_code">ZIP Code</label>
                            <input type="text" class="form-control modified-input" name="alternative_zip_code" id="alternative_zip_code" placeholder="ZIP Code">
                          </div>

                          <div class="form-group mb-3">
                            <label for="zip_code">Phone</label>
                            <input type="text" class="form-control modified-input" name="alternative_phone" id="alternative_phone" placeholder="Phone">
                          </div>

                          <div class="form-group mb-3">
                            <label for="zip_code">Relationship</label>
                            <input type="text" class="form-control modified-input" name="alternative_relationship" id="alternative_relationship" placeholder="relationship">
                            <small id="cityHelp" class="form-text text-muted">e.g. brother, wife, friend, etc</small>
                          </div>
                        
                      </div>
                    </div>
                </div>
                <div class="col-md-4">
                   <div class="faq-box">
                      <div class="title">Frequently Asked Questions</div>
                      <div class="tooltip">
                         <p>Who can complete a Living Will?</p>
                         <span class="tooltiptext">Anyone over 18 years old with a sound mind can create a Living Will.</span>
                      </div>
                      <div class="tooltip">
                         <p>How do I change my State?</p>
                         <span class="tooltiptext">The questionnaire is customized based on the State you live in. To change your resident State, visit the "Location" step in the progress bar above.</span>
                      </div>
                   </div>
                </div>
             </div>
            </div>
            <!-- step 5.2 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                  <div class="card-title">Health Care Proxy Authority</div>
                  <div class="card-sub-title">How much authority do you want your health care proxy to have?</div>
                  <div class="custom-m-status">

                    <input id="1" name="proxytohave" type="radio" value="single">
                    <label for="1" class="marital-box" id="1">
                      <p>Limited to following the directions listed in this document</p>
                    </label>
                    <input id="2" name="proxytohave" type="radio" value="single">
                    <label for="2" class="marital-box" id="2">
                      <p>Must follow my listed directions but is also able to make decisions not covered in this document</p>
                    </label>
                    <input id="3" name="proxytohave" type="radio" value="single">
                    <label for="3" class="marital-box" id="3">
                      <p>Complete authority to make decisions even if they contradict this document</p>
                    </label>
                 </div>
                </div>
                <div class="col-md-4">
                  <div class="faq-box">
                    <div class="title">Frequently Asked Questions</div>
                      <div class="tooltip">
                          <p>What is a health care proxy?</p>
                          <span class="tooltiptext">A health care proxy is a person that you would like to make medical or other decisions for you if you become too sick to speak for yourself.</span>
                      </div>
                  </div>   
                </div>
              </div>
            </div>
            <!-- step 5.3 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                  <div class="card-title">Instructions for Health Care Proxy</div>
                  <div class="card-sub-title">I want your health care proxy to be able to:</div>
                  <div class="form-check mb-3">
                    <label class="form-check-label">
                       <input type="checkbox" class="form-check-input" name="health_care_proxy" value="health care proxy">
                       <p>Have access to my medical records</p>
                    </label>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="faq-box">
                    <div class="title">Frequently Asked Questions</div>
                      <div class="tooltip">
                          <p>What is a health care proxy?</p>
                          <span class="tooltiptext">A health care proxy is a person that you would like to make medical or other decisions for you if you become too sick to speak for yourself.</span>
                      </div>
                  </div> 
                </div>
              </div>
            </div>
            <!-- step 6 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                  <div class="card-title">Contact List</div>
                  <div class="card-sub-title">Do you want to provide a list of people for your doctor to contact before any vital treatment is stopped?</div>
                  <div class="custom-button-yn mb-5">
                    <input id="vitaltreatment-y" name="vital_treatment" type="radio" value="yes">
                    <label for="vitaltreatment-y">Yes</label>
                    <input id="vitaltreatment-n" name="vital_treatment" type="radio" value="no">
                    <label for="vitaltreatment-n">No</label>
                 </div>


                 <div id="contact-container" class="mb-2">
                  <div class="card contact_list mb-3" id="child">
                    <div class="card-header d-flex justify-content-between">
                      <div class="card-title m-0">Contact</div>
                      <a href="#" class="r-button" onclick="removeContactList(this)">
                        <span class="fas fa-times"></span>
                        <span class="remove">Remove</span>
                      </a>
                    </div>
                    <div class="card-body">
                      <div class="form-group mb-3">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" name="contact_name[]" aria-describedby="nameHelp">
                      </div>
                      <div class="form-group mb-3">
                        <label for="city">Phone Number</label>
                        <input type="text" class="form-control" name="contact_phone_number[]" aria-describedby="phonehelp">
                      </div>
                    </div>
                  </div>
 
                </div>
                <div class="add-child">
                  <a href="#" id="add-alternate-executor-button" onclick="addContactList()">
                    <span class="fas fa-plus"></span>
                    Add another contact
                  </a>
                </div>
                
                <script>
                  function addContactList() {
                    const contactContainer = document.getElementById('contact-container');
                    const contactList = document.querySelector('.contact_list'); // Select the first element with the class "contact_list"
                    const clonedContactList = contactList.cloneNode(true);

                    // Reset input values
                    const inputs = clonedContactList.querySelectorAll('input[type="text"]');
                    inputs.forEach(input => {
                      input.value = '';
                    });

                    // Attach the event listener for the "Remove" link
                    const removeLink = clonedContactList.querySelector('.r-button');
                    removeLink.addEventListener('click', function() {
                      removeContactList(this);
                    });

                    contactContainer.appendChild(clonedContactList);
                  }

                  function removeContactList(element) {
                    const contactList = element.closest('.contact_list');
                    contactList.parentNode.removeChild(contactList);
                  }

                </script>
                
                </div>
                <div class="col-md-4">
                  <div class="faq-box">
                    <div class="title">Frequently Asked Questions</div>
                      <div class="tooltip">
                          <p>Why might I want to include a contact list?</p>
                          <span class="tooltiptext">Before you stop receiving any life-sustaining treatment or artificially provided food and water, it is helpful for your doctor to discuss the good and bad points with your close friends and family.</span>
                      </div>
                  </div> 
                </div>
              </div>
            </div>
            <!-- step 6.1 -->
            <div class="step">
              <div class="row">
                <div class="col-md-8">
                  <div class="card-title">Signing Details</div>
                  <div class="card-sub-title">When will this document be signed?</div>
                  <div class="custom-m-status">
                    <input id="dunsure" name="remains" type="radio" value="Unsure" checked>
                    <label for="dunsure" class="marital-box" id="dunsure">
                       <p>Unsure</p>
                    </label>
                    <input id="sd" name="remains" type="radio" value="Specify date">
                    <label for="sd" class="marital-box" id="sd">
                       <p>Specify date</p>
                    </label>
                  </div>

                  <div id="specify_date_holder" class="form-group mb-3" style="display: none">
                    <label for="date">Date</label>
                    <input type="date" class="form-control modified-input" name="specify_date" id="specify_date" value="{{ date('Y-m-d') }}">
                  </div>
         

                 <div class="card-sub-title">Which city/town will you sign your Living Will in?</div>
                 <div class="form-group mb-3">
                    <label for="city">City/Town</label>
                    <input type="text" class="form-control modified-input" name="sl_city" id="sl_city" placeholder="City/Town">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="faq-box">
                    <div class="title">Frequently Asked Questions</div>
                      <div class="tooltip">
                          <p>What if I want to sign in a different state?</p>
                          <span class="tooltiptext">Your Living Will must be signed in the same state that you reside in. To change your resident state visit the "Location" step in the progress bar above.</span>
                      </div>
                  </div> 
                </div>
              </div>
              <script>
                var specifyDateRadio = document.getElementById('sd');
                var specifyDateHolder = document.getElementById('specify_date_holder');
                
                specifyDateRadio.addEventListener('change', function() {
                  if (this.checked) {
                    specifyDateHolder.style.display = 'block';
                  } else {
                    specifyDateHolder.style.display = 'none';
                  }
                });
                var unsureRadio = document.getElementById('dunsure');
  
                unsureRadio.addEventListener('change', function() {
                  if (this.checked) {
                    specifyDateHolder.style.display = 'none';
                    specifyDateInput.value = ''; // Clear the value when hiding the date field
                  }
                });
              </script>
            </div>

            <!-- step 7 Preview-->
            <div class="step">
            </div>
            <!-- start previous / next buttons -->
            <div id="buttonsection">
                <div class="form-footer d-flex">
                    <button type="button" class="btn btn-light btn-lg back-btn" id="prevBtn" onclick="nextPrev(-1)">Back</button>
                    <button type="submit" class="btn btn-light btn-lg" id="nextBtn">Save and Continue</button>
                    <button type="button" class="btn btn-light btn-lg skip-btn" id="skipBtn" onclick="skipStep()">Skip Step</button>
                </div>
            </div>
            <pre id="localstorage"></pre>
            <!-- end previous / next buttons -->
        </div>
       </div>
    </form>
</div>
<script>
  var currentTab = 0;
  var x = document.getElementsByClassName("step"); // Declare x as a global variable
  
  // Load previously stored form data on page load
  window.addEventListener("load", function() {
    var storedData = localStorage.getItem("livingWill");
    if (storedData) {
      var data = JSON.parse(storedData);
  
      // Populate the form fields with the stored data
      for (var i = 0; i < x.length; i++) {
        var stepFields = x[i].querySelectorAll('input, select, textarea');
        for (var j = 0; j < stepFields.length; j++) {
          var fieldName = stepFields[j].name;
          if (fieldName in data) {
            stepFields[j].value = data[fieldName];
          }
        }
      }
  
      // Determine the current step based on the stored data
      var currentStep = data["step"];
      if (currentStep) {
        currentTab = parseInt(currentStep) - 1;
      }
    }
  
    showTab(currentTab);
  });
  
  // Rest of the code...
  
  
  showTab(currentTab);
  
  function showTab(n) {
    // Hide all steps
    for (var i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
  
    // Show the current step
    x[n].style.display = "block";
  
    // Update the navigation buttons
    if (n == 0) {
      document.getElementById("skipBtn").style.display = "none";
      document.getElementById("prevBtn").style.display = "none";
    } else {
      document.getElementById("prevBtn").style.display = "inline";
    }
  
    if (n == (x.length - 2)) {
      document.getElementById("nextBtn").innerHTML = "Submit";
      document.getElementById("nextBtn").setAttribute("onclick", "handleFormSubmit(event)");
    } else {
      document.getElementById("nextBtn").innerHTML = "Save and Continue";
      document.getElementById("nextBtn").setAttribute("onclick", "submitForm()");
    }
  
    // Update the value of the hidden input field for "step" parameter
    var hiddenInput = document.getElementById("stepInput");
    hiddenInput.value = n + 1;
  
    fixStepIndicator(n);
  }
  
  function nextPrev(n) {
    x[currentTab].style.display = "none";
    currentTab = currentTab + n;
  
    if (currentTab >= x.length) {
      return false;
    }
  
    showTab(currentTab);
  }
  
  function fixStepIndicator(n) {
    var stepIndicators = document.getElementsByClassName("stepIndicator");
  
    for (var i = 0; i < stepIndicators.length; i++) {
      stepIndicators[i].className = stepIndicators[i].className.replace(" active", "");
      stepIndicators[i].className = stepIndicators[i].className.replace(" completed", "");
    }
  
    for (var i = 0; i < n; i++) {
      stepIndicators[i].className += " completed";
    }
  
    stepIndicators[n].className += " active";
  }
  
  function skipStep() {
    x[currentTab].style.display = "none";
    currentTab = currentTab + 1;
  
    if (currentTab >= x.length) {
      return false;
    }
  
    showTab(currentTab);
  }
  
  function skipStep2() {
    x[currentTab].style.display = "none";
    currentTab = currentTab + 2;
  
    if (currentTab >= x.length) {
      return false;
    }
  
    showTab(currentTab);
  }
  
  function submitForm() {
    handleFormSubmit(event); // Call the form submission handler directly
  }
  
  function handleFormSubmit(event) {
    event.preventDefault(); // Prevent default form submission behavior
  
    var form = document.querySelector(".livingWill");
    var formData = new FormData(form);
  
    // Extract the current step from the form data
    var step = formData.get('step');
  
    // Add the CSRF token to the request headers
    var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    var headers = new Headers({
      'X-CSRF-TOKEN': csrfToken
    });
  
    // Update the step value in the form data
    formData.set('step', step);
  
    if (currentTab < x.length - 1) {  //remove this for store skip step
      nextPrev(1);
      toastMixin.fire();
    }
  
    // Perform the form submission using AJAX
    fetch("{{ route('EndoflifePlanFormStore') }}", {
        method: "POST",
        body: formData,
        headers: headers
      })
      .then(function(response) {
        // Handle success
        if (response.ok) {
          return response.json();
        } else {
          throw new Error("Error submitting form");
        }
      })
      .then(function(data) {
        // Process the resolved JSON data
        console.log(data); // Log the response data to the console
        submittedData = data; // Store the submitted data
  
        if (currentTab < x.length - 1) {
          nextPrev(1);
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  
    // Remove empty fields from the form data
    for (var pair of formData.entries()) {
      if (pair[1] === '') {
        formData.delete(pair[0]);
      }
    }
  
    // Create a query string from the form data
    var queryString = new URLSearchParams(formData).toString();
  
    // Update the URL without reloading the page
    history.replaceState({}, '', window.location.pathname + '?' + queryString);
  
    // Save the form data to localStorage
    var dataToStore = {};
    formData.forEach(function(value, key) {
      dataToStore[key] = value;
    });
    localStorage.setItem("livingWill", JSON.stringify(dataToStore));
  }
  
</script>



@endsection
@section('page-js')
<script src="{{ url('frontend/assets/js/forms/living-will-multi-step.js?v=10.1') }}"></script>
<script src="{{ url('frontend/assets/js/forms/custom.js?v=10.3') }}"></script>
@endsection