@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_2">
      <div class="multiple-form dashboard-radio">
         <h4>Guardian</h4>
         <p>
             Do you want to name a guardian?
            <a tabindex="0" class="info-icon" role="button" data-bs-toggle="popover" data-bs-html="true" data-bs-trigger="focus" title="Guardian Information" data-bs-content="<p>A guardian holds the same legal authority as a parent and is responsible for the care and well-being of your minor or dependent children.</p>">?</a>
         </p>

         <div class="form">
            <div class="row">
               <div class="col-12">                 
                  <div class="dashboard-radio-form">
                     <div class="form-check">
                        <input id="guardians-y" class="form-check-input" name="guardian" type="radio" value="yes" {{ isset($willsAndTest->guardian_status) &&  $willsAndTest->guardian_status == "yes" ? 'checked' : ''}}>
                        <label for="guardians-y">
                           <p>Yes</p>
                        </label>
                     </div>
                     <div class="form-check">
                        <input id="guardians-n" class="form-check-input" name="guardian" type="radio" value="no" {{ isset($willsAndTest->guardian_status) &&  $willsAndTest->guardian_status == "no" ? 'checked' : ''}}>
                        <label for="guardians-n">
                           <p>No</p>
                        </label>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row my-5">
               <div id="add-guardians-container-card">
                  <div id="guardians-container" class="child-card-holder">
                     @php
                        $willsAndTestGuardianArray = json_decode($willsAndTest->guardian, true)
                     @endphp

                  @if(!empty($willsAndTest->guardian) && is_array($willsAndTestGuardianArray) && count($willsAndTestGuardianArray) > 0)
                     @foreach($willsAndTestGuardianArray as $index => $abeneficiary)                              
                        <div class="card list mb-3 beneficiary-card" id="child">
                           <div class="card-header">
                              <div class="card-title">Guardian</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="beneficiary-form" data-form-name="individual_form_guardians32" id="individual_form_guardians32-{{$index}}">
                                 <div class="form-group mb-3">
                                    <label for="name">Name</label>
                                    <input  value="{{$abeneficiary['name'] ?? ""}}" type="text"  name="guardian_details_name[]" id="guardian_details_name_{{$index}}" 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="state">Country</label>
                                    {{-- <input  value="{{$abeneficiary['country'] ?? ""}}" type="text"  name="guardian_details_country[]" id="guardian_details_country"> --}}
                                    <input  value="{{ $abeneficiary['country'] ?? "" }}" type="hidden"  name="guardian_details_country_value_{{ $index }}" id="guardian_details_country_value_{{ $index }}" >
                                    <select id="guardian_details_country_{{ $index }}" name="guardian_details_country[]" class="form-control" data-country-dropdown data-country-value="guardian_details_country_value_{{ $index }}" data-state-dropdown="guardian_details_state_{{ $index }}" data-state-value="guardian_details_state_value_{{ $index }}">
                                       <option value="">Select Country</option>
                                    </select>
                                 </div>
                                 <div class="form-group mb-3">
                                    <label for="state">State</label>

                                    {{-- <input  value="{{$abeneficiary['state'] ?? ""}}" type="text"  name="guardian_details_state[]" id="guardian_details_state"> --}}
                                    <input  value="{{$abeneficiary['state'] ?? ""}}" type="hidden"  name="guardian_details_state_value" id="guardian_details_state_value_{{ $index }}" >
                                    <select id="guardian_details_state_{{ $index }}" name="guardian_details_state[]" class="form-control" data-state-dropdown>
                                       <option value="">Select State</option>
                                    </select>
                                 </div>
                              </div>
                              

                           </div> 
                     
                        </div>
                     @endforeach
                     @else
                     <div class="card list mb-3 beneficiary-card" id="child">
                        <div class="card-header">
                           <div class="card-title m-0">Guardian</div>
                           <a class="r-button" onclick="removeGuardian(this)"><span class="fas fa-times"></span><span class="remove">Remove</span></a>
                        </div>
                        <div class="card-body">
                           <div class="beneficiary-form" data-form-name="individual_form_guardians32" id="individual_form_guardians32" style="display: block;">
                               <div class="form-group mb-3">
                                  <label for="name">Name</label>
                                  <input type="text"  name="guardian_details_name[]" id="guardian_details_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="country">Country</label>
                                    {{-- <input  value="{{$abeneficiary['country'] ?? ""}}" type="text"  name="guardian_details_country[]" id="guardian_details_country"> --}}
                                    <input  value="{{ $abeneficiary['country'] ?? "" }}" type="hidden"  name="guardian_details_country_value" id="guardian_details_country_value" >
                                    <select id="guardian_details_country" name="guardian_details_country[]" class="form-control" data-country-dropdown data-country-value="guardian_details_country_value" data-state-dropdown="guardian_details_state" data-state-value="guardian_details_state_value">
                                       <option value="">Select Country</option>
                                    </select>
                              </div>
                               <div class="form-group mb-3">
                                  <label for="state">State</label>
                                  {{-- <input type="text"  name="guardian_details_state[]" id="guardian_details_state"> --}}
                                  <input  value="{{ $abeneficiary['state'] ?? "" }}" type="hidden"  name="guardian_details_state_value" id="guardian_details_state_value" >
                                  <select id="guardian_details_state" name="guardian_details_state[]" class="form-control" data-state-dropdown>
                                    <option value="">Select State</option>
                                  </select>
                               </div>
                           </div>
                           
                        </div> 
                     </div>
                     @endif

                  </div>
                  <div class="add-child">
                     <a onclick="custom_clone('guardians-container')" class="add-another">Add another guardian</a>
                  </div>
               </div>
            </div>
            <!-- start previous / next buttons -->
               <div id="buttonsection" class="submit-button-multiple">

                  <button onclick="window.location.href = '{{ route('willsAndTest.create.step.two') }}'" type="button">Back</button>
                  <button type="submit" class="submit-btn">Save and Continue</button>

                  <button type="submit" class="d-none" name="preview_submit" value="preview">{{env('PREVIEW_BUTTON_TEXT')}}</button>
                  <button type="button" class="skip-btn d-none">Skip Step</button>

               </div>
            <!-- end previous / next buttons -->
         </div>
      </div>
    </form>
   <div class="faq-box d-none">
      <div class="title">FAQ’s</div>
      <div class="tooltip">
      <p>Is there anything I can't give away?</p>
      <span class="tooltiptext">Yes, there are limitations on what you can give away in your will. Laws may vary by jurisdiction, but generally, you cannot give away property or assets you do not own at your death. Additionally, investments such as life insurance proceeds with a designated beneficiary, retirement accounts, and joint tenancy property may not be subject to your will. It's essential to consult with an attorney to understand the specific rules in your area.</span>
      </div>
   </div>          
@endsection
@section('page-js')
<script>
   document.addEventListener("DOMContentLoaded", function () {
   setupFormToggle('guardians-container', 'beneficiary-radio','.beneficiary-form','.beneficiary-card')

});
   </script>
<script src="{{ url('frontend/assets/js/forms/wills-And-Testament-step.js') }}?v={{ time() }}"></script>
<script src="{{ url('frontend/assets/js/forms/custom.js') }}?v={{ time() }}"></script>
<script src="{{ url('v2/js/form-validation.js') }}?v={{ time() }}"></script>
@endsection