@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">
      <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">Choose an Executor</div>
                      <div class="card-sub-title">Who is your executor?</div>
                      <div id="executor-section-details">
                        <div id="executor-container">            
                            @if (!empty($pourOverWillForm->executors) && $pourOverWillForm->executors != "[]")
                                @foreach(json_decode($pourOverWillForm->executors, true) 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">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="executor_name[]" id="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="executor_city[]" id="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="executor_state[]" id="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">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="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" class="form-control modified-input" name="executor_city[]" id="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="executor_state[]" id="executor_state" placeholder="California">
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div> 
                         <div class="add-child">
                            <a href="#" id="add-executor-button" onclick="clone('executor-container')">
                            <span class="fas fa-plus"></span>
                            Add another 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>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>
                   </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.three_2') }}'" 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