@extends('layouts/ums_layout')
@section('title', '| New Trimester')
@section('content')

<div class="row add-data-form" style="padding-bottom: 1%">
    <div class="col-md-12">
        <div class="col-md-2"></div>
        <div class="col-md-8 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{url('ums/addCourseExamSettingsView/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                </i>Course Exam Settings List</a>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-heading">
                    <div class="panel-title">Course Exam Settings</div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-8">
                                {!! Form::open(array('url' => '', 'id' => 'examSettingsForm', 'role' => 'form',
                                'class'=>'form-horizontal form-groups')) !!}
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-9">
                                            <label>Trimester</label>
                                            <select class="form-control" id="trimesterId" name="trimesterId" >
                                                <option value="">PLease Select Trimester</option>
                                                @foreach($trimesters as $trimester)
                                                <option value="{{$trimester->id}}">{{$trimester->trimesterName}}</option>
                                                @endforeach
                                            </select>
                                            <p id='trimesterE' style="max-height:3px;color:red;"></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-9">
                                            <label>Program</label>
                                            <select class="form-control" id="programId" name="program" required>
                                                <option value="">PLease Select Program</option>
                                                @foreach($programs as $program)
                                                <option value="{{$program->id}}">{{$program->name}}</option>
                                                @endforeach
                                            </select>
                                            <p id='programE' style="max-height:3px;color:red;"></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-9">
                                            <label>Course</label>
                                            <select class="form-control" id="courseId" name="courseId" required>

                                            </select>
                                            <p id='courseE' style="max-height:3px;color:red;"></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-9">
                                            <label>Full Marks</label>
                                            <input type="number" class="form-control" name="fullMarks" id="fullMarksId" placeholder="Please input full marks" required/>                                           
                                            <p id='fullMarksE' style="max-height:3px;color:red;"></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <label>Exam Name</label>
                                            {!! Form::text('examName', $value = null, ['class' =>
                                                'form-control', 'id' => 'examId', 'type' => 'text',
                                                'placeholder' => 'Enter Exam Name']) !!}
                                                <p id='examNameE' style="max-height:3px;color:red;"></p>
                                            </div>

                                            <div class="col-sm-3">
                                                <label>Marks</label>
                                                {!! Form::number('marks', $value = null, ['class' => 'form-control',
                                                    'id' => 'marksId', 'type' => 'text', 'placeholder' => 'Enter 
                                                    Marks']) !!}
                                                    <p id='marksE' style="max-height:3px;color:red;"></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-sm-8 text-right">
                                                    <button type="button"  onclick="addFunction();" style="margin-right:10px;background:#8dc63f;color:white">Add
                                                    Subjects</button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="row" style="padding-left:15px;padding-right:15px;width:80%">

                                                <table class="table table-bordered" id="degreeTable" style="color:black;">
                                                    <thead>
                                                        <tr>
                                                            <th>Exam Name</th>
                                                            <th>Marks</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>

                                                    </tbody>
                                                </table>

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-sm-12 text-left">
                                                    {!! Form::submit('submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                                                    {{ Form::reset('Reset', ['class' => 'btn btn-warning']) }}
                                                    <a href="{{url('')}}" class="btn btn-danger closeBtn">Close</a>
                                                    <span id="success" style="color:green; font-size:16px;" class="pull-right"></span>
                                                </div>
                                            </div>
                                        </div>
                                        {!! Form::close() !!}
                                    </div>
                                    <div class="col-md-4 emptySpace vert-offset-top-4"><img src="{{ URL::to('/') }}/images/image15.png"
                                        width="90%" height="" style="float:right"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="footerTitle" style="border-top:1px solid white"></div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
            </div>
            <script>
                var educationDateCount = 0;
                var educationData = [];
                var filledMarks   = 0;
                function addFunction(){

                    var degreeData = {};
                    var examName   = $("#examId").val();
                    var marksName  = $("#marksId").val();


                    var marksChecker  = parseInt(filledMarks)+parseInt(marksName);
                    var fullMarks     = $("#fullMarksId").val();

                    if (examName == "") {
                        $("#examNameE").text("Please input exam name");
                    } 
                    else if(!isNaN(examName))
                    {
                       $("#examNameE").text("Exam name should not to be a number"); 
                   }
                   else if (marksName == "") {
                    $("#marksE").text("Please input marks");
                }
                else if ($("#fullMarksId").val() == "") {
                    $("#fullMarksE").text("Please input full marks");
                }
                else if (parseInt(marksChecker) > parseInt(fullMarks))
                {
                    alert("Marks has excceded Full Marks");
                }
                else{
                    $("#fullMarksId").attr("readonly",true);
                    degreeData.examName = examName;
                    degreeData.marksName = marksName;

                    educationData.push(degreeData);
                    $('#degreeTable tbody').empty();
                    filledMarks = 0;
                    $.each(educationData, function (index, value) {
                        $('#degreeTable tbody').append('<tr class="child"><td>' + value.examName + '</td><td>' + value.marksName + '</td><td><span class="glyphicon glyphicon-trash" deleteId ="' + index + '"onclick ="removeFunction(this);" aria-label="Close" ></span></td></tr>');
                        filledMarks += parseInt(value.marksName);

                    });

                    $('#examId').val("");
                    $('#marksId').val("");
                    $("#fullMarksE").empty();
                    educationDateCount++;
                }

            }

            function removeFunction(event) {

                filledMarks   = 0;
                $(event).parent().parent().remove();
                var deleteId = $(event).attr('deleteId');
                educationData.splice(deleteId, 1);
                $('#degreeTable tbody').empty();
                $.each(educationData, function (index, value) {
                    $('#degreeTable tbody').append('<tr class="child"><td>' + value.examName + '</td><td>' + value.marksName + '</td><td><span class="glyphicon glyphicon-trash" deleteId ="' + index + '"onclick ="removeFunction(this);" aria-label="Close" ></span></td></tr>');
                    filledMarks += parseInt(value.marksName);
                });

            }

            $(document).ready(function(){
                $("#programId").change(function(){
                    var programId    =  $("#programId").val();
                    var trimesterId  =  $("#trimesterId").val();
                    $.ajax({
                        type: 'post',
                        url: './programCourse',
                        data: {programId:programId,trimesterId:trimesterId},
                        dataType: 'json',
                        success: function (filteredPrograms) {
                            $("#courseId").empty();
                            $('#courseId').append('<option>Please Choose Course</option>');
                            $('#courseId').append('<option value="0">All</option>');
                            $.each(filteredPrograms, function (index, value) {
                                $('#courseId').append('<option value='+value.courseId+'>'+value.title+'</option>');
                            });  
                        },
                        error: function (data) {
                        }
                    });
                });

                    // $("#trimesterId").change(function(){
                    //     var trimesterId  =  $("#trimesterId").val();
                    //     $.ajax({
                    //         type: 'post',
                    //         url: './applyProgramFilteringByTrimesters',
                    //         data: {trimesterId:trimesterId},
                    //         dataType: 'json',
                    //         success: function (filteredPrograms) {
                    //             $("#programId").empty();
                    //             $('#courseId').append('<option>Please Choose Course</option>');
                    //             $.each(filteredPrograms, function (index, value) {
                    //                 $('#programId').append('<option value='+value.id+'>'+value.name+'</option>');
                    //             });  
                    //         },
                    //         error: function (data) {
                    //         }

                    //     });
                    // });
                });

            $('#examSettingsForm').submit(function( event ) {
                event.preventDefault();
                $('#trimesterE').empty();
                $('#programE').empty();
                $('#courseE').empty();
                $('#fullMarksE').empty();
                var formData      = $('#examSettingsForm').serialize();   
                $.ajax({
                    type: 'post',
                    url: './addExamSettingsItem',
                    data:  {formData:formData ,educationData:educationData},
                    dataType: 'json',
                    success: function( _response ){
                        console.log(_response);
                        if (_response.errors) {
                            if(_response.errors["trimesterId"])
                            { 
                                $("#trimesterE").append(_response.errors["trimesterId"]);
                            }
                            else if(_response.errors["program"])
                            {  
                                $("#programE").append(_response.errors["program"]);
                            }
                            else if(_response.errors["courseId"])
                            {    
                                $("#courseE").append(_response.errors["courseId"]);
                            }
                            else if(_response.errors["fullMarks"])
                            {    
                                $("#fullMarksE").append(_response.errors["fullMarks"]);
                            }
                        }
                        else if(_response.status==true)
                        {
                          swal({
                            title:  _response.message,
                            text: "Success",
                            icon: "success",
                            button: "okay",
                        });
                          window.location.href="./addCourseExamSettingsView";
                      }
                      else
                      {
                          swal({
                            title: _response.message,
                            text: "Failed",
                            icon: "error",
                            button: "okay",
                        });
                      }
                  }         
              });
            });
        </script>
        @endsection