<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scan Barcode - 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>

<div class="container mt-5">
    <h1 class="text-center"><i class="bi bi-upc-scan"></i> Scan Barcode for Checkout</h1>
</div>

<div id="barcode-scanner" class="container"></div>
<br>

<div class="container mt-5">
    <a href="/" class="btn btn-primary btn-lg"><i class="bi bi-house-door-fill"></i> Home</a>
    <a href="/books" class="btn btn-primary btn-lg"><i class="bi bi-book-fill"></i> Books</a>
</div>

<!-- Include the QuaggaJS library -->
<script src="https://cdn.jsdelivr.net/npm/quagga/dist/quagga.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Configure QuaggaJS
        Quagga.init({
            inputStream : {
                name : "Live",
                type : "LiveStream",
                target: document.querySelector('#barcode-scanner')
            },
            decoder : {
                readers : ["ean_reader"]
            }
        }, function(err) {
            if (err) {
                console.error("Quagga initialization failed: ", err);
                return;
            }
            console.log("Initialization finished. Ready to start");
            Quagga.start();
        });

        // Add event listener for barcode detection
        Quagga.onDetected(function(result) {
            var code = result.codeResult.code;
            fetchBookDetails(code);
        });

        // Function to fetch book details from the API
        function fetchBookDetails(isbn) {
            var apiUrl = 'https://openlibrary.org/api/books?bibkeys=ISBN:' + isbn + '&jscmd=details&format=json';
            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    var bookDetails = data['ISBN:' + isbn].details;
                    if (!bookDetails) {
                        throw new Error('Book details not found');
                    }
                    var title = bookDetails.title || '';
                    var author = bookDetails.authors ? bookDetails.authors[0].name : '';
                    var publishDate = bookDetails.publish_date || '';
                    var genre = bookDetails.subjects ? bookDetails.subjects[0] : ''; // Assuming the first subject as genre
                    var isbn10 = bookDetails.isbn_10 ? bookDetails.isbn_10[0] : '';

                    // Redirect to add-book.html with the book details as query parameters
                    window.location.href = '/checkout?name=' + encodeURIComponent(title);
                })
                .catch(error => {
                    console.error('Error fetching book details:', error);
                });
        }
    });
</script>

</body>
</html>
