<div class="title">新增題目庫</div>
<ul class="table-toolbar" style="text-align: left;">
	<li><a class="toolbar-element btn btn-default btn-create" href="/question"><i style="margin-right: 8px;"><span
						class="iconify" data-icon="typcn-arrow-back" data-inline="false"></span></i>返回</a></li>
</ul>
<div class="form-container">
	<form id="frmphp" class="form-horizontal" role="form" method="post" action="/question/insert"
		  enctype="multipart/form-data">
		<div class="form-group mas-col">
			<div class="col-sm-3 text-center mas-title">
				<label>課程主分類</label>
			</div>
			<div class="col-sm-9 mas-box">
				<select id="course_category_id" class="select mas-select select2-offscreen" name="course_category_id"
						tabindex="-1"></select>
			</div>
		</div>
		<div class="form-group mas-col">
			<div class="col-sm-3 text-center mas-title">
				<label>課程次分類</label>
			</div>
			<div class="col-sm-9 mas-box">
				<select id="course_subcategory_id" class="select mas-select select2-offscreen"
						name="course_subcategory_id" tabindex="-1"></select>
			</div>
		</div>
		<div class="form-group mas-col">
			<div class="col-sm-3 text-center mas-title">
				<label>課程名稱</label>
			</div>
			<div class="col-sm-9 mas-box">
				<select id="course_id" class="select mas-select select2-offscreen" name="course_id"
						tabindex="-1"></select>
			</div>
		</div>
		<div class="form-group mas-col">
			<div class="col-sm-3 text-center mas-title">
				<label>單元名稱</label>
			</div>
			<div class="col-sm-9 mas-box">
				<select id="unit_id" class="select mas-select select2-offscreen" name="unit_id" tabindex="-1"></select>
			</div>
		</div>

		<div class="form-group mas-col" style="background-color: #eeeeee;">
			<div class="col-sm-3 text-center mas-title"><label for="question">問題</label></div>
			<div class="col-sm-9 mas-box"><textarea id="question" class="form-control mas-textarea" rows="3"
													name="question"
													style="background-color: rgb(255, 255, 255);"></textarea></div>
		</div>
		<?php if (isset($chineseNumber) && !empty($chineseNumber)): ?>
			<?php for ($i = 1; $i <= 4; $i++): ?>
				<div class="form-group mas-col">
					<div class="col-sm-3 text-center mas-title"><label
								for="answer<?= $i ?>">選擇<?= $chineseNumber[$i] ?></label></div>
					<div class="col-sm-9 text-center mas-title mas-box "><input id="answer<?= $i ?>" type="text"
																				class="form-control mas-input answer"
																				name="answer<?= $i ?>" value=""
																				style="background-color: rgb(255, 255, 255);">
					</div>
				</div>
			<?php endfor; ?>
		<?php endif; ?>
		<div class="form-group mas-col">
			<div class="col-sm-3 text-center mas-title">
				<label for="s2id_autogen5">答案</label>
			</div>
			<div class="col-sm-9 mas-box">
				<select id="correct" class="select mas-select select2-offscreen" name="correct" tabindex="-1"></select>
			</div>
		</div>

		<div class="form-group mas-col">
			<div class="col-sm-3 text-center mas-title"><label for="picture">上載圖片</label></div>
			<div class="col-sm-9 text-center mas-title mas-box "><input id="picture" type="file"
																		class="form-control mas-input" name="picture"
																		value=""
																		style="background-color: rgb(255, 255, 255);">
			</div>
		</div>

		<div class="form-group mas-col" style="background-color: #eeeeee;">
			<div class="col-sm-3 text-center mas-title"><label for="solution">問題解答</label></div>
			<div class="col-sm-9 mas-box"><textarea id="solution" class="form-control mas-textarea" rows="3"
													name="solution"
													style="background-color: rgb(255, 255, 255);"></textarea></div>
		</div>

		<div class="form-group mas-col">
			<div class="col-sm-3 text-center mas-title"><label for="solution_picture">上載問題解答圖片</label></div>
			<div class="col-sm-9 text-center mas-title mas-box "><input id="solution_picture" type="file"
																		class="form-control mas-input"
																		name="solution_picture" value=""
																		style="background-color: rgb(255, 255, 255);">
			</div>
		</div>

		<div class="form-group mas-col">
			<div class="col-sm-3 text-center mas-title"><label for="solution_youtube">問題解答視頻（youtube）</label></div>
			<div class="col-sm-9 text-center mas-title mas-box "><input id="solution_youtube" type="text"
																		class="form-control mas-input"
																		name="solution_youtube" value=""
																		style="background-color: rgb(255, 255, 255);">
			</div>
		</div>

		<div class="form-group mas-col">
			<div class="col-sm-3 text-center mas-title">
				<label for="remark">備註</label>
			</div>
			<div class="col-sm-9 mas-box">
				<textarea id="remark" class="form-control mas-textarea" rows="3" name="remark"
						  style="background-color: rgb(255, 255, 255);"></textarea>
			</div>
		</div>
		<div class="form-footer">
			<button class="btn btn-footer submit" type="button" id="btnSubmit">提交</button>
			<a class="btn btn-footer reset" href="javascript:window.location.reload(true)">重設</a>
		</div>
	</form>
</div>

<script>
	function getRemoteData(remote_url, data, callback, callbackFail) {
		$.ajax({
//async: false,
//timeout: 30000, //最長等候回應時間
			type: "GET", //提交類型
			url: remote_url, //提交地址
			data: data, //提交內容
			dataType: 'json', //返回數據類型
			success: function (data) { //請求完成並成功
				if (data.success) {
					callback(data.data);
				} else {
					callbackFail();
				}
			},
			error: function (data) { //請求返回錯誤信息
				callbackFail();
			},
			beforeSend: function (XHR) { //请求開始前执行
			},
			complete: function (XHR, status) { //请求完成后最终执行
			}
		});
	}

	function getRemoteDataFail() {
		alert("發生錯誤");
	}

	$(document).ready(function () {
		var li = $('#sidebar-menu li').filter(function (i) {
			return $(this).find('.menu-dropdown').find('.menu-text').text() === '題目庫';
		});
		li.addClass('active open');
		//disable tenant switch to prevent error
		$('#tenantswitch').prop('disabled', true);
		var selectObj = $('SELECT[name="correct"]');
		selectObj.empty();
		$('#s2id_correct .select2-chosen').text('');
		for (var i = 1; i <= 4; i++) {
			var chiIdx = (i === 1) ? '一' : (i === 2) ? '二' : (i === 3) ? '三' : '四';
			var o = new Option('選擇' + chiIdx, i, true, true);
			$(o).html('選擇' + chiIdx);
			selectObj.append(o);
		}

		selectObj.val($('SELECT[name="correct"] option:first').val());
		selectObj.select2();

		getRemoteData("/api/question/getcategories", {'mode':'add'}, getCategoriesOk, getRemoteDataFail);
	});

	function getCategoriesOk(categories) {
		var selectObj = $('SELECT[name="course_category_id"]');
		selectObj.empty();
		$('#s2id_course_category_id .select2-chosen').text('');
		$.each(categories, function (k, v) {
			var o = new Option(v.name, v.id);
			$(o).html(v.name);
			selectObj.append(o);
		});
		selectObj.val($('SELECT[name="course_category_id"] option:first').val());
		selectObj.select2();
		selectObj.trigger('change');
	}

	$(document).on('change', '#course_category_id', function () {
		getRemoteData(
				"/api/question/getsubcategories",
				{
					course_category_id: $('SELECT[name="course_category_id"]').val(),'mode':'add'
				},
				getSubCategoryOk,
				getRemoteDataFail
		);
	});

	function getSubCategoryOk(data) {
//        console.log('subcategories:',data);
		var selectObj = $('SELECT[name="course_subcategory_id"]');
		selectObj.empty();
		$('#s2id_course_subcategory_id .select2-chosen').text('');
		$.each(data, function (k, v) {
			var o = new Option(v.name, v.id);
			$(o).html(v.name);
			selectObj.append(o);
		});
		selectObj.val($('SELECT[name="course_subcategory_id"] option:first').val());
		selectObj.select2();
		selectObj.trigger('change');
	}

	$(document).on('change', '#course_subcategory_id', function () {
		getRemoteData(
				"/api/question/getcourses",
				{
					course_category_id: $('SELECT[name="course_category_id"]').val(),
					course_subcategory_id: $('SELECT[name="course_subcategory_id"]').val(),'mode':'add'
				},
				getCourseOk,
				getRemoteDataFail
		);
	});

	function getCourseOk(data) {
//        console.log('courses:',data);
		var selectObj = $('SELECT[name="course_id"]');
		selectObj.empty();
		$('#s2id_course_id .select2-chosen').text('');
		$.each(data, function (k, v) {
			var o = new Option(v.name, v.id, true, true)
			$(o).html(v.name);
			selectObj.append(o);
		});
		selectObj.val($('SELECT[name="course_id"] option:first').val());
		selectObj.select2();
		selectObj.trigger('change');
	}

	$(document).on('change', '#course_id', function () {
		getRemoteData(
				"/api/question/getunits",
				{
					course_id: $('SELECT[name="course_id"]').val(),'mode':'add'
				},
				getUnitOk,
				getRemoteDataFail
		);
	});

	function getUnitOk(data) {
//        console.log('units:',data);
		var selectObj = $('SELECT[name="unit_id"]');
		selectObj.empty();
		$('#s2id_unit_id .select2-chosen').text('');
		$.each(data, function (k, v) {
			var o = new Option(v.title, v.id, true, true)
			$(o).html(v.title);
			selectObj.append(o);
		});
		selectObj.val($('SELECT[name="unit_id"] option:first').val());
		selectObj.select2();
		selectObj.trigger('change');
	}

	function validform() {
		var msg = '';
		if ($('#course_category_id').val() === null || $('#course_category_id').val() === '') {
			msg += "請輸入課程主分類\n";
		}
		if ($('#course_subcategory_id').val() === null || $('#course_subcategory_id').val() === '') {
			msg += "請輸入課程次分類\n";
		}
		if ($('#course_id').val() === null || $('#course_id').val() === '') {
			msg += "請輸入課程名稱\n";
		}
		if ($('#unit_id').val() === null || $('#unit_id').val() === '') {
			msg += "請輸入單元名稱\n";
		}
		if ($('#question').val() === '') {
			msg += "請輸入問題\n";
		}
		$('.answer').each(function (i, e) {
			if ($(this).val() === '') {
				msg += "請輸入選擇" + (i + 1) + "\n";
			}
		});
		if ($('#correct').val() === '') {
			msg += "請輸入答案\n";
		}

		if (msg !== '') {
			alert(msg);
		}
		return msg === '';
	}

	$(document).on('click', '#btnSubmit', function () {
		if (validform()) {
//            console.log('here');
			$('#frmphp').submit();
		}
	});
</script>
