@extends('layouts.app')

@section('title', $label . ' · ' . $planName)

@section('content')
<div class="container-fluid py-4">
    <div class="up-card mx-auto text-center">
        <span class="up-badge"><i class="bi bi-stars me-1"></i>{{ $planName }} feature</span>
        <h3 class="fw-bold mt-3 mb-2">{{ $label }}</h3>
        <p class="text-muted mb-4">{{ $description }}</p>

        @if($waiting)
            <div class="alert alert-warning text-start small mb-4">
                <i class="bi bi-eye-slash me-1"></i> {{ $waiting }}
            </div>
        @endif

        <div class="up-price mb-4">
            <div><span class="fs-2 fw-bold">{{ formatCurrency($price) }}</span> <span class="text-muted">/ month</span></div>
            <div class="small text-muted">{{ $planName }} plan · you pay {{ formatCurrency($current) }} now on {{ tenant()->planName() }}, {{ formatCurrency(max(0, $price - $current)) }} more a month</div>
        </div>

        <div class="d-flex flex-wrap gap-2 justify-content-center">
            <a href="{{ route('billing.index', ['tab' => 'pay', 'plan' => $plan]) }}" class="btn btn-primary px-4">Upgrade to {{ $planName }}</a>
            <a href="{{ route('billing.index', ['tab' => 'plans']) }}" class="btn btn-outline-secondary">Compare plans</a>
        </div>
    </div>
</div>

<style>
    .up-card { max-width: 560px; background: #fff; border-radius: 18px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); padding: 2.5rem 2rem; }
    .up-badge { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-weight: 700; font-size: .8rem; }
    .up-price { padding: 1rem; border-radius: 12px; background: #f8fafc; }
</style>
@endsection