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

@section('title', '| Revocable Living Trust')

@section('content')
@include('frontend.forms.v2.Revocable-Living-Trust.stepIndicator')

    <form action="{{route('RevocableLivingTrustFormcreate')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="1">
      <div class="multiple-form dashboard-radio dashboard-radio-custom">
         <h5 style="text-transform: none;">What type of property do you want to put in your Living Trust?</h5>
         <p></p>

         <div class="form">
            <div class="row justify-content-center">
               <div class="col-xl-4 col-lg-4 col-md-4 mb-4">
                  <input class="form-check-input" hidden id="real_estate" name="property[type]" type="radio" value="Real Estate" {{ (isset($RevocableTrustData['property']['type']))  &&  $RevocableTrustData['property']['type'] === "Real Estate" ? 'checked' : ''}}>
                  <label for="real_estate" class="w-100 common-box-img {{ (isset($RevocableTrustData['property']['type']))  &&  $RevocableTrustData['property']['type'] === "Real Estate" ? 'selected' : ''}}" onclick="selectOption(this)">
                     <img src="{{url('v2/images/revocable_living/realestate.png')}}" alt="Real Estate" class="w-50 mx-auto d-block my-3">
                       {{-- <p class="text-center">Real Estate</p> --}}
                       <small></small>
                       <button type="button" class="select-btn">Real Estate</button>
                   </label>
               </div>
               <div class="col-xl-4 col-lg-4 col-md-4 mb-4">
                  <input class="form-check-input" hidden id="financial_accounts" name="property[type]" type="radio" value="Financial Accounts" {{ isset($RevocableTrustData['property']['type']) &&  $RevocableTrustData['property']['type'] === "Financial Accounts" ? 'checked' : ''}}>
                  <label for="financial_accounts" class="w-100 common-box-img {{ isset($RevocableTrustData['property']['type']) &&  $RevocableTrustData['property']['type'] === "Financial Accounts" ? 'selected' : ''}}" onclick="selectOption(this)">
                     <img src="{{url('v2/images/revocable_living/financial-accounts.png')}}" alt="Financial Accounts" class="w-50 mx-auto d-block my-3">
                       {{-- <p class="text-center">Financial Accounts</p> --}}
                       <small></small>
                       <button type="button" class="select-btn">Financial Accounts</button>
                   </label>
               </div>
               <div class="col-xl-4 col-lg-4 col-md-4 mb-4">
                  <input class="form-check-input" hidden id="business_ownership" name="property[type]" type="radio" value="Business Ownership" {{ isset($RevocableTrustData['property']['type']) &&  $RevocableTrustData['property']['type'] === "Business Ownership" ? 'checked' : ''}}>
                  <label for="business_ownership" class="w-100 common-box-img {{ isset($RevocableTrustData['property']['type']) &&  $RevocableTrustData['property']['type'] === "Business Ownership" ? 'selected' : ''}}" onclick="selectOption(this)">
                       <img src="{{url('v2/images/revocable_living/business-ownership.png')}}" alt="Business Ownership" class="w-50 mx-auto d-block my-3">
                       {{-- <p class="text-center">Business Ownership</p> --}}
                       <small></small>
                       <button type="button" class="select-btn">Business Ownership</button>
                   </label>
               </div>
               <div class="col-xl-4 col-lg-4 col-md-4 mb-4">
                  <input class="form-check-input" hidden id="personal_property" name="property[type]" type="radio" value="Personal Property" {{ isset($RevocableTrustData['property']['type']) &&  $RevocableTrustData['property']['type'] === "Personal Property" ? 'checked' : ''}}>
                  <label for="personal_property" class="w-100 common-box-img {{ isset($RevocableTrustData['property']['type']) &&  $RevocableTrustData['property']['type'] === "Personal Property" ? 'selected' : ''}}" onclick="selectOption(this)">
                      <img src="{{url('v2/images/revocable_living/personal-property.png')}}" alt="Personal Property" class="w-50 mx-auto d-block my-3">
                       {{-- <p class="text-center">Personal Property</p> --}}
                       <small></small>
                       <button type="button" class="select-btn">Personal Property</button>
                   </label>
               </div>
               <div class="col-xl-4 col-lg-4 col-md-4 mb-4">
               <input class="form-check-input" hidden id="mix_assets" name="property[type]" type="radio" value="Mix of Assets" {{ isset($RevocableTrustData['property']['type']) &&  $RevocableTrustData['property']['type'] === "Mix of Assets" ? 'checked' : ''}}>
               <label for="mix_assets" class="w-100 common-box-img {{ isset($RevocableTrustData['property']['type']) &&  $RevocableTrustData['property']['type'] === "Mix of Assets" ? 'selected' : ''}}" onclick="selectOption(this)">
                     <img src="{{url('v2/images/revocable_living/mix-of-assets.png')}}" alt="Mix of Assets" class="w-50 mx-auto d-block my-3">
                       {{-- <p class="text-center">Mix of Assets</p> --}}
                       <small></small>
                       <button type="button" class="select-btn">Mix of Assets</button>
                   </label>
               </div>
            </div>
         </div>
         <!-- start previous / next buttons -->
         <div id="buttonsection" class="submit-button-multiple align-items-center justify-content-center">
            <button type="button" class="btn btn-light btn-lg back-btn d-none">Back</button>
            <button type="submit" class="submit-btn">Save and Continue</button>
            <button type="button" class="btn btn-light btn-lg skip-btn d-none">Skip Step</button>
            <button type="submit" class="btn btn-light btn-lg d-none" name="preview_submit" value="preview">Save and Preview</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/revocable-living-trust-step.js') }}?v={{ time() }}"></script>
<script src="{{ url('frontend/assets/js/forms/custom.js?v=10.1') }}"></script>
<script src="{{ url('v2/js/form-validation.js') }}?v={{ time() }}"></script>
@endsection