<%- include('header') %>

  <div class="col-span-5 lg:col-span-4 rounded-xl overflow-y-scroll p-2 sm:p-4 lg:p-5 xl:p-9"
    style="background: #dfdff773;">
    <div>
      <div class="grid grid-cols-1 sm:grid-cols-4  mb-5 lg:mb-10 px-2 mt-3">
        <div class="text-center sm:text-left col-span-3 my-auto mb-3 sm:mb-0">
          <h2 class="text-2xl font-medium lg:text-3xl lg:font-semibold">Games</h2>
        </div>
        <div class="text-center sm:text-right my-auto">
          <button class="addbtnstyle" onclick="newaddapplication()">Add Games</button>
          <div class="absolute inset-0 backdrop-blur-xl rounded-xl p-3 lg:p-10 grid overflow-scroll hidden z-20"
            id="newaddapplication" style="background: #b5b8c570;">
            <div class="bg-white w-6/6 lg:w-4/12 m-auto rounded-2xl relative">
              <form method="POST" action="/admin/game" enctype="multipart/form-data">
                <div class="grid grid-cols-4 p-4 lg:p-6" style="border-bottom: 5px solid #cfd1e0;">
                  <div class="col-span-3">
                    <div class="text-base lg:text-xl font-semibold text-left">Create New Game</div>
                  </div>
                  <div class="text-right my-auto"><i class="fa-solid fa-xmark lg:text-lg cursor-pointer"
                      onclick="newaddapplicationremove()"></i></div>
                </div>
                <div class="p-4 lg:p-6">
                  <div>

                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Name</div>
                      <div><input type="text" name="name" id="name" class="textfiled" required></div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Category</div>
                      <div>
                        <select name="category" id="category" class="textfiled" required>
                          <option value="2 Player">2 Player</option>
                          <option value="3D">3D</option>
                          <option value="Action">Action</option>
                          <option value="Adventure">Adventure</option>
                          <option value="Arcade">Arcade</option>
                          <option value="Featured">Featured</option>
                        </select>
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Description 1</div>
                      <div>
                        <textarea name="description" id="description" class="textfiled" cols="30" rows="5"
                          required></textarea>
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Description 2</div>
                      <div>
                        <textarea name="description_two" id="description_two" class="textfiled" cols="30" rows="5"
                          required></textarea>
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Description 3</div>
                      <div>
                        <textarea name="description_three" id="description_three" class="textfiled" cols="30" rows="5"
                          required></textarea>
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Description 4</div>
                      <div>
                        <textarea name="description_four" id="description_four" class="textfiled" cols="30" rows="5"
                          required></textarea>
                      </div>
                    </div>

                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Banner Image</div>
                      <div><input type="file" name="bannerImage" id="bannerImage" required
                          class="textfiled file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Game Logo</div>
                      <div><input type="file" name="logo" id="logo" required
                          class="textfiled file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Link</div>
                      <div><input type="text" name="link" id="link" class="textfiled" required></div>
                    </div>
                  </div>
                </div>
                <div class="p-2 lg:p-4 text-center" style="border-top: 5px solid #cfd1e0;">
                  <input type="submit" value="Save"
                    class="px-4 py-2 text-white rounded-lg tracking-wider formsubmit font-medium cursor-pointer">
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="p-5 bg-white rounded-xl">
          <table class="table-fixed lg:w-full montabel" id="datatablemain">
            <thead>
              <tr>
                <th>Game Logo</th>
                <th>Banner Image</th>
                <th>Name</th>
                <th>Category</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <% data.forEach((data)=>{ %>
                <tr>
                  <td> <img src="<%- data.logo %>" class="rounded-xl" width="100"></td>
                  <td> <img src="<%- data.bannerImage %>" class="rounded-xl" width="100"></td>

                  <td style="word-break: break-word">
                    <%- data.name %>
                  </td>
                  <td style="word-break: break-word">
                    <%- data.category %>
                  </td>

                  <td>
                    <a class="p-2 cursor-pointer"
                      onclick="editapplicationmodel({title:'<%- data.name%>',description:'<%- btoa(data.description)%>',description_two:'<%- btoa(data.description_two)%>',description_three:'<%- btoa(data.description_three)%>',description_four:'<%- btoa(data.description_four)%>',link:'<%- data.link%>' ,id:'<%- data.id %>',category:'<%- data.category %>'})"><i
                        class="fa-solid fa-pen-to-square" style="color: #25d366;"></i></a>
                    <a class="p-2 cursor-pointer" href="/admin/game/delete/<%- data.id %>"><i class="fa-solid fa-trash"
                        style="color: #e9562a;"></i></a>
                  </td>
                </tr>
                <% }) %>
            </tbody>
          </table>
        </div>
        <div class="absolute inset-0 backdrop-blur-xl rounded-xl p-3 lg:p-10 grid overflow-scroll hidden"
          id="editpopupmodul" style="background: #b5b8c570;">
          <div class="bg-white w-6/6 lg:w-4/12 m-auto rounded-2xl relative">
            <div>
              <form action="/admin/game/edit" method="POST" enctype="multipart/form-data">
                <div class="grid grid-cols-4 p-4 lg:p-6" style="border-bottom: 5px solid #cfd1e0;">
                  <div class="col-span-3">
                    <div class="text-base lg:text-xl font-semibold">Edit Game</div>
                  </div>
                  <div class="text-right my-auto"><i class="fa-solid fa-xmark lg:text-lg cursor-pointer"
                      onclick="editapplicationmodelremove()"></i></div>
                </div>
                <div class="p-4 lg:p-6">
                  <div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Name</div>
                      <div><input type="text" id="title-edit" name="name" class="textfiled" required></div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Category</div>
                      <div>
                        <select name="category" id="edit-category" class="textfiled" required>
                          <option value="2 Player">2 Player</option>
                          <option value="3D">3D</option>
                          <option value="Action">Action</option>
                          <option value="Adventure">Adventure</option>
                          <option value="Arcade">Arcade</option>
                          <option value="Featured">Featured</option>
                        </select>
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Description</div>
                      <div>
                        <textarea name="description" id="description-edit" cols="30" rows="5" class="textfiled"
                          required></textarea>
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Description 2</div>
                      <div>
                        <textarea name="description_two" id="description_two-edit" cols="30" rows="5" class="textfiled"
                          required></textarea>
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Description 3</div>
                      <div>
                        <textarea name="description_three" id="description_three-edit" cols="30" rows="5"
                          class="textfiled" required></textarea>
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Description 4</div>
                      <div>
                        <textarea name="description_four" id="description_four-edit" cols="30" rows="5"
                          class="textfiled" required></textarea>
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Banner Image</div>
                      <div><input type="file" name="bannerImage" id="bannerImage"
                          class="textfiled file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Game Logo</div>
                      <div><input type="file" name="logo" id="logo"
                          class="textfiled file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                      </div>
                    </div>
                    <div class="mb-1 lg:mb-3">
                      <div class="text-sm lg:text-base font-medium mb-1 text-left">Link</div>
                      <div><input type="text" name="link" id="edit-link" class="textfiled"></div>
                    </div>
                  </div>
                </div>
                <div class="p-2 lg:p-4 text-center" style="border-top: 5px solid #cfd1e0;">
                  <input type="hidden" name="id" id="id-edit">
                  <input type="submit" value="Save Edit"
                    class="px-4 py-2 text-white rounded-lg tracking-wider formsubmit font-medium cursor-pointer">
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>

    function editapplicationmodel(data) {
      document.getElementById("title-edit").value = data.title;
      document.getElementById("id-edit").value = data.id;
      document.getElementById('edit-link').value = data.link
      document.getElementById('edit-category').value = data.category
      document.getElementById("description-edit").value = atob(data.description);
      document.getElementById("description_two-edit").value = atob(data.description_two);
      document.getElementById("description_three-edit").value = atob(data.description_three);
      document.getElementById("description_four-edit").value = atob(data.description_four);



      const classgetmodul = document.getElementById('editpopupmodul');
      classgetmodul.classList.remove("hidden");
    }

    function editapplicationmodelremove() {
      const classgetmodul = document.getElementById('editpopupmodul');
      classgetmodul.classList.add("hidden");
    }

    function newaddapplication() {
      const classgetmodul = document.getElementById('newaddapplication');
      classgetmodul.classList.remove("hidden");
    }

    function newaddapplicationremove() {
      const classgetmodul = document.getElementById('newaddapplication');
      classgetmodul.classList.add("hidden");
    }
  </script>
  <%- include('footer') %>