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

echo "<div class=\"flex-container\">"; // flex row 1
    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_freer_practice\"> <a id=\"".$activity->hw_anchor."\" name=\"".$activity->hw_anchor."\"> &nbsp; ".$activity->activity_title."</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\">".$activity->instructions."</span>";
  $instructions_demo = trim($activity->instructions_demo);
  if (!empty($activity->instructions_demo))  {
    echo "\n<div class=\"sbook_instructions_demo\">".$activity->instructions_demo."</div>";
  }
//echo "<br />\n";
//    echo "</pre>";
    echo "</div>\n"; // class=\"sbook_middle_right_column\"
echo "</div> <!-- flex-container -->"; // flex row 1


echo "<div class=\"flex-container\">"; // flex row 2 
echo "<div class=\"sbook_left_column\">";
/*
echo "<div class=\"sbook_left_column02\">";
echo "<style>\n";
echo "@media only screen and (max-width: 1024px) {\n";
echo "div.sbook_left_column {\n";
echo "width : 25%;\n";
echo "margin-left : 0em;\n";
echo "}\n";
echo "</style>\n";
*/
//echo "<pre class=\"sbook_lesson_plan\">";

//$file = $clog_activity->activity_contents; // works
$file = $list_of_decks;
//echo $file; // works

// shuffled activity - update todo
// don't use words in activity contents
// use for each $file = $clog_activity-> ... qs ans;
//$words = explode (" ", $file); works
//foreach ($words as $word) {
//  echo "xxxx".$word."yyy<br /><br />";
//}

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

$key = $file;
$sentences = explode ("\n", $file);
shuffle ($sentences);
foreach ($sentences as $sentence) {

$sentence_wo_spaces = trim(preg_replace("/[^\da-z]/i",'_',$sentence));
$box01 = "<div style=\"float: left; position: relative; width: 465%; margin-left: -15%; padding: 0.8em\">";
$box01 = $box01. "<div id=\"div2mov_cards_box01_".$uniq_div_from_activity_title.$sentence_wo_spaces."\">";
$box01 = $box01.  "<span contenteditable=\"true\">".$sentence."</span>";
$box01 = $box01. "</div>";
$box01 = $box01. "</div>";

echo $box01; // place before script or else will fail!

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

echo "<style>\n";
echo "#div2mov_cards_box01_".$uniq_div_from_activity_title.$sentence_wo_spaces." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "margin-right: -8%;\n";
echo "display: block;\n";
//echo "display: inline-block;\n";
//echo "display: inline;\n";
//echo "float: left;\n";
echo "padding: 0.1em;\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 "padding-bottom: 0.1em;\n";
echo "border: 1px dotted grey;\n";
//echo "width: 20%;\n";
//echo "width: 100%;\n";
//echo "background-color: #dbd039;\n";
//echo "background-color: #cdcdcd;\n";
echo "background-color: DarkSeaGreen;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
echo "}\n";
echo "</style>\n";
}
echo "</div> <!-- end sbook_left_column -->\n";


echo "<div class=\"sbook_middle_right_column\">\n";
/*
echo "<div class=\"sbook_middle_right_column02\">\n";
echo "<style>\n";
echo "@media only screen and (max-width: 1024px) {\n";
echo "div.sbook_middle_right_column {\n";
echo "width : 70%;\n";
echo "margin-left : -0.5em;\n";
echo "}\n";
echo "</style>\n";
 */

    if (!empty($activity->instructions02))  {
    include ('js/swap_divs_w_click.js');
echo "<div id=\"swapper-first_".$uniq_div_from_activity_title."\" style=\"display:block;\">";
echo "<a href=\"javascript:SwapDivsWithClick('swapper-first_".$uniq_div_from_activity_title."','swapper-other_".$uniq_div_from_activity_title."')\"><img src=\"pix/icons8-hand-with-pen-100.png\" width=\"35em\" border=\"0\" alt=\"Take notes\" />  Take notes</a>\n";
    //echo "<div contenteditable=\"true\" style=\"width: 120%\">\n";
    echo "<div contenteditable=\"true\">\n";
    echo "<span class=\"sbook_instructions02\">".$activity->instructions02."</span>";
    echo "</div> <!-- contenteditable -->\n";
echo "</div><!-- end swapper first -->\n";

// DISPLAY (hidden by default)
echo "<div id=\"swapper-other_".$uniq_div_from_activity_title."\" style=\"display:none; float: left; position: fixed; bottom: 55%; margin-left: 40%; z-index: 1000; width: 30%;\">\n"; // 20220322-1149
//echo "<div id=\"swapper-other_".$uniq_div_from_activity_title."\" style=\"display:none; float: left; position: fixed; bottom: 55%; margin-left: 2%; z-index: 1000; width: 18%;\">\n"; // 20210409-0026
    $prep_notes = $activity->instructions02; // 20220218-1735
    $prep_notes = strip_tags($prep_notes);
    include ('sbook_plugins/take_notes_floating01.inc');

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

//$fileNameToSaveAs = `date +%Y%m%d`."_{$sbook}_ref_notes_{$member}.txt";
//$activity_title = trim(preg_replace("/[^\da-z]/i", '_',$activity->activity_title)). trim(preg_replace("/[^\da-z]/i", '_',$activity->instructions)); // only for course log version - improve for better legibility
$activity_title = trim(preg_replace("/[^\da-z]/i", '_',$activity->activity_title));
$fileNameToSaveAs = $sbook_ref."_".$activity_title."_notes_".$member."_".date('Ymd_His').".txt";
include ('js/save_text_as_file.js');

echo "<style>\n";
echo "#empty_div2mov_cards".$uniq_div_from_activity_title." {\n";
echo "position: relative;\n";
echo "width: 100%;";
echo "max-height: 20%;"; 
echo "padding: 0.1em;\n";
echo "}\n";

echo "#div2mov_cards".$uniq_div_from_activity_title." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "top: -14em;";
echo "left: -80%; /*-16em; */";
echo "width: 170%;";
echo "display: inline-block;\n";
echo "box-shadow: 0px 0px 4px 2px #052a3a;\n";
echo "resize: both;";
echo "height: 35em; /*30em;*/"; 
echo "overflow-y: scroll;"; 
echo "}\n";

// Can't hide scrollbars in Firefox...
// Hide scrollbar for Chrome, Safari and Opera 
echo "#div2mov_cards".$uniq_div_from_activity_title."::-webkit-scrollbar {";
echo "display: none;";
echo "}\n";
// Hide scrollbar for IE and Edge
echo "#div2mov_cards".$uniq_div_from_activity_title." {";
echo "ms-overflow-style: none;";
echo "}\n";

echo "</style>\n";

echo "<script>\n";
echo"dragElement(document.getElementById(('div2mov_cards".$uniq_div_from_activity_title."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";
  }
    
//echo "</pre>";
echo "</div> <!-- end sbook_middle_column -->\n";
echo "</div> <!-- end flex-container -->\n"; // flex-container 2

//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 style=\"clear: both;\"></div>\n";

//echo "<br /><img src=\"pix/icons8-key-50.png\" width=\"35em\" border=\"0\" alt=\"key to exercise\"> Original text:";
//echo "<div contenteditable=\"true\"><span class=\"show_key_sbook\">".$key."<br />"; // 20220218-1843 commented out but need to create new uncommented
echo "<img src=\"pix/icons8-key-50.png\" width=\"35em\" border=\"0\" alt=\"key to exercise\">";
echo "<div contenteditable=\"true\"><span class=\"show_key_sbook\">";

  if (!empty($activity->key))  {
echo "Suggested answer:<br />";
echo $activity->key;
  }
echo "</span></div>";

//echo "</pre>"; // pre class= sbook_lesson_plan
//echo "</div>"; // not to print
?>
