<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">Location Management</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 Location</button>
                <!-- </a> -->
            </div>
            <?php
                foreach($myLocations as $key => $location) {
            ?>
            <div class="col-xl-3  col-lg-4 col-md-6 col-sm-6">
                <div class="col-content location-div media-css">
                    <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"><?=$location['name']?><br>(<?=$location['contact']?>)</h6>
                        <p class="location-para machine-para">There <?=$location['totalMachines'] == 1 ? 'is' : 'are'?> <?=$location['totalMachines']?> <?=$location['totalMachines'] == 1 ? 'machine' : 'machnies'?> linked to this location</p>
                    </div>
                </div>
                <div class="location-btns">
                    <!-- <button class="btn btn-location-edit" onclick='editLocation("<?=$key?>", <?php echo(json_encode($location)); ?>)'>Edit</button> -->
                    <button class="btn btn-location-edit btn-location-delete" onclick="archive('<?=$key?>')">Archive</button>
                </div>
            </div>
            <?php } ?>

        </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">
                <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()?>site/addlocation" method="POST" enctype="multipart/form-data">
                            <div class="col-md-6">
                                <label class="label-form popup-label" for="name">Location name</label>
                                <input class="form-control price-popup" type="text" name="name" placeholder="Enter location name" required>
                            </div>

                            <div class="col-md-6">
                                <label class="label-form popup-label" for="address">Location Address</label>
                                <input class="form-control price-popup" type="text" name="address" placeholder="Enter location address" required>
                            </div>

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

                            <div class="col-md-6">
                                <label class="label-form popup-label" for="phone">Location Phone Number</label>
                                <input class="form-control price-popup" type="number" name="phone" placeholder="Enter Location Phone Number" required>
                            </div>

                            <div class="col-md-4 m-top-col-8">
                                <label class="label-form popup-label" for="image">Location image</label>
                                <input type='file' name="image" id="readUrl" hidden>
                                <div class="img-content-popup position-relative">
                                    <h6 class="img-photo-popup-title">Choose Photo</h6>
                                    <img id="uploadedImage" src="#" alt="Uploaded Image" accept="image/png, image/jpeg" style="display:none;">
                                    <div class="cross-icon position-absolute">
                                        <i class="fa-solid fa-xmark"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 d-flex flex-column">
                                <button class="btn btn-job-seeker background-btn-color height-45 w-100 mb-4" type="submit">Create Location</button>
                                <button class="btn btn-job-seeker background-btn-color height-45 w-100 mb-4 save-collection" type="button">Cancel</button>
                            </div>
                        </form>
                    </div>
                </main>
            </div>
        </div>
    </div>
</div>
<script>
function archive(locationId) {
    window.location.href = '<?php echo base_url("site/archiveLocation/"); ?>' + locationId;
}

function editLocation(locationId, locationObject) {
    console.log(locationObject.name);
}
</script>