@extends('layout.mainlayout')
@section('aboveContent')
<div class="container-fluid game px-0">
  <div class="container p-3">
    <h2 class="h1-responsivefooter text-center my-4">Pokoje</h2>
    <div class="dropdown mx-auto text-center mb-3">
      <button class="btn btn-success btn-lg dropdown-toggle" type="button" id="hostDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fad fa-play-circle" data-toggle="tooltip" data-placement="bottom" title="Play without signing in and signing up"></i> Nowa gra
      </button>
      <div class="dropdown-menu" aria-labelledby="hostDropdown" id="create-room" data-room="{{ md5(time()) }}" data-url="{{ URL::to('/') }}/room/{{ md5(time()) }}">
        <a data-toggle="tooltip" data-placement="bottom" title="Play without password" id="create-public-room" class="dropdown-item" style="cursor: pointer !important;"><i class="fas fa-globe-asia text-dark"></i> Publiczna</a>
        <a data-toggle="tooltip" data-placement="bottom" title="Play with password" id="create-private-room" class="dropdown-item" style="cursor: pointer !important;"><i class="fas fa-lock text-dark"></i> Prywatna</a>
        @if ($randomRoom != null)
        <a data-toggle="tooltip" data-placement="bottom" title="Play in random Public room" class="dropdown-item" style="cursor: pointer !important;" href="{{ URL::to('/') }}/room/{{ $randomRoom['code'] }}/random"><i class="fas fa-random text-dark"></i> Losowy pokój</a>
        @endif
      </div>
    </div>
    <div class="table-responsive">
      <table id="rooms" class="table table-bordered table-hover table-striped table-sm">
        <thead class="thead-light">
          <tr>
            <th class="text-center" scope="col">Kod pokoju</th>
            <th class="text-center" scope="col">Dołącz</th>
            <th class="text-center" scope="col">Ostatnio grane</th>
          </tr>
        </thead>
        <tbody style="background-color: whitesmoke;">
        </tbody>
      </table>
    </div>
  </div>
</div>
@endsection
@section('belowContent')
<script>
$(document).ready(function () {
  var table = $('#rooms').DataTable({
    processing: true,
    serverSide: true,
    ajax: "{{ route('rooms.list') }}",
    columns: [
      {
        data: 'code',
        name: 'code',
        orderable: true,
        searchable: true,
        className: 'text-center room-code'
      },
      {
        data: 'join',
        name: 'join',
        className: 'text-center'
      },
      {
        data: 'time',
        name: 'time',
        orderable: true,
        searchable: true,
        className: 'text-right room-time'
      }
    ],
    'language': {
      'url': '{{ URL::to('/') }}/js/TableEn.json'
    },
    'order': [[ 2, 'desc' ]],
    'drawCallback': function() {
      $('.tooltip').remove();
      $('[data-toggle="tooltip"]').tooltip(function() {
        html : true
      });
      $('.watch-btn').each(function() {
        $(this).on('mouseenter', function() {
          if ($(this).find('i').hasClass('fa-lock')) {
            $(this).find('i').removeClass('fa-lock').addClass('fa-unlock');
          } else if ($(this).find('i').hasClass('fa-unlock')) {
            $(this).find('i').removeClass('fa-unlock').addClass('fa-lock');
          }
        }).on('mouseleave', function() {
          if ($(this).find('i').hasClass('fa-lock')) {
            $(this).find('i').removeClass('fa-lock').addClass('fa-unlock');
          } else if ($(this).find('i').hasClass('fa-unlock')) {
            $(this).find('i').removeClass('fa-unlock').addClass('fa-lock');
          }
        });
      });
    }
  });
  setInterval( function () {
    table.ajax.reload( null, false ); // user paging is not reset on reload
  }, 30000 );
  $('.dataTables_length').addClass('bs-select');
});
</script>
@include('layout.partials.rules')
@endsection