<!DOCTYPE html>
<html>
<head>
  <title>CSV File Upload</title>
  <style>
    body {
      background: linear-gradient(100deg, yellow, pink);
    }
    /* Add any additional CSS styles here */
  </style>
</head>
<body>
  <h1 style="color: brown;">Upload a CSV File</h1>
  <form action="/upload" method="post" enctype="multipart/form-data" style="display: flex; background-color: bisque; color: brown;">
    <input type="file" id="csvFileInput" name="csvFile" accept=".csv">
    <button type="submit" onclick="showAlert()" style="background-color: rgb(170, 230, 230); margin: 5px; padding: 5px;">Upload</button>
  </form>

  <h2 style="color: brown;">List of Uploaded Files</h2>
  <% if (files.length > 0) { %>
    <ol style="display: flex-box; background-color: pink; color: brown; font-weight: bolder; font-size: larger;">
      <% files.forEach(function(file) { %>
        <li>
          <%= file %>
          <a href="/files/<%= file %>" target="_blank"><button style ="background-color: aquamarine; padding: 8px; margin: 5px;">Open</button></a>
          <a href="/delete/<%= file %>"><button style ="background-color: aquamarine; padding: 8px; margin: 5px;" onClick="alertDel()">Delete</button></a>
          <button style ="background-color: aquamarine; padding: 8px; margin: 5px;" onClick="editFileName('<%= file %>')">Edit</button>
        </li>
      <% }) %>
    </ol>
  <% } else { %>
    <p>No files uploaded yet.</p>
  <% } %>

  <script>
    // Add your JavaScript code here
    
    // Function to show an alert with the selected file name when uploading
    function showAlert() {
      const fileInput = document.getElementById('csvFileInput');
      const originalFileName = fileInput.files[0].name;
      alert(`Selected file: ${originalFileName}`+' uploaded successfully');
      return originalFileName;
    }

    // Function to show an alert for successful file deletion
    function alertDel() {
      alert("File deleted successfully!");
    }

    // Function to edit the file name
    function editFileName(fileName) {
      const newFileName = prompt('Enter a new name for the file:', fileName);
      if (newFileName !== null && newFileName.trim() !== '') {
        // Send an AJAX request to update the file name on the server-side
        // You can use fetch or XMLHttpRequest here to send the request
        
        // Example using fetch:
        fetch(`/rename/${fileName}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ newFileName })
        })
          .then(response => {
            if (response.ok) {
              alert('File name updated successfully!');
              // Optionally, you can reload the file list or update the UI
              // with the new file name without refreshing the page
              location.reload(); // Reload the page to reflect the new file name
            } else {
              alert('Failed to update file name!');
            }
          })
          .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while updating the file name!');
          });
      }
    }
  </script>
</body>
</html>
