@extends('layouts.main')

@section('title', 'Subscription Successful - Prolytics Connect')

@section('styles')
<style>
    /* Hide sidebar for subscription page */
    .vertical-menu {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
    
    /* Hide other header elements except user dropdown */
    #page-topbar .app-search,
    #page-topbar .dropdown:not(.d-inline-block:last-child),
    #page-topbar .header-item:not(.dropdown),
    #page-topbar .menu-icon-dots-btn,
    #page-topbar .subscription-display {
        display: none !important;
    }
    
    /* Keep only the user dropdown visible and style it */
    #page-topbar .dropdown.d-inline-block:last-child {
        display: inline-block !important;
    }
    
    /* Enhance user dropdown styling for subscription pages */
    #page-topbar .dropdown.d-inline-block:last-child .dropdown-toggle {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 8px 12px;
        transition: all 0.3s ease;
    }
    
    #page-topbar .dropdown.d-inline-block:last-child .dropdown-toggle:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
    }
    
    .success-container {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: calc(100vh - 70px);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .success-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        max-width: 600px;
        width: 100%;
        margin: 2rem;
    }
    
    .success-icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #28a745, #20c997);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        animation: bounceIn 0.6s ease-out;
    }
    
    @keyframes bounceIn {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.1);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
</style>
@endsection

@section('content')
<div class="success-container">
    <div class="success-card">
        <div class="card-body p-5 text-center">
            <!-- Success Icon -->
            <div class="success-icon mb-4">
                <i class="bx bx-check text-white" style="font-size: 2.5rem;"></i>
            </div>

            <!-- Success Message -->
            <h2 class="mb-3">Subscription Activated!</h2>
            <p class="text-muted mb-4 lead">
                Thank you for subscribing! Your subscription has been successfully activated and you now have full access to all features.
            </p>

            <!-- Action Buttons -->
            <div class="d-flex gap-3 justify-content-center flex-wrap">
                <button id="dashboardBtn" class="btn btn-primary btn-lg" onclick="goToDashboard()">
                    <i class="bx bx-home me-1"></i>Go to Dashboard
                </button>
                <a href="{{ route('subscription.plans') }}" class="btn btn-soft-primary btn-lg">
                    <i class="bx bx-receipt me-1"></i>View Subscription
                </a>
            </div>

            <!-- Additional Information -->
            <div class="mt-5">
                <div class="card border-0 bg-light">
                    <div class="card-body">
                        <h5 class="card-title text-dark mb-3">What happens next?</h5>
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="d-flex align-items-start">
                                    <i class="bx bx-check-circle text-success me-3 mt-1" style="font-size: 1.2rem;"></i>
                                    <div>
                                        <h6 class="mb-1">Immediate Access</h6>
                                        <p class="text-muted small mb-0">You can start using all features of your subscription plan right away.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="d-flex align-items-start">
                                    <i class="bx bx-check-circle text-success me-3 mt-1" style="font-size: 1.2rem;"></i>
                                    <div>
                                        <h6 class="mb-1">Automatic Billing</h6>
                                        <p class="text-muted small mb-0">Your subscription will automatically renew on your next billing date.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="d-flex align-items-start">
                                    <i class="bx bx-check-circle text-success me-3 mt-1" style="font-size: 1.2rem;"></i>
                                    <div>
                                        <h6 class="mb-1">Email Confirmation</h6>
                                        <p class="text-muted small mb-0">You'll receive a confirmation email with your subscription details.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="d-flex align-items-start">
                                    <i class="bx bx-check-circle text-success me-3 mt-1" style="font-size: 1.2rem;"></i>
                                    <div>
                                        <h6 class="mb-1">24/7 Support</h6>
                                        <p class="text-muted small mb-0">Our support team is here to help you get started and answer any questions.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Support -->
            <div class="mt-4 text-center">
                <p class="text-muted">
                    Need help getting started? 
                    <a href="mailto:{{ support_email() }}" class="text-primary fw-medium">
                        Contact Support
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

<script>
function goToDashboard() {
    // Show loading state
    const btn = document.getElementById('dashboardBtn');
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="bx bx-loader-alt bx-spin me-1"></i>Loading...';
    btn.disabled = true;
    
    // Wait a moment for subscription to be fully processed, then redirect
    setTimeout(() => {
        window.location.href = '{{ route("dashboard") }}';
    }, 2000);
}
</script>
@endsection