<?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>"; // 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> <!-- end sbook_left_column -->\n";


echo "<div class=\"sbook_middle_right_column\">\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\" style=\"font-size: 160%; font-weight: bold;\">".$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: 58%; 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";
  }
?>

<!-- https://codepen.io/griffininsight/pen/HDFBa
https://codepen.io/griffininsight/details/DyqeKb -->
<script src="js/jquery.min.js"></script><!-- MUST list before jquery-ui -->
<script src="js/jquery-ui.min.js"></script>
<script src="js/tpunch.js"></script>

<?php

echo "<div id=\"container\">";
echo $clog_activity->targets;
echo "<div style=\"clear: both; display: block;\"></div>\n";

echo "<div id=\"feedback\"></div>\n";
//echo "<div style=\"clear: both; display: block;\"></div>\n";

//$file = $clog_activity->activity_contents; // works
$activity_contents = trim($clog_activity->activity_contents);

/* orig
$sentences = explode ("\n", $file);
shuffle ($sentences);
$i = 1; // autoincrement to create unique identifier 

echo "<div id=\"multi_dd_objects_to_drag\">\n";
foreach ($sentences as $sentence) {
$i++;
$sentence_wo_spaces = trim(preg_replace("/[^\da-z]/i",'_',$sentence));
echo $sentence;
//echo "<div id=\"object1\">".$sentence."</div>\n";
}
*/

///
// load file into an array
$activity_contents = array($activity_contents);
//shuffle ($file);
echo "<div id=\"multi_dd_objects_to_drag\">\n";
foreach ($activity_contents as $activity_content) {
//list($multi_dd_target,$object,$sentence) = explode(";", $file);
$lines = explode("\n", $activity_content);

foreach ($lines as $line) {
list($multi_dd_target,$object,$sentence) = explode(";", $line);
echo "<div id=\"object".$object."\">".$sentence."</div>\n";
} // foreach ($lines as $line)
} // foreach ($activity_contents as $activity_content)
///

echo "<div style=\"clear: both; display: block;\"></div>\n";
echo "</div><!-- end of multi_dd_objects_to_drag--> \n";
echo "</div><!-- end container -->\n";


echo "<style>";
echo "#object1, #object2, #object3, #object4, #object5, #object6, #object7, #object8\n";
echo "{\n";
echo "z-index: 9;\n";
//echo "position: absolute;\n"; /* check if still needed */
//echo "margin-right: -8%;\n";
//echo "contenteditable: true;\n"; // fails???
echo "float: left;\n";
//echo "padding: 0.1em;\n";
echo "text-align: center;\n";
echo "cursor: pointer;\n";
echo "color: black;\n";
echo "font-size: 100%;\n";
//echo "padding: 0.2em;\n";
echo "margin-left: 0.4em;\n";
echo "margin-top: 0.2em;\n";
echo "padding-left: 0.4em;\n";
echo "padding-right: 0.4em;\n";
echo "-moz-border-radius: 4px;\n";
echo "-webkit-border-radius: 4px;\n";
echo "border-radius: 4px;\n";
echo "background-color: DarkSeaGreen;\n";
echo "opacity: 0.9;\n";
echo "filter: alpha(opacity=90);\n"; // For IE8 and earlier
echo "box-shadow: 0px 4px 4px 2px rgba(0,0,0,0.2);\n";
// echo "/* Prevent text from being selectable */\n";
// echo "-webkit-touch-callout: none;\n";
// echo "-khtml-user-select: none;\n";
// echo "-moz-user-select: none;\n";
// echo "-ms-user-select: none;\n";
// echo "-o-user-select: none;\n";
// echo "user-select: none;\n";
echo "}\n";
echo "</style>";
?>
<style>

.multi_dd_target
{
/*width: 220px;	 */
position: relative;
width: 220px; /*25%;  */
min-height: 250px;
/*border: 2px solid #efeccd; */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align: center !important;
vertical-align: top;
float: left;
/* margin: 0px auto 0px 2em; */
margin-top: -3em;
margin-left: 2em;
padding: 1em;
}

#multi_dd_objects_to_drag
{
padding: 0px auto 0px auto;
text-align: center;
/* border: 0px dashed #ff0000; */
width: 100%; /*685px; */
height:150px;
margin-top:10px;
margin-left:5px;
}

</style>

<script>
var object1 = document.getElementById('object1');
var object2 = document.getElementById('object2');
var object3 = document.getElementById('object3');
var object4 = document.getElementById('object4');
var object5 = document.getElementById('object5');
var object6 = document.getElementById('object6');
var object7 = document.getElementById('object7');
var object8 = document.getElementById('object8');

var objArray = ['#object1', '#object2', '#object3', '#object4', '#object5', '#object6', '#object7', '#object8'];
//var targArray = ['#target1', '#target2', '#target3', '#target4', '#target5'];
var startDrag = '';
var resetter = 0;

//jQ
var j = jQuery.noConflict();
j(document).ready(function()
{
// multi_dd_objects_to_drag
j('#object1, #object2, #object3, #object4, #object5, #object6, #object7, #object8').draggable
({
start: function(event,ui) {
startDrag = ui.position;
//console.log(startDrag);
},
	containment: '#container',
	cursor: 'move',
	//snap: '#target1',
	//snapMode: 'inner',
	//snapTolerance: 35,
	//revert: wrong,//call the wrong function on revert
	//revert: true,
	revert: function(valid)
		{
		if(!valid)
			{
			//this.remove();
			j('#feedback').html('<h3>Try again!</h3>');
			return true;
			}
		},	
	stack: 'div',//bring it to the top by adjusting z-index of the element
        // todo to avoid objects moving after each selection????
        // → include css back
        // XXXXXXXXXXXXXXX
	drag: clearer,
	stop: function(event,ui)
		{
		//console.log("finished");
		}
	});
	
//droppables	
<?php
$activity_contents = trim($clog_activity->activity_contents);
$activity_contents = array($activity_contents);

foreach ($activity_contents as $activity_content) {
$lines = explode("\n", $activity_content);

foreach ($lines as $line) {
list($multi_dd_targets,$objects,$sentence) = explode(";", $line);

/*
echo "j('#multi_dd_target_".$multi_dd_targets."').droppable\n";
echo "({\n";
echo "	drop: right,\n";
echo "	accept: '#object".$object."'\n";
echo "//tolerance: intersect\n";
echo "	});\n";
*/

/*
$line2 = explode(";", $line);
foreach ($line2 as $results) {
echo "<!-- res0 $results[0] res1 $results[1] res2 $results[2] -->\n";
if ($results[0] = '1') {
echo "zzzzzzzzzzzzzz\n";
echo "j('#multi_dd_target_1').droppable\n";
echo "({\n";
echo "	drop: right,\n";
echo "	accept: '";
foreach ($results[1] as $objects) {
echo "#object".$objects.",";
}
echo "'\n";
echo "//tolerance: intersect\n";
echo "	});\n";
}
} // foreach ($line as $results)
*/

echo "j('#multi_dd_target_1').droppable\n";
echo "({\n";
echo "	drop: right,\n";
echo "	accept: '";
if ($multi_dd_targets = '1') {
foreach ($lines as $line) {
list($multi_dd_targets,$objects,$sentence) = explode(";", $line);
//if (($multi_dd_targets != '2') && ($multi_dd_targets != '3')) {
if ($multi_dd_targets == '1') {
// $str = preg_replace($pattern, $replacement, $string);
$str = preg_replace ("^$objects", "#object$objects", $objects);
echo $str;
//echo "#object".$objects.",";
}
}
echo "'\n";
}
echo "//tolerance: intersect\n";
echo "	});\n";



} // foreach ($lines as $line)
} // foreach ($activity_contents as $activity_content)

?>
/*
j('#multi_dd_target_1').droppable
	({
	drop: right,
	accept: '#object7 , #object8'
	//tolerance: intersect
	});
j('#multi_dd_target_2').droppable
	({
	drop: right,
	accept: '#object5 , #object4 , #object1'
	});
	
j('#multi_dd_target_3').droppable
	({
	drop: right,
	accept: '#object3 , #object6 , #object2'
	});
*/
});//end on doc load

//EXTERNAL METHODS

//clear the feedback div onDrag
function clearer(event, ui)
{ j('#feedback').html(''); }

//if the dropTarget is correct
function right(event, ui)
{
j('#feedback').html('<h3>Correct!</h3>');
var draggable = ui.draggable;
draggable.draggable('disable');
draggable.draggable('option', 'revert', false);//turn revert off
//draggable.offset(j(this).offset());//lock it on top of the targets x and y
draggable.css('background-color','#ffffff');
draggable.css('color','#09C');
resetter++;
if (resetter == 8)
	{
	//console.log(resetter);
	j('#feedback').html('<h3 class="greentext">Congratulations! All correct!</h3>');
	j('#logo').html('<button type="button" onclick="resetIt()">Reset</button>');
	}
else
	{
	//do nothing
	}
}

//on reset button click
function resetIt() {
resetter = 0;
j('#feedback').html('');
j('#logo').html('<!-- todo - mysql insert into table -->');
//console.log(objArray);
for (x = 0; x < objArray.length; x++)
	{
	j(objArray[x]).css('left', '0');
	j(objArray[x]).css('top', '0');
	//j(objArray[x]).css('float', 'left');
	j(objArray[x]).css('background-color', '#09C');
	j(objArray[x]).css('color','#fff');
	j(objArray[x]).draggable('enable');//re-enable the draggable state
	j(objArray[x]).draggable({revert: function(valid) //gotta recall the revert function
		{
		if(!valid)
			{
			//this.remove();
			j('#feedback').html('<h3>Try again!</h3>');
			return true;
			}
		}
		});
	}
}
</script>
<!--
Copyright (c) 2023 by Curtis Griffin (https://codepen.io/griffininsight/pen/DyqeKb)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

<?php
//echo "</pre>";
    echo "<div style=\"clear: both;\"></div>\n";
echo "</div> <!-- end flex-container -->\n"; // flex-container 2

echo "<div class=\"sbook_left_column\">";
echo "</div> <!-- end sbook_left_column -->\n";
echo "<div class=\"sbook_middle_right_column\">\n";
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
?>
