<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Checkout - 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>
    <script>
      function playSound(soundname) {
          const thissound = document.getElementById(soundname);
          thissound.play();
      }
      </script>

    <h1 class="mt-5 mb-5" style="text-align:center;"><i class="bi bi-cart-check-fill"></i> Checkout Book</h1>
    <h2 class="mt-5 mb-5" style="text-align:center;"><i class="bi bi-bookmark-check"></i> Confirm Book Details</h2>
    <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) { %>
        
        <audio src="/sounds/success.mp3" id="error" autostart="true" class="hide"></audio>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
              playSound("error");
            });
        </script>

        <form action="/checkout" method="post" id="checkoutForm">
            <label for="name" style="text-align: left;">Book Title:</label>
            <div id="name" class="form-control form-control-lg mb-5"><%= book.data.name %>&nbsp;</div>

            <label for="author" style="text-align: left;">Author:</label>
            <div id="author" class="form-control form-control-lg mb-5"><%= book.data.author %>&nbsp;</div>

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

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

            <!-- hidden input to know if user wants to checkout book -->
            <input type="hidden" name="checkout" id="checkout" value="false">
            <input type="hidden" id="bookID" name="bookID" value="<%= book.ID %>">

            <!-- 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">
                    <a href="/books" class="btn btn-secondary btn-lg"><i class="bi bi-x-circle-fill"></i> Cancel</a>
                    <button type="button" class="btn btn-success " onclick="submitCheckoutForm()"><i class="bi bi-cart-check-fill"></i> Checkout</button>
                </div>
                </div>
            </div>

            <!-- Checkout Confirmation Modal -->
            <div class="modal fade" id="checkoutConfirmationModal" tabindex="-1" aria-labelledby="checkoutConfirmationModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
                          <h5 class="modal-title" id="checkoutConfirmationModalLabel">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>checkout</strong> this book?
                      </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-success btn-lg" id="confirmCheckoutButton"><i class="bi bi-cart-check-fill"></i> Checkout</button>
                      </div>
                  </div>
              </div>
            </div>

        </form>

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

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

            <audio src="/sounds/error.mp3" id="error" autostart="true" class="hide"></audio>
            <script>
              document.addEventListener('DOMContentLoaded', function() {
                playSound("error");
              });
            </script>
          </div>
        <% } %>
        
    </div>

  </body>
</html> 