@extends('frontend::layouts.master')

@section('title')
    <title>Payment Successful - {{ config('app.name') }}</title>
    <meta name="description" content="Your payment has been processed successfully">
@endsection

@section('content')
<!-- Breadcrumb Area Start -->
<section class="breadcrumb-area">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-content">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('checkout') }}">Checkout</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Success</li>
                        </ol>
                    </nav>
                    <h2 class="breadcrumb-title">Payment Successful</h2>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Breadcrumb Area End -->

<!-- Success Area Start -->
<section class="success-area py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="success-card text-center">
                    <!-- Success Icon -->
                    <div class="success-icon mb-4">
                        <div class="icon-circle">
                            <i class="fas fa-check"></i>
                        </div>
                    </div>
                    
                    <!-- Success Message -->
                    <div class="success-content">
                        <h2 class="success-title mb-3">Thank You for Your Order!</h2>
                        <p class="success-message mb-4">
                            Your payment has been processed successfully. You will receive a confirmation email shortly with your order details.
                        </p>
                        
                        @if($order)
                            <div class="order-info mb-4">
                                <h5>Order Number: <span class="order-number">{{ $order->order_number }}</span></h5>
                                <div class="order-details">
                                    <p><strong>Total Amount:</strong> ${{ number_format($order->total_amount, 2) }}</p>
                                    <p><strong>Items:</strong> {{ $order->orderItems->count() }} item(s)</p>
                                    <p><strong>Order Date:</strong> {{ $order->created_at->format('M j, Y \a\t g:i A') }}</p>
                                </div>
                            </div>
                        @elseif(request('order'))
                            <div class="order-info mb-4">
                                <h5>Order Number: <span class="order-number">{{ request('order') }}</span></h5>
                            </div>
                        @endif
                        
                        <!-- Next Steps -->
                        <div class="next-steps mb-5">
                            <h4 class="mb-3">What's Next?</h4>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <div class="step-item">
                                        <div class="step-icon">
                                            <i class="fas fa-envelope"></i>
                                        </div>
                                        <h6>Email Confirmation</h6>
                                        <p>You'll receive an email confirmation with your order details.</p>
                                    </div>
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <div class="step-item">
                                        <div class="step-icon">
                                            <i class="fas fa-download"></i>
                                        </div>
                                        <h6>Download Access</h6>
                                        <p>Download links will be provided in your confirmation email.</p>
                                    </div>
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <div class="step-item">
                                        <div class="step-icon">
                                            <i class="fas fa-headphones"></i>
                                        </div>
                                        <h6>Support</h6>
                                        <p>Our support team is available to help with any questions.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="action-buttons">
                            <a href="{{ route('home') }}" class="btn btn-primary btn-lg me-3">
                                <i class="fas fa-home me-2"></i>
                                Continue Shopping
                            </a>
                            <a href="{{ route('contact') }}" class="btn btn-outline-primary btn-lg">
                                <i class="fas fa-phone me-2"></i>
                                Contact Support
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Success Area End -->
@endsection

@push('style')
<style>
.success-area {
    background-color: #f8f9fa;
    min-height: 60vh;
}

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

.success-icon .icon-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #28a745, #20c997);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.success-icon i {
    font-size: 3rem;
    color: white;
}

.success-title {
    color: #333;
    font-weight: 700;
    font-size: 2.5rem;
}

.success-message {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
}

.order-number {
    font-family: 'Courier New', monospace;
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: bold;
    color: var(--tg-primary-color);
}

.next-steps {
    background: #f8f9ff;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e6f3ff;
}

.next-steps h4 {
    color: #333;
    font-weight: 600;
}

.step-item {
    text-align: center;
    padding: 1rem;
}

.step-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tg-primary-color), var(--tg-secondary-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.step-icon i {
    font-size: 1.5rem;
    color: white;
}

.step-item h6 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.step-item p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.breadcrumb-area {
    background: linear-gradient(135deg, #28a745, #20c997);
    padding: 2rem 0;
}

.breadcrumb-content {
    text-align: center;
    color: white;
}

.breadcrumb {
    justify-content: center;
    background: none;
    margin-bottom: 1rem;
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: white;
}

.breadcrumb-title {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .success-card {
        padding: 2rem 1rem;
    }
    
    .success-title {
        font-size: 2rem;
    }
    
    .success-icon .icon-circle {
        width: 100px;
        height: 100px;
    }
    
    .success-icon i {
        font-size: 2.5rem;
    }
    
    .action-buttons .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }
    
    .next-steps {
        padding: 1.5rem;
    }
}
</style>
@endpush

@push('script')
<script>
$(document).ready(function() {
    // Animate success icon on page load
    setTimeout(function() {
        $('.success-icon .icon-circle').addClass('animate__animated animate__bounceIn');
    }, 300);
    
    // Show success message with toastr
    @if(session('success'))
        toastr.success("{{ session('success') }}");
    @endif
});
</script>
@endpush