<!DOCTYPE html>
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">

<th:block th:insert="~{fragments/common :: head(title=#{changeMetadata.title})}"></th:block>

<body>
    <div id="page-container">
        <div id="content-wrap">
            <div th:insert="~{fragments/navbar.html :: navbar}"></div>
            <br> <br>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <h2 th:text="#{changeMetadata.header}"></h2>

                        <form method="post" id="form1" enctype="multipart/form-data" th:action="@{api/v1/misc/update-metadata}">
                            <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                            <p class="text-muted" th:text="#{changeMetadata.selectText.1}"></p>

                            <div class="mb-3-inline form-check">
                                <input type="checkbox" class="form-check-input" id="deleteAll" name="deleteAll"> 
                                <label class="ms-3" for="deleteAll"  th:text="#{changeMetadata.selectText.2}" ></label>
                            </div>

                            <div class="mb-3-inline form-check">
                                <input type="checkbox" class="form-check-input" id="customModeCheckbox"> 
                                <label class="ms-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
                            </div>

                            <div class="mb-3">
                                <label class="form-check-label" for="author" th:text="#{changeMetadata.author}"></label> 
                                <input type="text" class="form-control" id="author" name="author">
                            </div>

                            <div class="mb-3">
                                <label class="form-check-label" for="creationDate" th:text="#{changeMetadata.creationDate}"></label> 
                                <input type="text" class="form-control" id="creationDate" name="creationDate" placeholder="2020/12/25 18:30:59">
                            </div>

                            <div class="mb-3">
                                <label class="form-check-label" for="creator" th:text="#{changeMetadata.creator}"></label> 
                                <input type="text" class="form-control" id="creator" name="creator">
                            </div>

                            <div class="mb-3">
                                <label class="form-check-label" for="keywords" th:text="#{changeMetadata.keywords}"></label> 
                                <input type="text" class="form-control" id="keywords" name="keywords">
                            </div>

                            <div class="mb-3">
                                <label class="form-check-label" for="modificationDate" th:text="#{changeMetadata.modDate}"></label> 
                                <input type="text" class="form-control" id="modificationDate" name="modificationDate" placeholder="2020/12/25 18:30:59">
                            </div>

                            <div class="mb-3">
                                <label class="form-check-label" for="producer" th:text="#{changeMetadata.producer}"></label> 
                                <input type="text" class="form-control" id="producer" name="producer">
                            </div>

                            <div class="mb-3">
                                <label class="form-check-label" for="subject" th:text="#{changeMetadata.subject}"></label> 
                                <input type="text" class="form-control" id="subject" name="subject">
                            </div>

                            <div class="mb-3">
                                <label class="form-check-label" for="title" th:text="#{changeMetadata.title}"></label> 
                                <input type="text" class="form-control" id="title" name="title">
                            </div>

                            <div class="mb-3">
                                <label class="form-check-label" for="trapped" th:text="#{changeMetadata.trapped}"></label> 
                                <select class="form-control" id="trapped" name="trapped">
                                    <option value="True" th:text="#{true}"></option>
                                    <option value="False"  th:text="#{false}" selected></option>
                                    <option value="Unknown" th:text="#{unknown}"></option>
                                  </select>
                            </div>
                            <div id="customMetadata" style="display: none;">
                                <h3 th:text="#{changeMetadata.selectText.4}"></h3>
                                <div class="mb-3" id="otherMetadataEntries"></div>
                            </div>
                            <div id="customMetadataEntries"></div>
                            <button type="button" class="btn btn-secondary" id="addMetadataBtn" th:text="#{changeMetadata.selectText.5}"></button>
                            <br>
                            <br>
                            <button class="btn btn-primary" type="submit" id="submitBtn" th:text="#{changeMetadata.submit}"></button>
                            <script>
  
    const deleteAllCheckbox = document.querySelector("#deleteAll");
    let inputs = document.querySelectorAll("input");
    const customMetadataDiv = document.getElementById('customMetadata');
    const otherMetadataEntriesDiv = document.getElementById('otherMetadataEntries');
    
    deleteAllCheckbox.addEventListener("change", function(event) {
      inputs.forEach(input => {
          // If it's the deleteAllCheckbox or any file input, skip
          if (input === deleteAllCheckbox || input.type === "file") {
              return;
          }
          // Disable or enable based on the checkbox state
          input.disabled = deleteAllCheckbox.checked;
      });
    });
                            
                            
  const customModeCheckbox = document.getElementById('customModeCheckbox');
  
  

  
  
  const addMetadataBtn = document.getElementById("addMetadataBtn");
  const customMetadataFormContainer = document.getElementById("customMetadataEntries");
  var count = 1;
  

  

  const fileInput = document.querySelector("#fileInput-input");
  const authorInput = document.querySelector("#author");
  const creationDateInput = document.querySelector("#creationDate");
  const creatorInput = document.querySelector("#creator");
  const keywordsInput = document.querySelector("#keywords");
  const modificationDateInput = document.querySelector("#modificationDate");
  const producerInput = document.querySelector("#producer");
  const subjectInput = document.querySelector("#subject");
  const titleInput = document.querySelector("#title");
  const trappedInput = document.querySelector("#trapped");
  
  var lastPDFFileMeta = null;
  fileInput.addEventListener("change", async function() {
	  
	  
	  
	  while (otherMetadataEntriesDiv.firstChild) {
		  otherMetadataEntriesDiv.removeChild(otherMetadataEntriesDiv.firstChild);
	  }
	  while (customMetadataFormContainer.firstChild) {
		  customMetadataFormContainer.removeChild(customMetadataFormContainer.firstChild);
      }
	  
	  
	  
    const file = this.files[0];
    var url = URL.createObjectURL(file)
	pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
    const pdf = await pdfjsLib.getDocument(url).promise;
    const pdfMetadata = await pdf.getMetadata();
    lastPDFFile = pdfMetadata?.info
    console.log(pdfMetadata);
    if(!pdfMetadata?.info?.Custom || pdfMetadata?.info?.Custom.size == 0) {
    	customModeCheckbox.disabled = true;
        customModeCheckbox.checked = false;
    } else {
    	customModeCheckbox.disabled = false;
    }
    authorInput.value = pdfMetadata?.info?.Author;
    creationDateInput.value = convertDateFormat(pdfMetadata?.info?.CreationDate);
    creatorInput.value = pdfMetadata?.info?.Creator;
    keywordsInput.value = pdfMetadata?.info?.Keywords;
    modificationDateInput.value = convertDateFormat(pdfMetadata?.info?.ModDate);
    producerInput.value = pdfMetadata?.info?.Producer;
    subjectInput.value = pdfMetadata?.info?.Subject;
    titleInput.value = pdfMetadata?.info?.Title;
    console.log(pdfMetadata?.info);
    const trappedValue = pdfMetadata?.info?.Trapped;
    // Get all options in the select element
    const options = trappedInput.options;
    // Loop through all options to find the one with a matching value
    for (let i = 0; i < options.length; i++) {
      if (options[i].value === trappedValue) {
        options[i].selected = true;
        break;
      }
    }  
    addExtra();
  });
  
  addMetadataBtn.addEventListener("click", () => {
	  
	    const keyInput = document.createElement("input");
	    keyInput.type = "text";
	    keyInput.placeholder = 'Key';
	    keyInput.className = "form-control";
	    keyInput.name = "customKey" + count;
	    
	    const valueInput = document.createElement("input");
	    valueInput.type = "text";
	    valueInput.placeholder = 'Value';
	    valueInput.className = "form-control";
	    valueInput.name = "customValue" + count;
	    count = count + 1;
	    
	    const formGroup = document.createElement("div");
	    formGroup.className = "mb-3";
	    formGroup.appendChild(keyInput);
	    formGroup.appendChild(valueInput);
	    
	    
	    customMetadataFormContainer.appendChild(formGroup);
	  });
  function convertDateFormat(dateTimeString) {
	  if (!dateTimeString || dateTimeString.length < 17) {
	    return dateTimeString;
	  }

	  const year = dateTimeString.substring(2, 6);
	  const month = dateTimeString.substring(6, 8);
	  const day = dateTimeString.substring(8, 10);
	  const hour = dateTimeString.substring(10, 12);
	  const minute = dateTimeString.substring(12, 14);
	  const second = dateTimeString.substring(14, 16);

	  return year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;
	}
  
    function addExtra() {
         const event = document.getElementById("customModeCheckbox");
        
    
        if (event.checked && lastPDFFile.Custom != null) {
          customMetadataDiv.style.display = 'block';
          for (const [key, value] of Object.entries(lastPDFFile.Custom)) {
            if (key === 'Author' || key === 'CreationDate' || key === 'Creator' || key === 'Keywords' || key === 'ModDate' || key === 'Producer' || key === 'Subject' || key === 'Title' || key === 'Trapped') {
              continue;
            }
            const entryDiv = document.createElement('div');
            entryDiv.className = 'mb-3';
            
            
          
            entryDiv.innerHTML = `<div class="mb-3"><label class="form-check-label" for="${key}">${key}:</label><input name="${key}" value="${value}" type="text" class="form-control" id="${key}"></div>`;
            otherMetadataEntriesDiv.appendChild(entryDiv);
          }
        } else {
          customMetadataDiv.style.display = 'none';
          while (otherMetadataEntriesDiv.firstChild) {
            otherMetadataEntriesDiv.removeChild(otherMetadataEntriesDiv.firstChild);
          }
        }
        
    
    }
    
  customModeCheckbox.addEventListener('change', (event) => {
     
      addExtra();
      });
  

</script>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        <div th:insert="~{fragments/footer.html :: footer}"></div>
    </div>
</body>
</html>
