<?php

if (session_status() == PHP_SESSION_NONE) {
    session_start();
    header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="res/bootstrap@5.2.0.min.css">
    <link rel="stylesheet" href="res/chartist.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&family=Nunito+Sans&display=swap" rel="stylesheet">
 
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>  
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>  
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>  
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>  
<link rel="icon" href="../img/logo.png" type="image/png">
 <link rel="" src="../calendar/fullcalendar/fullcalendar.min.css"></link>
  <script  src="../calendar/fullcalendar/fullcalendar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <link rel="icon" href="favicon.png" type="image/png">
    <meta name="theme-color" content="#17cc27">
    <link rel="manifest" href="../manifest.json">
    <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    <title></title>
    
</head>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

    #loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure the loading overlay appears on top of everything */
}

.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #007bff; /* Primary color */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none;
}

    
body{
  background:white;
  font-family: 'Poppins', sans-serif;
  font-size:14px;
}
form{
background:white;
padding:10px;
}
head{
background:#202342;

}
nav{
  line-height: 60px;
 background:;
 display: flex;
  background :#17cc27;
 z-index:999999;
 position:fixed;
 width:100%; 
}
#sidebar{
  width: 210px;
  position: fixed ;
 z-index:99999;
  margin-top:60px;
  height: 100vh;
  background:white ;
  transition: 1s;
}
li{
  list-style: none;
}
#sidebar.active{
  left: px;
}
#sidebar i{
  color: #17cc27;
  font-size: 25px;
}
#sidebar li a{
  text-decoration: none;
  color: #707477;

}
#sidebar li{
  padding: 13px;
}
#sidebar li:hover{
  background: #20234259;
  border-radius: 40px 0px 0px 40px;
}

.dropdown-menu  a{
 display: block;
 text-decoration: none;
 color: #707477;
}
.dropdown-menu i{
color: #707477;
}
.dropdown-menu a:hover{
color: #20234259;
background: transparent;
}
.dropdown i{
 color:#
}
label{
  margin-left: 15px;
  font-size: 14px;
  color: ;
}
#drop{
  margin-left: 60%;
}
.strong{
  margin-left: 0px;
}
.ic{
  margin-top: 13px;
  margin-left: 10px;
}
#sidebar .active{
width:20px;
height:20px;
background:green;

display:inline;
}
 .bottom{
      position: fixed;
      top: 92%;
      z-index: 9999;
      height:80px;
      width: 100%;
      background: white;
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
      
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }
    .card{
      border: none;
      border-radius:0px;
      width: 100%;
    }
    .content{
      margin-bottom:190px;
    }
    .bottom a{
      font-size: 23px;
      padding: 5px;
      color: gray;
      margin-left: 10px;
      margin-right: 10px;
      text-decoration:none;
    }
    .bottom #a{
      color: #84E2BD;
      text-align:center;
      
    }
    
    .bttom{
      display: block;
      text-align: center;
    }
    .bttom span{
      display:block;
      text-align-last: center;
      margin-top: -5px;
    }
    .whatsapp{
  position:fixed;
  top:84%;
  left:70%;
  background: orangered;
  line-height:40px;
  width:100px;
  justify-items: center;
  text-decoration: none;
  z-index:9999;
  font-size:20px;
  margin-top: 10px;
  text-align: center;
  
  }
  .whatsapp span{
  font-weight: bold;
  color:white;
  font-size:16px;
  margin-top: 15px;
  }
  
@media only screen and (max-width:600px){
#drop{
  margin-left: 30%;
}
.strong{
  margin-left: 20px;
}
#sidebar{
  width: 200px;
  position: fixed;
  left: -200px;
  
  height: 100vh;
  background:white ;
  transition: 1s;
}
li{
  list-style: none;
}
#sidebar.active{
  left: 0px;
}
.content{
margin-left:0px;
height:100vh;
}
.bottom #a{
    text-decoration:none;
}

}
    </style>
</head>
<body>
<script
src='//uae.fw-cdn.com/40252214/156164.js'
chat='true'>
</script>
<header style="background:#202342;" >

</header>


<nav class="nav bg- text-white" >

    <label class="" style="font-size:20px; color:white;padding:3px; background:;border-radius:;"  onclick="shownavbar()"><i class="fa fa-navicon"></i></label>

     <img class="ic" src="../logo.png" alt="" width="30px" height="30">
    
    <strong class="strong" style="font-weight: bold; font-size:14px;color:white;">UNICOHS PORTAL</strong>



</nav>
<?php
     $studentid=$_SESSION['studentid'];
     $query=mysqli_query($conn, "select *from students where studentid='$studentid'");
     while($row=mysqli_fetch_array($query)){?>
<div id="sidebar" class="">
      <center style="  background:#17cc27; padding:12px;">
    <img src="../img/avatar.png" alt="images" width="70px" height="70px" style="border-radius: 50%; border:2px solid white;">
    <p style="color: #707477; font-size:13px;"> hojn </p>
    
    <p style="color:;font-size:17px; font-weight:bold; margin-top:-10px;" class="" style="color:"> <i class="fa fa-"></i> home</p>
  </center>
  <div style="background:#e0e1e9; " >
      <li style="margin-left:30px"; ><a href="dashboard" title="dashboard"><i class="fa fa-dashboard"></i> Dashboard</a></li>
      </div>
      
    
    <ul>
        <div class="dropdown bg-white"  >
        <li class=" dropdown-toggle "  style="color:#707477;"  data-bs-toggle="dropdown" ><i class="fa fa-edit"></i> Admin Role</a></li>

  <ul class="dropdown-menu " style="; border-radius:0px;border:none; width:100%; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);">

    <a href="smsac" class="dropdown-item" style=""><i class="fa fa-phone" style="font-size:17px"></i> SMS</a></li>   
  <a class="dropdown-item" style="" href="export"><i class="fa fa-pie-chart " style="font-size:17px"></i> Staff Return</a></li>
<a class="dropdown-item" style="" href="preport"><i class="fa fa-users " style="font-size:17px"></i>  Pupils Count</a></li>
<a class="dropdown-item" style="" href="timetable_insert"><i class="fa fa-calendar " style="font-size:17px"></i> Timetable</a></li>
<a class="dropdown-item" style="" href="teachers"><i class="fa fa-graduation-cap" style="font-size:17px"></i> Teachers</a></li>
<a class="dropdown-item" style="" href="idform"><i class="fa fa-address-card-o" style="font-size:17px"></i> Pupils IDs</a></li>


<a class="dropdown-item" style="font-size:17px" href="articles"><i class="fa fa-link" style="font-size:17px"></i> Post Articles</a>
<a class="dropdown-item" style="font-size:17px" href="userguide"><i class="fa fa-rss " style="font-size:17px"></i> User Guide</a></li>

        <a class="dropdown-item" style="font-size:17px" href="https://chat.whatsapp.com/Gnx9BTZRBEN4tGytzwNADE"><i class="fa fa-question " style="font-size:17px"></i> Ask</a></li>
  </ul>
</div>
    
 
<?php
    
}
?>  

       
        
    <li><a href="collection"><i class="fa fa-money"></i> Payments </a></li>
    <li><a href="behaviour"><i class="fa fa-folder-open"></i> CA</a></li>

        
<li><a href="updatepro"><i class="fa fa-cogs"></i> Settings </a></li>
        
        
        <li><a href="logout"><i class="fa fa-sign-out"></i> Logout</a></li>
    </ul>
</div>


<script>
$(document).ready(function() {
    $('#myTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
        lengthMenu: [[200], [200]] 
    });
});

  function shownavbar(){
 document.getElementById("sidebar").classList.toggle('active');
  }
  shownav();
  
  window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later
  deferredPrompt = event;
  // Optionally, display a button or other UI element to indicate that
  // the user can add the app to the home screen
  showAddToHomeScreenButton();
});

function showAddToHomeScreenButton() {
  // Display a button or UI element to indicate that the user can add the app to the home screen
  const addToHomeScreenButton = document.getElementById('addToHomeScreenButton');
  addToHomeScreenButton.style.display = 'block';

  // Attach a click event listener to the button to trigger the prompt when clicked
  addToHomeScreenButton.addEventListener('click', () => {
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      // Reset the deferredPrompt variable, as it can only be used once
      deferredPrompt = null;
    });
  });
}

window.addEventListener("load", function() {
  console.log("Page fully loaded");
  var loadingOverlay = document.getElementById("loading-overlay");
  if (loadingOverlay) {
    console.log("Loading overlay found");
    loadingOverlay.classList.add("hidden"); // Hide the loading overlay once the page is fully loaded
  } else {
    console.log("Loading overlay not found");
  }
});
document.addEventListener("DOMContentLoaded", function() {
  document.title = "Zamschool App"; // Change the title when the DOM content is loaded
});

</script>


<script>

$(document).ready(function () {
    var calendar = $('#calendar').fullCalendar({
        editable: true,
        events: "fetch-event.php",
        displayEventTime: false,
        eventRender: function (event, element, view) {
            if (event.allDay === 'true') {
                event.allDay = true;
            } else {
                event.allDay = false;
            }
        },
        selectable: true,
        selectHelper: true,
        select: function (start, end, allDay) {
            var title = prompt('Event Title:');

            if (title) {
                var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");

                $.ajax({
                    url: 'add-event.php',
                    data: 'title=' + title + '&start=' + start + '&end=' + end,
                    type: "POST",
                    success: function (data) {
                        displayMessage("Added Successfully");
                    }
                });
                calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                true
                        );
            }
            calendar.fullCalendar('unselect');
        },
        
        editable: true,
        eventDrop: function (event, delta) {
                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                    $.ajax({
                        url: 'edit-event.php',
                        data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                        type: "POST",
                        success: function (response) {
                            displayMessage("Updated Successfully");
                        }
                    });
                },
        eventClick: function (event) {
            var deleteMsg = confirm("Do you really want to delete?");
            if (deleteMsg) {
                $.ajax({
                    type: "POST",
                    url: "delete-event.php",
                    data: "&id=" + event.id,
                    success: function (response) {
                        if(parseInt(response) > 0) {
                            $('#calendar').fullCalendar('removeEvents', event.id);
                            displayMessage("Deleted Successfully");
                        }
                    }
                });
            }
        }

    });
});

function displayMessage(message) {
	    $(".response").html("<div class='success'>"+message+"</div>");
    setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>
<div class="bottom" style="width:100%;">
     <a href="dashboard" id="a">
  <div class="bttom">
     <i class="fa fa-home" ></i>
     <span style="font-size:15px">Home</span>
  </div>
  </a>
  
<a href="bulkentery">
  <div class="bttom">
   <i style="font-size:20px" class="fa fa-share"></i>
     <span style="font-size:15px">Sync</span>
  </div>
  </a>
  
  <a href="bulkedit">
  <div class="bttom">
   <i class="fa fa-edit"></i>
     <span style="font-size:15px">Marks</span>
  </div>
  </a>
  
   <a href="event">
  <div class="bttom">
    
  <i class="fa fa-calendar"></i>
     <span style="font-size:15px">Event</span>
  </div>
 </a>
 
  <a href="updatepro">
 <div class="bttom">
    <i class="fa fa-cogs"></i>
     <span style="font-size:15px">Profile</span>
  </div>
</a>

</div>

</body>
</html>
