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

@section('title', '| Last Will And Testament')

@section('content')
@include('frontend.forms.v2.Will-Testament.stepIndicator')

    <form action="{{route('willsAndTestFormcreate')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="1">
      <div class="multiple-form dashboard-radio">
         <h5>Who is this Last Will for?</h5>
         <p></p>
         <div class="form">
            <div class="row">
               <div class="col-12">

                  <div class="row">
                     <div class="col-xl-6 col-lg-6 col-md-6">
                        <input class="form-check-input" hidden id="self" name="a-status" type="radio" value="self" {{ (isset($willsAndTest->a_status)) &&  $willsAndTest->a_status == "self" ? 'checked' : ''}}>
                         <label for="self" class="w-100 common-box-img {{ isset($willsAndTest->a_status) &&  $willsAndTest->a_status == "self" ? 'selected' : ''}}" onclick="selectOption(this)">
                             <img src="{{url('v2/images/icon/self.png')}}" alt="status" class="w-50 mx-auto d-block my-3">                             
                             {{-- <p class="text-center">Myself</p>
                             <small></small> --}}
                             <button type="button" class="select-btn">Myself</button>
                         </label>
                     </div>
                     <div class="col-xl-6 col-lg-6 col-md-6">
                        <input class="form-check-input" hidden id="someone" name="a-status" type="radio" value="someone" {{ isset($willsAndTest->a_status) &&  $willsAndTest->a_status == "someone" ? 'checked' : ''}}>
                         <label for="someone" class="w-100  common-box-img {{ isset($willsAndTest->a_status) &&  $willsAndTest->a_status == "someone" ? 'selected' : ''}}" onclick="selectOption(this)">
                           <img src="{{url('v2/images/icon/someone.png')}}" alt="status" class="w-50 mx-auto d-block my-3"> 
                             {{-- <p class="text-center">Someone else</p>
                             <small></small> --}}
                             <button type="button" class="select-btn">Someone else</button>
                         </label>
                     </div>
                  </div>

               </div>
            </div>
         </div>
         <!-- 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="submit" class="d-none" name="preview_submit" value="preview">{{env('PREVIEW_BUTTON_TEXT')}}</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/wills-And-Testament-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