@extends('layouts.v2.frontend-user-backend')

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

@section('content')
@include('frontend.forms.v2.End-Of-Life-Plan.stepIndicator')
    <form action="{{route('EndoflifePlanFormStore')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="1">
      <div class="multiple-form dashboard-radio">
         <h5 style="text-transform: none;">Do you already have a Last Will and Testament?</h5>
         <p></p>

         <div class="form">
            <div class="row">
               <div class="col-xl-6 col-lg-6 col-md-6 mb-1">
                  <input class="form-check-input" hidden id="yes" name="a-status" type="radio" value="yes"  {{ isset($endoflifePlanForm->last_will) && $endoflifePlanForm->last_will == 'yes' ? 'checked': ''}}>
                  <label for="yes" class="w-100 common-box-img {{ isset($endoflifePlanForm->last_will) && $endoflifePlanForm->last_will == 'yes' ? 'selected': ''}}" onclick="selectOption(this)">
                     <img src="{{url('v2/images/icon/last-will-yes.png')}}" alt="status" class="w-50 mx-auto d-block my-3">
                       {{-- <p class="text-center">Yes</p>
                       <small></small> --}}
                       <button type="button" class="select-btn">Yes</button>
                   </label>
               </div>
               <div class="col-xl-6 col-lg-6 col-md-6 mb-1">
                  <input class="form-check-input" hidden id="no" name="a-status" type="radio" value="no" {{ isset($endoflifePlanForm->last_will) && $endoflifePlanForm->last_will == 'no' ? 'checked': ''}}>
                  <label for="no" class="w-100 common-box-img {{ isset($endoflifePlanForm->last_will) && $endoflifePlanForm->last_will == 'no' ? 'selected': ''}}" onclick="selectOption(this)">
                     <img src="{{url('v2/images/icon/last-will-no.png')}}" alt="status" class="w-50 mx-auto d-block my-3">
                       {{-- <p class="text-center">No</p>
                       <small></small> --}}
                       <button type="button" class="select-btn">No</button>
                   </label>
               </div>
            </div>
         </div>
         <p class="mt-2">An End-of-Life Plan outlines your wishes for your remains and any memorial services and a Last Will describes how your assets will be distributed. While you do not need a Last Will in order to create an End-of-Life Plan, both documents are part of a well-rounded estate plan.</p>
         <!-- start previous / next buttons -->
         <div id="buttonsection" class="submit-button-multiple align-items-center justify-content-center">
            <button type="button" class="d-none">Back</button>
            <button type="submit" class="submit-btn">Save and Continue</button>
            <button type="button" class="skip-btn d-none">Skip Step</button>
         </div>
         <!-- end previous / next buttons -->
      </div>
    </form>	 
@endsection
@section('page-js')
<script>
   function selectOption(element) {
      // Remove 'selected' class from all options
      const options = document.querySelectorAll('.common-box-img');
      options.forEach(option => option.classList.remove('selected'));

      // Add 'selected' class to the clicked option
      element.classList.add('selected');

      // Update the associated radio button
      const radioInput = element.previousElementSibling; // Assuming the radio input is just before the label
      if (radioInput && radioInput.type === 'radio') {
         radioInput.checked = true;
      }
   }
</script>
<script src="{{ url('frontend/assets/js/forms/end-of-life-plan-multi-step.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