@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center pt-5">
                <div class="d-flex align-items-center justify-content-center mx-auto rounded-circle bg-danger bg-opacity-10 mb-4" style="width: 6rem; height: 6rem;">
                    <svg class="text-danger" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="48" height="48" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </div>

                <h2 class="fs-1 fw-bold text-dark mb-3">Transaction Cancelled</h2>
                <p class="fs-5 text-secondary mb-4">
                    The prescription process has been cancelled. No data was sent to the pharmacy.
                </p>

                <div class="px-3">
                    <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary btn-lg w-100 rounded-3">
                        Return to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection