@extends('layouts.frontend')

@section('title', '| Pour-Over Will Form')

@section('content')
@include('frontend.forms.Pour-Over-Will.stepIndicator')
 <!-- start -->
<div class="container">
    <form action="{{route('pourOverWillFormcreate')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="4-1">
      <div class="card">
         <div class="card-body">

            <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">Alternate Executor</div>
                      <div class="card-sub-title">Do you want to name an alternate choice in case your original executor is unavailable?</div>
                      <div class="custom-button-yn mb-5">
                        <input id="alternate-executor-toggle-on" name="alternate-executor" value="yes" type="radio" {{ !empty($pourOverWillForm->alternate_executors) ? 'checked' : '' }}>
                        <label for="alternate-executor-toggle-on">Yes</label>
                        <input id="alternate-executor-toggle-off" name="alternate-executor" value="no" type="radio" {{ empty($pourOverWillForm->alternate_executors) ? 'checked' : '' }}>
                        <label for="alternate-executor-toggle-off">No</label>
                      </div>
                      
                      <div id="backup-executor-section-details">
                         <div id="alternate-executor-container">

                            @php
                                $pourOverWillFormArray = json_decode($pourOverWillForm->alternate_executors, true);
                            @endphp

                                @if(!empty( $pourOverWillFormArray) &&  count($pourOverWillFormArray) > 0)
                                    @foreach($pourOverWillFormArray 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>Can my executor benefit from my will?</p>
                            <span class="tooltiptext">Yes, your executor can usually benefit from your Will. But ensure this provision is added to your Will to avoid confusion or disputes. However, you should consult an attorney when you draft your Will.</span>
                        </div>
                        <div class="tooltip">
                            <p>Can my alternate executor also be a beneficiary?</p>
                            <span class="tooltiptext">Yes, your alternate executor can also be a beneficiary of your Will. However, like the executor, it's essential to specify this to prevent ambiguity or potential conflicts of interest. Legal advice is advisable for drafting such provisions.</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 onclick="window.location.href = '{{ route('pourOverWillForm.create.step.four') }}'" type="button" 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>
   </form>

</div>

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

@endsection