<?php
$valeursAutorisees = [25,33,50,75,100,200,300,400,600,1000,1200,1500,3000];

// OldAllHeard1	--- List Historique Trafics (Tx) ---
// OldAllHeard2	--- List de tout les indicatifs ----
// allHeard 	--- List entendues aujourd hui -----
// lastHeard 	--- List dernier entendu -----------

if (!in_array($StepQuart, $valeursAutorisees, true)) {
    $StepQuart = 100;
    if (isset($_GET['step'])) {
        $StepQuart = floatval($_GET['step']);
      }
}
?>

<!--    table table-condensed    -->
<div class="card" style="background-color:#DADAEA; padding:5px; box-shadow:0 0 10px 3px #000; border-radius:15px;">

<style>
@media (max-width: 720px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.2em;
  }
  .card-header form {
    margin-top: 8px;
  }
  #toggleViewBtnOldHeard {
    margin-top: 10px;
    align-self: flex-end;
  }
}
</style>

<!-- *********** //  *************************************************************************** TEST  ********************************************************  -->

<!-- ----------- //  *********** Debut  Date Historique Recherche ******************************  ---------------- -->
<?php
$today = date('Y-m-d');
$startDefault = $_GET['start'] ?? date('Y-m-d', strtotime('-1 day')); // date automatique : un jour avant aujourd'hui
$endDefault = $_GET['end'] ?? $today;
$StepQuart = ($StepQuart / 100);
?>
<!-- ----------- //  *********** Fin Date Historique  recherche  ********************************  ----------------  -->

<div class="card-header" style="background-color:#838393; color:#DFEFFF; font-size:1.6em; font-weight:bold; text-shadow:1px 1px 4px #000; padding:12px 18px; 
      border-radius:15px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;">

 <div style="display:flex; align-items:center; gap:10px;">
  <table>
   <tr>
    <td>
    <span>Liste Historique Trafics (Tx) </span>
    </td>
    <td>  
    </td>
    <td>
    <button id="toggleViewBtnOldHeard" style="border-radius:10px; padding:4px 10px; background-color:#CBDADA; color:#000; font-size:0.8em; align-items:right; gap:10px;"> Afficher la liste </button>
    </td>
   </tr>
   <tr>
    <td>
     <form method="GET" style="display:flex; gap:8px; align-items:center; background-color: #848490; color: #AFEFEF; font-size: 0.9em; border-radius: 15px; padding: 10px;">
	<label for="start">Début :</label>
	<input type="date" name="start" id="start" value="<?= $startDefault ?>" style="display:flex; gap:8px; align-items:center; background-color: #747480; color: #AFDFFF; font-size: 0.9em; border-radius: 5px; padding: 2px;">
	<label for="end">Fin :</label>
	<input type="date" name="end" id="end" value="<?= $endDefault ?>" style="display:flex; gap:8px; align-items:center; background-color: #747480; color: #AFDFFF; font-size: 0.9em; border-radius: 5px; padding: 2px;">
	<button type="submit" style="display:flex; gap:8px; align-items:center; background-color: #A4D4C0; color: #2F2F2F; font-size: 0.9em; border-radius: 5px; padding: 2px;">Filtrer</button>
	<form method="GET" style="background-color:#686878; display:flex; align-items:center; padding: 10px; border-radius: 15px; margin:0;">
	    <label for="stepSelect" style="color:#8FCFFF; margin-right:2px; font-size:0.8em; padding: 0px 0px 0px 20px;">Période :</label>
	    <select id="stepSelect" name="step" onchange="this.form.submit()" style="background-color:#686878; color:#90CFFF; border:none; border-radius:5px; padding:2px 6px; font-size:0.8em;">
		<option value="25" <?= ($StepQuart == 0.25 ? 'selected' : '') ?>>4 Heures</option>
		<option value="33" <?= ($StepQuart == 0.33 ? 'selected' : '') ?>>3 Heures</option>
		<option value="50" <?= ($StepQuart == 0.50 ? 'selected' : '') ?>>2 Heures</option>
		<option value="75"   <?= ($StepQuart == 0.75   ? 'selected' : '') ?>>1.5 Heure</option>
		<option value="100"   <?= ($StepQuart == 1   ? 'selected' : '') ?>>1 Heure</option>
		<option value="200"   <?= ($StepQuart == 2   ? 'selected' : '') ?>>30 Minutes</option>
		<option value="300"   <?= ($StepQuart == 3   ? 'selected' : '') ?>>20 Minutes</option>
		<option value="400"   <?= ($StepQuart == 4   ? 'selected' : '') ?>>15 Minutes</option>
		<option value="600"   <?= ($StepQuart == 6   ? 'selected' : '') ?>>10 Minutes</option>
		<option value="1000"  <?= ($StepQuart == 10  ? 'selected' : '') ?>>6 Minutes</option>
		<option value="1200"  <?= ($StepQuart == 12  ? 'selected' : '') ?>>5 Minutes</option>
		<option value="1500"  <?= ($StepQuart == 15  ? 'selected' : '') ?>>4 Minutes</option>
		<option value="3000"  <?= ($StepQuart == 30  ? 'selected' : '') ?>>2 Minutes</option>
	    </select>
	</form>
     </form>
    </td>
    <td> 
    </td>
    <td> 
    </td>
   </tr>
  </table>
 </div>

</div>


<!-- ***************************************************************************************** TEST  ********************************************************  -->


<?php
// Récupération du choix de l'utilisateur dans l’URL
if (!in_array($StepQuart, $valeursAutorisees, true)) {
    if (isset($_GET['step'])) {
	$StepQuart = floatval($_GET['step']);
	$StepQuart = ( $StepQuart / 100);
    } else {
	$StepQuart = 1;// ---------------------------------------- Memoir  1Hrs  ****************************************************************************
    }
}


$StepTXT = '';
// $StepQuart = $StepQuart / 100;
if ($StepQuart <= 0.25 ) {
$StepTXT = '4 Heures ' ;
} else if ($StepQuart == 0.33 ) { 
$StepTXT = '3 Heures ' ; 
} else if ($StepQuart == 0.5 ) { 
$StepTXT = '2 Heures ' ; 
} else if ($StepQuart == 0.75 ) { 
$StepTXT = '1.5 Heures ' ;
} else if ($StepQuart == 1 ) { 
$StepTXT = '1 Heure ' ; 
} else if ($StepQuart == 2 ) { 
$StepTXT = '30 Minutes ' ;
} else if ($StepQuart == 3 ) {
$StepTXT = '20 minutes ' ;
} else if ($StepQuart == 4 ) { 
$StepTXT = '15 Minutes ' ;
} else if ($StepQuart == 6 ) { 
$StepTXT = '10 minutes ' ;
} else if ($StepQuart == 10 ) {
$StepTXT = '6 Minutes ' ;
} else if ($StepQuart == 12 ) {
$StepTXT = '5 Minutes ' ;
} else if ($StepQuart == 15 ) {
$StepTXT = '4 Minutes ' ;
} else if ($StepQuart == 30 ) {
$StepTXT = '2 minutes ' ;
} else { 
$StepTXT = 'Indetermine ! ' ;
}


if ( $StepQuart <= 0.25 ) { 
	$StepTminutes = (240 / 1 ); // 4Hrs
    } else if ( $StepQuart <= 0.33 ) { 
	$StepQuart = (0.3333333333334);
        $StepTminutes = (180 / 1 );  // 3 Hrs
    } else if ( $StepQuart <= 0.50 ) { 
        $StepTminutes = (120 / 1 ); // 2 Hrs 
    } else if ( $StepQuart <= 0.75 ) { 
        $StepTminutes = (90 / 1 );  // 1h30
    } else { 
        $StepTminutes = (60 / $StepQuart ); // 1Hrs et Moin
    }






$StepTimes = (24 * $StepQuart); // Nombre total de tranches dans 24 h
$visitesParQuartHeure = array_fill(0, $StepTimes, 0);
$NBVisiteurs24Hrs = 0;

$oldallHeardFiltre = [];

// ********************* DATE  ****   ET  **  HEURES  *********************************************************

    $startDef = $startDefault.' 00:00:00'; // -----  Date automatique : un jour avant aujourd'hui  ----------
$start = strtotime($_GET['start'] ?? $startDef); //   ?? $startDef);   ou   ?? '2025-01-01 00:00:00');  -----

    $end   = strtotime($_GET['end'] ?? date('Y-m-d 23:59:59')); // $endDefault   ****************************
// Ici, on ajoute 1 jour à la date de fin pour inclure toute la journée
$end = strtotime('+1 day', $end);

// ********************* DATE  ****   ET  **  HEURES  *********************************************************

// Filtrage des dates dans le range sélectionné
foreach ($oldallHeard as $listElem) {
    $timestamp = strtotime($listElem[0]);
    if ($timestamp === false) continue;


    if (($start && $timestamp < $start) || ($end && $timestamp > $end)) {
        continue;
    }
    $oldallHeardFiltre[] = $listElem;
}

$oldallHeard = $oldallHeardFiltre;

// Comptage des transmissions par tranche horaire
foreach ($oldallHeard as $listElem) {
    $NBVisiteurs24Hrs++;

    $timestamp = strtotime($listElem[0]);
    if ($timestamp === false) continue;

    // Heures totales de la journée en minutes
    $totalMinutes = (int)date('H', $timestamp) * 60 + (int)date('i', $timestamp);

    // Calcul du bon créneau horaire
    $index = (int)floor(round($totalMinutes / $StepTminutes, 3));

    // Vérifie les bornes pour éviter les erreurs d’index
    if ($index >= 0 && $index < count($visitesParQuartHeure)) {
        $visitesParQuartHeure[$index]++;
    } else {
        // Tu peux commenter cette ligne si tu veux éviter l’affichage
        // echo "Erreur index hors intervalle: $index<br>";
    }
}







// echo $index .' --' . $visitesParQuartHeure[$index] . '__' . (int)date('i', $timestamp) . ' == ' . $timestamp ; // *****************************************

$labels = [];  //                      96 - 4 --4 _ 15    //    48 - 2 --2 _ 30    //    24 -  1  --1 _ 60   //    12 -* 2 --1 _ 60   //   6 -* 4 --1 _ 60   

if ( $StepQuart == '0.3333333333334' ) {
     $StepTimes = $StepTimes - (0.0000000000016) ; // 8
    } 

if ( $StepQuart == '0.75' ) {
     $StepTimes = $StepTimes -2; // 16
    } 

    for ($i = 0; $i < $StepTimes; $i++) {

       if ( $StepQuart == '0.3333333333334' ) { 
	$h = floor(round((($i)+ (0.00000000000016 )) / $StepQuart));
        } else {
	$h = floor($i / $StepQuart );
        }  //    $StepQuart

       if ( $StepQuart == '0.75' ) { 
	$h = floor((($i) + ($i/ 8 )) / $StepQuart );
        }  //    $StepQuart

       if ( $StepQuart <= '0.3333333333334' ) { 
	$m = ($i % 1 ) * 180 ; 

        } elseif ( $StepQuart <= '0.5' ) { 
	$m = ($i % 1 ) * 60 ; 

        } elseif ( $StepQuart <= '0.75' ) { 
	$m = ($i % 2 ) * 30 ; 
        } else { 
	$m = ($i % $StepQuart ) * $StepTminutes; 
        } //  $StepQuart ) * $StepTminutes

	$labels[] = sprintf('%02dh%02d', $h, $m);
    }
?>

<!-- Contenu de la carte (basculable) ---------------------  -->
  <div class="card-body" style="padding:10px;">

  <!-- Tableau visible au départ -->
    <div id="tableContainer" class="table-responsive" style="display:none;">
      <table id="oldHeard" class="table table-condensed" data-page-length="15">
       <thead>
         <tr>
           <th>Heure (<?php echo TIMEZONE;?>)</th>
           <th>Indicatif</th>
           <th>Cible</th>
           <th>passerelle</th>
           <th>Durée (s)</th>
         </tr>
        </thead>
        <tbody>
          <?php 
	    $iii = (count($oldallHeard) +1);
	    foreach ($oldallHeard as $listElem):;
	    $iii = $iii -1;
// < ? php $iii++ ; ? >
	 ?>
            <tr style="background-color:#CACADA;">

              <td><?= $iii ?> -> <?= $listElem[0] ?></td>
    <?php
      if ($listElem[1] !== "??????????" && !is_numeric($listElem[1])) {
        $dayCaller = preg_replace('/[-\/_].*/', '', $listElem[1]);
        echo "<td nowrap><a target=\"_new\" href=\"https://qrz.com/db/$dayCaller\">" 
             . str_replace("0", "&Oslash;", $listElem[1]) . "</a></td>";
      } else {


        $dayCaller = preg_replace('/[-\/_].*/', '', $listElem[1]);
        echo "<td nowrap> * " . str_replace("0", "&Oslash;", $listElem[1]) . "</td>";


//        echo "<td></td>"; // ou autre gestion

// ------------- Voit init.php ----------------- 
// oldallHeard 	--- List tout les temps -------- les dernier Tx de caller chaque jour
// allHeard 	--- List entendue aujourd hui -- tout PTT  des callers
// lastHeard 	--- List dernier entendue ------ les callers du jour

      }
    ?>
              <td><?= $listElem[2] ?></td>
              <td><?= $listElem[3] ?></td>
              <td><?= $listElem[4] ?></td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
  </div>  <!-- Tableau visible au Fin -------------------------------------------------------------------------   -->





<!-- ------------------------ Canvas Screen  --------- width 1120    height 350    -------------   -----------------   -->

<!-- ---------   	 <p style="color:green;">Total transmissions détectées par : < ? = $StepTXT ? > (Liste Historique) </p>  -----------------   -->
<!-- ---------   <button id="printChartBtn">Imprimer le graphique</button> </p>   -----------------   -->

    <div id="graphContainer" style="display:block;text-align:center;">
	<?php echo "<p style='color:#005F7F; font-size:1.1em;'>Période analysée du " . date('d-m-Y', $start) . " au " . date('d-m-Y', strtotime('-1 day', $end)) . " Total  détectées : $NBVisiteurs24Hrs "."  transmissions . ". " <button id='printChartBtn' style='color:#000F4F; border:none; border-radius:5px; padding:5px; font-size:1.2em; box-shadow: 0px 0px 3px #000;'> Imprimer le graphique </button> </p>"; ?>


	 <canvas id="visitesGraph" width="1120" height="350"></canvas>


	 <p style="color:#007080;">Heure locale du Québec : <?php echo formatDateFrenchGW(date('l d-m-Y H:i')); ?></p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- ----------------------- Canvas Screen  -------------------------------------------------------------------------  --> 


 </div> <!-- fin card-body -->
</div> <!-- fin card -->

<!--  -----  	 <p style="color:#005070;"> Statistiques du < ? = $_GET['start'] ?? 'Début' ? > a < ? = $_GET['end'] ?? 'Maintenant' ? > (< ? = count($oldallHeard) ? > Enregistrements)</p>  -----  -->


<script>
document.getElementById('printChartBtn').addEventListener('click', () => {
  const container = document.getElementById('graphContainer');
  const canvas = document.getElementById('visitesGraph');
  const dataUrl = canvas.toDataURL('image/png');

  // On récupère le titre et l'heure locale HTML
  const titleHTML = container.querySelector('p:first-of-type').outerHTML;
  const heureHTML = container.querySelector('p:last-of-type').outerHTML;

  // On crée une nouvelle fenêtre d'impression
  const printWindow = window.open('', '_blank');
  printWindow.document.write('<html><head><title>Impression Graphique</title></head><body style="text-align:center;">');

  // On insère le titre, l'image et l'heure locale
  printWindow.document.write(titleHTML);
  printWindow.document.write('<img src="' + dataUrl + '" style="max-width: 100%; height: auto;"/>');
  printWindow.document.write(heureHTML);

  printWindow.document.write('</body></html>');
  printWindow.document.close();
  printWindow.focus();

  // Attendre un peu que la fenêtre ait chargé le contenu puis imprimer
  setTimeout(() => {
    printWindow.print();
    printWindow.close();
  }, 500);
});

</script>

<!-- Chart.js -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const btn = document.getElementById('toggleViewBtnOldHeard');
  const table = document.getElementById('tableContainer');
  const graph = document.getElementById('graphContainer');

  // Le texte du bouton doit correspondre à l'affichage actuel (graphique visible)
  btn.textContent = 'Afficher la liste';

  btn.addEventListener('click', () => {
    if (table.style.display === 'none') {
      table.style.display = 'block';
      graph.style.display = 'none';
      btn.textContent = 'Afficher le graphique';
    } else {
      table.style.display = 'none';
      graph.style.display = 'block';
      btn.textContent = 'Afficher la liste';
    }
  });
});

    const labels = <?= json_encode($labels) ?>;
    const dataVisites = <?= json_encode(array_values($visitesParQuartHeure)) ?>;
    // Exemple : définir des couleurs spécifiques pour certaines heures
    const couleursBarres = labels.map((_, index) => {
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 1) )) return '#373737';  // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 2) )) return '#5E636C';  // Nuit profonde (violet)

    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 3) )) return '#708090';  // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 4) )) return '#308A9A';  // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 5) )) return '#4380A7';  // Nuit profonde (violet)

    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 6) )) return '#4797C8';  // Nuit profonde (violet)

    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 7) )) return '#3F7FCF';  // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 8) )) return '#478FD6';  // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 9) )) return '#5FAFF6';  // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 10) )) return '#BFCC80';     // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 11) )) return '#E8D887';     // Nuit profonde (violet)

    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 12) )) return '#E7D780';     // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 13) )) return '#E7D070';     // Nuit profonde (violet)

    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 14) )) return '#FFD760';     // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 15) )) return '#F7C767';     // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 16) )) return '#E0B767';     // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 17) )) return '#D7A767';     // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 18) )) return '#B07450';     // Nuit profonde (violet)

    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 19) )) return '#9C5C7C';     // Nuit profonde (violet)

    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 20) )) return '#874788';     // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 21) )) return '#774088';     // Nuit profonde (violet)
    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 22) )) return '#673D78';     // Nuit profonde (violet)

    // index 0–5 : 00h00–01h15
    if (index < ( <?= $StepTimes ?> / (24 / 23) )) return '#605070';     // Nuit profonde (violet)

    // index 81–95 : 20h15–23h45
    return '#4A4A4A';                                                    // nuit (violet foncé)
});

// Fonction pour éclaircir légèrement la couleur au survol  ----------- label:'Total transmissions détectées par :< ? = ' '.$StepTXT ? > (Liste Historique)',  ------------  label: 'Nombre Total de PTT (Tx) < ? = '  ' .$NBVisiteurs24Hrs ? >' ,
    function lightenColor(hex, percent) {
        const num = parseInt(hex.replace('#',''), 16);
        const r = Math.min(255, (num >> 16) + 255 * percent);
        const g = Math.min(255, ((num >> 8) & 0x00FF) + 255 * percent);
        const b = Math.min(255, (num & 0x0000FF) + 255 * percent);
        return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
    }

    const hoverCouleurs = couleursBarres.map(c => lightenColor(c, 0.2));
    const ctx = document.getElementById('visitesGraph').getContext('2d');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label:'Total transmissions détectées par :<?= ' '.$StepTXT ?> (Liste Historique)',
                data: dataVisites,
                backgroundColor: couleursBarres, // <= tableau de couleurs ici
                hoverBackgroundColor: hoverCouleurs,  // couleur éclaircie au survol
                borderColor: '#010101',
                borderWidth: 1
            }]
  },
options: {
  responsive: false,
  scales: {
    y: {
      beginAtZero: true
    }
  },
  plugins: {
    legend: {
      onClick: null  // Désactive le clic sur la légende
    }
  }
}
});

// DataTable init
    $(document).ready(function(){
      $('#oldallHeard').DataTable( {"aaSorting": [[0,'desc']]
      } );
    });
   </script>
