@extends('layouts.guest-payment')

@section('content')
<div class="card">
    <div class="card-header text-white">
        <h4 class="mb-0">
            <i class="fas fa-exclamation-triangle"></i> Payment Error
        </h4>
    </div>

    <div class="card-body">
        <!-- Error Message -->
        <div class="text-center my-4">
            <div class="mb-4">
                <i class="fas fa-exclamation-circle" style="font-size: 80px; color: #dc3545;"></i>
            </div>
            <h3 class="text-danger">Oops! Something Went Wrong</h3>
            <p class="text-muted">We encountered an issue with your payment request.</p>
        </div>

        <!-- Error Details -->
        <div class="alert alert-danger">
            <h5><i class="fas fa-info-circle"></i> Error Details</h5>
            <hr>
            <p class="mb-0">{{ $error ?? 'Unknown error occurred.' }}</p>
        </div>

        @if($showLogout ?? false)
            <!-- Logout Action -->
            <div class="alert alert-warning">
                <h5><i class="fas fa-user-times"></i> Wrong Account?</h5>
                <p>If you're logged into the wrong account, please logout and try again with the correct email address.</p>
                <form method="POST" action="{{ route('logout') }}" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </button>
                </form>
            </div>
        @endif

        <!-- What to Do Next -->
        <div class="alert alert-info">
            <h5><i class="fas fa-question-circle"></i> What Should I Do?</h5>
            <ul class="mb-0">
                <li>Check your email for the correct payment recovery link</li>
                <li>Make sure you're logged in with the correct account (if required)</li>
                <li>Contact support if the issue persists</li>
            </ul>
        </div>

        <!-- Action Buttons -->
        <div class="text-center mt-4">
            <a href="{{ route('login') }}" class="btn btn-primary btn-lg me-2">
                <i class="fas fa-sign-in-alt"></i> Go to Login
            </a>
            @if(Auth::check())
                <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary btn-lg">
                    <i class="fas fa-home"></i> Go to Dashboard
                </a>
            @endif
        </div>
    </div>
</div>
@endsection