@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-9">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <div class="bg-white rounded  ">
                            <div class="border-bottom p-3">
                                <h6 class="pt-2 pb-2 ">Filter</h6>
                                <input type="checkbox" class="btn-check" id="btn1" autocomplete="off">
                                <label class="btn btn-outline-theme mb-2" for="btn1">Haircut</label>
                                <input type="checkbox" class="btn-check" id="btn2" autocomplete="off">
                                <label class="btn btn-outline-theme mb-2" for="btn2">Hair Color</label>
                                <input type="checkbox" class="btn-check" id="btn3" autocomplete="off">
                                <label class="btn btn-outline-theme mb-2" for="btn3">Hair</label>
                            </div>
                            <div class="border-bottom p-3">
                                <h6 class="pt-2 pb-2 ">Gender</h6>
                                <div class="form-check ps-0">
                                    <input class="form-check-input float-end" type="checkbox" value="" id="male">
                                    <label class="form-check-label  text-start  tx-14 " for="male">
                                        Male
                                    </label>
                                </div>
                                <div class="form-check ps-0">
                                    <input class="form-check-input float-end" type="checkbox" value="" id="female">
                                    <label class="form-check-label text-start  tx-14 " for="female">
                                        Female
                                    </label>
                                </div>
                            </div>
                            <div class="border-bottom  p-3">
                                <h6 class="pt-2 pb-2 ">Rating</h6>
                                <div class="stars">
                                    <form action="">
                                        <input class="star star-k" id="star-k" type="radio" name="star" />
                                        <label class="star star-k" for="star-k"></label>
                                        <input class="star star-a" id="star-a" type="radio" name="star" />
                                        <label class="star star-a" for="star-a"></label>
                                        <input class="star star-j" id="star-j" type="radio" name="star" />
                                        <label class="star star-j" for="star-j"></label>
                                        <input class="star star-l" id="star-l" type="radio" name="star" />
                                        <label class="star star-l" for="star-l"></label>
                                        <input class="star star-j" id="star-j" type="radio" name="star" />
                                        <label class="star star-j" for="star-j"></label>
                                    </form>
                                </div>
                            </div>
                            <div class="border-bottom p-3">
                                <h6 class="pt-2 pb-2 ">Price Range</h6>
                                <div class="input-group border-0 mb-3">
                                    <input type="number" value="100" class="form-control bg-light tx-14" placeholder="Username" aria-label="Username">
                                    <span class="input-group-text bg-white">-</span>
                                    <input type="number" value="7000" class="form-control bg-light tx-14" placeholder="Server" aria-label="Server">
                                </div>
                            </div>
                            <div class=" p-3">
                                <h6 class="pt-2 pb-2 ">Discount</h6>
                                <div class="form-check ps-0">
                                    <input class="form-check-input float-end" type="checkbox" value="" id="10">
                                    <label class="form-check-label  text-start  tx-14 " for="10">
                                        Up to 10% off
                                    </label>
                                </div>
                                <div class="form-check ps-0">
                                    <input class="form-check-input float-end" type="checkbox" value="" id="20">
                                    <label class="form-check-label text-start  tx-14 " for="20">
                                        Up to 20% off
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="row">
                            <!-- card-one start here -->
                            <div class="col-md-4 mb-3">
                                <a class="text-dark text-decoration-none" href="/website/saloon/view.html">
                                    <div class="card shadow-sm border-0">
                                        <div class="">
                                            <div class="images-card">
                                                <img src="assets/images/rr.png" class="card-img-top" alt="..." />
                                            </div>
                                        </div>
                                        <div class="card-body p-3">
                                            <h6 class="card-title">RR Looks Unisex Salon</h6>
                                            <div class="d-flex  align-items-center  justify-content-between">
                                                <div class="stars me-2">
                                                    <form action="">
                                                        <input class="star star-69" id="star-69" type="radio" name="star" />
                                                        <label class="star star-69 tx-15" for="star-69"></label>
                                                        <input class="star star-79" id="star-79" type="radio" name="star" />
                                                        <label class="star star-79 tx-15" for="star-79"></label>
                                                        <input class="star star-89" id="star-89" type="radio" name="star" />
                                                        <label class="star star-89 tx-15" for="star-89"></label>
                                                        <input class="star star-99" id="star-99" type="radio" name="star" />
                                                        <label class="star star-99 tx-15" for="star-99"></label>
                                                        <input class="star star-109" id="star-109" type="radio" name="star" />
                                                        <label class="star star-100 tx-15" for="star-109"></label>
                                                        <p class="text-dim tx-12 mb-0">(364 Reviews)</p>
                                                    </form>
                                                </div>
                                                <span id="heart" class="whish-2 text-end top-0 end-0 p-1 m-2 bg-pink-heart rounded-circle"><i class="fa fa-heart-o tx-14" aria-hidden="true"></i> </span>
                                            </div>
                                        </div>
                                        <div class="card-footer bg-white d-flex px-3">
                                            <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                                            <div class="tx-13 ms-2"><i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- card-section close here -->
                            <!-- card-two start here -->
                            <div class="col-md-4 mb-3">
                                <a class="text-dark text-decoration-none" href="">
                                    <div class="card shadow-sm border-0">
                                        <div class="">
                                            <div class="images-card">
                                                <img src="assets/images/kalon-2.png" class="card-img-top" alt="..." />
                                            </div>
                                        </div>
                                        <div class="card-body p-3">
                                            <h6 class="card-title">Kalon Unisex Salon</h6>
                                            <div class="d-flex  align-items-center  justify-content-between">
                                                <div class="stars me-2">
                                                    <form action="">
                                                        <input class="star star-62" id="star-62" type="radio" name="star" />
                                                        <label class="star star-62 tx-15" for="star-62"></label>
                                                        <input class="star star-72" id="star-72" type="radio" name="star" />
                                                        <label class="star star-72 tx-15" for="star-72"></label>
                                                        <input class="star star-82" id="star-82" type="radio" name="star" />
                                                        <label class="star star-82 tx-15" for="star-82"></label>
                                                        <input class="star star-92" id="star-92" type="radio" name="star" />
                                                        <label class="star star-92 tx-15" for="star-92"></label>
                                                        <input class="star star-102" id="star-102" type="radio" name="star" />
                                                        <label class="star star-102 tx-15" for="star-102"></label>
                                                    </form>
                                                    <p class="text-dim tx-12 mb-0">(364 Reviews)</p>
                                                </div>
                                                <span id="heart" class="whish-2 text-end top-0 end-0 p-1 m-2 bg-pink-heart rounded-circle"><i class="fa fa-heart-o tx-14" aria-hidden="true"></i> </span>
                                            </div>
                                        </div>
                                        <div class="card-footer bg-white d-flex px-3">
                                            <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                                            <div class="tx-13 ms-2"><i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- card-two close here -->
                            <!-- card-three start here -->
                            <div class="col-md-4 mb-3">
                                <div class="card shadow-sm border-0">
                                    <div class="">
                                        <div class="images-card">
                                            <img src="assets/images/vaila-3.png " class="card-img-top" alt="..." />
                                        </div>
                                    </div>
                                    <div class="card-body p-3">
                                        <h6 class="card-title">Voila Unisex Salon</h6>
                                        <div class="d-flex  align-items-center  justify-content-between">
                                            <div class="stars me-2">
                                                <form action="">
                                                    <input class="star star-63" id="star-63" type="radio" name="star" />
                                                    <label class="star star-63 tx-15" for="star-63"></label>
                                                    <input class="star star-73" id="star-73" type="radio" name="star" />
                                                    <label class="star star-73 tx-15" for="star-73"></label>
                                                    <input class="star star-83" id="star-83" type="radio" name="star" />
                                                    <label class="star star-83 tx-15" for="star-83"></label>
                                                    <input class="star star-93" id="star-93" type="radio" name="star" />
                                                    <label class="star star-93 tx-15" for="star-93"></label>
                                                    <input class="star star-103" id="star-103" type="radio" name="star" />
                                                    <label class="star star-103 tx-15" for="star-103"></label>
                                                    <p class="text-dim tx-12 mb-0">(364 Reviews)</p>
                                                </form>
                                            </div>
                                            <span id="heart" class="whish-2 text-end top-0 end-0 p-1 m-2 bg-pink-heart rounded-circle"><i class="fa fa-heart-o tx-14" aria-hidden="true"></i> </span>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white d-flex px-3">
                                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                                        <div class="tx-13 ms-2"><i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m</div>
                                    </div>
                                </div>
                            </div>
                            <!-- card-three close here -->
                            <!-- card-four start here -->
                            <div class="col-md-4 mb-3">
                                <div class="card shadow-sm border-0">
                                    <div class="">
                                        <div class="images-card">
                                            <img src="assets/images/Rectangle 4.png" class="card-img-top" alt="..." />
                                        </div>
                                    </div>
                                    <div class="card-body p-3">
                                        <h6 class="card-title">Hair Sage Luxury Salon</h6>
                                        <div class="d-flex  align-items-center  justify-content-between">
                                            <div class="stars me-2">
                                                <form action="">
                                                    <input class="star star-64" id="star-64" type="radio" name="star" />
                                                    <label class="star star-64 tx-15" for="star-64"></label>
                                                    <input class="star star-74" id="star-74" type="radio" name="star" />
                                                    <label class="star star-74 tx-15" for="star-74"></label>
                                                    <input class="star star-84" id="star-84" type="radio" name="star" />
                                                    <label class="star star-84 tx-15" for="star-84"></label>
                                                    <input class="star star-94" id="star-94" type="radio" name="star" />
                                                    <label class="star star-94 tx-15" for="star-94"></label>
                                                    <input class="star star-104" id="star-104" type="radio" name="star" />
                                                    <label class="star star-104 tx-15" for="star-104"></label>
                                                    <p class="text-dim tx-12 mb-0">(364 Reviews)</p>
                                                </form>
                                            </div>
                                            <span id="heart" class="whish-2 text-end top-0 end-0 p-1 m-2 bg-pink-heart rounded-circle"><i class="fa fa-heart-o tx-14" aria-hidden="true"></i> </span>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white d-flex px-3">
                                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                                        <div class="tx-13 ms-2"><i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m</div>
                                    </div>
                                </div>
                            </div>
                            <!-- card-section close here -->
                            <!-- card-one start here -->
                            <div class="col-md-4 mb-3">
                                <div class="card shadow-sm border-0">
                                    <div class="">
                                        <div class="images-card">
                                            <img src="assets/images/rr_loks.png" class="card-img-top" alt="..." />
                                        </div>
                                    </div>
                                    <div class="card-body p-3">
                                        <h6 class="card-title">RR Looks Unisex Salon</h6>
                                        <div class="d-flex  align-items-center  justify-content-between">
                                            <div class="stars me-2">
                                                <form action="">
                                                    <input class="star star-65" id="star-65" type="radio" name="star" />
                                                    <label class="star star-65 tx-15" for="star-65"></label>
                                                    <input class="star star-75" id="star-75" type="radio" name="star" />
                                                    <label class="star star-75 tx-15" for="star-75"></label>
                                                    <input class="star star-85" id="star-85" type="radio" name="star" />
                                                    <label class="star star-85 tx-15" for="star-85"></label>
                                                    <input class="star star-95" id="star-95" type="radio" name="star" />
                                                    <label class="star star-95 tx-15" for="star-95"></label>
                                                    <input class="star star-105" id="star-105" type="radio" name="star" />
                                                    <label class="star star-105 tx-15" for="star-105"></label>
                                                    <p class="text-dim tx-12 mb-0">(364 Reviews)</p>
                                                </form>
                                            </div>
                                            <span id="heart" class="whish-2 text-end top-0 end-0 p-1 m-2 bg-pink-heart rounded-circle"><i class="fa fa-heart-o tx-14" aria-hidden="true"></i> </span>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white d-flex px-3">
                                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                                        <div class="tx-13 ms-2"><i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m</div>
                                    </div>
                                </div>
                            </div>
                            <!-- card-section close here -->
                            <!-- card-one start here -->
                            <div class="col-md-4 mb-3">
                                <div class="card shadow-sm border-0">
                                    <div class="">
                                        <div class="images-card">
                                            <img src="assets/images/Rectangle6.png" class="card-img-top" alt="..." />
                                        </div>
                                    </div>
                                    <div class="card-body p-3">
                                        <h6 class="card-title">H & S Salon</h6>
                                        <div class="d-flex  align-items-center  justify-content-between">
                                            <div class="stars me-2">
                                                <form action="">
                                                    <input class="star star-66" id="star-66" type="radio" name="star" />
                                                    <label class="star star-66 tx-15" for="star-66"></label>
                                                    <input class="star star-76" id="star-76" type="radio" name="star" />
                                                    <label class="star star-76 tx-15" for="star-76"></label>
                                                    <input class="star star-86" id="star-86" type="radio" name="star" />
                                                    <label class="star star-86 tx-15" for="star-86"></label>
                                                    <input class="star star-96" id="star-96" type="radio" name="star" />
                                                    <label class="star star-96 tx-15" for="star-96"></label>
                                                    <input class="star star-106" id="star-106" type="radio" name="star" />
                                                    <label class="star star-106 tx-15" for="star-106"></label>
                                                    <p class="text-dim tx-12 mb-0">(364 Reviews)</p>
                                                </form>
                                            </div>
                                            <span id="heart" class="whish-2 text-end top-0 end-0 p-1 m-2 bg-pink-heart rounded-circle"><i class="fa fa-heart-o tx-14" aria-hidden="true"></i> </span>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white d-flex px-3">
                                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                                        <div class="tx-13 ms-2"><i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m</div>
                                    </div>
                                </div>
                            </div>
                            <!-- card-section close here -->
                            <!-- card-last section start here -->
                            <div class="col-md-4 mb-3">
                                <div class="card shadow-sm border-0">
                                    <div class="">
                                        <div class="images-card">
                                            <img src="assets/images/the-blunt.png" class="card-img-top" alt="..." />
                                        </div>
                                    </div>
                                    <div class="card-body p-3">
                                        <h6 class="card-title">The Blunt Unisex Salon</h6>
                                        <div class="d-flex  align-items-center  justify-content-between">
                                            <div class="stars me-2">
                                                <form action="">
                                                    <input class="star star-67" id="star-67" type="radio" name="star" />
                                                    <label class="star star-67 tx-15" for="star-67"></label>
                                                    <input class="star star-77" id="star-77" type="radio" name="star" />
                                                    <label class="star star-77 tx-15" for="star-77"></label>
                                                    <input class="star star-87" id="star-87" type="radio" name="star" />
                                                    <label class="star star-87 tx-15" for="star-87"></label>
                                                    <input class="star star-97" id="star-97" type="radio" name="star" />
                                                    <label class="star star-97 tx-15" for="star-97"></label>
                                                    <input class="star star-107" id="star-107" type="radio" name="star" />
                                                    <label class="star star-107 tx-15" for="star-107"></label>
                                                    <p class="text-dim tx-12 mb-0">(364 Reviews)</p>
                                                </form>
                                            </div>
                                            <span id="heart" class="whish-2 text-end top-0 end-0 p-1 m-2 bg-pink-heart rounded-circle"><i class="fa fa-heart-o tx-14" aria-hidden="true"></i> </span>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white d-flex px-3">
                                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                                        <div class="tx-13 ms-2"><i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m</div>
                                    </div>
                                </div>
                            </div>
                            <!-- card-section close here -->
                            <!-- card-one start here -->
                            <div class="col-md-4 mb-3">
                                <div class="card shadow-sm border-0">
                                    <div class="">
                                        <div class="images-card">
                                            <img src="assets/images/vaila-3.png" class="card-img-top" alt="..." />
                                        </div>
                                    </div>
                                    <div class="card-body p-3">
                                        <h6 class="card-title">JR Unisex Salon</h6>
                                        <div class="d-flex  align-items-center  justify-content-between">
                                            <div class="stars me-2">
                                                <form action="">
                                                    <input class="star star-68" id="star-6" type="radio" name="star" />
                                                    <label class="star star-68 tx-15" for="star-6"></label>
                                                    <input class="star star-78" id="star-7" type="radio" name="star" />
                                                    <label class="star star-78 tx-15" for="star-7"></label>
                                                    <input class="star star-88" id="star-8" type="radio" name="star" />
                                                    <label class="star star-88 tx-15" for="star-8"></label>
                                                    <input class="star star-98" id="star-9" type="radio" name="star" />
                                                    <label class="star star-98 tx-15" for="star-9"></label>
                                                    <input class="star star-108" id="star-10" type="radio" name="star" />
                                                    <label class="star star-108 tx-15" for="star-10"></label>
                                                    <p class="text-dim tx-12 mb-0">(364 Reviews)</p>
                                                </form>
                                            </div>
                                            <span id="heart" class="whish-2 text-end top-0 end-0 p-1 m-2 bg-pink-heart rounded-circle"><i class="fa fa-heart-o tx-14" aria-hidden="true"></i> </span>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white d-flex px-3">
                                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                                        <div class="tx-13 ms-2"><i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m</div>
                                    </div>
                                </div>
                            </div>
                            <!-- card-section close here -->
                            <!-- card-one start here -->
                            <div class="col-md-4 mb-3">
                                <div class="card shadow-sm border-0">
                                    <div class="">
                                        <div class="images-card">
                                            <img src="assets/images/Rectangle 9.png" class="card-img-top" alt="..." />
                                        </div>
                                    </div>
                                    <div class="card-body p-3">
                                        <h6 class="card-title">Razors Unisex Salon</h6>
                                        <div class="d-flex  align-items-center  justify-content-between">
                                            <div class="stars me-2">
                                                <form action="">
                                                    <input class="star star-61" id="star-61" type="radio" name="star" />
                                                    <label class="star star-61 tx-15" for="star-61"></label>
                                                    <input class="star star-71" id="star-71" type="radio" name="star" />
                                                    <label class="star star-71 tx-15" for="star-71"></label>
                                                    <input class="star star-81" id="star-81" type="radio" name="star" />
                                                    <label class="star star-81 tx-15" for="star-81"></label>
                                                    <input class="star star-91" id="star-91" type="radio" name="star" />
                                                    <label class="star star-91 tx-15" for="star-91"></label>
                                                    <input class="star star-11" id="star-11" type="radio" name="star" />
                                                    <label class="star star-13 tx-15" for="star-13"></label>
                                                    <p class="text-dim tx-12 mb-0">(364 Reviews)</p>
                                                </form>
                                            </div>
                                            <span id="heart" class="whish-2 text-end top-0 end-0 p-1 m-2 bg-pink-heart rounded-circle"><i class="fa fa-heart-o tx-14" aria-hidden="true"></i> </span>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white d-flex px-3">
                                        <p class="location tx-13 text-dim mb-0">Sec70, Mohali</p>
                                        <div class="tx-13 ms-2"><i class="fa fa-location-arrow" aria-hidden="true"></i> 472.7 m</div>
                                    </div>
                                </div>
                            </div>
                            <!-- card-end close here -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="bg-white p-3">
                    <section class="HoverVideo">
                        <div class="HoverVideo__wrapper">
                            <div class="HoverVideo__videoBox mb-3 rounded position-relative">
                                <video class="video" loop preload="yes" muted>
                                    <source src="https://assets.mixkit.co/videos/1704/1704-720.mp4" type="video/mp4">
                                </video>
                                <span class="position-absolute bottom-0 end-0 p-2 shadow-1">
                                    <h6 class="text-theme mb-0">The Belle Salon</h6>
                                    <p class="tx-11 text-white mb-0">Sector 125, Sunny Enclave, Kharar,
                                        Punjab Region 140301
                                    </p>
                                </span>
                            </div>
                            <div class="HoverVideo__videoBox mb-3 rounded position-relative">
                                <video class="video" loop preload="yes" muted>
                                    <source src="https://assets.mixkit.co/videos/1704/1704-720.mp4" type="video/mp4">
                                </video>
                                <span class="position-absolute bottom-0 end-0 p-2 shadow-1">
                                    <h6 class="text-theme mb-0">The Belle Salon</h6>
                                    <p class="tx-11 text-white mb-0">Sector 125, Sunny Enclave, Kharar,
                                        Punjab Region 140301
                                    </p>
                                </span>
                            </div>
                            <div class="HoverVideo__videoBox mb-3 rounded position-relative">
                                <video class="video" loop preload="yes" muted>
                                    <source src="https://assets.mixkit.co/videos/1704/1704-720.mp4" type="video/mp4">
                                </video>
                                <span class="position-absolute bottom-0 end-0 p-2 shadow-1">
                                    <h6 class="text-theme mb-0">The Belle Salon</h6>
                                    <p class="tx-11 text-white mb-0">Sector 125, Sunny Enclave, Kharar,
                                        Punjab Region 140301
                                    </p>
                                </span>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection