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

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

<html>

	<head>


		<style>

			.cinvertimg{
  			filter: invert(100%);
			}

			.weekDays-selector input {
  			display: none!important;
			}

			.weekDays-selector input[type=checkbox] + label {
  			display: inline-block;
  			border-radius: 6px;
  			background: #dddddd;
  			height: 40px;
  			width: 30px;
  			margin-right: 3px;
  			line-height: 40px;
  			text-align: center;
  			cursor: pointer;
  			moz-user-select: none;
   			-khtml-user-select: none;
   			-webkit-user-select: none;

   			/*
     			Introduced in Internet Explorer 10.
     			See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   			*/
   			-ms-user-select: none;
   			user-select: none;
			}	

			.weekDays-selector input[type=checkbox]:checked + label {
  			background: #d4aa00;
  			color: #ffffff;
			}

			labeldate{
  			display: inline-block;
  			width: 50px;
			}


			.mycontainer{
  			/*  background-color:#2E4272;*/
    			display:flex;
    			height:100%;
			}
			.myfixed{
    			/*  background-color:#4F628E;*/
    			width: 290px;
			}

			.myflex-item{
  			/*    background-color:#7887AB;*/
    			flex-grow: 1;
			}

			.row .no-float {
      			display: table-cell;
      			float: none;
  			}

		</style>


		<script>

			function init_layout ()
			{
  				$(function() 
  				{
    			__solmodality = $('#modality').searchableOptionList({
      			texts: {
        			selectNone: 'Select all'
      			},
      			events: {
      			},

      			maxHeight: '300px',
      			showSelectNoneOnly: true,
      			showSelectionBelowList: true,
      			// data: '<?php echo $GLOBALS["EOQUAL_ROOT"];?>/Main/dbconnector/stats/get_filter_elements.php?type=modality'
            data: '<?php echo $GLOBALS["EOQUAL_ROOT"];?>/eoQUAL/SubFW/database/stats/get_filter_elements.php?type=modality'
    			});
  				});

  				$(function() 
  				{
    			__solradiologist = $('#radiologist').searchableOptionList({
      			texts: {
        			selectNone: 'Select all'
      			},
      			events: {

      				},

      			maxHeight: '300px',
      			showSelectNoneOnly: true,
      			showSelectionBelowList: true,
      			data: '<?php echo $GLOBALS["EOQUAL_ROOT"];?>/eoQUAL/SubFW/database/stats/get_filter_elements.php?type=radiologist'
    			});
  				});
  				

  				window.changeChartStyle = changeChartStyle;
  				window.setLayout = setLayout;
  				window.setActiveChart = setActiveChart;
  				window.selectActiveStyle = selectActiveStyle;
  				window.refreshData = refreshData;
  
  				initChartConfig ();

  				var checkExist = setInterval(function() {
    				if(typeof __solmodality !== "undefined" && typeof __solradiologist !== "undefined"){
      				//variable exists, do what you want
      				defaultLayout();
      				clearInterval(checkExist);
    				}
				}, 150);

  				document.getElementById("IdcStatApplyButton").addEventListener("click", function(event) {
    				event.preventDefault();

    				llayout2refresh.forEach(lid => {
      					var layoutselected = chartSelectedByLayout[lid];
      					if(layoutselected !== undefined && (layoutselected.chartobj != null || layoutselected.default !== undefined))
        				refreshData(lid);
      					}
    				);
  				});

  				if(typeof resizeLayout === 'function')
      				resizeLayout();
			}


<?php
  //for variable $chartlist
  require_once '../../../Config/statistic/chartconfig.php';
?>

function defaultLayout()
{
  <?php get_default_graphics(); ?>
  //chartSelectedByLayout['0_0'] = {idtype:'test_barstacked',style:'bar',chartobj:null,default:1};
  setLayout('l2x2');
  /*setLayoutStyle('layoutid0_0','bar');
  setLayoutStyle('layoutid0_1','bar');
  setLayoutStyle('layoutid1_0','bar');
  setLayoutStyle('layoutid1_1','bar');
  */
  //setActiveChart('layoutid0_0','bar')
}


var chartConfigByID = Array();
var chartSelectedByLayout = Array();
var llayout2refresh = Array();

function initChartConfig ()
{
  	<?php
  	$idx = 0;
    foreach($chartlist as $chart)
    { 
    	$idx++;
    	?>

     	var objconf = Array();

      	objconf.label = '<?php echo $chart->label; ?>';
      	objconf.idtype = '<?php echo $chart->id;?>';
      	objconf.url = '<?php echo $chart->url;?>';

      	objconf.style = Array();
      	objconf.style["bar"] = 0;
      	objconf.style["barstacked"] = 0;
      	objconf.style["pie"] = 0;
     	objconf.style["line"] = 0;
      	objconf.style["linestacked"] = 0;

      	<?php
        	if($chart->stylebar){ ?>
          		objconf.style["bar"] = 1;
      	<?php } ?>

      <?php
        if($chart->stylebarstacked){ ?>
          objconf.style["barstacked"] = 1;
      <?php } ?>

      <?php
        if($chart->stylepie){ ?>
          objconf.style["pie"] = 1;
      <?php } ?>

      <?php
        if($chart->styleline){ ?>
          objconf.style["line"] = 1;
      <?php } ?>

      <?php
        if($chart->stylelinestacked){ ?>
          objconf.style["linestacked"] = 1;
      <?php } ?>
        chartConfigByID['<?php echo $chart->id;?>'] = objconf;

  <?php
    }
  ?>
}


function GetChartConfigByID ( idtype )
{
	for  ( let i=0; i<chartConfigByID.length; i++ )
	{
		let id = chartConfigByID [i].idtype;
	}
}

function selectActiveStyle(id,idstyle)
{
    //chart type must be selected in order to select a style
    if ( chartSelectedByLayout[id] === undefined )
    {
      console.log("chart undefined");
      return;
    }


    var idtype = chartSelectedByLayout[id].idtype;
    var chartConfig = chartConfigByID[idtype];
    // var chartConfig = GetChartConfigByID (idtype);
    if(idstyle == null || idstyle=='' || chartConfig.style[idstyle] == 0)
    {
      idstyle = '';
      if(idstyle == '' && chartConfig.style.bar)
      {
        idstyle = 'bar';
      }
      if(idstyle == '' && chartConfig.style.barstacked)
      {
        idstyle = 'barstacked';
      }
      if(idstyle == '' && chartConfig.style.pie)
      {
        idstyle = 'pie';
      }
      if(idstyle == '' && chartConfig.style.line)
      {
        idstyle = 'line';
      }
      if(idstyle == '' && chartConfig.style.linestacked)
      {
        idstyle = 'linestacked';
      }
    }


    var tagactivechart = document.getElementById('selectedstyleid'+id);
    tagactivechart.setAttribute ( 'class',		getIconChartStyle(idstyle) );
    chartSelectedByLayout[id].style = idstyle;
}

function setActiveChart(id,idtype)
{
  var oldstyle = null;
  var oldchartobj = null;
  if(chartSelectedByLayout[id] !== undefined)
  {
    oldstyle = chartSelectedByLayout[id].style;
    oldchartobj = chartSelectedByLayout[id].chartobj;
  }

  var newchart = {idtype:idtype,style: oldstyle,chartobj:oldchartobj};
  chartSelectedByLayout[id] = newchart;


  var chartConfig = chartConfigByID[idtype];
  // var chartConfig = GetChartConfigByID(idtype);

  var tagcharttype = document.getElementById('selectedchartypeid'+id);
  tagcharttype.innerHTML = chartConfig.label;

  var divstylelistid = document.getElementById('styleid'+id);
  divstylelistid.innerHTML = getChartStyleList(id,idtype);

  selectActiveStyle(id,oldstyle);

}


function getChartTypeList(id)
{
  var chartlist='';
  <?php
    foreach($chartlist as $chart){
        ?> chartlist+=  '<a class="dropdown-item" onclick="window.setActiveChart(\''+id+'\',\'<?php echo $chart->id;?>\');window.refreshData(\''+id+'\');"><?php echo $chart->label;?></a>';
  <?php
    }
  ?>

  return chartlist;

}

function get_chartoption(selectedstyle)
{
  var sx = false;
  var sy = false;
  var dx = true;
  var dy = true;
  var chartjsstyle = 'bar';
  switch(selectedstyle)
  {
    case 'barstacked':
      chartjsstyle = 'bar';
      sx = true;
      sy = true;
    break;
    case 'pie':
      chartjsstyle = 'pie';
      dx = false;
      dy = false;
    break;
    case 'linestacked':
      chartjsstyle = 'line';
      sy = true;
    break;
    default: chartjsstyle = selectedstyle;
  }

  return {style: chartjsstyle, stackedx: sx, stackedy:sy,displayx:dx,displayy:dy};

}

function changeChartStyle(id)
{
  var ret = get_chartoption(chartSelectedByLayout[id].style);

  if(chartSelectedByLayout[id].chartobj)
  {
    //make a copy of config because chartjs modifies the config object;--
    chartSelectedByLayout[id].config.type = ret.style;
    chartSelectedByLayout[id].config.options.scales.xAxes[0].stacked = ret.stackedx;
    chartSelectedByLayout[id].config.options.scales.xAxes[0].gridLines.display = ret.displayx;

    chartSelectedByLayout[id].config.options.scales.yAxes[0].stacked = ret.stackedy;
    chartSelectedByLayout[id].config.options.scales.yAxes[0].gridLines.display = ret.displayy;

    var newconfig = {};
    Object.assign(newconfig,chartSelectedByLayout[id].config)
    drawChart(id,newconfig);

  }
}

function getChartStyleList(id, idtype)
{
  	if(idtype == null && chartSelectedByLayout[id] === undefined)
  	{
    	if(chartSelectedByLayout[id] === undefined)
    	{
     	 	return '';
    	}	

    	idtype = chartSelectedByLayout[id].idtype;
  	}

  	chartConfig = chartConfigByID[idtype];
  	// chartConfig = GetChartConfigByID(idtype);
  	var chartypelist = '';

  	if(chartConfig.style.bar)
  	{
   		chartypelist += '<a class="dropdown-item" name="bar" onclick="event.stopPropagation();window.selectActiveStyle(\''+id+'\',this.name);window.changeChartStyle(\''+id+'\');">Bar</a>';
  	}

  	if(chartConfig.style.barstacked)
  	{
    	chartypelist += '<a class="dropdown-item" name="barstacked" onclick="event.stopPropagation();window.selectActiveStyle(\''+id+'\',this.name);window.changeChartStyle(\''+id+'\');">Bar stacked</a>';
  	}

  	if(chartConfig.style.pie)
  	{
    	chartypelist += '<a class="dropdown-item" name="pie" onclick="event.stopPropagation();window.selectActiveStyle(\''+id+'\',this.name);window.changeChartStyle(\''+id+'\');">Pie</a>';
  	}

  	if(chartConfig.style.line)
  	{
    	chartypelist += '<a class="dropdown-item" name="line" onclick="event.stopPropagation();window.selectActiveStyle(\''+id+'\',this.name);window.changeChartStyle(\''+id+'\');">Line</a>';
  	}

  	if(chartConfig.style.linestacked)
  	{
    	chartypelist += '<a class="dropdown-item" name="linestacked" onclick="event.stopPropagation();window.selectActiveStyle(\''+id+'\',this.name);window.changeChartStyle(\''+id+'\');">Line stacked</a>';
  	}
  	
  	if(chartypelist == '')
    	chartypelist = '<a class="dropdown-item" name="none" onclick="event.stopPropagation();window.selectActiveStyle(\''+id+'\',this.name)>No style defined</a>';

  	return chartypelist;
}


function getIconChartStyle(id)
{
  var icon = '';
  switch(id)
  {
    case 'bar': icon = 'fas fa-chart-bar'; break;
    case 'barstacked': icon = 'fas fa-chart-bar'; break;
    case 'pie': icon = 'fas fa-chart-pie';break;
    case 'line': icon = 'fas fa-chart-line';break;
    case 'linestacked': icon = 'fas fa-chart-line';break;
    default: icon = 'fas fa-chart-bar';
  }

  return icon;
}

/*
function GetCurrentDate()
{
	dte = new Date();

	currentDate = dte.getFullYear() + "-" +(dte.getMonth() + 1) + "-" + dte.getDate();

	return currentDate;
}
*/
/*
function GetCurrentTime()
{
	dte = new Date();

	currentTime = dte.getHours() + ":" + dte.getMinutes() + ":" + dte.getSeconds();

	return currentTime;
}
*/

function GetDayOfWeek()
{
  var dayOfWeek = "";

  for(var i=1; i<8; i++)
  {
    ident = "day" + i;

    if(document.getElementById(ident).checked)
    {
      dayOfWeek += i;
      dayOfWeek += ",";
    }
  }
  if(dayOfWeek.length > 0)
    dayOfWeek = dayOfWeek.substring(0, dayOfWeek.length-1);

  return dayOfWeek;
}


function refreshData(id)
{
    get_chart_data_for_layout(id);
}


function formatParams( params ){
  return "?" + Object
        .keys(params)
        .map(function(key){
          return key+"="+encodeURIComponent(params[key])
        })
        .join("&")
}

function get_chart_data_for_layout(id)
{
  var layoutselected = chartSelectedByLayout[id];
  var chartConfig = chartConfigByID[layoutselected.idtype];

  var fromDate 	= $('#IdcStatisticFromDate').val();
  var toDate 		= $('#IdcStatisticToDate').val();
  
  fromDate = StdDate2DICOMDate ( fromDate );
  toDate = StdDate2DICOMDate ( toDate );

  var params = {
    type: layoutselected.idtype,
    style: layoutselected.style,
    modid: __solmodality.getSelectionID(),
    radid: __solradiologist.getSelectionID(),
    from: fromDate,
    to: toDate,
    dow: GetDayOfWeek()
  }

  var request_url = chartConfig.url + formatParams(params);

  $.ajax
  		(
  			{
  				type: 'GET',
  				url:  request_url,
         	dataType: 'json',
          success: function(data)
  				{
            var layoutselected = chartSelectedByLayout[id];
            var chartConfig = chartConfigByID[layoutselected.idtype];
  				  var chartoption = get_chartoption(layoutselected.style);
            var count = 30;
            var minselected='';
            var maxselected='';
            // for(var key in data)
            // {
            //   if(count == 30)
            //   {
            //     minselected = key;
            //     maxselected = key;
            //   }else
            //   if(count == 0)
            //   {
            //     maxselected = key;
            //     break;
            //   }else{
            //     maxselected = key;
            //   }
            //   count--;
            // }

            //make a copy of config because chartjs modifies the config object;--
            var layoutselected = chartSelectedByLayout[id];
            layoutselected.config = {};
            layoutselected.config = {
              type: chartoption.style,
              options: {
                responsive: true,
                maintainAspectRatio: false,

                elements: {
                  rectangle: {
                    borderSkipped: 'bottom'
                  }
                },
                responsive: true,
                legend: {
                  position: 'top',
                },
                title: {
                  display: false,
                  text: chartConfig.label
                },


                scales: {
                  xAxes:
                  [
                    {
                      ticks:
                      {
                        min: minselected,
                        max: maxselected
                      },
                      stacked: chartoption.stackedx,
                      gridLines: 	{	display: chartoption.displayx		},
                    }
                  ],
                  yAxes:
                  [
                    {
                      ticks:
                      {
                        suggestedMin: 0
                      },
                      stacked:	chartoption.stackedy,
                      gridLines: 	{	display: chartoption.displayy		}
                    }
                  ],

                },
                plugins: {
                  zoom: {
                    interaction: ['scroll', 'drag'],

                    pan: {
                      enabled: true,
                      mode: 'x',
                //      speed: 10,
                //      threshold: 5
                    },
                    zoom: {
                      enabled: true,


                      mode: 'x',
                      // Speed of zoom via mouse wheel
                      // (percentage of zoom on a wheel event)
                      speed: 0.1,

                      // Minimal zoom distance required before actually applying zoom
                      threshold: 2,

                      // On category scale, minimal zoom level before actually applying zoom
                      sensitivity: 1,

                    }
                  }
                }
              }
            };

            layoutselected.config.originaldata = data;
            var newconfig = {}
            Object.assign(newconfig,layoutselected.config);
            drawChart(id,newconfig);
          }
        }
      );
}

function drawChart(id,config)
{
  var newData =
  {
    labels: [],
    datasets:  []
  };
  var data = config.originaldata;

  var subdatasetlabel = [];

  if(data != null)
  {
    for(var key in data)
    {
      var x_data = data[key];
      newData.labels.push(key);
      for(var key2 in x_data)
      {
        // var datainfo;
        // datainfo.label = x_data[key2].label;
        // datainfo.data = [];
        subdatasetlabel.push(x_data[key2].label);
      }
    }

    subdatasetlabel = subdatasetlabel.filter((v, i, a) => a.indexOf(v) === i);

    var multidataset = false;

    var colorHash = new ColorHash();
    var colorsimpledataset = [];
    if(config.type != "pie" && subdatasetlabel.length > 1)
    {
      multidataset = true;
    }
    else
    {
      for(var i = 0; i < newData.labels.length;i++)
      {
        colorsimpledataset.push(colorHash.hex(newData.labels[i]));
      }
    }


    //init datasets
    for(var i = 0; i < newData.labels.length;i++)
    {
      var x_data = data[newData.labels[i]];

      var idx = 0;
      for(var j = 0; j < subdatasetlabel.length;j++)
      {
        if(i == 0)
        {
          if(multidataset == true)
          {

          //  newData.datasets[idx] = graphDatasetProperties;

            newData.datasets[idx] = { label:subdatasetlabel[j], backgroundColor:colorHash.hex(subdatasetlabel[j]), data:new Array(newData.length) };

            idx++;

          }
          else
          {

            newData.datasets[idx] = { };

            newData.datasets[idx].label				= subdatasetlabel[j];
            newData.datasets[idx].backgroundColor	= colorsimpledataset;
            newData.datasets[idx].data				= new Array(newData.length);

          }
        }
      }

      for(var key2 in x_data)
      {
        for(var j=0; j<newData.datasets.length; j++)
        {

          if(x_data[key2].label == newData.datasets[j].label)
            newData.datasets[j].data[i] = x_data[key2].value;
        }

      }
    }


    config.data = newData;


    createChart(id,config);

  }
}

function createChart(id,config)
{
  var ctx = document.getElementById('canvasid'+id).getContext('2d');
  var canvasdiv = document.querySelector('#canvasid'+id);

  if(chartSelectedByLayout[id].chartobj != null)
    chartSelectedByLayout[id].chartobj.destroy();
  chartSelectedByLayout[id].chartobj = new window.Chart(ctx, config);

}



function setLayout ( lidselected )
{
	 	var lidlist = ['l1x1','l2x1','l1_1x2','l1x2','l2x2'];

  	lidlist.forEach(element => document.getElementById(element).style.backgroundColor="");
  	document.getElementById(lidselected).style.backgroundColor="#d758ba";
  	llayout2refresh = [];
  	var node = document.getElementById('layoutcontainer');
  	node.innerHTML = '';
  	var cols = 2;
  	var rows = 2;
  	var col_to_change = 0;
  	switch ( lidselected )
  	{
    	case 'l1x1': cols = 1; rows = 1;break;
    	case 'l2x1': cols = 1; rows = 2;break;
    	case 'l1_1x2': cols = 1; rows = 2;col_to_change = 1;break;
    	case 'l1x2': cols = 2; rows = 1;break;
    	case 'l2x2': cols = 2; rows = 2;break;
  	}

  	var rowheight = 100/rows;
  	var rowstringtotal= '';
  	for ( var y = 0; y < rows; y++ )
  	{
        let pt= ( y==1 )? 'pt-2' : 'pt-0';

    	 let rowstring = '<div class="row row-cols-'+cols+' '+pt+'" style="min-height:'+rowheight+'%; max-height:'+rowheight+'%; height:'+rowheight+'%">';
    	 for ( let x = 0; x < cols; x++ )
    	 {
      		  let id = x+'_'+y;

            llayout2refresh.push(id);

            var lid = 'layoutid'+id;
            var selectedstyleid = 'selectedstyleid'+id;
            var selectedcharttypeid = 'selectedchartypeid'+id;
            var styleid = 'styleid'+id;
            var chartid = 'chartid'+id;
            var canvasid = 'canvasid'+id;
            var activechartidtype = null;
            var activechartstyle = null;

            if(chartSelectedByLayout[id] !== undefined)
            {
                activechartidtype = chartSelectedByLayout[id].idtype;
                activechartstyle = chartSelectedByLayout[id].style;
            }
            
            let ps = ( x==1 )? 'ps-2' : 'ps-0';

            rowstring += '<div id="'+lid+'" class="col h-100 m-0 p-0 '+ps+'">';
            rowstring += 	 '<div class="card mb-3 h-100">';
            rowstring += 		  '<div class="card-header">';
            rowstring += 			   '<div class="row">';
            rowstring += 				     '<div class="dropdown" style="display:inline-block;">';
            rowstring += 					      '<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="IdcStyleMenuButton0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #000000; background-color: #f7f7f7; border-color: #f7f7f7;">';
            rowstring += 					          '<i id="'+selectedstyleid+'" class="'+getIconChartStyle(activechartstyle)+'"></i>';
            rowstring +=                '</button>';
            rowstring +=                '<div class="dropdown-menu" id="'+styleid+'" aria-labelledby="IdcStyleMenuButton0" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">';
          	rowstring +=                   getChartStyleList(id,activechartidtype);
            rowstring +=                '</div>';
            rowstring +=             '<div class="dropdown" style="display:inline-block;">';
            rowstring +=                 '<button id="'+selectedcharttypeid+'" class="btn btn-secondary btn-sm dropdown-toggle" type="button"  data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #000000; background-color: #f7f7f7; border-color: #f7f7f7;">';
            rowstring += (activechartidtype == null)? 'Chart type' : chartConfigByID[activechartidtype].label;
            rowstring +=                 '</button>';
            rowstring +=                 '<div class="dropdown-menu" aria-labelledby="IdcMenuButton3" id="IdcDivMenuArea3">';
            rowstring +=                     getChartTypeList(id);
            rowstring +=                 '</div>';
            rowstring += '             </div>';
            rowstring += '          </div>';
            rowstring += '      </div>';
            rowstring += '    </div>';
            rowstring += '    <div id="chart-container" style="width: 100%;max-height: 100% !important; height: 100%;">';
            rowstring += '      <canvas id="'+canvasid+'"></canvas>';
            rowstring += '    </div>';
            rowstring += '  </div>';
            //end of col;
            rowstring +='</div>';
       }
        
       rowstring += '</div>';

       cols += col_to_change;
       col_to_change = 0;
       rowstringtotal += rowstring;
    }
    node.innerHTML = rowstringtotal;
    llayout2refresh.forEach(lid => {
       var layoutselected = chartSelectedByLayout[lid];
       if ( layoutselected !== undefined && (layoutselected.chartobj != null || layoutselected.default !== undefined) )
    		  refreshData(lid);
       }
  	  );
}

</script>

</head>


	<body>
		
    <div id="layout1" class="w-100 h-100 m-0 p-0" >
  			
		  <!-- <div class="row h-100 w-100 m-0 p-0"> -->

          <div class="h-100 d-flex flex-row m-0 p-0 h-100 w-100 ">

      		<div class="col-3 bg-white m-0 p-0" >
              <div class="row  m-0 p-0 pb-3">
                  <div class="col m-0 p-0 w-100">
                        <div class="row m-0 p-2 pb-3 w-100 ">
                          <div class="m-0 p-0 border-bottom fw-bold" data-langkey="Layout :"></div>
                        </div>
                        <div class="row w-100 m-0 p-0 ps-1">
                          <div class="col"><img id="l1x1" class="img-radio imgclickable ximeo_bmp" onclick="window.setLayout(this.id);" title="Layout 1x1" src="../eoQUAL/SubFW/bmp/SerieLayout1X1.png"></div>
                          <div class="col"><img id="l2x1" class="img-radio imgclickable ximeo_bmp" onclick="window.setLayout(this.id);" title="Layout 2x1" src="../eoQUAL/SubFW/bmp/SerieLayout2X1.png"></div>
                          <div class="col"><img id="l1_1x2" class="img-radio imgclickable ximeo_bmp" onclick="window.setLayout(this.id);" title="Layout 2x1" src="../eoQUAL/SubFW/bmp/SerieLayout1_1X2.png"></div>
                          <div class="col"><img id="l1x2" class="img-radio imgclickable ximeo_bmp" onclick="window.setLayout(this.id);" title="Layout 1x2" src="../eoQUAL/SubFW/bmp/SerieLayout1X2.png"></div>
                          <div class="col"><img id="l2x2" class="img-radio imgclickable ximeo_bmp" onclick="window.setLayout(this.id);" title="Layout 2x2" src="../eoQUAL/SubFW/bmp/SerieLayout2X2.png"></div>
                        </div>
              		</div>
              </div>	


              <div class="row m-0 p-2 pb-3 w-100">
                  <div class="m-0 p-0 border-bottom fw-bold" data-langkey="Period :"></div>
              </div>

              <div class="row m-0 p-0 ps-1 pb-2 w-100">
                  <div class="col-4 m-0 p-0 ps-2">
                      <label for="IdcStatisticFromDate" class="col-form-label m-0 p-0 pt-1" data-langkey="From :"></label>
                  </div>
                  <div class="col-auto m-0 p-0">
                      <input type="date" class="form-control form-control-sm m-0 p-0 ps-2 fs-6" id ="IdcStatisticFromDate" autocomplete="off" size="8" placeholder="jj/mm/aaaa" >
                  </div>
              </div>
              
              <div class="row m-0 p-0 ps-1 pb-2 w-100">
                  <div class="col-4 m-0 p-0 ps-2">
                      <label for="IdcStatisticToDate" class="col-form-label m-0 p-0 pt-1" data-langkey="To :"></label>
                  </div>
                  <div class="col-auto m-0 p-0">
                      <input type="date" class="form-control form-control-sm m-0 p-0 ps-2 fs-6" id ="IdcStatisticToDate" autocomplete="off" size="8" placeholder="jj/mm/aaaa">
                  </div>
              </div>
                  				
              <div class="row w-100 m-0 p-0 pb-3 mb-2">
                  <div class="col">
                    <label class="ximeo_checkbox_1">
                      <input id="day1" type="checkbox" checked>
                      <div class="div-checked" data-langkey="Mo."></div>
                    </label>
                  </div>
                  <div class="col"><label class="ximeo_checkbox_1"><input id="day2" type="checkbox" checked><div class="div-checked" data-langkey="Tu."></div></label></div>
                  <div class="col"><label class="ximeo_checkbox_1"><input id="day3" type="checkbox" checked><div class="div-checked" data-langkey="We."></div></label></div>
                  <div class="col"><label class="ximeo_checkbox_1"><input id="day4" type="checkbox" checked><div class="div-checked" data-langkey="Th."></div></label></div>
                  <div class="col"><label class="ximeo_checkbox_1"><input id="day5" type="checkbox" checked><div class="div-checked" data-langkey="Fr."></div></label></div>
                  <div class="col"><label class="ximeo_checkbox_1"><input id="day6" type="checkbox" checked><div class="div-checked" data-langkey="Sa."></div></label></div>
                  <div class="col"><label class="ximeo_checkbox_1"><input id="day7" type="checkbox" checked><div class="div-checked" data-langkey="Su."></div></label></div>
              </div>

              <div class="row m-0 p-2 pb-3 w-100">
                  <label class="m-0 p-0 fw-bold pb-2" for="inputRadiologist" data-langkey="Radiologists :"></label>
                  <div class="m-0 p-0 ps-1" id='radiologist' data-sol-name='character' multiple='multiple'></div>
              </div>

              <div class="row m-0 p-2 pb-3 w-100">
              		<label class="m-0 p-0 fw-bold pb-2" for="inputModality" data-langkey="Modalities :"></label>
              		<div class="m-0 p-0 ps-1" id='modality' data-sol-name='character' multiple='multiple'></div>
              </div>
              
            <div class="row w-100 m-0 mt-4 p-0 pb-3 ps-2 pe-2">
              <div class="col w-100 m-0 p-0 pt-2 border-top">
                <div class="d-flex flex-row-reverse w-100 h-100 m-0 p-0">
                  <div class="col-md-auto h-100 m-0 p-0 pt-2 pe-2">
                <button id="IdcStatApplyButton" class="ximeo_button">
                  <img src="./SubFW/bmp/validate_white.png" class="float-start me-2" style="width: 20px; vertical-align: middle;">
                  <span data-langkey="Apply"></span>
                </button>
              </div>
              </div>
              </div>
            </div>

      		</div>
            			
          <div class="col flex-grow-1 m-0 p-0 ps-2" style="min-width: 0px;">
            <div class="container-fluid" id="layoutcontainer" style="min-height:100%;height:100%">
            </div>
          </div>

        </div>

  		 <!-- </div> -->
		
    </div>

	</body>

	<script src="js/sb-admin.js"></script>
 	<script src="/extern_css/bootstrap-4.5.3/js/bootstrap.bundle.min.js"></script>
	<script>
		init_layout();

    $( "#IdcStatisticFromDate" ).val ( GetCurrentDate());
    $( "#IdcStatisticToDate" ).val ( GetCurrentDate());
    
    switchLanguage ( CurrentLanguage );
	</script>

</html>
