@extends('voyager::master')


@section('page_header')
<div class='container-fluid'>
  <h1 class='page-title'>
    <i class='icon-voyager-news'>History</i>
  </h1>
</div>
@stop

@section('css')
<link rel="stylesheet" href="{{ voyager_asset('lib/css/responsive.dataTables.min.css') }}">
<style>
table, th, td {
  border: 1px solid grey;
}
</style>
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panels {
  margin-top: 12px;
  background-color: white;
  display: none;
  overflow: hidden;
}
h3 {
  text-align: center;
}
</style>
@stop

@section('content')
<div class="page-content browse container-fluid">
  @include('voyager::alerts')
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-bordered">
        <div class="panel-body">
          <form method="get" class="form-search">
            <div id="search-input">
              <div class="input-group col-md-12">
                <input type="text" class="form-control" placeholder="{{ __('voyager::generic.search') }}" name="s" value="">
                <span class="input-group-btn">
                  <button class="btn btn-info btn-lg" type="submit">
                    <i class="voyager-search"></i>
                  </button>
                </span>
              </div>
            </div>
            @if (Request::has('sort_order') && Request::has('order_by'))
            <input type="hidden" name="sort_order" value="{{ Request::get('sort_order') }}">
            <input type="hidden" name="order_by" value="{{ Request::get('order_by') }}">
            @endif
          </form>
          @foreach ($param as $row)
          <button class="accordion">{{$row['date']}}</button>
          <div class="panels">
            <div class="table-responsive">
              <table id="dataTable" class="table table-hover center">
                @if ($row['data'] == null)
                <h3>Tidak ada data.</h3>
                @else
                <thead>
                  <tr>
                    <th>No. Telp.</h>
                    <th>Nama</th>
                    <th>Jam Masuk</th>
                    <th>Lama Antrian</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($row['data'] as $i)
                  <tr>
                    <td>{{$i['user_phone_number']}}</td>
                    <td>{{$i['queue_name']}}</td>
                    <td>{{substr($i['created_at'], 11)}}</td>
                    <td>{{HistoryController::timeQueue($i)}}</td>
                  </tr>
                  @endforeach
                </tbody>
                @endif
              </table>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</div>
@stop

@section('javascript')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      /* Toggle between adding and removing the "active" class,
      to highlight the button that controls the panel */
      this.classList.toggle("active");

      /* Toggle between hiding and showing the active panel */
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  }
</script>
@stop