<?php
global $conn;

$language = 'es';
$firstDay = 1;
$idgrupo_trabajo = $data['idgrupo_trabajo'];
$grupo = $data['Titulo'];  // Recogemos el código de Grupo
$_SESSION['grupo'] = $grupo; // Lo poneos en variable de sessión para los procesos Ajax
unset($_SESSION['jefe']);		 // Para que no se confundan los procesos AJAX

$now = substr(now(),0,10);
if (isset($_SESSION['q_fromDate'])) { $now = substr($_SESSION['q_fromDate'],0,10); }
// Holidays the system
$holidays = array();
$rs = DB::Query("select * from festivos");
while( $data = $rs->fetchAssoc() ) {
  $holidays[] = $data['DiaFiesta'];
}
$holidays = "['" . implode("','", $holidays) . "']";

$popup = <<<EOT
eventClick: function(info) {
		var peticion = info.event.id;
		var title = info.event.title;
		var url = "peticion_view.php?editid1="+peticion;
		var header = '<h2 data-itemtype="view_header" data-itemid="view_header" data-pageid="10">'+'Petición: '+ title+'</h2>' ;
		var popup = Runner.displayPopup( {
		  url: url,
		  header: header,
			width: 1000,
			height: 500,
		  footer: '<a href="user_grupo_view.php?editid1=$idgrupo_trabajo&" onclick="window.win.close();return false;">Close window</a>',
		  afterCreate: function(popup) {
			  window.popup = popup;
		  }
		});
	},

EOT;

$str1 = <<<EOD
 <style>
		/*
    html, body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 12px; 
    }
		*/
		.fc-sat, .fc-sun {
    background-color: #FBE4FD !important;
		}
    #calendar {
      max-width: 100%;
      max-height: 200px;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 12px;
      /* margin: 40px auto; */
    }
  </style>


<link href='fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='fullcalendar/packages-premium/timeline/main.css' rel='stylesheet' />
<link href='fullcalendar/packages-premium/resource-timeline/main.css' rel='stylesheet' />
<script src='fullcalendar/packages/core/main.js'></script>
<script src='fullcalendar/packages/interaction/main.js'></script>
<script src='fullcalendar/packages-premium/timeline/main.js'></script>
<script src='fullcalendar/packages-premium/resource-common/main.js'></script>
<script src='fullcalendar/packages-premium/resource-timeline/main.js'></script>

<script src='fullcalendar/packages/core/locales-all.js'></script>
<script src='fullcalendar/tooltip/tooltip.min.js'></script>

<script>
  var initialLocaleCode = '$language';
	var firstDay = '$firstDay'; 
  
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'resourceTimeline' ],
      now: '$now',
      
      // timeZone: 'UTC+1', // the default 'local' (unnecessary to specify)
      locale: initialLocaleCode,
			 // locale: 'es',
      
			 height: 550,
      editable: false,
      aspectRatio: 1.8,
      scrollTime: '00:00',
      header: {
        left: 'today prev,next',
        center: 'title',
        right: 'resourceTimelineMonth,resourceTimelineYear'
      },
      defaultView: 'resourceTimelineMonth',
      navLinks: true,
      resourceAreaWidth: '15%',
      resourceLabelText: 'Empleados',
      //
			$popup
			//
      resourceLabelText: 'Empleados',
      resources: { // you can also specify a plain string like 'json/resources.json'
        url: 'timeline_ajax_resource.php'},
			// Holidays
			eventSourceSuccess: function(content, response) {
					console.log('Refresh data');
          const Holidays = $holidays;
          Holidays.forEach(myHolidays);
					return content.eventArray;
			},

      events: { // you can also specify a plain string like 'json/events-for-resources.json'
        url: 'timeline_ajax_event.php'},
    });

    calendar.render();
  });

// Holidays Put color with JQUERY
function myHolidays(value, index, array) {
    let tag = 'td[data-date="'+value+'"]';
    $(tag).css("background-color", "#DDF8F3");
}

</script>
  <div id='calendar'></div>

EOD;

$value = $str1;


?>