@extends('layouts/ums_layout')
@section('title', '| New Course Entry')
{{-- <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"> --}}
@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;
}
input[type="checkbox"] {
  vertical-align: middle;
}
.span12.pagination-centered {
  margin: 50px auto;
  width: 100px;
}
.list-group .list-group-item
{
  padding: 9px 20px;
}
@keyframes check {0% {height: 0;width: 0;}
25% {height: 0;width: 10px;}
50% {height: 20px;width: 10px;}
}
.checkbox{background-color:#fff;display:inline-block;height:20px;margin:0 .25em;width:25px;border-radius:4px;border:1px solid #ccc;float:right}
.checkbox span{display:block;height:28px;position:relative;width:28px;padding:0}
.checkbox span:after{-moz-transform:scaleX(-1) rotate(135deg);-ms-transform:scaleX(-1) rotate(135deg);-webkit-transform:scaleX(-1) rotate(135deg);transform:scaleX(-1) rotate(135deg);-moz-transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;transform-origin:left top;border-right:4px solid #fff;border-top:4px solid #fff;content:'';display:block;height:20px;left:0px;position:absolute;top:10px;width:10px}
.checkbox span:hover:after{border-color:#999}
.checkbox input{display:none}
.checkbox input:checked + span:after{-webkit-animation:check .8s;-moz-animation:check .8s;-o-animation:check .8s;animation:check .8s;border-color:#555}
.checkbox input:checked + .default:after{border-color:#444}
.checkbox input:checked + .primary:after{border-color:#2196F3}
.checkbox input:checked + .success:after{border-color:#8bc34a}
.checkbox input:checked + .info:after{border-color:#3de0f5}
.checkbox input:checked + .warning:after{border-color:#FFC107}
.checkbox input:checked + .danger:after{border-color:#f44336}
.card-header{height: 30px;background: grey;color: white;text-align: center;padding: 3px;}
</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/viewCourseEntry/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
       </i>Student Advisor List</a>
     </div>
     <div class="panel panel-default panel-border">
      <div class="panel-heading">
        <div class="panel-title">Add Student Advisor</div>
      </div>
      <div class="panel-body">
        <div class="row">
         <div class="col-md-12">
          <div class="col-md-6">
           {!! Form::open(array('url' => '', 'id' => 'studentAdvisorForm', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}


           <div class="form-group">
            {!! Form::label('employeeId', 'Assign Teacher:', ['class' => 'col-sm-3 control-label']) !!}
            <div class="col-sm-9">
             <select class ="form-control" id = "employeeId" name="employeeId">
              <option value="">Select one</option>
              @foreach($employee as $employees)
              <option value="{{$employees->id}}">{{$employees->name}}</option>
              @endforeach
            </select>
            <p id='employeeIde' style="max-height:3px;"></p>
          </div>
        </div>

        <div class="form-group">
          {!! Form::label('employeeId', 'Select program', ['class' => 'col-sm-3 control-label']) !!}
          <div class="col-sm-9">
            <select class ="form-control" id ="programId" name="programId">
              <option value="">Select one</option>
              @foreach($programs as $program)
              <option value="{{$program->id}}">{{$program->fullname}}</option>
              @endforeach
            </select>
            <p id='employeeIde' style="max-height:3px;"></p>
          </div>
        </div>

        <!-- <div class="form-group" id="">
          {!! Form::label('employeeId', 'Select Course', ['class' => 'col-sm-3 control-label']) !!}
          <div class="col-sm-9">
            <select class ="form-control" id ="CourseList" name="courseId">

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

      </div>

      <div class="col-md-6" style="overflow-y: scroll; max-height:400px;display: none;"  id="departmentStudentList">
        <div class="card-header">Program Section List</div>
        <ul class="list-group list-group-flush">
        </ul>
      </div>


      <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::reset('Reset', ['class' => 'btn btn-warning']) }}
          <a href="{{url('ums/viewCourseEntry/')}}" 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>

<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 id="studentAdvisorTable" class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>#SL</th>
          <th>Trimester Name</th>
          <th>Program Name</th>
          <th>Advisor</th>
          <th>Advisor</th>
          <th>Advisor</th>
          <th>Advisor</th>
          <th>Action</th>
        </tr>
      </thead>
      
    </table>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" defer></script>


<script type="text/javascript">
  $(document).ready(function(){

    $('#studentAdvisorTable').DataTable({
     processing: true,
     serverSide: true,
     ajax: '{{ url('ums/studentAdvisorList/') }}',
     columns: [
     { data: 'id', name: 'id' },
     { data: 'trimesterId', name: 'trimesterId' },
     { data: 'advisorId', name: 'advisorId' },
     { data: 'trimesterName', name: 'trimesterName' },
     { data: 'programName', name: 'programName' },
     { data: 'name', name: 'name' },
     {data: 'mergeColumn', name: 'mergeColumn', searchable: false, sortable : false, visible:true},
     {data: 'action', name: 'action', orderable: false, searchable: false}
     ]
   });

    var checkboxArray = {
      'sectionIds':[],
      'studentAdvisor':{},
    };
    $("#startDate").datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',
    }); 

    $('#studentAdvisorTable').on("click",".edit",function(){
      var editId = $(this).attr('id').split('-')[1];
      $.ajax({
        type: 'get',
        url:  '{{ url('ums/getAdvisor/') }}/'+editId,
        success: function(data) {
          // var dataResult = JSON.parse(data);
          $('select[name="employeeId"]').val(data.advisorId);
          $('select[name="programId"]').val(data.programId);
          var sectionIds = JSON.parse(data.sectionIds);
          $.each(sectionIds,function(index, el) {
            var sectionIds = {};
            sectionIds.id = el.id;
            checkboxArray['sectionIds'].push(sectionIds);
          });
          $("#programId").change();
          console.log(checkboxArray);
          $("#addForm").attr("action", "{{url('backend/productUpdate/')}}");
        }
      });
    });


    // $("#programId").on('change',function(e1){

    //   programChange($(e1.target).val());
    //   // loadTeachers($(e1.target).val());
    // });

    // $("#programId").change(programChange).change();
    $("#programId").change(programChange);

    function programChange()
    {
      var programId = $(this).val();

      $.ajax({
        type: 'post',
        url: "./courseSections",
        data: {
          '_token': $('input[name=_token]').val(),
          'programId': $('#programId').val(),
          'courseId': $(this).val(),
        },
        success: function(data) {
          // var dataResult = JSON.parse(data);
          var rowHtml = '';
          $("#departmentStudentList ul").html('');
          if(data.length>0)
          {
            $.each(data,function(index,value){
              console.log(checkboxArray['sectionIds']);
              console.log($.inArray(value.id,checkboxArray['sectionIds']));
              // return false;

              rowHtml+='<li id="'+value.id+'" class="list-group-item">';
              rowHtml+= value.sectionName;
              rowHtml+='<label class="checkbox">';
              if($.inArray(value.id,checkboxArray['sectionIds'])!=-1)
              {
                rowHtml+='<input checked class="checkStudents" name="studentsCheck[]" value="'+value.id+'" type="checkbox" />';
              }
              else
              {
                rowHtml+='<input class="checkStudents" name="studentsCheck[]" value="'+value.id+'" type="checkbox" />';
              }
              rowHtml+='<span class="success"></span>';
              rowHtml+='</label>';
              rowHtml+=' </li>';
            })
          }
          else
          {  
            rowHtml+='<li style="color:red" id="" class="list-group-item">';
            rowHtml+= 'No Sections Found';
            rowHtml+=' </li>';
          }
          $("#departmentStudentList ul").html(rowHtml);
          $("#departmentStudentList").show();
        }
      });
     // return true;
   }



   $("#add").click(function(){
    $(".checkStudents:checked").each(function() {
      var checkBoxIds = {};
      checkBoxIds.id = $(this).val();
      checkboxArray['sectionIds'].push(checkBoxIds);
    });

    checkboxArray['studentAdvisor'].studentAdvisor = $('#employeeId').val();
    checkboxArray['studentAdvisor'].courseId = $('select[name="courseId"]').val();
    checkboxArray['studentAdvisor'].programId = $('#programId').val();

    $.ajax({
      type: 'post',
      url: "./studentAdvisorSave",
      data: {
        '_token': $('input[name=_token]').val(),
        'data': checkboxArray,
      },
      success: function(data) {
       var dataResult = JSON.parse(data);
       if(dataResult.status==true)
       {
        swal("Success!",dataResult.message,"success");
        checkboxArray.length = 0;
        $('input[name="employeeId"]').val('');
        $('select[name="programId"]').val('');
        $('select[name="courseId"]').val('');
        $("input:checkbox").prop('checked', false);  
      }
      else
      {
        swal("Failed",dataResult.message,"error");
        return false;
      }
    }
  });
  });

   $("#searchKey").keyup(function(){
    $("#searchTable").show();
    var searchKey = $(this).val();
    $.ajax({
      type: 'post',
      url: "./searchStudent",
      data: {
        '_token': $('input[name=_token]').val(),
        'searchKey': searchKey
      },
      success: function(data) {
        var dataResult = JSON.parse(data);
        console.log(dataResult);
        var rowHtml = '';
        if(dataResult.length>0)
        {
         for(var i in dataResult)
         {
          rowHtml+= '<tr class="searchRow"><td data-id="'+dataResult[i].id+'" data-firstName="'+dataResult[i].firstName+'" data-lastName="'+dataResult[i].lastName+'">'+dataResult[i].firstName+' '+dataResult[i].lastName+'</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-firstName') +' ('+ $(this).attr('data-lastName')+')');
    // $("#searchTable").hide();
  });


    // $("#add").click(function(){
    //   $.ajax({
    //     type: 'post',
    //     url: "./courseTeacherSave",
    //     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();
    //    }
    //  });
    // });


    var courseDataArray = [];
    $("#addTeacher").click(function(){
      courseData = {};
      var error = false;
      courseData.teacherName = $("#employeeId :selected").text();
      courseData.teacherId = $("#employeeId").val();
      courseData.courseStartTime = $('input[name="courseShiftStart"]').val();
      courseData.courseEndTime = $('input[name="courseShiftEnd"]').val();
      courseData.courseName = $('input[name="searchKey"]').val();
      courseData.courseId = $('input[name="courseId"]').val();
      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.teacherId=='')
     {
      $('#employeeIde').append('<span style="color:red;">Please Select Teacher</span>');
      error = true;
      return false;
    }
    else
    {
      $('#employeeIde').html('');
      error = false;
    }

    if(courseData.courseStartTime=='')
    {
      $('#startTime').append('<span style="color:red;">Select Course Start Time</span>');
      error = true;
      return false;
    }
    else
    {
      $('#startTime').html('');
      error = false;
    }

    if(courseData.courseEndTime=='')
    {
      $('#endTime').append('<span style="color:red;">Select Course End Time</span>');
      error = true;
      return false;
    }
    else
    {
     $('#endTime').html('');
     error = false;
   }

   if(error==false)
   {
    courseDataArray.push(courseData);
    table_render();
  }
  else
  {
    return false;
  }
});

    function table_render()
    {
      var table_data = '';
      var i = 1;
      $.each(courseDataArray, function( index, value ) {
        table_data += '<tr id="'+index+'">';
        table_data += '<td>'+i+'</td>';
        table_data += '<td>'+value.courseName+'</td>';
        table_data += '<td>'+value.teacherName+'</td>';
        table_data += '<td>'+value.courseStartTime+'</td>';
        table_data += '<td>'+value.courseEndTime+'</td>';
        table_data += '<td><span data-rowid="'+index+'" class="glyphicon glyphicon-trash removeClass"></span></td>';
        table_data += '</tr>';
        i++;
      });
      $("#courseTeacherTable >tbody").html(table_data);
      $('input[name="courseShiftStart"]').val('');
      $('input[name="courseShiftEnd"]').val('');
      $("#employeeId").val('');
      $('input[name="searchKey"]').focus();
    }

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