@extends('frontend.layouts.master')

@section('main-content')
<style>
    .confirmation-box {
        max-width: 700px;
        background: #f9fff9;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0,128,0,0.08);
        padding: 40px;
        position: relative;
        overflow: hidden;
    }

    .confirmation-box::before {
        content: '';
        background: url('https://www.transparenttextures.com/patterns/green-dust-and-scratches.png') repeat;
        opacity: 0.05;
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 0;
    }

    .confirmation-box * {
        position: relative;
        z-index: 1;
    }

    .summary-box {
        background: #eefaf0;
        border-left: 4px solid #28a745;
        border-radius: 8px;
        padding: 20px;
        text-align: left;
    }

    .summary-box ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .summary-box ul li {
        margin-bottom: 6px;
        color: #4b604b;
    }

    .btn-track, .btn-shop {
        display: inline-block;
        margin: 15px 10px 0 10px;
        padding: 10px 20px;
        font-weight: 600;
        border-radius: 30px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-track {
        background: #e6f4ea;
        color: #28a745;
        border: 1px solid #28a745;
    }

    .btn-track:hover {
        background: #28a745;
        color: #fff;
    }

    .btn-shop {
        background: #28a745;
        color: #fff;
    }

    .btn-shop:hover {
        background: #1e7e34;
    }

    /* ✅ Pulse Glow Check Animation */
    .glow-check {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .glow-check .circle {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: #28a745;
        color: white;
        font-size: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: pulse-glow 1.5s ease-out;
        box-shadow: 0 0 0 rgba(40, 167, 69, 0.4);
    }

    @keyframes pulse-glow {
        0% {
            box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
        }
        70% {
            box-shadow: 0 0 0 15px rgba(40, 167, 69, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
        }
    }
</style>

<!-- Font Awesome for check icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="container my-5 text-center">
    <div class="confirmation-box mx-auto">
        <h2 style="color: #28a745; font-weight: 600; font-family: 'Georgia', serif;">Thank You for Your Order!</h2>

        <!-- ✅ Glow Check Animation -->
        <div class="glow-check mx-auto my-3">
            <div class="circle">
                <i class="fa fa-check"></i>
            </div>
        </div>

        <p style="color: #4b604b; font-size: 16px;">
            Your fashion blessings are on the way <br>
            Thank you for being a part of the <strong>Jayaka Fusion Fashion</strong> family.
        </p>

        <div class="summary-box mt-4">
            <h5 style="color: #28a745; font-weight: 600;">🧾 Order Summary</h5>
            <ul>
                <li><strong>Order ID:</strong> #{{ $order->order_number }}</li>
                <li><strong>Order Date:</strong> {{ \Carbon\Carbon::parse($order->created_at)->format('d M, Y') }}</li>
                <li><strong>Payment Method:</strong> {{ strtoupper($order->payment_method) }}</li>
                <li><strong>Total:</strong> Rs. {{ number_format($order->total_amount, 2) }}</li>
            </ul>
        </div>

        <p class="mt-4" style="color: #4b604b; font-size: 15px;">
            📦 You'll be notified via WhatsApp when your parcel is shipped.
        </p>

        <div class="mt-3">
            <a href="{{ route('product.track.order') }}" class="btn-track">🔍 Track My Order</a>
            <a href="{{ route('home') }}" class="btn-shop">🛍️ Continue Shopping</a>
        </div>

        <p class="mt-4" style="font-size: 14px; color: #888;">
            With every outfit, may your inner goddess shine brighter.  
            <br>Thank you for choosing <strong>Jayaka</strong> 💫
        </p>
    </div>
</div>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    window.onload = function() {
        Swal.fire({
            icon: 'success',
            title: 'Order Confirmed!',
            html: `
                <p style="color: #28a745; font-size: 15px;">
                    Your order has been placed successfully 💚<br>
                    Order ID: <strong>#{{ $order->order_number }}</strong>
                </p>
            `,
            confirmButtonColor: '#28a745',
            confirmButtonText: 'Let’s Go 🌿'
        });
    };
</script>
@endsection