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

<style type="text/css">
.searchRow td{padding: 5px;}
.table tr:nth-child(odd) {
 background-color: white !important; 
 border: 1.5px solid #eee;
}
.table-hover tr:hover td {
  background: #d7dce1;
}
</style>

<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/viewCourseLateRegistration/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
        </i>Course Registration List</a>
      </div>
      <div class="panel panel-default panel-border">
        <div class="panel-heading">
          <div class="panel-title">Add Course Registration</div>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-12">




              <div class="row" style="padding-bottom: 20px">
                <div class="col-md-0"></div>
                <div class="col-md-12" style="padding: 0px 45px 0px 45px; " >
                  <table  class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <th>#SL</th>
                        <th>Title</th>
                        <th>Code</th>
                        <th>Credit Hour</th>
                        <th>Amount</th>

                      </tr>
                    </thead>
                    <tbody>
                                            @foreach($viewCourseLateRegDetail as $viewCourseLateRegDetails) 
                      <tr class="item">
                        <td class="text-center slNo">{{++$no}}</td>
                        <td style="text-align: center;">{{$viewCourseLateRegDetails->title}}</td>
                        <td style="text-align: center;">{{$viewCourseLateRegDetails->code}}</td>
                        <td style="text-align: center;">{{$viewCourseLateRegDetails->creditHour}}</td>
                        <td style="text-align: center;">
                          {{$viewCourseLateRegDetails->amount}}
                        </td>

                        
                      </tr>
                      @endforeach
                    </tbody>
                  </table>

                  <p id='tableJVe' style="max-height:3px; color: red;"></p>
                </div>
                <div class="col-md-0"></div>
              </div>

              <script>

                function confirmApprove()
                {
                  var x = confirm("Are you sure you want to Approve?");
                  if (x)
                    return true;
                  else
                    return false;
                }

              </script>


              <div class="form-group">
                {!! Form::label('submit', ' ', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-9 text-right">
                 {{--  {!! Form::button('Save', ['id' => 'add', 'class' => 'btn btn-info']) !!} --}}
                 <!-- <form method="POST" action="{{url('ums/courseRegApprove/')}}" onsubmit="return confirmApprove()"> -->
                   <form method="POST"  id="addForm" action="{{url('ums/courseRegApprove/')}}" role="form">
                    <input name="_token" type="hidden" value="{{ csrf_token() }}">
                    <input type="hidden" name="approve" value="approve" >

                    <input type="hidden" name="id" value="{{$viewCourseLateRegDetails->courseRegId }}" >
                    <input type="hidden" name="programId" value="{{$viewCourseLateRegDetails->programId }}" >
                    @if($viewCourseLateRegDetails->status =='pending')

                    <button type="submit" class="btn btn-info">Approve</button>




                    {{--    {{ Form::reset('Reset', ['class' => 'btn btn-warning']) }} --}}
                    <a href="{{url('ums/editCourseLateRegistration/'.encrypt($viewCourseLateRegDetails->courseRegId))}}" class="btn btn-info">Edit</a>
                    @endif
                    <a href="{{url('ums/viewLateCourseRegistration/')}}" class="btn btn-danger closeBtn">Close</a>
                    <span id="success" style="color:green; font-size:16px;" class="pull-right"></span>
                  </form>


                </div>
              </div>


              {!! Form::close()  !!}

              <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>
@endsection 


{{-- <script type="text/javascript">

  $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });

</script> --}}
<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $("#startDate").datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',

    }); 

    $('form').submit(function( event ) {
      event.preventDefault();
      var submitUrl = $('#addForm').attr('action');
      console.log($('form').serialize());
      $.ajax({
       type: 'post',
       url: submitUrl,
       data: $('form').serialize(),
       dataType: 'json',
       success: function( _response ){

        if(_response.status==true)
        {
          swal("Success",_response.message,"success");

          // window.location = "./viewCourseRegistration";
          window.location.href = '{{url("ums/viewLateCourseRegistration")}}';
        }
        else
        {
         swal("Failed",_response.message,"error");
         return false;
       }

     },
     error: function( _response ){
            // Handle error
            console.log(_response.errors);
          }
        });
    });


    $("#searchKey").keyup(function(){
      $("#searchTable").show();
      var searchKey = $(this).val();
      $.ajax({
        type: 'post',
        url: "./searchCourseRegistration",
        data: {
          '_token': $('input[name=_token]').val(),
          'searchKey': searchKey,
          'trimesterId': $("#trimesterId").val(),

        },
        success: function(data) {
          var dataResult = JSON.parse(data);
          var rowHtml = '';
          if(dataResult.length>0)
          {
           for(var i in dataResult)
           {
            rowHtml+= '<tr class="searchRow"><td data-courseid="'+dataResult[i].id+'"  data-title="'+dataResult[i].title+'"  data-credithour="'+dataResult[i].creditHour+'" data-code="'+dataResult[i].code+'" data-amount="'+dataResult[i].amount+'" data-programid="'+dataResult[i].programId+'">'+dataResult[i].title+' ( '+dataResult[i].code+' )</td></tr>';
          }
        }
        else
        {  
          rowHtml+= '<tr class="searchRow"><td style="color:red">No Search Records Matched</td></tr>';
        }
        $("#searchTable").html(rowHtml);
      }
    });
    })


    $("#searchTable").on('click', 'td', function(event) 
    {

      $('input[name="searchKey"]').val($(this).attr('data-title') +' ('+ $(this).attr('data-code')+')');
      $('input[name="courseId"]').val($(this).attr('data-courseid'));
      $('input[name="programId"]').val($(this).attr('data-programid'));
      $('input[name="code"]').val($(this).attr('data-code'));
      $('input[name="creditHour"]').val($(this).attr('data-credithour'));
      $('input[name="amount"]').val($(this).attr('data-amount'));
      $("#searchTable").hide();
    });

    var courseDataArray =
    {
      'registrationDetails': [],
      'registrationSummary': {},
    };


    $("#add").click(function(){
             //console.log(courseDataArray);
             $.ajax({
              type: 'post',
              url: "./courseRegistrationSave",
              data: {
                '_token': $('input[name=_token]').val(),
                'data': courseDataArray
              },
              success: function(data) {
               var dataResult = JSON.parse(data);
               alert(dataResult);
               courseDataArray.length = 0;
               $('input[name="searchKey"]').val('');
               $('input[name="courseId"]').val('');
               table_render();
             }
           });
           });


    $("#addCourseList").click(function(){
      courseData = {};
      var error = false;
      courseData.studentName = $("#studentId :selected").text();
      courseData.studentId = $("#studentId").val();
      courseData.code = $('input[name="code"]').val();
      courseData.creditHour = $('input[name="creditHour"]').val();
      courseData.amount = $('input[name="amount"]').val();
      courseData.courseName = $('input[name="searchKey"]').val();
      courseData.courseId = $('input[name="courseId"]').val();
        //courseData.programId = $("#programId").val();
        //courseData.programId = $('input[name="programId"]').val();
        //alert(courseData.studentId);
         //console.log(courseDataArray);
         
         if(courseData.courseId==''|| courseData.courseName=='')
         {
          $('#courseName').append('<span style="color:red;">Please Select Course</span>');
          error = true;
          return false;
        }
        else
        {
         $('#courseName').html('');
         error = false;
       }


       if(courseData.studentId=='')
       {
        $('#studentIde').append('<span style="color:red;">Please Select Student</span>');
        error = true;
        return false;
      }
      else
      {
        $('#studentIde').html('');
        error = false;
      }

      $.each(courseDataArray['registrationDetails'], function( index, value ) 
      {
        if(courseData.courseId==value.courseId)
        {
          alert("This curse is already taken bellow. Please select another one.");
          $('input[name="searchKey"]').val('');
          $('input[name="searchKey"]').focus();
          error = true;
          return false;
        }
      });


      if(error==false)
      {
        courseDataArray['registrationDetails'].push(courseData);
         //console.log(courseDataArray);
         table_render();
       }
       else
       {
        return false;
      }
    });



    function table_render()
    {
      var table_data = '';
      var i = 1;
      var totalCreditHour = 0;
      var courseNumber = 0;
      var amount = 0;
      $.each(courseDataArray['registrationDetails'], function( index, value ) {
            // console.log(value);
            table_data += '<tr id="'+index+'">';
            table_data += '<td>'+i+'</td>';
            table_data += '<td>'+value.code+'</td>';
            table_data += '<td>'+value.courseName+'</td>';
            table_data += '<td>'+value.creditHour+'</td>';
            table_data += '<td>'+value.amount+'</td>';
            //table_data += '<td>'+value.creditHour+'</td>';
            totalCreditHour = parseInt(totalCreditHour) + parseInt(value.creditHour);
            amount = parseInt(amount) + parseInt(value.amount);
            courseNumber++;
            table_data += '<td><span data-rowid="'+index+'" class="glyphicon glyphicon-trash removeClass"></span></td>';
            table_data += '</tr>';
            i++;
          });
      courseDataArray['registrationSummary'].creditHour = totalCreditHour;
      courseDataArray['registrationSummary'].courseNumber = courseNumber;

      courseDataArray['registrationSummary'].amount = amount;
      courseDataArray['registrationSummary'].studentId =  $("#studentId").val(),
      courseDataArray['registrationSummary'].trimesterId =  $("#trimesterId").val(),
      courseDataArray['registrationSummary'].programId = $('input[name="programId"]').val();
      $("#courseTable >tbody").html(table_data);
      $('input[name="code"]').val('');
      $('input[name="creditHour"]').val('');
      $('input[name="courseName"]').val('');
      $('input[name="courseId"]').val('');
      $('input[name="amount"]').val('');
      $('input[name="searchKey"]').val('');
      $('input[name="searchKey"]').focus();
        //console.log(courseDataArray);

      }


      $("#courseTable").on('click', 'span', function(event) 
      {
        var rowId = $(this).attr('data-rowid');
       // $("#row_"+rowId).remove();
       alert(rowId);
       $.each(courseDataArray['registrationSummary'], function( index, value ) {
        if(rowId==index)
        {
          courseDataArray['registrationSummary'].splice(index,1);
        }
      });
       table_render();
     });




    });
  </script>