@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="1">
      <div class="card">
         <div class="card-body">
            <!-- step 1 -->
            <div class="step" style="display: block">
               <div class="card-title">Do you already have a Last Will and Testament?</div>
               <div class="custom-m-status-self">
                  <input id="yes" name="a-status" type="radio" value="yes"  {{ !isset($endoflifePlanForm->last_will) || $endoflifePlanForm->last_will == 'yes' ? 'checked': ''}}>
                  <label for="yes">
                     <img id="yes-image" src="{{url('frontend/images/dark/end-of-life-plan-active-no.png')}}" alt="yes">
                     <div class="box-title">Yes</div>
                  </label>
                  <input id="no" name="a-status" type="radio" value="no" {{ isset($endoflifePlanForm->last_will) && $endoflifePlanForm->last_will == 'no' ? 'checked': ''}}>
                  <label for="no">
                     <img id="no-image" src="{{url('frontend/images/dark/end-of-life-plan-inactive-no.png')}}" alt="no">
                     <div class="box-title">No</div>
                  </label>
               </div>
               <div id="step1Sub" class="card-sub-title">
                  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.
               </div>
            </div>
            <!-- start previous / next buttons -->
            <div id="buttonsection">
               <div class="form-footer d-flex">
                  <button type="button" class="btn btn-light btn-lg back-btn d-none">Back</button>
                  <button type="submit" class="btn btn-light btn-lg">Save and Continue</button>
                  <button type="button" class="btn btn-light btn-lg skip-btn d-none">Skip Step</button>
               </div>
            </div>
            <!-- end previous / next buttons -->
         </div>
      </div>
 
</div>

@endsection
@section('page-js')
<script>
   document.addEventListener("DOMContentLoaded", function () {
       // Get references to the radio buttons and images
       const yesRadio = document.getElementById("yes");
       const noRadio = document.getElementById("no");
       const yesImage = document.getElementById("yes-image");
       const noImage = document.getElementById("no-image");

       // Add event listeners to the radio buttons
       yesRadio.addEventListener("change", function () {
           if (yesRadio.checked) {
               // Change the image source when "Yes" is selected
               yesImage.src = "{{url('frontend/images/dark/end-of-life-plan-active-yes.png')}}";
               noImage.src = "{{url('frontend/images/dark/end-of-life-plan-inactive-no.png')}}";
           }
       });

       noRadio.addEventListener("change", function () {
           if (noRadio.checked) {
               // Change the image source when "No" is selected
               noImage.src = "{{url('frontend/images/dark/end-of-life-plan-active-no.png')}}";
               yesImage.src = "{{url('frontend/images/dark/end-of-life-plan-inactive-yes.png')}}";
           }
       });
   });
</script>
<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