<?php 
$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; /*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>";

  }

    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);

//now read the rest of the file line by line
if ($handle) {
    while (($line = fgets($handle, 4096)) !== false) {
list($txt_id,$txt_contents,$clue) = explode(";", $line);

// todo
// if empty do nothing

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

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

echo "<style>\n";
echo "#div2mov_cards".$uniq_div_from_activity_title.$txt_id." {\n";
//echo "position: absolute;\n";
echo "position: relative;\n";
//echo "margin-left: -10%;\n";
echo "z-index: 9;\n";
echo "text-align: center;\n";
echo "padding: 0em;\n";
//echo "display: inline-block;\n";
echo "display: block;\n";
//echo "float: left;\n";
echo "background-color: #052a3a;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
//echo "border: solid 1px red;\n";
/*echo "resize: both;";
echo "width: 10em;";
echo "height: 6em;"; 
echo "overflow: scroll;"; */
echo "}\n";
echo "</style>\n";

//echo "<div style=\"float: left; margin-left: -15%;\">"; // 20210507-0010
//echo "<div style=\"margin-left: -15%;\">"; // 20210507-0010
echo "<div style=\"margin-left: -15%;\">"; // 20210507-0010
echo "<div id=\"div2mov_cards".$uniq_div_from_activity_title.$txt_id."\">";
echo  "<span contenteditable=\"true\" style=\"cursor: pointer; color: #efefef; font-size: 120%; display: inline; margin-top: 70%;\">".$txt_contents."</span>";
echo "</div>";
echo "</div>";
//echo "</div>";
  } //if (!empty(trim($txt_contents)))


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

$clue_wo_spaces = preg_replace('/ /m',"_",$clue);
$clue_wo_spaces = preg_replace("/'/m","_",$clue_wo_spaces);

echo "<style>\n";
echo "#div2mov_cards".$uniq_div_from_activity_title.$txt_id.$clue_wo_spaces." {\n";
echo "position: absolute;\n";
//echo "margin-left: -10%;\n";
echo "z-index: 9;\n";
echo "text-align: center;\n";
echo "padding: 0em;\n";
//echo "display: inline-block;\n";
//echo "display: block;\n";
//echo "float: left;\n";
//echo "background-color: red;\n";
//echo "background-color: #052a3a;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
/*echo "resize: both;";
echo "width: 10em;";
echo "height: 6em;"; 
echo "overflow: scroll;"; */
echo "}\n";
echo "</style>\n";
    
echo "<div style=\"float: left;margin-left: -38%; position: relative;\">"; // 20210814-1020
echo "<div id=\"div2mov_cards".$uniq_div_from_activity_title.$txt_id.$clue_wo_spaces."\">";
echo  "<span contenteditable=\"true\" style=\"cursor: pointer; color: #efefef; background-color: green; font-size: 120%;display: inline;\">".$clue."</span>";
//echo  "<span contenteditable=\"true\" style=\"cursor: pointer; color: blue; font-size: 120%;display: inline-block;\">".$clue."</span>";
echo "</div>";
echo "</div>";
  } // if (!empty(trim($clue))) 

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

}
    if (!feof($handle)) {
        echo "Error: unexpected fgets() fail\n";
    }
    fclose($handle);
}
echo "</div>";

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>"; // not to print

} // end foreach
} // end if preg_match_all
?>
