<!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">
    </head>
    <body>
        <header>
            <h1 class="kopf" >
                <br><br>
                Bibliothek <a href="index.html" 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.html">Über Uns</a>
                <a  id="buecher" href="buecher.html">Bücher</a> 
                <a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
                <a  id="abmelden" href="abmelden.php">Abmelden</a>
                <form action="">
                    <input 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.html">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
            /* Übergebene ID des angeklickten Container speichern */
            $containerID = $_GET['bookID'];

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

            /* SQL-Befehl zusammenstellen */
            $sql = "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: ', 'Test!')) 
            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 = $ID
            GROUP BY b.BuchID;";

            $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());
            }

            $result = mysqli_query($connection, $sql);
            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='pictures/$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">
               <div class="navLinks">
                   <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
                   <label for="nav-toggle" class="icon-burger" >
                       <div class="line"></div>
                       <div class="line"></div>
                       <div class="line"></div>
                   </label>
               </div>
           </nav>
   
   
           <footer class="fuss" >
               <div> 
                   <a id="impressum" href="impressum.html">Impressum</a>
                   <a  id="kontakt" href="kontakt.html">Kontakt</a> 
                   <a  id="datenschutz" href="datenschutz.html">Datenschutz</a>
               
               </div>
           </footer>
    </body>
</html>