{{-- @extends('layouts.app', ['activePage' => 'test-page', 'menuParent' => 'none', 'titlePage' => __('Buttons')]) --}}



@extends('layouts.app', [
  'activePage' => 'test-view',
  'menuParent' => 'none',
  'titlePage' => __('Testing'),
])

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="card">
        <div class="card-header card-header-primary card-header-icon">
          <h4 class="card-title">My Data Table</h4>
        </div>
        <div class="container">
          <div class="material-datatables">
            <div class="toolbar">
              <div class="row">
                <div class="col-sm-12">
                  <button class="btn btn-primary pull-left">Add Tenant</button>
                </div>
              </div>
            </div>
            <table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
              <thead>
                <tr>
                  <th class="disabled-sorting text-right">Actions</th>
                  <th>Name</th>
                  <th>Slug</th>
                  <th>Logo</th>
                  <th>Primary Color</th>
                  <th>User Limit</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th class="text-right">Actions</th>
                  <th>Name</th>
                  <th>Slug</th>
                  <th>Logo</th>
                  <th>Primary Color</th>
                  <th>User Limit</th>
                </tr>
              </tfoot>
              <tbody>
                @foreach ($tenants as $tenant)
                @if (!$tenant->is_active)
                  <tr class="table-danger">
                @else
                  <tr>
                @endif
                    <td class="td-actions text-right">
                      <button type="button" rel="tooltip" class="btn btn-info">
                        <i class="material-icons">person</i>
                      </button>
                      <button type="button" rel="tooltip" class="btn btn-success">
                        <i class="material-icons">edit</i>
                      </button>
                      <button type="button" rel="tooltip" class="btn btn-danger">
                        <i class="material-icons">close</i>
                      </button>
                    </td>
                    <td>{{ $tenant->name }}</td>
                    <td>{{ $tenant->slug }}</td>
                    <td>{{ $tenant->logo }}</td>
                    <td>{{ $tenant->primary_color }}</td>
                    <td>{{ $tenant->user_limit }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script>
    $(document).ready(function() {
      $('#datatables').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
          [10, 25, 50, -1],
          [10, 25, 50, "All"]
        ],
        responsive: true,
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search records",
        }
      });

      var table = $('#datatable').DataTable();

      // Edit record
      table.on('click', '.edit', function() {
        $tr = $(this).closest('tr');
        var data = table.row($tr).data();
        alert('You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.');
      });

      // Delete a record
      table.on('click', '.remove', function(e) {
        $tr = $(this).closest('tr');
        table.row($tr).remove().draw();
        e.preventDefault();
      });

      //Like record
      table.on('click', '.like', function() {
        alert('You clicked on Like button');
      });
    });
  </script>
@endpush