@extends('layouts.frontend')

@section('title', '| Free Living Will')

@section('content')
@include('frontend.forms.Living-Will.stepIndicator')
 <!-- start -->
<div class="container">
    <form action="{{route('LivingWillFormStore')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="6">
      <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">Contact List</div>
                     <div class="card-sub-title">Do you want to provide a list of people for your doctor to contact before any vital treatment is stopped?</div>
                     <div class="custom-button-yn mb-5">
                        <input id="vitaltreatment-y" name="contact_status" type="radio" value="yes"
                            {{ !empty($livingWillForm->contacts) ? 'checked' : '' }}>
                        <label for="vitaltreatment-y">Yes</label>
                        <input id="vitaltreatment-n" name="contact_status" type="radio" value="no"
                            {{ empty($livingWillForm->contacts) ? 'checked' : '' }}>
                        <label for="vitaltreatment-n">No</label>
                    </div>
                     <div id="contact-container_holder">
                        <div id="contact-container" class="mb-2">
                           @if(empty($livingWillForm->contacts))
                                 
                                    <div class="card list mb-3" id="child">
                                          <div class="card-header d-flex justify-content-between">
                                          <div class="card-title m-0 c-title">Contact</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="contact_name[]" aria-describedby="nameHelp">
                                          </div>
                                          <div class="form-group mb-3">
                                             <label for="city">Phone Number</label>
                                             <input type="text" class="form-control modified-input" name="contact_phone_number[]" aria-describedby="phonehelp">
                                          </div>
                                          </div>
                                    </div>
                              
                           @else
                              @foreach(json_decode($livingWillForm->contacts) as $contact)

                                       <div class="card list mb-3" id="child">
                                          <div class="card-header d-flex justify-content-between">
                                          <div class="card-title m-0 c-title">Contact</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="contact_name[]" value="{{ $contact->full_name }}" aria-describedby="nameHelp">
                                          </div>
                                          <div class="form-group mb-3">
                                             <label for="city">Phone Number</label>
                                             <input type="text" class="form-control modified-input" name="contact_phone_number[]" value="{{ $contact->phone_number }}" aria-describedby="phonehelp">
                                          </div>
                                          </div>
                                    </div>
                              
                              @endforeach
                           @endif
                        </div>
                        <div class="add-child">
                           <a href="#" id="add-alternate-executor-button" onclick="clone('contact-container')">
                              <span class="fas fa-plus"></span>
                              Add another contact
                           </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">Frequently Asked Questions</div>
                        <div class="tooltip">
                           <p>Why might I want to include a contact list?</p>
                           <span class="tooltiptext">Including a contact list in your estate planning documents can be helpful for your loved ones and executor to reach out to relevant parties, such as financial institutions, legal professionals, and family members, in the event of your incapacity or passing.</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>
                           @if(isset($livingWillForm->health_care_decisions) && $livingWillForm->health_care_decisions == 'yes')
                              <button type="button" onclick="window.location.href = '{{ route('livingwill.create.step.five_3') }}'" class="btn btn-light btn-lg back-btn">Back</button>
                           @else
                              <button type="button" onclick="window.location.href = '{{ route('livingwill.create.step.four') }}'" class="btn btn-light btn-lg back-btn">Back</button>
                           @endif    
                           <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/living-will-multi-step.js?v=10.1') }}"></script>
<script src="{{ url('frontend/assets/js/forms/custom.js?v=10.3') }}"></script>

@endsection