{{-- resources/views/payment/success.blade.php --}}
@extends('web.home.layout.master')

@section('title', 'Payment Successful')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-success">
                <div class="card-header bg-success text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-check-circle me-2"></i>
                        Payment Successful!
                    </h4>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <div class="success-icon mb-3">
                            <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                        </div>
                        <h5 class="text-success">Thank you for your payment!</h5>
                        <p class="text-muted">Your transaction has been processed successfully.</p>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-box p-3 bg-light rounded mb-3">
                                <h6 class="text-muted mb-2">Transaction Details</h6>

                                @if(isset($orderId) && $orderId)
                                <div class="d-flex justify-content-between mb-2">
                                    <span><strong>Order ID:</strong></span>
                                    <span class="text-primary">{{ $orderId }}</span>
                                </div>
                                @elseif(request('orderId'))
                                <div class="d-flex justify-content-between mb-2">
                                    <span><strong>Order ID:</strong></span>
                                    <span class="text-primary">{{ request('orderId') }}</span>
                                </div>
                                @endif

                                @if(isset($transactionId) && $transactionId)
                                <div class="d-flex justify-content-between mb-2">
                                    <span><strong>Transaction ID:</strong></span>
                                    <span class="text-primary">{{ $transactionId }}</span>
                                </div>
                                @elseif(request('trnId'))
                                <div class="d-flex justify-content-between mb-2">
                                    <span><strong>Transaction ID:</strong></span>
                                    <span class="text-primary">{{ request('trnId') }}</span>
                                </div>
                                @endif

                                @if(request('status'))
                                <div class="d-flex justify-content-between mb-2">
                                    <span><strong>Status:</strong></span>
                                    <span class="badge bg-success">{{ strtoupper(request('status')) }}</span>
                                </div>
                                @endif

                                @if(session('koko_amount'))
                                <div class="d-flex justify-content-between mb-2">
                                    <span><strong>Amount:</strong></span>
                                    <span class="text-success">LKR {{ number_format(session('koko_amount'), 2) }}</span>
                                </div>
                                @endif

                                <div class="d-flex justify-content-between">
                                    <span><strong>Date & Time:</strong></span>
                                    <span>{{ now()->format('Y-m-d H:i:s') }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="info-box p-3 bg-light rounded mb-3">
                                <h6 class="text-muted mb-2">What's Next?</h6>
                                <ul class="list-unstyled mb-0">
                                    <li class="mb-2">
                                        <i class="fas fa-envelope text-primary me-2"></i>
                                        A confirmation email has been sent to your email address
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-receipt text-primary me-2"></i>
                                        Your order is being processed
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-shipping-fast text-primary me-2"></i>
                                        You will receive updates on delivery status
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    @if(isset($message) && $message)
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        {{ $message }}
                    </div>
                    @endif

                    <div class="text-center mt-4">
                        <div class="btn-group" role="group">
                            <a href="{{ route('home') ?? '/' }}" class="btn btn-primary">
                                <i class="fas fa-home me-2"></i>
                                Go to Homepage
                            </a>

                            @if(Route::has('orders.index'))
                            <a href="{{ route('orders.index') }}" class="btn btn-outline-primary">
                                <i class="fas fa-list me-2"></i>
                                View My Orders
                            </a>
                            @endif

                            @if(Route::has('shop') || Route::has('products.index'))
                            <a href="{{ route('shop') ?? route('products.index') ?? '#' }}" class="btn btn-outline-success">
                                <i class="fas fa-shopping-cart me-2"></i>
                                Continue Shopping
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Information Card -->
            <div class="card mt-4">
                <div class="card-body">
                    <h6 class="card-title">Need Help?</h6>
                    <p class="card-text text-muted mb-3">
                        If you have any questions about your order or payment, please don't hesitate to contact us.
                    </p>
                    <div class="row text-center">
                        <div class="col-md-4">
                            <i class="fas fa-phone text-primary mb-2" style="font-size: 1.5rem;"></i>
                            <p class="mb-0"><strong>Call Us</strong></p>
                            <p class="text-muted">+94 XX XXX XXXX</p>
                        </div>
                        <div class="col-md-4">
                            <i class="fas fa-envelope text-primary mb-2" style="font-size: 1.5rem;"></i>
                            <p class="mb-0"><strong>Email Us</strong></p>
                            <p class="text-muted">support@yourstore.com</p>
                        </div>
                        <div class="col-md-4">
                            <i class="fas fa-comments text-primary mb-2" style="font-size: 1.5rem;"></i>
                            <p class="mb-0"><strong>Live Chat</strong></p>
                            <p class="text-muted">Available 24/7</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.success-icon {
    animation: successPulse 2s ease-in-out;
}

@keyframes successPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.info-box {
    border-left: 4px solid #28a745;
}
</style>
@endsection