@extends('user.layout.app')
@section('title', 'Plans & Pricing')
<style>
    .card {
    transition: transform 0.3s ease-in-out;
}
.card:hover {
    transform: translateY(-5px);
}
.card-header {
    font-size: 1.2rem;
    font-weight: bold;
}

</style>
@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 p-5">
                                <div class="card shadow-sm border-0 rounded-3 h-100">
                                    <div class="card-header text-center bg-primary text-white">
                                        <h5 class="mb-0">{{ $plan->title }}</h5>
                                    </div>
                                    <div class="card-body text-center">
                                        @if (!empty($plan->description))
                                            <p class="text-muted">{{ $plan->description }}</p>
                                        @endif

                                        @if (!is_null($monthly))
                                            <p class="h4 text-primary mb-1">${{ number_format((float) $monthly, 2) }}</p>
                                            <p class="small text-muted">per month</p>
                                        @endif
                                        @if (!is_null($yearly))
                                            <p class="h5 text-success mb-1">${{ number_format((float) $yearly, 2) }}</p>
                                            <p class="small text-muted">
                                                per year
                                                @if ($monthly && $monthly > 0)
                                                    <span class="text-success">
                                                        (Save
                                                        {{ round((($monthly * 12 - $yearly) / ($monthly * 12)) * 100) }}%)
                                                    </span>
                                                @endif
                                            </p>
                                        @endif

                                        @if (!empty($features))
                                            <ul class="list-unstyled mt-3 text-start">
                                                @foreach ($features as $feature)
                                                    <li class="mb-2">
                                                        <i class="fas fa-check text-success me-2"></i> {{ $feature }}
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </div>
                                    <div class="card-footer text-center bg-light">
                                        <div class="row g-2">
                                            @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-outline-primary w-100">
                                                            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">
                                                            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