<?php 

require_once 'include/utils/utils.php';
require_once 'includes/Loader.php';
require_once 'QCMGenerationFunction.php';
vimport ('includes.runtime.EntryPoint');
require_once 'SUtiles.php';
@session_start();


     global $adb;

     $current_user = Users_Record_Model::getCurrentUserModel();
     $roleid = $current_user->get('roleid');
     $userId = $current_user->get('id');

     $viewer = new Vtiger_Viewer();
     $viewer->assign('MODULE', 'Home'); 
     $viewer->assign('SELECTED_MENU_CATEGORY', 'MARKETING');
     $viewer->assign('COMPANY_LOGO', Vtiger_CompanyDetails_Model::getInstanceById()->getLogo());
     $viewer->assign('COMPANY_DETAILS_SETTINGS',new Settings_Vtiger_CompanyDetails_Model());
     $viewer->assign('USER_MODEL', $current_user);
     $viewer->assign('CURRENT_USER_MODEL', $current_user);
     $viewer->assign('PAGETITLE','QCM');
     $viewer->view('CustomDashboard.tpl');



//Prevent Multiple Form Submission
function isFinished($passage_qcm_ent){
	    global $adb;
	    
	    $query6= "SELECT termine FROM `passage_qcm_ent`  where code_passage_qcm = '".$passage_qcm_ent."' ";
		 $sql_get_result6 = $adb->query($query6);
		$termine = array();
	     while ($recordinfo = $adb->fetch_array($sql_get_result6)) {
			$termine[] = $recordinfo;
		    }
		
	 return $termine[0]['termine'];
 }




if(isset($_POST['enregistrer'])) {

if(isFinished($_SESSION["id_passage_qcm"]) == 0){

  for ($x = 0; $x < sizeof($_POST['code_lignes']); $x++) {
         $tableCorrection=array();
	 $tableReponse=array();
         $NomTableauReponse="Choix".$_POST['code_lignes'][$x];
	
	
	
    $query6="SELECT  correction FROM  lignes_qcm where code_ligne='".$_POST['code_lignes'][$x]."' ";
    $sql_get_result6 = $adb->query($query6);
	$resCorrection = array();
	while ($recordinfo = $adb->fetch_array($sql_get_result6)) {
			$resCorrection[] = $recordinfo;
		    }
	
	
	
    
	if(strlen($resCorrection[0]['correction']) == 6){  
          if( sizeof($_POST[$NomTableauReponse]) != 0){
	      $tableCorrection=$resCorrection[0]['correction'];
	      $tableReponse=implode("", $_POST[$NomTableauReponse]);
		  if($tableCorrection == $tableReponse){ $result=0; }else{$result=1;}
		  }else{$result=1;}
		 
		
   
	}else{
	       if(sizeof($_POST[$NomTableauReponse]) != 0){
	       $tableCorrection=explode("::",$resCorrection[0]['correction']);
	       $tableReponse=$_POST[$NomTableauReponse];
	       
               $overlap = array_intersect($tableCorrection, $tableReponse);
               $counts  = array_count_values($overlap);

	       if( sizeof($tableCorrection) == sizeof($counts) && sizeof($tableReponse) == sizeof($counts) && sizeof($counts) != 0){ $result=0; }else{$result=1;}
		   
    }else{$result=1;}
    }
	
	
	
		 
		 
		 
		 
		 $tableCorrection=explode("::",$resCorrection[0]['correction']);
		 $reponse=TranslateChoixToName($_POST[$NomTableauReponse],$_POST['code_lignes'][$x]);
		 $correction=TranslateChoixToName($tableCorrection,$_POST['code_lignes'][$x]);
	
    $query = "INSERT INTO `lignes_passage_qcm` (`code_ent_passage` , `question`, `reponse`, `correction`, `note_candidat`,`note_question`)
    VALUES ('".$_SESSION["id_passage_qcm"]."','".$_POST['questions'][$x]."' ,'".$reponse."','".$correction."',IF(  '".$result."' = 0, (SELECT  note FROM  lignes_qcm where code_ligne='".$_POST['code_lignes'][$x]."' ),0),(SELECT  note FROM  lignes_qcm where code_ligne='".$_POST['code_lignes'][$x]."' ));";
    $adb->query($query);

  }

 $heure_fin=date('H:i:s', strtotime('1 hour'));
  $query2 = "UPDATE passage_qcm_ent SET termine = 1 ,heure_passage_fin ='".$heure_fin."' ,total=(SELECT SUM(note_candidat) FROM  lignes_passage_qcm where code_ent_passage='".$_SESSION["id_passage_qcm"]."' )  where code_passage_qcm='".$_SESSION["id_passage_qcm"]."' ;";
   $adb->query($query2);

header("Location: index.php?module=QCMGenerationCorrection&view=QCMGenerationCorrection");
}else{
header("Location: index.php?module=QCMGenerationCorrection&view=QCMGenerationCorrection");
}
}




		

                 $tomorrow = date("Y-m-d", strtotime('today'));
                 $heure_debut=date('H:i:s', strtotime('1 hour'));
                 $heure=date('H:i:s', strtotime('1 hour'));

               
                    $libelles=getContenuLibelleQCM($userId,$heure);

		


		

		echo '<div class="main-container main-container-Accounts">
				<div class="container-fluid" style="margin:15px 15px 15px 15px;">
				<div class=" detailview-header-block">
				   <div class="row" >
					  <div class="col-md-3">
						 <form action="?module=QCMGeneration&view=QCMGeneration" method="post">
							<label for="libelle">Libellé QCM</label>
							<select class="js-example-basic-single form-control" style="width:200px;" id="libelleC" name="libelle" required>
							   <option value=""></option>
							   ';
							   foreach ($libelles as $libelle) {
							   echo '
							   <option value="'.html_entity_decode($libelle['code_qcm']).'">'.html_entity_decode($libelle['libelle_qcm']).'</option>
							   ';
							   }
							   echo '	
							</select>
					  </div>
					  <div class="col-md-2">
					  <label for="Date">Heure Début</label>
					  <input class="form-control" type="time" id="heure_passage_debut" name="heure_passage_debut" value='.$heure_debut.' readonly>
					  </div>	
					  <div class="col-md-2">
					  <label for="Date">Heure Fin</label>
					  <input class="form-control" type="time" id="heure_passage_fin" name="heure_passage_fin" readonly>
					  </div>
					  <div class="col-md-2">
					  <label for="Date">Date</label>
					  <input class="form-control" type="date" id="date" name="date" value='.$tomorrow.' readonly>
					  </div>
					  <div class="col-md-2">
					  <label for="Date">Total</label>
					  <input class="form-control" type="number" id="total" name="total"  readonly>
					  </div>
				   </div>
				   <div class="row"> 
				   <button onclick="myFunction()" class="btn btn-primary addButton" type="submit" name="Valider" id="Valider" value="Valider" style="margin: 10px 0 5px 14px;">Valider</button>  
				   </form> 
				   </div>
				</div>';

								
							
					 
 if(isset($_POST['Valider'])) {

            
    $chack_libelle=getExamenInformations($_POST['libelle']);
	
	if( $chack_libelle[0]['forme'] == 'ENONCE') {
		echo'<div class=" detailview-header-block" style="margin-top:15px; margin-bottom:15px;">
					<div class="row" style="margin: 5px 0px 0px 0px;">
						<div class="row">
							<div class="col-md-12">                   
							<textarea class="form-control" id="autoresizing" readonly>'.$chack_libelle[0]['memo'].'</textarea>
						</div>
					</div>
				 </div>
			 </div>';								
	}
								

    echo'<div class=" detailview-header-block" style="margin-top:15px; margin-bottom:45px;">
             <div class="row"  style="margin: 5px 0px 0px 0px;">
                <div class="col">
					<table id="countRow" class="table table-bordered table-striped" >
                        <form action="?module=QCMGeneration&view=QCMGeneration" method="post" accept-charset="utf-8">

						<tr>
						<th> Ordre</th>
						<th> Question </th>
						<th style="width: 350px;"> Choix </th>	
						</tr>';
									
	//vérifier si déjà passé cet examen
    $comm=getPassageInformations($_POST['libelle'],$userId);								
									
    // Si un passage n'existe pas, créez-le 
    if(sizeof($comm) == 0){
 
	       $query = "INSERT INTO `passage_qcm_ent`(`code_ent_qcm` , `libelle_passage_qcm`, `date_passage`, `heure_passage_debut`, `heure_passage_fin`,`candidat` ,`total`,`total_examen`,`termine`) VALUES ('".$_POST['libelle']."',(SELECT libelle_qcm FROM ent_qcm where code_qcm='".$_POST['libelle']."' ),'".$_POST['date']."','".$heure."','".$_POST['heure_passage_fin']."','".$userId."',0,(SELECT sum(note) as note FROM `lignes_qcm` where code_ent_qcm='".$_POST['libelle']."'),0);";
	       $adb->query($query);
        
      


                 $chack_libelle=getExamenInformations($_POST['libelle']);
		
		/////////////timer()
		$start = strtotime($heure);
        $end = strtotime($chack_libelle[0]['heure_fin']);
        $mins = ($end - $start);
		$mins2 = ($end - $start) * 1000;
		 echo'<script>
                  var timestamp = '.$mins.';
                  var hours = Math.floor(timestamp / 60 / 60);
                  var minutes = Math.floor(timestamp / 60) - (hours * 60);
                  var seconds = timestamp % 60;
				  
				  $(document).ready(function () {
                      countdown("countdownB", 0, hours, minutes,seconds);
                    });
                   setTimeout(function(){ document.getElementById("buttonEnregistrer").click(); }, '.$mins2.');
              </script>';
		 ///////////////timer()


                 getIdPassage($_POST['libelle'],$userId);
                 $questions =getAllLignesEaxmen($_POST['libelle']);

		foreach ($questions as $question) {

										 result($question);
									     }                      
                                                   
         }
		 
		 // Si un passage déja existe
		 if(sizeof($comm) > 0 && $comm[0]['termine'] == 0){

                
 
	        
	$chack_libelle=getExamenInformations($_POST['libelle']);


        /////////////timer()
		$start = strtotime($heure);
        $end = strtotime($chack_libelle[0]['heure_fin']);
        $mins = ($end - $start);
		$mins2 = ($end - $start) * 1000;
		 echo'<script>
                  var timestamp = '.$mins.';
                  var hours = Math.floor(timestamp / 60 / 60);
                  var minutes = Math.floor(timestamp / 60) - (hours * 60);
                  var seconds = timestamp % 60;
				  
				  $(document).ready(function () {
                      countdown("countdownB", 0, hours, minutes,seconds);
                    });
                   setTimeout(function(){ document.getElementById("buttonEnregistrer").click(); }, '.$mins2.');
              </script>';
		 ///////////////timer()
		
        if($chack_libelle[0]['date_debut'] <= $tomorrow && $chack_libelle[0]['date_fin'] >= $tomorrow &&  $chack_libelle[0]['heure_debut'] <= $heure && $chack_libelle[0]['heure_fin'] > $heure ){
       
		    
	        getIdPassage($_POST['libelle'],$userId);
            $questions =getAllLignesEaxmen($_POST['libelle']);

		foreach ($questions as $question) {

										 result($question);
									     }                   
                                                   
         }
	}
}

								echo '</table> 
								        </div>
                                         </div>
                                          </div>                                        
                                             </div>
                                                </div>';
												
												
												
echo'<div  id="buttonSave" class="modal-overlay-footer" style="border-left: 42px solid #efefef; display: none;">
   <div class="row clearfix">
      <div class="textAlignCenter col-lg-12 col-md-12 col-sm-12 ">
         <button class="btn btn-success saveButton" type="submit" name="enregistrer" value="enregistrer" id="buttonEnregistrer" onclick="cacherButtonEnregistrer()">Enregistrer</button>
         <!-- Countdown timer html -->
         <div class="countdown-bar" style="float:right;"  id="countdownB">
            <div></div>
            <div></div>
         </div>
      </div>
   </div>
</div></form>';							
    
    	$viewer->view('CustomDashboardFooter.tpl');
    
 ?>

  <script type="text/javascript">
$(document).ready(function() {
    
		$('#autoresizing').each(function () {
	  this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;');
	})
	
});
    </script>
	
<!-- script pour liste déroulante -->
<script>
	$(document).ready(function() {
    $('.js-example-basic-single').select2();
});


$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});



function cacherButtonEnregistrer(){
	$("#buttonEnregistrer").hide();
		
		}
</script>


<script type="text/javascript" src="layouts/v7/lib/jquery/purl.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/select2/select2.min.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/jquery.class.min.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/jquery-ui-1.11.3.custom/jquery-ui.js"></script><script type="text/javascript" src="layouts/v7/lib/todc/js/bootstrap.min.js"></script><script type="text/javascript" src="libraries/jquery/jstorage.min.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/jquery-validation/jquery.validate.min.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/jquery.slimscroll.min.js"></script><script type="text/javascript" src="libraries/jquery/jquery.ba-outside-events.min.js"></script><script type="text/javascript" src="libraries/jquery/defunkt-jquery-pjax/jquery.pjax.js"></script><script type="text/javascript" src="libraries/jquery/multiplefileupload/jquery_MultiFile.js"></script><script type="text/javascript" src="resources/jquery.additions.js"></script><script type="text/javascript" src="layouts/v7/lib/bootstrap-notify/bootstrap-notify.min.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/websockets/reconnecting-websocket.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/jquery-play-sound/jquery.playSound.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/malihu-custom-scrollbar/jquery.mousewheel.min.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/malihu-custom-scrollbar/jquery.mCustomScrollbar.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/autoComplete/jquery.textcomplete.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/jquery.qtip.custom/jquery.qtip.js"></script><script type="text/javascript" src="libraries/jquery/jquery-visibility.min.js"></script><script type="text/javascript" src="layouts/v7/lib/momentjs/moment.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/daterangepicker/moment.min.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/daterangepicker/jquery.daterangepicker.js"></script><script type="text/javascript" src="layouts/v7/lib/jquery/jquery.timeago.js"></script><script type="text/javascript" src="libraries/jquery/ckeditor/ckeditor.js"></script><script type="text/javascript" src="libraries/jquery/ckeditor/adapters/jquery.js"></script><script type='text/javascript' src='layouts/v7/lib/anchorme_js/anchorme.min.js'></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Class.js?v=7.1.0"></script><script type='text/javascript' src="layouts/v7/resources/helper.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/resources/application.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Utils.js?v=7.1.0"></script><script type='text/javascript' src="layouts/v7/modules/Vtiger/resources/validation.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/lib/bootbox/bootbox.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Base.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Vtiger.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Calendar/resources/TaskManagement.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Import/resources/Import.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Emails/resources/EmailPreview.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Base.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Google/resources/Settings.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/CkEditor.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Documents/resources/Documents.js?v=7.1.0"></script><script type="text/javascript" src="libraries/bootstrap/js/eternicode-bootstrap-datepicker/js/bootstrap-datepicker.js?v=7.1.0"></script><script type="text/javascript" src="libraries/bootstrap/js/eternicode-bootstrap-datepicker/js/locales/bootstrap-datepicker.fr.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/lib/jquery/timepicker/jquery.timepicker.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/lazyYT/lazyYT.min.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Header.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Edit.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Popup.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Field.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jquery_windowmsg.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/BasicSearch.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/AdvanceFilter.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/SearchAdvanceFilter.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/AdvanceSearch.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/BaseList.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/List.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/AdvanceSearchList.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/RecordSelectTracker.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Pagination.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Import/resources/Popup.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Emails/resources/MassEdit.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/EmailsRelatedPopup.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/lib/jquery/sadropdown.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/posabsolute-jQuery-Validation-Engine/js/languages/jquery.validationEngine-fr.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Vtiger.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jquery.stickytableheaders.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/gridster/jquery.gridster.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jqplot/jquery.jqplot.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jqplot/plugins/jqplot.canvasTextRenderer.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jqplot/plugins/jqplot.pieRenderer.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jqplot/plugins/jqplot.barRenderer.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jqplot/plugins/jqplot.categoryAxisRenderer.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jqplot/plugins/jqplot.pointLabels.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jqplot/plugins/jqplot.funnelRenderer.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/jqplot/plugins/jqplot.logAxisRenderer.min.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/VtJqplotInterface.js?v=7.1.0"></script><script type="text/javascript" src="libraries/jquery/vtchart.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/lib/jquery/gridster/jquery.gridster.min.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/DashBoard.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/dashboards/Widget.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/Detail.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Reports/resources/Detail.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Reports/resources/ChartDetail.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/modules/Vtiger/resources/CkEditor.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/lib/bootstrap-daterangepicker/moment.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/lib/bootstrap-daterangepicker/daterangepicker.js?v=7.1.0"></script><script type="text/javascript" src="layouts/v7/resources/v7_client_compat.js?v=7.1.0"></script><!-- Added in the end since it should be after less file loaded --><script type="text/javascript" src="libraries/bootstrap/js/less.min.js"></script>
<!-- Enable tracking pageload time -->
<script type="text/javascript">var _REQSTARTTIME = "1589749969";jQuery(document).ready(function() { window._PAGEREADYAT = new Date(); });
		jQuery(window).load(function() {
			window._PAGELOADAT = new Date();
			window._PAGELOADREQSENT = false;
			// Transmit the information to server about page render time now.
			if (typeof _REQSTARTTIME != 'undefined') {
				// Work with time converting it to GMT (assuming _REQSTARTTIME set by server is also in GMT)
				var _PAGEREADYTIME = _PAGEREADYAT.getTime() / 1000.0; // seconds
				var _PAGELOADTIME = _PAGELOADAT.getTime() / 1000.0;    // seconds
				var data = { page_request: _REQSTARTTIME, page_ready: _PAGEREADYTIME, page_load: _PAGELOADTIME };
				data['page_xfer'] = (_PAGELOADTIME - _REQSTARTTIME).toFixed(3);
				data['client_tzoffset']= -1*_PAGELOADAT.getTimezoneOffset()*60;
				data['client_now'] = JSON.parse(JSON.stringify(new Date()));
				if (!window._PAGELOADREQSENT) {
					// To overcome duplicate firing on Chrome
					window._PAGELOADREQSENT = true;
				}
			}
		});
</script>
<!-- pour cacher  button valider -->
<script> 
		$(document).ready(function(){ 
		
			var colCount = $("#countRow").length; 
                      var totalRowCount = $("#countRow tr").length;
                     
			if(totalRowCount > 2){ 
                       $("#Valider").hide();
					    $("#buttonSave").show();
		 }
		}); 
	</script>



<!-- Run Countdown Timer Script -->
        <script type="text/javascript">
            
			
			
			/**
 * Config Settings
 *
 * @returns {array}
 */
function config() {

    var $config = [];
    $config.loadingBars = '.countdown-bar';

    // Countdown Loading Bar
    $config.loadingBars_width = 200;
    $config.loadingBars_height = 20;
    $config.loadingBars_border_color = '#E74C3C';
    $config.loadingBars_color =  '#C0392B';
    $config.loadingBars_background_color =  '#BDC3C7';

    // Countdown Timer
    $config.timer_color = '#C0392B';
    $config.timer_font_weight = 700;
    $config.timer_font = 'Roboto Condensed';
    $config.timer_font_size = 12;
    $config.endtime_message = 'Timer expired!';

    return $config;
}


/**
 * Set countdown element
 *
 * Element should be build as
 * <div class="countdownbar" id="elementID">
 * <div></div>
 * <div></div>
 * </div>
 *
 * Then call the function countdown('elementID', 0, 0, 0, 10)
 *
 * @param {string} $element
 * @param {number} $daysAdd
 * @param {number} $hoursAdd
 * @param {number} $minutesAdd
 * @param {number} $secondsAdd
 */
function countdown($element, $daysAdd, $hoursAdd, $minutesAdd, $secondsAdd) {

    $config = this.config();

    $($config.loadingBars).css('width', $config.loadingBars_width);
    $($config.loadingBars).css('height', $config.loadingBars_height);
    $($config.loadingBars).css('background-color', $config.loadingBars_background_color);
    $($config.loadingBars).css('border-color', $config.loadingBars_border_color);

    $dateNow = new Date();
    $hour = $dateNow.getHours();
    $minute = $dateNow.getMinutes();
    $second = $dateNow.getSeconds();
    $now_loader = new Date().getTime();

    var interval = setInterval(function() {

        $loadingBars_loader = $('#' + $element).children('div')[0];
        $loadingBars_timer = $('#' + $element).children('div')[1];

        $countDownDate = $dateNow.setDate($dateNow.getDate() + $daysAdd);
        $countDownDate = $dateNow.setHours($hour + $hoursAdd);
        $countDownDate = $dateNow.setMinutes($minute + $minutesAdd);
        $countDownDate = $dateNow.setSeconds($second + $secondsAdd + 1);

        $now = new Date().getTime();
        $distance = $countDownDate - $now;

        $distance_loader = $countDownDate - $now_loader;
        $distance_loadingBar_part =  (($config.loadingBars_width / ($distance_loader - 1000)) * 1000);
        $distance_loadingBar_part = Math.floor($distance_loadingBar_part * 10000) / 10000;

        $secondsPast = parseInt(($distance_loader - $distance) / 1000);

        $newDistance  = $distance_loadingBar_part * $secondsPast;
        if($newDistance > $config.loadingBars_width) $newDistance = $config.loadingBars_width;

        $($loadingBars_loader).animate({ width: $newDistance + 'px' }, 500);

        // TIMER
        $timerHtmlStart = '<span style="color: ' + $config.timer_color + '; font-weight: ' + $config.timer_font_weight + '; font-family: ' + $config.timer_font + '; font-size: ' + $config.timer_font_size + 'px;">';
        $timerHtmlEnd = '</span>';


        // set loading bar background-color as set in config
        $($loadingBars_loader).css('background-color', $config.loadingBars_color);
        $($loadingBars_timer).css('width', $config.loadingBars_width);
        $($loadingBars_timer).css('height', $config.loadingBars_height);

        // SET LOADING-BAR
        if($newDistance == $config.loadingBars_width) {
                $($loadingBars_timer).html($timerHtmlStart + $config.endtime_message + $timerHtmlEnd);

                clearInterval(interval);
                return;
        } else {

            $timeLeftFinal = setTimer($distance);

            $($loadingBars_timer).html($timerHtmlStart + $timeLeftFinal + $timerHtmlEnd);

        }
    }, 1000);
}




/**
 * Set the timer compared to what date it is and what time is set for it.
 *
 * @param {timstamp} $distance
 */
function setTimer($distance) {
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor($distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor(($distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor(($distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor(($distance % (1000 * 60)) / 1000);

    if(hours < 10) {
        hours = "0" + hours;
    }

    if(minutes < 10) {
        minutes = "0" + minutes;
    }

    if(seconds < 10) {
        seconds = "0" + seconds;
    }

    var timeLeft = hours + ":" + minutes + ":" + seconds;

    if(days !== 0) {

        if(days === 1) {
            var timeLeftFinal = days + " day + " + timeLeft;
        } else {
            var timeLeftFinal = days + " days + " + timeLeft;
        }

    } else {
        var timeLeftFinal = timeLeft;
    }

    return timeLeftFinal;
}


        </script>
<!-- timer css-->
<style>
/* Countdown-bar General */
div.countdown-bar {
    width: 0;
    height: 20px;
    margin-bottom: 20px;
    border: 1px solid rgb(233, 8, 8);
    background-color: rgba(189, 184, 184, 0.788);
}

/* Loader */
div.countdown-bar div:nth-of-type(1) {    
    width: 0; 
    height: 100%
}

/* Timer */
div.countdown-bar div:nth-of-type(2) {    
    width: 100%; 
    height: 100%
}
	</style>
</html>