@extends('includes.layout') <!-- Extend the layout -->

@section('content') <!-- Define the content section -->
<div class="bg-main-body">
    <div class="container-xl">
    <div class="row py-5  ">
        <div class="col-md-12">
            <div class="bg-white p-3 rounded w-100">
                <div class="row align-items-center">
                <div class="col-md-7">
                    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                            <img src="assets/images/saloon.png" class="d-block w-100 rounded" alt="...">
                            </div>
                            <div class="carousel-item">
                            <img src="assets/images/saloon.png" class="d-block w-100 rounded" alt="...">
                            </div>
                            <div class="carousel-item">
                            <img src="assets/images/saloon.png" class="d-block w-100 rounded" alt="...">
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
                            data-bs-slide="prev">
                        <span class="carousel-control-prev-icon bg-dark  bottom-0" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
                            data-bs-slide="next">
                        <span class="carousel-control-next-icon bg-dark" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
                <div class="col-md-5 ">
                    <div class="col-md-12 ">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                            <div class="stars">
                                <form action="">
                                    <input class="star star-5" id="star-5" type="radio" name="star">
                                    <label class="star star-5" for="star-5"></label>
                                    <input class="star star-4" id="star-4" type="radio" name="star">
                                    <label class="star star-4" for="star-4"></label>
                                    <input class="star star-3" id="star-3" type="radio" name="star">
                                    <label class="star star-3" for="star-3"></label>
                                    <input class="star star-2" id="star-2" type="radio" name="star">
                                    <label class="star star-2" for="star-2"></label>
                                    <input class="star star-1" id="star-1" type="radio" name="star">
                                    <label class="star star-1" for="star-1"></label>
                                </form>
                            </div>
                            </div>
                            <div class="col-md-4 text-end">
                            <span id="heart" class="whish-2  top-0 end-0 p-1 bg-pink-heart rounded-circle"><i
                                class="fa fa-heart-o tx-14" aria-hidden="true"></i> </span>
                            </div>
                        </div>
                    </div>
                    <h2 class="py-4">Style Unisex Salon</h2>
                    <p class="pb-3 tx-13">First Floor, Shop No. 39 40 Market, B Block, Gardenia Glory, Sector 46,
                        Noida, Uttar Pradesh 201303
                    </p>
                    <div class="ms-2 d-flex align-items-center gap-3 border-bottom w-75 pb-3 text-dim tx-12"><i class="fa fa-location-arrow text-dim" aria-hidden="true"></i>See Directions</div>
                    <div class="ms-2 d-flex align-items-center gap-3 mt-3 text-dim tx-12"><i class="fa fa-location-arrow text-dim" aria-hidden="true"></i>Unisex</div>
                    <div class="ms-2 d-flex align-items-center gap-3 mt-2 text-dim tx-12"><i class="fa fa-location-arrow text-dim" aria-hidden="true"></i>SMon-Sun | 10:00 am - 8:00 pm</div>
                    <div class="row mt-4">
                        <div class="col-xl-4 col-lg-6 mb-1">
                            <div class="pink  px-3 bg-light rounded d-flex">
                            <a class="mt-3">
                            <img src="assets/images/happy.png" alt="" class="img-fluid  w-75">
                            </a>
                            <div class="ptag">
                                <h6 class="card-title mb-0 mt-3">24,000+</h6>
                                <p class="text-dim tx-10">Happy Clients</p>
                            </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 mb-1">
                            <div class=" d-flex bg-light  rounded px-3">
                            <a class="mt-3">
                            <img src="assets/images/review.png" class="img-fluid w-75">
                            </a>
                            <div class="ptag">
                                <h6 class="card-title mb-0  mt-3">4.5</h6>
                                <p class="text-dim tx-10">(364 Reviews)</p>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <!-- nav-section-start here -->
            <div class="row pt-3 ">
                <div class="col-md-12">
                <div class="rounded w-100">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card border-0 ">
                            <div class="card-body ">
                                <!-- Tabs content -->
                                <div class="accordion accordion-flush " id="accordionFlushExample">
                                    <div class="accordion-item  bg-light  mb-1 border">
                                        <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush2" aria-expanded="false" aria-controls="flush-collapseOne">
                                        <span class="col-md-7 fw-bold tx-13">Haircut</span>  
                                        </div>
                                        <div id="flush2" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body  p-0">
                                            <ul class="list-group list-group-flush">
                                                <div class="my-2">
                                                    <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                                    <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                                                </div>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="headshave">
                                                    <label class="form-check-label tx-12" for="headshave">
                                                    Head Shave
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹251</span>
                                                </li>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="mundan">
                                                    <label class="form-check-label tx-12" for="mundan">
                                                    Mundan (Below 7 years)
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹451</span>
                                                </li>
                                            </ul>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item  bg-light  mb-1 border-0">
                                        <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                        <span class="col-md-7 fw-bold tx-13">Hair Color</span>  
                                        </div>
                                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                        <div class="accordion-body  p-0">
                                            <ul class="list-group list-group-flush">
                                                <div class="my-2">
                                                    <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                                    <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                                                </div>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="headshave">
                                                    <label class="form-check-label tx-12" for="headshave">
                                                    Head Shave
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹251</span>
                                                </li>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="mundan">
                                                    <label class="form-check-label tx-12" for="mundan">
                                                    Mundan (Below 7 years)
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹451</span>
                                                </li>
                                            </ul>
                                        </div>
                                        </div>
                                    </div>
                                    <!-- collapse -->
                                    <div class="accordion-item  bg-light  mb-1 border-0">
                                        <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseO" aria-expanded="false" aria-controls="flush-collapseOne">
                                        <span class="col-md-7 fw-bold tx-13">Beard</span>  
                                        </div>
                                        <div id="flush-collapseO" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                        <div class="accordion-body  p-0">
                                            <ul class="list-group list-group-flush">
                                                <div class="my-2">
                                                    <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                                    <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                                                </div>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="headshave">
                                                    <label class="form-check-label tx-12" for="headshave">
                                                    Head Shave
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹251</span>
                                                </li>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="mundan">
                                                    <label class="form-check-label tx-12" for="mundan">
                                                    Mundan (Below 7 years)
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹451</span>
                                                </li>
                                            </ul>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item  bg-light  mb-1 border-0">
                                        <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapsen" aria-expanded="false" aria-controls="flush-collapseOne">
                                        <span class="col-md-7 fw-bold tx-13">Facial/Clean Up</span>
                                        </div>
                                        <div id="flush-collapsen" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                        <div class="accordion-body  p-0">
                                            <ul class="list-group list-group-flush">
                                                <div class="my-2">
                                                    <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                                    <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                                                </div>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="headshave">
                                                    <label class="form-check-label tx-12" for="headshave">
                                                    Head Shave
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹251</span>
                                                </li>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="mundan">
                                                    <label class="form-check-label tx-12" for="mundan">
                                                    Mundan (Below 7 years)
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹451</span>
                                                </li>
                                            </ul>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item  bg-light  mb-1 border-0">
                                        <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapsee" aria-expanded="false" aria-controls="flush-collapseOne">
                                        <span class="col-md-7 fw-bold tx-13">Groom Packages</span>
                                        </div>
                                        <div id="flush-collapsee" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                        <div class="accordion-body  p-0">
                                            <ul class="list-group list-group-flush">
                                                <div class="my-2">
                                                    <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                                    <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                                                </div>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="headshave">
                                                    <label class="form-check-label tx-12" for="headshave">
                                                    Head Shave
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹251</span>
                                                </li>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="mundan">
                                                    <label class="form-check-label tx-12" for="mundan">
                                                    Mundan (Below 7 years)
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹451</span>
                                                </li>
                                            </ul>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item  bg-light  mb-1 border-0">
                                        <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapse1" aria-expanded="false" aria-controls="flush-collapseOne">
                                        <span class="col-md-7 fw-bold  tx-13">Packages</span> 
                                        </div>
                                        <div id="flush-collapse1" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                        <div class="accordion-body  p-0">
                                            <ul class="list-group list-group-flush">
                                                <div class="my-2">
                                                    <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                                    <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                                                </div>
                                                <li class="list-group-item border-dashed tx-14">
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="headshave">
                                                    <label class="form-check-label tx-12" for="headshave">
                                                    Head Shave
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹251</span>
                                                </li>
                                                <li class="list-group-item border-dashed tx-14">
                                                    <span class="form-check d-inline-block">
                                                    <input class="form-check-input" type="checkbox" value="" id="mundan">
                                                    <label class="form-check-label tx-12" for="mundan">
                                                    Mundan (Below 7 years)
                                                    </label>
                                                    </span>
                                                    <span class="float-end fw-bold tx-12">₹451</span>
                                                </li>
                                            </ul>
                                        </div>
                                        </div>
                                    </div>
                                    <!-- collapse -->
                                </div>
                                <!-- Tabs content -->
                            </div>
                            </div>
                        </div>
                        <div class="col-md-6 ">
                            <div class="card border-0">
                            <div class="card-body p-3">
                                <div class="row gx-2">
                                    <p>__ Photos</p>
                                    <div class="col-md-3 mb-2">
                                        <a class="example-image-link" href="assets/images/gallery1.png" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image img-fluid hifix" src="assets/images/gallery1.png" alt=""></a>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <a class="example-image-link" href="assets/images/cuting_gallery.png" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image img-fluid" src="assets/images/cuting_gallery.png" alt=""></a>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <a class="example-image-link" href="assets/images/glow.png"" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image img-fluid" src="assets/images/glow.png" alt=""></a>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <a class="example-image-link" href="assets/images/gallery1.png" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image img-fluid" src="assets/images/gallery1.png" alt=""></a>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <a class="example-image-link" href="assets/images/glow.png" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image img-fluid hifix" src="assets/images/glow.png" alt=""></a>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <a class="example-image-link" href="assets/images/galley3.png" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image img-fluid" src="assets/images/galley3.png" alt=""></a>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <a class="example-image-link" href="assets/images/cuting_gallery.png" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image img-fluid" src="assets/images/cuting_gallery.png" alt=""></a>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <a class="example-image-link" href="assets/images/galley3.png" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image img-fluid" src="assets/images/galley3.png" alt=""></a>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="row pt-3 ">
                <div class="col-md-12">
                <div class="rounded w-100">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card border-0 ">
                            <div class="card-body ">
                                <div class="border-bottom  p-3">
                                    <h6 class="tx-27">Review</h6>
                                    <div class="stars">
                                        <form action="" class="d-flex gap-2">
                                        <input class="star star-o" id="star-o" type="radio" name="star">
                                        <label class="star star-o" for="star-o"></label>
                                        <h2 class="text-theme">4.0</h2>
                                        <div class="">
                                            <p class="py-2 text-dim">out of 5</p>
                                        </div>
                                        </form>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 border-end">
                                        <p class="text-dim tx-13">Great service, polite staff and amazing ambience.</p>
                                        <h6 class="card-title">RR Looks Unisex Salon</h6>
                                        <div class="">
                                            <div class="stars me-2 d-flex gap-3  align-items-center ">
                                                <form action="" class="">
                                                    <input class="star star-p" id="star-p" type="radio" name="star">
                                                    <label class="star star-p tx-15" for="star-p"></label>
                                                    <input class="star star-q" id="star-q" type="radio" name="star">
                                                    <label class="star star-q tx-15" for="star-q"></label>
                                                    <input class="star star-r" id="star-r" type="radio" name="star">
                                                    <label class="star star-r tx-15" for="star-r"></label>
                                                    <input class="star star-s" id="star-s" type="radio" name="star">
                                                    <label class="star star-s tx-15" for="star-s"></label>
                                                    <input class="star star-t" id="star-t" type="radio" name="star">
                                                    <label class="star star-t tx-15" for="star-t"></label>
                                                </form>
                                                <div class="">
                                                    <p class="tx-12 mb-0">4</p>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="col-md-6">
                                        <p class="text-dim tx-13">Great service, polite staff and amazing ambience.</p>
                                        <h6 class="card-title">Mona Lott</h6>
                                        <div class="">
                                            <div class="stars me-2 d-flex gap-3  align-items-center ">
                                                <form action="" class="">
                                                    <input class="star star-6" id="star-6" type="radio" name="star">
                                                    <label class="star star-6 tx-15" for="star-6"></label>
                                                    <input class="star star-7" id="star-7" type="radio" name="star">
                                                    <label class="star star-7 tx-15" for="star-7"></label>
                                                    <input class="star star-8" id="star-8" type="radio" name="star">
                                                    <label class="star star-8 tx-15" for="star-8"></label>
                                                    <input class="star star-9" id="star-9" type="radio" name="star">
                                                    <label class="star star-9 tx-15" for="star-9"></label>
                                                    <input class="star star-10" id="star-10" type="radio" name="star">
                                                    <label class="star star-10 tx-15" for="star-10"></label>
                                                </form>
                                                <div class="">
                                                    <p class="tx-12 mb-0">4</p>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <!-- nav-section end here -->
    </div>
</div>
@endsection