@extends('layouts.welcome')

@section('content')


<section class="appointment-page">
    <div class="container">
        <div class="text-center mb-5">
            <h1 class="fw-bold mb-3">Select A Appointment</h1>
            <p class="text-muted">
                Choose the hairstyle appointment you want to book.
            </p>
        </div>
        <div class="appointment-wrapper">

            <h2 class="service-category">
                BOHO BRAIDS- SDD HUMAN HAIR
            </h2>
            <div class="appointment-card">
                <div class="appointment-body">
                    <div class="row g-3 align-items-start">
                        <div class="col-lg-9 order-1 order-lg-2">

                            <div class="appointment-top">

                                <div>
                                    <h3 class="appointment-title">
                                        BOHO BOB – SMEDIUM
                                    </h3>

                                    <div class="appointment-meta">
                                        4 hours 30 minutes @ CA$280.00
                                    </div>
                                </div>

                                <a href="{{ route('booking.date.time')}}" class="select-btn">
                                    Select
                                </a>

                            </div>

                            <div class="description-wrapper collapsed" id="descriptionBox">

                                <ul class="appointment-description">
                                    <li>Natural hair must be at least 4 inches long.</li>
                                    <li>The boho is 100% SDD human hair (50g).</li>
                                    <li>The braiding hair is done with synthetic hair.</li>
                                    <li>The ends of the hair will be curled and dipped in hot water.</li>
                                    <li>12 rows across the hairline.</li>
                                    <li>Shoulder/armpit length.</li>
                                    <li>Comes with styling and finishing.</li>
                                    <li>Please arrive with washed hair.</li>
                                </ul>

                            </div>
                            <span class="show-more" id="toggleDescription">
                                Show More
                            </span>

                        </div>
                        <div class="col-lg-3 order-2 order-lg-1">
                            <img 
                                src="{{ asset('assets/images/wig1.webp') }}" 
                                alt="Boho Braids"
                                class="service-image"
                            />
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
</section>

<script>

    const toggleBtn = document.getElementById('toggleDescription');
    const descriptionBox = document.getElementById('descriptionBox');

    toggleBtn.addEventListener('click', function () {

        descriptionBox.classList.toggle('collapsed');

        if(descriptionBox.classList.contains('collapsed')){
            toggleBtn.innerText = 'Show More';
        }else{
            toggleBtn.innerText = 'Show Less';
        }

    });

</script>

@endsection