@extends('layouts.app')

@section('title', $success ? 'Payment Successful' : 'Payment Failed')

@section('content')
<div class="container mt-5 mb-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            @if($success)
                <!-- Success Card -->
                <div class="card border-success shadow-lg">
                    <div class="card-header bg-success text-white">
                        <h4 class="mb-0">
                            <i class="fas fa-check-circle"></i> Payment Successful
                        </h4>
                    </div>

                    <div class="card-body text-center p-5">
                        <div class="mb-4">
                            <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                        </div>
                        <h5 class="mb-3">Your registration is confirmed!</h5>
                        <p class="text-muted mb-4">
                            {{ $message }}
                        </p>

                        @if($registration)
                            <div class="alert alert-light" role="alert">
                                <h6 class="alert-heading mb-3">Registration Confirmed</h6>
                                <div class="row text-start small">
                                    <div class="col-md-6 mb-2">
                                        <strong>Registration ID:</strong><br>
                                        <code class="text-primary">{{ $registration->reg_id }}</code>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Status:</strong><br>
                                        <span class="badge bg-success">{{ ucfirst($registration->status) }}</span>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Student Name:</strong><br>
                                        {{ $registration->name }}
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Email:</strong><br>
                                        {{ $registration->email }}
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Event:</strong><br>
                                        {{ $registration->event->Name }}
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Amount Paid:</strong><br>
                                        <strong class="text-success">
                                            @if($registration->amount == 0)
                                                FREE
                                            @else
                                                ₹{{ number_format($registration->amount, 2) }}
                                            @endif
                                        </strong>
                                    </div>
                                    @if($registration->txnid)
                                        <div class="col-12 mt-2">
                                            <strong>Transaction ID:</strong><br>
                                            <code class="text-muted">{{ $registration->txnid }}</code>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <p class="text-muted small mt-3">
                                A confirmation email has been sent to <strong>{{ $registration->email }}</strong>
                            </p>
                        @endif
                    </div>

                    <div class="card-footer bg-light">
                        <div class="d-grid gap-2">
                            <a href="{{ route('registration.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus-circle"></i> Register for Another Event
                            </a>
                            <a href="/" class="btn btn-outline-secondary">
                                <i class="fas fa-home"></i> Back to Home
                            </a>
                        </div>
                    </div>
                </div>
            @else
                <!-- Failure Card -->
                <div class="card border-danger shadow-lg">
                    <div class="card-header bg-danger text-white">
                        <h4 class="mb-0">
                            <i class="fas fa-times-circle"></i> Payment Failed
                        </h4>
                    </div>

                    <div class="card-body text-center p-5">
                        <div class="mb-4">
                            <i class="fas fa-times-circle text-danger" style="font-size: 4rem;"></i>
                        </div>
                        <h5 class="mb-3">Payment could not be processed</h5>
                        <p class="text-muted mb-4">
                            {{ $message }}
                        </p>

                        @if($registration)
                            <div class="alert alert-warning" role="alert">
                                <h6 class="alert-heading mb-3">Registration Details</h6>
                                <div class="row text-start small">
                                    <div class="col-md-6 mb-2">
                                        <strong>Registration ID:</strong><br>
                                        <code class="text-primary">{{ $registration->reg_id }}</code>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Status:</strong><br>
                                        <span class="badge bg-danger">{{ ucfirst($registration->status) }}</span>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Student Name:</strong><br>
                                        {{ $registration->name }}
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Email:</strong><br>
                                        {{ $registration->email }}
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Event:</strong><br>
                                        {{ $registration->event->Name }}
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Amount:</strong><br>
                                        <strong>₹{{ number_format($registration->amount, 2) }}</strong>
                                    </div>
                                </div>
                            </div>

                            <p class="text-muted small">
                                Please try again or contact +91 9108001160 if the issue persists.
                            </p>
                        @endif
                    </div>

                    <div class="card-footer bg-light">
                        <div class="d-grid gap-2">
                            <a href="{{ route('registration.create') }}" class="btn btn-primary">
                                <i class="fas fa-redo"></i> Try Again
                            </a>
                            <a href="/" class="btn btn-outline-secondary">
                                <i class="fas fa-home"></i> Back to Home
                            </a>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection