@extends('layouts.welcome')

@section('content')
<section class="confirm-page">
    <div class="container">

        <form action="#" method="POST">

            <div class="confirm-card">

                <div class="row g-3">

                    <div class="col-lg-5">

                        <div class="summary-image">
                            <img src="{{ asset('assets/images/wig1.webp') }}" alt="">
                        </div>

                    </div>

                    <div class="col-lg-7">

                        <div class="page-kicker">
                            Booking Summary
                        </div>

                        <h1 class="page-title">
                            Confirm Your Appointment
                        </h1>

                        <p class="page-subtitle">
                            Review your appointment details below before making
                            your deposit payment to secure your booking.
                        </p>

                        <div class="summary-box">

                            <div class="summary-head">
                                Appointment Details
                            </div>

                            <div class="summary-body">

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

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

                                <div class="summary-row">
                                    <div class="summary-label">
                                        Category
                                    </div>

                                    <div class="summary-value">
                                        BOHO BRAIDS - SDD HUMAN HAIR
                                    </div>
                                </div>

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

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

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

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

                                <div class="summary-row">
                                    <div class="summary-label">
                                        Duration
                                    </div>

                                    <div class="summary-value">
                                        4 Hours 30 Minutes
                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class="mb-4">

                            <h4 class="fw-bold mb-3">
                                Selected Add Ons
                            </h4>

                            <div class="addon-item">
                                <div class="addon-name">
                                    50g extra human hair curls
                                </div>

                                <div class="addon-price">
                                    + CA$60
                                </div>
                            </div>

                            <div class="addon-item">
                                <div class="addon-name">
                                    Flip over fulani
                                </div>

                                <div class="addon-price">
                                    Included
                                </div>
                            </div>

                        </div>

                        <div class="payment-box">

                            <div class="payment-title">
                                Deposit Payment
                            </div>

                            <div class="payment-row">
                                <div class="payment-label">
                                    Appointment Total
                                </div>

                                <div class="payment-value">
                                    CA$340.00
                                </div>
                            </div>

                            <div class="payment-row">
                                <div class="payment-label">
                                    Required Deposit (30%)
                                </div>

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

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

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

                        </div>

                        <div class="row g-3 mb-4">

                            <div class="col-md-6">

                                <label class="form-label">
                                    Full Name
                                </label>

                                <input
                                    type="text"
                                    class="form-control"
                                    placeholder="Enter your full name"
                                >

                            </div>

                            <div class="col-md-6">

                                <label class="form-label">
                                    Phone Number
                                </label>

                                <input
                                    type="tel"
                                    class="form-control"
                                    placeholder="Enter your phone number"
                                >

                            </div>

                            <div class="col-12">

                                <label class="form-label">
                                    Extra Notes
                                </label>

                                <textarea
                                    class="form-control"
                                    placeholder="Anything we should know before your appointment?"
                                ></textarea>

                            </div>

                        </div>

                        <div class="row g-3">

                            <div class="col-md-6">

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

    </a>

                            </div>

                            <div class="col-md-6">

                                <button type="submit" class="pay-btn">
                                    Pay Deposit & Confirm
                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </form>

    </div>
</section>

@endsection