<h1>{$pageTitle} <span>วิชา{$course.courseName}</span></h1>

<form action="{link value='course:test-query' id=$smarty.get.id}" id="form-2col" method="post">
<div class="error-massage"{if !empty($data.inputError)} style="display:block;"{/if}>

<ul><li></li></ul>
</div>

{if $smarty.get.status == 'Insufficient-exam' }
        <div class="error-massage" style="display:block;">
     Error! จำนวนข้อสอบของบทเรียนที่คุณเลือกมีไม่เพียงพอ
         <ul><li></li></ul>
     </div>
    
    {/if}

<fieldset id="course-test">
{if $smarty.get.status == 'save-complete'}
     <p class="message">บันทึกเรียบร้อย</p>
    {/if}
    
{if $data.testID}<input type="hidden" name="testID" value="{$data.testID}" />{/if}
<input type="hidden" name="course_courseID" value="{$course.courseID}" />
<input type="hidden" name="testStatus" value="enable" />

<table>
<colgroup>
<col class="label" />
<col class="input" />
</colgroup>
<tr>
<th scope="row">ชื่อชุดข้อสอบ</th>
<td><input type="text" name="testTitle" value="{$data.testTitle}" /></td>
</tr>
<tr>
<th scope="row">คำอธิบาย</th>
<td><textarea name="testDescription" rows="0" cols="0">{$data.testDescription}</textarea></td>
</tr>
<tr>
<th scope="row">ประเภทชุดข้อสอบ</th>
<td><select name="testType">
<option value="test"{if $data.testType=='test'} selected="selected"{/if}>แบบฝึกหัด</option>
<option value="real-test"{if $data.testType=='real-test'} selected="selected"{/if}>สอบเก็บคะแนน</option>
</select>
</td>
</tr>
<tr>
<th scope="row">คะแนน</th>
<td><input type="text" name="testScore" value="{if $data.testID}{$data.testScore}{else}0{/if}" class="super-extra-small" /></td>
</tr>
<tr>
<th scope="row">เวลาสอบ (ชม:นาที)</th>
<td><select name="testTotalTimeHour">
{section name=i loop=25}
<option value="{$smarty.section.i.index}"{if $data.testTotalTimeHour==$smarty.section.i.index} selected="selected"{/if}>{$smarty.section.i.index}</option>
{/section}
</select>:
<select name="testTotalTimeMinute">
{section name=i loop=60}
<option value="{$smarty.section.i.index}"{if $data.testTotalTimeMinute==$smarty.section.i.index} selected="selected"{/if}>{$smarty.section.i.index}</option>
{/section}
</select>
<span class="description">คุณสามารถเลือกข้อสอบได้โดยการคลิกที่ข้อสอบที่ต้องการค้างไว้และลากไปวางบานกล่องอีกด้านโดยทันที</span>
</td>
</tr>
<tr>
<th scope="row">วันที่เริ่มการสอบ</th>
<td><input type="text" name="testStartDate" value="{dateCurrent value=$data.testStartDate}" class="super-small" /></td>
</tr>
<tr>
<th scope="row">วันที่สิ้นสุดการสอบ</th>
<td><input type="text" name="testEndDate" value="{dateCurrent value=$data.testEndDate}" class="super-small" /></td>
</tr>
<tr>
<th scope="row">อยู่ในบนเรียน</th>
<td>{if $data.testID}
{chapterDropdown name='courseChapter_courseChapterID' id=$smarty.get.id value=$data.courseChapter_courseChapterID all=true}
{else}
{chapterDropdown name='courseChapter_courseChapterID' id=$smarty.get.id value='-1' all=true}
{/if}
</td>
</tr>
<tr>
<th scope="row">ข้อสอบ</th>
<td><select name="testSelectType">
<option value="manual">สร้างแบบเลือกเอง</option>
<option value="random"{if $data.testSelectType=='random'} selected="selected"{/if}>สร้างแบบสุ่ม</option>
</select>
สลับคำตอบ
<select name="testRandomAnswer">
<option value="0">ปิด</option>
<option value="1"{if $data.testRandomAnswer==1} selected="selected"{/if}>เปิด</option>
</select>

<div id="exam-random" class="hidden">
<h5>ตั้งค่า</h5>
<p class="description">กรณีที่ข้อสอบระดับนั้นๆ ในฐานข้อมูลมีจำนวนไม่พอ ระบบจะดึงข้อสอบในระดับต่ำกว่ามาใส่เป็นการทดแทน</p>
<div class="clearfix">
<label style="display:inline-table; width:auto; margin-right:10px;">จำนวนข้อสอบระดับง่าย</label>
<input type="text" name="testRandomData[easy]" id="testRandomData_easy" value="{$data.testRandomData.easy|nullTo:0}" class="super-extra-small" />
<span class="description">(ค่าน้ำหนักข้อสอบอยู่ระหว่าง 0-4)</span>
</div>
<div class="clearfix">
<label style="display:inline-table; width:auto; margin-right:10px;">จำนวนข้อสอบระดับปานกลาง</label>
<input type="text" name="testRandomData[medium]" id="testRandomData_medium" value="{$data.testRandomData.medium|nullTo:0}" class="super-extra-small" />
<span class="description">(ค่าน้ำหนักข้อสอบอยู่ระหว่าง 5-8)</span>
</div>
<div class="clearfix">
<label style="display:inline-table; width:auto; margin-right:10px;" >จำนวนข้อสอบระดับยาก</label>
<input type="text" name="testRandomData[hard]" id="testRandomData_hard" value="{$data.testRandomData.hard|nullTo:0}" class="super-extra-small" />
<span class="description">(ค่าน้ำหนักข้อสอบอยู่ระหว่าง 9-10)</span>
</div>
</div>

<div id="exam">
<div class="clearfix">
<div class="exam-selector">
<h5>คำถามในระบบ</h5>
<ul id="sortable2" class="connectedSortable">
{if $exam != 'nodata'}
{section name=i loop=$exam}
<li>
<input type="checkbox" name="useitem[{$exam[i].examID}]" {if $exam[i].selected} checked="checked"{/if} class="checkbox" />
<strong>{$exam[i].examQuestion|htmlDecode}</strong>
<p class="chapter-data">
<span>บท: {chapterData id=$exam[i].courseChapter_courseChapterID}</span>
<span>ค่านำหนัก: {$exam[i].examWeightStat}</span>
</p>
<input type="hidden" name="chapterID[]" value="{$exam[i].courseChapter_courseChapterID}" class="chapterID" />
</li>
{/section}
{/if}
</ul>
</div>
</div>

<span class="description block">คุณสามารถเลือกข้อสอบได้โดยการคลิกที่ข้อสอบที่ต้องการค้างไว้และลากไปวางบานกล่องอีกด้านโดยทันที</span>
</div>
</td>
</tr>
</table>

<input type="submit" name="apply" value="ตกลง" class="button" />
</fieldset>
</form>
<script type="text/javascript" src="files/js/system/jquery.metadata.js" charset="utf-8"></script>
<script type="text/javascript" src="files/js/system/jquery.plugins/jquery.validate.js" charset="utf-8"></script>
<script type="text/javascript" src="files/js/system/ui/ui.core.js" charset="utf-8"></script>
<script type="text/javascript" src="files/js/system/ui/ui.datepicker.js" charset="utf-8"></script>
<script type="text/javascript" src="files/js/system/ui/i18n/ui.datepicker-th.js" charset="utf-8"></script>
<!-- /* <script type="text/javascript" src="files/js/system/ui/ui.sortable.js" charset="utf-8"></script> */ -->
<script type="text/javascript" src="files/js/course/test.form.js" charset="utf-8"></script>
<script>
$("select [name='mycheckbox']").change(function(){
alert("sss");
});
function chapterChange(){
alert("sss");
}

</script>

//Modify 27-08-58 purpose: display Exam list Filter by chapterID
$( window ).load(function() {
  var chapterSelectedID = $("select[name='courseChapter_courseChapterID']").val();
    
  var x = document.getElementsByClassName("chapterID");//getAllElement by Class = chapterID
if(x==0){
document.getElementById("noExamData").style.display = 'block';
}
else{
document.getElementById("noExamData").style.display = 'none';
if(chapterSelectedID == 'all'){
for (i = 0; i < x.length; i  ) {
x[i].parentNode.style.display = 'block';
}
}
else{

var countElement = 0;
for (i = 0; i < x.length; i  ) {
if(x[i].value == chapterSelectedID){
countElement  ;
x[i].parentNode.style.display = 'block';
}
else{
x[i].parentNode.style.display = 'none';
}
}

if(countElement == 0){
document.getElementById("noExamData").style.display = 'block';
}
}

}

});

//Modify 27-08-58 purpose: display Exam list after change courseChapter
$(document.body).on('change',"select[name='courseChapter_courseChapterID']",function (e) {

var chapterSelectedID = $(this).val();

//<input type="hidden" name="chapterID[]" value="230" class="chapterID" />

var x = document.getElementsByClassName("chapterID");//getAllElement by Class = chapterID
if(x==0){
document.getElementById("noExamData").style.display = 'block';
}
else{
document.getElementById("noExamData").style.display = 'none';
if(chapterSelectedID == 'all'){
for (i = 0; i < x.length; i  ) {
x[i].parentNode.style.display = 'block';
}
}
else{

var countElement = 0;
for (i = 0; i < x.length; i  ) {
if(x[i].value == chapterSelectedID){
countElement  ;
x[i].parentNode.style.display = 'block';
}
else{
x[i].parentNode.style.display = 'none';
}
}

if(countElement == 0){
document.getElementById("noExamData").style.display = 'block';
}
}

}

});



$.validator.addMethod("testTotalTime",
    function(value, element, param) {
   var i = parseInt(value);
   var j = parseInt($('select[name=testTotalTimeMinute]').val());
   
   if($('select[name=testType]').val() == 'real-test'){
    return (i==0 && j<1)? false : true;
   }else{
    return true;
   }
    }
    , "กรุณาตั้งเวลาสอบมากกว่า 10 นาที"
);

$.validator.addMethod("dateLessThan",
    function(value, element, param) {
        var i = value.split('/');
        var j = $('input[name=' param ']').val().split('/');
        //alert(parseFloat(i[1])  ','  parseFloat(j[1]));
        if(i[2] < j[2]){
         return false;
        }else if(i[2] == j[2]){
         if(parseFloat(i[1]) < parseFloat(j[1])){
        return false;
       }else if(parseFloat(i[1]) == parseFloat(j[1])){
        if(parseFloat(i[0]) < parseFloat(j[0])){
        return false;
       }
       }
        }
        
        return true;
    }
    , "The value {0} must be less than {1}"
);

$.validator.addMethod("checkTestSelectType",
    function(value, element, param) {
        if(value == 'random'){
         if((parseInt($('#testRandomData_easy').val()) parseInt($('#testRandomData_medium').val()) parseInt($('#testRandomData_hard').val()))==0){
         return false;
    }
        }
        
        return true;
    }
    , "กรุณากรอกจำนวนข้อสอบรวมกันให้มากกว่า 0 ข้อ"
);

function filterChapterExam(){
var selectedVar = $('select[name=courseChapter_courseChapterID]').val();
var obj = $('.chapterID');
//var obj = $('#sortable2 li .chapterID');

if(selectedVar == 'all'){
obj.parent('li').removeClass('hidden');
}
else{
obj.parent('li').addClass('hidden');

obj.each(function(){
if($(this).val() == selectedVar){
$(this).parent('li').removeClass('hidden');
}
});
}
}

function checkTestSelector(){
if($('select[name=testSelectType]').val() == "manual"){
$('#exam-random').hide();
$('#exam').show();
}else{
$('#exam-random').show();
$('#exam').hide();
}
}

$(function(){
var container = $('div.error-massage');
var options = {
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: 'li',
meta: "validate",
rules:{
testTitle: "required",
testScore: {
required: true,
number: true
},
testTotalTimeHour: {testTotalTime: true},
testStartDate: "required",
testEndDate: {
required:true,
dateLessThan: 'testStartDate'
},
testSelectType: "checkTestSelectType"
},
messages: {
testTitle: "กรุณาใส่ชื่อแบบทดสอบ",
testScore: {
required: "กรุณาใส่คะแนน",
number: "กรุณาใส่คะแนนเป็นตัวเลขเท่านั้น"
},
testTotalTimeHour: {testTotalTime: 'กรุณาตั้งเวลาสอบมากกว่า 30 นาที'},
testStartDate: "กรุณาใส่วันเริ่มทดสอบ",
testEndDate: {
required:"กรุณาใส่วันสิ้นสุดการสอบ",
dateLessThan: "กรุณาใส่วันสิ้นสุดการสอบให้มากกว่าหรือเท่ากับวันเริ่มทดสอบ"
},
testSelectType: "กรุณากรอกจำนวนข้อสอบรวมกันให้มากกว่า 0 ข้อ"
},
submitHandler: function(form) {
//$('#sortable2, #sortable1 li.hidden').remove();

form.submit();
}
}
$("#form-2col").validate(options);

// set date picker
var datePickerOption = {dateFormat:'dd/mm/yy',changeMonth: true,changeYear: true};
var datePickerLang = $.datepicker.regional['th'];
$("input[name=testStartDate]").datepicker(datePickerOption, datePickerLang);
$("input[name=testEndDate]").datepicker(datePickerOption, datePickerLang);

// sortable ui
//$("#sortable1, #sortable2").sortable({connectWith: '.connectedSortable'}).disableSelection();


// prepare exam list
filterChapterExam();

// filter exam list by chapter id
$('select[name=courseChapter_courseChapterID]').change(function(){filterChapterExam();});

// display exam choice by testSelectType drop down list
checkTestSelector();
$('select[name=testSelectType]').change(function(){checkTestSelector();});
});