<!DOCTYPE html>
<html>
    <head>
        <meta lang="de"/>
        <meta charset="utf-8"/>
        <meta name="viewport" content="device=device-width, initial-scaling=1"/>
        <link rel="Stylesheet" type="text/css" href="style.css"/>
        <link rel="Stylesheet" type="text/css" href="buch_details.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <title>Candle Bibliothek | Details</title>
        <link rel="icon" href="pictures/candle.png">
        <script src="notwendiges_laden.js" defer></script>
    </head>
    <body>
    <header id="header">
        <h1 class="kopf" >
            <br><br>
            Bibliothek
            <a href="index.php" id="bildID">
                <img id="CandleID" src="pictures/candle.png"
                     alt="Bild von einer Kerze" width="200" height="192"/></a>
            <br><br>
            Candle
        </h1>
        <div>
            <a id="uberuns" href="uberuns.php">Über Uns</a>
            <a id="buecher" href="buecher.php">Bücher</a>
            <a id="meinebuecher" href="anmelden_meinebuecher.php">
                Meine Bücher</a>
            <?php
            session_start();
            if(isset($_SESSION["eingeloggt"])  && $_SESSION["eingeloggt"] == 1 ){
                echo "<a id='abmelden' href='abmelden.php'>Abmelden</a>";}
            ?>
            <form action="suchergebnisse.php">
                <input type="hidden" name="searchType" value="simple">
                <input name="searchFor" class="suchleiste" type="search"
                       placeholder="Suche...">
                <button type="submit" id="buttonID" class="searchButton">
                    <i class="fa fa-search"></i>
                </button>
            </form>
            <a id="erweitertesuche" href="erweitertesuche.php">
                Erweiterte Suche</a>
            <a href="anmelden.php" id="warenKorbID">
                <img id="shoppingCard" src="pictures/einkaufswagen.png"
                     alt="Bild von einem Wagen" width="50" height="50"/>
            </a>
        </div>
    </header>

    <!------------------------------------------------------------------------->

    <div class="hauptcontainer">
        <?php
            $servername = "localhost";
            $username = "web_b-3";
            $password = "een7Ao6s";
            $dbname = "bibliothek_candle";

            $connection = 
                mysqli_connect($servername, $username, $password, $dbname);

            if (!$connection) {
                die("Verbindung fehlgeschlagen: " . mysqli_connect_error());
            }

            /* SQL-Befehl vorbereiten */
            $sql = $connection->prepare("SELECT b.BuchID, b.Titel, 
            b.Erscheinungsjahr, b.Bild, b.Verlag, 
            GROUP_CONCAT(DISTINCT CONCAT(a.VorName, ' ', a.NachName) 
            SEPARATOR ', ') AS 'Autor',
            GROUP_CONCAT(DISTINCT k.Name SEPARATOR ', ') AS 'Kategorie',
            b.ISBN, b.Klappentext AS 'Inhalt', sp.Bezeichnung AS 'Sprache',
            GROUP_CONCAT(DISTINCT st.Text SEPARATOR ', ') AS 'Stichwort',
            IF(b.Anzahl!=0, 'Verfügbar', CONCAT('Verfügbar ab: ', 
            (SELECT DATE_FORMAT(DATE_ADD(ab.Enddatum, INTERVAL 1 DAY)
            ,'%d.%m.%Y') FROM `ausgeliehenes_buch` AS ab  
            WHERE ab.BuchID = b.BuchID 
            ORDER BY ab.Reserviert ASC, ab.Enddatum  ASC LIMIT 1))) 
            AS 'Verfügbarkeit' FROM `buch` AS b
            INNER JOIN `buch_verfasst_von_autor` AS bvva 
            ON b.BuchID = bvva.BuchID
            INNER JOIN `autor` AS a ON bvva.AutorNr = a.AutorNr
            INNER JOIN `buch_hat_kategorie` AS bhk ON bhk.BuchID = b.BuchID
            INNER JOIN `kategorie` AS k ON k.KategorieID = bhk.KategorieID
            INNER JOIN `sprache` AS sp ON sp.SprachenID = b.SprachenID
            INNER JOIN `buch_hat_stichwort` AS bhs ON bhs.BuchID = b.BuchID
            INNER JOIN `stichwort` AS st ON st.StichwortID = bhs.StichwortID
            WHERE b.BuchID = ?
            GROUP BY b.BuchID;");

            // Parameter binden
            $sql->bind_param("i", $ID);

            // Übergebene ID des angeklickten Container speichern
            $containerID = $_GET['bookID'];

            // Buch ID abtrennen
            $ID = str_replace('book_container', '', $containerID);

            // SQL-Befehl ausführen
            $sql->execute();

            // Ergebnis speichern
            $result = $sql->get_result();

            if (mysqli_num_rows($result) > 0) {
                while($row = mysqli_fetch_assoc($result)) {
                    $bookID = $row['BuchID'];
                    $bookCover = $row['Bild'];
                    $bookTitle = $row['Titel'];
                    $bookPublishingYear = $row['Erscheinungsjahr'];
                    $bookPublisher = $row['Verlag'];
                    $bookAuthor = $row['Autor'];
                    $bookCategory = $row['Kategorie'];
                    $bookAvailability = $row['Verfügbarkeit'];
                    $bookContent = $row['Inhalt'];
                    $bookISBN = $row['ISBN'];
                    $bookLanguage = $row['Sprache'];
                    $bookKeywords = $row['Stichwort'];

                    /* TODO: OnClick auslagern. */
                    echo
                    "<div id='bookInfo_container'>
                        <div class='book_container'>
                            <div class='bookCover_container'>
                                <img class='bookCover' 
                                    src='book_covers/$bookCover'
                                    alt='Kein Bild vorhanden'>
                            </div>
                            <div class='bookDetails_container'>
                                <h2 class='bookTitle'>$bookTitle</h2>
                                <div class='bookDetails'>
                                    <p class='author'>Verfasser: $bookAuthor</p>
                                    <p class='publishing_year'>Erscheinungsjahr: 
                                        $bookPublishingYear</p>
                                    <p class='publisher'>Verlag: 
                                        $bookPublisher</p>
                                    <p class='category'>Kategorie: 
                                        $bookCategory</p>
                                </div>
                                <div class='available_container'>
                                    <p id='available_$bookID' class='available'>
                                        $bookAvailability</p>
                                    <!--TODO: Auslagern-->
                                    <script type='text/javascript' 
                                        language='JavaScript'>
                                        (function() {
                                            var currentElement = document.
                                                getElementById
                                                ('available_$bookID');
                                            var parentDiv = 
                                                currentElement.parentElement;
                                            if (currentElement.innerHTML.trim() 
                                                == 'Verfügbar') {
                                                parentDiv.style.backgroundColor 
                                                = '#70AD47';
                                            }
                                            else {
                                                parentDiv.style.backgroundColor 
                                                = '#F34343';
                                            }
                                            var newTitle = 
                                            'Candle Bibliothek | $bookTitle';
                                            document.title = newTitle;
                                        })();
                                    </script>
                                </div>
                            </div>
                            <div class='shoppingCart_container'>
                                <div class='shoppingCart'></div>
                            </div>
                        </div>
                        <div class='content_container'>
                            <h2 class='bookContent_heading'>Inhalt</h2>
                            <p class='bookContent'>$bookContent</p>
                        </div>
                        <div class='bookMoreDetails_container'>
                            <h2 class='bookDetails_heading'>Details</h2>
                            <p class='bookISBN'>ISBN: $bookISBN</p>
                            <p class='bookLanguage'>Sprache: $bookLanguage</p>
                            <p class='bookKeywords'>Stichwörter: 
                                $bookKeywords</p>
                        </div>
                    </div>";
                }
            } else {
                echo "Keine Infos vorhanden.";
            }

            if (!$result) {
                die("Ungültige SQL-Abfrage: " . mysqli_connect_error());
            }

            mysqli_close($connection);
            
        ?>
    </div>

    <!------------------------------------------------------------------------->

    <!--Link JS file-->
    <script src="burgerIcon.js"></script>
    <!--If it was small and got big, 
        it calls the function only one time and doesn't do it all the time-->
    <script>
        var widthissue = false;
        window.addEventListener("resize", function(event) {
            if(window.innerWidth > 800 && widthissue) {
                widthissue = false
                unset()
            } 
            else if(window.innerWidth < 800) widthissue = true;
        })
    </script>
   
    <nav id="activeid" class="active"></nav>
   
    <footer id="footer" class="fuss" ></footer>
    
    </body>
</html>