@extends('layouts.welcome')

@section('content')

<section class="success-page">
    <div class="container">

        <div class="success-card">

            <div class="success-icon">

                <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M5 13l4 4L19 7"/>
                </svg>

            </div>

            <div class="success-kicker">
                Appointment Confirmed
            </div>

            <h1 class="success-title">
                Your Booking Has Been Successfully Reserved
            </h1>

            <p class="success-text">
                Your deposit payment has been received successfully and your
                appointment has now been secured. A confirmation message
                containing your appointment details has been sent to your
                email and phone number.
            </p>

            <div class="details-box">

                <div class="details-head">
                    Booking Summary
                </div>

                <div class="details-body">

                    <div class="detail-row">
                        <div class="detail-label">
                            Booking Reference
                        </div>

                        <div class="detail-value">
                            #BRD-20482
                        </div>
                    </div>

                    <div class="detail-row">
                        <div class="detail-label">
                            Service
                        </div>

                        <div class="detail-value">
                            BOHO BOB - SMEDIUM
                        </div>
                    </div>

                    <div class="detail-row">
                        <div class="detail-label">
                            Appointment Date
                        </div>

                        <div class="detail-value">
                            Friday, May 15 2026
                        </div>
                    </div>

                    <div class="detail-row">
                        <div class="detail-label">
                            Appointment Time
                        </div>

                        <div class="detail-value">
                            10:30 AM
                        </div>
                    </div>

                    <div class="detail-row">
                        <div class="detail-label">
                            Deposit Paid
                        </div>

                        <div class="detail-value">
                            CA$102.00
                        </div>
                    </div>

                    <div class="detail-row">
                        <div class="detail-label">
                            Remaining Balance
                        </div>

                        <div class="detail-value">
                            CA$238.00
                        </div>
                    </div>

                </div>

            </div>

            <div class="notice-box">

                <div class="notice-title">
                    Important Appointment Reminders
                </div>

                <ul class="notice-list">

                    <li>
                        Kindly arrive at least 10 minutes before your appointment.
                    </li>

                    <li>
                        Please come with your hair washed, detangled and properly blown out.
                    </li>

                    <li>
                        No extra guests or kids are allowed during appointments.
                    </li>

                    <li>
                        Appointments cancelled late or missed will forfeit the deposit.
                    </li>

                    <li>
                        Remaining balance is due on the appointment day.
                    </li>

                </ul>

            </div>

          <div class="d-flex flex-wrap gap-3 align-items-center">

    <a 
        href="#" 
        class="action-btn secondary-btn text-decoration-none d-inline-flex align-items-center justify-content-center"
    >
        Back To Homepage

    </a>

</div>

        </div>

    </div>
</section>

@endsection