#ifndef _FIRMWARE_HTML_H
#define _FIRMWARE_HTML_H

#include <Arduino.h>

const char firmware_html_page[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <title>Firmware Update</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    h1{
      text-align: center;
      margin: 0;
      margin-bottom: 0;
      font-size: larger;
    }
    body {
      font-family: Arial, sans-serif;
      padding: 0;
      justify-content: center;
      align-items: center; 
      background-color: #f0f0f0;
      width: 100%;
      max-width: 700px;
      min-width: 300px;
      margin: 0 auto;
    }
    .outer-container {
      justify-content: center;
      align-items: center;
      padding: 4px 20px 4px 20px
	  }
	  .container {
      border: 1px solid #ccc;
      padding: 5px 20px 10px 20px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      width:90%;
      margin-bottom: 20px;
	  }
	  .center-text {
		text-align: center;
		font-size: medium;
		font-weight: bold;
		margin-bottom: 10;
	  }
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-end; 
	}
    .row > * {
      flex: 1;
      width: calc(50% - 10px);
      margin-bottom: 8px;
	  }
    .row > *:last-child {
      flex: 1;
	  text-align: right;
    }
	button {
		background-color: #007bff;
		color: #fff;
		padding: 8px 16px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		margin-top: auto;
	}
	progress{
		flex: 1;
		margin: 0 10px;
    }
	#lblprogress{
		flex: 0;
	}
	.progress-container {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }
	button{
		background-color: #007bff;
		color: #fff;
		padding: 8px 16px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		margin-top: auto;
	}
	.info {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-end; 
	  margin-top: 20px;
	}

  </style>
</head>
<body>
  	<h1 name="h1element">Firmware Update</h1> 
    <div class="outer-container">
      <div class="container">
        <legend class="center-text">Local Update</legend>
		<div class="row">
			<div>
				<input type="file" id="update-file" name="update-file">
			</div>
			<div>
				<button id="submit-update-local" onclick="uploadFile()">Update!</button>
			</div>
			</div>

			<div class="progress-container">
				<label id="lblprogress" for="firm-progress">Progress:</label>
				<progress id="firm-progress" value="0" max="100"></progress>
				<label id="lbl-firm-progress" for="firm-progress">- - - -</label>
			</div>

			<div class="info">
				<label>File name: "ata_fw_booth_xxx.bin" or "ata_fs_booth_xxx.bin"</label>
			</div>
      	</div>
    </div>

    <script>
      const fileInput = document.getElementById('update-file');
      const progressBar = document.getElementById('firm-progress');
      const progressLabel = document.getElementById('lbl-firm-progress');
      const submitButton = document.getElementById('submit-update-local');

      //submitButton.addEventListener('click', uploadFile);

      function uploadFile() {
        event.preventDefault(); // Prevent the default form submission

        const file = fileInput.files[0];
        const url = '/update'; // Replace with the actual upload URL

        // File Checks
        //*********************************************************
        // Check file extension
        if (!file.name.toLowerCase().endsWith('.bin')) {
          alert('Please select a file with the ".bin" extension.');
          return;
        }

        // Check filename prefix
        if (!file.name.toLowerCase().startsWith('fwata') && !file.name.toLowerCase().startsWith('lfsata')) {
          alert('Please select a file with a filename starting with "fwata" or "lfsata".');
          return;
        }

        // Check file size
        const maxSizeBytes = 2.7 * 1024 * 1024; // 2.75Mb in bytes
        if (file.size > maxSizeBytes) {
          alert('Please select a file with a size not exceeding 2.7Mb.');
          return;
        }
        //*********************************************************

        const formData = new FormData();
        formData.append('file-size', file.size); // Include the file size as a parameter
        formData.append('update-file', file);
        let s = "file-size: " + file.size;

        const xhr = new XMLHttpRequest();

        xhr.upload.addEventListener('progress', (event) => {
          if (event.lengthComputable) {
            const progressPercent = Math.round((event.loaded * 100) / event.total);
            progressBar.value = progressPercent;
            progressLabel.innerHTML =progressBar.value + "%";
          }
        });

        xhr.onreadystatechange = function () {
          if (xhr.readyState === XMLHttpRequest.DONE) {
            console.log("received status: %d", xhr.status);
            if (xhr.status === 200) {
              // Upload completed successfully
              alert('Upload completed!');
              progressLabel.innerHTML = "Completed!";
            } else if (xhr.status === 500) {
              // Request was aborted (server-side)
              alert('Upload aborted by the server.');
              progressLabel.innerHTML = "Aborted!";
            } else {
              // Handle other error cases
              alert('An error occurred during the upload.');
              progressLabel.innerHTML = "Error!";
            }
            submitButton.disabled = false;
            progressBar.value = 0;
            progressLabel.innerHTML = "";
          }
        };

        xhr.open('POST', url, true);
        xhr.send(formData);
        submitButton.disabled = true;
      }
    </script>
  </body>
</html>
)rawliteral";


#endif