@extends('frontend.layouts.app')

@section('title')
    {{ $title ?? 'Page header' }}
@endsection

@section('meta')
    <meta property="og:title" content="{{ $og_title }}" />
    <meta property="og:description" content="{{ $og_description }}" />
    <meta property="og:image" content="{{ getSeoImage($og_image) }}" />
@endsection

@push('style')
<style>
.ribbon {
    font-size: 0.85rem;
    font-weight: 600;
    position: absolute;
    top: 10px;
    right: -8px;
    background: linear-gradient(135deg, #28a745, #3ccf63);
    color: #fff;
    padding: 4px 12px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transform: rotate(3deg);
}

/* Ensure the ribbon stays visible */
.pricingTable {
    position: relative;
    overflow: visible !important;
}
</style>
@endpush


@section('content')
    <!-- ======================= breadcrumb start  ============================ -->
    @include('frontend.layouts.includes.breadcrumb', [
        'links' => [[$title => route('frontend.membership')]],
    ])
    <!-- ======================= breadcrumb end  ============================ -->

    <!-- ======================= membership start  ============================ -->
    <div class="membership_section pt-2 pb-5">
        <div class="container">
            <h3 class="sec-title text-center py-3 text-muted">Membership Plans</h3>

            <!-- Tabs -->
            <ul class="nav nav-tabs justify-content-center mb-4 mt-1" id="planTabs">
                <li class="nav-item">
                    <button class="nav-link active" data-plan="monthly">Monthly</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-plan="yearly">Yearly</button>
                </li>
            </ul>

            <!-- Plan Listings -->
            <div class="row g-4" id="plansContainer">
                @if (isset($plans) && count($plans) > 0)
                    @foreach ($plans as $plan)
                        <div class="col-lg-4 col-md-6 col-sm-12 col-12 plan-card" data-interval="{{ $plan->interval }}">
                            <div class="pricingTable @if ($plan->recommended) recommended @endif">
                                
                                {{-- Lifetime ribbon --}}

                                <div class="pricingTable-header">
                                    <h3 class="title">{{ $plan?->name }}</h3>
                                    <div class="price-value">
                                        @if ($plan?->interval === 'lifetime' || $plan?->price == 0)
                                            <span class="amount text-success fw-bold fs-4">Free</span>
                                        @else
                                            <span class="currency">{{ $setting?->currency_symbol }}</span>
                                            <span class="amount">{{ $plan?->price }}</span>
                                            <span class="duration">
                                                @switch($plan?->interval)
                                                    @case('monthly')
                                                        /mo
                                                    @break

                                                    @case('yearly')
                                                        /yr
                                                    @break

                                                    @case('custom_date')
                                                        / {{ $plan?->custom_date }}
                                                    @break

                                                    @default
                                                        /mo
                                                @endswitch
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <ul class="pricing-content">
                                    <li>{{ $plan->ad_limit }} ad postings</li>
                                    @if ($plan->interval == "lifetime")
                                        <li>Valid for Lifetime</li>
                                    @else
                                        <li>Valid for {{ $plan->day }} Days</li>
                                    @endif

                                    @if ($plan->reward)
                                        <li>
                                            Earn {{ $plan->reward }} virtual {{ $setting?->currency_symbol }}
                                            <i class="fa fa-info-circle text-muted ms-1"
                                                data-bs-toggle="tooltip"
                                                title="Usable for purchasing package"
                                                style="cursor: pointer;">
                                            </i>
                                        </li>
                                    @endif

                                    <li class="{{ !$plan->customer_support ? 'disable' : '' }}">Customer Support</li>
                                    <li class="{{ !$plan->social_media_sharing ? 'disable' : '' }}">Social Media Sharing</li>
                                </ul>
 
                            <div class="pricingTable-signup">
                                    @if ($plan?->price < auth()->user()?->balance && $plan?->price > 0  )
                                        <a class="virtual-btn mb-3" href="{{ route('user.plan.purchase.vp', $plan->id) }}">
                                            Buy with virtual {{ $setting?->currency_symbol }}
                                        </a>
                                    @endif
                                    @php
    $currentPlanId = auth()->user()?->currentPlan?->plan_id;
    $isActivePlan = $currentPlanId && $currentPlanId == $plan->id;
@endphp

<a 
    href="{{ $isActivePlan ? 'javascript:void(0);' : route($plan?->price > 0 ? 'user.plan.purchase' : 'user.plan.upgrade', $plan->id) }}" 
>
    {{ $isActivePlan 
        ? 'Currently Active' 
        : ($plan?->interval === 'lifetime' || $plan?->price == 0 
            ? 'Get Free Access' 
            : 'Buy Now') 
    }}
</a>

                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const tabs = document.querySelectorAll("#planTabs .nav-link");
            const planCards = document.querySelectorAll(".plan-card");

            tabs.forEach(tab => {
                tab.addEventListener("click", function() {
                    // Switch active tab
                    tabs.forEach(t => t.classList.remove("active"));
                    this.classList.add("active");

                    const selected = this.getAttribute("data-plan");

                    // Show/hide based on tab — lifetime plans are always visible
                    planCards.forEach(card => {
                        const interval = card.getAttribute("data-interval");
                        if (interval === selected || interval === "lifetime") {
                            card.style.display = "block";
                        } else {
                            card.style.display = "none";
                        }
                    });
                });
            });

            // Default view: show monthly + lifetime
            planCards.forEach(card => {
                const interval = card.getAttribute("data-interval");
                if (interval !== "monthly" && interval !== "lifetime") {
                    card.style.display = "none";
                }
            });

            // Activate tooltips (Bootstrap)
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(el => new bootstrap.Tooltip(el));
        });
    </script>
@endpush