@extends('frontend.layouts.app')

@section('title', 'Checkout - MyFamily Moments')
@push('style')
    <style>
        .checkout-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .checkout-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .order-summary {
            background: var(--gray-50);
            border-radius: 12px;
            padding: 1.5rem;
            position: sticky;
            top: 100px;
        }

        .plan-badge {
            background: var(--primary-color);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .discount-code {
            background: var(--success-color);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .security-badges {
            display: flex;
            gap: 1rem;
            align-items: center;
            justify-content: center;
            margin-top: 1rem;
            opacity: 0.7;
        }

        .form-floating label {
            color: var(--gray-600);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
        }

        .payment-methods {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .payment-method {
            padding: 0.75rem 1rem;
            border: 2px solid var(--gray-200);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            flex: 1;
            text-align: center;
        }

        .payment-method.active {
            border-color: var(--primary-color);
            background: rgba(99, 102, 241, 0.1);
        }

        .payment-method:hover {
            border-color: var(--primary-color);
        }

        .stripe-element {
            padding: 0.75rem;
            border: 1px solid var(--gray-300);
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .stripe-element--focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
        }

        .progress-steps {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
        }

        .step {
            display: flex;
            align-items: center;
            color: var(--gray-400);
        }

        .step.active {
            color: var(--primary-color);
        }

        .step.completed {
            color: var(--success-color);
        }

        .step-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--gray-200);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
            font-weight: 600;
        }

        .step.active .step-number {
            background: var(--primary-color);
            color: white;
        }

        .step.completed .step-number {
            background: var(--success-color);
            color: white;
        }

        .step-connector {
            width: 50px;
            height: 2px;
            background: var(--gray-200);
            margin: 0 1rem;
        }

        .step.completed+.step .step-connector {
            background: var(--success-color);
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .loading-spinner {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            text-align: center;
        }

        .trial-banner {
            background: linear-gradient(135deg, var(--success-color), #20c997);
            color: white;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            text-align: center;
        }
    </style>
@endpush
@push('head')
    <script src="https://js.stripe.com/v3/"></script>
@endpush

@section('content')
    {{-- Keep your CSS exactly as in your template (omitted here for brevity) --}}

    <div class="container pt-5 mt-4">
        <div class="progress-steps">
            <div class="step completed">
                <div class="step-number">1</div>
                <span>Plan Selection</span>
            </div>
            <div class="step-connector"></div>
            <div class="step active">
                <div class="step-number">2</div>
                <span>Payment Details</span>
            </div>
            <div class="step-connector"></div>
            <div class="step">
                <div class="step-number">3</div>
                <span>Confirmation</span>
            </div>
        </div>
    </div>

    <main class="py-4">
        <div class="container checkout-container">
            <div class="row g-4">
                <!-- Left -->
                <div class="col-lg-8">
                    {{-- Account and Billing sections left intact visually (user is already authenticated) --}}
                    <div class="checkout-card">
                        <h4 class="fw-bold mb-4"><i class="fas fa-user me-2 text-primary"></i>Account Information</h4>
                        <div class="small text-muted">Logged in as <strong>{{ auth()->user()->email }}</strong></div>
                    </div>

                    <div class="checkout-card">
                        <h4 class="fw-bold mb-4"><i class="fas fa-credit-card me-2 text-primary"></i>Billing Information
                        </h4>
                        <div class="small text-muted">Billing details can be updated in your profile after checkout.</div>
                    </div>

                    <div class="checkout-card">
                        <h4 class="fw-bold mb-4"><i class="fas fa-lock me-2 text-primary"></i>Payment Method</h4>

                        <form method="POST" action="{{ route('portal.checkout.pay', ['reference' => $reference]) }}"
                            id="gateway-form">
                            @csrf
                            <div class="payment-methods">
                                <label class="payment-method active">
                                    <input type="radio" name="gateway" value="stripe" class="d-none" checked>
                                    <i class="fas fa-credit-card mb-2"></i>
                                    <div class="small fw-semibold">Credit Card (Stripe)</div>
                                </label>
                                <label class="payment-method">
                                    <input type="radio" name="gateway" value="paypal" class="d-none">
                                    <i class="fab fa-paypal mb-2"></i>
                                    <div class="small fw-semibold">PayPal</div>
                                </label>
                                <label class="payment-method">
                                    <input type="radio" name="gateway" value="cash" class="d-none">
                                    <i class="fas fa-money-bill-wave mb-2"></i>
                                    <div class="small fw-semibold">Cash</div>
                                </label>
                            </div>

                            <div class="security-badges">
                                <i class="fas fa-shield-alt fa-2x"></i>
                                <i class="fab fa-cc-visa fa-2x"></i>
                                <i class="fab fa-cc-mastercard fa-2x"></i>
                                <i class="fab fa-cc-amex fa-2x"></i>
                                <i class="fab fa-cc-discover fa-2x"></i>
                            </div>

                            <button type="submit" class="btn btn-primary-custom w-100 btn-lg mt-4">
                                <i class="fas fa-lock me-2"></i>Continue
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Right -->
                <div class="col-lg-4">
                    <div class="order-summary">
                        <h5 class="fw-bold mb-4">Order Summary</h5>

                        <div class="trial-banner">
                            <i class="fas fa-gift me-2"></i>
                            <strong>{{ $plan->trial_days }}-Day Free Trial</strong>
                            <div class="small">No charge today. Cancel anytime.</div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <div class="fw-semibold">{{ $plan->name }} Plan</div>
                                @if ($plan->is_featured)
                                    <span class="plan-badge">Most Popular</span>
                                @endif
                                <div class="small text-muted">{{ ucfirst($billing) }} billing</div>
                                <div class="small text-muted">Ref: {{ $reference }}</div>
                            </div>
                            <div class="text-end">
                                <div class="fw-bold">
                                    {{ $plan->currencySymbol() }}{{ number_format($amount_cents / 100, 2) }}
                                </div>
                                <div class="small text-muted">/{{ $billing === 'yearly' ? 'year' : 'month' }}</div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="small text-muted mb-2">What's included:</div>
                            <ul class="list-unstyled small">
                                @foreach ($plan->features_list as $f)
                                    <li><i class="fas fa-check text-success me-2"></i>{{ $f }}</li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="border-top pt-3 mb-3">
                            <div class="d-flex justify-content-between mb-2">
                                <span>Subtotal</span>
                                <span>{{ $plan->currencySymbol() }}{{ number_format($amount_cents / 100, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Tax</span>
                                <span>—</span>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between fw-bold">
                                <span>Total Today</span>
                                <span class="text-success">{{ $plan->currencySymbol() }}0.00</span>
                            </div>
                            <div class="small text-muted mt-2">
                                After trial:
                                {{ $plan->currencySymbol() }}{{ number_format($amount_cents / 100, 2) }}/{{ $billing === 'yearly' ? 'year' : 'month' }}
                            </div>
                        </div>

                        <div class="text-center">
                            <small class="text-muted">
                                <i class="fas fa-shield-alt me-1"></i>
                                30-day money-back guarantee
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('script')
    <script>
        document.querySelectorAll('.payment-method').forEach(label => {
            label.addEventListener('click', () => {
                document.querySelectorAll('.payment-method').forEach(l => l.classList.remove('active'));
                label.classList.add('active');
                label.querySelector('input[type="radio"]').checked = true;
            });
        });
    </script>
@endpush