@extends('user.layout.app')
@section('title', 'Plans & Pricing')
@section('content')

<div class="page-content">
    <section class="section">
        <div class="section-header">
            <h1>Plans & Pricing</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="{{ route('user.dashboard') }}">Dashboard</a></div>
                <div class="breadcrumb-item">Plans</div>
            </div>
        </div>

        <div class="section-body">
           

            <!-- Pricing Header -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body text-center">
                            <h2 class="mb-3">Choose the Perfect Plan for Your Career</h2>
                            <p class="text-muted">Unlock premium features and create professional resumes that stand out</p>
                        </div>
                    </div>
                </div>
            </div>

            @if($plans->isEmpty())
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body text-center py-5">
                                <i class="fas fa-credit-card text-muted mb-3" style="font-size: 3rem;"></i>
                                <h4 class="text-muted">No plans available</h4>
                                <p class="text-muted">Please contact support for more information.</p>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="row">
                    @foreach($plans as $plan)
                        @php
                            $monthly = data_get($plan->price, 'monthly_price');
                            $yearly = data_get($plan->price, 'yearly_price');
                            $features = (array) data_get($plan->condition, 'features', []);
                        @endphp

                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="pricing pricing-highlight">
                                <div class="pricing-title">
                                    {{ $plan->title }}
                                </div>
                                <div class="pricing-padding">
                                    @if(!empty($plan->description))
                                        <div class="pricing-price">
                                            <div class="price">{{ $plan->description }}</div>
                                        </div>
                                    @endif

                                    <div class="pricing-details">
                                        @if(!is_null($monthly))
                                            <div class="pricing-item">
                                                <div class="pricing-item-icon">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="pricing-item-label">
                                                    <strong>${{ number_format((float)$monthly, 2) }}</strong> / month
                                                </div>
                                            </div>
                                        @endif
                                        @if(!is_null($yearly))
                                            <div class="pricing-item">
                                                <div class="pricing-item-icon">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="pricing-item-label">
                                                    <strong>${{ number_format((float)$yearly, 2) }}</strong> / year
                                                    @if($monthly && $monthly > 0)
                                                        <small class="text-success">(Save {{ round((($monthly * 12 - $yearly) / ($monthly * 12)) * 100) }}%)</small>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="pricing-cta">
                                    @if(!empty($features))
                                        <div class="mb-4">
                                            <h6 class="mb-3">Features:</h6>
                                            <ul class="list-unstyled">
                                                @foreach($features as $feature)
                                                    <li class="mb-2">
                                                        <i class="fas fa-check text-success me-2"></i>
                                                        {{ $feature }}
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    <div class="row">
                                        @if(!is_null($monthly))
                                            <div class="col-6">
                                                <form method="POST" action="{{ route('user.plans.subscribe', $plan) }}">
                                                    @csrf
                                                    <input type="hidden" name="interval" value="month">
                                                    <button type="submit" class="btn btn-primary w-100">
                                                        <i class="fas fa-calendar-alt me-2"></i>
                                                        Monthly
                                                    </button>
                                                </form>
                                            </div>
                                        @endif
                                        @if(!is_null($yearly))
                                            <div class="col-6">
                                                <form method="POST" action="{{ route('user.plans.subscribe', $plan) }}">
                                                    @csrf
                                                    <input type="hidden" name="interval" value="year">
                                                    <button type="submit" class="btn btn-success w-100">
                                                        <i class="fas fa-calendar me-2"></i>
                                                        Yearly
                                                    </button>
                                                </form>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Features Comparison -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4><i class="fas fa-star text-warning mr-2"></i>Why Choose Our Premium Plans?</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="text-center mb-4">
                                            <div class="bg-primary rounded-circle p-3 mx-auto mb-3" style="width: 60px; height: 60px;">
                                                <i class="fas fa-download text-white" style="font-size: 1.5rem;"></i>
                                            </div>
                                            <h5>Unlimited Downloads</h5>
                                            <p class="text-muted">Download your resumes as many times as you need in multiple formats</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center mb-4">
                                            <div class="bg-success rounded-circle p-3 mx-auto mb-3" style="width: 60px; height: 60px;">
                                                <i class="fas fa-palette text-white" style="font-size: 1.5rem;"></i>
                                            </div>
                                            <h5>Multiple Designs</h5>
                                            <p class="text-muted">Choose from 4 professional PDF designs to match your style</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center mb-4">
                                            <div class="bg-warning rounded-circle p-3 mx-auto mb-3" style="width: 60px; height: 60px;">
                                                <i class="fas fa-magic text-white" style="font-size: 1.5rem;"></i>
                                            </div>
                                            <h5>AI Assistance</h5>
                                            <p class="text-muted">Get AI-powered content suggestions to enhance your resume</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
</div>

@endsection