@extends('layouts.v2.frontend-user-backend')
@section('title', '| Pour-Over Will Form')
@section('content')
@include('frontend.forms.v2.Pour-Over-Will.stepIndicator')
    <form action="{{route('pourOverWillFormcreate')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="4">


      <div class="multiple-form dashboard-radio">
        <h4>Choose an executor</h4>
        <p>Who is your executor?
            <a tabindex="0" class="info-icon" role="button" data-bs-toggle="popover" data-bs-html="true" data-bs-trigger="focus" title="Executor Information" data-bs-content="<p>An executor is responsible for administering your estate after your death. This includes gathering assets, settling debts and taxes, and distributing any remaining assets as specified in your pour-over will.</p>">?</a>
        </p>

        <div class="form">
           <div class="row">
              <div class="col-12">
                <div id="executor-section-details">
                    <div id="executor-container" class="child-card-holder">  
                        @if (!empty($pourOverWillForm->executors) && json_decode($pourOverWillForm->executors, true))
                            @foreach(json_decode($pourOverWillForm->executors, true) as $index => $executor)

                            <!-- Existing executor data -->
                            <div class="card list mb-3" id="child">
                                <div class="card-header">
                                    <div class="card-title m-0">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"  name="executor_name[]" id="executor_name_{{$index}}" 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"  name="executor_city[]" id="executor_city_{{$index}}" aria-describedby="cityHelp" value="{{ $executor['city'] }}">
                                        <small id="cityHelp" class="form-text text-muted d-none">city</small>
                                    </div>
                                    <div class="form-group mb-3">

                                        <label for="executor_country_{{ $index }}">Country</label>
                                        <input type="hidden" name="executor_country_value[]" id="executor_country_value_{{ $index }}" value="{{ $executor['country'] ?? '' }}">
                                        <select id="executor_country_{{ $index }}" name="executor_country[]" class="form-control" data-country-dropdown data-country-value="executor_country_value_{{ $index }}" data-state-dropdown="executor_state_{{ $index }}" data-state-value="executor_state_value_{{ $index }}">
                                            <option value="">Select Country</option>
                                        </select>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="executor_state_{{ $index }}">State</label>
                                        <input type="hidden" name="executor_state_value[]" id="executor_state_value_{{ $index }}" value="{{ $executor['state'] }}">
                                        <select id="executor_state_{{ $index }}" name="executor_state[]" class="form-control" data-state-dropdown>
                                            <option value="">Select State</option>
                                        </select>

                                    </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">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"  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"  name="executor_city[]" id="executor_city" aria-describedby="cityHelp">
                                        <small id="cityHelp" class="form-text text-muted d-none">city</small>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="state">Country</label>
                                        <!-- <input type="text"  name="executor_state[]" id="executor_state"> -->
                                        <input type="hidden"  name="executor_country_value" id="executor_country_value" >
                                        <select id="executor_country" name="executor_country[]" class="form-control" data-country-dropdown data-country-value="executor_country_value" data-state-dropdown="executor_state" data-state-value="executor_state_value">
                                        <option value="">Select Country</option>
                                        </select>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="state">State</label>
                                        <!-- <input type="text"  name="executor_state[]" id="executor_state"> -->
                                        <input type="hidden"  name="executor_state_value" id="executor_state_value">
                                        <select id="executor_state" name="executor_state[]" class="form-control" data-state-dropdown>
                                            <option value="">Select State</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div> 
                     <div class="add-child">
                        <a href="#" id="add-executor-button" class="add-another" onclick="clone('executor-container')">
                        
                        Add another executor
                        </a>
                     </div>
                </div>
              </div>
           </div>
        </div>

        <!-- start previous / next buttons -->
        <div id="buttonsection" class="submit-button-multiple">
            <button onclick="window.location.href = '{{ route('pourOverWillForm.create.step.three_2') }}'" 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>
    </form>

    <div class="faq-box d-none">
        <div class="title">FAQ’s</div>
        <div class="tooltip">
            <p>Who cannot be my executor?</p>
            <span class="tooltiptext">
                Laws governing executors, also known as personal representatives, may vary by jurisdiction, but typically, the following individuals cannot serve as executors:
                <ul>
                    <li>Minors (those under the age of 18 in most places).</li>
                    <li>Individuals who lack mental capacity.</li>
                    <li>Convicted felons (depending on local laws).</li>
                    <li>Non-residents or non-citizens (subject to restrictions).</li>
                </ul>
            </span>
        </div>
    </div>
@endsection

@section('page-js')

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