@extends('web.home.layout.master')

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

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-danger">
                <div class="card-header bg-danger text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Payment Failed
                    </h4>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <div class="error-icon mb-3">
                            <i class="fas fa-times-circle text-danger" style="font-size: 4rem;"></i>
                        </div>
                        <h5 class="text-danger">Payment Could Not Be Processed</h5>
                        <p class="text-muted">Unfortunately, we were unable to process your payment at this time.</p>
                    </div>

                    <!-- Error Message -->
                    <div class="alert alert-danger" role="alert">
                        <h6 class="alert-heading">
                            <i class="fas fa-info-circle me-2"></i>
                            Error Details
                        </h6>
                        <p class="mb-0">
                            @if(isset($message) && $message)
                                {{ $message }}
                            @elseif(session('error'))
                                {{ session('error') }}
                            @elseif(request('desc'))
                                {{ request('desc') }}
                            @else
                                An unexpected error occurred while processing your payment. Please try again.
                            @endif
                        </p>
                    </div>

                    <!-- Transaction Details if available -->
                    @if(request('orderId') || request('trnId') || request('status'))
                    <div class="row mb-4">
                        <div class="col-md-8 mx-auto">
                            <div class="info-box p-3 bg-light rounded">
                                <h6 class="text-muted mb-3">Transaction Information</h6>

                                @if(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(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-danger">{{ 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>LKR {{ number_format(session('koko_amount'), 2) }}</span>
                                </div>
                                @endif

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

                    <!-- Common Reasons -->
                    <div class="card bg-light border-0 mb-4">
                        <div class="card-body">
                            <h6 class="card-title text-muted">
                                <i class="fas fa-question-circle me-2"></i>
                                Common Reasons for Payment Failure
                            </h6>
                            <ul class="mb-0 text-muted">
                                <li>Insufficient funds in your account</li>
                                <li>Card expired or blocked</li>
                                <li>Incorrect card details entered</li>
                                <li>Bank declined the transaction</li>
                                <li>Network connectivity issues</li>
                                <li>Transaction timeout</li>
                            </ul>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="text-center mb-4">
                        <div class="btn-group-vertical btn-group-lg" role="group">
                            <a href="javascript:history.back()" class="btn btn-primary mb-2">
                                <i class="fas fa-redo me-2"></i>
                                Try Payment Again
                            </a>

                            @if(Route::has('checkout'))
                            <a href="{{ route('checkout') }}" class="btn btn-outline-primary mb-2">
                                <i class="fas fa-shopping-cart me-2"></i>
                                Return to Checkout
                            </a>
                            @endif

                            <a href="{{ route('home') ?? '/' }}" class="btn btn-outline-secondary">
                                <i class="fas fa-home me-2"></i>
                                Go to Homepage
                            </a>
                        </div>
                    </div>

                    <!-- Alternative Payment Methods -->
                    <div class="card border-info">
                        <div class="card-header bg-info text-white">
                            <h6 class="mb-0">
                                <i class="fas fa-credit-card me-2"></i>
                                Try Alternative Payment Methods
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-3 mb-3">
                                    <i class="fas fa-credit-card text-primary mb-2" style="font-size: 2rem;"></i>
                                    <p class="mb-0"><strong>Different Card</strong></p>
                                    <small class="text-muted">Try another credit/debit card</small>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <i class="fas fa-university text-primary mb-2" style="font-size: 2rem;"></i>
                                    <p class="mb-0"><strong>Bank Transfer</strong></p>
                                    <small class="text-muted">Direct bank transfer</small>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <i class="fas fa-mobile-alt text-primary mb-2" style="font-size: 2rem;"></i>
                                    <p class="mb-0"><strong>Mobile Payment</strong></p>
                                    <small class="text-muted">Mobile wallet options</small>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <i class="fas fa-money-bill-wave text-primary mb-2" style="font-size: 2rem;"></i>
                                    <p class="mb-0"><strong>Cash on Delivery</strong></p>
                                    <small class="text-muted">Pay when you receive</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Customer Support Card -->
            <div class="card mt-4">
                <div class="card-body">
                    <h6 class="card-title">
                        <i class="fas fa-headset me-2"></i>
                        Need Assistance?
                    </h6>
                    <p class="card-text text-muted mb-3">
                        Our customer support team is here to help you resolve any payment issues.
                    </p>
                    <div class="row text-center">
                        <div class="col-md-4 mb-3">
                            <a href="tel:+94XXXXXXXXX" class="text-decoration-none">
                                <i class="fas fa-phone text-primary mb-2" style="font-size: 1.5rem;"></i>
                                <p class="mb-0"><strong>Call Support</strong></p>
                                <p class="text-muted">+94 XX XXX XXXX</p>
                            </a>
                        </div>
                        <div class="col-md-4 mb-3">
                            <a href="mailto:support@yourstore.com" class="text-decoration-none">
                                <i class="fas fa-envelope text-primary mb-2" style="font-size: 1.5rem;"></i>
                                <p class="mb-0"><strong>Email Support</strong></p>
                                <p class="text-muted">support@yourstore.com</p>
                            </a>
                        </div>
                        <div class="col-md-4 mb-3">
                            <a href="#" class="text-decoration-none">
                                <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>
                            </a>
                        </div>
                    </div>

                    <!-- Emergency Contact -->
                    <div class="alert alert-warning mt-3">
                        <strong>
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Important:
                        </strong>
                        If money was debited from your account but the payment failed, please contact us immediately with your transaction details.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.error-icon {
    animation: errorShake 0.8s ease-in-out;
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.info-box {
    border-left: 4px solid #dc3545;
}

.btn-group-vertical .btn {
    min-width: 250px;
}

@media (max-width: 768px) {
    .btn-group-vertical .btn {
        min-width: 100%;
    }
}
</style>
@endsection