@extends('layouts.frontend')

@section('title', '| FREE END-OF-LIFE PLAN')

@section('content')
@include('frontend.forms.End-Of-Life-Plan.stepIndicator')
 <!-- start -->
<div class="container">
    <form action="{{route('EndoflifePlanFormStore')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="2-1">
      <div class="card">
         <div class="card-body">
            <!-- step 1 -->
            @if(isset($endoflifePlanForm->executor) &&  $endoflifePlanForm->executor == "no" )
                <div class="step" style="display: block;">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card-title">Your Appointee</div>
                            <div class="card-sub-title">Who will carry out your final wishes?</div>
                                <div id="appointee-container">
                                    @if(empty($endoflifePlanForm->appointee_details))
                                        <div class="card list mb-3" id="child">
                                            <div class="card-header d-flex justify-content-between">
                                            <div class="card-title m-0">Appointee</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="appointee_full_name">Name:</label>
                                                <input type="text" class="form-control modified-input" name="appointee_full_name[]" placeholder="Full Name">
                                            </div>
                                            <div class="form-group mb-3">
                                                <label for="appointee_city">City/Town:</label>
                                                <input type="text" class="form-control modified-input" name="appointee_city[]" placeholder="City/Town">
                                            </div>
                                            <div class="form-group mb-3">
                                                <label for="appointee_state">State:</label>
                                                <input type="text" class="form-control modified-input" name="appointee_state[]" placeholder="State">
                                            </div>
                                            <div class="form-group mb-3">
                                                <label for="appointee_phone_number">Phone Number :</label>
                                                <input type="text" class="form-control modified-input" name="appointee_phone_number[]" placeholder="Phone Number ">
                                            </div>
                                            <div class="form-group mb-3">
                                                <label for="appointee_email">Email :</label>
                                                <input type="text" class="form-control modified-input" name="appointee_email[]" placeholder="Email ">
                                            </div>
                                            </div>
                                        </div>
                                    @else
                                        @foreach(json_decode($endoflifePlanForm->appointee_details) as $appointee_detail)
                                            <div class="card list mb-3" id="child">
                                                <div class="card-header d-flex justify-content-between">
                                                <div class="card-title m-0">Appointee</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="appointee_full_name">Name:</label>
                                                    <input type="text" class="form-control modified-input" name="appointee_full_name[]"  value="{{ $appointee_detail->full_name }}" placeholder="Full Name">
                                                </div>
                                                <div class="form-group mb-3">
                                                    <label for="appointee_city">City/Town:</label>
                                                    <input type="text" class="form-control modified-input" name="appointee_city[]" placeholder="City/Town" value="{{ $appointee_detail->city }}">
                                                </div>
                                                <div class="form-group mb-3">
                                                    <label for="appointee_state">State:</label>
                                                    <input type="text" class="form-control modified-input" name="appointee_state[]" placeholder="State" value="{{ $appointee_detail->state }}">
                                                </div>
                                                <div class="form-group mb-3">
                                                    <label for="appointee_phone_number">Phone Number :</label>
                                                    <input type="text" class="form-control modified-input" name="appointee_phone_number[]" placeholder="Phone Number " value="{{ $appointee_detail->phone_number }}">
                                                </div>
                                                <div class="form-group mb-3">
                                                    <label for="appointee_email">Email :</label>
                                                    <input type="text" class="form-control modified-input" name="appointee_email[]" placeholder="Email " value="{{ $appointee_detail->email }}">
                                                </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            <div class="add-child">
                                <a href="#" id="add-appointee-button" onclick="clone('appointee-container')">
                                <span class="fas fa-plus"></span>Add another appointee</a>
                            </div>

                        </div>
                        <div class="col-md-4">
                            <!-- <div class="faq-box">
                                <div class="title">FAQ’s</div>
                                <div class="tooltip">
                                    <p>Who should I choose to carry out my final wishes?</p>
                                    <span class="tooltiptext">
                                    Many people appoint the executor (also known as a personal representative) of their Last Will to carry out their final arrangements. If this isn't possible or desirable for you, be sure to choose someone you know and trust to carry out your end-of-life plans. </br> </br> In Alabama, you may direct the disposal of your remains and your funeral arrangements in a notarized, written affidavit. </br> </br> Normally, the authority to make decisions about your remains and make funeral arrangements goes to the following people, in the order listed:
                                    <ul>
                                        <li>The person listed in your affidavit</li>
                                        <li>Your spouse</li>
                                        <li>Your adult child</li>
                                        <li>Your parent</li>
                                        <li>Your adult sibling</li>
                                        <li>Your grandparent</li>
                                        <li>Your guardian, if you had one at the time of your death</li>
                                        <li>The personal representative named in your Last Will</li>
                                    </ul>
                                    </span>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            @endif
            @if(isset($endoflifePlanForm->executor) &&  $endoflifePlanForm->executor == "yes" )
                <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">Your Appointee</div>
                            <div class="card-sub-title">Who is the executor of your Last Will?</div>
                                <div id="executor-container">
                                    <div id="executor">
                                        @if(empty($endoflifePlanForm->executor_details))
                                            <!-- Executor card content -->
                                            <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="executor_full_name">Name:</label>
                                                    <input type="text" class="form-control modified-input" name="executor_full_name[]" placeholder="Full Name">
                                                    </div>
                                                    <div class="form-group mb-3">
                                                    <label for="executor_city">City/Town:</label>
                                                    <input type="text" class="form-control modified-input" name="executor_city[]" placeholder="City/Town">
                                                    </div>
                                                    <div class="form-group mb-3">
                                                    <label for="executor_state">State:</label>
                                                    <input type="text" class="form-control modified-input" name="executor_state[]" placeholder="State">
                                                    </div>
                                                    <div class="form-group mb-3">
                                                    <label for="executor_phone_number">Phone Number :</label>
                                                    <input type="text" class="form-control modified-input" name="executor_phone_number[]" placeholder="Phone Number ">
                                                    </div>
                                                    <div class="form-group mb-3">
                                                    <label for="executor_email">Email :</label>
                                                    <input type="text" class="form-control modified-input" name="executor_email[]" placeholder="Email ">
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            @foreach(json_decode($endoflifePlanForm->executor_details) as $executor_detail)
                                                <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="executor_full_name">Name:</label>
                                                        <input type="text" class="form-control modified-input" name="executor_full_name[]" value="{{ $executor_detail->full_name }}" placeholder="Full Name">
                                                        </div>
                                                        <div class="form-group mb-3">
                                                        <label for="executor_city">City/Town:</label>
                                                        <input type="text" class="form-control modified-input" name="executor_city[]" value="{{ $executor_detail->city }}" placeholder="City/Town">
                                                        </div>
                                                        <div class="form-group mb-3">
                                                        <label for="executor_state">State:</label>
                                                        <input type="text" class="form-control modified-input" name="executor_state[]" value="{{ $executor_detail->state }}" placeholder="State">
                                                        </div>
                                                        <div class="form-group mb-3">
                                                        <label for="executor_phone_number">Phone Number :</label>
                                                        <input type="text" class="form-control modified-input" name="executor_phone_number[]" value="{{ $executor_detail->phone_number }}" placeholder="Phone Number ">
                                                        </div>
                                                        <div class="form-group mb-3">
                                                        <label for="executor_email">Email :</label>
                                                        <input type="text" class="form-control modified-input" name="executor_email[]" value="{{ $executor_detail->email }}" placeholder="Email ">
                                                        </div>
                                                    </div>
                                                </div>

                                            @endforeach
                                        @endif
                                        <!-- End of executor card content -->
                                    </div>
                                </div>
                            <div class="add-child">
                                <a href="#" id="add-executor-button" onclick="clone('executor')">
                                <span class="fas fa-plus"></span>Add another executor</a>
                            </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 should I choose to carry out my final wishes?</p>
                                <span class="tooltiptext">
                                    Many people appoint the executor (also known as a personal representative) of their Last Will to carry out their final arrangements. If this isn't possible or desirable for you, be sure to choose someone you know and trust to carry out your end-of-life plans. </br> </br> In Alabama, you may direct the disposal of your remains and your funeral arrangements in a notarized, written affidavit. </br> </br> Normally, the authority to make decisions about your remains and make funeral arrangements goes to the following people, in the order listed:
                                    <ul>
                                        <li>The person listed in your affidavit</li>
                                        <li>Your spouse</li>
                                        <li>Your adult child</li>
                                        <li>Your parent</li>
                                        <li>Your adult sibling</li>
                                        <li>Your grandparent</li>
                                        <li>Your guardian, if you had one at the time of your death</li>
                                        <li>The personal representative named in your Last Will</li>
                                    </ul>
                                </span>
                            </div>
                            </div> -->
                        </div>

                    </div>
                </div>
            @endif
                <div class="row">
                    <!-- 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('endoflifePlan.create.step.two') }}'" 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>

@endsection
@section('page-js')
<script src="{{ url('frontend/assets/js/forms/end-of-life-plan-multi-step.js?v=10.1.1') }}"></script>
<script src="{{ url('frontend/assets/js/forms/custom.js?v=10.3') }}"></script>

@endsection