@extends('layouts.app')

@section('title', 'Subscription & Billing')

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .page-header h1 { font-size: 1.5rem; font-weight: 700; }

    /* Alert boxes */
    .alert {
        border-radius: var(--radius-md);
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .alert-success {
        background: var(--success-light);
        color: var(--success);
        border: 1px solid var(--success);
    }

    .alert-error {
        background: rgba(220,53,69,0.1);
        color: var(--danger);
        border: 1px solid var(--danger);
    }

    .alert-warning {
        background: var(--warning-light);
        color: #856404;
        border: 1px solid var(--warning);
    }

    /* Current Plan Banner */
    .current-plan-banner {
        background: var(--bg-card);
        border: 2px solid var(--accent);
        border-radius: var(--radius-lg);
        padding: 1.5rem 2rem;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .current-plan-info h3 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .current-plan-info p {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .plan-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.25rem 0.75rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    .plan-badge.free { background: var(--border); color: var(--text-secondary); }
    .plan-badge.starter { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; }
    .plan-badge.growth { background: var(--accent-light); color: var(--accent); }
    .plan-badge.pro { background: rgba(16, 191, 255, 0.15); color: #10BFFF; }
    .plan-badge.enterprise { background: var(--warning-light); color: var(--warning); }

    .current-plan-meta {
        text-align: right;
    }

    .current-plan-meta .expiry {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .current-plan-meta .expiry strong {
        color: var(--text-primary);
    }

    /* Usage Section */
    .usage-section {
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .usage-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .usage-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
    }

    .usage-label {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .usage-bar {
        width: 100%;
        height: 8px;
        background: var(--border);
        border-radius: 999px;
        overflow: hidden;
        margin-bottom: 0.5rem;
    }

    .usage-bar-fill {
        height: 100%;
        border-radius: 999px;
        transition: width 0.6s ease;
    }

    .usage-bar-fill.green { background: var(--success); }
    .usage-bar-fill.yellow { background: var(--warning); }
    .usage-bar-fill.red { background: var(--danger); }

    .usage-count {
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .usage-count strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    /* Billing Toggle */
    .billing-toggle-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .billing-toggle-label {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
    }

    .billing-toggle-label.active { color: var(--text-primary); font-weight: 600; }

    .billing-toggle {
        position: relative;
        width: 52px;
        height: 28px;
        background: var(--border);
        border-radius: 999px;
        cursor: pointer;
        transition: background 0.3s;
    }

    .billing-toggle.yearly { background: var(--accent); }

    .billing-toggle-knob {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.3s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    .billing-toggle.yearly .billing-toggle-knob {
        transform: translateX(24px);
    }

    .save-badge {
        background: var(--success-light);
        color: var(--success);
        font-size: 0.7rem;
        font-weight: 600;
        padding: 0.2rem 0.5rem;
        border-radius: 999px;
    }

    /* Plans Grid */
    .plans-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .plan-card {
        background: var(--bg-card);
        border: 2px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 2rem 1.5rem;
        position: relative;
        transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }

    .plan-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
    }

    .plan-card.current { border-color: var(--accent); }
    .plan-card.recommended { border-color: var(--success); }

    .plan-card-badge {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.25rem 1rem;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .plan-card-badge.current-badge { background: var(--accent); color: #fff; }
    .plan-card-badge.recommended-badge { background: var(--success); color: #fff; }

    .plan-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }

    .plan-description {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        line-height: 1.5;
    }

    .plan-price { margin-bottom: 1.5rem; }

    .plan-price .amount { font-size: 2rem; font-weight: 800; line-height: 1; }
    .plan-price .currency { font-size: 1rem; font-weight: 600; vertical-align: super; }
    .plan-price .period { font-size: 0.8rem; color: var(--text-muted); }

    .plan-price .yearly-note {
        display: block;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    .plan-features {
        list-style: none;
        padding: 0;
        margin: 0 0 1.5rem;
    }

    .plan-features li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.82rem;
        color: var(--text-secondary);
        padding: 0.375rem 0;
    }

    .plan-features li i {
        color: var(--success);
        font-size: 0.75rem;
        margin-top: 0.15rem;
        flex-shrink: 0;
    }

    .plan-features li.disabled {
        color: var(--text-muted);
        text-decoration: line-through;
        opacity: 0.6;
    }

    .plan-features li.disabled i { color: var(--text-muted); }

    /* Gateway Selector */
    .gateway-selector {
        display: flex;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .gateway-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border: 2px solid var(--border);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--transition);
        font-size: 0.8rem;
        font-weight: 500;
    }

    .gateway-option:hover { border-color: var(--accent); }

    .gateway-option.selected {
        border-color: var(--accent);
        background: var(--accent-light);
    }

    .gateway-option input[type="radio"] { display: none; }

    /* Plan buttons */
    .plan-btn {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid var(--accent);
        border-radius: var(--radius-md);
        font-size: 0.85rem;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        transition: all var(--transition);
        font-family: inherit;
        text-decoration: none;
    }

    .plan-btn.primary { background: var(--accent); color: #fff; }
    .plan-btn.primary:hover { opacity: 0.9; transform: translateY(-1px); }
    .plan-btn.outline { background: transparent; color: var(--accent); }
    .plan-btn.outline:hover { background: var(--accent); color: #fff; }

    .plan-btn.current-btn {
        background: var(--border);
        border-color: var(--border);
        color: var(--text-muted);
        cursor: default;
    }

    .plan-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .no-gateway-warning {
        background: var(--warning-light);
        color: #856404;
        border: 1px solid var(--warning);
        border-radius: var(--radius-md);
        padding: 1rem;
        margin-bottom: 2rem;
        font-size: 0.85rem;
        text-align: center;
    }

    /* Cancel section */
    .cancel-section {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .cancel-section h3 {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .cancel-section p {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .cancel-btn {
        padding: 0.6rem 1.25rem;
        border: 1px solid var(--danger);
        background: transparent;
        color: var(--danger);
        border-radius: var(--radius-md);
        font-size: 0.82rem;
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition);
        font-family: inherit;
    }

    .cancel-btn:hover { background: var(--danger); color: #fff; }

    /* Payment History */
    .history-section {
        margin-bottom: 2rem;
    }

    .history-table {
        width: 100%;
        border-collapse: collapse;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .history-table th {
        background: var(--bg-secondary);
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    .history-table td {
        padding: 0.75rem 1rem;
        font-size: 0.82rem;
        border-bottom: 1px solid var(--border);
    }

    .history-table tr:last-child td { border-bottom: none; }

    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.2rem 0.6rem;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .status-pill.completed { background: var(--success-light); color: var(--success); }
    .status-pill.pending { background: var(--warning-light); color: #856404; }
    .status-pill.failed { background: rgba(220,53,69,0.1); color: var(--danger); }

    .empty-history {
        text-align: center;
        padding: 2rem;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .empty-history i {
        font-size: 2rem;
        opacity: 0.3;
        display: block;
        margin-bottom: 0.5rem;
    }

    /* Responsive */
    @media (max-width: 900px) {
        .usage-grid { grid-template-columns: repeat(2, 1fr); }
        .plans-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 600px) {
        .usage-grid { grid-template-columns: 1fr; }
        .current-plan-banner { flex-direction: column; text-align: center; }
        .current-plan-meta { text-align: center; }
        .cancel-section { flex-direction: column; text-align: center; }
        .history-table { font-size: 0.75rem; }
        .history-table th, .history-table td { padding: 0.5rem 0.75rem; }
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <h1><i class="fas fa-credit-card" style="color: var(--accent); margin-right: 0.5rem;"></i> Subscription & Billing</h1>
</div>

{{-- Flash Messages --}}
@if(session('success'))
    <div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
@endif

@if(session('error'))
    <div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> {{ session('error') }}</div>
@endif

{{-- No Gateway Warning --}}
@if(count($gateways) === 0)
    <div class="no-gateway-warning">
        <i class="fas fa-exclamation-triangle"></i>
        No payment gateway is currently enabled. Please contact the administrator to set up Paystack or Flutterwave before you can subscribe to a paid plan.
    </div>
@endif

{{-- Current Plan Banner --}}
<div class="current-plan-banner">
    <div class="current-plan-info">
        <h3>
            <span class="plan-badge {{ $tenant->plan ?? 'free' }}">
                <i class="fas fa-{{ ($tenant->plan ?? 'free') === 'free' ? 'gift' : (($tenant->plan ?? 'free') === 'starter' ? 'seedling' : (($tenant->plan ?? 'free') === 'growth' ? 'rocket' : (($tenant->plan ?? 'free') === 'pro' ? 'crown' : 'building'))) }}"></i>
                {{ $currentPlan->name ?? 'Free Plan' }}
            </span>
        </h3>
        <p>
            @if(($tenant->plan ?? 'free') === 'free')
                You're on the free plan. Upgrade to unlock more features and higher limits.
            @else
                @php $cancelled = $tenant->settings['subscription_cancelled'] ?? false; @endphp
                @if($cancelled)
                    Your subscription is cancelled and will revert to Free at the end of the billing period.
                @else
                    Your subscription is active. Thank you for being a subscriber!
                @endif
            @endif
        </p>
    </div>
    <div class="current-plan-meta">
        @if($tenant->subscription_ends_at)
            <div class="expiry">
                @if($tenant->settings['subscription_cancelled'] ?? false)
                    Expires: <strong>{{ $tenant->subscription_ends_at->format('M d, Y') }}</strong>
                @else
                    Renews: <strong>{{ $tenant->subscription_ends_at->format('M d, Y') }}</strong>
                @endif
            </div>
        @elseif(($tenant->plan ?? 'free') !== 'free')
            <div class="expiry">Lifetime access</div>
        @endif
    </div>
</div>

{{-- Usage Stats --}}
<div class="usage-section">
    <h2 class="section-title"><i class="fas fa-chart-bar" style="color: var(--accent);"></i> Current Usage</h2>
    <div class="usage-grid">
        @php
            $usageItems = [
                ['label' => 'Products', 'icon' => 'fa-boxes-stacked', 'used' => $usage['products'], 'limit' => $usage['products_limit']],
                ['label' => 'Staff Members', 'icon' => 'fa-user-group', 'used' => $usage['staff'], 'limit' => $usage['staff_limit']],
                ['label' => 'Order Forms', 'icon' => 'fa-file-lines', 'used' => $usage['forms'], 'limit' => $usage['forms_limit']],
                ['label' => 'Orders (this month)', 'icon' => 'fa-receipt', 'used' => $usage['orders_this_month'], 'limit' => $usage['orders_limit']],
            ];
        @endphp

        @foreach($usageItems as $item)
            @php
                $isUnlimited = $item['limit'] == -1;
                $pct = $isUnlimited ? 0 : ($item['limit'] > 0 ? min(100, round($item['used'] / $item['limit'] * 100)) : 0);
                $barColor = $pct >= 90 ? 'red' : ($pct >= 70 ? 'yellow' : 'green');
            @endphp
            <div class="usage-card">
                <div class="usage-label"><i class="fas {{ $item['icon'] }}"></i> {{ $item['label'] }}</div>
                <div class="usage-bar">
                    <div class="usage-bar-fill {{ $barColor }}" style="width: {{ $isUnlimited ? 10 : $pct }}%"></div>
                </div>
                <div class="usage-count">
                    <strong>{{ number_format($item['used']) }}</strong> / {{ $isUnlimited ? 'Unlimited' : number_format($item['limit']) }}
                </div>
            </div>
        @endforeach
    </div>
</div>

{{-- Billing Cycle Toggle --}}
<div class="billing-toggle-wrapper">
    <span class="billing-toggle-label monthly active" onclick="setBilling('monthly')">Monthly</span>
    <div class="billing-toggle" id="billingToggle" onclick="toggleBilling()">
        <div class="billing-toggle-knob"></div>
    </div>
    <span class="billing-toggle-label yearly" onclick="setBilling('yearly')">
        Yearly <span class="save-badge">Save 20%</span>
    </span>
</div>

{{-- Plans Grid --}}
<div class="plans-grid">
    @foreach($plans as $plan)
        @php
            $planKey = str_replace('inventory-', '', $plan->slug);
            $isCurrent = $planKey === ($tenant->plan ?? 'free');
            $isRecommended = $planKey === 'growth' && ($tenant->plan ?? 'free') === 'free';
            $limits = $plan->limits ?? [];
            $features = $plan->features ?? [];
            $monthlyPrice = $plan->price_monthly ?? 0;
            $yearlyPrice = $plan->price_yearly > 0 ? $plan->price_yearly : round($monthlyPrice * 12 * 0.8);
            $isFree = $monthlyPrice == 0;
        @endphp
        <div class="plan-card {{ $isCurrent ? 'current' : '' }} {{ $isRecommended ? 'recommended' : '' }}">
            @if($isCurrent)
                <div class="plan-card-badge current-badge">Current Plan</div>
            @elseif($isRecommended)
                <div class="plan-card-badge recommended-badge">Recommended</div>
            @endif

            <div class="plan-name">{{ $plan->name }}</div>
            <div class="plan-description">{{ $plan->description ?? 'Perfect for getting started.' }}</div>

            <div class="plan-price">
                @if($isFree)
                    <span class="amount">Free</span>
                @else
                    <span class="price-monthly">
                        <span class="currency">{{ $currency }}</span><span class="amount">{{ number_format($monthlyPrice) }}</span><span class="period">/month</span>
                    </span>
                    <span class="price-yearly" style="display:none;">
                        <span class="currency">{{ $currency }}</span><span class="amount">{{ number_format($yearlyPrice) }}</span><span class="period">/year</span>
                        <span class="yearly-note">{{ $currency }}{{ number_format(round($yearlyPrice / 12)) }}/month billed yearly</span>
                    </span>
                @endif
            </div>

            <ul class="plan-features">
                <li><i class="fas fa-check"></i> {{ ($limits['max_products'] ?? 50) == -1 ? 'Unlimited' : number_format($limits['max_products'] ?? 50) }} Products</li>
                <li><i class="fas fa-check"></i> {{ ($limits['max_staff'] ?? 2) == -1 ? 'Unlimited' : number_format($limits['max_staff'] ?? 2) }} Staff Members</li>
                <li><i class="fas fa-check"></i> {{ ($limits['max_forms'] ?? 3) == -1 ? 'Unlimited' : number_format($limits['max_forms'] ?? 3) }} Order Forms</li>
                <li><i class="fas fa-check"></i> {{ ($limits['max_orders_per_month'] ?? 100) == -1 ? 'Unlimited' : number_format($limits['max_orders_per_month'] ?? 100) }} Orders/month</li>

                @if($limits['analytics_dashboard'] ?? false)
                    <li><i class="fas fa-check"></i> Advanced Analytics</li>
                @else
                    <li class="disabled"><i class="fas fa-times"></i> Advanced Analytics</li>
                @endif

                @if($limits['wordpress_plugin'] ?? false)
                    <li><i class="fas fa-check"></i> WordPress Plugin</li>
                @else
                    <li class="disabled"><i class="fas fa-times"></i> WordPress Plugin</li>
                @endif

                @if(in_array('priority_support', $features))
                    <li><i class="fas fa-check"></i> Priority Support</li>
                @endif

                @if(in_array('custom_domain', $features))
                    <li><i class="fas fa-check"></i> Custom Domain</li>
                @endif

                @if(in_array('api_access', $features))
                    <li><i class="fas fa-check"></i> API Access</li>
                @endif
            </ul>

            @if($isCurrent)
                <span class="plan-btn current-btn"><i class="fas fa-check-circle"></i> Current Plan</span>
            @elseif($isFree)
                <form method="POST" action="{{ route('inventory.subscription.subscribe') }}" data-confirm="Switching to the Free plan may reduce your limits and disable premium features." data-confirm-title="Downgrade to Free?" data-confirm-type="warning" data-confirm-button="Downgrade">
                    @csrf
                    <input type="hidden" name="plan_slug" value="{{ $plan->slug }}">
                    <input type="hidden" name="billing_cycle" value="monthly">
                    <button type="submit" class="plan-btn outline">
                        Downgrade to Free
                    </button>
                </form>
            @else
                <form method="POST" action="{{ route('inventory.subscription.subscribe') }}" class="subscribe-form">
                    @csrf
                    <input type="hidden" name="plan_slug" value="{{ $plan->slug }}">
                    <input type="hidden" name="billing_cycle" value="monthly" class="billing-cycle-input">
                    <input type="hidden" name="gateway" value="{{ $gateways[0]['id'] ?? '' }}" class="gateway-input">

                    @if(count($gateways) > 1)
                        <div class="gateway-selector">
                            @foreach($gateways as $i => $gw)
                                <label class="gateway-option {{ $i === 0 ? 'selected' : '' }}" onclick="selectGateway(this, '{{ $gw['id'] }}')">
                                    <input type="radio" name="gateway_radio_{{ $plan->slug }}" value="{{ $gw['id'] }}" {{ $i === 0 ? 'checked' : '' }}>
                                    <i class="fas {{ $gw['icon'] }}"></i> {{ $gw['name'] }}
                                </label>
                            @endforeach
                        </div>
                    @endif

                    <button type="submit" class="plan-btn primary" {{ count($gateways) === 0 ? 'disabled' : '' }}>
                        <i class="fas fa-lock"></i>
                        @if(($tenant->plan ?? 'free') === 'free')
                            Upgrade to {{ $plan->name }}
                        @else
                            Switch to {{ $plan->name }}
                        @endif
                    </button>
                </form>
            @endif
        </div>
    @endforeach
</div>

{{-- Cancel Subscription --}}
@if(($tenant->plan ?? 'free') !== 'free' && !($tenant->settings['subscription_cancelled'] ?? false))
    <div class="cancel-section">
        <div>
            <h3>Cancel Subscription</h3>
            <p>Your plan will remain active until the end of your current billing period. After that, you'll be moved to the Free plan.</p>
        </div>
        <form method="POST" action="{{ route('inventory.subscription.cancel') }}" data-confirm="Your plan will remain active until the end of your billing period. After that, you'll be moved to the Free plan." data-confirm-title="Cancel Subscription?" data-confirm-type="danger" data-confirm-button="Yes, Cancel">
            @csrf
            <button type="submit" class="cancel-btn">
                <i class="fas fa-times-circle"></i> Cancel Subscription
            </button>
        </form>
    </div>
@elseif($tenant->settings['subscription_cancelled'] ?? false)
    <div class="cancel-section" style="border-color: var(--warning);">
        <div>
            <h3>Subscription Cancelled</h3>
            <p>Your {{ $currentPlan->name ?? 'current' }} plan will remain active until <strong>{{ $tenant->subscription_ends_at?->format('M d, Y') ?? 'end of period' }}</strong>. You can resubscribe anytime by selecting a plan above.</p>
        </div>
    </div>
@endif

{{-- Billing History --}}
<div class="history-section">
    <h2 class="section-title"><i class="fas fa-receipt" style="color: var(--accent);"></i> Billing History</h2>

    @if($payments->count() > 0)
        <div style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
            <table class="history-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Reference</th>
                        <th>Plan</th>
                        <th>Cycle</th>
                        <th>Amount</th>
                        <th>Gateway</th>
                        <th>Status</th>
                        <th>Invoice</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($payments as $payment)
                        @php $isComp = ($payment->gateway ?? '') === 'admin_override'; @endphp
                        <tr>
                            <td>{{ $payment->created_at->format('M d, Y H:i') }}</td>
                            <td style="font-family: monospace; font-size: 0.75rem;">{{ $payment->reference }}</td>
                            <td>{{ $payment->metadata['plan_name'] ?? $payment->plan?->name ?? '-' }}</td>
                            <td>{{ ucfirst($payment->billing_cycle) }}</td>
                            <td style="font-weight: 600;">
                                @if($isComp)
                                    <span style="color:#059669;">Complimentary</span>
                                @else
                                    {{ $currency }}{{ number_format($payment->amount, 2) }}
                                @endif
                            </td>
                            <td>{{ $isComp ? 'Admin' : ucfirst($payment->gateway) }}</td>
                            <td>
                                <span class="status-pill {{ $payment->status }}">
                                    @if($payment->status === 'completed')
                                        <i class="fas fa-check-circle"></i>
                                    @elseif($payment->status === 'pending')
                                        <i class="fas fa-clock"></i>
                                    @else
                                        <i class="fas fa-times-circle"></i>
                                    @endif
                                    {{ ucfirst($payment->status) }}
                                </span>
                            </td>
                            <td>
                                @if($payment->status === 'completed')
                                    <a href="{{ route('inventory.subscription.invoice', $payment->id) }}"
                                       style="display:inline-flex;align-items:center;gap:0.35rem;padding:0.35rem 0.7rem;border:1px solid var(--border);border-radius:6px;color:var(--text-primary);text-decoration:none;font-size:0.78rem;font-weight:600;">
                                        <i class="fas fa-file-pdf" style="color:#DC2626;"></i> Download
                                    </a>
                                @else
                                    <span style="color:var(--text-muted);font-size:0.75rem;">—</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <div class="empty-history">
            <i class="fas fa-file-invoice"></i>
            <p>No billing history yet. Subscribe to a plan to see your invoices here.</p>
        </div>
    @endif
</div>

@endsection

@push('scripts')
<script>
    let billingCycle = 'monthly';

    function toggleBilling() {
        billingCycle = billingCycle === 'monthly' ? 'yearly' : 'monthly';
        updateBillingUI();
    }

    function setBilling(cycle) {
        billingCycle = cycle;
        updateBillingUI();
    }

    function updateBillingUI() {
        const toggle = document.getElementById('billingToggle');
        const monthlyLabel = document.querySelector('.billing-toggle-label.monthly');
        const yearlyLabel = document.querySelector('.billing-toggle-label.yearly');

        if (billingCycle === 'yearly') {
            toggle.classList.add('yearly');
            monthlyLabel.classList.remove('active');
            yearlyLabel.classList.add('active');
        } else {
            toggle.classList.remove('yearly');
            monthlyLabel.classList.add('active');
            yearlyLabel.classList.remove('active');
        }

        // Toggle price display
        document.querySelectorAll('.price-monthly').forEach(el => el.style.display = billingCycle === 'monthly' ? '' : 'none');
        document.querySelectorAll('.price-yearly').forEach(el => el.style.display = billingCycle === 'yearly' ? '' : 'none');

        // Update hidden form fields
        document.querySelectorAll('.billing-cycle-input').forEach(input => input.value = billingCycle);
    }

    function selectGateway(label, gatewayId) {
        // Find the parent form
        const form = label.closest('form');
        if (!form) return;

        // Update visual selection
        form.querySelectorAll('.gateway-option').forEach(opt => opt.classList.remove('selected'));
        label.classList.add('selected');

        // Update hidden input
        const gatewayInput = form.querySelector('.gateway-input');
        if (gatewayInput) gatewayInput.value = gatewayId;
    }
</script>
@endpush