<?php 
/*******
^ csv delimiter
******/
$deck_reference_pattern = '/([a-z0-9][^\s]*csv)/m'; 

if (preg_match_all($deck_reference_pattern,$list_of_decks,$matches)) {

foreach ($matches[0] as $deck_ref) {

$file = "inc_drills/".$deck_ref;

echo "<div id=\"not_to_print_deck\">";

//read first line
$first_line = file($file);
list($exercise_type, $exercise_name, $selection_number, $instructions,$background_image,$key_image) = explode("^", $first_line[0]);
//echo "<em>".$first_line[0]."</em><br />";
//echo "<img valign=\"bottom\" src=\"pix/icons8-training-100.png\" width=\"40\" border=\"0\" alt=\"modelling target language\"> <h3>".$exercise_type."</h3> - ";
//echo "<h3>".$exercise_name."</h3> ";
//echo "<h3>(".$selection_number.")</h3><br />";
//echo "      <em>".$instructions."</em><br /><br />";


echo "<div class=\"flex-container\">";
    echo "<div class=\"sbook_left_column\">\n";
  if (!empty(trim($activity->activity_icon)))  {
        //echo "<div class=\"sbook_activity_icon".$uniq_div_from_activity_title."\"> <a id=\"".$activity->hw_anchor."\" name=\"".$activity->hw_anchor."\"> &nbsp; ".$activity->activity_title."</a></div>";
        echo "<div class=\"sbook_activity_icon".$uniq_div_from_activity_title."\"> <a id=\"".$activity->hw_anchor."\" name=\"".$activity->hw_anchor."\"> &nbsp; ".$exercise_name." - ".$selection_number."</a></div>";
?>

<style>
div.sbook_activity_icon<?php echo $uniq_div_from_activity_title ?>::before {
content: "";
background : url(<?php echo $activity->activity_icon ?>) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline-block; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_activity_icon<?php echo $uniq_div_from_activity_title ?> {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #ababad;
}
</style>

<?php
        /*
@media print {
div.sbook_activity_icon<?php echo $uniq_div_from_activity_title ?> {
max-width : 72%; 80
line-height: 1.5em; 2
font-size : 105%; 120
}
         */
  }
  //else {     echo "<div class=\"sbook_construction\"> <a id=\"".$activity->hw_anchor."\" name=\"".$activity->hw_anchor."\"> &nbsp; ".$exercise_type."</a></div>";
  else {     echo "<div class=\"sbook_construction\"> <a id=\"".$activity->hw_anchor."\" name=\"".$activity->hw_anchor."\"> &nbsp; ".$exercise_type." - ".$selection_number."</a></div>";

  }

    echo "</div><!-- end sbook_left_column -->\n";

    echo "<div class=\"sbook_middle_right_column\">\n";
    echo "<pre class=\"sbook_lesson_plan\">";

        //echo "<span class=\"sbook_exercise_no\">".$activity->activity_id."</span> <span class=\"sbook_instructions\">".$activity->instructions."</span>";
        echo "<span class=\"sbook_exercise_no\">".$activity->activity_id."</span> <span class=\"sbook_instructions\">".$instructions."</span>";
  $instructions_demo = trim($activity->instructions_demo);
  if (!empty($activity->instructions_demo))  {
    echo "\n<div class=\"sbook_instructions_demo\">".$activity->instructions_demo."</div>";
  }
  if (!empty($activity->instructions02))  {
    echo "\n<span class=\"sbook_instructions02\">".$activity->instructions02."</span>";
  }
echo "<br />\n";



//echo "<div style=\"background-image: url(".$background_image."); background-size: contain no-repeat;\">\n"; // don't forget div at the end
echo "<div style=\"background: url(".$background_image.") no-repeat right; background-size: contain;\">\n"; // don't forget div at the end
//echo "<div style=\"background-color: black;\">\n";

//read first line, but do nothing with it
$handle = fopen($file, "r");
$line = fgets($handle);
// rsort($line); // sort in reverse order - failed - check csv_load_deck02.inc!

//now read the rest of the file line by line
if ($handle) {
echo "<div class=\"flex-container\"><!-- this is flex-container 2 -->";
    while (($line = fgets($handle, 4096)) !== false) {

//list($txt_id,$txt_contents,$clue) = explode(";", $line);
list($txt_id,$subject,$auxiliary_vb,$lexical_vb,$past_participle,$object,$preposition,$object2) = explode("^", $line);

/***
  order in csv file matters!
  → start w/ clues to be listed top-left
  delimiter needed at the end of each line!
  (unless want future script to include clues into text - todo)
 ***/

  if (!empty(trim($subject)))  {

$subject_wo_spaces = preg_replace('/ /m',"_",$subject);
$subject_wo_spaces = preg_replace("/'/m","_",$subject_wo_spaces);
$subject_wo_spaces = preg_replace("/&/m","_",$subject_wo_spaces);
$subject_wo_spaces = preg_replace("/#/m","_",$subject_wo_spaces);
$subject_wo_spaces = preg_replace("/;/m","_",$subject_wo_spaces);
$subject_wo_spaces = preg_replace("/←/m","_",$subject_wo_spaces);


// touch block of subjects
//echo "<div style=\"float: left; position: absolute; width: 150%; margin-left: -35%;\">";
$box01 = "<div style=\"float: left; position: relative; width: 150%; margin-left: -35%; padding: 0.8em\">";
$box01 = $box01. "<div id=\"div2mov_cards_box01_".$uniq_div_from_activity_title.$txt_id.$subject_wo_spaces."\">";
$box01 = $box01.  "<span contenteditable=\"true\">".$subject."</span>";
$box01 = $box01. "</div>";
$box01 = $box01. "</div>";
//echo $box01;
  }

  if (!empty(trim($auxiliary_vb)))  {

$auxiliary_vb_wo_spaces = preg_replace('/ /m',"_",$auxiliary_vb);
$auxiliary_vb_wo_spaces = preg_replace("/'/m","_",$auxiliary_vb_wo_spaces);
$auxiliary_vb_wo_spaces = preg_replace("/&/m","_",$auxiliary_vb_wo_spaces);
$auxiliary_vb_wo_spaces = preg_replace("/#/m","_",$auxiliary_vb_wo_spaces);
$auxiliary_vb_wo_spaces = preg_replace("/;/m","_",$auxiliary_vb_wo_spaces);
$auxiliary_vb_wo_spaces = preg_replace("/←/m","_",$auxiliary_vb_wo_spaces);

// touch block of auxiliary_vbs
//echo "<div style=\"float: left; position: absolute; width: 150%; margin-left: -35%;\">";
$box02 = "<div style=\"float: left; position: relative; width: 150%; margin-left: -35%; padding: 0.8em\">";
$box02 = $box02. "<div id=\"div2mov_cards_box02_".$uniq_div_from_activity_title.$txt_id.$auxiliary_vb_wo_spaces."\">";
$box02 = $box02.  "<span contenteditable=\"true\">".$auxiliary_vb."</span>";
$box02 = $box02. "</div>";
$box02 = $box02. "</div>";
//echo $box02;
  }

  if (!empty(trim($lexical_vb)))  {

$lexical_vb_wo_spaces = preg_replace('/ /m',"_",$lexical_vb);
$lexical_vb_wo_spaces = preg_replace("/'/m","_",$lexical_vb_wo_spaces);
$lexical_vb_wo_spaces = preg_replace("/&/m","_",$lexical_vb_wo_spaces);
$lexical_vb_wo_spaces = preg_replace("/#/m","_",$lexical_vb_wo_spaces);
$lexical_vb_wo_spaces = preg_replace("/;/m","_",$lexical_vb_wo_spaces);
$lexical_vb_wo_spaces = preg_replace("/←/m","_",$lexical_vb_wo_spaces);

// touch block of lexical_vbs
//echo "<div style=\"float: left; position: absolute; width: 150%; margin-left: -35%;\">";
$box03 = "<div style=\"float: left; position: relative; width: 150%; margin-left: -35%; padding: 0.8em\">";
$box03 = $box03. "<div id=\"div2mov_cards_box03_".$uniq_div_from_activity_title.$txt_id.$lexical_vb_wo_spaces."\">";
$box03 = $box03.  "<span contenteditable=\"true\">".$lexical_vb."</span>";
$box03 = $box03. "</div>";
$box03 = $box03. "</div>";
//echo $box03;
  }

  if (!empty(trim($past_participle)))  {

$past_participle_wo_spaces = preg_replace('/ /m',"_",$past_participle);
$past_participle_wo_spaces = preg_replace("/'/m","_",$past_participle_wo_spaces);
$past_participle_wo_spaces = preg_replace("/&/m","_",$past_participle_wo_spaces);
$past_participle_wo_spaces = preg_replace("/#/m","_",$past_participle_wo_spaces);
$past_participle_wo_spaces = preg_replace("/;/m","_",$past_participle_wo_spaces);
$past_participle_wo_spaces = preg_replace("/←/m","_",$past_participle_wo_spaces);

// touch block of past_participles
//echo "<div style=\"float: left; position: absolute; width: 150%; margin-left: -35%;\">";
$box04 = "<div style=\"float: left; position: relative; width: 150%; margin-left: -35%; padding: 0.8em\">";
$box04 = $box04. "<div id=\"div2mov_cards_box04_".$uniq_div_from_activity_title.$txt_id.$past_participle_wo_spaces."\">";
$box04 = $box04.  "<span contenteditable=\"true\">".$past_participle."</span>";
$box04 = $box04. "</div>";
$box04 = $box04. "</div>";
//echo $box04;
  }

  if (!empty(trim($object)))  {

$object_wo_spaces = preg_replace('/ /m',"_",$object);
$object_wo_spaces = preg_replace("/'/m","_",$object_wo_spaces);
$object_wo_spaces = preg_replace("/&/m","_",$object_wo_spaces);
$object_wo_spaces = preg_replace("/#/m","_",$object_wo_spaces);
$object_wo_spaces = preg_replace("/;/m","_",$object_wo_spaces);
$object_wo_spaces = preg_replace("/←/m","_",$object_wo_spaces);

// touch block of objects
//echo "<div style=\"float: left; position: absolute; width: 150%; margin-left: -35%;\">";
$box05 = "<div style=\"float: left; position: relative; width: 150%; margin-left: -35%; padding: 0.8em\">";
$box05 = $box05. "<div id=\"div2mov_cards_box05_".$uniq_div_from_activity_title.$txt_id.$object_wo_spaces."\">";
$box05 = $box05.  "<span contenteditable=\"true\">".$object."</span>";
$box05 = $box05. "</div>";
$box05 = $box05. "</div>";
//echo $box05;
  }

  if (!empty(trim($preposition)))  {

$preposition_wo_spaces = preg_replace('/ /m',"_",$preposition);
$preposition_wo_spaces = preg_replace("/'/m","_",$preposition_wo_spaces);
$preposition_wo_spaces = preg_replace("/&/m","_",$preposition_wo_spaces);
$preposition_wo_spaces = preg_replace("/#/m","_",$preposition_wo_spaces);
$preposition_wo_spaces = preg_replace("/;/m","_",$preposition_wo_spaces);
$preposition_wo_spaces = preg_replace("/←/m","_",$preposition_wo_spaces);

// touch block of prepositions
//echo "<div style=\"float: left; position: absolute; width: 150%; margin-left: -35%;\">";
$box06 = "<div style=\"float: left; position: relative; width: 150%; margin-left: -35%; padding: 0.8em\">";
$box06 = $box06. "<div id=\"div2mov_cards_box06_".$uniq_div_from_activity_title.$txt_id.$preposition_wo_spaces."\">";
$box06 = $box06.  "<span contenteditable=\"true\">".$preposition."</span>";
$box06 = $box06. "</div>";
$box06 = $box06. "</div>";
//echo $box06;
  }

  if (!empty(trim($object2)))  {

$object2_wo_spaces = preg_replace('/ /m',"_",$object2);
$object2_wo_spaces = preg_replace("/'/m","_",$object2_wo_spaces);
$object2_wo_spaces = preg_replace("/&/m","_",$object2_wo_spaces);
$object2_wo_spaces = preg_replace("/#/m","_",$object2_wo_spaces);
$object2_wo_spaces = preg_replace("/;/m","_",$object2_wo_spaces);
$object2_wo_spaces = preg_replace("/←/m","_",$object2_wo_spaces);

// touch block of object2s
//echo "<div style=\"float: left; position: absolute; width: 150%; margin-left: -35%;\">";
$box07 = "<div style=\"float: left; position: relative; width: 150%; margin-left: -35%; padding: 0.8em\">";
$box07 = $box07. "<div id=\"div2mov_cards_box07_".$uniq_div_from_activity_title.$txt_id.$object2_wo_spaces."\">";
$box07 = $box07.  "<span contenteditable=\"true\">".$object2."</span>";
$box07 = $box07. "</div>";
$box07 = $box07. "</div>";
//echo $box07;
  }


$shuffled_lines = (array($box01,$box02,$box03,$box04,$box05,$box06,$box07));
//$shuffled_lines = (array((!empty($box01)),(!empty($box02)),(!empty($box03)),(!empty($box04)),(!empty($box05)),(!empty($box06)),(!empty($box07))));
shuffle ($shuffled_lines);
foreach ($shuffled_lines as $shuffled_line) {
echo $shuffled_line;
//var_dump($shuffled_line);
}


  if (!empty(trim($subject)))  {
echo "<script>\n";
echo "dragElement(document.getElementById(('div2mov_cards_box01_".$uniq_div_from_activity_title.$txt_id.$subject_wo_spaces ."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";

// touch individual items of subjects
echo "<style>\n";
echo "#div2mov_cards_box01_".$uniq_div_from_activity_title.$txt_id.$subject_wo_spaces." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "display: inline;\n";
echo "text-align: center;\n";
echo "cursor: pointer;\n";
//echo "color: #efefef;\n";
echo "color: black;\n";
echo "font-size: 120%;\n";
echo "padding: 0.1em;\n";
echo "border: 1px dotted grey;\n";
echo "mini-width: 10%;\n";
echo "float: left;\n";
echo "background-color: #dbd039;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
echo "}\n";
echo "</style>\n";
  } // if (!empty(trim($subject))) 

  if (!empty(trim($auxiliary_vb)))  {
echo "<script>\n";
echo "dragElement(document.getElementById(('div2mov_cards_box02_".$uniq_div_from_activity_title.$txt_id.$auxiliary_vb_wo_spaces ."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";

// touch individual items of auxiliary_vbs
echo "<style>\n";
echo "#div2mov_cards_box02_".$uniq_div_from_activity_title.$txt_id.$auxiliary_vb_wo_spaces." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "display: inline;\n";
echo "text-align: center;\n";
echo "cursor: pointer;\n";
//echo "color: #efefef;\n";
echo "color: black;\n";
echo "font-size: 120%;\n";
echo "padding: 0.1em;\n";
echo "border: 1px dotted grey;\n";
echo "mini-width: 10%;\n";
echo "float: left;\n";
//echo "background-color: #67e328;\n";
//echo "background-color: lime;\n";
echo "background-color: #94fc07;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
echo "}\n";
echo "</style>\n";
  } // if (!empty(trim($auxiliary_vb))) 


  if (!empty(trim($lexical_vb)))  {
echo "<script>\n";
echo "dragElement(document.getElementById(('div2mov_cards_box03_".$uniq_div_from_activity_title.$txt_id.$lexical_vb_wo_spaces ."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";

// touch individual items of lexical_vbs
echo "<style>\n";
echo "#div2mov_cards_box03_".$uniq_div_from_activity_title.$txt_id.$lexical_vb_wo_spaces." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "display: inline;\n";
echo "text-align: center;\n";
echo "cursor: pointer;\n";
//echo "color: #efefef;\n";
echo "color: black;\n";
echo "font-size: 120%;\n";
echo "padding: 0.1em;\n";
echo "border: 1px dotted grey;\n";
echo "mini-width: 10%;\n";
echo "float: left;\n";
echo "background-color: #4bb217;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
echo "}\n";
echo "</style>\n";
  } // if (!empty(trim($lexical_vb))) 


  if (!empty(trim($past_participle)))  {
echo "<script>\n";
echo "dragElement(document.getElementById(('div2mov_cards_box04_".$uniq_div_from_activity_title.$txt_id.$past_participle_wo_spaces ."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";

// touch individual items of past_participles
echo "<style>\n";
echo "#div2mov_cards_box04_".$uniq_div_from_activity_title.$txt_id.$past_participle_wo_spaces." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "display: inline;\n";
echo "text-align: center;\n";
echo "cursor: pointer;\n";
//echo "color: #efefef;\n";
echo "color: black;\n";
echo "font-size: 120%;\n";
echo "padding: 0.1em;\n";
echo "border: 1px dotted grey;\n";
echo "mini-width: 10%;\n";
echo "float: left;\n";
echo "background-color: #0c8f23;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
echo "}\n";
echo "</style>\n";
  } // if (!empty(trim($past_participle))) 


  if (!empty(trim($object)))  {

echo "<script>\n";
echo "dragElement(document.getElementById(('div2mov_cards_box05_".$uniq_div_from_activity_title.$txt_id.$object_wo_spaces ."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";

// touch individual items of objects
echo "<style>\n";
echo "#div2mov_cards_box05_".$uniq_div_from_activity_title.$txt_id.$object_wo_spaces." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "display: inline;\n";
echo "text-align: center;\n";
echo "cursor: pointer;\n";
//echo "color: #efefef;\n";
echo "color: black;\n";
echo "font-size: 120%;\n";
echo "padding: 0.1em;\n";
echo "border: 1px dotted grey;\n";
echo "mini-width: 10%;\n";
echo "float: left;\n";
echo "background-color: #4e55b6;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
echo "}\n";
echo "</style>\n";
  } // if (!empty(trim($object))) 


  if (!empty(trim($preposition)))  {

echo "<script>\n";
echo "dragElement(document.getElementById(('div2mov_cards_box06_".$uniq_div_from_activity_title.$txt_id.$preposition_wo_spaces ."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";

// touch individual items of prepositions
echo "<style>\n";
echo "#div2mov_cards_box06_".$uniq_div_from_activity_title.$txt_id.$preposition_wo_spaces." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "display: inline;\n";
echo "text-align: center;\n";
echo "cursor: pointer;\n";
//echo "color: #efefef;\n";
echo "color: black;\n";
echo "font-size: 120%;\n";
echo "padding: 0.1em;\n";
echo "border: 1px dotted grey;\n";
echo "mini-width: 10%;\n";
echo "float: left;\n";
echo "background-color: #b6ac4e;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
echo "}\n";
echo "</style>\n";
  } // if (!empty(trim($preposition))) 


  if (!empty(trim($object2)))  {
echo "<script>\n";
echo "dragElement(document.getElementById(('div2mov_cards_box07_".$uniq_div_from_activity_title.$txt_id.$object2_wo_spaces ."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";

// touch individual items of object2s
echo "<style>\n";
echo "#div2mov_cards_box07_".$uniq_div_from_activity_title.$txt_id.$object2_wo_spaces." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "display: inline;\n";
echo "text-align: center;\n";
echo "cursor: pointer;\n";
//echo "color: #efefef;\n";
echo "color: black;\n";
echo "font-size: 120%;\n";
echo "padding: 0.1em;\n";
echo "border: 1px dotted grey;\n";
echo "mini-width: 10%;\n";
echo "float: left;\n";
echo "background-color: #6f4eb6;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
echo "}\n";
echo "</style>\n";
  } // if (!empty(trim($object2))) 

  echo "<br />";
} //while (($line = fgets($handle, 4096)) !== false)

echo "</div> <!-- end flex-container 2 -->\n";
    if (!feof($handle)) {
        echo "Error: unexpected fgets() fail\n";
    }
    fclose($handle);
} //if ($handle)
echo "</div>"; // "<div style=\"background: url(".$background_image.") no-repeat right; background-size: contain;\">\n";


//echo "<br /><br /><img src=\"pix/icons8-key-50.png\" width=\"35em\" border=\"0\" alt=\"key to exercise\">  Hover to view key:\n";
//echo "<span class=\"show_key\">";
//echo "<img valign=\"bottom\" src=\"".$key_image."\" width=\"80%\" border=\"0\" alt=\"key\">";
//echo "</span>\n";

echo "</div> <!-- end flex-container -->\n";
echo "</div>"; // not to print
} // end foreach
} // end if preg_match_all
?>
