diff --git a/src/admin/gym/index.php b/src/admin/gym/index.php
index 92c4ba126d436e001c8aca67912f9125f3e43a29..cc79f2b2c157733eae60003268cb50d4cdfcd364 100644
--- a/src/admin/gym/index.php
+++ b/src/admin/gym/index.php
@@ -116,7 +116,9 @@ AuthMiddleware::getInstance()->secureRoute(true);
<script src="/public/javascript/gym/format_card.js"></script>
<script src="/public/javascript/gym/trainer_card.js"></script>
<script src="/public/javascript/gym/application.js"></script>
+ <script src="/public/javascript/gym/trainer.js"></script>
<script>
+ getGymTrainers();
getGymApplication(<?php echo $gym_id ?>);
</script>
</body>
diff --git a/src/admin/gym/trainer/index.php b/src/admin/gym/trainer/index.php
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..754b726baa4efc329745ed5b0445fac7b41786dd 100644
--- a/src/admin/gym/trainer/index.php
+++ b/src/admin/gym/trainer/index.php
@@ -0,0 +1,44 @@
+<?php
+
+require_once __DIR__ . '/../../../components/NavbarAdmin.php';
+require_once __DIR__ . '/../../../middleware/AuthMiddleware.php';
+
+AuthMiddleware::getInstance()->secureRoute(true);
+
+?>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/public/css/style.css">
+ <link rel="stylesheet" href="/public/css/application.css">
+ <title>Gym Finder App</title>
+</head>
+
+<body>
+ <div class="app">
+ <script>
+ const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+ const urlParams = new URLSearchParams(window.location.search);
+ const gymId = urlParams.get("gym_id");
+ const username = urlParams.get("trainer_username");
+ </script>
+ <?php
+ echo NavbarAdmin();
+ ?>
+ <div class="space"></div>
+ <div class="application-container" id="application-trainer">
+ </div>
+ <div class="space"></div>
+ </div>
+ <script src="/public/javascript/gym/format_card.js"></script>
+ <script src="/public/javascript/gym/trainer_card.js"></script>
+ <script src="/public/javascript/gym/trainer.js"></script>
+ <script>
+ showTrainerData(trainerData[0]); // Temporary example
+ </script>
+</body>
+
+</html>
diff --git a/src/public/javascript/gym/trainer.js b/src/public/javascript/gym/trainer.js
index 5985852addd8226bfeb6e7a24f7b6a1f8b41710c..ffd8d2d2b136cade4a5c045edbb13f0586782c0c 100644
--- a/src/public/javascript/gym/trainer.js
+++ b/src/public/javascript/gym/trainer.js
@@ -1,3 +1,72 @@
-function getTrainer(){
-
+// dummy data
+let trainer_1 = {
+ username: "arnold123",
+ gym_id: 43,
+ trainer_name: "Arnold Schwarzenegger",
+ trainer_description: "Seven times champion of Mr. Olympia",
+ skill_name: "Arnold Press",
+ skill_description: "Shoulder press with slight modification"
+ }
+
+ let trainer_2 = {
+ username: "mike123",
+ gym_id: 43,
+ trainer_name: "Mike O'Hearn",
+ trainer_description: "Baby don't Hearn me",
+ skill_name: "Being natty",
+ skill_description: "Being a real natural (no cap)"
+ }
+
+ let trainerData = [trainer_1, trainer_2];
+
+// Functions
+function getGymTrainers() {
+ showGymTrainers(trainerData);
+}
+
+function showGymTrainers(data) {
+ const gymTrainerList = document.getElementById("gym-trainer-list");
+ gymTrainerList.innerHTML = "";
+ if (data.length == 0) {
+ gymTrainerList.innerHTML = `
+ <div class="space"></div>
+ <div class="gym-card-text"> No Aplication found </div>
+ `;
+ }
+ data.forEach((trainer) => {
+ gymTrainerList.innerHTML += TrainerCard(trainer);
+ });
+}
+
+function showTrainerData(trainer){
+ const gymTrainerList = document.getElementById("application-trainer");
+ gymTrainerList.innerHTML = `
+ <h2>Trainer Application</h2>
+ <table>
+ <tr>
+ <td><strong>Username</strong></td>
+ <td>${trainer.username}</td>
+ </tr>
+ <tr>
+ <td><strong>Gym ID</strong></td>
+ <td>${trainer.gym_id}</td>
+ </tr>
+ <tr>
+ <td><strong>Trainer Name</strong></td>
+ <td>${trainer.trainer_name}</td>
+ </tr>
+ <tr>
+ <td><strong>Trainer Description</strong></td>
+ <td>${trainer.trainer_description}</td>
+ </tr>
+ <tr>
+ <td><strong>Skill</strong></td>
+ <td>${trainer.skill_name}</td>
+ </tr>
+ <tr>
+ <td><strong>Skill Description</strong></td>
+ <td>${trainer.skill_description}</td>
+ </tr>
+ </table>
+ `
}
\ No newline at end of file
diff --git a/src/public/javascript/gym/trainer_card.js b/src/public/javascript/gym/trainer_card.js
index 992d0200ec4886bbc1513d58cd2ae6114bf1ba6a..993bd3e78e2005569274689cdf2c8686b422c90e 100644
--- a/src/public/javascript/gym/trainer_card.js
+++ b/src/public/javascript/gym/trainer_card.js
@@ -39,7 +39,7 @@ function TrainerCard(trainer){
let tname = "trainer name : " + truncated_name;
let tusername = "username : " + trainer.username;
let trainer_card = `
- <a class="gym-card" id="gym-card-${trainer.username}" href="./application/?gym_id=${trainer.gym_id}&trainer_username=${trainer.username}">
+ <a class="gym-card" id="gym-card-${trainer.username}" href="./trainer/?gym_id=${trainer.gym_id}&trainer_username=${trainer.username}">
<div class="trainer-card-text bold">
<div class="gym-card-text-bottom"> ${tname} </div>
<div class="space3"></div>