@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/viewCourseMarksSummary')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
        </i>Marks List</a>
      </div>

      <div class="panel panel-default panel-border">
        <div class="panel-heading">
          <div class="panel-title">Add Course Marks</div>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-12">
              <div class="col-md-12">
                {!! Form::open(array('url' => '', 'id' => 'marksForm', 'role' => 'form','class'=>'form-horizontal form-groups')) !!}
                <div class="form-group">                                       
                  {!! Form::label('trimesterLabel', 'Trimester:', ['class' => 'col-sm-3 control-label']) !!}
                  <div class="col-sm-9">
                    <input class ="hidden" name ="fullMarks" id="fullMarks" value="">
                    {{ Form::select('trimesterId',[''=>'Select Trimester']+$trimesters, null, ['id' => 'trimesterId','class' =>'form-control','required'=>'True'])}}
                    <p id='trimesterE' style="max-height:3px;color:red;"></p>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3">Program</label>
                  <div class="col-sm-9">
                    {{ Form::select('program',[''=>'Select Programs']+$programs, null, ['id' => 'programId','class' =>'form-control','required'=>'True'])}}
                    <p id='programE' style="max-height:3px;color:red;"></p>
                  </div>
                </div>

                <div class="form-group">                                       
                  {!! Form::label('courseLabel', 'Course:', ['class' => 'col-sm-3 control-label']) !!}
                  <div class="col-sm-9">
                    {{ Form::select('courseId',[''=>'Select Courses'], null, ['id' => 'courseId','class' =>'form-control','required'=>'True'])}}
                    <p id='courseE' style="max-height:3px;color:red;"></p>
                  </div>
                </div>


                <div class="form-group">
                 <div class="row" style="padding-left:2%;padding-right:3%;">


                  <div class="page-header">
                    <h1>Marks Table</h1>      
                  </div>   
                  <input type="text" class="form-control" id="myInput" onkeyup="myFunction()" placeholder="   Search Students for marks.." title="Type in a name" style="width: 100%;font-size: 16px;padding-left:30px !important;border: 1px solid #ddd;margin-bottom: 12px;height:40px;border:1px solid #708090;">
                  <table class="table table-bordered" id="degreeTable" style="color:black;">
                    <thead>

                    </thead>
                    <tbody id="tableBody">

                    </tbody>
                  </table>

                </div>
              </div>

              <div class="form-group">
               {!! Form::label('submit', ' ', ['class' => 'col-sm-3 control-label']) !!}
               <div class="col-sm-9 text-right">
                 {!! Form::submit('submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                 {{ Form::reset('Reset', ['class' => 'btn btn-warning']) }}
                 <a href="{{url('ums/viewTrimester/')}}" class="btn btn-danger closeBtn">Close</a>
                 <span id="success" style="color:green; font-size:16px;" class="pull-right"></span>
               </div>
             </div>
             {!! Form::close() !!}
           </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>
  function myFunction(){
   var input, filter, table, tr, td, i, txtValue;
   input = document.getElementById("myInput");
   filter = input.value.toUpperCase();
   table = document.getElementById("degreeTable");
   tr = table.getElementsByTagName("tr");
   for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
$(document).ready(function(){


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

       if(filteredPrograms.length < 1)
       { 
        swal({
          title: "Course Teacher is not assigned yet.",
          text: "Error",
          icon: "error",
          button: "okay",
        });
      }

      $.each(filteredPrograms, function (index, value) {
        $('#courseId').append('<option data-sectionId='+value.sectionId+' data-sectionName='+value.sectionName+' value='+value.courseId+'>'+value.title+',   Section - '+value.sectionName+' </option>');
      });  
    },
    error: function (data) {
                    // Handle error
                    //alert(data);
                  //  console.log(data);

                }
              });
  });




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

  //               }

  //             });
  // });



  $("#courseId").change(function(){
    var courseId     =  $("#courseId").val();
    var trimesterId  =  $("#trimesterId").val();
    var programId    =  $("#programId").val();
    var sectionId = $(this).find('option:selected').attr('data-sectionId');
    console.log();
    $("#tableBody").empty();
    $.ajax({
      type: 'post',
      url: './applyProgramFilteringByCourses',
      data: {courseId:courseId,trimesterId:trimesterId,programId:programId,sectionId:sectionId,courseId:courseId},
      dataType: 'json',
      success: function (data) {
        console.log(data);
        if(data["students"].length < 1)
        { 
          swal({
            title: "No students Have been registered this course Yet",
            text: "Error",
            icon: "error",
            button: "okay",
          });
        }

        if(data["examAndMarks"]==null)
        { 
          swal({
            title: "You did not put the exam settings yet",
            text: "Error",
            icon: "error",
            button: "okay",
          });
        }


        $("#fullMarks").val(data["examAndMarks"].fullMarks);
        var html = '';
        $.each(data["students"], function (index, value) {
          html += '<tr class="dynammicTr" studentId="'+value.student_id+'"><td>'+value.fullName+'</td>';
          $.each(data["examAndMarks"].settings_details,function(i,v){
            html += '<td ">'+v.examName+' : <input style="padding:3px;"  type="text" examsettingsdetailsid="'+v.id+'" name="exam[]"></td>'
          });
          html += '<td><input type="button" class="btn btn-success btn-sm individualSave" value="Save"></td></tr>';
          $("#tableBody").html(html);
        });
      },
      error: function (data) {
      }
    });
  });

  $("#degreeTable").on("click",".individualSave",function(event){
    $(this).closest('tr').find("td").each(function(index,td){
      // console.log(index);
      console.log($(this).closest('input').attr("examsettingsdetailsid"));
    });

    // $.each(tds,function(td){
    //   var tdExamDetailsId = td.find("td:nth-child(2)>input").attr("examsettingsdetailsid");
    //   var tdExamMark = td.find("td:nth-child(2)>input").val();
    //   console.log(tdExamDetailsId);
    //   console.log(tdExamMark);
    // });
  });

// $('#txtSearchProdAssign').keypress(function (e) {
//  var key = e.which;
//  if(key == 13)  // the enter key code
//   {
//     $('input[name = butAssignProd]').click();
//     return false;  
//   }
// });

$('#marksForm').submit(function( event ) {
  event.preventDefault();
  $("#trimesterE").empty();
  $("#programE").empty();
  $("#courseE").empty();
  var formData      = $('#marksForm').serialize();   
  var trIndex       = 1;
  var mainArray = [];
  $('#tableBody  > tr').each(function() {
    var marksArray  = [];
    var thisTr      = $('tr:nth-child('+trIndex+')');
    var index       = 0;
    var marksGotten = 0; 
    $(this).closest('tr').find("input[name^=exam]").each(function() {
      var temObj = {};
      temObj.marksValue = $(this).val();
      temObj.marksId = $(this).attr("examsettingsdetailsid");
      marksArray.push(temObj);
      marksGotten  = marksGotten+parseInt($(this).val());
    });

    var student = {};
    student.studentId = $('tr:nth-child('+trIndex+')').attr("studentId");
    student.marksGotten = marksGotten;
    marksArray.push(student);
    mainArray.push(marksArray);
    console.log(mainArray);
    trIndex++;
  });

  $.ajax({
    type: 'post',
    url: './addCourseExamMarks',
    data:  {formData:formData,mainArray: mainArray},
      // dataType: 'json',
      success: function( _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
          {    
            swal({
              title: "Marks Table is not completed correctly",
              text: "Error",
              icon: "error",
              button: "okay",
            });
          }
        }
        else{
          swal({
            title: "Your Registration is completed successfully",
            text: "Success",
            icon: "success",
            button: "okay",
          });
          window.location.href="./addCourseMarks";
        }

        

      }         
    });
});





});


function onInputFunction(event)
{
 var somethng = $(event.target).parent();
 alert(somethng.attr('examMarks'));

}
</script>
<style>

  * {
    box-sizing: border-box;
  }

  #myInput {
    background-image: url({{asset('images/searchicon.png')}});
    background-position: 10px 10px;
    background-repeat: no-repeat;

  }

</style>

@endsection