@extends('layouts.new-layout')

@section('content')
    <div class="container py-5">
        <div>
            <div class="booking-container row">
                <div class="col-md-12 text-center">
                    <h1 class="mb-3">Oops! Something went wrong.</h1>
                    <h5 class="mb-3">Payment Failed or Cancelled</h5>
                    <p>We're sorry, but your payment was not successful or was cancelled.</p>
                    <p>Please try again or contact our support team if you have any questions.</p>
                    <p><strong>Booking Reference:</strong> <span id="booking-id">#{{ $appointment->appointment_id }}</span></p>
                </div>

                <!-- Follow Us Section -->
                <div class="follow-us mt-4 text-center">
                    <h4><strong>Stay Connected with Us!</strong></h4>
                    <p> Follow us on Instagram or Facebook to stay in the loop with new collections, special offers, and style inspiration.</p>
                    <p>Join our community and never miss out on the trends! </p>
                    <a href="https://www.facebook.com/people/Studio-on-the-Ridge/100063713166650/" target="_blank" title="Follow on Facebook">
                            <span class="me-3" data-feather="facebook">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook">
                                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                                </svg>
                            </span>
                    </a> |
                    <a href="https://www.instagram.com/studio.on.the.ridge/" target="_blank" title="Follow on Instagram">
                            <span class="me-3" data-feather="instagram">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram">
                                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                                </svg>
                            </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection