@extends('layouts.seller')

@section('title', 'Subscription Plans')

@section('content')
<div class="page-header">
    <div>
        <h4 class="page-title">Subscription Plans</h4>
        <p class="text-muted mb-0">Upgrade your account to unlock more features</p>
    </div>
</div>

<div class="container-fluid px-0">
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row row-cols-1 row-cols-md-3 g-4">
        @foreach($plans as $plan)
            @if($plan->is_active)
                <div class="col">
                    <div class="card h-100 border-0 shadow-sm hover-shadow transition-all {{ $currentSubscription && $currentSubscription->plan_id == $plan->id ? 'ring-2 ring-primary' : '' }}">
                        <div class="card-header bg-white text-center py-4 border-bottom-0">
                            <h4 class="fw-bold mb-1">{{ $plan->name }}</h4>
                            @if($currentSubscription && $currentSubscription->plan_id == $plan->id)
                                <span class="badge bg-primary-subtle text-primary rounded-pill px-3">Current Plan</span>
                            @endif
                        </div>
                        <div class="card-body text-center p-4">
                            <div class="mb-4">
                                <span class="h2 fw-bold text-primary">₹{{ number_format($plan->price_inr) }}</span>
                                <small class="text-muted">/ {{ $plan->duration_days }} days</small>
                            </div>
                            
                            <ul class="list-unstyled text-start mx-auto mb-4" style="max-width: 280px;">
                                <li class="mb-3 d-flex align-items-center">
                                    <i class="bi bi-check-circle-fill text-success me-2"></i> 
                                    <span><strong>{{ $plan->product_limit }}</strong> Products</span>
                                </li>
                                <li class="mb-3 d-flex align-items-center">
                                    <i class="bi bi-check-circle-fill text-success me-2"></i> 
                                    <span><strong>{{ $plan->inquiry_limit }}</strong> Inquiries</span>
                                </li>
                                
                                @if($plan->features && is_array($plan->features))
                                    @foreach($plan->features as $feature)
                                        <li class="mb-3 d-flex align-items-center">
                                            <i class="bi bi-check-circle-fill text-success me-2"></i> 
                                            <span>{{ trim($feature) }}</span>
                                        </li>
                                    @endforeach
                                @elseif($plan->features && is_string($plan->features))
                                     @foreach(explode(',', $plan->features) as $feature)
                                        <li class="mb-3 d-flex align-items-center">
                                            <i class="bi bi-check-circle-fill text-success me-2"></i> 
                                            <span>{{ trim($feature) }}</span>
                                        </li>
                                    @endforeach
                                @endif
                            </ul>
                        </div>
                        <div class="card-footer bg-white border-top-0 pb-4 text-center px-4">
                            @if($currentSubscription && $currentSubscription->plan_id == $plan->id)
                                <button class="btn btn-outline-primary w-100 fw-bold disabled">Active</button>
                            @else
                                <a href="{{ route('seller.subscription.checkout', $plan->id) }}" class="btn btn-primary-gradient w-100 fw-bold shadow-sm">Upgrade Now</a>
                            @endif
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    </div>
</div>

<style>
    .hover-shadow:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }
    .transition-all { transition: all 0.3s ease; }
    .ring-2 { box-shadow: 0 0 0 2px var(--bs-primary); }
</style>
@endsection