<section class="section-home1">
    <div class="container my-5 pb-5">
        <div class="row g-5">
            <div class="claw-home-section d-flex">
                <h4 class="claw-home-title locationManagement">Saved Routes</h4>
                <!-- <a href="./home.php"> -->
                <button class="btn btn-lg btn-job-seeker background-btn-color height-45 w-100 mb-0 paid addLocation btn-col-dollar" type="button">+ Add Route</button>
                <!-- </a> -->
            </div>
            <div class="col-xl-3  col-lg-4 col-md-6 col-sm-6">
                <div class="col-content location-div media-css space-between">
                    <div class="col-content location-div space-between flex-start">
                        <div class="col-img-content col-location-content">
                            <img src="<?=base_url()?>assets/images-claw/Icon material-location-on.png" class="col-image" alt="">
                        </div>
                        <div class="col-h6-title-content location-margin">
                            <h6 class="h6-title mb-0">Route A</h6>
                            <p class="location-para machine-para mb-1">3 locations</p>
                        </div>
                    </div>
                    <div class="col-dollar-content">
                        <button class="btn btn-col-dollar rightBtn">
                            <i class="fa-solid fa-chevron-right right-icon"></i>
                        </button>
                    </div>
                </div>
                <div class="location-btns right mt-3">
                    <button class="btn btn-location-edit btn-location-delete">Delete</button>
                </div>
            </div>

            <div class="col-xl-3  col-lg-4 col-md-6 col-sm-6">
                <div class="col-content location-div media-css space-between">
                    <div class="col-content location-div space-between flex-start">
                        <div class="col-img-content col-location-content">
                            <img src="<?=base_url()?>assets/images-claw/Icon material-location-on.png" class="col-image" alt="">
                        </div>
                        <div class="col-h6-title-content location-margin">
                            <h6 class="h6-title mb-0">Route A</h6>
                            <p class="location-para machine-para mb-1">3 locations</p>
                        </div>
                    </div>
                    <div class="col-dollar-content">
                        <button class="btn btn-col-dollar rightBtn">
                            <i class="fa-solid fa-chevron-right right-icon"></i>
                        </button>
                    </div>
                </div>
                <div class="location-btns right mt-3">
                    <button class="btn btn-location-edit btn-location-delete">Delete</button>
                </div>
            </div>


            <div class="col-xl-3  col-lg-4 col-md-6 col-sm-6">
                <div class="col-content location-div media-css space-between">
                    <div class="col-content location-div space-between flex-start">
                        <div class="col-img-content col-location-content">
                            <img src="<?=base_url()?>assets/images-claw/Icon material-location-on.png" class="col-image" alt="">
                        </div>
                        <div class="col-h6-title-content location-margin">
                            <h6 class="h6-title mb-0">Route A</h6>
                            <p class="location-para machine-para mb-1">3 locations</p>
                        </div>
                    </div>
                    <div class="col-dollar-content">
                        <button class="btn btn-col-dollar rightBtn">
                            <i class="fa-solid fa-chevron-right right-icon"></i>
                        </button>
                    </div>
                </div>
                <div class="location-btns right mt-3">
                    <button class="btn btn-location-edit btn-location-delete">Delete</button>
                </div>
            </div>


            <div class="col-xl-3  col-lg-4 col-md-6 col-sm-6">
                <div class="col-content location-div media-css space-between">
                    <div class="col-content location-div space-between flex-start">
                        <div class="col-img-content col-location-content">
                            <img src="<?=base_url()?>assets/images-claw/Icon material-location-on.png" class="col-image" alt="">
                        </div>
                        <div class="col-h6-title-content location-margin">
                            <h6 class="h6-title mb-0">Route A</h6>
                            <p class="location-para machine-para mb-1">3 locations</p>
                        </div>
                    </div>
                    <div class="col-dollar-content">
                        <button class="btn btn-col-dollar rightBtn">
                            <i class="fa-solid fa-chevron-right right-icon"></i>
                        </button>
                    </div>
                </div>
                <div class="location-btns right mt-3">
                    <button class="btn btn-location-edit btn-location-delete">Delete</button>
                </div>
            </div>

        </div>
    </div>

</section>

<!-- popup -->

<div class="container">
    <!-- Button -->
    <!-- <div class="btn-wrapper">
        <button class="myBtn" id="myBtn">حذف کن</button>
    </div> -->
    <!-- Modal -->
    <div class="modal-container" id="myModal">
        <div class="modal-wrapper">
            <div class="modal height-change">
                <header class="header-popup">
                    <h3 class="header-popup-title">Add New Location</h3>
                </header>
                <main class="main-popup">
                    <div class="background-signup">
                        <form class="row gy-4" action="<?=base_url()?>" method="POST">
                            <div class="col-md-6">
                                <label class="label-form popup-label" for="locationName">Location 1</label>
                                <input class="form-control price-popup" type="text" name="locationName" placeholder="Enter location name" required>
                            </div>

                            <div class="col-md-6">
                                <label class="label-form popup-label" for="locationAddress">Location 2</label>
                                <input class="form-control price-popup" type="text" name="locationAddress" placeholder="Search by name or address" required>
                            </div>

                            <div class="col-md-6">
                                <label class="label-form popup-label" for="locationContact">Location 3</label>
                                <input class="form-control price-popup" type="number" name="locationContact" placeholder="Enter location contact" required>
                            </div>

                            <div class="col-md-6">
                                <label class="label-form popup-label" for="locationPhoneNumber">More Location</label>
                                <input class="form-control price-popup" type="number" name="locationPhoneNumber" placeholder="More location" required>
                            </div>

                            <div class="col-md-6 d-flex flex-column mt-4">
                                <!-- <a href="./home.php"> -->
                                <button class="btn btn-lg btn-job-seeker background-btn-color height-45 w-100 save-collection" type="button">Group Location</button>
                                <!-- </a> -->
                            </div>

                            <div class="col-md-6 d-flex flex-column">
                                <a href="./map.php">
                                    <button class="btn btn-lg btn-job-seeker background-btn-color height-45 w-100 mb-4 save-collection" type="button">Proceed</button>
                                </a>
                            </div>
                        </form>
                    </div>
                </main>
            </div>
        </div>
    </div>
</div>