@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">Request Submitted!</h2>
                <p class="fs-5 text-secondary mb-2">Your prescription request has been successfully submitted.</p>
                <p class="small text-secondary mb-4">Request ID: <span class="fw-semibold text-dark">{{ session('request_id', 'RX-2024-001234') }}</span></p>

                <!-- Details Card -->
                <div class="card border rounded-3 mb-4 text-start">
                    <div class="card-body p-4">
                        <h3 class="small fw-semibold text-dark mb-3">Request Details</h3>
                        <div class="vstack gap-3">
                            <div class="d-flex justify-content-between small">
                                <span class="text-secondary">Patient:</span>
                                <span class="fw-medium text-dark">{{ session('patient_name', 'John Smith') }}</span>
                            </div>
                            <div class="d-flex justify-content-between small">
                                <span class="text-secondary">Medication:</span>
                                <span class="fw-medium text-dark">{{ session('medication') ?: 'Lisinopril 10mg' }}</span>
                            </div>
                            <div class="d-flex justify-content-between small">
                                <span class="text-secondary">Chief Complaint:</span>
                                <span class="fw-medium text-dark">{{ session('chief_complaint') ?: 'Hypertension management' }}</span>
                            </div>
                            <div class="d-flex justify-content-between small">
                                <span class="text-secondary">Pharmacy:</span>
                                <span class="fw-medium text-dark">{{ session('pharmacy', 'CVS Pharmacy - Main Street') }}</span>
                            </div>
                            <!-- <div class="d-flex justify-content-between small">
                                <span class="text-secondary">Prescriber:</span>
                                <span class="fw-medium text-dark">{{ session('prescriber', 'N/A') }}</span>
                            </div> -->
                        </div>
                    </div>
                </div>

                <!-- 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">Your prescriber will review your request within 24 hours. You'll receive an email notification once they've made a decision.</p>
                </div>

                <div class="px-3">
                    <a href="{{ route('intake.step1') }}" class="btn btn-dark btn-lg w-100 rounded-3">
                        Submit Another Request
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection