@extends('layouts/ums_layout')
@section('title', '| New Course Entry')
@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" id="addPanel" style="padding-bottom: 1%;display: none;">
  <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="#" class="btn btn-info pull-right activitiesListButton"><i class="glyphicon glyphicon-th-list viewIcon">
       </i>Course Teacher List</a>
     </div>
     <div class="panel panel-default panel-border">
      <div class="panel-heading">
        <div class="panel-title">Add Course Teacher</div>
      </div>
      <div class="panel-body">
        <div class="row">
         <div class="col-md-12">
          <div class="col-md-8">
            {!! Form::open(array('url' => 'ums/courseTeacherSave', 'id' => 'addForm', '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($teachers as $teacher)
                <option value="{{$teacher->id}}">{{$teacher->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}} ({{$program->name}})</option>
              @endforeach
            </select>
            <p id='programIde' 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 class="form-group" id="">
          {!! Form::label('employeeId', 'Select Section', ['class' => 'col-sm-3 control-label']) !!}
          <div class="col-sm-9">
            <select class ="form-control" id ="sectionList" name="sectionId">

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

       <!--    <div class="form-group">
            {!! Form::label('name', 'Search Course:', ['class' => 'col-sm-3 control-label']) !!}
            <div class="col-sm-9">
              <input list="searchResult" id="searchKey" name="searchKey" class="form-control">
              <table style="position: relative;z-index: 10;background-color: #fff;" id="searchTable" class="table table-condensed table-hover table-bordered clickable"> 
              </table>
              <p id='courseName' style="max-height:3px;"></p>
            </div>
            {!! Form::hidden('courseId', $value = null, ['class' => 'form-control', 'id' => 'courseId', 'type' => 'hidden', 'placeholder' => 'Campus']) !!}
          </div> -->
          <!-- gnr_user_role  gnr_role users  gnr_employee -->


          <div class="form-group">
            {!! Form::label('Course Shift From', 'Course Shift Start Time:', ['class' => 'col-sm-3 control-label']) !!}
            <div class="col-sm-3">
              {!! Form::time('courseShiftStart', $value = null, ['class' => 'form-control', 'id' => 'name', 'type' => 'time', 'placeholder' => 'Campus']) !!}
              <p id='startTime' style="max-height:3px;"></p>
            </div>
            {!! Form::label('To', 'End Time:', ['class' => 'col-sm-3 control-label']) !!}
            <div class="col-sm-3">
              {!! Form::time('courseShiftEnd', $value = null, ['class' => 'form-control', 'id' => 'name', 'type' => 'time', 'placeholder' => 'Campus']) !!}
              <p id='endTime' style="max-height:3px;"></p>
            </div>
          </div>
          <div class="form-group">
            {{-- {!! Form::label('submit', ' ', ['class' => 'col-sm-12 control-label']) !!}--}}
            <div style="padding-right: 30px;">
              <button class="btn btn-info" id="addTeacher" style="float: right; " type="button">Add</button>
            </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="courseTeacherTable" class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th>#SL</th>
                  <th>Course Title</th>
                  <th>Assigned Teacher</th>
                  <th>Shift Start</th>
                  <th>Shift End</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>

            <p id='tableJVe' style="max-height:3px; color: red;"></p>
          </div>
          <div class="col-md-0"></div>
        </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' => 'saveButton', 'value'=>"Save" ,'class' => 'btn btn-info']) !!}
            {{ Form::reset('Reset', ['class' => 'btn btn-warning']) }}
            <a href="{{url('ums/courseTeacher/')}}" 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 class="row" id="tableData">                        
  <div class="col-md-12">
    <div class="panel panel-default" style="background-color:#708090;">
      <div class="panel-heading" style="padding-bottom:0px">
        <a href="#" id="addViewBtn" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
        </i> Add Course Asssign Teacher</a>
        <h3  style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Course Asssign Teacher</h3>
      </div>
      <div class="panel-body panelBodyView"> 
        <div>

        </div>
        <table class="table table-striped table-bordered" id="courseTeacher">
          <thead>
           <tr>
             <th>#SL</th>
             <th>Course Title</th>
             <th>Assigned Teacher</th>
             <th>Program</th>
             <th>Section</th>
             <th>Shift Start</th>
             <th>Shift End</th>
             <th>Action</th>
           </tr>

         </thead>

       </table>
     </div>
   </div>
 </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 src="{{asset('js/jquery-1.11.1.min.js')}}"></script> --}}



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

    var courseTeacher = $('#courseTeacher').DataTable({
     processing: true,
     serverSide: true,
     ajax: '{{ url('ums/courseTeacherList/') }}',
     columns: [
     {data: 'id', name: 'id' },
     {data: 'title', name: 'title' },
     {data: 'TeacherName', name: 'TeacherName' },
     {data: 'programName', name: 'programName' },
     {data: 'sectionName', name: 'sectionName' },
     {data: 'courseStartTime', name: 'courseStartTime' },
     {data: 'courseEndTime', name: 'courseEndTime' },
     // {data: 'mergeColumn', name: 'mergeColumn', searchable: false, sortable : false, visible:true},
     {data: 'action', name: 'action', orderable: false, searchable: false}
     ]
   });
    $("#startDate").datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',

    }); 

    $("#searchKey").keyup(function(){
      $("#searchTable").show();
      var searchKey = $(this).val();
      var departmentId = $("#departmentId").val();
      if(departmentId=="")
      {
        swal("Department Empty!", "Please select department!", "error");
        $('#departmentIde').append('<span style="color:red;">Please Select Department</span>');
        return false;
      }
      else
      {
       $('#departmentIde').html('');
       $.ajax({
        type: 'post',
        url: "./searchCourse",
        data: {
          '_token': $('input[name=_token]').val(),
          'searchKey': searchKey,
          'departmentId': departmentId
        },
        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-code="'+dataResult[i].code+'">'+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);
      }
    });
     }
   })

    $("#programId").on('change',function(){
      var programId = $(this).val();
      $.ajax({
        type: 'post',
        url: "./courseFilteringByProgram",
        data: {
          '_token': $('input[name=_token]').val(),
          'programId': programId
        },
        success: function(data) {
          console.log(data);
          // var dataResult = JSON.parse(data);
          var rowHtml = '<option value=""> Select Course</option>';
          if(data.courses.length>0)
          {
            $.each(data.courses,function(index,value){
              rowHtml += '<option value="'+value.id+'">'+value.title+ ' ( '+value.code+' ) '+'</option>';
            })
          }
          else
          {  
            rowHtml += '<option value="">No Course Found For This Program</option>';
          }
          $("#CourseList").html(rowHtml);
          console.log(data.sections);
          var sectionHtml = '<option value=""> Select Section</option>';
          if(data.sections.length>0)
          {
            $.each(data.sections,function(index,value){
              sectionHtml += '<option value="'+value.id+'">Section '+value.sectionName+'</option>';
            })
          }
          else
          {  
            sectionHtml += '<option value="">No Section Found</option>';
          }

          $("#sectionList").html(sectionHtml);
        }
      });
    });

    // $("#CourseList").on('change',function(){
    //   $.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 = '<option value=""> Select Section</option>';
    //       if(data.length>0)
    //       {
    //         $.each(data,function(index,value){
    //           rowHtml += '<option value="'+value.id+'">Section '+value.sectionName+'</option>';
    //         })
    //       }
    //       else
    //       {  
    //         rowHtml += '<option value="">No Section Found</option>';
    //       }

    //       $("#sectionList").html(rowHtml);
    //     }
    //   });
    // });

    $('#courseTeacher').on("click",".edit",function(){
      var editId = $(this).attr('id').split('-')[1];
      courseDataArray.length = 0;
      $.ajax({
        type: 'get',
        url:  '{{ url('ums/getCourseTeacher/') }}/'+editId,
        success: function(data) {

          $.each(data,function(index,val){
            console.log(val);
            courseData = {};
            courseData.id = val.id;
            courseData.teacherName = val.TeacherName;
            courseData.sectionId = val.sectionId;
            courseData.programId = val.programId;
            courseData.teacherId = val.teacherId;
            courseData.courseStartTime = val.courseStartTime;
            courseData.courseEndTime = val.courseEndTime;
            courseData.courseName =  val.title;
            courseData.courseId = val.courseId;
            courseDataArray.push(courseData);
            $('#employeeIde').val(val.teacherId);
          });
          table_render();

          $("#addForm").attr("action", "{{url('/ums/updateCourseTeacher')}}");
          $("#saveButton").text('Update');
          $(".panel-title").html('Update Course Entry');
          $("#addPanel").show();
          $("#tableData").hide();
        }
      });
    });


    $("#saveButton").click(function(){
      console.log(courseDataArray);
      var submitUrl = $('#addForm').attr('action');

      $.ajax({
        type: 'post',
        url:submitUrl,
        data: {
          '_token': $('input[name=_token]').val(),
          'data': courseDataArray,
          'deleteIds': deleteIds
        },

        success: function(data) {
         var dataResult = JSON.parse(data);
         if(dataResult.status == true)
         {
          swal("Success!", dataResult.message, "success");
          courseDataArray.length = 0;
          table_render();
          $('select[name="employeeIde"]').val('');
          $('select[name="programId"]').val('');
          $('select[name="sectionId"]').val('');
          $('select[name="courseId"]').val('');
          $("#tableData").show();
          $("#addPanel").hide();
          courseTeacher.ajax.reload();

        }
        else
        {
          swal("Failed!", dataResult.message, "error");
          return false;
        }
      }
    });
    });


    $("#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'));
      $("#searchTable").hide();
    });


    $("#addViewBtn").click(function(){
      $("#tableData").hide();
      $("#addPanel").show();
      $("#addForm")[0].reset();
      $('#ActivitiesId').remove();
      $("#add").val('Submit');
      $(".panel-title").html('Save Course Teacher Assign');
    });

    $(".activitiesListButton").click(function(){
      $("#tableData").show();
      $("#addPanel").hide();
    });

    $(".closeBtn").click(function(){
     $("#tableData").show();
     $("#addPanel").hide();
   });

    var courseDataArray = [];
    $("#addTeacher").click(function(){
      courseData = {};
      var error = false;
      courseData.id = '';
      courseData.teacherName = $("#employeeId :selected").text();
      courseData.sectionId = $("#sectionList :selected").val();
      courseData.programId = $("#programId :selected").val();
      courseData.teacherId = $("#employeeId").val();
      courseData.courseStartTime = $('input[name="courseShiftStart"]').val();
      courseData.courseEndTime = $('input[name="courseShiftEnd"]').val();
      courseData.courseName =  $("#CourseList :selected").text();
      courseData.courseId = $("#CourseList").val();
      if(courseData.teacherId=='')
      {
        $('#employeeIde').html('<span style="color:red;">Please Select Teacher</span>');
        error = true;
        return false;
      }
      else
      {
        $('#employeeIde').html('');
        error = false;
      }

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

      if(courseData.courseId==''|| courseData.courseName=='')
      {
        $('#CourseListIde').html('<span style="color:red;">Please Select Course</span>');
        error = true;
        return false;
      }
      else
      {
       $('#CourseListIde').html('');
       error = false;
     }



     if(courseData.sectionId=='')
     {
      $('#sectionIde').html('<span style="color:red;">Select Program Section</span>');
      error = true;
      return false;
    }
    else
    {
      $('#sectionIde').html('');
      error = false;
    }

   //  if(courseData.courseEndTime=='')
   //  {
   //    $('#endTime').html('<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-edit-id="'+value.id+'"  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('');
      // $('#employeeIde').html('');
      $('select[name="employeeIde"]').val('');
      $('select[name="programId"]').val('');
      $('select[name="sectionId"]').val('');
      $('select[name="courseId"]').val('');
    }

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


    $('#courseTeacher').on("click",".delete",function() {
      var id =  $(this).attr('id').split('-')[1];
      var input = $('<input type="hidden" name="id" value="'+id+'">');
      swal({
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover this!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      })
      .then((willDelete) => {
        if (willDelete) {
          $.ajax({
            type: 'post',
            url: "./deleteCourseTeacherList",
            data: {
              '_token': $('input[name=_token]').val(),
              'id': id
            },
            success: function(data) {
              $('.item'+id).remove();
              swal("Success!", "Item has been deleted!", "success");
              $('#addForm').append(input);
              courseTeacher.ajax.reload();
            }
          });
        } 
        else {
          swal("Your imaginary file is safe!");
        }
      });
    });
    
  });
</script>