@extends('layouts.app')
@section('title', trans('menu.exam_title'))
@section('content')
	<div class="content">
		<x-content.header title="{{ __('exams.exams') }}" />
		<form id="form"
				name="employee-document-type-form"
				action="{{route('settings.exams.store')}}"
				method="POST"
		>
			@include('exam::exams.form', [
				'edit' => true
			])

			<div class="mt-4 border-top">
				<button type="submit" class="btn btn-success mt-4 btn-save published">
					{{trans('forms.lbl_create')}}
				</button>
				<button type="submit" class="btn btn-info mt-4 btn-save unpublished">
					<span>{{__('forms.lbl_save_as_draft')}}</span>
				</button>
				<a href="{{route('settings.exams.index')}}"  class="btn btn-outline-secondary mt-4">{{trans('forms.lbl_cancel')}}</a>
			</div>
		</form>
    </div>

@stop

@section('footer-script')


    <script type="text/javascript">
		var valArray = [];

        var questionsContainers = $('body').find('div.questions-container');

        function loadQuestions(id) {
			$('#select-all').prop("checked", false);
			$('.total-marks-div').show();
            questionsContainers.show();
			if(PDTable == null) {
	            PDDataTable({
	                url: "{{route('settings.exam.subject.questions.index')}}" + "?subject_id=" + id + "&status=1&exam_id=" + "{{$exam->id}}",
	                columns:[
	                    { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
						{ data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, className: "text-center" },
						{ data: 'question', name: 'question'},
	                    { data: 'marks', name: 'marks', className: "marks"},
	                    { data: 'type', name: 'type'},
	                ],
	                order : [1, 'asc'],
	                searching : false,
	                paginate: false
	            });
			} else {
				PDTable.ajax.url("{{route('settings.exam.subject.questions.index')}}" + "?subject_id=" + id + "&status=1&exam_id=" + "{{$exam->id}}").load();
			}
        }

        loadQuestions("{{$exam->exam_subject_id}}");

        $('select[name="exam_subject_id"]').on('change', function (event) {
            loadQuestions($(this).val());
        });


		if ({{ $marks }}) {
			var sum = {{ $marks }};
		} else {
			var sum = 0;
		}
		
		$(document).ready(function(){

			$('.total-marks').text({{ $marks }});
		});
		$('body').on('change', '.mark-checkbox', function (e) {

			if($(this).is(':checked')){
				$('.total-marks-div').show();

				var data = $(this).closest('tr').find('.marks').text();
				
				sum = sum + parseInt(data);
				$('.total-marks').text(sum);

			} else {
				var data = $(this).closest('tr').find('.marks').text();
				
				sum = sum - parseInt(data);
				$('.total-marks').text(sum);
			}


			var value = $(this).val();
			if(this.checked) {
				valArray.push(value);
			} else {
				valArray.pop(value);
			}
		});
		$('#select-all').click(function(){
			if($(this).is(':checked')){
				$('.total-marks-div').show();
				var sumAll = 0;
				$('.marks').each(function() {
				sumAll += +$(this).text()||0;
				});
				sum = sumAll;
				$('.total-marks').text(sumAll);
				
			} else {
				sum = 0;
				$('.total-marks-div').hide();
			}
		});
		$(".btn-save").on("click", function(event) {
			if($("#form").valid()){
	            if ( $(this).hasClass('published') ) {
	                $('body').find('input[name="status"]').val('published');
	            } else if( $(this).hasClass('unpublished')){
					$('body').find('input[name="status"]').val('unpublished');
				}
			}
			event.preventDefault();
			var oTable = $('#datatable').dataTable();
            var sData = $('input', oTable.fnGetNodes()).serialize();
			dataOld = $('#form').serialize();
			var data = dataOld + '&' + sData;

			PDRequest({
				type    : "POST",
				url     : $("#form").prop("action"),
				data    : data,
				event   : event
			}).then((response) => {
				if(response.status == "success"){
                	window.location = "{{route('settings.exams.index')}}";
				}
            });
		});
		
    </script>
@stop