@extends('user_dashboard.layouts.app')
@section('content')
    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>
                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box">
                        <div class="content">
                            <div class="section-title">
                                <h4 class="rbt-title-style-3">Prime Membership Plan</h4>
                            </div>
                            <div class="advance-tab-button mb--30">
                                <ul class="nav nav-tabs tab-button-style-2 justify-content-start" id="myTab-4" role="tablist">
                                    @foreach($prime_plans as $prime_plan_key=>$prime_plan)
                                        <li role="presentation">
                                            <a href="#" class="tab-button @if($prime_plan_key == 1) active @endif" id="{{$prime_plan[0]->slug}}-tab" data-bs-toggle="tab" data-bs-target="#{{$prime_plan[0]->slug}}-xyz" role="tab" aria-controls="{{$prime_plan[0]->slug}}-xyz" @if($prime_plan_key == 1) aria-selected="true" @else aria-selected="false" @endif>
                                                <span class="title">{{$prime_plan_key}} Month</span>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <div class="tab-content">
                                @foreach($prime_plans as $prime_plan_key=>$prime_plan)
                                    <div class="tab-pane fade @if($prime_plan_key == 1) active show @endif" id="{{$prime_plan[0]->slug}}-xyz" role="tabpanel" aria-labelledby="{{$prime_plan[0]->slug}}-tab">
                                        <div class="row g-5">
                                            @foreach($prime_plan as $prime_pla)
                                                <div class="col-lg-4 col-md-6 col-12" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                                                    <div class="top-features-box h-100 text-center bg-gradient-16">
                                                        <div class="inner">
                                                            <div class="content">
                                                                <span class="pre-title text-uppercase">{{$prime_plan_key}} Month Membership</span>
                                                                <h4 class="title">{{$prime_pla->title}}</h4>
                                                            </div>
                                                            <div class="thumbnail">
                                                                <img src="{{ asset('frontend/images/prime_plans/'.$prime_pla->image) }}" alt="Image" onerror="this.onerror=null;this.src='{{ asset('backend/img/no-image.png') }}'">
                                                            </div>
                                                            <div class="rbt-badge-group">
                                                                @foreach($prime_pla->points as $point)
                                                                    <span class="rbt-badge">{{$point}}</span>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                        <div class="shape-image">
                                                            <img src="{{ asset('frontend/images/splash/icons/sun-shadow-right.png') }}" alt="Shape Images">
                                                        </div>
                                                        <div class="rbt-card-bottoms">
                                                            <div class="rbt-price">
                                                                @if($prime_pla->discounted_price == $prime_pla->price)
                                                                    <span class="current-price">₹{{$prime_pla->discounted_price}}</span>
                                                                @else
                                                                    <span class="current-price">₹{{$prime_pla->discounted_price}}</span>
                                                                    <span class="off-price">₹{{$prime_pla->price}}</span>
                                                                @endif
                                                            </div>
                                                            @if($active_plan?->id == $prime_pla->id)
                                                                <a class="rbt-btn btn-border btn-sm radius-round text-white"> Activated <i class="feather-arrow-up-right"></i></a>
                                                            @else
                                                                <a class="rbt-btn btn-border btn-sm radius-round text-white" href="{{route('user.prime.plan.payment',$prime_pla->slug)}}"> Buy Now <i class="feather-arrow-up-right"></i></a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection