@extends('layouts.front.main_layout')
@section('content')
    <section class="plans">
        <div class="container">
            <div class="row">
                <div class="rr">
                    <span class="small-text">PRICING</span>
                    <br><br>
                    <h2>Choose The <i style="font-weight: normal;color: #ff5a94;">Best Plan</i> That's For You</h2>
                    <p>Set all<strong> SPion'S </strong>features. No credit card required.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                    @foreach($plans as $plan)
                       @if($plan->interval == 'month') 
                        {{-- <div class="plan">
                            <h2>{{ $plan->name }}</h2>  <!-- Displaying the plan's name -->
                            <p>{{ $plan->description }}</p>
                            <p>Price: {{ $plan->price }}</p>
                            <p>Interval: {{ $plan->interval }}</p>

                            <h4>Features:</h4>
                            <ul>
                                @foreach($plan->planFeatures as $planFeature)
                                    <li>{{ $planFeature->pricingPlanFeature->name }}</li>
                                @endforeach
                            </ul>
                        </div> --}}
                        <div class="our-plans">
                            {{-- <h2>Monthly</h2> --}}
                            <h2>{{ $plan->name }}</h2>
                            {{-- <p>For individuals and small teams looking to manage their tasks.</p> --}}
                            <p>{{ $plan->description }}</p>
                            <div class="price">
                                <p><span class="ss">₹</span>{{ $plan->price }}<span class="mm">/{{ $plan->interval }}</span></p>
                            </div>
                            <a href="#" class="btn btn-sm w-full w-lg-auto btn3">Get Started</a>
                            <h5>Everything in Personal, plus:</h5>
                            <div class="plans-list">
                                <ul class="features">
                                    @if (count($plan->features))
                                    @foreach($plan->features as $planFeature)
                                    @if (isset($planFeature->pricingPlanFeature))
                                    <li><i class="fas fa-check"></i>{{ $planFeature->pricingPlanFeature->description }}</li>
                                    @endif
                                    @endforeach
                                    @endif

                                    {{-- <li> <i class="fas fa-check"></i> Unlimited updates</li>
                                    <li> <i class="fas fa-check"></i> Custom designs & features</li>
                                    <li> <i class="fas fa-check"></i>Custom permissions</li>
                                    <li> <i class="fas fa-times"></i> Custom instructors</li>
                                    <li> <i class="fas fa-times"></i> Many devices</li> --}}
                                </ul>
                            </div>
                        </div>
                        @endif
                    @endforeach
                </div>

                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                    @foreach($plans as $plan)
                    @if($plan->interval == 'year') 
                    <div class="our-plans">
                        {{-- <h2>Monthly</h2> --}}
                        <h2>{{ $plan->name }}</h2>
                        {{-- <p>For individuals and small teams looking to manage their tasks.</p> --}}
                        <p>{{ $plan->description }}</p>
                        <div class="price">
                            <p><span class="ss">₹</span>{{ $plan->price }}<span class="mm">/{{ $plan->interval }}</span></p>
                        </div>
                        <a href="#" class="btn btn-sm w-full w-lg-auto btn3">Get Started</a>
                        <h5>Everything in Personal, plus:</h5>
                        <div class="plans-list">
                            <ul class="features">
                                @if (count($plan->features))
                                @foreach($plan->features as $planFeature)
                                @if (isset($planFeature->pricingPlanFeature))
                                <li><i class="fas fa-check"></i>{{ $planFeature->pricingPlanFeature->description }}</li>
                                @endif
                                @endforeach
                                @endif
                            </ul>
                        </div>
                    </div>
                    @endif
                    @endforeach
                </div>

                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                    {{-- @foreach($plans as $plan) --}}
                    <div class="our-plans1">
                        <h2>Customize</h2>
                        <p>For individuals and small teams looking to manage their tasks.</p>
                        <div class="price invisible">
                            <p><span class="ss">₹</span>35<span class="mm">/month</span></p>
                        </div>
                        <a href="#" class="btn btn-sm w-full w-lg-auto btn4">Contact Us</a>
                        <h5>Everything in Personal, plus:</h5>
                        <div class="plans-list">
                            <ul class="features">
                                @if (count($plan->features))
                                @foreach($plan->features as $planFeature)
                                @if (isset($planFeature->pricingPlanFeature))
                                <li><i class="fas fa-check"></i>{{ $planFeature->pricingPlanFeature->description }}</li>
                                @endif
                                @endforeach
                                @endif
                            </ul>
                        </div>
                    </div>
                    {{-- @endforeach --}}
                </div>

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


    <section class="faq1">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="rr">
                        <h2>Frequently Asked <i style="font-weight: normal;color: #ff5a94;">Questions</i></h2>
                        <p>Aliquam a augue suscipit, luctus neque purus ipsum<br>
                            neque dolor primis a libero tempus, blandit and<br>
                            cursus varius and magnis sapien</p>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach ($faqs as $index => $faq) 
                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">

                        <div class="container">
                            <div class="accordion" id="accordionExample{{ $index }}">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse{{ $index }}" 
                                            aria-expanded="false" aria-controls="collapse{{ $index }}">
                                            {{$faq->question}}
                                        </button>
                                    </h2>
                                    <div id="collapse{{ $index }}" class="accordion-collapse collapse" 
                                        data-bs-parent="#accordionExample{{ $index }}">
                                        <div class="accordion-body">
                                            {{$faq->answer}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="newsletter">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                    <div class="newsletter-col1">
                        <p>NEWSLETTER</p>
                        <h2>Subscribe our <i style="font-weight: normal;color: #ff5a94;">Newsletter</i></h2>
                        <p>By clicking the button, you are agreeing with our Term & Conditions</p>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                    <div class="newsletter-col2">
                        <div class="form">
                            <div class="form-group">
                                <div class="formm">
                                    <input type="text" placeholder=" Enter your mail.." class="form-control11">
                                    <button class="btn newsletter-button">SUBSCRIBER</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection