@extends('ivykey.master')

@section('content')
<style>

    .message_list tr:first-child {
        background: #f0f0f0;
        cursor: default;
    }
    .message_list tr:first-child td {
        font-weight: 700;
    }
    .message_list TD {
        padding-left: 20px;
    }
    .message_list .offline {
        color: #ff0000;
    }
    #classroom_left_column {
        padding: 20px;
        font-size: 18px;
        color: #167a00;
    }

</style>

@if(Auth::check())
<script>

$(document).ready(function(){

  function getClassRun(){
    var userId = "{{ Auth::user()->id }}";
  $.get( "{{ URL::to('/ivykey/dashboard/classroom/checkClassroomStatus') }}", {user: userId })

        .done(function( data ) {

              var respond = jQuery.parseJSON(data);
              $.each( respond, function( key, value ) {
                      if(value==1) {
                        selector = "TR[name='"+key+"'] .class_status";
                        $(selector).css({'color':'green', 'font-weight':'700'}).html('Online');
                      } else {
                        selector = "TR[name='"+key+"'] .class_status";
                        $(selector).css({'color':'red', 'font-weight':'300'}).html('Offline');
                      }
              });

        });
  };
  setInterval(getClassRun,15000);

  $("TR").on('click', function(){
    if($(this).find(".class_status").html()=="Online"){
        var grp_name = $(this).find("td:first").html();
        window.location = "{{ URL::to('/ivykey/dashboard/classroom/joinClassroom?group=') }}"+grp_name;
      }
  });
});

</script>
@endif

<div id="breadcrumb" class="breadcrumb_messages">
    <img id="menuButton" src="{{ URL::asset('images/icons/menu.png') }}"/>
    <div id="breadcrumb_text"><span>Classroom</span></div>
</div>

<div id="content">
    <div id="classroom_left_column">
        <p><strong>Note:</strong></br></br>On the right side of this panel is table of groups you belong to.
          You can attend to classroom only if classroom status is 'Online'.<br/><br/>When status is online, just click on group row to attend.
        </p>
    </div>

    <div id="classroom_center_column">
        <div class="top_line"></div>

        <div class="message_list">  
            <table class="uk-table-hover">
                <tr><td>Group</td><td>Period</td><td>Classroom</td></tr>
                @if(Auth::check())
                    @foreach ($groups as $group)                                         
                        <tr name="{{ $group->name }}">
                          <td>{{ $group->name }}</td>
                          <td> -                           </td>
                          <td class="offline class_status">Offline</td>
                        </tr>
                    @endforeach
                @endif          
            </table>                        
        </div>
    </div>
</div>



</div>
@stop