@extends('layouts.v2.frontend')
@section('title', '| Get Started')
@section('css')

@endsection
@section('content')
<div class="get-started-product-section">
    <div class="container">
        <div class="heading-section">
            {{-- <span>Product</span> --}}
           <h2 >Tell us about yourself and we’ll match you with a plan.</h2>
           <small>Select all that apply to you</small>
        </div>
        </div>

        <div class="common-div for-web">
            <div class="get-started-product-area ">

                @php
                $items = [
                    ['src' => 'children.png', 'text' => 'My children are under 18'],
                    ['src' => 'home.png', 'text' => 'I own a home or real estate'],
                    ['src' => 'healthcare.png', 'text' => 'I want to outline my healthcare preferences'],
                    ['src' => 'asset.png', 'text' => 'I have over $160k in assets'],
                    ['src' => 'marrige.png', 'text' => "I'm in a marriage"],
                    ['src' => 'business.png', 'text' => 'I run a business'],
                    ['src' => 'gift-icon.png', 'text' => 'I want to donate gifts to others or charities'],
                    ['src' => 'consol.png', 'text' => 'I want to consult with a lawyer'],
                    ['src' => 'guidance.png', 'text' => 'I want guidance while planning'],
                    ['src' => 'omit.png', 'text' => 'I want to omit people from my Will']
                ];
                @endphp

                <ul>
                    @foreach($items as $item)
                    <li class="nav-item">
                        <button class="nav-link box-get-items">
                            <img src="{{ url('v2/images/' . $item['src']) }}" alt="{{ $item['text'] }}">
                            <p>{{ $item['text'] }}</p>
                            <div class="checkbox-icon"><span></span></div>
                        </button>
                    </li>
                    @endforeach
                </ul>

            </div>
        </div>
        <div class="for-mobile">
            <div class="swiper common-slider-container getBox">
                
                <!-- Swiper Wrapper -->
                <div class="swiper-wrapper get-started-product-area">
                    <!-- Swiper Slide 1 -->
                    <div class="get-started-product-area ">
                        <ul class="swiper-slide wrap-slider">
                            <li class="nav-item" >
                                <button class="nav-link box-get-items active" >
                                    <img src="{{url('v2/images/children.png')}}" alt=""><p>My children are under 18</p>
                                    <div class="checkbox-icon"><span></span></div>
                                </button>
                            </li>
                        </ul>
                    </div>
                    @foreach($items as $item)
                        <div class="get-started-product-area swiper-slide wrap-slider">
                            <ul>
                                <li class="nav-item" >
                                    <button class="nav-link box-get-items"  >
                                        <img src="{{ url('v2/images/' . $item['src']) }}" alt="{{ $item['text'] }}">
                                        <p>{{ $item['text'] }}</p>
                                        <div class="checkbox-icon">
                                            <span></span>
                                        </div>
                                </li>
                            </ul>
                        </div>
                    @endforeach

                </div>
            
                <!-- Pagination -->
                <div class="pagination-reviews default-dots"></div>
            </div>
        </div>
        {{-- <script>
                document.querySelectorAll('.box-get-items').forEach(button => {
            button.addEventListener('click', function () {
                this.classList.toggle('active'); // Toggle the 'selected' class
            });
        });
        </script> --}}


        <div class="swiper common-slider-container productItem">
                
            <!-- Swiper Wrapper -->
            <div class="swiper-wrapper">
                <!-- Swiper Slide 1 -->
                <div class="swiper-slide wrap-slider" id="trust">
                    <div class="price-area product-price-list">
                        <div class="top-rice-part">
                        <h4>Set up a TRUST</h4>
                        <p>Your complete plan to protect and transfer your assets. A Trust prevents your loved ones from losing time and money in probate court.</p>
                        
                    </div>
                        <div class="list-rice-content set-uplist">
                            <ul>
                                <li>
                                    <img src="{{url('v2/images/check-icon.png')}}" alt="">
                                    <p>Popular choice for homeowners</p>
                                </li>
                                <li>
                                    <img src="{{url('v2/images/check-icon.png')}}" alt="">
                                    <p>Contains all will documents</p>
                                </li>
                                <li>
                                    <img src="{{url('v2/images/check-icon.png')}}" alt="">
                                    <p>Goes into effect while you're living</p>
                                </li>
                            </ul>
                            <div class="button-section-icon-price">
                                <button onclick="window.location.href='{{ route('userhomePage') }}'">Create your TRUST</button>
                            </div>
                            <div class="product-list-more-button" onclick="window.location.href='{{ route('trust') }}'">
                                <small style="transition: color -1s ease; color: #000;" onmouseover="this.style.color='#FF4D1C'" onmouseout="this.style.color='#000'">More about TRUSTS</small>
                            </div>
                            
                        </div>
                    </div>
                </div>
                
                <!-- Swiper Slide 2 -->
                <div class="swiper-slide wrap-slider" id="will">
                    <div class="price-area product-price-list">
                        <div class="heading-title-item-price d-none"><small>Recommended for you</small></div>
                        <div class="top-rice-part">
                        <h4>Write your WILL</h4>
                        <p>Cover the basics, like who will be responsible for your children and what should happen to your assets after you're gone.</p>
                        
                    </div>
                        <div class="list-rice-content set-uplist">
                            <ul>
                                <li>
                                    <img src="{{url('v2/images/check-icon.png')}}" alt="">
                                    <p>Does not prevent probate court</p>
                                </li>
                                <li>
                                    <img src="{{url('v2/images/check-icon.png')}}" alt="">
                                    <p>Most affordable estate plan</p>
                                </li>
                                <li>
                                    <img src="{{url('v2/images/check-icon.png')}}" alt="">
                                    <p>Goes into effect after you're gone</p>
                                </li>
                            </ul>
                            <div class="button-section-icon-price">
                                <button onclick="window.location.href='{{ route('userhomePage') }}'">Create your WILL</button>
                            </div>
                            <div class="product-list-more-button" onclick="window.location.href='{{ route('willsEstate') }}'">
                                <small style="transition: color -1s ease; color: #000;" onmouseover="this.style.color='#FF4D1C'" onmouseout="this.style.color='#000'">More about WILL</small>
                            </div>
                        </div>
                    </div> 
                </div>

                
            </div>

            <!-- Pagination -->
            <div class="pagination-reviews default-dots"></div>
        </div>

    </div>
</div>

<script>
    // Keep track of selected items
    const selectedItems = new Set();

    document.querySelectorAll('.box-get-items').forEach((button, index) => {
        button.addEventListener('click', function () {
            // Toggle active state
            this.classList.toggle('active');
            
            if (this.classList.contains('active')) {
                selectedItems.add(index);
            } else {
                selectedItems.delete(index);
            }

            // Update sections visibility based on selections
            updateSections();
        });
    });

    function updateSections() {
        const trustSection = document.getElementById('trust');
        const willSection = document.getElementById('will');
        

        // Define the selected option indexes for trust (e.g., 2 and 7)
        const trustItems = [1, 6]; // These correspond to options 2 and 7 (zero-indexed)

        // If only trust items (2 and 7) are selected, show trust section only
        if ((selectedItems.has(1) && selectedItems.has(6)) && selectedItems.size === 2) {
            trustSection.style.display = 'block';
            willSection.style.display = 'none';
        }
        // Show both Trust and Will if any trust item (2 or 7) and any other item are selected
        else if ((selectedItems.has(1) || selectedItems.has(6)) && selectedItems.size >= 2) {
            trustSection.style.display = 'block';
            willSection.style.display = 'block';
        }
        // Show trust section only if option 2 or 7 is selected (without other items)
        else if (selectedItems.has(1) || selectedItems.has(6)) {
            trustSection.style.display = 'block';
            willSection.style.display = 'none';
        }
        // Show will section if any other item is selected (except 2 and 7)
        else if (selectedItems.size > 0) {
            trustSection.style.display = 'none';
            willSection.style.display = 'block';
        } else {
            // Hide both if no relevant items are selected
            trustSection.style.display = 'none';
            willSection.style.display = 'none';
        }
    }
</script>




<!-- ================================================estate plan============================================================ -->
<div class="estate-plan-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="left-section-estate-plan ">
                    <div class="shine-effect">
                        <img src="{{url('v2/images/handshke_img.png')}}" alt="Trust estate plan">
                    </div>
                    <div class="message-box for-web" id="openChatBtn">
                        <div class="img-box">
                        <img src="{{url('v2/images/message-icon.png')}}" alt="Have questions about setting up your trust?"></div>
                        <div class="content-sa">
                        <p>Have questions about setting up your trust?</p>
                        <p class="color-s">Chat with the {{ env('APPLICATION_NAME') }} team</p></div>
                    </div>
   
                      
                </div>
            </div>
            <div class="col-lg-6">
                <div class="right-estate-section">
                    <h2>Trust estate plan</h2>
                    <small>$449 per individual, or $549 for a couple</small>
                    <p>Our Trust Estate Plan offers a comprehensive solution for managing and protecting your assets.</p>
                    {{-- <div class="guarentee-are">
                        <img src="{{url('v2/images/guarentee.png')}}" alt="">
                        <small>60 day guarentee</small>
                        <img src="{{url('v2/images/i.png')}}" alt="">
                    </div> --}}

                    <div class="accordion for-mobile" id="accordionExample2">
                        <div class="accordion-item documents-list common-lists">
                            <h2 class="accordion-header" id="headingNine">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
                                    Documents
                                </button>
                            </h2>
                            <div id="collapseNine" class="accordion-collapse collapse " aria-labelledby="headingNine" data-bs-parent="#accordionExample2">
                                <div class="accordion-body">
                                    <ul>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Bypass probate court involvement to keep your affairs confidential.</p></li>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Designate trusted guardians for your children and pets.</p></li>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Assign responsible individuals to manage your affairs.</p></li>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Clearly define the distribution of specific gifts, including money, possessions, and property.</p></li>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Control the allocation of your assets as per your preferences.</p></li>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Ensure that selected individuals are excluded from receiving your property.</p></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item documents-list common-lists">
                            <h2 class="accordion-header" id="headingTen">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTen" aria-expanded="false" aria-controls="collapseTen">
                                    Benefits
                                </button>
                            </h2>
                            <div id="collapseTen" class="accordion-collapse collapse" aria-labelledby="headingTen" data-bs-parent="#accordionExample2">
                                <div class="accordion-body">
                                    <ul>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Revocable Living Trust: A flexible legal entity to manage and distribute your assets.</p></li>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Schedule of Assets: A detailed list of assets incorporated into your Revocable Living Trust.</p></li>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Last Will & Testament (Pour-Over Will): A legal document to distribute any assets not included in the trust.</p></li>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Advance Healthcare Directive (aka Living Will): Outlines your end-of-life medical care preferences.</p></li>
                                        <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Power of Attorney: Legally appoints someone to make decisions on your behalf when necessary.</p></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    

                    <div class="flex-document-benefit for-web">
                        <div class="documents-list common-lists">
                            <h6>Documents</h6>
                            <ul>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Bypass probate court involvement to keep your affairs confidential.</p></li>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Designate trusted guardians for your children and pets.</p></li>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Assign responsible individuals to manage your affairs.</p></li>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Clearly define the distribution of specific gifts, including money, possessions, and property.</p></li>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Control the allocation of your assets as per your preferences.</p></li>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Ensure that selected individuals are excluded from receiving your property.</p></li>

                            </ul>
                        </div>
                        <div class="benefit-list common-lists">
                            <h6>Benefits</h6>
                            <ul>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Revocable Living Trust: A flexible legal entity to manage and distribute your assets.</p></li>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Schedule of Assets: A detailed list of assets incorporated into your Revocable Living Trust.</p></li>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Last Will & Testament (Pour-Over Will): A legal document to distribute any assets not included in the trust.</p></li>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Advance Healthcare Directive (aka Living Will): Outlines your end-of-life medical care preferences.</p></li>
                                <li><img src="{{url('v2/images/check-success.png')}}" alt=""><p>Power of Attorney: Legally appoints someone to make decisions on your behalf when necessary.</p></li>
                            </ul>
                        </div>
                    </div>
                    <div class="product-button-td">
                        <button onclick="window.location.href='{{ route('userhomePage') }}'">Set up your TRUST</button>
                    </div>
                    <div class="for-mobile">
                    <div class="message-box">
                        <div class="img-box">
                        <img src="{{url('v2/images/message-icon.png')}}" alt=""></div>
                        <div class="content-sa">
                        <p>Have questions about setting up your trust?</p>
                        <p class="color-s">Chat with the {{ env('APPLICATION_NAME') }} team</p></div>
                    </div>
                </div>
                </div>
            </div>

        </div>
    </div>
</div>


<!-- ================================================happy-customer============================================================ -->
<div class="happy-customer-section">
    <div class="container">
        <div class="slider-heading">
            <h2>Join 100s of our happy customers</h2>
        </div>
        <div class="swiper happyCusotmer">
            <div class="swiper-wrapper">
                
                <div class="slider-banner swiper-slide">
                    <div class="product-customer-happy">
                        <img src="{{url('v2/images/merch-img.png')}}" alt="">
                        <small>Join 200+ trusted clients</small>
                        <ul>
                            <li><img src="{{url('v2/images/Star .png')}}" alt=""></li>
                            <li><img src="{{url('v2/images/Star .png')}}" alt=""></li>
                            <li><img src="{{url('v2/images/Star .png')}}" alt=""></li>
                            <li><img src="{{url('v2/images/Star .png')}}" alt=""></li>
                            <li><img src="{{url('v2/images/Star .png')}}" alt=""></li>
            
                        </ul>
                        <p>“Lorem ipsum dolor sit amet consectetur. Scelerisque morbi dictum id nullam facilisi amet. Vulputate a morbi sed erat hendrerit interdum. Est in lacus hendrerit libero amet praesent potenti. Et eu etiam urna eget.”</p>
                    </div>
                    </div>
                    <div class="slider-banner swiper-slide">
                        <div class="product-customer-happy">
                            <img src="{{url('v2/images/merch-img.png')}}" alt="">
                            <small>Join 200+ trusted clients</small>
                            <ul>
                                <li><img src="{{url('v2/images/Star .png')}}" alt=""></li>
                                <li><img src="{{url('v2/images/Star .png')}}" alt=""></li>
                                <li><img src="{{url('v2/images/Star .png')}}" alt=""></li>
                                <li><img src="{{url('v2/images/Star .png')}}" alt=""></li>
                                <li><img src="{{url('v2/images/Star .png')}}" alt=""></li>
                
                            </ul>
                            <p>“Lorem ipsum dolor sit amet consectetur. Scelerisque morbi dictum id nullam facilisi amet. Vulputate a morbi sed erat hendrerit interdum. Est in lacus hendrerit libero amet praesent potenti. Et eu etiam urna eget.”</p>
                        </div>
                        </div>
                      
            </div>
        
        <div class="pagination-reviews"></div>
    </div>
        
    </div>
</div>
<!-- ================================================FAQ============================================================ -->

<div class="faq-section bg-dds">
    <div class="container">
        <div class="heading-section">
           
           <h2>FAQs</h2>
        </div>
        <div class="faq-area">
            @include('frontend.v2.inc.faq')
        </div>
    </div>
</div>
{{-- @include('frontend.v2.inc.botpress') --}}
@endsection