@extends('layouts.frontend')

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

@section('content')
@include('frontend.forms.Will-Testament.stepIndicator')
 <!-- start -->
<div class="container">
    <form action="{{route('willsAndTestFormcreate')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="4-1">
      <div class="card">
         <div class="card-body">
            <!-- step 1 -->
            <div class="step" style="display: block">
                <div class="row">
                   <div class="col-md-10 col-lg-8 order-1 order-md-1 order-lg-1">
                      <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"  {{ !empty($willsAndTest->backup_executor) ? 'checked' : '' }}>
                         <label for="backup-executor-y">Yes</label>
                         <input id="backup-executor-n" name="backup-executor" value="no" type="radio"  {{ empty($willsAndTest->backup_executor) ? 'checked' : '' }}>
                         <label for="backup-executor-n">No</label>
                      </div>
                        <div id="backup-executor-section-details">
                           <div id="alternate-executor-container">
                            @php
                                $backupExecutorArray = json_decode($willsAndTest->backup_executor, true);
                            @endphp
                   
                            @if(!empty($willsAndTest->backup_executor) && count($backupExecutorArray) > 0)
                            @foreach($backupExecutorArray as $index => $executor)
                           <!-- Existing executor data -->
                           <div class="card list mb-3" id="child">
                               <div class="card-header d-flex justify-content-between">
                                   <div class="card-title m-0">Alternate Executor</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" class="form-control modified-input" name="alternate_executor_name[]" id="alternate_executor_name" aria-describedby="nameHelp"  value="{{ $executor['name'] }}">
                                       <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="alternate_executor_city[]" id="alternate_executor_city" aria-describedby="cityHelp" placeholder="Northridge" value="{{ $executor['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="alternate_executor_state[]" id="alternate_executor_state" placeholder="California" value="{{ $executor['state'] }}">
                                   </div>
                               </div>
                           </div>
                           @endforeach
                        @else
                           <!-- If no data, show an empty executor form -->
                           <div class="card list mb-3" id="child">
                               <div class="card-header d-flex justify-content-between">
                                   <div class="card-title m-0">Alternate Executor</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" class="form-control modified-input" 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 modified-input" 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 modified-input" name="alternate_executor_state[]" id="alternate_executor_state" placeholder="California">
                                   </div>
                               </div>
                           </div>
                       @endif
                    </div>
                           <div class="add-child">
                              <a href="#" id="add-alternate-executor-button" onclick="clone('alternate-executor-container')">
                              <span class="fas fa-plus"></span>Add another alternate executor
                              </a>
                           </div>
                        </div>

                   </div>
                   <div class="col-md-8 col-lg-4 order-3 order-md-3 order-lg-2">
                      <div class="faq-box">
                        <div class="title">FAQ’s</div>
                        <div class="tooltip">
                        <p>What is an alternate executor?</p>
                        <span class="tooltiptext">An alternate executor, also known as a backup executor or successor executor, is a person designated in a will or estate planning document to step in and assume the role of executor if the primary executor is unable or unwilling to fulfill their duties.</span>
                        </div>
                        <div class="tooltip">
                        <p>Can the alternate executor also be a beneficiary in a Will?</p>
                        <span class="tooltiptext">Yes, the alternate executor can also be a beneficiary in a Will. Like the primary executor, they should carry out their executor duties impartially and as per the law.</span>
                        </div>
                      </div>
                   </div>
                   <!-- start previous / next buttons -->
                   <div class="col-md-12 order-2 order-md-2 order-lg-3">
                        <div id="buttonsection">
                            <div class="form-footer d-flex justify-content-between">
                                <div>
                            <button type="button" onclick="window.location.href = '{{ route('willsAndTest.create.step.four') }}'" class="btn btn-light btn-lg back-btn">Back</button>
                            <button type="submit" class="btn btn-light btn-lg">Save and Continue</button>
                                </div>
                            <button type="submit" class="btn btn-light btn-lg" name="preview_submit" value="preview">{{env('PREVIEW_BUTTON_TEXT')}}</button>
                            <button type="button" class="btn btn-light btn-lg skip-btn d-none">Skip Step</button>
                        </div>
                        </div>
                    </div>
                    <!-- end previous / next buttons -->
                </div>
             </div>
         </div>
      </div>
</div>

@endsection
@section('page-js')
<script src="{{ url('frontend/assets/js/forms/wills-And-Testament-step.js?v=10.5') }}"></script>
<script src="{{ url('frontend/assets/js/forms/custom.js?v=10.3') }}"></script>

@endsection