@extends('layouts.app')

@section('content')
    <article class="about active" data-page="products">
        <header>
            <h2 class="h2 article-title">Products & Plans</h2>
            <p class="article-subtitle">Choose a plan that works best for your business</p>
        </header>

        <section class="about-text">
            @forelse($products as $product)
                <div class="card mb-4">
                    <div class="card-body">
                        <h3 class="card-title">{{ $product->name }}</h3>
                        <p class="card-text">{{ $product->description }}</p>

                        @if($product->plans()->exists())
                            <div class="pricing-options mt-4">
                                @foreach($product->plans as $plan)
                                    <div class="pricing-card p-3 mb-2 border rounded">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <h5 class="mb-1">{{ $plan->name }}</h5>
                                                @if($plan->description)
                                                    <p class="text-muted small mb-2">{{ $plan->description }}</p>
                                                @endif
                                                <div class="price-display">
                                                    <span class="h4 text-primary">${{ number_format($plan->price_usd, 2) }}</span>
                                                    @if($plan->billing_period !== 'one_time')
                                                        <span class="text-muted">/ {{ $plan->billing_period }}</span>
                                                    @else
                                                        <span class="text-muted">one-time</span>
                                                    @endif
                                                </div>
                                                @php
                                                    $features = config('license.tiers.' . $plan->tier, []);
                                                @endphp
                                                @if($features)
                                                    <ul class="mt-2 small mb-0">
                                                        @foreach($features as $key => $value)
                                                            @if(is_string($value) && strpos($value, 'label') === false)
                                                                <li>{{ $value }}</li>
                                                            @elseif(is_numeric($value) && $key === 'max_trucks')
                                                                <li>{{ $value }} trucks</li>
                                                            @elseif(is_bool($value) && $value)
                                                                <li>{{ ucwords(str_replace('_', ' ', $key)) }}</li>
                                                            @endif
                                                        @endforeach
                                                    </ul>
                                                @endif
                                            </div>
                                            @auth('customer')
                                                <a href="{{ route('checkout.show', ['product' => $product->slug]) }}" class="btn btn-primary btn-sm ms-2">Get Started</a>
                                            @else
                                                <a href="{{ route('customer.register') }}?product={{ $product->slug }}" class="btn btn-primary btn-sm ms-2">Get Started</a>
                                            @endauth
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-muted">No pricing plans available yet.</p>
                        @endif
                    </div>
                </div>
            @empty
                <div class="alert alert-info">
                    <p>No products available at this time. Please check back soon.</p>
                </div>
            @endforelse
        </section>
    </article>
@endsection