@extends('layouts.new-layout')
@section('content')
<div class="container py-5 text-center" style="min-height:60vh;display:flex;align-items:center;justify-content:center;">
    <div>
        <div style="font-size:72px;color:#ffc107;">⏳</div>
        <h2 class="mt-3 fw-bold">Appointment Booked!</h2>
        <p class="text-muted mt-2">Your appointment has been received. Payment will be collected at the time of service.</p>

        @if($appointment)
        <div class="card mx-auto mt-4 text-start" style="max-width:420px;">
            <div class="card-body">
                <p><strong>Appointment ID:</strong> {{ $appointment->appointment_id }}</p>
                <p><strong>Name:</strong> {{ $appointment->name }}</p>
                <p><strong>Date:</strong> {{ \Carbon\Carbon::parse($appointment->date)->format('F d, Y') }}</p>
                <p><strong>Time:</strong> {{ \Carbon\Carbon::parse($appointment->time)->format('h:i A') }}</p>
                <p><strong>Amount Due:</strong> ${{ number_format($appointment->price, 2) }}</p>
            </div>
        </div>
        @endif

        <p class="mt-4 text-muted small">Questions? Contact us at <a href="mailto:info@mjvacservices.ca">info@mjvacservices.ca</a></p>
        <a href="{{ route('welcome') }}" class="btn btn-dark mt-3">Back to Home</a>
    </div>
</div>
@endsection