@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center pt-5">

                <!-- Animated Success Icon -->
                <div class="d-flex align-items-center justify-content-center mx-auto rounded-circle bg-success bg-opacity-10 mb-4" style="width: 6rem; height: 6rem;">
                    <svg class="text-success" 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="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                </div>

                <h2 class="fs-1 fw-bold text-dark mb-3">Prescription Sent!</h2>
                <p class="fs-5 text-secondary mb-4">
                    The prescription for <span class="fw-semibold text-dark">{{ session('patient_name', 'Jane Doe') }}</span> has been successfully sent to <span class="fw-semibold text-dark">{{ session('pharmacy', 'CVS Pharmacy') }}</span>.
                </p>

                <!-- System Notification Banner -->
                <div class="alert alert-primary d-flex align-items-center gap-3 text-start rounded-3 shadow-sm mb-4" role="alert">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0" width="24" height="24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <p class="small fw-medium mb-0">System Notification: Prescription has been electronically signed and routed.</p>
                </div>

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