@extends('layouts.app')

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

@section('content')

<div class="content pb-0">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <!-- Failure Icon -->
            <div class="text-center mb-4">
                <div class="rounded-circle bg-danger-light d-inline-flex align-items-center justify-content-center" style="width: 120px; height: 120px;">
                    <i class="ti ti-circle-x text-danger" style="font-size: 60px;"></i>
                </div>
            </div>

            <!-- Failure Message -->
            <div class="text-center mb-4">
                <h3 class="fw-bold mb-2 text-danger">Payment Failed</h3>
                <p class="text-muted">Unfortunately, your payment could not be processed. Please try again or use a different payment method.</p>
            </div>

            <!-- Appointment Details Card -->
            <div class="card mb-3">
                <div class="card-body">
                    <h6 class="fw-bold mb-3">Appointment Details</h6>

                    <div class="mb-3">
                        <label class="text-muted small">Appointment ID</label>
                        <p class="fw-semibold">{{ $appointment->appointment_id }}</p>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="text-muted small">Doctor</label>
                                <p class="fw-semibold">{{ $doctor->name }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="text-muted small">Clinic</label>
                                <p class="fw-semibold">{{ $clinic->name }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="text-muted small">Date</label>
                                <p class="fw-semibold">{{ date('d M, Y', strtotime($appointment->appointment_date)) }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="text-muted small">Amount Due</label>
                                <p class="fw-bold text-danger mb-0">₹{{ number_format($appointment->appointment_fee, 2) }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Troubleshooting Card -->
            <div class="card border-warning mb-3">
                <div class="card-body">
                    <h6 class="fw-bold mb-3 text-warning">
                        <i class="ti ti-alert-circle me-2"></i>Troubleshooting Tips
                    </h6>
                    <ul class="small mb-0 ps-3">
                        <li class="mb-2">Check your internet connection and try again</li>
                        <li class="mb-2">Ensure you have sufficient funds in your account</li>
                        <li class="mb-2">Verify your card/account details are correct</li>
                        <li class="mb-2">Try using a different payment method</li>
                        <li class="mb-2">Clear your browser cache and try again</li>
                        <li>Contact your bank if the issue persists</li>
                    </ul>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="d-grid gap-2">
                <a href="{{ route('patient.payment.retry', $appointment->id) }}" class="btn btn-danger">
                    <i class="ti ti-reload me-2"></i>Retry Payment
                </a>
                <a href="{{ route('patient.appointments.list') }}" class="btn btn-outline-secondary">
                    <i class="ti ti-arrow-left me-2"></i>Back to Appointments
                </a>
            </div>

            <!-- Support Notice -->
            <div class="alert alert-info mt-4" role="alert">
                <small>
                    <strong>Need Help?</strong> If you're facing persistent issues with payment, please contact our support team at <a href="mailto:support@predcare.com">support@predcare.com</a> or call +91-XXXXXXXXXX
                </small>
            </div>

            <!-- Important Notice -->
            <div class="card mt-3 border-info">
                <div class="card-body">
                    <h6 class="fw-bold mb-2 text-info">
                        <i class="ti ti-info-circle me-2"></i>Important Information
                    </h6>
                    <p class="small mb-0 text-muted">
                        Your appointment booking is still pending payment. Please complete the payment within 24 hours to confirm your appointment. If payment is not completed, your appointment slot will become available for other patients.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection