<style>
#dropZoneMaleLight {
    border: 2px dashed #007BFF;
    padding: 30px;
    text-align: center;
    color: #6C757D;
    cursor: pointer;
}

#dropZoneMaleLight.dragover {
    background-color: #E9F5FF;
}

#dropZoneMaleTan {
    border: 2px dashed #007BFF;
    padding: 30px;
    text-align: center;
    color: #6C757D;
    cursor: pointer;
}

#dropZoneMaleTan.dragover {
    background-color: #E9F5FF;
}

#dropZoneMaleDark {
    border: 2px dashed #007BFF;
    padding: 30px;
    text-align: center;
    color: #6C757D;
    cursor: pointer;
}

#dropZoneMaleDark.dragover {
    background-color: #E9F5FF;
}

#dropZoneFemaleLight {
    border: 2px dashed #007BFF;
    padding: 30px;
    text-align: center;
    color: #6C757D;
    cursor: pointer;
}

#dropZoneFemaleLight.dragover {
    background-color: #E9F5FF;
}

#dropZoneFemaleTan {
    border: 2px dashed #007BFF;
    padding: 30px;
    text-align: center;
    color: #6C757D;
    cursor: pointer;
}

#dropZoneFemaleTan.dragover {
    background-color: #E9F5FF;
}

#dropZoneFemaleDark {
    border: 2px dashed #007BFF;
    padding: 30px;
    text-align: center;
    color: #6C757D;
    cursor: pointer;
}

#dropZoneFemaleDark.dragover {
    background-color: #E9F5FF;
}
</style>
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <div class="img-profile ml-3">

                </div>
                <h1 class="m-0 text-dark">Update Images</h1>

            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="<?= base_url(); ?>dashboard/userimages">User Images</a></li>
                    <li class="breadcrumb-item active">Update Images</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<form method="post" id="userImages" class="card" action="<?php echo base_url() . "dashboard/saveimages"?>" enctype="multipart/form-data">
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="card-body">

                <div class="row mb-5">
                    <div class="col-12">Newly uploaded images will be replaced</div>

                </div>
                <div class="row">
                    <!-- <div class="col-sm-6 col-md-6">
                            <label class="form-label">Male Light<span class="form-required">*</span></label>
                            <div class="form-group">
                                <input type="file" name="male_light" id="male_light" class="form-control">
                                <br>
                                <img src="<?=$images['male_light']?>" width="100" height="100">
                            </div>
                        </div> -->
                    <div class="col-sm-6 col-md-6">
                        <label class="form-label">Male Light<span class="form-required">*</span></label>
                        <div class="form-group">
                            <div id="dropZoneMaleLight" class="mb-3">
                                Drag & drop files here or click to browse
                                <input type="file" id="male_light" name="male_light" multiple hidden />
                            </div>
                            <ul id="maleLightList" class="mb-3 list-group"></ul>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <label class="form-label">Male Tan<span class="form-required">*</span></label>
                        <div class="form-group">
                            <input type="file" name="male_tan" id="male_tan" class="form-control">
                            <br>
                            <img src="<?=$images['male_tan']?>" width="100" height="100">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <label class="form-label">Male Dark<span class="form-required">*</span></label>
                        <div class="form-group">
                            <input type="file" name="male_dark" id="male_dark" class="form-control">
                            <br>
                            <img src="<?=$images['male_dark']?>" width="100" height="100">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <label class="form-label">Female Light<span class="form-required">*</span></label>
                        <div class="form-group">
                            <input type="file" name="female_light" id="female_light" class="form-control">
                            <br>
                            <img src="<?=$images['female_light']?>" width="100" height="100">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <label class="form-label">Female Tan<span class="form-required">*</span></label>
                        <div class="form-group">
                            <input type="file" name="female_tan" id="female_tan" class="form-control">
                            <br>
                            <img src="<?=$images['female_tan']?>" width="100" height="100">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <label class="form-label">Female Dark<span class="form-required">*</span></label>
                        <div class="form-group">
                            <input type="file" name="female_dark" id="female_dark" class="form-control">
                            <br>
                            <img src="<?=$images['female_dark']?>" width="100" height="100">
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </section>
    <!-- /.content -->


    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">

            <div class="card-footer text-right">

                <button type="submit" class="btn btn-primary">Update Images</button>
            </div>
        </div>
    </section>
    <!-- /.content -->
</form>
<script>
const dropZone = document.getElementById("dropZoneMaleLight");
const fileInput = document.getElementById("male_light");
const maleLightList = document.getElementById("maleLightList");
let selectedFiles = [];
// Show file names
const updateMaleLightFileList = () => {
    maleLightList.innerHTML = "";
    selectedFiles.forEach((file, index) => {
        const li = document.createElement("li");
        li.className = "list-group-item";
        li.textContent = `${index + 1}. ${file.name}`;
        maleLightList.appendChild(li);
    });
};
// Click to open file dialog
dropZone.addEventListener("click", () => fileInput.click());
// Files selected via file input
fileInput.addEventListener("change", (e) => {
    selectedFiles = Array.from(e.target.files);
    updateMaleLightFileList();
});
// Drag & drop events
dropZone.addEventListener("dragover", (e) => {
    e.preventDefault();
    dropZone.classList.add("dragover");
});
dropZone.addEventListener("dragleave", () => {
    dropZone.classList.remove("dragover");
});
dropZone.addEventListener("drop", (e) => {
    e.preventDefault();
    dropZone.classList.remove("dragover");
    const files = Array.from(e.dataTransfer.files);
    selectedFiles = selectedFiles.concat(files);
    console.log(selectedFiles)
    updateMaleLightFileList();
});
// Form submit
document
    .getElementById("userImages")
    .addEventListener("submit", function(e) {
        e.preventDefault();
        if (selectedFiles.length === 0) {
            alert("Please select or drop at least one file.");
            return;
        }
        const formData = new FormData();
        selectedFiles.forEach((file, index) => {
            formData.append("files[]", file);
        });
        console.log("Uploading files:", selectedFiles);
        // Example: Send to server
        // fetch('/upload', {
        //   method: 'POST',
        //   body: formData
        // }).then(res => res.json())
        //   .then(data => console.log('Uploaded:', data))
        //   .catch(err => console.error('Error:', err));
    });
</script>