@extends('layouts.home')
<style>
    :root {
        --harvest-green: #16a34a;
        --harvest-green-light: #22c55e;
        --harvest-green-dark: #16a34a;
        --success-light: #F0F8F0;
    }

    .btn-success {
        background-color: var(--harvest-green);
        border-color: var(--harvest-green);
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        background-color: var(--harvest-green-dark);
        border-color: var(--harvest-green-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(107, 142, 35, 0.3);
    }

    .btn-outline-success {
        color: var(--harvest-green);
        border-color: var(--harvest-green);
        transition: all 0.3s ease;
    }

    .btn-outline-success:hover {
        background-color: var(--harvest-green);
        border-color: var(--harvest-green);
        color: white;
    }

    .text-success {
        color: var(--harvest-green) !important;
    }

    .bg-success-subtle {
        background-color: var(--success-light) !important;
    }

    .shadow-sm {
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05) !important;
    }

    .rounded-3 {
        border-radius: 0.75rem !important;
    }

    .success-animation {
        animation: successPulse 2s ease-in-out;
    }

    @keyframes successPulse {
        0% {
            transform: scale(0.8);
            opacity: 0;
        }

        50% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .order-item {
        transition: all 0.3s ease;
    }

    .order-item:hover {
        background-color: #f8f9fa;
        transform: translateX(5px);
    }

    .product-image-wrapper {
        overflow: hidden;
        border-radius: 0.5rem;
    }

    .timeline-item {
        position: relative;
        padding-left: 2rem;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 0.5rem;
        width: 0.75rem;
        height: 0.75rem;
        background-color: var(--harvest-green);
        border-radius: 50%;
        z-index: 2;
    }

    .timeline-item:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 0.8125rem;
        top: 1.25rem;
        width: 2px;
        height: calc(100% - 1rem);
        background-color: #dee2e6;
        z-index: 1;
    }

    .timeline-item.active::before {
        background-color: var(--harvest-green);
        box-shadow: 0 0 0 4px var(--success-light);
    }

    .timeline-item.pending::before {
        background-color: #6c757d;
    }

    .confetti {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1000;
    }

    .confetti-piece {
        position: absolute;
        width: 10px;
        height: 10px;
        background: var(--harvest-green);
        animation: confetti-fall 3s linear forwards;
    }

    @keyframes confetti-fall {
        0% {
            transform: translateY(-100vh) rotate(0deg);
            opacity: 1;
        }

        100% {
            transform: translateY(100vh) rotate(720deg);
            opacity: 0;
        }
    }

    @media (max-width: 768px) {
        .container {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .timeline-item {
            padding-left: 1.5rem;
        }

        .timeline-item::before {
            left: 0.375rem;
        }

        .timeline-item:not(:last-child)::after {
            left: 0.6875rem;
        }
    }

    .order-status-badge {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        border-radius: 2rem;
    }

    .print-button {
        transition: all 0.3s ease;
    }

    .print-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    @media print {
        .no-print {
            display: none !important;
        }

        .container {
            max-width: none !important;
            padding: 0 !important;
        }

        .bg-light {
            background-color: white !important;
        }
    }
</style>

@section('content')
    <main class="min-vh-100 bg-light" id="ordersuccess">
        <!-- Confetti Animation -->
        <div class="confetti" id="confetti"></div>

        <!-- Header Section -->
        <div class="bg-white shadow-sm border-bottom no-print">
            <div class="container py-4">
                <div class="text-center">
                    <div class="success-animation">
                        <div class="bg-success-subtle rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
                            style="width: 80px; height: 80px;">
                            <i class="fas fa-check fa-2x text-success"></i>
                        </div>
                    </div>
                    <h1 class="h2 mb-2 text-dark fw-bold">Order Placed Successfully!</h1>
                    <p class="text-muted mb-0">Thank you for your purchase. Your order has been received and is being
                        processed.</p>
                </div>
            </div>
        </div>

        <div class="container py-5">
            <div class="row g-4">
                <!-- Order Details Section -->
                <div class="col-lg-8">
                    <!-- Order Information -->
                    <div class="bg-white rounded-3 shadow-sm overflow-hidden mb-4">
                        <div class="p-4 border-bottom bg-light">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0 fw-semibold text-dark">
                                    <i class="fas fa-receipt me-2 text-success"></i>
                                    Order Details
                                </h5>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label small text-muted fw-medium">Order Number</label>
                                        <div class="fw-bold text-dark">
                                            #{{ $order->order_number ?? 'ORD-' . str_pad($order->id ?? '001', 6, '0', STR_PAD_LEFT) }}
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small text-muted fw-medium">Order Date</label>
                                        <div class="text-dark">
                                            {{ $order->created_at->format('F d, Y \a\t g:i A') ?? now()->format('F d, Y \a\t g:i A') }}
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small text-muted fw-medium">Payment Method</label>
                                        <div class="text-dark text-capitalize">
                                            {{ str_replace('_', ' ', $order->payment_option ?? 'Cash on Delivery') }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label small text-muted fw-medium">Order Status</label>
                                        <div>
                                            <span class="badge bg-success-subtle text-success order-status-badge">
                                                <i class="fas fa-clock me-1"></i>
                                                {{ $order->status ?? 'Processing' }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small text-muted fw-medium">Estimated Delivery</label>
                                        <div class="text-dark">{{ now()->addDays(3)->format('F d, Y') }} -
                                            {{ now()->addDays(7)->format('F d, Y') }}</div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small text-muted fw-medium">Total Amount</label>
                                        <div class="fw-bold text-success h5 mb-0">
                                            {{ number_format($order->total_amount ?? 0, 2) }}
                                            @if ($config->currancy)
                                                {{ $config->currancy }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Shipping Information -->
                    <div class="bg-white rounded-3 shadow-sm overflow-hidden mb-4">
                        <div class="p-4 border-bottom bg-light">
                            <h5 class="mb-0 fw-semibold text-dark">
                                <i class="fas fa-shipping-fast me-2 text-success"></i>
                                Shipping Information
                            </h5>
                        </div>
                        <div class="p-4">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <h6 class="fw-semibold text-dark mb-2">Delivery Address</h6>
                                    <div class="text-muted">
                                        <div>{{ $order->customerInfo->first_name ?? 'John' }}
                                            {{ $order->customerInfo->last_name ?? 'Doe' }}</div>
                                        <div>{{ $order->address ?? '123 Main Street' }}</div>
                                        <div>{{ $order->customerInfo->city ?? 'New York' }},
                                            {{ $order->customerInfo->state ?? 'NY' }}
                                            {{ $order->customerInfo->postal_code ?? '10001' }}</div>
                                        <div>{{ $order->customerInfo->country ?? 'United States' }}</div>
                                        <div class="mt-2">
                                            <i class="fas fa-phone me-2"></i>
                                            {{ $order->customerInfo->phone ?? '+1 234 567 8900' }}
                                        </div>
                                        <div>
                                            <i class="fas fa-envelope me-2"></i>
                                            {{ $order->customerInfo->user->email ?? 'john@example.com' }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="fw-semibold text-dark mb-3">Order Timeline</h6>
                                    <div class="timeline">
                                        <div class="timeline-item active mb-3">
                                            <div class="fw-medium text-dark">Order pending</div>
                                            <div class="text-muted small">Your order will be accepted within the next 24 hours</div>
                                            <div class="text-muted small">{{ now()->format('M d, Y \a\t g:i A') }}</div>
                                        </div>
                                        <div class="timeline-item pending mb-3">
                                            <div class="fw-medium text-dark">Order Accepted</div>
                                            <div class="text-muted small">We’re getting your order ready for dispatch.</div>
                                        </div>
                                        <div class="timeline-item pending mb-3">
                                            <div class="fw-medium text-muted">Shipped</div>
                                            <div class="text-muted small">1-2 business days</div>
                                        </div>
                                        <div class="timeline-item pending">
                                            <div class="fw-medium text-muted">Delivered</div>
                                            <div class="text-muted small">2-7 business days</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Order Items -->
                    <div class="bg-white rounded-3 shadow-sm overflow-hidden mb-4">
                        <div class="p-4 border-bottom bg-light">
                            <h5 class="mb-0 fw-semibold text-dark">
                                <i class="fas fa-shopping-bag me-2 text-success"></i>
                                Order Items ({{ count($order->orderItems) }}
                                {{ count($order->orderItems ?? []) == 1 ? 'item' : 'items' }})
                            </h5>
                        </div>
                        <div class="p-4">
                            @if (isset($order->orderItems) && count($order->orderItems) > 0)
                                @foreach ($order->orderItems as $index => $item)
                                    <div
                                        class="order-item d-flex align-items-center gap-3 p-3 rounded-2 mb-3 {{ $index !== count($order->orderItems) - 1 ? 'border-bottom' : '' }}">
                                        <div class="product-image-wrapper flex-shrink-0">
                                            @if ($item->product->image)
                                                <img src="{{ asset('storage/products/' . $item->product->image) }}"
                                                    class="img-fluid rounded" alt="{{ $item->product->name }}"
                                                    style="width: 80px; height: 80px; object-fit: cover;">
                                            @else
                                                <img src="{{ asset('/assets/img/no-product.png') }}"
                                                    alt="{{ $item->product->image }}" class="img-fluid rounded"
                                                    style="width: 80px; height: 80px; object-fit: cover;">
                                            @endif

                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-2 fw-semibold text-dark">{{ $item->product->name }}</h6>
                                            <div class="d-flex align-items-center gap-3 text-muted small sm-align-items-space-between">
                                                <span>Quantity: {{ $item->quantity }}</span>
                                                <span>Price: {{ $item->price }} @if ($config->currancy)
                                                        {{ $config->currancy }}
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <div class="fw-bold text-success h6 mb-0">
                                                {{ $item->total }}
                                                @if ($config->currancy)
                                                    {{ $config->currancy }}
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <!-- Fallback for demo purposes -->
                                <div class="order-item d-flex align-items-center gap-3 p-3 rounded-2 mb-3">
                                    <div class="product-image-wrapper flex-shrink-0">
                                        <div class="bg-light rounded d-flex align-items-center justify-content-center"
                                            style="width: 80px; height: 80px;">
                                            <i class="fas fa-box text-muted"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-2 fw-semibold text-dark">Sample Product</h6>
                                        <div class="d-flex align-items-center gap-3 text-muted small">
                                            <span>Quantity: 1</span>
                                            <span>Price: 99.99 @if ($config->currancy)
                                                    {{ $config->currancy }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                    <div class="text-end">
                                        <div class="fw-bold text-success h6 mb-0">
                                            99.99 @if ($config->currancy)
                                                {{ $config->currancy }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Actions and Summary Section -->
                <div class="col-lg-4 no-print">
                    <div class="position-sticky" style="top: 12rem;">
                        <!-- Order Summary -->
                        <div class="bg-white rounded-3 shadow-sm overflow-hidden mb-4">
                            <div class="p-4 border-bottom bg-light">
                                <h5 class="mb-0 fw-semibold text-dark">Order Summary</h5>
                            </div>
                            <div class="p-4">
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Subtotal</span>
                                    <span class="fw-medium">
                                        {{ number_format($order->total_amount, 2) }}
                                        @if ($config->currancy)
                                            {{ $config->currancy }}
                                        @endif
                                    </span>
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="h5 mb-0 fw-bold text-dark">Total</span>
                                    <span class="h4 mb-0 fw-bold text-success">
                                        {{ number_format($order->total_amount, 2) }}
                                        @if ($config->currancy)
                                            {{ $config->currancy }}
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="bg-white rounded-3 shadow-sm overflow-hidden">
                            <div class="p-4">
                                <div class="d-grid gap-3">
                                    <a href="/" class="btn btn-success">
                                        <i class="fas fa-shopping-bag me-2"></i>
                                        Continue Shopping
                                    </a>
                                    <button class="btn btn-outline-success no-print" onclick="window.print()">
                                        <i class="fas fa-download me-2"></i>
                                        Download Receipt
                                    </button>
                                </div>

                                <div class="mt-4 p-3 bg-light rounded-2">
                                    <div class="d-flex align-items-start gap-3">
                                        <i class="fas fa-info-circle text-success mt-1"></i>
                                        <div>
                                            <h6 class="mb-2 fw-semibold text-dark">What's Next?</h6>
                                            <ul class="list-unstyled mb-0 small text-muted">
                                                <li class="mb-1">• You'll receive a confirmation email shortly</li>
                                                <li class="mb-1">• We'll notify you when your order ships</li>
                                                <li>• Contact us if you have any questions</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        // Confetti animation
        function createConfetti() {
            const confettiContainer = document.getElementById('confetti');
            const colors = ['#16a34a', '#22c55e', '#10b981', '#059669', '#047857'];

            for (let i = 0; i < 50; i++) {
                const confettiPiece = document.createElement('div');
                confettiPiece.className = 'confetti-piece';
                confettiPiece.style.left = Math.random() * 100 + '%';
                confettiPiece.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confettiPiece.style.animationDelay = Math.random() * 2 + 's';
                confettiPiece.style.animationDuration = (Math.random() * 2 + 3) + 's';
                confettiContainer.appendChild(confettiPiece);
            }

            // Remove confetti after animation
            setTimeout(() => {
                confettiContainer.innerHTML = '';
            }, 5000);
        }

        // Run confetti on page load
        document.addEventListener('DOMContentLoaded', function() {
            createConfetti();
        });
    </script>
@endsection