@extends('layouts/ums_layout')
@section('title', '| New Activities')
@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="{{url('ums/courseOffer/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
        </i>Course offer List</a>
      </div>

      <div class="panel panel-default panel-border">
        <div class="panel-heading">
          <div class="panel-title">Course Offer</div>
        </div>

        <div class="panel-body">

          <div class="row">
            @if($courseOfferdate)
            <div class="col-md-12">
              <div class="col-md-8">



                {!! Form::open(array('url' => '/ums/courseOfferSave', 'id' => 'addForm', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}

                <div class="form-group">
                  {!! Form::label('name', 'Registration Permission For:', ['class' => 'col-sm-3 control-label']) !!}
                  <div class="col-sm-9">
                    <select class ="form-control" name="trimesterId" id="trimesterId">
                      <option value="">Select Trimester</option>
                      @foreach($trimesters as $trimester)
                      <option  value="{{$trimester->id}}">{{$trimester->name}} {{$trimester->year}}</option>
                      @endforeach
                    </select>
                    <p id='trimesterIde' style="max-height:3px;"></p>
                  </div>
                </div>
                <div class="form-group">
                  {!! Form::label('programId', 'Program:', ['class' => 'col-sm-3 control-label']) !!}
                  <div class="col-sm-9">
                   <select class ="form-control" id = "programId" name="programId">
                    <option value="">Select Program</option>
                    @foreach($program as $programs)
                    <option value="{{$programs->id}}">{{$programs->name}}</option>
                    @endforeach
                  </select>
                  <p id='programId' 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', 'type' => 'hidden', 'placeholder' => 'Campus']) !!}

                {!! Form::hidden('credithour', $value = null, ['class' => 'form-control', 'type' => 'hidden', 'placeholder' => 'Campus']) !!}
              </div>
              <div class="form-group">
                {!! Form::label('maxCrHour', 'Total Maximum Credit hour:', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-9">
                  {!! Form::text('maxCrHour', $value = null, ['class' => 'form-control', 'id' => 'maxCrHour','name' => 'maxCrHour', 'type' => 'text', 'placeholder' => 'Enter Credit hour','required']) !!}
                  <p id='creditHoure' style="max-height:3px;"></p>
                </div>
              </div>

              <div class="form-group">
                {!! Form::label('minCrHour', 'Total Minimum Credit hour:', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-9">
                  {!! Form::text('minCrHour', $value = null, ['class' => 'form-control', 'id' => 'minCrHour','name' => 'minCrHour', 'type' => 'text', 'placeholder' => 'Enter Credit hour','required']) !!}
                  <p id='creditHoure' style="max-height:3px;"></p>
                </div>
              </div>
              
              <div class="form-group">
                <div style="padding-right: 30px;">
                  <button class="btn btn-info" id="addCourse" 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="courseOfferTable" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>#SL</th>
                      <th>Trimester</th>
                      <th>Course Title</th>
                      <th>Credit Hour</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>

              </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' => 'add', 'class' => 'btn btn-info']) !!}
                {{ Form::reset('Reset', ['class' => 'btn btn-warning']) }}
                <a href="#" class="btn btn-danger closeBtn">Close</a>
                <span id="success" style="color:green; font-size:16px;" class="pull-right"></span>
              </div>
            </div>
            @else
            <h3 style="color:red">Academic Schedule Course Offer date is out of date.</h3>
            @endif

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









          </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" 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 Offer</a>
        <h3  style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Course Offer</h3>
      </div>
      <div class="panel-body panelBodyView"> 
        <div>
          <script type="text/javascript">
            jQuery(document).ready(function($)
            {
              $("#umsCourseOfferView").dataTable().yadcf([

                ]);
            });
          </script>
        </div>
        <table class="table table-striped table-bordered" id="umsCourseOfferView">
          <thead>
            <tr>
              <th width="32">SL#</th>
              <th>Trimester Name</th>
              <th>Program Name</th>
              <th>Total Course</th>
              <th>Max. Credit Hour</th>
              <th>Min. Credit Hour</th>
              <th class="" width="80">Actions</th>
            </tr>
            {{ csrf_field() }}
          </thead>
          <tbody>
                        @foreach($courseOffers as $courseOffer) 
            <tr class="item{{$courseOffer->programId}}">
              <td class="text-center slNo">{{++$no}}</td>
              <td style="text-align: center;">{{$courseOffer->trimesterName}} {{$courseOffer->year}}</td>
              <td style="text-align: center;">{{$courseOffer->fullname}}({{$courseOffer->name}}) </td>
              <td style="text-align: center;">{{$courseOffer->courseCount}} </td>
              <td style="text-align: center;">{{$courseOffer->maxCrHour}} </td>
              <td style="text-align: center;">{{$courseOffer->minCrHour}} </td>
              {{-- <td style="text-align: center;"> {{$courseOffer->CourseEntry->title}}</td> --}}
              <td class="text-center" width="80">
                <a data-programId ="{{$courseOffer->programId}}" data-trimesterId ="{{$courseOffer->trimesterId}}" data-maxCrHour="{{$courseOffer->maxCrHour}}" data-minCrHour="{{$courseOffer->minCrHour}}" href="javascript:;" class="edit-modal">
                  <span class="glyphicon glyphicon-edit"></span>
                </a>&nbsp;
                <a id="deleteIcone" href="javascript:;" class="delete-modal" data-id="{{$courseOffer->programId}}">
                  <span class="glyphicon glyphicon-trash"></span>
                </a>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

@include('dataTableScript')
@endsection 

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

<script type="text/javascript">
 $(document).ready(function(){
  var courseDataArray = [];
  $(".edit-modal").click(function(){
    courseDataArray.length = 0;
    var trimesterId = $(this).attr('data-trimesterId');
    var programId = $(this).attr('data-programId');
    var maxCrHour = $(this).attr('data-maxCrHour');
    //alert(maxCrHour);
    var minCrHour = $(this).attr('data-minCrHour');
    $('#footer_action_button_dismis').text(" Close");
    $('#footer_action_button_dismis').addClass('glyphicon glyphicon-remove');
    $('.deleteContent').hide();
    $('.form-horizontal').show();
    $("#tableData").hide();
    $.ajax({
      url: './getCourseOffer/'+ trimesterId+'/'+programId,
      type: "GET",
      dataType: "json",
      success:function(data) {
        $("#addPanel").show();
        $('select[name="trimesterId"]').val(trimesterId);
        $('select[name="programId"]').val(programId);
        $('[name="maxCrHour"]').val(maxCrHour).prop('readonly', true);
        $('[name="minCrHour"]').val(minCrHour).prop('readonly', true);
        $.each( data, function( key, value ) {
          courseData = {};
          var error = false;
          
          courseData.trimesterName = $("#trimesterId :selected").text();
          courseData.programName = $("#programId :selected").text();
          courseData.trimesterId = trimesterId;
          courseData.maxCrHour = $("#maxCrHour").val();
          courseData.minCrHour = $("#minCrHour").val();
          //courseData.minCrHour = minCrHour;
          //alert(courseData.maxCrHour);
          courseData.programId = programId;
          courseData.courseName = value.title;
          courseData.courseId = value.courseId;
          courseData.id = value.id;
          courseData.creditHour = value.creditHour;
          courseDataArray.push(courseData);
        });

        table_render();
        
        $('[name="trimesterId"]').val(trimesterId);
        var input = '<input type="hidden" name="editId" id="editId" value="'+trimesterId+'">';
        input +='<input type="hidden" name="action" id="action" value="update">';
        $('#addForm').append(input);
        $("#add").text('Update');
        $(".panel-title").html('Update Course Offer');

      }
    });
  });

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

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

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

    //delete function
    $(document).on('click', '.delete-modal', function() {
      var Id = $(this).data('id');
      var input = $('<input type="hidden" name="id" value="'+Id+'">');

      $('#activitiesForm').append(input);
      $('#myModal').modal('show');
    });

    $('.modal-footer').on('click', '.delete', function() {
      id = $('input[name="id"]').val();
      $.ajax({
        type: 'post',
        url: "./deleteActivities",
        data: {
          '_token': $('input[name=_token]').val(),
          'id': id
        },
        success: function(data) {
          $('.item'+id).remove();
        }
      });
    });

    $("#searchKey").keyup(function(){
      $("#searchTable").show();
      var searchKey = $(this).val();
      var programId = $("#programId").val();
      if(programId=='')
      {
        swal("Program Empty!", "Please Select Program!", "error");
      }
      else
      {
       var rowHtml = '';
       $.ajax({
        type: 'post',
        url: "./searchCourse",
        data: {
          '_token': $('input[name=_token]').val(),
          'searchKey': searchKey,
          'programId': programId,
        },
        success: function(data) {
          var dataResult = JSON.parse(data);
          if(dataResult=="")
          {
           rowHtml+= '<tr class="searchRow"><td style="color:red">No Search Result Found</td></tr>';
         }
         else
         {  
          for(var i in dataResult)
          {
            rowHtml+= '<tr class="searchRow"><td data-credithour="'+dataResult[i].creditHour+'" data-courseid="'+dataResult[i].id+'"  data-title="'+dataResult[i].title+'" data-code="'+dataResult[i].code+'">'+dataResult[i].title+' ( '+dataResult[i].code+' )</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="credithour"]').val($(this).attr('data-credithour'));
      $('input[name="courseId"]').val($(this).attr('data-courseid'));
      $("#searchTable").hide();
    });

    $("#add").click(function(){
      var action = $('input[name="action"]').val();
      if(action=="update")
      {
        $.ajax({
          type: 'post',
          url:"./courseOfferUpdate",
          data: {
            '_token': $('input[name=_token]').val(),
            'data': courseDataArray,
            'deleteIds': deleteIds
          },
          success: function(data) {
            var dataResult = JSON.parse(data);
            if(dataResult=="success")
            {
             swal("Success","Updated Successfully","success");
             window.location.href = "./courseOffer";
           }
         }
       });
      }
      else
      {
        $.ajax({
          type: 'post',
          url:"./courseOfferSave",
          data: {
            '_token': $('input[name=_token]').val(),
            'data': courseDataArray
          },
          success: function(data) {
           var dataResult = JSON.parse(data);
           swal("Success!", "Course offer Added Successfully!", "success");
           courseDataArray.length = 0;
           $('input[name="searchKey"]').val('');
           $('input[name="courseId"]').val('');
           table_render();
         }
       });
      }
    });

    $("#addCourse").click(function(){
      courseData = {};
      var error = false;
      courseData.trimesterName = $("#trimesterId :selected").text();
      courseData.trimesterId = $("#trimesterId").val();
      courseData.departmentId = $("#departmentId").val();
      courseData.maxCrHour = $("#maxCrHour").val();
      courseData.minCrHour = $("#minCrHour").val();
      courseData.programId = $("#programId").val();
      courseData.courseName = $('input[name="searchKey"]').val();
      courseData.courseId = $('input[name="courseId"]').val();
      courseData.creditHour = $('input[name="credithour"]').val();
      courseData.id = "";

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

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

     
     $.each(courseDataArray, 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.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.trimesterName+'</td>';
        table_data += '<td>'+value.courseName+'</td>';
        table_data += '<td>'+value.creditHour+'</td>';
        table_data += '<td><span data-id="'+value.id+'" data-rowid="'+index+'" class="glyphicon glyphicon-trash removeClass"></span></td>';
        table_data += '</tr>';
        i++;
      });
      $("#courseOfferTable >tbody").html(table_data);
      $('input[name="courseName"]').val('');
      $('input[name="courseId"]').val('');
      $('input[name="searchKey"]').val('');
      $('input[name="searchKey"]').focus();
    }

    var deleteIds = [];
    $("#courseOfferTable").on('click', 'span', function(event) 
    {
      var rowId = $(this).attr('data-rowid');
      var deleteId = $(this).attr('data-id');
      $.each(courseDataArray, function( index, value ) {
        if(rowId==index)
        {
          courseDataArray.splice(index,1);
        }
      });

      if(deleteId)
      {
        deleteIds.push(deleteId);
      }

      table_render();
      console.log(deleteIds);
    });


    //delete function
    $(document).on('click', '.delete-modal', function() {
      var id = $(this).data('id');
      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: "./deleteCourseOffer",
            data: {
              '_token': $('input[name=_token]').val(),
              'id': id
            },
            success: function(data) {
              $('.item'+id).remove();
              swal("Success!", "Item has been deleted!", "success");
              $('#activitiesForm').append(input);
            }
          });
        } 
        else {
          swal("Your imaginary file is safe!");
        }
      });
    });


    $("#departmentId").change(function(event){
      var departmentId = $("#departmentId").val();
      $.ajax({
        type: 'post',
        url: "./programFilteringByDepartment",
        data: {departmentId: departmentId},
        success: function(data) {
          console.log(data);
          $('#programId').empty();
          $("#programId").append("<option value=''>Please Select Program</option>");
          $.each(data, function(key,value){                   
            $("#programId").append("<option value='"+value.id+"'>"+value.fullname+"</option>");
          });
        },
        error: function(argument) {
        }
      });
    });
  });



</script>