<?php
session_start();
if (strlen($_SESSION['id']==0)) {
  header('location:logout.php');
  } else{
    include('dbconnection.php');
      
      // fetch toggle value
    $result = $con->query("SELECT * FROM Toggle_SMS WHERE id = 1");
    $row = $result->fetch_assoc();
    $toggle_value = $row['Toggle'];
    $message_value = $row['Message'];
    	
?> <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Welcome </title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/heroic-features.css" rel="stylesheet">
  <link href="css/custom.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <!--<link rel="stylesheet" href="css/main.css">-->
  <link rel="shortcut icon" type="image/png" href="#">
  <!--<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">-->
    <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=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<style>
 .sidenav__profile-avatar i {
	font-size: 60px !important;
}

    
}
html,
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
}

a {
	text-decoration: none;
}

.text-light {
	font-weight: 300;
}

.text-bold {
	font-weight: bold;
}

.row {
	display: flex;
}

.row--align-v-center {
	align-items: center;
}

.row--align-h-center {
	justify-content: center;
}

.grid {
	position: relative;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 50px 1fr 50px;
	grid-template-areas: 'header''main''footer';
	height: 100vh;
	overflow-x: hidden;
}

.grid--noscroll {
	overflow-y: hidden;
}

.header {
	grid-area: header;
	display: flex;
	position: fixed;
	left: 21%;
	padding: 10px 0;
	width: 78%;
	align-items: center;
	justify-content: space-between;
	background-color: #f9fafc;
	border-radius: 16px;
	z-index:9;
	box-shadow: #25354417 0px 3px 8px;
}
.header h4{
    color:#131313 !important;
    font-size:18px;
   letter-spacing: -0.25;
    line-height: 14px;
    font-weight: 300;
     position: absolute;
    right: 39%;
    margin-left: 0 !important;
}

.header__menu {
	position: absolute;
	padding: 13px;
	left: 12px !important;
	background-color: #dadae3;
	border-radius: 50%;
	z-index: 1;
}

.header__menu:hover {
	cursor: pointer;
}

.header__search {
	margin-left: 55px;
	font-size: 20px;
	color: #777;
}

.header__input {
	border: none;
	background: transparent;
	padding: 12px;
	font-size: 20px;
	color: #777;
}

.header__input:focus {
	outline: none;
	border: none;
}

.header__avatar {
	background-image: url("https://i.postimg.cc/15w3c3sf/undraw-profile.png");
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .2);
	position: relative;
	margin: 0 26px;
	width: 35px;
	height: 35px;
	cursor: pointer;
}

.header__avatar:after {
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	background: none;
	border-left: 2px solid #777;
	border-bottom: 2px solid #777;
	transform: rotate(-45deg) translateY(-50%);
	top: 50%;
	right: -18px;
}

.dropdown {
	position: absolute;
	top: 54px;
	right: -16px;
	width: 220px;
	height: auto;
	z-index: 1;
	background-color: #fff;
	border-radius: 4px;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-10px);
	transition: all 0.3s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.dropdown__list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.dropdown__list-item {
	padding: 12px 24px;
	color: #777;
	text-transform: capitalize;
	box-shadow: rgb(0 0 0 / 0%) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.dropdown__icon {
	color:#B01212;
}

.dropdown__title {
	margin-left: 4px;
}

.dropdown:before {
	position: absolute;
	content: none;
	top: -6px;
	right: 30px;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 6px solid #fff;
}

.dropdown--active {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}
.sidenav {
	position: fixed;
	grid-area: sidenav;
	height: 100%;
	background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
	color: #fff;
	width: 19% !important;
	transform: translateX(-245px);
	transition: all 0.6s ease-in-out;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
	z-index: 2;
}

.sidenav__brand {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 16px;
	background-color: rgba(0, 0, 0, .15);
}

.sidenav__brand-icon {
	margin-top: 2px;
	font-size: 14px;
	color: rgba(255, 255, 255, .5);
}

.sidenav__brand-close {
	position: absolute;
	right: 8px;
	top: 8px;
	visibility: visible;
	color: rgba(255, 255, 255, .5);
	cursor: pointer;
}

.sidenav__brand-link {
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	margin: 0 15px;
	letter-spacing: 1.5px;
}

.sidenav__profile {
	display: flex;
	align-items: center;
	background-color: transparent;
}

.sidenav__profile-avatar {
	margin: 0 15px 0 15 !important;
}

.sidenav__profile-title {
	font-size: 17px;
	letter-spacing: 1px;
	font-weight: bold;
}

.sidenav__arrow {
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	top: 50%;
	right: 20px;
	border-left: 2px solid rgba(255, 255, 255, .5);
	border-bottom: 2px solid rgba(255, 255, 255, .5);
	transform: translateY(-50%) rotate(225deg);
}

.sidenav__sublist {
	list-style-type: none;
	margin: 0;
	padding: 10px 0 0;
}

.sidenav--active {
	transform: translateX(0);
}
ul.navList{
    padding-left:14px;
    margin-top: 30px;
}
ul.subLit {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    padding:0;
}
ul.subLit a{
    color:#fff;
    text-decoration: none;
}
.subLit__item{
    display:flex;
    column-gap:15px;
    align-items:center;
}
.navList {
	padding: 0;
	margin: 0;
	background-color: transparent;
	list-style-type: none;
	align-items: start !important;
}

.navList__heading {
	position: relative;
	display: flex;
	align-items: center;
	padding: 16px 16px 16px;
	color: white;
	text-transform: uppercase;
	font-size: 15px;
}

hr.sidebar-divider {
	border-top: 1px solid rgba(255, 255, 255, .15);
	margin: 0;
}

li.navList__heading i {
	margin-right: 15px;
}

.navList__subheading {
	position: relative;
	margin: 10px 16px;
	color: rgba(255, 255, 255, .5);
	font-size: 16px;
	text-transform: capitalize;
}

.navList__subheading-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: white;
	width: 12px;
}

li.navList__heading a {
	text-decoration: none;
	color: white;
}

ul.subList li a {
	text-decoration: none;
	color: #d3d3d3;
}

.navList__subheading-title {
	margin: 0 15px;
	color: white;
}

/*.navList__subheading:after {*/
/*	position: absolute;*/
/*	content: "";*/
/*	height: 6px;*/
/*	width: 6px;*/
/*	top: 10px;*/
/*	right: -40px;*/
/*	border-left: 1px solid rgba(255, 255, 255, .5);*/
/*	border-bottom: 1px solid rgba(255, 255, 255, .5);*/
/*	transform: rotate(225deg);*/
/*	transition: all 0.2s;*/
/*}*/

.navList__subheading:hover {
	cursor: pointer;
}

.navList__subheading--open:after {
	transform: rotate(315deg);
}

.navList .subList {
	padding: 0;
	margin: 0;
	list-style-type: none;
	background-color: #262c43;
	visibility: visible;
	overflow: hidden;
	max-height: 200px;
	transition: all 0.4s ease-in-out;
}

.navList .subList__item a {
	padding: 8px;
	text-transform: capitalize;
	padding: 8px 0px 8px 42px;
	color: #d3d3d3;
	display: block;
	width: 100%;
}

li.navList__heading a {
	text-decoration: none;
	color: white;
	width: 100%;
	display: block;
}

.navList .subList__item:first-child {
	padding-top: 15px;
}

.navList .subList__item:hover {
	background-color: rgba(255, 255, 255, .1);
	cursor: pointer;
}

.navList .subList--hidden {
	visibility: hidden;
	max-height: 0;
}

.main {
	grid-area: main;
	background-color: #eaedf1;
	color: #394263;
}

.main__cards {
	display: block;
	column-count: 1;
	column-gap: 20px;
	margin: 20px;
}

.main-header {
	position: relative;
	display: flex;
	justify-content: space-between;
	height: 250px;
	color: #fff;
	background-size: cover;
	background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1609106/lake-shadow-water.jpg");
	margin-bottom: 20px;
}

.main-header__intro-wrapper {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 160px;
	padding: 12px 30px;
	background: rgba(255, 255, 255, .12);
	font-size: 26px;
	letter-spacing: 1px;
}

.main-header__welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.main-header__welcome-title {
	margin-bottom: 8px;
	font-size: 26px;
}

.main-header__welcome-subtitle {
	font-size: 18px;
}

.quickview {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 60px;
}

.quickview__item {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.quickview__item-total {
	margin-bottom: 2px;
	font-size: 32px;
}

.quickview__item-description {
	font-size: 16px;
	text-align: center;
}

.main-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
	grid-auto-rows: 94px;
	grid-gap: 30px;
	margin: 20px;
}

.overviewCard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	background-color: #fff;
	transform: translateY(0);
	transition: all 0.3s;
}

.overviewCard-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	font-size: 21px;
	color: #fff;
}

.overviewCard-icon--document {
	background-color: #e67e22;
}

.overviewCard-icon--calendar {
	background-color: #27ae60;
}

.overviewCard-icon--mail {
	background-color: #e74c3c;
}

.overviewCard-icon--photo {
	background-color: #af64cc;
}

.overviewCard-description {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.overviewCard-title {
	font-size: 18px;
	color: #1bbae1;
	margin: 0;
}

.overviewCard-subtitle {
	margin: 2px;
	color: #777;
}

.overviewCard:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
	cursor: pointer;
}

.card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fff;
	margin-bottom: 20px;
	-webkit-column-break-inside: avoid;
}

.card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 50px;
	background-color: #394263;
	color: #fff;
}

.card__header-title {
	margin: 0 20px;
	font-size: 20px;
	letter-spacing: 1.2px;
}

.card__header-link {
	font-size: 16px;
	color: #1bbae1;
	letter-spacing: normal;
	display: inline-block;
}

.card__main {
	position: relative;
	padding-right: 20px;
	background-color: #fff;
}

.card__main:after {
	content: "";
	position: absolute;
	top: 0;
	left: 120px;
	bottom: 0;
	width: 2px;
	background-color: #f0f0f0;
}

.card__secondary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	grid-auto-rows: 100px;
	grid-gap: 25px;
	padding: 20px;
	background-color: #fff;
}

.card__photo {
	background-image: url('../../img/pumpkin-carving.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-color: slategray;
	transform: scale(1);
	transition: transform 0.3s ease-in-out;
	width: 100%;
	height: 100%;
}

.card__photo:hover {
	transform: scale(1.1);
	cursor: pointer;
}

.card__photo-wrapper {
	overflow: hidden;
}

.card__row {
	position: relative;
	display: flex;
	flex: 1;
	margin: 15px 0 20px;
}

.card__icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	content: "";
	width: 30px;
	height: 30px;
	top: 0;
	left: 121px;
	transform: translateX(-50%);
	border-radius: 50%;
	color: #fff;
	background-color: #1bbae1;
	z-index: 1;
}

.card__row:nth-child(even) .card__icon {
	background-color: #e74c3c;
}

.card__time {
	display: flex;
	flex: 1;
	justify-content: flex-end;
	max-width: 80px;
	margin-left: 15px;
	text-align: right;
	font-size: 14px;
	line-height: 2;
}

.card__detail {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-left: 12px;
	margin-left: 48px;
	transform: translateX(0);
	transition: all 0.3s;
}

.card__detail:hover {
	background-color: #f0f0f0;
	transform: translateX(4px);
	cursor: pointer;
}

.card__source {
	line-height: 1.8;
	color: #1bbae1;
}

.card__note {
	margin: 10px 0;
	color: #777;
}

.card--finance {
	position: relative;
}

.settings {
	display: flex;
	margin: 8px;
	align-self: flex-start;
	background-color: rgba(255, 255, 255, .5);
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 2px;
}

.settings__block {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	color: #394263;
	font-size: 11px;
}

.settings__block:not(:last-child) {
	border-right: 1px solid rgba(0, 0, 0, .1);
}

.settings__icon {
	padding: 0px 3px;
	font-size: 12px;
}

.settings__icon:hover {
	background-color: rgba(255, 255, 255, .8);
	cursor: pointer;
}

.settings:hover {
	background-color: #fff;
	cursor: pointer;
}

.documents {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
	grid-auto-rows: 214px;
	grid-gap: 12px;
	height: auto;
	background-color: #fff;
}

.document {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 15px 0 0;
	flex-direction: column;
}

.document__img {
	width: 105px;
	height: 136px;
	background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1609106/doc-1.png");
	background-size: cover;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: transform 0.3s ease;
}

.document__img:hover {
	transform: translateY(-4px);
}

.document__title {
	margin: 8px 0 2px;
	color: #777;
}

.document__date {
	font-size: 10px;
}

#chartdiv {
	width: 100%;
	height: 300px;
	font-size: 11px;
	min-width: 0;
}
        .header{
        width: 78% !important;
        right: 1% !important;
        left: inherit !important;
    }
.footer {
	grid-area: footer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	color: #777;
	background-color: #fff;
}

.footer__copyright {
	color: #1bbae1;
}

.footer__icon {
	color: #e74c3c;
}

.footer__signature {
	color: #1bbae1;
	cursor: pointer;
	font-weight: bold;
}

.sidenav__brand {
	display: none;
}
.navList svg{
    overflow: clip;
}
.navList i {
    display: none
}
.navList__heading{
    column-gap: 15px;
}

@media(max-width:767px) {
	.sidenav__brand {
		display: block;
	}
}

@media only screen and (min-width: 46.875em) {
	.grid {
		display: grid;
		grid-template-columns: 240px calc(100% - 240px);
		grid-template-rows: 50px 1fr 50px;
		grid-template-areas: 'sidenav header''sidenav main''sidenav footer';
		height: 100vh;
	}
	.sidenav {
		position: fixed;
		transform: translateX(0);
	}
	.sidenav__brand-close {
		visibility: hidden;
	}
	.main-header__intro-wrapper {
		padding: 0 30px;
	}
	.header__menu {
		display: none;
	}
	.header__search {
		margin-left: 20px;
	}
	.header__avatar {
		width: 40px;
		height: 40px;
	}
}

@media only screen and (min-width: 65.625em) {
	.main__cards {
		column-count: 2;
	}
	.main-header__intro-wrapper {
		flex-direction: row;
	}
	.main-header__welcome {
		align-items: flex-start;
	}
}

main {
	top: 64px;
	left: 18%;
	position: absolute;
	overflow: auto;
	height: 100%;
	width: 82%;
	background: #eaedf1;
}

@media (min-width:767px) and (max-width:918px){
        .header{
        width: 76% !important;
        right: 1% !important;
        left: inherit !important;
    }
}


@media screen and (max-width: 767px) {
    .header{
    width: 96% !important;
    border-radius: 16px;
    left: inherit !important;
    right: 14px !important; 
    }
    .header h4 {
    right: 36%;
}
  .sidenav {
    position: fixed;
    left: -100%;
    top: 0;
    height: 100% !important;
    background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
    color: #fff;
    transition: all 0.6s ease-in-out;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    z-index: 999;
    width:30% !important;
  }
.num-pad {
padding-left: 0px !important;
}
  .sidenav.sidenav--active {
    left: 0;
    z-index: 9999999;
  }

  .grid--noscroll {
    overflow: hidden;
    height: 100vh;
  }
  .sidenav__profile {
	min-height: unset !important;
	margin-top:40px;
}
}


@media (max-width:700px){
      .header h4 {
    right: 47%;
}
   .cont {
    right: -30px !important;
}
}


@media screen and (max-width: 550px) {
  .container {
    background-color: white;
    width: 100% !important;
    padding: 20px;
    margin: 30px auto;
    text-align: left;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 
                0 10px 10px rgba(0, 0, 0, 0.22);
  }
   .cont {
    right: -30px !important;
}
  .navList {
    width: 100% !important;
  }
      .header h4 {
    right: 47%;
    font-size:16px;
}
.sidenav{
    width:36% !important;
}
}
@media (max-width:460px){
    .spanicons {
    width: 59px !important;
}
.header{
    zoom:0.9;
}
.cont {
    transform: translate(-104px) !important;
    gap: 12px !important;
}

}
@media(max-width:400px){
    .span4 {
    width: 56px !Important;
}
.header h4 {
    right: 49%;
    font-size: 14px;
}
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  min-width: 150px;
  z-index: 999;
}

.dropdown--active {
  display: block;
}

.dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius:10px;
}

.dropdown__list-item {
  padding: 10px;
  cursor: pointer;
}

.dropdown__icon {
  margin-right: 8px;
}
@media(max-width:450px){
main {
    top: 64px;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    overflow: auto;
    height: 100%;
    width: 90%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    background: #eaedf1;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    transform: translate(-50%, -50%);
}
.header {
    grid-area: header;
    display: flex;
    position: absolute;
    left: 0%;
    padding: 10px 0;
    width: 93% !important;
    align-items: center;
    justify-content: space-between;
    background-color: #f9fafc;
    z-index: 9999;
}
aside.sidenav.sidenav--active {
    z-index: 999999;
}
.sidenav{
    width:40% !important;
}
}
@media (max-width: 1253px){
 
.navList__subheading:after {
    right: 4px !important;
}
    .navList__subheading-title{
        font-size: 14px;
       margin: 0 10px !important;
    }
    
    .navList .subList__item a{
        font-size: 12px;
        padding: 8px 0px 8px 20px;
    }
    .sidenav__profile {
    margin-left: 0px !important;
   }
   .sidenav__profile-avatar {
     margin: 0 10px 0 0 !important;
}
.navList__heading {
    padding: 16px 0px 16px
}
.navList__subheading {
    margin: 0px 0px ;
}

.sidenav__profile-avatar i{
    font-size:48px !important;
}
.sidenav__profile .sidenav__profile-title{
    font-size:16px;
}
.navList__heading {
    column-gap: 10px;
}
.navList{
 padding-left:14px;   
}
 }
 @media (min-width:918px) and (max-width:1024px){
    .header{
        width:77% !important;
    }
}
@media (max-width: 1000px) and (min-width: 768px) {
 
    .navList__subheading-title{
        font-size:12px;
    }
        .subLit__item a{
    font-size:14px;
}
    .navList__heading{
        font-size:12px;
    }
    .navList__subheading:after{
        top:6px !important;
        right:0px !important;
    }

.navList .subList__item a {
    padding: 8px 0px 8px 20px !important;
}
.sidenav__profile-avatar i {
    font-size: 36px !important;
}
.sidenav__profile .sidenav__profile-title {
    font-size: 12px !important;
}
}
@media (max-width:918px)and (min-width:767px){
    .sidenav{
        width:20% !important;
        z-index:9999;
    }

}
@media (max-width: 767px) {
    .sidenav__profile-avatar i {
    font-size: 36px !important;
}
.subLit__item a{
    font-size:14px;
}
.sidenav{
    height:100% !important;
}
.sidenav__profile .sidenav__profile-title {
        font-size: 12px !important;
    }
    .navList__subheading-title{
        font-size:12px;
    }
    .navList__heading{
        font-size:12px;
    }
        .navList__subheading:after{
        top:6px !important;
    }
    .toggle__label {
        width: 70px !important;
        height: 32px !important;
}
.toggle__label::after {
    top: 6px !important;
    width: 18px !important;
    height: 18px !important;

}

.toggle__input:checked + .toggle__label::after {
    left: 47px !important;
}
.toggle__label::before {
    left: 2px !important;
    top: -1px !important;
    margin-left: -1px;
}
}
@media(max-width:400px){
    .sidenav {
        width:45% !important;
    }
    header.header > * {
    zoom: 0.9;
}
}

@media (max-width:356px){
.sidenav{
    width:52% !important;
}
}


.cont {
    text-align: center;
    position: absolute;
    right: 0;
    transform: translate(-106px);
    display: flex;
    gap: 12px;
    align-items: center;
}

    .toggle {
        position: relative;
        display: inline-block;
    }

    .toggle__input {
        display: none;
    }

    .toggle__label {
        position: relative;
        display: block;
        width: 72px;
        height: 30px;
        background-color: black; /* OFF */
        border-radius: 99px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        color: white;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        line-height: 35px;
    }

    /* OFF text */
    .toggle__label::before {
        content: "OFF";
        position: absolute;
        width: 100%;
        left: 2;
        top: -1;
    }

    /* ON state background */
    .toggle__input:checked + .toggle__label {
        background-color: green;
    }

    /* ON text */
    .toggle__input:checked + .toggle__label::before {
        content: "ON";
    }

    /* knob */
    .toggle__label::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 4px;
        width: 20px;
        height: 20px;
        background-color: #ffffff;
        border-radius: 50%;
        transition: left 0.3s ease;
    }

    .toggle__input:checked + .toggle__label::after {
        left: 48px;
    }
    
        /* Modal styles */
    .modal {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
    }
    
    .modal-content {
      background: white;
      width: 300px;
      padding: 20px;
      border-radius: 10px;
      margin: 120px auto;
      height:unset !important;
    }
    .modal-content button {
    font-size: 14px;
    border: 1px solid grey;
    padding: 4px 12px;
    margin-right: 7px;
    border-radius: 3px;
}

.modal-content button:first-of-type {
    background-color: green;
    color:#fff;
}

.modal-content button:last-of-type {
    background-color: red;
    color:#fff;

}



</style>
</head>
<body>
<header class="header">
   <h4> Number--332-230-8524</h4>
  <i class="fas fa-bars header__menu"></i>
  <div class="header__search"></div>
    <div class="cont">
            <!-- Edit Icon -->
            <span class="edit-icon" id="editMsgBtn" style="cursor:pointer;">✏️</span>
            <!-- Toggle -->
            <div class="toggle">
                <input type="checkbox" id="mode-toggle" class="toggle__input"
                  <?php if($toggle_value == 1) echo "checked"; ?>>

                <label for="mode-toggle" class="toggle__label"></label>
            </div>
    </div>
  <div class="header__avatar">
    <div class="dropdown">
      <ul class="dropdown__list">
        <!--<li class="dropdown__list-item"><span class="dropdown__icon"><i class="far fa-user"></i></span><span class="dropdown__title"><a href="#">my profile</a></span></li><li class="dropdown__list-item"><span class="dropdown__icon"><i class="fas fa-clipboard-list"></i></span><span class="dropdown__title"><a href="#">change password</a></span></li>-->
        <li class="dropdown__list-item">
          <span class="dropdown__icon">
            <i class="fas fa-sign-out-alt"></i>
          </span>
          <span class="dropdown__title">
            <a href="logout.php">log out</a>
          </span>
        </li>
      </ul>
    </div>
  </div>
  
  
      <!-- Modal -->
    <div id="msgModal_on_off" class="modal" style="display:none;">
      <div class="modal-content">
        <h3 style="margin-bottom:20px;margin-top:0;">Edit Toggle Message</h3>
    
        <textarea id="customMsg" style="width:100%; padding:12px;margin-bottom:20px;" rows="6" placeholder=""><?php echo htmlspecialchars($message_value); ?>
        </textarea>
        <button id="saveMsgBtn">Save</button>
        <button id="closeModal">Close</button>
      </div>
    </div>

</header>
<aside class="sidenav">
  <div class="sidenav__brand">
    <i class="fas fa-times sidenav__brand-close"></i>
  </div>
  <div class="sidenav__profile">
    <div class="sidenav__profile-avatar">
      <i class="fas fa-laugh-wink"></i>
    </div>
    <div class="sidenav__profile-title text-light">Howdy <?php echo $_SESSION['name'];?> </div>
  </div>
  <div class="row row--align-v-center row--align-h-center">
    <ul class="navList">
      <hr class="sidebar-divider">
<!--      <li class="navList__heading">-->
<!--        <i class="fas fa-tachometer-alt"></i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">-->
<!--<path d="M6.66666 2.66663L9.33332 13.3333M7.99999 7.99996L2.66666 9.33329M2.66666 3.99996C2.66666 3.64634 2.80713 3.3072 3.05718 3.05715C3.30723 2.8071 3.64637 2.66663 3.99999 2.66663H12C12.3536 2.66663 12.6928 2.8071 12.9428 3.05715C13.1928 3.3072 13.3333 3.64634 13.3333 3.99996V12C13.3333 12.3536 13.1928 12.6927 12.9428 12.9428C12.6928 13.1928 12.3536 13.3333 12 13.3333H3.99999C3.64637 13.3333 3.30723 13.1928 3.05718 12.9428C2.80713 12.6927 2.66666 12.3536 2.66666 12V3.99996Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>-->
<!--</svg>Dashboard-->
<!--      </li>-->
      <hr class="sidebar-divider my-0">
       <!-- <li class="navList__heading new" data="3"><i class="fa fa" aria-hidden="true"></i><a href="call.php">Calls</a></li>-->
      <!-- ************************ communications ************************-->
      <div class="navList__subheading row row--align-v-center menus-dash">
           <ul class="subLit">
                         <span class="subLit__item" data="5">
            <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16" fill="none">
           <path d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z" fill="#ffffff"/>
            </svg>
            <a href="home.php">Home</a>
          </span>
          <span class="subLit__item" data="5">
            <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="16px" height="16px" viewBox="0 0 512 512"><title>ionicons-v5-g</title><path d="M256,400a48,48,0,1,0,48,48,48,48,0,0,0-48-48Z"/><path d="M256,272a48,48,0,1,0,48,48,48,48,0,0,0-48-48Z"/><path d="M256,144a48,48,0,1,0,48,48,48,48,0,0,0-48-48Z"/><path d="M256,16a48,48,0,1,0,48,48,48,48,0,0,0-48-48Z"/><path d="M384,272a48,48,0,1,0,48,48,48,48,0,0,0-48-48Z"/><path d="M384,144a48,48,0,1,0,48,48,48,48,0,0,0-48-48Z"/><path d="M384,16a48,48,0,1,0,48,48,48,48,0,0,0-48-48Z"/><path d="M128,272a48,48,0,1,0,48,48,48,48,0,0,0-48-48Z"/><path d="M128,144a48,48,0,1,0,48,48,48,48,0,0,0-48-48Z"/><path d="M128,16a48,48,0,1,0,48,48,48,48,0,0,0-48-48Z"/></svg>
            <a href="call.php">Keypad</a>
          </span>
          <span class="subLit__item" data="2">
              <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="16px" height="16px" viewBox="0 0 24 24"><path d="M4,21a1,1,0,0,0,1,1H19a1,1,0,0,0,1-1V3a1,1,0,0,0-1-1H5A1,1,0,0,0,4,3ZM12,7.5a2,2,0,1,1-2,2A2,2,0,0,1,12,7.5ZM8.211,16.215a4,4,0,0,1,7.578,0A.993.993,0,0,1,14.83,17.5H9.18A1,1,0,0,1,8.211,16.215Z"/></svg>
            <a href="Contact.php">Contact</a>
          </span>
        </ul>
      </div>
      
<!--      <li>-->
<!--        <div class="navList__subheading row row--align-v-center">-->
<!--          <span class="navList__subheading-icon">-->
<!--            <i class="fa fa-phone"></i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">-->
<!--<path d="M2 14.5V13.1667C2 12.4594 2.28095 11.7811 2.78105 11.281C3.28115 10.781 3.95942 10.5 4.66667 10.5H7.33333C8.04058 10.5 8.71885 10.781 9.21895 11.281C9.71905 11.7811 10 12.4594 10 13.1667V14.5M10.6667 2.58667C11.2403 2.73354 11.7487 3.06714 12.1118 3.53488C12.4748 4.00262 12.6719 4.57789 12.6719 5.17C12.6719 5.76212 12.4748 6.33739 12.1118 6.80513C11.7487 7.27287 11.2403 7.60647 10.6667 7.75334M14 14.5V13.1667C13.9966 12.5781 13.7986 12.0072 13.4368 11.5429C13.0751 11.0787 12.5699 10.7471 12 10.6M3.33333 5.16667C3.33333 5.87391 3.61428 6.55219 4.11438 7.05229C4.61448 7.55238 5.29276 7.83333 6 7.83333C6.70724 7.83333 7.38552 7.55238 7.88562 7.05229C8.38572 6.55219 8.66667 5.87391 8.66667 5.16667C8.66667 4.45942 8.38572 3.78115 7.88562 3.28105C7.38552 2.78095 6.70724 2.5 6 2.5C5.29276 2.5 4.61448 2.78095 4.11438 3.28105C3.61428 3.78115 3.33333 4.45942 3.33333 5.16667Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>-->
<!--</svg>-->
<!--          </span>-->
<!--          <span class="navList__subheading-title">communications</span>-->
<!--        </div>-->
<!--        <ul class="subList subList--hidden">-->
<!--          <li class="subList__item" data="5">-->
<!--            <a href="call.php">Keypad</a>-->
<!--          </li>-->
<!--          <li class="subList__item" data="5">-->
<!--            <a href="home.php">Home</a>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </li>-->
      
      <!-- ************************ logs ************************-->
<!--      <li>-->
<!--        <div class="navList__subheading row row--align-v-center">-->
<!--          <span class="navList__subheading-icon">-->
<!--            <i class="fas fa-user"></i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">-->
<!--<path d="M6.00004 3.33333H4.66671C4.31309 3.33333 3.97395 3.47381 3.7239 3.72386C3.47385 3.97391 3.33337 4.31304 3.33337 4.66667V12.6667C3.33337 13.0203 3.47385 13.3594 3.7239 13.6095C3.97395 13.8595 4.31309 14 4.66671 14H11.3334C11.687 14 12.0261 13.8595 12.2762 13.6095C12.5262 13.3594 12.6667 13.0203 12.6667 12.6667V4.66667C12.6667 4.31304 12.5262 3.97391 12.2762 3.72386C12.0261 3.47381 11.687 3.33333 11.3334 3.33333H10M6.00004 3.33333C6.00004 2.97971 6.14052 2.64057 6.39057 2.39052C6.64061 2.14048 6.97975 2 7.33337 2H8.66671C9.02033 2 9.35947 2.14048 9.60952 2.39052C9.85956 2.64057 10 2.97971 10 3.33333M6.00004 3.33333C6.00004 3.68696 6.14052 4.02609 6.39057 4.27614C6.64061 4.52619 6.97975 4.66667 7.33337 4.66667H8.66671C9.02033 4.66667 9.35947 4.52619 9.60952 4.27614C9.85956 4.02609 10 3.68696 10 3.33333M6.00004 11.3333V8.66667M8.00004 11.3333V10.6667M10 11.3333V10" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>-->
<!--</svg>-->
<!--          </span>-->
<!--          <span class="navList__subheading-title">Logs</span>-->
<!--        </div>-->
<!--        <ul class="subList subList--hidden">-->
<!--          <li class="subList__item" data="2">-->
<!--            <a href="call_detailssss.php">CALL LOGS</a>-->
<!--          </li>-->
          <!--<li class="subList__item" data="4">-->
          <!--  <a href="recording_details.php">RECORDING LOGS</a>-->
          <!--</li>-->
        
<!--        </ul>-->
        
     <!-- ************************ Contact ************************-->
<!--      <li>-->
<!--        <div class="navList__subheading row row--align-v-center">-->
<!--          <span class="navList__subheading-icon">-->
<!--            <i class="fas fa-address-book"></i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">-->
<!--<path d="M6.00004 3.33333H4.66671C4.31309 3.33333 3.97395 3.47381 3.7239 3.72386C3.47385 3.97391 3.33337 4.31304 3.33337 4.66667V12.6667C3.33337 13.0203 3.47385 13.3594 3.7239 13.6095C3.97395 13.8595 4.31309 14 4.66671 14H11.3334C11.687 14 12.0261 13.8595 12.2762 13.6095C12.5262 13.3594 12.6667 13.0203 12.6667 12.6667V4.66667C12.6667 4.31304 12.5262 3.97391 12.2762 3.72386C12.0261 3.47381 11.687 3.33333 11.3334 3.33333H10M6.00004 3.33333C6.00004 2.97971 6.14052 2.64057 6.39057 2.39052C6.64061 2.14048 6.97975 2 7.33337 2H8.66671C9.02033 2 9.35947 2.14048 9.60952 2.39052C9.85956 2.64057 10 2.97971 10 3.33333M6.00004 3.33333C6.00004 3.68696 6.14052 4.02609 6.39057 4.27614C6.64061 4.52619 6.97975 4.66667 7.33337 4.66667H8.66671C9.02033 4.66667 9.35947 4.52619 9.60952 4.27614C9.85956 4.02609 10 3.68696 10 3.33333M6.00004 11.3333V8.66667M8.00004 11.3333V10.6667M10 11.3333V10" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>-->
<!--</svg>-->
<!--          </span>-->
<!--          <span class="navList__subheading-title">Contacts</span>-->
<!--        </div>-->
<!--        <ul class="subList subList--hidden">-->
<!--          <li class="subList__item" data="2">-->
<!--            <a href="Contact.php">List</a>-->
<!--          </li>-->

<!--        </ul>        -->
<!--      </li>-->
      
       <!-- ************************ Textable ************************-->
<!--     <li>-->
<!--      <div class="navList__subheading row row--align-v-center">-->
<!--        <span class="navList__subheading-icon">-->
<!--          <i class="fas fa-table"></i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">-->
<!--<path d="M2 13.3333L2.86667 10.7333C1.31733 8.442 1.916 5.48533 4.26667 3.81733C6.61733 2.15 9.99333 2.28666 12.1633 4.13733C14.3333 5.98866 14.6267 8.98133 12.8493 11.138C11.072 13.2947 7.77267 13.948 5.13333 12.6667L2 13.3333Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>-->
<!--</svg>-->
<!--        </span>-->
<!--        <span class="navList__subheading-title">-->
<!--          <a href="Chatwoot/Dashboard.php" target="_blank" style="color: white; text-decoration: none;">Chatwoot</a>-->
<!--        </span>-->
<!--      </div>-->
<!--    </li>-->
      <hr class="sidebar-divider my-0">
      <hr class="sidebar-divider my-0">
    </ul>
  </div>
</aside>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  /* Scripts for css grid dashboard */
  $(document).ready(function () {
  const sidenavEl = $('.sidenav');
  const gridEl = $('.grid');
  const SIDENAV_ACTIVE_CLASS = 'sidenav--active';
  const GRID_NO_SCROLL_CLASS = 'grid--noscroll';

  function toggleClass(el, className) {
    if (el.hasClass(className)) {
      el.removeClass(className);
    } else {
      el.addClass(className);
    }
  }

  $('.header__menu').on('click', function (e) {
    e.preventDefault();
    toggleClass(sidenavEl, SIDENAV_ACTIVE_CLASS);
    toggleClass(gridEl, GRID_NO_SCROLL_CLASS);
  });
  
  $('.sidenav__brand-close').on('click', function(e) {
    sidenavEl.removeClass(SIDENAV_ACTIVE_CLASS);
    gridEl.removeClass(GRID_NO_SCROLL_CLASS);
  });
  
  function setUserDropdownListener() {
      const userAvatar = $('.header__avatar');
      userAvatar.on('click', function (e) {
        e.stopPropagation(); // prevent body click from immediately closing it
        const dropdown = $(this).find('.dropdown');
        dropdown.toggleClass('dropdown--active');
      });
    
      // Close the dropdown if clicked outside
      $(document).on('click', function () {
        $('.dropdown').removeClass('dropdown--active');
      });
    }
    
    setUserDropdownListener();
    
    function setSidenavListeners() {
      const subHeadings = $('.navList__subheading');
      const SUBHEADING_OPEN_CLASS = 'navList__subheading--open';
      const SUBLIST_HIDDEN_CLASS = 'subList--hidden';
    
      subHeadings.each((i, subHeadingEl) => {
        $(subHeadingEl).on('click', (e) => {
          const subListEl = $(subHeadingEl).siblings('ul.subList');
          toggleClass($(subHeadingEl), SUBHEADING_OPEN_CLASS);
          toggleClass(subListEl, SUBLIST_HIDDEN_CLASS);
        });
      });
    }
   
  setSidenavListeners();
});





    let userMessage = "Default toggle message";
    
    // Save toggle state to DB
    document.getElementById("mode-toggle").addEventListener("change", function () {
        let toggleValue = this.checked ? 1 : 0;
    
        // AJAX to update toggle
        let formData = new FormData();
        formData.append("toggle", toggleValue);
    
        fetch("update_toggle.php", {
            method: "POST",
            body: formData
        });
    
        // Sweet Alert
        Swal.fire({
            icon: toggleValue === 1 ? "success" : "info",
            title: toggleValue === 1 ? "Toggle Enabled" : "Toggle Disabled",
            text: toggleValue === 1 ? "The toggle is now ON." : "The toggle is now OFF.",
            timer: 1500,
            showConfirmButton: false
        });
    });

    
    // Open modal
    document.getElementById("editMsgBtn").addEventListener("click", function () {
        document.getElementById("msgModal_on_off").style.display = "block";
    });
    
    // Close modal
    document.getElementById("closeModal").addEventListener("click", function () {
        document.getElementById("msgModal_on_off").style.display = "none";
    });
    
    // Save message from modal
    document.getElementById("saveMsgBtn").addEventListener("click", function () {
        let newMsg = document.getElementById("customMsg").value.trim();
    
        // AJAX to update message
        let formData = new FormData();
        formData.append("message", newMsg);
    
        fetch("update_toggle.php", {
            method: "POST",
            body: formData
        })
        .then(() => {
            // Sweet Alert
            Swal.fire({
                icon: "success",
                title: "Saved!",
                text: "Your message has been updated.",
                timer: 1500,
                showConfirmButton: false
            });
    
            // Close modal
            document.getElementById("msgModal_on_off").style.display = "none";
        });
    });
</script> <?php } ?>