<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Approval list</title>
<style>
.card {
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 120vh; /* Adjust width as needed */
    max-width: 800px; /* Limit maximum width */
    background-color: white;
    text-align: center; /* Center text horizontally */
}

table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
}

th, td {
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
}

.buttonclss {
    color: white;
    width: 65px;
    background-color: #00cc44;
    height: 32px;
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s ease; /* Add transition for smooth effect */
}

.buttonclss:hover {
    background-color: #008000; /* Change to a darker shade of green on hover */
}


/* Existing CSS styles remain unchanged */

/* New styles for the sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color: black;
    padding-top: 20px;
    text-align: center;
}


.sidebar-icon {
    color: white;
    font-size: 24px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: transform 0.3s; /* Add transition for smooth effect */
}


.sidebar-item:hover .sidebar-icon {
    transform: scale(1.2); /* Zoom effect on hover */
}

.sidebar-item:hover {
    background-color: pink; /* Pink background color on hover */
}

.sidebar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.sidebar-text {
    color: white;
    font-size: 18px; /* Adjust font size as needed */
    margin-left: 10px; /* Add margin to separate icon and text */
}

/* New styles for the footer */
.footer {
    background-color: none;
    padding: 20px;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 250px; /* Adjusted left position to accommodate sidebar width */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* New styles for centering content */
.content-divv {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items at the top */
    height: 100vh;
    margin-left: 150px; /* Adjusted left margin to accommodate sidebar width */
}
</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
  <div class="sidebar-item" onclick="Profile_pic()">
    <img src="/rythm/assets/music.png" alt="music" style="height:4vh;width:4vh;" class="sidebar-icon">
    <span id="musicText" class="sidebar-text">Profile_pic</span>
  </div>
  <div class="sidebar-item" onclick="Profile_details()">
    <img src="/rythm/assets/event.png" alt="addevent" style="height:4vh;width:4vh;" class="sidebar-icon">
    <span id="addeventText" class="sidebar-text">Profile_details</span>
  </div>
</div>

<!-- Content Container -->


<div class="content-divv">

<a href="/rythm/adminlogin/login.php" style="position: absolute; top: 10px; right: 10px;">
    <img src="/rythm/assets/switch.png" style="height: 40px; width: 40px;">
  </a>

<br><br><br><br><br><br>
  <div class="card">
    <h2>Admin Approval list</h2>
    <table>
    <thead>
      <tr>
        <th>No</th>
        <th>Name</th>
        <th>Category</th>
        <th>Status</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <?php
  
      session_start();

      require("connect.php");	

      $username = $_SESSION['username'];
      $rolemaster_id = $_SESSION['rolemaster_id'];
 
      $sql2 = $con->query("SELECT * FROM `profile_details`");

      $inc=0;
      while($profiledtils = $sql2->fetch(PDO::FETCH_ASSOC))
      {
        $inc++;
		  
        $rolemasterid=$profiledtils['rolemaster_id'];
        $getuserdetials=$con->query("SELECT * FROM `user_master` where role_master_id='$rolemasterid'");
	
        $uerdetails = $getuserdetials->fetch(PDO::FETCH_ASSOC);
      ?>
      <tr>
        <td><?php echo $inc;?></td>
        <td><?php echo ucfirst($uerdetails ['user_name']);?></td>
        <td><?php echo ucfirst($uerdetails ['title']);?></td>
		<?php
		if($uerdetails ['admin_status']==0)
		{
		?>
        <td style="color:red;font-weight:500;">Waiting For Your Approval</td>
		<?php
		}
		else if($uerdetails ['admin_status']==1)
		{
		?>
		 <td style="color:green;font-weight:500;">Approved</td>
		<?php
		}
        else if($uerdetails ['admin_status']==2)
        {?>
        <td style="color:red;font-weight:500;">Rejected</td>
        <?php
        }
		?>
        <td><button class="buttonclss" onclick="viewdetails(<?php echo $uerdetails ['id'] ?>);">View</button></td>
      </tr>
      <?php
      }
      ?>
    </tbody>
  </table>
  </div>
</div>

<!-- Footer -->
<!-- <div class="footer">
  <label class="footer-label">© All rights reserved @2024</label><br>
  <label class="footer-label">Developed and Maintained by Bluebase Software Services Private Limited</label>
</div> -->

<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- JavaScript for AJAX functionality -->
<script>
function Profile_pic()
{
$.ajax({
        url: 'admin_approval_list.php', // Replace with your server-side script URL
        type: 'POST',
        // Pass useriddd to the server
        success: function(data) {
            console.warn(data);
			$('.content-divv').html(data);
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });

	
}

function Profile_details()
{
	$.ajax({
        url: 'adminappravalpage.php', // Replace with your server-side script URL
        type: 'POST',
        // Pass useriddd to the server
        success: function(data) {
            console.warn(data);
			$('.content-divv').html(data);
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });
}

function viewdetails(id) {
    //debugger;
	$.ajax({
        url: 'viewuserdetailsforapproval.php?id='+id, // Replace with your server-side script URL
        type: 'POST',
        // Pass useriddd to the server
        success: function(data) {
            console.warn(data);
			$('.card').html(data);
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });
}
</script>
</body>
</html>
