<?php
  include 'SubFW/autoload.php';

  /*
  if($_SESSION['view'][VIEW_STATISTIC] != '1')
  {
    include('../Common/404nf.html');
    exit();
  }
  */
 ?>

<html>

	<head>

		<style>
		</style>


		<script>
      var myTabbar;
      var irsn1;
      var nm;

      var myLayout;

      function init_layout()
      {
          var idcTab        = document.getElementById( 'v-pills-tab' );
          var idcTabContent = document.getElementById( 'v-pills-tabContent' );

          let tab        = '';
          let tabContent = '';
          let tabID  = '';
          let panelID = '';


          <?php
              $conn = get_dbconnection();

              if($conn)
              {
                  $sql = "select a.id,tabname,a.description_{$_SESSION['lang']},coalesce(a.modalitytitle,'*') from annexe_afcn a where a.active = true order by tabname";

                  // $listdescription = array();
                  $index = 0;
                  
                  if($query=pg_query($conn,$sql))
                  {
                      while( $row = pg_fetch_row($query) )
                      {
                          $active =( $index == 0 )? "" : "";
                          $id             = $row[0];
                          $tabname        = $row[1];
                          $description    = $row[2];
                          $modalitytitle  = $row[3];
                          $url            = $EODACS_ROOT."/SubFW/html/exportafcnfilter.php?modalitytitle=".$modalitytitle."&type=".$id;

                          $index++;
                          ?>

                          tabID   = 'IdcEATab_<?=$id?>'; 

                          console.log( " tabID : " + tabID ); 

                          panelID = 'IdcEAPanel_<?=$id?>'; 

                          // tab = '<button class="nav-link" id="'+tabID+'" data-bs-toggle="pill" data-bs-target="#'+panelID+'" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><?=htmlspecialchars($tabname)?></button>';
                          tab = '<button class="nav-link <?=$active?>" id="'+tabID+'" data-bs-toggle="pill" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true" data-url="<?=$url?>"><?=htmlspecialchars($tabname)?></button>';

                          // tabContent = '<div class="tab-pane fade w-100 h-100 m-0 p-0 ps-3 pt-3 pe-3 pb-3 bg-light" id="'+panelID+'" role="tabpanel" aria-labelledby="'+tabID+'" data-url="<?=$url?>">'+panelID+'</div>';

                          
                          idcTab.innerHTML        += tab;
                          // idcTabContent.innerHTML += tabContent;

                          // document.getElementById(tabID).addEventListener( 'shown.bs.tab',() => { EATabShown(); } );
                          
                          // myTabbar.addTab("<?php echo $id;?>", "<?php echo $tabname;?>", null, null, false);
                          // myTabbar.tabs("<?php echo $id;?>").title = "<?php echo $description;?>";
                          // myTabbar.tabs("<?php echo $id;?>").attachURL('<?php echo $EODACS_ROOT;?>/exportafcnfilter.php?modalitytitle=<?php echo $modalitytitle;?>&type=<?php echo $id;?>');

                          
                <?php }
                  }
              }
          ?>

          idcTab.addEventListener('shown.bs.tab',(event) => {
              EATabShown(event);
          });

          // idcTab.innerHTML = tab;
          // idcTabContent.innerHTML = tabContent;

          

          // myTabbar.setSkin('material');

          // myTabbar.setArrowsMode("auto");


          // myTabbar.tabs(activeid).setActive();

          // myLayout.attachEvent("onResizeFinish", function(){
          //  myTabbar.setSizes();
          //});
          // window.myLayout = myLayout;
      }
      /*
      function EATabShown(event)
      {
        console.log( "EATabShown...");
        const activeTab = event.target;

        const panelSelector = activeTab.getAttribute('data-bs-target'); // exemple : "#IdcEAPanel_3"
        const panel = document.querySelector(panelSelector);
        console.log("ID panel : ", panel.id );
        let url = panel.getAttribute('data-url');
        console.log( ' URL : ' + url );

        // L'ID de l'onglet activé
        const tabID = activeTab.id;

        // console.log("Onglet activé : ", activeTab);
        // console.log("ID de l'onglet activé : ", tabID);

        RenderPage( url,  panel.id );
      }
      */

      function EATabShown(event)
      {
        const activeTab = event.target;

        const panelSelector = activeTab.getAttribute('data-bs-target'); // exemple : "#IdcEAPanel_3"
        let url = activeTab.getAttribute('data-url');
        console.log( ' URL : ' + url );

        const tabID = activeTab.id;

        RenderPage( url,  'v-pills-tabContent' );
      }

    </script>

  </head>


	<body>
    <div id="layout" class="w-100 h-100">

        <div class="d-flex align-items-start w-100 h-100 border-start border-top border-bottom rounded-start-3">
            <div class="nav flex-column nav-pills h-100 m-0 p-0 ps-2 pt-4 pe-0 ximeo_bg-light" id="v-pills-tab" role="tablist" aria-orientation="vertical" style="min-width: 200px;">
            </div>
            <div class="w-100 h-100 m-0 p-0 ps-2 pt-2 pb-2 pe-2 ximeo_app-color">
                <div class="tab-content w-100 h-100 m-0 p-0 ps-2 pe-2 pt-2 pb-2 bg-light" id="v-pills-tabContent" style="transition: opacity 2.3s ease !important;">
                </div>
            </div>
        </div>
    </div>

    <script>
      
        init_layout();
        
    </script>
	</body>

	<script>
		// init_layout();
		/*** POURQUOI ?????? ***/
    /*console.log( "Click on button !!!");
    document.getElementById("IdcEATab_irsnctadulte").click();*/
    switchLanguage( eoDACS.CurrentLanguage );
	</script>

</html>
