@extends('layouts.main')

@section('style')
<style>
    .success-section {
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        background-color: #f8fafc;
    }

    .success-card {
        background: #ffffff;
        border-radius: 1.25rem;
        padding: 2.5rem 2rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
        text-align: center;
        max-width: 520px;
        width: 100%;
        animation: fadeInUp 0.5s ease;
    }

    .success-icon {
        font-size: 64px;
        color: #fff;
        background: linear-gradient(135deg, #22c55e, #16a34a);
        padding: 28px;
        border-radius: 50%;
        box-shadow: 0 8px 16px rgba(34, 197, 94, 0.3);
        margin-bottom: 1.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .success-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: #10b981;
        margin-bottom: 0.5rem;
    }

    .success-message {
        font-size: 1rem;
        color: #4b5563;
        margin-bottom: 1.75rem;
        line-height: 1.6;
    }

    .order-summary {
        background: #f9fafb;
        border: 1px dashed #d1d5db;
        padding: 1.25rem;
        border-radius: 0.75rem;
        margin-bottom: 1.75rem;
        text-align: left;
    }

    .order-summary p {
        margin: 0.5rem 0;
        font-weight: 600;
        color: #374151;
    }



    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endsection

@section('content')
<div class="success-section">
    <div class="success-card">

        {{-- Font Awesome Gift Icon --}}
        <div class="success-icon">
            <i class="fas fa-gift"></i>
        </div>

        <h2 class="success-title">Order Successful!</h2>

        <p class="success-message">
            Thank you for your purchase!<br>
            Your gift card is being processed and will be delivered shortly.
        </p>

        <div class="order-summary">
            <p>Payment ID: <strong>#{{ $pay_id ?? '123456' }}</strong></p>
        </div>

        <a class="btn btn-primary" href="{{route('woohoo.home')}}">Continue Shopping</a>

    </div>
</div>
@endsection