@extends('layouts.guest-payment')

@section('content')
<div class="card">
    <div class="card-header text-white">
        <h4 class="mb-0">
            <i class="fas fa-check-circle"></i> Payment Successful!
        </h4>
    </div>

    <div class="card-body">
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('info'))
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <i class="fas fa-info-circle"></i> {{ session('info') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Success Message -->
        <div class="text-center my-4">
            <div class="mb-4">
                <i class="fas fa-check-circle" style="font-size: 80px; color: #28a745;"></i>
            </div>
            <h3 class="text-success">{{ $message ?? 'Payment Completed Successfully!' }}</h3>
            <p class="text-muted">Your Black Belt Certificate payment has been processed.</p>
        </div>

        <!-- Payment Details -->
        <div class="alert alert-info">
            <h5><i class="fas fa-receipt"></i> Payment Details</h5>
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <p><strong>User:</strong> {{ $recovery->user->fname }} {{ $recovery->user->lname }}</p>
                    <p><strong>Email:</strong> {{ $recovery->user->email }}</p>
                    <p><strong>Recovery Code:</strong> {{ $recovery->recovery_code }}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>Amount Paid:</strong> ₹{{ number_format($recovery->amount, 2) }}</p>
                    <p><strong>Payment Date:</strong> {{ $recovery->payment_completed_at?->format('d M Y, h:i A') ?? 'N/A' }}</p>
                    <p><strong>Status:</strong> 
                        <span class="badge bg-success">Payment Completed</span>
                    </p>
                </div>
            </div>
        </div>

        <!-- Next Steps -->
        <div class="alert alert-warning">
            <h5><i class="fas fa-arrow-right"></i> Next Steps</h5>
            <ol>
                @if($showLoginButton ?? false)
                    <li><strong>Login to your account</strong> using the button below</li>
                    <li>Navigate to <strong>Black Belt Certificates</strong> section</li>
                    <li>Download your certificate</li>
                @else
                    <li>Navigate to <strong>Black Belt Certificates</strong> section from your dashboard</li>
                    <li>Download your certificate</li>
                @endif
            </ol>
        </div>

        <!-- Action Buttons -->
        <div class="text-center mt-4">
            @if($showLoginButton ?? false)
                <a href="{{ route('login') }}" class="btn btn-success btn-lg me-2">
                    <i class="fas fa-sign-in-alt"></i> Login to Access Certificate
                </a>
            @else
                {{-- DISABLED: Black Belt Certificate Access (User Request) --}}
                {{-- Users should not be able to access black belt certificates --}}
                {{--
                @php
                    $roleName = Auth::user()->currentRole->name ?? 'athlete';
                @endphp
                <a href="{{ route('user.certificates.black_belt', ['role' => $roleName]) }}" class="btn btn-success btn-lg me-2">
                    <i class="fas fa-download"></i> Download Certificate
                </a>
                --}}
                <a href="{{ route('dashboard') }}" class="btn btn-primary btn-lg">
                    <i class="fas fa-home"></i> Go to Dashboard
                </a>
            @endif
        </div>
    </div>
</div>
@endsection