<?php
include "../Links/topLinks.php";
?>
<main class="main-height height-auto">

    <section class="section-dashboard manage-event">
        <div class="container">
            <div class="d-flex">
                <!-- <div class="manage-event-icon">
                    <i class="fa-solid fa-chevron-left arrow-left"></i>
                </div> -->
                <div class="event-content">
                    <h5 class="event-title text-center">
                        Service
                    </h5>
                </div>
            </div>


            <div class="filter-search-bar-advance-search position-relative">
                <div class="box-dashboard manage-event Product-details-box mt-3 height-50">
                    <div class="box-values event search-box position-relative">
                        <input class="form-control input-search w-100 border-0" type="search" name="search" placeholder="Search results" required="">
                        <div class="searchbar-icon position-absolute">
                            <img src="../assets/images/searchbar-icon.png" class="searchbar-icon-img" alt="Search">
                        </div>
                    </div>
                    <div class="event-icon search-filter-bar">
                        <!-- <i class="fa-solid fa-chevron-right arrow-right"></i> -->
                        <img src="../assets/images/filter-searchbar.png" class="search-filter-bar-img" alt="filter">
                    </div>
                </div>
                <div class="filter-popup position-absolute">
                    <div class="filter-div">
                        <h4 class="filter-title">Filters</h4>
                        <i class="fa-solid fa-xmark cross-icon"></i>
                    </div>
                    <div class="filter-form-body my-3">
                        <form action="#" method="POST">
                            <div class="input-fields-filter position-relative mt-3">
                                <label for="location" class="form-label location-label">Location</label>
                                <input type="location" class="form-control popup-form-control" id="location" name="location" placeholder="0 Miles" required>
                                <div class="location-image-filter position-absolute">
                                    <img src="../assets/images/location.svg" class="location-filter-image" alt="location">
                                </div>
                            </div>

                            <div class="input-fields-filter position-relative mt-3">
                                <label for="validationTagsClear" class="form-label location-label">Tags</label>
                                <input type="text" class="form-control popup-form-control category-name" id="tags" name="tags" value="" data-role="tagsinput" placeholder="#" required />
                                <!-- <div class="location-image-filter position-absolute">
                                    <img src="../assets/images/location.svg" class="location-filter-image" alt="location">
                                </div> -->
                            </div>

                            <div class="input-fields-filter position-relative mt-3">
                                <label for="category-name" class="form-label location-label">Category Name</label>
                                <input type="text" class="form-control popup-form-control category-name" id="category-name" name="category-name" placeholder="Name Here" required>
                            </div>

                            <div class="input-fields-filter position-relative mt-3">
                                <label for="product-name" class="form-label location-label">Product Name</label>
                                <input type="text" class="form-control popup-form-control category-name" id="product-name" name="product-name" placeholder="Product Name" required>
                            </div>

                            <div class="input-fields-filter position-relative mt-3">
                                <label for="business-profile-name" class="form-label location-label">Business Profile Name</label>
                                <input type="text" class="form-control popup-form-control category-name" id="business-profile-name" name="business-profile-name" placeholder="Business Profile Name" required>
                            </div>
                            <div class="border-myposts border-0 my-5">
                                <div class="row my-3" id="btns-products1">
                                    <div class="col-6">
                                        <div class="listing-btn short-btn justify-content-start">
                                            <button class="btn Products productsNew cancelPopup">
                                                Cancel
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="listing-btn short-btn justify-content-end">
                                            <button class="btn Products productsNew current-active1 apply-changesPopup">
                                                Apply
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="pt-5 pb-5">
        <div class="container">
            <div class="row">
                <!--ADD CLASSES HERE d-flex align-items-stretch-->
                <div class="col-sm-6 col-md-6 col-lg-4 mb-3 d-flex align-items-stretch">
                    <a href="./serviceDetails.php">
                        <div class="card card-service">
                            <img src="../assets/images/unsplash_Pe9IXUuC6QU-service-card.png" class="card-img-top" alt="Card Image">
                            <div class="card-body d-flex flex-column">
                                <div class="service-card-content mb-3">
                                    <h6 class="card-title-service">RedBox Barber Facial Services</h6>
                                    <div class="para-rating mb-2">
                                        <i class="fa-sharp fa-solid fa-star service-star-rating-active-post"></i>
                                        <p class="service-active-post-para-rating">4.1</p>
                                    </div>
                                </div>
                                <div class="service-card-content">
                                    <p class="card-para-service">4517 Washington Ave. </p>
                                    <p class="card-para-service">Timings: 09:00-12:00 </p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-6 col-lg-4 mb-3 d-flex align-items-stretch">
                    <a href="./serviceDetails.php">
                    <div class="card card-service">
                        <img src="../assets/images/unsplash_N85JOkU3DW0-service-card.png" class="card-img-top" alt="Card Image">
                        <div class="card-body d-flex flex-column">
                            <div class="service-card-content mb-3">
                                <h6 class="card-title-service">RedBox Barber Hairstyle Servicing</h6>
                                <div class="para-rating mb-2">
                                    <i class="fa-sharp fa-solid fa-star service-star-rating-active-post"></i>
                                    <p class="service-active-post-para-rating">4.1</p>
                                </div>
                            </div>
                            <div class="service-card-content">
                                <p class="card-para-service">4517 Washington Ave. </p>
                                <p class="card-para-service">Timings: 09:00-12:00 </p>
                            </div>
                        </div>
                    </div>
                    </a>
                </div>

                <div class="col-sm-6 col-md-6 col-lg-4 mb-3 d-flex align-items-stretch">
                    <a href="./serviceDetails.php">
                    <div class="card card-service">
                        <img src="../assets/images/unsplash_N85JOkU3DW0-service-card.png" class="card-img-top" alt="Card Image">
                        <div class="card-body d-flex flex-column">
                            <div class="service-card-content mb-3">
                                <h6 class="card-title-service">RedBox Barber Hairstyle Servicing</h6>
                                <div class="para-rating mb-2">
                                    <i class="fa-sharp fa-solid fa-star service-star-rating-active-post"></i>
                                    <p class="service-active-post-para-rating">4.1</p>
                                </div>
                            </div>
                            <div class="service-card-content">
                                <p class="card-para-service">4517 Washington Ave. </p>
                                <p class="card-para-service">Timings: 09:00-12:00 </p>
                            </div>
                        </div>
                    </div>
                    </a>
                </div>

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

</main>

<?php
include "../Links/bottomLinks.php";
?>

<?php
include "../Links/headerbottom.php";
?>