<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Borne V2</title>
    <link rel="stylesheet" href="style.css">
    <link href="css/fontawesome/fontawesome.css" rel="stylesheet">
    <link href="css/fontawesome/brands.css" rel="stylesheet">
    <link href="css/fontawesome/solid.css" rel="stylesheet">
    <script src="jquery.min.js"></script>
  </head>
  <body>
    <div class="content">

      <div class="playlistSongSet" id="playlistSongSet">
        <span class="version">v1.0.0.0</span>

        <div class="logoSection">
          <i class="fa-solid fa-lightbulb"></i>
          <img src="../logo.png" alt="Logo" class="logo">
        </div>

        <div class="btnFilters">
          <a href="#"><i class="fa-solid fa-arrow-down-1-9"></i></a>
          <a href="#"><i class="fa-solid fa-arrow-up-a-z"></i></a>
          <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
          <a href="#"><i class="fa-solid fa-brush"></i></a>
          <a href="#"><i class="fa-solid fa-layer-group"></i></a>

          <select class="discotheque" name="discotheque">
            <option value="DISCOTHEQUE">DISCOTHEQUE</option>
            <option value="CLIPS">CLIPS</option>
            <option value="JINGLES">JINGLES</option>
            <option value="MUSIQUES">MUSIQUES</option>
          </select>

          <button type="button" name="button" class="audioSelectBtn">AUDIO</button>

          <input type="text" name="" placeholder="RECHERCHER" class="rechercher" id="rechercher" onkeyup="searchSong()">

          </div>

          <ul class="listSongs" id="listSongs">
            <?php
            include('./../connectDB.php');
            $conn = mysqli_connect($servername, $username, $password, $dbname);
            // Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            }

            $sql = "SELECT ID, title, artist, duration FROM songs";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    echo "<li onclick=\"setSongid(this);\" data-song-id=\"". utf8_encode($row["ID"])."\">
                      <span style=\"display:none;\">". utf8_encode($row["ID"])." ". utf8_encode($row["title"])." ". utf8_encode($row["artist"])."</span>
                      <span class=\"idSong\">". utf8_encode($row["ID"])."</span>
                      <div class=\"songInfos\">
                        <span class=\"titleSong\">". utf8_encode($row["title"])."</span>
                        <span class=\"artistSong\">". utf8_encode($row["artist"])."</span>
                      </div>
                    </li>
                    ";
                }
            } else {
                echo "<li>
                  <span class=\"idSong\">0000</span>
                  <div class=\"songInfos\">
                    <span class=\"titleSong\">NO DATA</span>
                    <span class=\"artistSong\">NO DATA</span>
                  </div>
                </li>";
            }

            $conn->close();
           ?>


<!--<li onclick="setSongid(this);" data-song-id="212">
  <span style="display:none;"></span>
  <span class="idSong">212</span>
  <div class="songInfos">
    <span class="titleSong">MonTitre212</span>
    <span class="artistSong">MonArtiste212</span>
  </div>
</li>
<li onclick="setSongid(this);" data-song-id="215">
  <span style="display:none;"></span>
  <span class="idSong">215</span>
  <div class="songInfos">
    <span class="titleSong">MonTitre215</span>
    <span class="artistSong">MonArtiste215</span>
  </div>
</li>-->

          </ul>

          <div class="bottomBtnParams">
            <a href="#"><i class="fa-solid fa-file-invoice"></i></a>
            <a href="#"><i class="fa-regular fa-clock"></i></a>
            <a href="#"><i class="fa-solid fa-wrench"></i></a>
            <a href="#"><i class="fa-regular fa-square-check"></i></a>
            <a href="#"><i class="fa-solid fa-info"></i></a>
            <a href="#"><i class="fa-brands fa-itunes-note"></i></a>
            <a href="#"><i class="fa-solid fa-gauge-high"></i></a>
            <a href="#"><i class="fa-solid fa-floppy-disk"></i></a>
          </div>

        </div>
      </div>
















<iframe src="" name="updateSongid" id="updateSongid" style="display:none;"></iframe>
<div class="detailsBorne">
  <button accesskey="o" type="button" name="button" class="setAudio" id="cdwall1" onclick="updateSongCD1(this)" data-songid-cdwall="">CD 1</button>
  <button accesskey="p" type="button" name="button" class="setAudio" id="cdwall2" onclick="updateSongCD2(this)" data-songid-cdwall="">CD 2</button>
  <button accesskey="l" type="button" name="button" class="setAudio" id="cdwall3" onclick="updateSongCD3(this)" data-songid-cdwall="">CD 3</button>
  <button accesskey="m" type="button" name="button" class="setAudio" id="cdwall4" onclick="updateSongCD4(this)" data-songid-cdwall="">CD 4</button>
  <br>
  <!--<button accesskey="" type="button" name="button" class="setAudio" id="cart1" onclick="updateSongCART1(this)" data-songid-cart="">CART 1</button>-->
  <button accesskey="m" type="button" name="button" class="setAudio"><i class="fa-solid fa-up-long"></i></button>
  <button accesskey="m" type="button" name="button" class="setAudio"><i class="fa-solid fa-down-long"></i></button>
  <br>
  <button accesskey="m" type="button" name="button" class="setAudio" onclick="window.location.reload();"><i class="fa-solid fa-arrows-rotate"></i></button>
</div>

    <script src="app.js"></script>
  </body>
</html>
