@extends('layouts.master')

@section('title', $course->lang('name'))
@section('subtitle', __('tr.CourseInfo') )
@section('titleicon', "icon-file-text")

<style>
	.filterHeader>input{
		background:white;
		width:100%;
		border-top:1px solid black;
		padding:5px;
		color:green;
		font-weight:bold;
		margin-top:5px;
	}

	.htDimmed{
		color: gray !important;
		font-weight: bold !important;
	}

	tr { font-size: 14px; }

</style>

@section('advancedaction')
    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 mt-2">
        <div class="btn-group float-right">
            <div class="btn-group">
                <button type="button" class="btn btn-primary">@lang('tr.More')</button>
                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-start" style="position: absolute; transform: translate3d(71px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
                    <a href="{{ route('course_specifications_pdf', ['course'=> $course->id]) }}" class="dropdown-item" target="_blank">@lang('tr.Course Specifications PDF')</a>
                </div>
            </div>
        </div>
    </div>
@stop

@section('content')
	<div class="main-content">

		@php($isPassFail = $study->committee->isPassFail())

		<!--Dr. Watheq request after Dr. Ibrahim confirmation in 2021/6/4 to show work degrees for non published courses similar to undergraduates-->
		@if($course->getBylaw->type=='undergraduate' || $course->getBylaw->type=='postgraduate' || $study->committee->isPublished())
		{{--  Student Grades Cards  --}}
		<div class="row">			
			@if(!$isPassFail && !$course->project) 
				@foreach($degreesData as $key => $degreeData)
					@if($key!="practical")
					<div class="col-lg-3"> 
						<div class="card">
							<div class="card-body">
								<div class="stats-widget">
									<div class="stats-widget-header">
										<i class="icon-clipboard2"></i>
									</div>
									<div class="stats-widget-body">
										<ul class="row no-gutters">
											<li class="col-xl-7 col-lg-7 col-md-7 col-sm-7 col" style="text-align: left; font-size: 150%;">{{ $degreeData->label }}</li>
											<li class="col-xl-5 col-lg-5 col-md-5 col-sm-5 col" style="text-align: right; font-size: 150%;">{{ ($degreeData->degree===null)?'-':$degreeData->degree }} / {{ $degreeData->max_value }}</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					@endif
				@endforeach
			@endif
			@if($study->committee->isPublished()) 
				<div class="col-lg-3"> 
					<div class="card">
						<div class="card-body">
							<div class="stats-widget">
								@if($study->isGradeFinal())
								<a href="#" class="stats-label" style="color:white;font-weight:bold" data-toggle="tooltip" data-placement="top" title="" data-original-title="Control Status">Final</a>
								@else
								<a href="#" class="stats-label danger" data-toggle="tooltip" data-placement="top" title="" style="color:yellow;font-weight:bold" data-original-title="Control Status">Not Final</a>
								@endif
								<div class="stats-widget-header">
									<i class="icon-clipboard2"></i>
								</div>
								<div class="stats-widget-body">
									<ul class="row no-gutters">
										<li class="col-xl-5 col-lg-5 col-md-5 col-sm-5 col" style="text-align: left; font-size: 150%;">
											@lang("tr.Total")
										</li>										
										<li class="col-xl-7 col-lg-7 col-md-7 col-sm-7 col" style="text-align: right; font-size: 150%;">{{ $study->displayLatestGrade() }} @if(!$isPassFail) {!!$study->isExamFail()?'<font color="red">*</font>':''!!} {!!$study->is48OverFail()?'<font color="red">**</font>':''!!} @endif</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			@endif
			@if($study->committee->isFreezed()) 
				<div class="col-lg-3"> 
					<div class="card">
						<div class="card-body">
							<div class="stats-widget">
								<div class="stats-widget-header">
									<i class="icon-clipboard2"></i>
								</div>
								<div class="stats-widget-body">
									<ul class="row no-gutters">
										<li class="col-xl-5 col-lg-5 col-md-5 col-sm-5 col" style="text-align: left; font-size: 150%;">
											@lang("tr.Total")
										</li>										
										<li class="col-xl-7 col-lg-7 col-md-7 col-sm-7 col" style="text-align: right; font-size: 150%;">@lang('tr.Freezed')</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			@endif

			@if($totalAttendances > 0)
				<div class="col-lg-3"> 
					<div class="card">
						<div class="card-body">
							<div class="stats-widget">
								<div class="stats-widget-header">
									<i class="icon-clipboard2"></i>
								</div>
								<div class="stats-widget-body">
									<ul class="row no-gutters">
										<li class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col" style="text-align: left; font-size: 150%;">
											@lang("tr.Attendance")
										</li>										
										<li class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col" style="text-align: right; font-size: 150%;">{{ $attendancePercentage }}% / {{ $totalAttendances }}</li>										
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			@endif

		</div>
		@endif
		{{--  Student Grades Cards  --}}

		@if($study->committee->isPublished() && $study->isExamFail() && !$isPassFail)
		<div class="alert" style="font-size: 130%">
            @php($minPercentage = $study->course->getMinimumSuccessPercentage() * 100)
			<font color="red">*</font> The failure because you got less than {{$minPercentage}}% in the exam.
		</div>
		@endif

		@if($study->committee->isPublished() && $study->is48OverFail() && !$isPassFail)
		<div class="alert" style="font-size: 130%">
			<font color="red">**</font> total percentage is more or equal 48%.
		</div>
		@endif

		{{--  Course Data  --}}		
		<div class="card">
			<div class="card-header">@lang('tr.CourseInfo')</div>
			<div class="card-body">
				<table class="table table-striped m-0">
					<tbody>
					<tr>
						<th scope="row" width="150px">@lang('tr.Code')</th>
						<td>{{ $course->short_name }}</td>
					</tr>
					<tr>
						<th scope="row">@lang('tr.EnglishName')</th>
						<td>{{ $course->en_name }}</td>
					</tr>
					<tr>
						<th scope="row">@lang('tr.ArabicName')</th>
						<td><span style="direction: rtl" >{{ $course->ar_name }}</span></td>
					</tr>
					<tr>
						<th scope="row">@lang('tr.Term')</th>
						<td>{{ $course->termType() }}</td>
					</tr>
					<tr>
						<th scope="row">@lang('tr.Department')</th>
						<td>{{ $course->department->lang('name') }}</td>
					</tr>
					<tr>
						<th scope="row">@lang('tr.Bylaw')</th>
						<td>{{ $course->bylaw }}</td>
					</tr>
                    <tr>
                        <th scope="row" style="font-size:14px;">@lang('tr.Prerequisites')</th>
                        <td style="direction: ltr">{{ $course->prerequisites }}</td>					
                    </tr>
                    <tr>
                        <th scope="row" style="font-size:14px;">@lang('tr.Postrequisites')</th>
                        <td>
                            @foreach ($course->postRequisites() as $id => $code)
                                <a href="{{route('show_course',['course'=>$id])}}" target="_blank">{{$code}}</a>,
                            @endforeach
                        </td>
                    </tr>
					<tr>
						<th scope="row" style="font-size:14px;">@lang('tr.Grades') (W/O/E)</th>
						<td style="direction: ltr">
							<B>Total ( {{ $course->max_total }} ) </B> = 
							@if($course->term_type==0)
								Final [ W( <B>{{ $course->max_final_work }}</B> => @if($course->isCreditHours())M:{{ ($course->max_midterm)?$course->max_midterm:0 }} + A:{{ ($course->max_activities)?$course->max_activities:0 }} + P:{{ ($course->max_practical)?$course->max_practical:0 }} @endif) + O( <B>{{ $course->max_final_oral }}</B> ) + E( <B>{{ $course->max_final_exam }}</B> ) ]
							@else
								First [ W( <B>{{ $course->max_first_work }}</B> ) + O( <B>{{ $course->max_first_oral }}</B> ) + E( <B>{{ $course->max_first_exam }}</B> ) ] + Final [ W( <B>{{ $course->max_final_work }}</B> ) + O( <B>{{ $course->max_final_oral }}</B> ) + F( <B>{{ $course->max_final_exam }}</B> ) )
							@endif
							@if($course->term_type==0)
								- <B>Credit Hours ({{$course->credit_hours}})</B>
							@endif
						</td>
					</tr>
					<tr>
						<th scope="row" style="font-size:14px;">@lang('tr.Hours') (L/O/W)</th>
						<td style="direction: ltr">
							@if($course->term_type==0)
								Final ( {{ $course->final_lecture }} - {{ $course->
								final_tutorial }} - {{ $course->final_laboratory }} )
							@else
								First ( {{ $course->first_lecture }} - {{ $course->
								first_tutorial }} - {{ $course->first_laboratory }} )
								Final ( {{ $course->final_lecture }} - {{ $course->
								final_tutorial }} - {{ $course->final_laboratory }} )
							@endif
						</td>
					</tr>
					@if(mb_strlen($course->en_describtion)>0)
						<tr>
							<td colspan="2">
								<B>English Describtion</B><BR/><BR/>
								{{ $course->en_describtion }}
							</td>
						</tr>
					@endif
					@if(mb_strlen($course->ar_describtion)>0)
						<tr>
							<td colspan="2">
								<B>Arabic Describtion</B><BR/><BR/>
								{{ $course->ar_describtion }}
							</td>
						</tr>
					@endif
					@if(mb_strlen($course->objectives)>0)
						<tr>
							<td colspan="2">
								<B>Course Aims</B><BR/><BR/>
								{{ $course->objectives }}
							</td>
						</tr>
					@endif
					@if(mb_strlen($course->references)>0)
						<tr>
							<td colspan="2">
								<B>@lang('tr.References')</B><BR/><BR/>
								<ul>
									@foreach($course->allReferences() as $reference)
										<li>{{ $reference }}</li>
									@endforeach
								</ul>
							</td>
						</tr>
					@endif	
					@if($study->bn)
					<tr>
						<th scope="row">@lang('tr.Class BN')</th>
						<td>{{ $study->bn }}</td>
					</tr>
					@endif
					</tbody>
				</table>
			</div>
		</div>
		{{--  Course Data  --}}

		@if($module)
		@php($moduleSample = $module->sample($study->committee->term->id, auth()->id(), $course->id))
		@php($style = '')
		@php($status = "draft")
		@php($notes = null)
		@if($moduleSample && ($moduleSample->status&'App\ModuleSample'::STATUS_REJECTED))
			@php($style = 'text-decoration: line-through; color:red')
			@php($notes = $moduleSample->notes)
			@php($status = "rejected")
		@elseif($moduleSample && ($moduleSample->status&'App\ModuleSample'::STATUS_ACCEPTED))
			@php($status = "accepted")
			@php($style = 'text-decoration: underline; color:green')
		@elseif($moduleSample)
			@php($notes = $moduleSample->notes)
		@endif
		<div class="card">
			<div class="card-header">East London</div>	
			<div class="card-body">
				@if($notes)
					<div class="alert custom alert-danger">
						<i class="icon-warning2"></i>{{$notes}}
					</div>									
				@endif
				<table class="table table-striped m-0">
					<tbody>
						<tr>
							<th scope="row" width="150px">Module</th>
							<td>{{ $module->code }}: {{ $module->name }}</td>
						</tr>
						<tr>
							<th scope="row">Program</th>
							<td>{{ $module->externalProgram->name }}</td>
						</tr>
						<tr>
							<th scope="row" style="vertical-align: top;">Activites Report</th>
							<td>
								@php($title = $module->genFileName('activities', $study->committee->term, $course->short_name, auth()->user()->code))
                                @if ($study->committee->isResit())
                                    @php($title = $module->genFileName('activities', $study->committee->term, $course->short_name, auth()->user()->code,true))
                                @endif
                                
								@php($file = $data->activities->findChildByTitle($title))
								@if($file)
								<a target="_blank" style='{{$style}}' href="{{ route('secure_download_file')."?sid=".$file->secret() }}">{{$file->name()}}</a>&nbsp;
									@if($status=='accepted')
										<span class='badge badge-pill badge-success'>@lang('tr.Accepted')</span>
									@elseif($status=='rejected')
										<span class='badge badge-pill badge-danger'>@lang('tr.Rejected')</span>
									@elseif($status=='draft')
										<span class='badge badge-pill badge-warning'>@lang('tr.Under Revision')</span>
									@endif
								@endif
								@if(empty($file) || $status!='accepted')
                                    <input type="file" id="upload_files_input" accept=".pdf" style="display: none;" />

                                    <button 
                                        id="upload_files" 
                                        type="button" 
                                        class="btn btn-sm btn-secondary float-{{ right() }}" 
                                        action='{{ route('upload_pdf_files', ['archive' => $data->activities->id]) . "?replace=yes&content_type=activities&title=" . $title }}'>
                                        @if($file) Update @else Upload @endif
                                        <span id="upload_files_progress_text"></span>
                                    </button>
								@endif
							</td>
						</tr>
					</tbody>
				</table>		
			</div>	
		</div>
		@endif

		<div class="card">
            <div class="card-header">
                <a data-toggle="collapse" href="#collapseOutcomeCard" aria-expanded="true" aria-controls="collapseInfoCard" class="">
                    <span class="icon-media-play"></span> @lang('tr.Course Outcomes')
                </a>
            </div>
            <div id="collapseOutcomeCard" class="collapse show" role="tabpanel" aria-labelledby="infoCardheading" style="">
                <div class="card-body">
                    
                    <table id="course_outcomes" class="display" style="width: 100%;" role="grid" aria-describedby="example_info">
                        <thead>
                            <tr role="row">
                                <th width="10%">@lang('tr.Type')</th>
                                <th width="15%">@lang('tr.Group')</th>
                                <th width="55%">@lang('tr.Learning Outcome')</th>
                                <th width="20%">@lang('tr.Plans Outcome')</th>
                            </tr>
                        </thead>                                
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" >
                <a data-toggle="collapse" href="#collapseTopicCard" aria-expanded="true" aria-controls="collapseInfoCard" class="">
                    <span class="icon-media-play"></span> @lang('tr.Course Topics')
                </a>

                <span id="statsLecture">
                    <span class="badge badge-pill badge-chief-solid total" id="lectureHours"></span>
                </span>
                <span id="statsTutorial">
                    <span class="badge badge-pill badge-vice-chief-solid total" id="tutorialHours"></span>
                </span>
                <span id="statsPractical">
                    <span class="badge badge-pill badge-proctor-solid total" id="practicalHours"></span>
                </span>
            </div>
            <div id="collapseTopicCard" class="collapse show" role="tabpanel" aria-labelledby="infoCardheading" style="">
                <div class="card-body">
                    <table id="course_topics"  class="display" style="width: 100%;" role="grid" aria-describedby="example_info">
                        <thead>
                            <tr role="row">
                                <th width="5%">@lang('tr.Order')</th>
                                <th width="55%">@lang('tr.Contents')</th>
                                <th width="5%">@lang('tr.Lecture Hours')</th>
                                <th width="5%">@lang('tr.Tutorial Hours')</th>
                                <th width="5%">@lang('tr.Practical Hours')</th>
                                <th width="25%">@lang('tr.Outcomes')</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <a data-toggle="collapse" href="#collapseMethodCard" aria-expanded="true" aria-controls="collapseInfoCard" class="">
                    <span class="icon-media-play"></span> @lang('tr.Teaching and Learning Methods')
                </a>
            </div>
            <div id="collapseMethodCard" class="collapse show" role="tabpanel" aria-labelledby="infoCardheading" style="">
                <div class="card-body">
                    <table id="course_methods" class="display" style="width: 100%;" role="grid" aria-describedby="example_info">
                        <thead>
                            <tr role="row">
                                <th width="60%">@lang('tr.Title')</th>
                                <th width="40%">@lang('tr.Outcomes')</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <a data-toggle="collapse" href="#collapseAssessmentCard" aria-expanded="true" aria-controls="collapseInfoCard" class="">
                    <span class="icon-media-play"></span> @lang('tr.Assessment and Feedback Strategy')
                </a>
                
                <span id="stats_total_degree">
                    <span class="badge badge-pill badge-chief-solid total" id="total_degree"></span>
                </span>
            </div>
            <div id="collapseAssessmentCard" class="collapse show" role="tabpanel" aria-labelledby="infoCardheading" style="">
                <div class="card-body">
                    <table id="course_assessments" class="display" style="width: 100%;" role="grid" aria-describedby="example_info">
                        <thead>
                            <tr role="row">
                                <th width="35%">@lang('tr.Title')</th>
                                <th width="20%">@lang('tr.Week')</th>
                                <th width="10%">@lang('tr.Degree')</th>
                                <th width="35%">@lang('tr.Outcomes')</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <a data-toggle="collapse" href="#collapseProgramCard" aria-expanded="true" aria-controls="collapseInfoCard" class="">
                    <span class="icon-media-play"></span> @lang('tr.Programs')
                </a>
            </div>
            <div id="collapseProgramCard" class="collapse show" role="tabpanel" aria-labelledby="infoCardheading" style="">
                <div class="card-body">
                    <table id="course_programs" class="display" style="width: 100%;" role="grid" aria-describedby="example_info">
                        <thead>
                            <tr role="row">
                                <th width="70%">@lang('tr.Plan')</th>
                                <th width="20%">@lang('tr.Level')</th>
                                <th width="10%">@lang('tr.Semester')</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
	</div>
@endsection

@section('pagejs')
<script type="text/javascript">
	$(document).ready(function() {
		@if($module)
            
            $("#upload_files").on("click", function() {
                $("#upload_files_input").click();
            });

            $("#upload_files_input").on("change", function(event) {
                const file = event.target.files[0];

                if (!file) {
                    errorBox("No file selected.");
                    return;
                }

                if (file.type !== "application/pdf") {
                    errorBox("Please upload a valid PDF file.");
                    return;
                }

                const formData = new FormData();
                formData.append("file", file);
                formData.append("_token", '{{ csrf_token() }}');

                $.ajax({
                    url: $("#upload_files").attr("action"),
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    xhr: function() {
                        const xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function(e) {
                            if (e.lengthComputable) {
                                const percentComplete = (e.loaded / e.total) * 100;
                                $('#upload_files_progress_text').text(`Uploading... ${Math.round(percentComplete)}%`);
                            }
                        }, false);
                        return xhr;
                    },
                    success: function(data) {
                        if (data.isSuccess) {
                            const url = '{{ route('update_module_course', ['module' => $module->id, 'course' => $course->id, 'term' => $study->committee->term_id]) }}';
                            $.post(url, { "_token": '{{ csrf_token() }}' }, function() {
                                infoBox("Upload successful!", function() {
                                    location.reload();
                                });
                            });
                        } else {
                            errorBox(data.error || "An error occurred during upload.");
                        }
                    },
                    error: function(xhr, status, error) {
                        errorBox("Failed to upload. Please try again.");
                        console.error(error);
                    }
                });
            });

        @endif

	    	var outcomeTable = $('#course_outcomes').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                scrollX: true,
                stateSave: false,
                paging: false,
                info: false,
                rowId: 'id',
                language: dataTableLanguage,
                "ajax": {
                    "url": '{{ route('course_file', ['course'=>$course->id, 'handle'=>'outcomes']) }}',
                    "dataSrc": "data.data"
                },
                'columnDefs': [
                    { "className": 'text-center', "targets": [0] },
                ],
                "columns": [
                    { "data": "final_modifier", "name": "final_modifier"},
                    { "data": "outcome_type_name", "name": "outcome_type_name"},
                    { "data": "outcome", "name": "outcome"},
                    { "data": "competencies", "name": "competencies",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";

                            if(oData.competencies) {

                                Object.entries(oData.competencies).forEach(function(value) {

                                    html += "<span title='"+ value[1].outcome +"' class='badge badge-pill badge-proctor'>"+value[1].final_modifier+"</span> ";
                                });

                                html = html.substring(0, html.length - 2);
                            }

                            $(nTd).html(html);
                        }
                    },
                ],
            });

            var topicTable = $('#course_topics').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                scrollX: true,
                stateSave: false,
                paging: false,
                info: false,
                rowId: 'id',
                language: dataTableLanguage,
                "ajax": {
                    "url": '{{ route('course_file', ['course'=>$course->id, 'handle'=>'topics']) }}',
                    "dataSrc": "data.data"
                },
                'columnDefs': [
                    { "className": 'text-center', "targets": [0 , 2, 3, 4] },
                ],
                "columns": [
                    { "data": "order", "name": "order"},
                    { "data": "lecture_content", "name": "lecture_content",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";

                            if(oData.lecture_content)
                                html += '<span class="font-weight-bold">Lecture</span>: ' + oData.lecture_content + '<br>';

                            if(oData.tutorial_content)
                                html += '<span class="font-weight-bold">Tutorial</span>: ' + oData.tutorial_content + '<br>';

                            if(oData.practical_content)
                                html += '<span class="font-weight-bold">Practical</span>: ' + oData.practical_content + '<br>';

                            $(nTd).html(html);
                        }
                    },
                    { "data": "lecture_hours", "name": "lecture_hours"},
                    { "data": "tutorial_hours", "name": "tutorial_hours"},
                    { "data": "practical_hours", "name": "practical_hours"},
                    { "data": "id", "name": "id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";

                            if(oData.outcomes) {

                                Object.entries(oData.outcomes).forEach(function(value) {

                                    html += "<a href='#"+value[1].type+"' title='"+ value[1].outcome +"' class='badge badge-pill badge-proctor'>"+value[1].final_modifier +'</a> ';
                                });

                                html = html.substring(0, html.length - 2);
                            }

                            $(nTd).html(html);
                        }
                    },
                ]
            });

            function showStatistics(item, value, message) {

                item.find('.total').html(value + message);
            }

            topicTable.on('xhr.dt', function ( e, settings, json, xhr ) {

                if(json.statistics){
                    amount = (json.statistics.lectureHours) ? json.statistics.lectureHours : 0;
                    showStatistics($('#statsLecture'), amount, " Lecture Hours");

                    amount = (json.statistics.tutorialHours) ? json.statistics.tutorialHours : 0;
                    showStatistics($('#statsTutorial'), amount, " Tutorial Hours");

                    amount = (json.statistics.practicalHours) ? json.statistics.practicalHours : 0;
                    showStatistics($('#statsPractical'), amount, " Practical Hours");
                }
            });

            var methodTable = $('#course_methods').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                scrollX: true,
                stateSave: false,
                paging: false,
                rowId: 'id',
                language: dataTableLanguage,
                "ajax": {
                    "url": '{{ route('course_file', ['course'=>$course->id, 'handle'=>'methods']) }}',
                    "dataSrc": "data.data"
                },
                "columns": [
                    { "data": "title", "name": "title"},
                    { "data": "id", "name": "id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";

                            if(oData.outcomes) {

                                Object.entries(oData.outcomes).forEach(function(value) {

                                    html += "<a href='#"+value[1].type+"' title='"+ value[1].outcome +"' class='badge badge-pill badge-proctor'>"+value[1].final_modifier +'</a> ';
                                });

                                html = html.substring(0, html.length - 2);
                            }

                            $(nTd).html(html);
                        }
                    },
                ]
            });

            var assessmentTable = $('#course_assessments').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                scrollX: true,
                stateSave: false,
                paging: false,
                info: false,
                rowId: 'id',
                language: dataTableLanguage,
                "ajax": {
                    "url": '{{ route('course_file', ['course'=>$course->id, 'handle'=>'assessments']) }}',
                    "dataSrc": "data.data"
                },
                "columns": [
                    { "data": "title", "name": "title"},
                    { "data": "week", "name": "week"},                    
                    { "data": "degree", "name": "degree"},
                    { "data": "id", "name": "id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";

                            if(oData.outcomes) {

                                Object.entries(oData.outcomes).forEach(function(value) {

                                    html += "<a href='#"+value[1].type+"' title='"+ value[1].outcome +"' class='badge badge-pill badge-proctor'>"+value[1].final_modifier +'</a> ';
                                });

                                html = html.substring(0, html.length - 2);
                            }
                         
                            $(nTd).html(html);
                        }
                    },
                ]
            });

            assessmentTable.on('xhr.dt', function ( e, settings, json, xhr ) {

                if(json.statistics){
                    total = (json.statistics.total_degree) ? json.statistics.total_degree : 0;
                    showStatistics($('#stats_total_degree'), "Total Degree: ", total);
                }
            });

            var programTable = $('#course_programs').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                scrollX: true,
                stateSave: false,
                paging: false,
                info: false,
                rowId: 'id',
                language: dataTableLanguage,
                "ajax": {
                    "url": '{{ route('course_file', ['course'=>$course->id, 'handle'=>'programs']) }}',
                    "dataSrc": "data.data"
                },
                "columns": [         
                    { "data": "id", "name": "id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";
                            if(oData.bylaw)
                                html += oData.bylaw + ', '
                            if(oData.year_id<100)
                                html += 'Year ( ' + oData.year_id + ' )' + ', ';
                            if(oData.en_program)
                                html += oData.en_program + ', '
                            if(oData.en_minor)
                                html += oData.en_minor
                            
                            $(nTd).html(html);
                        }
                    },
                    { "data": "level_name", "name": "level_name"},
                    { "data": "semester", "name": "semester"},
                ]
            });
	});
</script>	
@endsection