<!DOCTYPE html>
<html>

<head>
    <script src="https://kit.fontawesome.com/5f59ca6ad3.js" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="uploads" class="bg-container">
        <div>
            <h1>Upload a document for vehicle for loan 1234</h1>
            <p>You may upload a clear photo or scan of your document (Not sure what to upload ?
                check your inbox for our mail)</p>
        </div>
        <div>
            <ul>
                <li class="info-lists">Accepted formats: .bmp, .jpg, .jpeg, .pdf, .png or .tiff(file must be less than 5mb)</li>
                <li class="info-lists">Please make sure for the information in each file you're uploading is legible</li>
            </ul>
        </div>
        <form>
            <div id="imgcontainer" class="upload-image-container">
                <p><input type="file" name="image" id="uploadimage" onchange="showname()" accept="image/x-png,image/gif,image/jpeg" style="display: none;"></p>
                <button class="imgs"><label for="uploadimage" id="changename" style="cursor: pointer;">select a file</label></button>
                <p id="errormsg" class="errormsg"></p>
            </div>
            <div id="buttonsContainer" class="buttons">
                <button id="upload" class="btn-primary btns">Upload</button>
                <a href="" id="Cancelbtn">Cancel</a>
            </div>
        </form>
    </div>
    <script src="main.js"></script>
</body>

<script>

let errormsgs = document.getElementById("errormsg");
let imgcontainers = document.getElementById("imgcontainer");
let changenames = document.getElementById("changename")
let uploads = document.getElementById("uploads");
let upload = document.getElementById("upload");

let count = 0
let arrayImagenes = []

document.getElementById('upload').disabled = true;

function deleteids(eachfilediv) {
    imgcontainers.removeChild(eachfilediv);
    arrayImagenes.pop(eachfilediv)

}

function showname() {
    var name = document.getElementById('uploadimage');
    console.log(name.files)
    let sizes = name.files.item(0).size
    let types = name.files.item(0).type;
    console.log(types)
    console.log(sizes)


    if (sizes > 5242880) {
        errormsgs.textContent = "your file is more than 5mb";
    } else {

        if (types === "image/jpeg" || types === "image/jpg" || types === "image/png" || types === "image/bmp" || types === "application/pdf") {

            count += 1
            const imgPath = document.querySelector('input[type=file]').files[0];
            const reader = new FileReader();

            reader.addEventListener("load", function() {
                localStorage.setItem("image", reader.result);
            }, false);

            if (imgPath) {
                reader.readAsDataURL(imgPath);
            }

            let img = document.getElementById('image');
            imgs = localStorage.getItem('image');
            arrayImagenes.push(imgs);


            let eachfilediv = document.createElement("div");
            eachfilediv.id = count;
            eachfilediv.classList.add("show-eachfile");
            imgcontainers.appendChild(eachfilediv);

            let fls = document.createElement("p");
            fls.textContent = name.files.item(0).name;
            fls.classList.add("para")
            console.log(fls.textContent)
            eachfilediv.appendChild(fls);

            let dlt = document.createElement("div");
            dlt.classList.add("ml-4");
            eachfilediv.appendChild(dlt);


            let deleteIconContainer = document.createElement("div");
            deleteIconContainer.classList.add("delete-icon-container");
            dlt.appendChild(deleteIconContainer);

            let deleteIcon = document.createElement("i");
            deleteIcon.classList.add("far", "fa-trash-alt", "delete-icon");
            deleteIcon.id = eachfilediv;
            deleteIcon.onclick = function() {
                deleteids(eachfilediv);
            }
            deleteIconContainer.appendChild(deleteIcon);


            console.log(imgcontainers)
            document.getElementById('upload').disabled = false;

        } else {
            errormsgs.textContent = "file is not supported";
        }
    }
}

upload.onclick = function() {
    //function getImg(arrayImagenes) {
    for (let lin of arrayImagenes) {
        console.log(lin);
    }

}

uploads.addEventListener("submit", function(event) {
    event.preventDefault();
    //getImg(arrayImagenes);
});

</script>

</html>