<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Editing Book - LiteLib</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="/css/style.css">

    <!-- Favicon Information -->
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="194x194" href="/favicon/favicon-194x194.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="/favicon/site.webmanifest">
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#805a3f">
    <link rel="shortcut icon" href="/favicon/favicon.ico">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
    <meta name="msapplication-config" content="/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>
    <h1 class="mt-5 mb-5" style="text-align:center;"><i class="bi bi-pencil-fill"></i> Edit Book Information</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <div class="container-sm">
        <% if(book) { %>
        <form action="/edit-book" method="post" id="bookForm">
            <label for="name" style="text-align: left;">Book Title:</label>
            <input id="name" name="name" class="form-control form-control-lg mb-5" value="<%= book.data.name %>" autocomplete="name" required>
            <label for="author" style="text-align: left;">Author:</label>
            <input id="author" name="author" class="form-control form-control-lg mb-5" value="<%= book.data.author %>" autocomplete="author" required>

            <div class="row">
              <div class="col">
                  <label for="year" style="text-align: left;">Year:</label>
                  <input id="year" name="year" class="form-control form-control-lg mb-5" value="<%= book.data.year %>" type="number">
              </div>
              <div class="col">
                  <label for="genre" style="text-align: left;">Genre:</label>
                  <input id="genre" name="genre" class="form-control form-control-lg mb-5" value="<%= book.data.genre %>" autocomplete="genre">
              </div>
           </div>

            <div class="row">
              <div class="col">
                  <label for="ISBN" style="text-align: left;">ISBN:</label>
                  <input id="ISBN" name="ISBN" class="form-control form-control-lg mb-5" value="<%= book.data.ISBN %>">
              </div>
              <div class="col">
                  <label for="ISBN10" style="text-align: left;">ISBN10:</label>
                  <input id="ISBN10" name="ISBN10" class="form-control form-control-lg mb-5" value="<%= book.data.ISBN10 %>">
              </div>
            </div>

            <label for="copies" style="text-align: left;">Copies:</label>
            <input id="copies" name="copies" class="form-control form-control-lg mb-5" value="<%= book.data.copies %>" type="number" min="1" autocomplete="copies" required>
           
            <!-- hidden input field to receive old id -->
            <input type="hidden" id="bookID" name="bookID" value="<%= book.ID %>">
            <!-- hidden input to know if delete user -->
            <input type="hidden" name="delete" id="delete" value="false">
        
            <!-- Buttons -->
            <div class="container" style="padding: 0px;">
              <div class="d-flex justify-content-between align-items-center">
                <a href="/" class="btn btn-primary btn-lg"><i class="bi bi-house-door-fill"></i> Home</a>
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                  <button type="button" class="btn btn-danger btn-lg" onclick="submitDeleteForm()"><i class="bi bi-trash-fill"></i> Delete Book</button>
                  <a href="/books" class="btn btn-secondary btn-lg"><i class="bi bi-x-circle-fill"></i> Cancel</a>
                  <button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-floppy2-fill"></i> Save</button>
                </div>
              </div>
          </div>

            <!-- Delete Confirmation Modal -->
            <div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
                          <h5 class="modal-title" id="deleteConfirmationModalLabel">Confirmation</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                          Are you sure you want to <strong>delete</strong> this book? This is a <strong>permanent</strong> action.
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-secondary btn-lg" data-bs-dismiss="modal"><i class="bi bi-x-circle-fill"></i> Cancel</button>
                          <button type="button" class="btn btn-danger btn-lg" id="confirmDeleteButton"><i class="bi bi-trash-fill"></i> Delete</button>
                      </div>
                  </div>
              </div>
            </div>

        </form>

        <script>
          function submitDeleteForm() {
              // Show confirmation modal
              $('#deleteConfirmationModal').modal('show');
      
              // Set up event listener for delete button in modal
              $('#confirmDeleteButton').on('click', function() {
                  // Perform deletion
                  document.getElementById("delete").value = "true";
                  document.getElementById("bookForm").submit();
      
                  // Hide modal and remove event listener to prevent memory leaks
                  $('#deleteConfirmationModal').modal('hide');
                  $('#confirmDeleteButton').off('click');
              });
          }
      </script>

        <% } else { %>
          <div class="alert alert-danger alert-dismissible" role="alert">
            Book not found <a href="/books">Go Back.</a>
            <a href="/books" class="btn-close" aria-label="Close"></a>
          </div>
        <% } %>
        
    </div>  

  </body>
</html> 