<?php
session_start();
$pageSequence = $_SESSION['sequence'];
$toDiv = "contentZone" . $pageSequence;
$resultZoneDiv = "resultZone" . $pageSequence;
$tableZone = "#tableZone" . $pageSequence;
$tblName = "tblReport" . $pageSequence;
$btAdd = "btnAdd" . $pageSequence;
$btDel = "btnDel" . $pageSequence;
$btDelObj = "btnDelObj" . $pageSequence;
$dataSection = "dataSection" . $pageSequence;
$_SESSION['sequence']++;
//echo  dirname(__FILE__);  
//echo $_SERVER['DOCUMENT_ROOT'] . "   ".dirname(__FILE__)."  ".str_replace($_SERVER['DOCUMENT_ROOT'],"",dirname(__FILE__)) ;

$currentBaseDir = dirname($_SERVER['PHP_SELF']);
include_once($_SESSION['basedir'] . "veriflog.php");
include_once($_SESSION['basedir'] . "core.php");
include_once($_SESSION['basedir'] . "Class.Asterisk.cust.php");


$tool = new svaTool();

/********* RETOUR ASTERISK */
// Instanciation de la classe AsteriskCustom
// Créez une instance de la classe AsteriskCustom
//$asterisk = new AsteriskCustom('host', 'user', 'password', 'port', 'svaLog');

// Obtenir les informations des files d'attente
$queueInfoOutput = $custAstManager->getQueueInfo();

// Obtenir les informations des users online
$queueInfoOutput2 = $custAstManager->getSipPeersInfo();

/********* Fin retour ASTERISK */

$response = array();

//compter les user on line
$onlineUsersCount = $queueInfoOutput2['onlineuser'];


$TempsAtenteMoyen = $tool->convertSecondsToHMS(round($queueInfoOutput['averageWaitTime'], 2));

// Obtenir taux de reponse
$avgCallRespRate  = $dba->getSCCAvgCallRespRate(date("Y-m-d"));
$response['responseRate'] = $avgCallRespRate;

//************************************************

// Obtenir la durée moyenne de communication
$DureeMoyenneCommunication = $dba->getAverageDurationByDate(date("Y-m-d"));
$response['avgCommDuration'] = $DureeMoyenneCommunication;
//$currentDate = "2024-07-04";

// Obtenir le nombre d'appels manqués
$StatJourAppelNonDecroche= $dba->getUnpickedCallsCountByDate(date("Y-m-d"));
$response['missedCalls'] = $StatJourAppelNonDecroche;

// Obtenir volume appels traité
$VolumeAppelTraite = $dba->getProcessedCallsCountByDate(date("Y-m-d"));
$response['processedCalls'] = $VolumeAppelTraite;

//var_dump($avgCallRespRate); 

//$res = $dba->getUserDetailByRight($_SESSION['right'], $_SESSION['ownerId'], false, 0, 0);

?>

<style type="text/css">
 

.bg-light {
  background-color: #FAFAFA;
  color: #666;
}

.br-light {
  border-color: #e7e7e7 !important;
}

.br-a {
  border: 1px solid #eeeeee !important;
}

.ph30 {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.ph60 {
  padding: 60px !important;
}

.pv20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.bg-light.dark {
  background-color: #F2F2F2;
}

.micro-header {
  color: #999;
  text-align: center;
  font-weight: 400;
  margin-bottom: 20px;
}



.holder-style.holder-active {
  background-color: #FFF;
  border:2px dashed #70ca63;
}

.mb20 {
  margin-bottom: 20px !important;
}

.p15 {
  padding: 15px !important;
}

.holder-style {
  display: block;
  padding: 9px 16px;
  color: #AAA;
  background-color: #f1f1f1;
  border: 2px dashed #d9d9d9;
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  transition: all 0.15s ease;
}

.holder-style.holder-active .holder-icon {
  color: #70ca63;
}

.holder-style .holder-icon {
  color: #AAA;
  font-size: 30px;
  padding-bottom: 10px;
}
a, a:hover, a:focus{
    text-decoration:none !important;    
}
 New css
 .duration-display {
    font-size: 96px;
    display: inline-block;
}

.duration-display span {
    font-size: 0.5em;
    vertical-align: middle;
}
    
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="header-icon">
        <i class="fa fa-user-circle"></i>
    </div>
    <div class="header-title">
        <h1>Bandeau Superviseur</h1>
        <small>Bandeau Superviseur</small>
    </div>
</section>
<!-- Main content -->
<div id="<?php echo $dataSection; ?>">
    <section class="content">
        
          <div class="row">
                  
                  <div class="col-sm-12 col-md-4">
                     <div class="panel panel-bd lobidisable">
                        <div class="panel-heading">
                           <div class="panel-title">
                              <h4>Files d'attente</h4>
                           </div>
                        </div>
                        <div class="panel-body">
                            <div id="morris-donut-chart2">
                                <center>
                                    
                                <h1 style="font-size: 80px" id="queueCount"><?php echo $queueInfoOutput['callsInQueue']; ?></h1>
                                    
                                </center>
                                
                                
                            </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-12 col-md-4">
                     <div class="panel panel-bd lobidisable">
                        <div class="panel-heading">
                           <div class="panel-title">
                              <h4>Durée moyenne de communication</h4>
                              </div>
                    </div>
                    <div class="panel-body">
                        <div id="morris-line-chart2">
                            <center>
                                <h1 class="duration-display" style='font-size:80px' id="avgCommDuration"><?php echo round($DureeMoyenneCommunication, 2); ?> <span>Min</span></h1>
                            </center>
                        </div>
                    </div>
                </div>
            </div>
                  <div class="col-sm-12 col-md-4">
                     <div class="panel panel-bd lobidisable" data-initial-index="4">
                        <div class="panel-heading">
                           <div class="panel-title">
                              <h4>Volume d'appels traités</h4>
                           </div>
                        </div>
                        <div class="panel-body">
                            <div id="morris-bar-chart2">
                                
                                 <center>
                                    
                                 <h1 style="font-size: 80px" id="processedCalls"><?php echo $VolumeAppelTraite; ?></h1>
                                    
                                </center>
                                
                                
                            </div>
                        </div>
                     </div>
                  </div>
               </div>
       
        <div class="row">
                  
                  <div class="col-sm-12 col-md-4">
                     <div class="panel panel-bd lobidisable">
                        <div class="panel-heading">
                           <div class="panel-title">
                              <h4>Appels - Taux de réponse</h4>
                           </div>
                        </div>
                        <div class="panel-body">
                            <div id="morris-donut-chart">
                                
                                 <center>
                                    
                                    <h1 class="duration-display" style="font-size: 80px" id="responseRate"><?php echo $avgCallRespRate; ?><span>%</span></h1>
                                    
                                </center>
                                
                                
                            </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-12 col-md-4">
                     <div class="panel panel-bd lobidisable">
                        <div class="panel-heading">
                           <div class="panel-title">
                              <h4>Temps d'attentes moyens</h4>
                           </div>
                        </div>
                        <div class="panel-body">
                            <div id="morris-line-chart">
                                
                                 <center>
                                 
                                 <h1 style="font-size: 68px" id="avgWaitTime"><?php echo $TempsAtenteMoyen; ?></h1>
                                    
                                </center>
                            </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-12 col-md-4">
                     <div class="panel panel-bd lobidisable" data-initial-index="4">
                        <div class="panel-heading">
                           <div class="panel-title">
                              <h4>Nombre d'appels manqués</h4>
                           </div>
                        </div>
                        <div class="panel-body">
                            <div id="morris-bar-chart">
                                
                                 <center>
                                    
                                 <h1 style="font-size: 80px" id="missedCalls"><?php echo $StatJourAppelNonDecroche; ?></h1>
                                    
                                </center>
                                
                                
                            </div>
                        </div>
                     </div>
                  </div>
               </div>
        
          <div class="row">
                  
                  <div class="col-sm-12 col-md-4">
                     <div class="panel panel-bd lobidisable">
                        <div class="panel-heading">
                           <div class="panel-title">
                              <h4>Agents - En ligne</h4>
                           </div>
                        </div>
                        <div class="panel-body">
                            <div id="morris-donut-chart1">
                                
                                 <center>
                                    
                                     <h1 style="font-size: 80px" id="onlineuser"><?php echo $onlineUsersCount;  ?></h1>
                                    
                                </center>
                                
                                
                            </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-12 col-md-4">
                     <div class="panel panel-bd lobidisable">
                        <div class="panel-heading">
                           <div class="panel-title">
                              <h4>Communication en cours</h4>
                           </div>
                        </div>
                        <div class="panel-body">
                            <div id="morris-line-chart1">
                                
                                 <center>
                                    
                                 <h1 style="font-size: 80px" id="callsInProgress"><?php echo $queueInfoOutput['callsInProgress']; ?></h1>
                                    
                                </center>
                                
                            </div>
                        </div>
                     </div>
                  </div>
                 
       
            </section>
</div>
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="plugins/datatables/dataTables.buttons.min.js"></script>
<script src="plugins/datatables/buttons.html5.min.js"></script>
<script type="text/javascript" src="js/jquery.loading.min.js"></script>


<!-- AJAX pour charger les nouvelles données du tableau de bord -->
<script type="text/javascript">
$(document).ready(function(){
    var refreshInterval;

    function refreshDashboard() {
        $.ajax({
            url: 'products/scc/update_dashboard.php',
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                $('#queueCount').text(data.queueCount);
                $('#avgWaitTime').text(data.avgWaitTime);
                $('#callsInProgress').text(data.callsInProgress);
                $('#avgCommDuration').text(data.avgCommDuration + ' Min');
                $('#processedCalls').text(data.processedCalls);
                $('#responseRate').text(data.responseRate + '%');
                $('#missedCalls').text(data.missedCalls);
                $('#onlineuser').text(data.onlineuser);
            },
        });
    }

    function startRefreshing() {
        // Démarrer l'intervalle de rafraîchissement
        refreshInterval = setInterval(refreshDashboard, 1000);
    }

    function stopRefreshing() {
        // Arrêter l'intervalle de rafraîchissement
        clearInterval(refreshInterval);
    }

    // Démarrer le rafraîchissement quand le document est prêt
    startRefreshing();

    // Arrêter le rafraîchissement lorsque l'utilisateur quitte la page
    $(window).on('beforeunload', function(){
        stopRefreshing();
    });

    // Optionnel : Arrêter le rafraîchissement si l'utilisateur change de page sans recharger
    $(document).on('visibilitychange', function() {
        if (document.visibilityState === 'hidden') {
            stopRefreshing();
        } else if (document.visibilityState === 'visible') {
            startRefreshing();
        }
    });
});
</script>


<!-- FIN  -->

<script type="text/javascript" >


     var time = new Date().getTime();
     $(document.body).bind("mousemove keypress", function(e) {
         time = new Date().getTime();
     });

     function refresh() {
         if(new Date().getTime() - time >= 5000) {
			 //alert('Reloding Tab');
             $('#<?php echo $toDiv; ?>').load('<?php echo $currentBaseDir; ?>/scc_supervisor_dashboard.php');
		 }
         else 
             setTimeout(refresh, 30000);
     }

     setTimeout(refresh, 30000);
     
     
  </script>



<script type="text/javascript" src="js/jquery.loading.min.js"></script>
<link rel="stylesheet" href="css/jquery-confirm.min.css">
<script src="js/jquery-confirm.min.js"></script>