<!DOCTYPE html>
<html lang="et">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebDAV Failide Loend - TLT</title>
    <script src="https://kit.fontawesome.com/YOUR_FA_KIT.js" crossorigin="anonymous"></script>
    <style>
        body {
            font-family: Poppins, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .content-container {
            display: block;
            min-width: 500px;
            max-width: 90%;
            width: fit-content;
            margin: 150px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: width 0.3s ease;
        }

        .search-container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 10px;
        }

        .search-container input {
            padding: 8px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 250px;
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
        }

        .header img {
            height: 40px;
            width: auto;
        }

        .header h2 {
            flex-grow: 1;
            text-align: center;
            color: #004d40;
            margin: 0;
        }

        ul {
            list-style-type: none;
            padding: 0;
            width: 98%;
        }

        .file-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 5px;
            margin-bottom: 5px;
            gap: 10px;
            width: 100%;
        }

        .file-info {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-grow: 1;
            overflow: hidden;
        }

        .file-name {
            font-weight: bold;
	    font-size: 14px;
            color: #2C3E50;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
	    text-decoration: none;
        }

        .file-meta {
            font-size: 13px;
            color: gray;
            white-space: nowrap;
            text-align: right;
            flex-grow: 1;
            display: flex;
            justify-content: flex-end;
            margin-right: 10px;
        }

        .custom-btn {
            background-color: #00E8C6;
            color: white;
            font-weight: bold;
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 25px;
            text-decoration: none;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            transition: background 0.3s ease;
            white-space: nowrap;
            margin-left: auto;
        }

        .custom-btn:hover {
            background-color: #00C4A6;
        }
    </style>
</head>
<body>
    <div class="content-container">
        <div class="search-container">
            <input type="text" id="search-box" placeholder="Otsi faili..." onkeyup="filterFiles()">
        </div>
        <div class="header">
            <img src="TLTLogo.png" alt="TLT Logo">
            <h2>TLT Failide Loend</h2>
        </div>
        <ul id="list-files"></ul>
    </div>

    <script>
        function filterFiles() {
            let input = document.getElementById("search-box").value.toLowerCase();
            let items = document.querySelectorAll(".file-item");
            
            items.forEach(item => {
                let fileName = item.querySelector(".file-name").textContent.toLowerCase();
                item.style.display = fileName.includes(input) ? "flex" : "none";
            });
        }

        fetch('list-files.php')
.then(response => response.json())
.then(files => {
    let fileList = document.getElementById("list-files");
    fileList.innerHTML = "";

    if (files.error) {
        console.error("Viga:", files.error);
        return;
    }

    files.forEach(file => {
		
		if (file.name.toLowerCase() === "thumbs.db") return;
		
        let listItem = document.createElement("li");
        listItem.classList.add("file-item");

        let fileInfo = document.createElement("div");
        fileInfo.classList.add("file-info");

        let fileName = document.createElement("a");
        fileName.href = `https://fileshare.tlt.ee/Download/${file.name}`;
        fileName.textContent = file.name;
        fileName.target = "_blank";
        fileName.classList.add("file-name");

        let fileMeta = document.createElement("span");
        let sizeKB = (file.size / 1024).toFixed(2);
        let sizeText = sizeKB < 1024 ? `${sizeKB} KB` : `${(sizeKB / 1024).toFixed(2)} MB`;

        // ---- Kuupäeva formaadi muutmine ----
        let originalDate = new Date(file.date);
        let day = originalDate.getDate().toString().padStart(2, '0');
        let month = (originalDate.getMonth() + 1).toString().padStart(2, '0');
        let year = originalDate.getFullYear();
        let formattedDate = `${day}.${month}.${year}`;

        fileMeta.textContent = ` 🗂️ ${sizeText} | 🕒 ${formattedDate}`;
        fileMeta.classList.add("file-meta");

        let downloadButton = document.createElement("a");
        downloadButton.href = `https://fileshare.tlt.ee/Download/${file.name}`;
        downloadButton.download = file.name;
        downloadButton.classList.add("custom-btn");
        downloadButton.textContent = "Lae alla";

        fileInfo.appendChild(fileName);
        listItem.appendChild(fileInfo);
        listItem.appendChild(fileMeta);
        listItem.appendChild(downloadButton);
        fileList.appendChild(listItem);
    });
})
.catch(error => console.error("Viga failide laadimisel:", error));
    </script>
</body>
</html>