<?php
session_start();
require '../db.php'; 
require '../functions.php';

if(isset($_SESSION['ADMIN_LOGIN'])){
    
}else{
    echo "<script>window.location.href = 'login.php' </script>";
} 

 ?> 
<!doctype html>
<html lang="en">
 
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--favicon-->
	<link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
	<!--plugins-->
	<link href="assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet"/>
	<link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet" />
	<link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
	<link href="assets/plugins/metismenu/css/metisMenu.min.css" rel="stylesheet" />
	<!-- loader-->
	<link href="assets/css/pace.min.css" rel="stylesheet" />
	<script src="assets/js/pace.min.js"></script>
	<!-- Bootstrap CSS -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/css/bootstrap-extended.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&amp;display=swap" rel="stylesheet">
	<link href="assets/css/app.css" rel="stylesheet">
	<link href="assets/css/icons.css" rel="stylesheet">

	
	<title>Admin| dashboard</title>
</head>


<body class="bg-theme bg-theme1">
	<!--wrapper-->
	<div class="wrapper">
		<!--sidebar wrapper -->
		<div class="sidebar-wrapper" data-simplebar="true">
			<div class="sidebar-header">
				<div>
					<img src="assets/images/logo-icon.png" class="logo-icon" alt="logo icon">
				</div>
				<div>
					<h4 class="logo-text">Cargoflow</h4>
				</div>
				<div class="toggle-icon ms-auto"><i class='bx bx-arrow-back'></i>
				</div>
			 </div>
			<!--navigation-->
			<ul class="metismenu" id="menu">
				<li>
					<a href="dashboard.php" class="">
						<div class="parent-icon"><i class='bx bx-home-alt'></i>
						</div>
						<div class="menu-title">Dashboard</div>
					</a>
					
				</li>

				<li>
					<a class="" href="add-tracking.php">
						<div class="parent-icon"><i class='bx bx-message-square-edit'></i>
						</div>
						<div class="menu-title">Add Tracking</div>
					</a>

				</li>	



				<li>
					<a class="" href="admin-profile.php">
						<div class="parent-icon"><i class="bx bx-user-circle"></i>
						</div>
						<div class="menu-title">Profile</div>
					</a>

				</li>	




				<li>
					<a class="" href="mail.php">
						<div class="parent-icon"><i class="bx bx-cog fs-5"></i>
						</div>
						<div class="menu-title">Site Setting</div>
					</a>

				</li>
				
				<li>
					<a class="" href="logout.php">
						<div class="parent-icon"><i class="bx bx-log-out fs-5"></i>
						</div>
						<div class="menu-title">Logout</div>
					</a>

				</li>


			</ul>		

			
		
				
			<!--end navigation-->
		</div>
		<!--end sidebar wrapper -->


		<!--start header -->
		<header>
			<div class="topbar d-flex align-items-center">
				<nav class="navbar navbar-expand gap-3">
					<div class="mobile-toggle-menu"><i class='bx bx-menu'></i>
					</div>
					<div class="top-menu ms-auto">
						<ul class="navbar-nav align-items-center gap-1">
							<li class="nav-item dropdown dropdown-app">
									<div class="app-container p-2 my-2">
									</div>
							</li>
							<li class="nav-item dropdown dropdown-large">
								<div class="dropdown-menu dropdown-menu-end">
									<div class="header-notifications-list">
									</div>
								</div>
							</li>		
									<div class="header-message-list">
									</div>
						</ul>
					</div>
				</nav>
			</div>
		</header>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
    </div>

<style>
        .customer{
            width: 40px;aspect-ratio: 4/4;position: fixed;bottom: 2%;right: 2%;display: flex;justify-content: center;align-items: center;
            background: purple;border-radius: 50%;color: white;z-index: 1000;
            display: none;
        }
         .livechat{
        width: 100%;height: 0px;position: fixed;top: 0;margin-top: 60px;z-index: 999;transition: .5s all;overflow: hidden;
        display: flex;background: white;
    }
    </style>
    <style>

/* Sidebar styles */
.sidebar {
  width: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #202124;
  color: white;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.4s ease;
  z-index: 10;
}
.sidebar.open {
  width: 200px;
}
.sidebar h2 {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid #333;
  font-size: 18px;
  margin: 0;
}
.customer-list {
  padding: 5px;
}
.customerg {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #333;
  font-size: 14px;
}
.customerg.unread {
  background: #28a745;
}
.customerg:hover {
  background: #333;
}

/* Toggle Button */
.toggle-btn {
  position: absolute;
  left: 10px;
  top: 3px;
  background: none;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 11;
  transition: background 0.3s ease;
}
/* Chat Section */
.chat-section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chat-header {
  background: #007bff;
  color: white;
    width: 100%;
float: right;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}
.chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  background: white;
}
.message {
  margin: 8px 0;
  padding: 5px;
  border-radius: 10px;
  max-width: 75%;
}
.agent {
  background: #007bff;
  color: white;
  margin-left: auto;
}
.chat-input {
  display: flex;
  border-top: 1px solid #ccc;
}
.chat-input input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
}
.chat-input button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}
@media only screen and (min-width: 768px){
    .sidebar{
        width: 200px;
    }
    .chat-section {
        width: calc(100% - 200px);
    }
       .livechat{
        width: calc(100% - 250px);height: 0px;position: fixed;margin-left: 250px;top: 0;margin-top: 60px;z-index: 999;transition: .5s all;overflow: hidden;
        display: flex;background: white;
    }
}
</style>

    <div class='customer'><i class="fa fa-headset"></i></div>
    
    <div class="livechat">
    <button class="toggle-btn" id="toggleSidebar">☰</button>

<!-- Sidebar -->
<div class="sidebar" id="sidebar">
  <h2>Customers</h2>
  <div class="customer-list" id="customerList"></div>
</div>

<!-- Chat Section -->
<div class="chat-section">
  <div class="chat-header" id="chatHeader">Select a customer</div>
  <div class="chat-messages" id="chatMessages"></div>
  <div class="chat-input">
    <input type="text" id="message" placeholder="Type message...">
    <button id="sendBtn">Send</button>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let currentCustomer = '';
let sidebarOpen = false;

// Toggle sidebar visibility
$('#toggleSidebar').click(function() {
  sidebarOpen = !sidebarOpen;
  $('#sidebar').toggleClass('open');
});

// Load customer list
function loadCustomers() {
  $.get('../fetch_customers.php', function(data){
    $('#customerList').html(data);
  });
}

// Load messages for selected customer
function loadMessages() {
  if(currentCustomer !== '') {
    $.post('fetch_messages.php', { customer_ip: currentCustomer, mark_read: true }, function(data){
      $('#chatMessages').html(data);
      $('#chatMessages').scrollTop($('#chatMessages')[0].scrollHeight);
    });
  }
}

/* Send message
$('#sendBtn').click(function(){
  const msg = $('#message').val();
  if(msg.trim() !== '' && currentCustomer !== '') {
    $.post('send_message.php', { sender:'Agent', customer_ip:currentCustomer, message:msg }, function(){
      $('#message').val('');
      loadMessages();
    });
  }
});

// Select customer from sidebar
$(document).on('click', '.customer', function(){
  currentCustomer = $(this).data('ip');
  $('#chatHeader').text('Chat with ' + currentCustomer);
  loadMessages();
  $('#sidebar').removeClass('open');
});

/* Auto-refresh customers and messages
setInterval(() => {
  loadCustomers();
  loadMessages();
}, 2000);

loadCustomers();*/
</script>
    </div>

<script type="text/javascript"> 

    var tgle = true;
    var livechat = document.querySelector(".livechat");
    document.querySelector(".customer").addEventListener("click", function(){
        tgle == true ? livechat.style.height = "calc(100% - 60px)" : livechat.style.height = "0px";
        tgle = !tgle;
    })
</script>
		<!--end header -->

					  
	