@extends('layouts.app')

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

@section('content')

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

            <!-- Success Message -->
            <div class="text-center mb-4">
                <h3 class="fw-bold mb-2">Payment Successful!</h3>
                <p class="text-muted">Your appointment has been confirmed. A confirmation email has been sent to your registered email address.</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 & Time</label>
                                <p class="fw-semibold">{{ date('d M, Y', strtotime($appointment->appointment_date)) }} <br> {{ $appointment->start_time }} - {{ $appointment->end_time }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="text-muted small">Type</label>
                                <p class="fw-semibold">
                                    @if($appointment->consultation_type === 'video')
                                        <span class="badge bg-info">Video Call</span>
                                    @else
                                        <span class="badge bg-success">In-Person</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <div class="mb-0">
                        <label class="text-muted small">Payment Amount</label>
                        <p class="fw-bold text-primary mb-0">₹{{ number_format($appointment->appointment_fee, 2) }}</p>
                    </div>
                </div>
            </div>

            <!-- Next Steps Card -->
            <div class="card border-success mb-3">
                <div class="card-body">
                    <h6 class="fw-bold mb-3 text-success">
                        <i class="ti ti-list-check me-2"></i>What's Next?
                    </h6>
                    <ul class="small mb-0 ps-3">
                        @if($appointment->consultation_type === 'video')
                            <li class="mb-2">You will receive a video call link 30 minutes before the appointment</li>
                            <li class="mb-2">Ensure you have a stable internet connection and a working camera/microphone</li>
                            <li class="mb-2">Join the call 5 minutes before the scheduled time</li>
                        @else
                            <li class="mb-2">Please arrive 10 minutes before your scheduled appointment time</li>
                            <li class="mb-2">Bring a valid ID proof with you</li>
                            <li class="mb-2">The clinic address and directions have been sent to your email</li>
                        @endif
                        <li>For any queries, contact us at support@predcare.com</li>
                    </ul>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="d-grid gap-2">
                <a href="{{ route('patient.appointments.list') }}" class="btn btn-primary">
                    <i class="ti ti-calendar me-2"></i>View My Appointments
                </a>
                <a href="{{ route('patient.appointments.show', $appointment->id) }}" class="btn btn-outline-primary">
                    <i class="ti ti-eye me-2"></i>View Appointment Details
                </a>
            </div>

            <!-- Important Notice -->
            <div class="alert alert-info mt-4" role="alert">
                <small>
                    <strong>Note:</strong> You can reschedule or cancel your appointment up to 24 hours before the scheduled time. Cancellations made within 24 hours may be subject to cancellation charges.
                </small>
            </div>
        </div>
    </div>
</div>

@endsection