@extends('layouts.frontend')

@section('title', '| Form Will & Estate')

@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">Last will and Testament</li>
             </ol>
          </nav>
       </div>
       <section id="form-sec-head">
          <div class="sec-title">LAST WILL AND TESTAMENT</div>
          <div class="form-stepIndicator-top">
             <div id="signUpForm">
               <style>

                  </style>
                <div class="form-header mb-4">
                   <span class="stepIndicator">Get Started</span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator">Family</span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator">Estate and Gifts</span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator emtyindicator"></span>
                   <span class="stepIndicator">Executor</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>
 <!-- start -->
    <div class="container">
   
      <form id="signUpForm" onsubmit="handleFormSubmit(event)">
      @csrf
       <div class="card">
          <div class="card-body">
                         <!-- step 1 -->
             <div class="step">
                <div class="card-title">Who is this Last Will for?</div>
                <div class="custom-m-status-self">
                   <input id="self" name="a-status" type="radio" value="self">
                   <label for="self">
                      <img src="{{url('frontend/images/group-7_.png')}}" alt="My Self">
                      <div class="box-title">My Self</div>
                   </label>
                   <input id="someone" name="a-status" type="radio" value="someone">
                   <label for="someone">
                      <img src="{{url('frontend/images/group-6.png')}}" alt="Someone else" class="someone-else-img">
                      <div class="box-title">Someone else</div>
                   </label>
                </div>
             </div>
             <!-- step 1.1 -->
             <div class="step">
                <div class="row">
                   <div class="col-md-8">
                      <div class="card-title">Marital Status</div>
                      <div class="card-sub-title">What is your marital status?</div>
                      <div class="custom-m-status">
                         <input id="single" name="m-status" type="radio" value="single">
                         <label for="single" class="marital-box" id="single-label">
                            <img src="{{url('frontend/images/icon/group-6.png')}}"/>
                            <p>Single</p>
                         </label>
                         <input id="married" name="m-status" type="radio" value="married">
                         <label for="married" class="marital-box" id="married-label">
                            <img src="{{url('frontend/images/icon/group-8.png')}}"/>
                            <p>Married</p>
                         </label>
                         <input id="commonLaw" name="m-status" type="radio" value="commonLaw">
                         <label for="commonLaw" class="marital-box" id="commonLaw-label">
                            <img src="{{url('frontend/images/icon/group-8-copy.png')}}"/>
                            <p>Common Law</p>
                         </label>
                      </div>
                   </div>
                   <div class="col-md-4 tooltip">
                      <div class="faq-box">
                         <div class="title">FAQ’s</div>
                         <p>What is a common law relationship?</p>
                         <span class="tooltiptext">For the purpose of creating the Last Will, a common law relationship is defined as a relationship between two people that appears to be a marriage, but the parties are not married. It is described as a committed physical and emotional relationship with the expectation of permanence. </br> </br> Common law partners do not have to be living under the same roof to be recognized by the law.</span>
                      </div>
                   </div>
                </div>
             </div>
             <!-- step 1.2 -->
             <div class="step">
                <div class="card-title">Your Details</div>
                <div class="card-sub-title">What are your details?</div>
                <div class="form-group mb-3">
                   <label for="name">Name</label>
                   <input type="text" class="form-control modified-input" name="full_name" aria-describedby="nameHelp" >
                   <small id="nameHelp" class="form-text text-muted">e.g. William Timothy Smith</small>
                </div>
                <div class="form-group mb-3">
                   <label for="city">City/Town</label>
                   <input type="text" class="form-control modified-input" name="city"  aria-describedby="cityHelp" placeholder="Any City">
                   <small id="cityHelp" class="form-text text-muted d-none">city</small>
                </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>
           
             <!-- step 2 -->
             <div class="step">
                <div class="row">
                   <div class="col-md-8">
                      <div class="card-title">Spouse Details</div>
                      <div class="card-sub-title">What is your spouse's name?</div>
                      
                      <div class="form-group mb-3">
                         <label for="name">Name</label>
                         <input type="text" class="form-control" name="spouse_name" aria-describedby="nameHelp" >
                         <small id="nameHelp" class="form-text text-muted">e.g. William Timothy Smith</small>
                      </div> 
                   </div>
                </div>
             </div>
             
             <!-- step 2.1 -->
             <div class="step">
                <div class="row">
                   <div class="col-md-8">
                      <div class="card-title">Children</div>
                      <div class="card-sub-title">Do you have children?</div>
                      <div class="custom-button-yn">
                         <input id="children-toggle-on" name="children" type="radio" checked>
                         <label for="children-toggle-on">Yes</label>
                         <input id="children-toggle-off" name="children" type="radio">
                         <label for="children-toggle-off">No</label>
                      </div>
                        <div id="children-section-details">
                              <div class="card-sub-title">Who are the your children?</div>
                              <div id="children-container" class="field-container">
                                 <div class="card child mb-3" id="child">
                                    <div class="card-header d-flex justify-content-between">
                                       <div class="card-title m-0">First Child Name</div>
                                       <a class="r-button"><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" name="child_name[]" id="child_name"  class="form-control" aria-describedby="nameHelp" >
                                             <small id="nameHelp" class="form-text text-muted">e.g. William Timothy Smith</small>
                                       </div>
                                       <div class="card-sub-title">Is this child a dependent?</div>
                                        <div class="custom-button-yn">
                                             <input id="dchild-on" name="dchild[]" value="yes" type="radio">
                                             <label for="dchild-on">Yes</label>
                                             <input id="dchild-off" name="dchild[]" value="no" type="radio">
                                             <label for="dchild-off">No</label>
                                       </div> 
                                    </div>
                                 </div>
                           </div>
                           <div class="add-child">
            
                                 <a href="#" id="add-another-child" onclick="addChild()" class="add-button"><span class="fas fa-plus"></span>Add Another Child</a>

                           </div>
                        </div>
                    
                   </div>
                   <div class="col-md-4">
                      <div class="faq-box">
                         <div class="title">FAQ’s</div>
                         <p>Should I list stepchildren?</p>
                      </div>
                   </div>
                </div>
             </div>
             
             <!-- step 3 -->
             <div class="step">
                 <div class="row">
                   <div class="col-md-8">
                       <div class="card-title">Estate Assets</div>
                       <div class="card-sub-title">Do you want your spouse to receive the assets of your estate excluding any specific gifts to others?</div>
                       <div class="card-minsub">You will be asked to list any specific gifts later.</div>
                       <div class="custom-button-yn mb-5">
                        <input type="radio" id="gift-l-y" name="giftl-status" value="yes" checked>
                         <label for="gift-l-y">Yes</label>
                         <input type="radio" id="gift-l-n" name="giftl-status" value="no">
                         <label for="gift-l-n">No</label>
                       </div>
                   </div>
                   <div class="col-md-4">
                       <div class="faq-box">
                         <div class="title">FAQ’s</div>
                         <p>What if my spouse dies first?</p>
                       </div>
                   </div>
                 </div>
             </div>
       
               
             <!-- step 3.1 -->
             <div class="step">
                <div class="row">
                   <div class="col-md-8">
                      <div class="card-title">If No Living Beneficiaries</div>
                      <div class="card-sub-title">If your spouse, children and grandchildren pass away before you, how will your estate be distributed?</div>
                      <div class="long-btn-card">
                         <div class="custom-button-yn">
                             <input type="radio" id="beneficiaries-on" name="beneficiaries" value="equally" checked>
                             <label for="beneficiaries-on">Divided Equally among your  parents/ Siblings and your spouse's parents/siblings</label>
                             <input type="radio" id="beneficiaries-off" name="beneficiaries" value="someone_else">
                             <label for="beneficiaries-off">Given to someone else</label>
                         </div>
                      </div>
                        <div id="add-beneficiary-container-card">
                           <div id="beneficiary-container">
                              <div class="card mb-3" id="beneficiary">
                                 <div class="card-header d-flex justify-content-between">
                                    <div class="card-title m-0">Beneficiary Details</div>
                                    <a class="r-button" onclick="removeBeneficiary(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="beneficiary_name[]" id="beneficiary_name" aria-describedby="nameHelp" >
                                          <small id="nameHelp" class="form-text text-muted">e.g. William Timothy Smith</small>
                                    </div>
                                    <div class="form-group mb-3">
                                          <label for="city">City/Town</label>
                                          <input type="text" class="form-control" name="beneficiary_city[]" id="beneficiary_city"  aria-describedby="cityHelp" placeholder="Any City">
                                          <small id="cityHelp" class="form-text text-muted d-none">city</small>
                                    </div>
                                    <div class="form-group mb-3">
                                          <label for="state">State</label>
                                          <input type="text" class="form-control" name="beneficiary_state[]" id="beneficiary_state" placeholder="State">
                                    </div>
                                    <div class="card-sub-title">How much of the estate will you give to this beneficiary?</div>
                                    <div class="share-input d-flex"> 
                                          Estate Share: <input type="text" name="beneficiary_share[]" id="share-e"> out of 100
                                    </div> 
                                 </div> 
                              </div>
                           </div>
                           <div class="add-child">
                                 <a  onclick="addBeneficiary()"><span class="fas fa-plus"></span>Add Beneficiary Details</a>
                           </div>
                        </div>
                   </div>
                   <div class="col-md-4">
                      <div class="faq-box">
                         <div class="title">FAQ’s</div>
                         <p>What is a wipeout beneficiary?</p>
                      </div>
                   </div>
                </div>
             </div>
            
             <!-- step 3.2 -->
             <div class="step">
                <div class="row">
                   <div class="col-md-8">
                      <div class="card-title">Gifts</div>
                      <div class="card-sub-title">Do you want to leave any specific gifts in your Will?</div>
                      <div class="custom-button-yn">
                        <input id="gifts-y" name="gift" type="radio" value="yes">
                        <label for="gifts-y">Yes</label>
                        <input id="gifts-n" name="gift" type="radio" value="no">
                        <label for="gifts-n">No</label>
                     </div>                     
                   </div>
                   <div class="col-md-4">
                      <div class="faq-box">
                         <div class="title">FAQ’s</div>
                         <p>Is there anything i cannot give away?</p>
                      </div>
                   </div>
                </div>
             </div>
         
              
             <!-- step 3.3 -->
             <div class="step">
                      <div class="card-title">Inheritance Delay</div>
                      <div class="card-sub-title">Do you want any minor beneficiaries to wait until a certain age before<br> they receive their inheritance?</div>
                      <div class="custom-button-yn">
                         <input id="inheritance-y" name="inheritance" value="yes" type="radio">
                         <label for="inheritance-y">Yes</label>
                         <input id="inheritance-n" name="inheritance" value="no" type="radio">
                         <label for="inheritance-n">No</label>
                      </div>

             </div>
      
             
             <!-- step 4 -->
             <div class="step">
                <div class="row">
                   <div class="col-md-8">
                      <div class="card-title">Executor Details</div>
                      <div class="card-sub-title">Who will manage your estate?</div>
                      <div class="card-minsub">If you select Yes, your spouse will be named the executor of your Will.</div>
                      <div class="custom-button-yn">
                         <input id="executor-y" name="executor" value="yes" type="radio" checked>
                         <label for="executor-y">Yes</label>
                         <input id="executor-n" name="executor" value="no" type="radio">
                         <label for="executor-n">No</label>
                      </div>
                      <div class="card-sub-title">Would you like to add another executor?</div>
                      <div class="custom-button-yn">
                         <input id="other-executor-y" name="other-executor" value="yes" type="radio" checked>
                         <label for="other-executor-y">Yes</label>
                         <input id="other-executor-n" name="other-executor" value="no" type="radio">
                         <label for="other-executor-n">No</label>
                      </div>
                      <div id="other-executorContainer">
                        <div class="card-sub-title">Who will be the other executor?</div>
                        <div class="card" id="child">
                           <div class="card-header d-flex justify-content-between">
                              <div class="card-title m-0">Executor</div>
                           </div>
                           <div class="card-body">
                              <div class="form-group mb-3">
                                    <label for="name">Name</label>
                                    <input type="text" class="form-control" name="executor_name[]" id="executor_name" aria-describedby="nameHelp">
                                    <small id="nameHelp" class="form-text text-muted">e.g. William Timothy Smith</small>
                              </div>
                              <div class="form-group mb-3">
                                    <label for="city">City/Town</label>
                                    <input type="text" class="form-control" name="executor_city[]" id="executor_city"  aria-describedby="cityHelp" placeholder="Northridge">
                                    <small id="cityHelp" class="form-text text-muted d-none">city</small>
                              </div>
                              <div class="form-group mb-3">
                                    <label for="state">State</label>
                                    <input type="text" class="form-control"  name="executor_state[]" id="executor_state" placeholder="California">
                              </div>
                           </div> 
                        </div>
                      </div>
                   </div>
                   <div class="col-md-4">
                      <div class="faq-box">
                         <div class="title">FAQ’s</div>
                         <p>Who cannot be an executor?</p>
                         <p>Can the executor also be a beneficiary or receive gifts in the Will?</p>
                         <p>Can I have more than one executor?</p>
                      </div>
                   </div>
                </div>
             </div>
      
             <!-- step 4.1 -->
             <div class="step">
                <div class="row">
                   <div class="col-md-8">
                      <div class="card-title">Backup Executor</div>
                      <div class="card-sub-title">Do you want to name an alternative executor in case your <br> original executors are unavailable?</div>
                      <div class="custom-button-yn mb-5">
                         <input id="backup-executor-y" name="backup-executor" value="yes" type="radio" checked>
                         <label for="backup-executor-y">Yes</label>
                         <input id="backup-executor-n" name="backup-executor" value="no" type="radio">
                         <label for="backup-executor-n">No</label>
                      </div>
                        <div id="backup-executor-section-details">
                           <div id="alternate-executor-container">
                              <div class="card alternate-executor mb-3" id="child">
                              <div class="card-header d-flex justify-content-between">
                                 <div class="card-title m-0">Alternate Executor Details</div>
                                 <a class="r-button" onclick="removeAlternateExecutor(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="alternate_executor_name[]" id="alternate_executor_name" aria-describedby="nameHelp" >
                                    <small id="nameHelp" class="form-text text-muted">e.g. William Timothy Smith</small>
                                 </div>
                                 <div class="form-group mb-3">
                                    <label for="city">City/Town</label>
                                    <input type="text" class="form-control" name="alternate_executor_city[]" id="alternate_executor_city" aria-describedby="cityHelp" placeholder="Northridge">
                                    <small id="cityHelp" class="form-text text-muted d-none">city</small>
                                 </div>
                                 <div class="form-group mb-3">
                                    <label for="state">State</label>
                                    <input type="text" class="form-control"  name="alternate_executor_state[]" id="alternate_executor_state" placeholder="California">
                                 </div>
                              </div>
                              </div>
                           </div>
                           
                           <div class="add-child">
                              <a href="#" id="add-alternate-executor-button" onclick="addAlternateExecutor()">
                              <span class="fas fa-plus"></span>Add another alternate executor
                              </a>
                           </div>
                        </div>

                   </div>
                   <div class="col-md-4">
                      <div class="faq-box">
                         <div class="title">FAQ’s</div>
                         <p>What is an alternate executor?</p>
                         <p>Can the alternate executor also be a beneficiary in the Will?</p>
                      </div>
                   </div>
                </div>
             </div>

          
      
             <!-- step 5 -->
             <div class="step">
                <div class="row">
                   <div class="col-md-8">
                      <div class="card-title">Pets</div>
                      <div class="card-sub-title">Do you have any pets?</div>
                      <div class="custom-button-yn mb-5">
                         <input id="pets-y" name="pets" value="yes" type="radio" checked>
                         <label for="pets-y">Yes</label>
                         <input id="pets-n" name="pets" value="no" type="radio">
                         <label for="pets-n">No</label>
                      </div>
                     <div id="pets-section-details">
                        <div id="pet-container">
                           <div class="card pets-details mb-3" id="child">
                           <div class="card-header d-flex justify-content-between">
                              <div class="card-title m-0">Pet Details</div>
                              <a class="r-button" onclick="removePet(this)">
                                 <span class="fas fa-times"></span>
                                 <span class="remove">Remove</span>
                              </a>
                           </div>
                           <div class="card-body">
                              <div class="form-group mb-3">
                                 <input type="text" class="form-control" name="petname[]" id="petname" aria-describedby="nameHelp" placeholder="Pet Name">
                                 <small id="nameHelp" class="form-text text-muted">e.g. Lassie</small>
                              </div>
                              <div class="form-group mb-3">
                                 <input type="text" class="form-control" name="petDescription[]" id="petDescription" aria-describedby="cityHelp" placeholder="Pet Description">
                                 <small id="cityHelp" class="form-text text-muted">e.g. Female German Shepherd</small>
                              </div>
                              <div class="input-group mb-3">
                                 <span class="input-group-text">$</span>
                                 <input type="text" class="form-control" name="petFundAmount[]" id="petFundAmount" placeholder="Pet Fund Amount">
                              </div>
                              <div class="card-sub-title">Do you want to appoint a pet caretaker now?</div>
                              <div class="custom-button-yn mb-5">
                                 <input id="pets-care-y-0" name="pets-care[]" type="radio" value="yes">
                                 <label for="pets-care-y-0">Yes</label>
                                 <input id="pets-care-n-0" name="pets-care[]" type="radio" value="no">
                                 <label for="pets-care-n-0">No</label>
                              </div>
                           </div>
                           </div>
                        </div>
                        
                        <div class="add-child">
                           <a href="#" onclick="addPet()"><span class="fas fa-plus"></span>Add Pet</a>
                        </div>
                     </div>
                      
                      
                   </div>
                   <div class="col-md-4">
                   </div>
                </div>
             </div> 

         
             <!-- step 5.1 -->
             <div class="step">
                <div class="row">
                   <div class="col-md-8">
                      <div class="card-title">Additional Details</div>
                      <div class="card-sub-title">Do you want to include any additional instructions?</div>
                      <div class="custom-button-yn">
                         <input id="ad-details-y" name="ad-details" value="yes" type="radio" checked>
                         <label for="ad-details-y">Yes</label>
                         <input id="ad-details-n" name="ad-details" value="no" type="radio">
                         <label for="ad-details-n">No</label>
                      </div>
                      <div id="ad-details-section" class="form-group my-5">
                        <input type="text" class="form-control" name="additional-notes" id="additional-notes" placeholder="Additional Details">
                      </div>
                   </div>
                   <div class="col-md-4">
                      <div class="faq-box">
                         <div class="title">FAQ’s</div>
                         <p>Why shouldn't funeral instructions be included?</p>
                      </div>
                   </div>
                </div>
             </div>
                                   
             <!-- Start final step -->
            <div class="step" id="finalStep">
               <div class="row">
                  <div class="col-md-12">
                     <div class="card-title">Final Step</div>
                     <div class="card-sub-title">Thank you for submitting the form.</div>
                     <div id="previewData"></div>
                  </div>
               </div>
            </div>
         <!-- End final step -->

             <!-- 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="button" class="btn btn-light btn-lg" id="nextBtn" onclick="nextPrev(1)">Save and Continue</button>
                  <button type="button" class="btn btn-light btn-lg skip-btn" id="skipBtn" onclick="skipStep()">Skip Step</button>
                  
               </div>
             </div>
             <!-- end previous / next buttons -->
          </div>
       </div>
    </form>

 </div>

@endsection
@section('page-js')
<script>
var currentTab = 0;
      showTab(currentTab); 
      function showTab(n) {
         var x = document.getElementsByClassName("step");
         x[n].style.display = "block";
         if (n == 0) {
           document.getElementById("prevBtn").style.display = "none";
         } else {
           document.getElementById("prevBtn").style.display = "inline";
         }
         if (n == (x.length - 2)) {
           document.getElementById("nextBtn").innerHTML = "Submit";
           nextBtn.setAttribute("onclick", "submitForm()");
         } else {
           document.getElementById("nextBtn").innerHTML = "Save and Continue";
         }
         fixStepIndicator(n)
      }
       
      function nextPrev(n) {
         var x = document.getElementsByClassName("step");
         //if (n == 1 && !validateForm()) return false;
         x[currentTab].style.display = "none";
         currentTab = currentTab + n;
         if (currentTab >= x.length) {
           // ... the form gets submitted:
           //document.getElementById("signUpForm").submit();
           nextBtn.setAttribute("onclick", "submitForm()");
           return false;
         }
         showTab(currentTab);
      }
       
      function validateForm() {
         var x, y, i, valid = true;
         x = document.getElementsByClassName("step");
         y = x[currentTab].getElementsByTagName("input");
         for (i = 0; i < y.length; i++) {
           if (y[i].value == "") {
             y[i].className += " invalid";
             valid = false;
           }
         }
         if (valid) {
           document.getElementsByClassName("stepIndicator")[currentTab].className += " finish";
         }
         return valid;
      }
       
      function fixStepIndicator(n) {
         var i, x = document.getElementsByClassName("stepIndicator");
         for (i = 0; i < x.length; i++) {
            x[i].className = x[i].className.replace(" active", "");
            x[i].className = x[i].className.replace(" completed", "");
         }
         for (i = 0; i < n; i++) {
            x[i].className += " completed";
         }
         x[n].className += " active";
      }

      function skipStep() {
            var x = document.getElementsByClassName("step");
            x[currentTab].style.display = "none";
            currentTab = currentTab + 1;
            if (currentTab >= x.length) {
               document.getElementById("signUpForm").submit();
               return false;
            }
            showTab(currentTab);
      }

      function submitForm() {
         
         var form = document.getElementById("bb");
         var nextBtn = document.getElementById("nextBtn");
         nextBtn.setAttribute('type', 'submit');
         form.addEventListener("submit", handleFormSubmit);
         form.submit();
      }

      function handleFormSubmit(event) {
         event.preventDefault();
         var formData = new FormData(event.target);
         
         // Perform the final form submission using AJAX
         fetch("{{ route('willsAndEstateFormStore') }}", {
            method: "POST",
            body: formData
         })
            .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
               displayPreviewData(submittedData);
               document.getElementById("buttonsection").style.display = "none";
            })
            .catch(function(error) {
               console.log(error);
            });
            nextPrev(1);
      }

      function displayPreviewData(submittedData) {
      var previewData = document.getElementById("previewData");
      var dataHtml = '<div class="row mt-4">';

      // Other fields
      dataHtml += '<div class="col-md-12">';
      dataHtml += '<div class="card mb-4">';
      dataHtml += '<div class="card-header">';
      dataHtml += '<h2 class="card-title">Preview</h2>';
      dataHtml += '</div>';
      dataHtml += '<div class="card-body">';
      dataHtml += '<div class="row">';
      dataHtml += '<div class="col-md-12">';
      dataHtml += '<ul>';

      // Iterate through the other data fields

      // Define a mapping object for field names
      var fieldNames = {
         a_status: 'Who is this Last Will for',
         m_status: 'Marital Status',
         full_name: 'Full Name',
         city: 'City',
         state: 'State',
         spouse_name: 'Spouse Name',
         gift_l: 'Gift',
         asset_description: 'Asset Description',
         additional_notes: 'Additional Notes',
         inheritance_delay: 'Inheritance Delay',
         manage_estate: 'Manage Estate',
         backup_executor: 'Backup Executor',
         pets_status: 'Pets Status'
         // Add more fields as needed
      };
      // Define the width for field names
      var fieldNameWidth = '20%';
      // Iterate through the other data fields
      for (var key in submittedData) {
         if (submittedData.hasOwnProperty(key) && key !== "children" && key !== "executors" && key !== "beneficiaries" && key !== "alternate_executors" && key !== "pets" && key !== "id") {
            // Get the corresponding field name based on the key
            var fieldName = fieldNames[key] || key; // Use the specific field name if available, otherwise use the key as fallback

            dataHtml += '<li class="list-group-item">';
            dataHtml += '<strong class="fw-bold d-inline-block" style="width: ' + fieldNameWidth + '">' + fieldName + '</strong>: ' + submittedData[key];
            dataHtml += '</li>';
         }
      }

      dataHtml += '</ul>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';

      // Children
      dataHtml += '<div class="col-md-12">';
      dataHtml += '<div class="card mb-4">';
      dataHtml += '<div class="card-header">';
      dataHtml += '<h2 class="card-title">Childrens</h2>';
      dataHtml += '</div>';
      dataHtml += '<div class="card-body">';
      dataHtml += '<div class="row">';
      dataHtml += '<div class="col-md-12">';
      var parsedChildren = JSON.parse(submittedData.children);
      if (Array.isArray(parsedChildren) && parsedChildren.length > 0) {
         dataHtml += '<ul class="list-group">'; // Add the list-group class
         parsedChildren.forEach(function (child) {
            dataHtml += '<li class="list-group-item">'; // Add the list-group-item class
            dataHtml += '<strong>Name:</strong> ' + child.name + '<br>';
            dataHtml += '<strong>Dependent:</strong> ' + child.dependent;
            dataHtml += '</li>';
         });
         dataHtml += '</ul>';
      } else {
         dataHtml += '<p>No children added.</p>';
      }
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';

      // Executors
      dataHtml += '<div class="col-md-12">';
      dataHtml += '<div class="card mb-4">';
      dataHtml += '<div class="card-header">';
      dataHtml += '<h2 class="card-title">Executors</h2>';
      dataHtml += '</div>';
      dataHtml += '<div class="card-body">';
      dataHtml += '<div class="row">';
      dataHtml += '<div class="col-md-12">';
      var parsedExecutors = JSON.parse(submittedData.executors);
      if (Array.isArray(parsedExecutors) && parsedExecutors.length > 0) {
         dataHtml += '<ul class="list-group">'; // Add the list-group class
         parsedExecutors.forEach(function (executor) {
            dataHtml += '<li class="list-group-item">'; // Add the list-group-item class
            dataHtml += '<strong>Name:</strong> ' + executor.name + '<br>';
            dataHtml += '<strong>City:</strong> ' + executor.city + '<br>';
            dataHtml += '<strong>State:</strong> ' + executor.state;
            dataHtml += '</li>';
         });
         dataHtml += '</ul>';
      } else {
         dataHtml += '<p>No executors added.</p>';
      }
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';

      // Beneficiaries
      dataHtml += '<div class="col-md-12">';
      dataHtml += '<div class="card mb-4">';
      dataHtml += '<div class="card-header">';
      dataHtml += '<h2 class="card-title">Beneficiaries</h2>';
      dataHtml += '</div>';
      dataHtml += '<div class="card-body">';
      dataHtml += '<div class="row">';
      dataHtml += '<div class="col-md-12">';
      var parsedBeneficiaries = JSON.parse(submittedData.beneficiaries);
      if (Array.isArray(parsedBeneficiaries) && parsedBeneficiaries.length > 0) {
         dataHtml += '<ul class="list-group">'; // Add the list-group class
         parsedBeneficiaries.forEach(function (beneficiary) {
            dataHtml += '<li class="list-group-item">'; // Add the list-group-item class
            dataHtml += '<strong>Name:</strong> ' + beneficiary.name + '<br>';
            dataHtml += '<strong>City:</strong> ' + beneficiary.city + '<br>';
            dataHtml += '<strong>State:</strong> ' + beneficiary.state + '<br>';
            dataHtml += '<strong>Share:</strong> ' + beneficiary.share;
            dataHtml += '</li>';
         });
         dataHtml += '</ul>';
      } else {
         dataHtml += '<p>No beneficiaries added.</p>';
      }
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';

      // Alternate Executors
      dataHtml += '<div class="col-md-12">';
      dataHtml += '<div class="card mb-4">';
      dataHtml += '<div class="card-header">';
      dataHtml += '<h2 class="card-title">Alternate Executors</h2>';
      dataHtml += '</div>';
      dataHtml += '<div class="card-body">';
      dataHtml += '<div class="row">';
      dataHtml += '<div class="col-md-12">';
      var parsedAlternateExecutors = JSON.parse(submittedData.alternate_executors);
      if (Array.isArray(parsedAlternateExecutors) && parsedAlternateExecutors.length > 0) {
         dataHtml += '<ul class="list-group">'; // Add the list-group class
         parsedAlternateExecutors.forEach(function (executor) {
            dataHtml += '<li class="list-group-item">'; // Add the list-group-item class
            dataHtml += '<strong>Name:</strong> ' + executor.name + '<br>';
            dataHtml += '<strong>City:</strong> ' + executor.city + '<br>';
            dataHtml += '<strong>State:</strong> ' + executor.state;
            dataHtml += '</li>';
         });
         dataHtml += '</ul>';
      } else {
         dataHtml += '<p>No alternate executors added.</p>';
      }
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';

      // Pets
      dataHtml += '<div class="col-md-12">';
      dataHtml += '<div class="card mb-4">';
      dataHtml += '<div class="card-header">';
      dataHtml += '<h2 class="card-title">Pets</h2>';
      dataHtml += '</div>';
      dataHtml += '<div class="card-body">';
      dataHtml += '<div class="row">';
      dataHtml += '<div class="col-md-12">';
      var parsedPets = JSON.parse(submittedData.pets);
      if (Array.isArray(parsedPets) && parsedPets.length > 0) {
         dataHtml += '<ul class="list-group">'; // Add the list-group class
         parsedPets.forEach(function (pet) {
            dataHtml += '<li class="list-group-item">'; // Add the list-group-item class
            dataHtml += '<strong>Name:</strong> ' + pet.name + '<br>';
            dataHtml += '<strong>Description:</strong> ' + pet.description + '<br>';
            dataHtml += '<strong>Fund Amount:</strong> ' + pet.fund_amount + '<br>';
            dataHtml += '<strong>Caretaker:</strong> ' + pet.caretaker;
            dataHtml += '</li>';
         });
         dataHtml += '</ul>';
      } else {
         dataHtml += '<p>No pets added.</p>';
      }
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';
      dataHtml += '</div>';

      dataHtml += '</div>'; // Close the row
      dataHtml += '</div>'; // Close the row

      previewData.innerHTML = dataHtml;
      }

// Call the displayPreviewData function when the page loads, in case there is already submitted data
displayPreviewData();

</script>


<script>

function addChild() {
  const container = document.getElementById('children-container');
  const index = container.querySelectorAll('.card.child').length;

  // Duplicate the child card template
  const childCard = document.getElementById('child').cloneNode(true);
  childCard.classList.add('child');
  childCard.setAttribute('data-index', index);

  // Reset input values
  const inputs = childCard.querySelectorAll('input');
  inputs.forEach(input => {
    input.value = '';
    input.checked = false; // Uncheck radio buttons
  });

  // Update the child name input name attribute
  const nameInput = childCard.querySelector('input[type="text"]');
  //nameInput.setAttribute('name', `children[${index}][name]`);

  // Update the radio buttons' name attribute and IDs
  const radioButtons = childCard.querySelectorAll('input[type="radio"]');
  radioButtons.forEach(radio => {
    const newId = radio.getAttribute('id') + '_' + index;
    
    
    radio.setAttribute('id', newId);
    radio.setAttribute('name', `dchild[${index}]`);
    radio.setAttribute('value', 0);  
    if(newId == "dchild-on_"+index){
      radio.setAttribute('value', 1);  
    }
    radio.nextElementSibling.setAttribute('for', newId);
  });

  // Add event listener to remove button
  const removeButton = childCard.querySelector('.remove');
  removeButton.addEventListener('click', removeChild);

  container.appendChild(childCard);
}


   //  function addChild() {
   //      const container = document.getElementById('children-container');
   //      const index = container.querySelectorAll('.card.child').length;

   //      // Duplicate the child card template
   //      const childCard = document.getElementById('child').cloneNode(true);
   //      childCard.classList.add('child');
   //      childCard.setAttribute('data-index', index);

   //      // Reset input values
   //      const inputs = childCard.querySelectorAll('input');
   //       inputs.forEach(input => {
   //       input.value = '';
   //       });

   //      // Update the child name input name attribute
   //      const nameInput = childCard.querySelector('input[type="text"]');
   //      nameInput.setAttribute('name', `children[${index}][name]`);

   //      // Add event listener to remove button
   //      const removeButton = childCard.querySelector('.remove');
   //      removeButton.addEventListener('click', removeChild);

   //      container.appendChild(childCard);
   //  }

    function removeChild(event) {
        const childCard = event.target.closest('.card.child');
        childCard.parentNode.removeChild(childCard);
    }


    function addBeneficiary() {
        const container = document.getElementById('beneficiary-container');
        const beneficiaryCard = document.getElementById('beneficiary').cloneNode(true);
        beneficiaryCard.removeAttribute('id');
        
        // Reset input values
        const inputs = beneficiaryCard.querySelectorAll('input');
        inputs.forEach(input => {
            input.value = '';
         });
    
        container.appendChild(beneficiaryCard);
    }

    // Function to remove a beneficiary card
    function removeBeneficiary(element) {
        const card = element.closest('.card');
        card.remove();
    }

    function addAlternateExecutor() {
        const container = document.getElementById('alternate-executor-container');
        const executorCard = document.querySelector('.alternate-executor').cloneNode(true);

        // Reset input values
        const inputs = executorCard.querySelectorAll('input');
        inputs.forEach(input => {
            input.value = '';
        });

        container.appendChild(executorCard);
    }

    // Function to remove an alternate executor card
      function removeAlternateExecutor(element) {
         const card = element.closest('.alternate-executor');
         card.remove();
      }

      function addPet() {
         const container = document.getElementById('pet-container');
         const petCard = document.querySelector('.pets-details').cloneNode(true);

         // Reset input values
         const inputs = petCard.querySelectorAll('input');
         inputs.forEach(input => {
            input.value = '';
         });

         // Add remove option
         const removeButton = document.createElement('a');
         removeButton.href = '#';
         removeButton.className = 'r-button';
         removeButton.innerHTML = '<span class="fas fa-times"></span><span class="remove">Remove</span>';
         removeButton.addEventListener('click', function() {
            removePet(this);
         });
         

         const cardHeader = petCard.querySelector('.card-header');
         cardHeader.innerHTML = '<div class="card-title m-0">Pet Details</div>';
         cardHeader.appendChild(removeButton);

         container.appendChild(petCard);
      }

      // Function to remove a pet card
      function removePet(button) {
         const petCard = button.closest('.pets-details');
         petCard.remove();
      }

</script>
<script>
   // handle Other children radio button
   var yesRadio = document.getElementById('children-toggle-on');
   var noRadio = document.getElementById('children-toggle-off');
   var childrenContainer = document.getElementById('children-section-details');

   yesRadio.addEventListener('change', function() {
      if (this.checked) {
         childrenContainer.style.display = 'block';
      }
   });

   noRadio.addEventListener('change', function() {
      if (this.checked) {
         childrenContainer.style.display = 'none';
      }
   });
</script>
<script>
    // handle Other beneficiaries radio button
   var beneficiariesYesRadio = document.getElementById('beneficiaries-on');
   var beneficiariesNoRadio = document.getElementById('beneficiaries-off');
   var beneficiaryContainer = document.getElementById('add-beneficiary-container-card');
   beneficiaryContainer.style.display = 'none';

   beneficiariesYesRadio.addEventListener('change', function() {
      if (this.checked) {
         beneficiaryContainer.style.display = 'none';
      }
   });

   beneficiariesNoRadio.addEventListener('change', function() {
      if (this.checked) {
         beneficiaryContainer.style.display = 'block';
      }
   });
</script>
<script>
   // handle Other executor radio button
   var otherExecutorY = document.getElementById('other-executor-y');
   var otherExecutorN = document.getElementById('other-executor-n');
  
   var other_executorContainer = document.getElementById('other-executorContainer');

   otherExecutorY.addEventListener('change', function() {
      if (this.checked) {
         other_executorContainer.style.display = 'block';
      }
   });

   otherExecutorN.addEventListener('change', function() {
     
      if (this.checked) {
         other_executorContainer.style.display = 'none';
        
      }
   });
</script>
<script>
   // handle backup executor radio button
   var backupExecutorYesRadio = document.getElementById('backup-executor-y');
   var backupExecutorNoRadio = document.getElementById('backup-executor-n');
   var backupExecutorContainer = document.getElementById('backup-executor-section-details');

   backupExecutorYesRadio.addEventListener('change', function() {
      if (this.checked) {
         backupExecutorContainer.style.display = 'block';
      }
   });

   backupExecutorNoRadio.addEventListener('change', function() {
      if (this.checked) {
         backupExecutorContainer.style.display = 'none';
      }
   });
</script>
<script>
   // handle backup Pets radio button
   var PetsYesRadio = document.getElementById('pets-y');
   var PetsNoRadio = document.getElementById('pets-n');
   var petsContainer = document.getElementById('pets-section-details');

   PetsYesRadio.addEventListener('change', function() {
      if (this.checked) {
         petsContainer.style.display = 'block';
      }
   });

   PetsNoRadio.addEventListener('change', function() {
      if (this.checked) {
         petsContainer.style.display = 'none';
      }
   });
</script>
<script>
   //handle Additional details radio button
   var additionalyesRadio = document.getElementById('ad-details-y');
   var additionalnoRadio = document.getElementById('ad-details-n');
   var additionalContainer = document.getElementById('ad-details-section');

   additionalyesRadio.addEventListener('change', function() {
      if (this.checked) {
         additionalContainer.style.display = 'block';
      }
   });

   additionalnoRadio.addEventListener('change', function() {
      if (this.checked) {
         additionalContainer.style.display = 'none';
      }
   });
</script>
@endsection