@extends('app')
@section('title','Dziękujemy | Verve')

@push('styles')
<style>
    .thank-you {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        background: radial-gradient(ellipse at top, rgba(255,255,255,.05) 0%, var(--primary-black) 100%);
    }
    .thank-card {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 24px;
        padding: 3rem 2.5rem;
        max-width: 600px;
        text-align: center;
        box-shadow: var(--glass-shadow);
        animation: fadeInUp 0.8s ease-out;
    }
    .check-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 1.5rem;
        background: conic-gradient(from 180deg at 50% 50%, #10b981 0%, #34d399 100%);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 2.5rem;
        color: #fff;
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
    }
    .order-box {
        background: rgba(16, 185, 129, 0.05);
        border-radius: 16px;
        padding: 1.5rem;
        margin-top: 1.5rem;
        text-align: left;
        border: 1px solid rgba(16, 185, 129, 0.2);
    }
    .order-box p {
        color: rgba(255, 255, 255, 0.9);
        margin: 0.5rem 0;
    }
    .order-box span {
        color: var(--text-gray);
    }
    .cta-button {
        margin-top: 30px !important;
    }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
@endpush

@section('content')
<section class="thank-you">
    <div class="thank-card">
        <!-- Animated checkmark -->
        <div class="check-icon">✓</div>

        <h1 class="text-4xl md:text-5xl font-bold font-poppins">Dziękujemy!</h1>
        <p class="text-xl text-gray-300 mt-4">
            Twoje zamówienie zostało przyjęte.
            @if(!empty($order))
                Numer zamówienia: <strong>#{{ $order->id }}</strong>.
            @endif
        </p>

        @if(!empty($order))
            <div class="order-box">
                <p><span>Status:</span> przyjęte do realizacji</p>
                <p><span>Razem:</span> {{ number_format($order->total, 2) }} PLN</p>
                <p><span>Email:</span> {{ $order->shipping_address['email'] ?? 'brak' }}</p>
            </div>
        @endif



        <div class="space-y-4 mt-8">
            <p class="text-gray-300">
                Masz pytania? Napisz do nas:
                <a href="mailto:verve.ing@gmail.com" class="text-white underline hover:text-gray-300 transition">
                    verve.ing@gmail.com
                </a>
            </p>
            <a href="{{ route('home') }}" class="cta-button">
                Kontynuuj zakupy
            </a>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    // Clear cart after successful payment
    document.addEventListener('DOMContentLoaded', function() {
        // Clear localStorage cart
        localStorage.removeItem('verve-cart');
        localStorage.removeItem('cart');
        
        // Clear global cart variable if it exists
        if (typeof window.cart !== 'undefined') {
            window.cart.clear();
        }
        if (typeof window.CART !== 'undefined') {
            window.CART = [];
        }
        
        // Update cart display
        if (typeof window.renderCart === 'function') {
            window.renderCart();
        }
        
        console.log('Cart cleared after successful payment');
    });
</script>
@endpush