@extends('layouts.master')

@section('content')
<div class="container py-5" x-data="{ currency: 'INR' }">
    <!-- Refund Policy Notice -->
    <!-- Refund Policy Notice -->
    <div class="d-flex justify-content-center mb-4">
        <div class="bg-white border text-center px-4 py-2 rounded-pill shadow-sm d-inline-block">
            <span class="fw-bold text-dark small text-uppercase me-1">Policy:</span>
            <span class="text-secondary small">Once the subscription plan is purchased, it cannot be cancelled or refunded.</span>
        </div>
    </div>

    <div class="text-center mb-5">
        <h1 class="fw-bold text-dark mb-3">Choose Your Plan</h1>
        <p class="text-muted fs-5">Unlock the full potential of MiniPort with our tailored subscription plans.</p>
        
        <!-- Currency Toggle -->
        <div class="d-flex justify-content-center mt-4">
            <div class="bg-white p-1 rounded-pill border shadow-sm d-flex">
                <button @click="currency = 'INR'" 
                        :class="currency === 'INR' ? 'bg-primary text-white shadow-sm' : 'text-muted hover:bg-light'"
                        class="btn btn-sm rounded-pill fw-bold px-4 py-2 transition-all">
                    INR (₹)
                </button>
                <button @click="currency = 'USD'" 
                        :class="currency === 'USD' ? 'bg-primary text-white shadow-sm' : 'text-muted hover:bg-light'"
                        class="btn btn-sm rounded-pill fw-bold px-4 py-2 transition-all">
                    USD ($)
                </button>
            </div>
        </div>
    </div>

    <div class="row justify-content-center g-4">
        @forelse($plans as $plan)
            {{-- ... Existing plans loop ... --}}
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                    <!-- Plan Header -->
                    <div class="card-header bg-primary text-white text-center py-4 border-0">
                        @if($plan->is_featured && $plan->price_inr > 0)
                            <span class="badge bg-warning text-dark mb-2"><i class="bi bi-star-fill me-1"></i> POPULAR</span>
                        @endif
                        <h4 class="fw-bold mb-0">{{ $plan->name }}</h4>
                    </div>
                    
                    <!-- Pricing -->
                    <div class="card-body text-center py-4 bg-light">
                        @if($plan->price_inr == 0)
                            <div class="mb-2">
                                <span class="fs-1 fw-bold text-success">FREE</span>
                            </div>
                            <div class="badge bg-secondary mt-2">Validy: {{ $plan->duration_days > 360 ? 'Lifetime' : $plan->duration_days . ' Days' }}</div>
                        @else
                            <div x-show="currency === 'INR'">
                                <div class="mb-2">
                                    <span class="fs-2 fw-bold text-primary">₹{{ number_format($plan->price_inr, 0) }}</span>
                                    <span class="text-muted small">+ GST</span>
                                </div>
                            </div>
                            <div x-show="currency === 'USD'">
                                <div class="mb-2">
                                    <span class="fs-2 fw-bold text-primary">${{ number_format($plan->price_usd, 0) }}</span>
                                    <span class="d-block text-success small">(No GST)</span>
                                </div>
                            </div>
                            <div class="badge bg-secondary mt-2">{{ $plan->duration_days }} Days</div>
                        @endif
                    </div>

                    <!-- Features -->
                    <div class="card-body px-4">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-2 d-flex align-items-center">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                <strong>{{ $plan->product_limit }}</strong>&nbsp;Product Listings
                            </li>
                            @if($plan->inquiry_limit > 0)
                                <li class="mb-2 d-flex align-items-center">
                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
                                    <strong>{{ $plan->inquiry_limit }}</strong>&nbsp;Buyer Notifications via Email
                                </li>
                            @endif
                            <!-- Boolean Features from DB -->
                            @if($plan->show_contact_details)
                                <li class="mb-2 d-flex align-items-center">
                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
                                    Contact Details Visible to Buyers
                                </li>
                            @endif
                            @if($plan->view_buyer_contact)
                                <li class="mb-2 d-flex align-items-center">
                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
                                    Unlock Buyer Contact Details
                                </li>
                            @endif
                            @if($plan->has_verified_badge)
                                <li class="mb-2 d-flex align-items-center">
                                    <i class="bi bi-patch-check-fill text-primary me-2"></i>
                                    <strong>KYC Submitted Tag</strong>
                                </li>
                            @endif
                            @if($plan->allow_microsite)
                                <li class="mb-2 d-flex align-items-center">
                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
                                    Dedicated Microsite
                                </li>
                            @endif
                            @if($plan->features && is_array($plan->features))
                                @foreach($plan->features as $feature)
                                     @php $f = strtolower($feature); @endphp
                                     @if(!str_contains($f, 'product listing') && !str_contains($f, 'buyer notification'))
                                        <li class="mb-2 d-flex align-items-center">
                                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                                            {{ trim($feature, " \"'[]") }}
                                        </li>
                                    @endif
                                @endforeach
                            @elseif($plan->features && is_string($plan->features))
                                 @foreach(explode(',', $plan->features) as $feature)
                                    @php $f = strtolower($feature); @endphp
                                    @if(!str_contains($f, 'product listing') && !str_contains($f, 'buyer notification'))
                                        <li class="mb-2 d-flex align-items-center">
                                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                                            {{ trim($feature, " \"'[]") }}
                                        </li>
                                    @endif
                                @endforeach
                            @endif
                        </ul>
                    </div>

                    <!-- CTA -->
                    <div class="card-footer bg-white border-0 p-4">
                        @auth
                            @if(Auth::user()->hasRole('seller'))
                                <a href="{{ route('seller.subscription.checkout', $plan->id) }}" class="btn {{ $plan->price_inr == 0 ? 'btn-outline-primary' : 'btn-primary' }} w-100 py-2 fw-bold rounded-3">
                                    {{ $plan->price_inr == 0 ? 'Activate Plan' : 'Upgrade Now' }} <i class="bi bi-arrow-right ms-1"></i>
                                </a>
                            @elseif(Auth::user()->hasRole('admin'))
                                <a href="{{ route('admin.plans.edit', $plan->id) }}" class="btn btn-outline-dark w-100 py-2 fw-bold rounded-3">
                                    <i class="bi bi-pencil me-1"></i> Edit Plan
                                </a>
                            @else
                                <a href="{{ route('register.seller') }}" class="btn btn-outline-primary w-100 py-2 fw-bold rounded-3">
                                    Register as Seller to Buy
                                </a>
                            @endif
                        @else
                            <a href="{{ route('register.seller') }}?plan={{ $plan->id }}" class="btn {{ $plan->price_inr == 0 ? 'btn-outline-primary' : 'btn-primary' }} w-100 py-2 fw-bold rounded-3">
                                {{ $plan->price_inr == 0 ? 'Get Started' : 'Buy Now' }} <i class="bi bi-arrow-right ms-1"></i>
                            </a>
                        @endauth
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center">
                <p class="text-muted">No subscription plans available at the moment.</p>
            </div>
        @endforelse
    </div>

    <!-- Scroll Down Indicator for Boost Packages -->
    <div class="text-center py-4">
        <a href="#promotion-packages" class="text-decoration-none text-muted d-inline-flex flex-column align-items-center animate-bounce">
            <span class="small text-uppercase fw-bold mb-1">View Boost Packages</span>
            <i class="bi bi-chevron-double-down fs-3 text-primary"></i>
        </a>
    </div>

    <!-- Promotion Packages Section -->
    <div id="promotion-packages" class="mt-5 pt-5 border-top">
        <div class="text-center mb-5">
            <span class="badge bg-info bg-opacity-10 text-info px-3 py-2 rounded-pill fw-bold mb-3">BOOST VISIBILITY</span>
            <h2 class="fw-bold text-dark">Promotion Packages</h2>
            <p class="text-muted">Get your products to the top of search results and attract more buyers.</p>
        </div>

        <!-- Bilingual Disclaimer -->
        <div class="card border-0 shadow-sm rounded-4 bg-gradient-info-soft mb-5 overflow-hidden">
            <div class="card-body p-4 p-lg-5">
                <div class="row align-items-center">
                    <div class="col-lg-1 text-center mb-3 mb-lg-0">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 28px; height: 28px;">
                            <i class="bi bi-info-circle-fill text-primary" style="font-size: 1rem;"></i>
                        </div>
                    </div>
                    <div class="col-lg-11">
                        <div class="ps-lg-3">
                            <div class="mb-3">
                                <h6 class="fw-bold text-primary text-uppercase small mb-2">Important Note / महत्वपूर्ण सूचना</h6>
                                <p class="mb-1 fw-bold text-dark" style="font-size: 1.1rem;">
                                    English: Unlock Top Visibility: To use Promotion Packages and unlock premium benefits like **seller contact details unlock**, having an active Subscription Plan is mandatory.
                                </p>
                                <p class="mb-0 text-muted" style="font-size: 1.1rem; font-style: italic;">
                                    Hindi: अपनी प्रोडक्ट्स को टॉप रिजल्ट्स में लाने के लिए और **सेलर कांटेक्ट डिटेल्स** जैसे प्रीमियम फीचर्स को अनलॉक करने के लिए, आपके पास एक एक्टिव **सब्सक्रिप्शन प्लान** होना ज़रूरी है। इसके बिना प्रमोशन पैकेजों के सारे बेनिफिट्स नहीं मिलेंगे।
                                </p>
                            </div>
                            <div class="d-flex flex-wrap gap-3">
                                <span class="badge rounded-pill bg-light text-dark border"><i class="bi bi-person-lines-fill text-success me-1"></i> Seller Contacts Unlock</span>
                                <span class="badge rounded-pill bg-light text-dark border"><i class="bi bi-graph-up-arrow text-primary me-1"></i> Top Search Ranking</span>
                                <span class="badge rounded-pill bg-light text-dark border"><i class="bi bi-shield-check text-info me-1"></i> Premium Branding</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Promotion Packages Grid -->
        <div class="row g-4 justify-content-center">
            @forelse($promotionPackages as $pkg)
                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 border-0 shadow-sm rounded-4 hover-lift-sm transition-all overflow-hidden border-top-active">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="fw-bold text-dark mb-1">{{ $pkg->name }}</h5>
                                    <div x-show="currency === 'INR'">
                                        <div class="text-primary fw-bold fs-4">₹{{ number_format($pkg->price, 0) }} <small class="text-muted fs-6 fw-normal">+ GST</small></div>
                                    </div>
                                    <div x-show="currency === 'USD'">
                                        <div class="text-primary fw-bold fs-4">${{ number_format($pkg->price_usd, 0) }} <small class="text-success fs-6 fw-normal">(No GST)</small></div>
                                    </div>
                                </div>
                                <div class="bg-primary bg-opacity-10 text-primary rounded p-2">
                                    <i class="bi bi-megaphone-fill"></i>
                                </div>
                            </div>
                            
                            <p class="text-muted small mb-4">{{ $pkg->description }}</p>
                            
                            <ul class="list-unstyled mb-0">
                                <li class="mb-2 small d-flex align-items-center">
                                    <i class="bi bi-clock-history text-success me-2"></i>
                                    Duration: <strong>{{ $pkg->duration_days }} Days</strong>
                                </li>
                                <li class="mb-2 small d-flex align-items-center">
                                    <i class="bi bi-box-seam text-success me-2"></i>
                                    Promote up to: <strong>{{ $pkg->max_products }} Products</strong>
                                </li>
                                <li class="mb-2 small d-flex align-items-center">
                                    <i class="bi bi-bar-chart-fill text-success me-2"></i>
                                    Priority Level: <strong>{{ $pkg->priority_level }}</strong>
                                </li>
                            </ul>
                        </div>
                        <div class="card-footer bg-light border-0 p-4">
                            @auth
                                @if(Auth::user()->hasRole('seller'))
                                    <a href="{{ route('seller.promotions.packages') }}" class="btn btn-primary w-100 rounded-pill fw-bold">Buy Now</a>
                                @else
                                    <a href="{{ route('seller.promotions.packages') }}" class="btn btn-primary w-100 rounded-pill fw-bold">Buy Now</a>
                                @endif
                            @else
                                <a href="{{ route('login') }}?redirect={{ route('seller.promotions.packages') }}" class="btn btn-primary w-100 rounded-pill fw-bold">Buy Now</a>
                            @endauth
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center text-muted py-4">
                    No active promotion packages found.
                </div>
            @endforelse
        </div>
        
        <!-- Contact CTA -->
        <div class="text-center mt-5">
            <p class="text-muted mb-3">Promotion Benefits ke baare mein adhik jaankari ke liye contact karein</p>
            <a href="mailto:support@theminiport.com" class="btn btn-dark rounded-pill px-4 fw-bold">
                <i class="bi bi-envelope me-2"></i> Support Team Se Baat Karein
            </a>
        </div>
    </div>
</div>

<style>
    .bg-gradient-info-soft {
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        border: 1px solid #bae6fd !important;
    }
    .border-top-active {
        border-top: 3px solid #0d6efd !important;
    }
    .transition-all { transition: all 0.3s ease; }
    .hover-lift-sm:hover { transform: translateY(-3px); }
    
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-10px);}
        60% {transform: translateY(-5px);}
    }
    .animate-bounce {
        animation: bounce 2s infinite;
    }
</style>
</div>
@endsection
