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

<style>
.upgrade-button form button {
    all: unset;              /* remove all default button styles */
    cursor: pointer;
    display: inline-block;
    /* padding: 10px 20px; */
    color: #fff;             /* text color */
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
}

</style>
@section('content')

<div class="subscription-section-container">

    <div class="subscription-section-header">
        <div class="subscription-section-title">Plans & Pricing</div>
    </div>

    {{-- If no plans available --}}
    @if ($plans->isEmpty())
        <div class="no-subscription-alert">
            <div class="alert-title">No Plans Available</div>
            <div class="alert-description">
                There are currently no subscription plans available. Please check back later.
            </div>
        </div>
    @else
        <div class="subscription-plans">
            @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

                {{-- Monthly Plan --}}
                @if ($monthly)
                <div class="plan-card">
                    <div class="plan-content">
                        <div class="plan-header">
                            <div class="plan-title">{{ $plan->title }} </div>
                        </div>

                        <div class="plan-price">
                            <div class="price-text">${{ number_format((float) $monthly, 2) }} /month</div>
                        </div>

                        <div class="plan-benefits">
                                        @if (!empty($plan->description))
                                <div class="benefit-item">
                                    <div class="benefit-icon"><div class="icon-check"></div></div>
                                    <div class="benefit-text">{{ $plan->description }}</div>
                                </div>
                            @else
                                <div class="benefit-item">No Description listed</div>
                            @endif
                        </div>

                        <div class="upgrade-button">
                            <form method="POST" action="{{ route('user.plans.subscribe', $plan) }}">
                                @csrf
                                <input type="hidden" name="interval" value="month">
                                <button type="submit" class="button-text">Upgrade Plan</button>
                            </form>
                        </div>
                    </div>
                </div>
                @endif

                {{-- Yearly Plan --}}
                @if ($yearly)
                <div class="plan-card">
                    <div class="plan-content">
                        <div class="plan-header">
                            <div class="plan-title">{{ $plan->title }} </div>
                            <div class="best-value-tag">
                                <div class="best-value-text">Best Value – Save
                                    {{ $monthly ? round((($monthly * 12 - $yearly) / ($monthly * 12)) * 100) : 0 }}%
                                </div>
                            </div>
                        </div>

                        <div class="plan-price">
                            <div class="price-text">${{ number_format((float) $yearly, 2) }} /year</div>
                        </div>

                       <div class="plan-benefits">
                                        @if (!empty($plan->description))
                                <div class="benefit-item">
                                    <div class="benefit-icon"><div class="icon-check"></div></div>
                                    <div class="benefit-text">{{ $plan->description }}</div>
                                </div>
                            @else
                                <div class="benefit-item">No Description listed</div>
                            @endif
                        </div>

                        <div class="upgrade-button">
                            <form method="POST" action="{{ route('user.plans.subscribe', $plan) }}">
                                @csrf
                                <input type="hidden" name="interval" value="year">
                                <button type="submit" class="button-text">Upgrade Plan</button>
                            </form>
                        </div>
                    </div>
                </div>
                @endif

            @endforeach
        </div>
    @endif
</div>

@endsection