<!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="suchergebnisse.css"/>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <title>Candle Bibliothek | Bücher</title>
           <link rel="icon" href="pictures/candle.png">
           <script src="notwendiges_laden.js" defer></script>
       </head>
       <body>
       <header id="header"></header>
           <div class="containerofbuecher">
               <p id="büchertitel">Bücher</p>
               <?php
               $sql = '';

               // 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
                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);
               $counter = 0;
               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'];

                       if ($counter != 0) {
                           echo "<div class='divider'></div>";
                       }
                       // TODO: OnClick auslagern.
                       echo "<div id='book_container$bookID' class='book_container' 
                            onclick='open_bookDetails(this.id)'>
                            <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';
                                            }
                                        })();
                                    </script>
                                </div>
                            </div>
                            <div class='shoppingCart_container'>
                                <div class='shoppingCart'></div>
                            </div>
                        </div>";
                       $counter++;
                   }
               } else {
                   echo "Keine Ergebnisse.";
               }

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

               mysqli_close($connection);

               ?>
   
                   </div>

   
           
   
           <!--Link JS file-->
           <script src="burgerIcon.js"></script>
           <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>
   <!--Burger-->
           <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 id="footer" class="fuss" ></footer>
       </body>
       
   </html>
    