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

@section('title', '| Last Will And Testament')

@section('content')
@include('frontend.forms.v2.Will-Testament.stepIndicator')
    <form action="{{route('willsAndTestFormcreate')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="2">
      <div class="multiple-form dashboard-radio">
         <h4>Children</h4>
         <p>Do you have children?</p>

         <div class="form">
            <div class="row">
               <div class="col-12">
                  <div class="dashboard-radio-form">
                     <div class="form-check">
                     <input class="form-check-input" id="children-toggle-on" name="children" type="radio" value="yes" {{ isset($willsAndTest->children_status) &&  $willsAndTest->children_status == "yes" ? 'checked' : ''}}>
                     <label for="children-toggle-on"><p>Yes</p></label>
                     </div>
                     <div class="form-check">
                     <input class="form-check-input" id="children-toggle-off" name="children" value="no" type="radio" {{ isset($willsAndTest->children_status) &&  $willsAndTest->children_status == "no" ? 'checked' : ''}}>
                     <label for="children-toggle-off"><p>No</p></label>
                     </div>

                  </div>
               </div>
            </div>

            <div class="row">

               <div id="children-section-details" class="child-card-holder">
                  <p>Who are your children?</p>
                  <div id="children-container">
                  @if(empty($willsAndTest->children))

                  <div class="card list mb-3" id="child">
                        <div class="card-header">
                           <div class="card-title m-0">Child Name</div>
                           <a class="r-button" onclick="removetList(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" name="child_name[]" id="child_name"   aria-describedby="nameHelp" >
                                 <small id="nameHelp" class="form-text text-muted">e.g. William Timothy Smith</small>
                           </div>
                           <p>Is this child a dependent?
                              <a tabindex="0"
                                 class="info-icon"
                                 role="button"
                                 data-bs-toggle="popover"
                                 data-bs-html="true"
                                 data-bs-trigger="focus"
                                 title="Dependent Child Criteria"
                                 data-bs-content="
                                    <p>Dependent children include those who meet any of the following criteria:</p>
                                    <ul class='popover-list'>
                                       <li>Are minors (typically under the age of 18);</li>
                                       <li>Are under 25 years old and attending school or a post-secondary institution full-time;</li>
                                       <li>Are over the age of majority but are unable to support themselves due to a mental or physical disability.</li>
                                    </ul>
                                 ">
                                 ?
                              </a>
                           </p>
                           <div class="long-btn-card">
                              <div class="dashboard-radio-form">
                                 <div class="form-check">
                                    <input id="dchild-1-0" class="form-check-input" name="dchild[0][]" value="yes" type="radio" checked>
                                    <label for="dchild-1-0"><p>Yes</p></label>
                                 </div>
                                 <div class="form-check">
                                    <input id="dchild-1-1" class="form-check-input" name="dchild[0][]" value="no" type="radio">
                                    <label for="dchild-1-1"><p>No</p></label>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                    
                  @else
                  @foreach(json_decode($willsAndTest->children) as $index => $children)

                  <div class="card list mb-3" id="child">
                        <div class="card-header d-flex justify-content-between">
                           <div class="card-title m-0">Child Name</div>
                           <a class="r-button" onclick="removetList(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" name="child_name[]" id="child_name_{{$index}}"   aria-describedby="nameHelp"  value="{{ $children->child_name }}">
                                 <small id="nameHelp" class="form-text text-muted">e.g. William Timothy Smith</small>
                           </div>
                           <p>Is this child a dependent?
                              <a tabindex="0"
                                 class="info-icon"
                                 role="button"
                                 data-bs-toggle="popover"
                                 data-bs-html="true"
                                 data-bs-trigger="focus"
                                 title="Dependent Child Criteria"
                                 data-bs-content="
                                    <p>Dependent children include those who meet any of the following criteria:</p>
                                    <ul  class='popover-list'>
                                       <li>Are minors (typically under the age of 18);</li>
                                       <li>Are under 25 years old and attending school or a post-secondary institution full-time;</li>
                                       <li>Are over the age of majority but are unable to support themselves due to a mental or physical disability.</li>
                                    </ul>
                                 ">
                                 ?
                              </a>
                           </p>
                           <div class="long-btn-card">
                              <div class="dashboard-radio-form">
                                 <div class="form-check">
                                    <input id="dchild-{{ $index }}-0" class="form-check-input" name="dchild[{{ $index }}]" value="yes" type="radio" @if($children->dependent === 'yes') checked @endif>
                                    <label for="dchild-{{ $index }}-0"><p>Yes</p></label>
                                 </div>
                                 <div class="form-check">
                                    <input id="dchild-{{ $index }}-1" class="form-check-input" name="dchild[{{ $index }}]" value="no" type="radio" @if($children->dependent === 'no') checked @endif>
                                    <label for="dchild-{{ $index }}-1"><p>No</p></label>
                                 </div>

                              </div>
                           </div>
                          
                        </div>
                     </div>
                           
                     @endforeach
                  @endif
                  </div>
                 <div class="add-child">
                     <a id="add-another-child" class="add-another" onclick="custom_clone('children-container')" class="add-button">Add Another Child</a>
                  </div> 

               </div>


            </div>
         </div>
         <!-- start previous / next buttons -->
            <div id="buttonsection" class="submit-button-multiple">
               @if (in_array($willsAndTest->m_status, ['commonLaw', 'married']))
               <button type="button" onclick="window.location.href = '{{ route('willsAndTest.create.step.two_1') }}'">Back</button>
               @else
               <button type="button" onclick="window.location.href = '{{ route('willsAndTest.create.step.one_2') }}'">Back</button>
               @endif
               <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 -->
      </div>
    </form>
 
   <div class="faq-box d-none">
      <div class="title">FAQ’s</div>
      <div class="tooltip">
      <p>Should I list stepchildren?</p>
      <span class="tooltiptext">Whether or not you should list stepchildren in your estate planning documents depends on your wishes and your relationship with them. If you want to include stepchildren as beneficiaries or provide for them in your estate, it is crucial to specify your intentions in your Will or Trust.</span>
      </div>
      </div>
   </div>
@endsection
@section('page-js')
<script src="{{ url('frontend/assets/js/forms/wills-And-Testament-step.js') }}?v={{ time() }}"></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