@extends("cms.layouts.app")

@push("js")
<script type="text/javascript">
  $(function () {
    $('#table_items').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
          url: '{{ route('cms.tenants.datatables') }}',
      },
      columns: [
      { data: 'id', name: 'id'},
      {
        data: 'status_name', name: 'status_name',
        render: function ( data, type, row, meta ) {
            return `<span class="text-status text-status-${row['status']}">${data}</span>`;
        },
      },
      { data: 'name', name: 'name'},
      {
	  	data: 'updated_at', name: 'updated_at',
	  	render: function ( data, type, row, meta ) {
	  		return `${row['updater_name']}<br><small>${row['updated_at']}</small>`;
	  	},
	  },
      ],
        responsive: true
    });

    $('#table_items tbody').on('click', 'tr', function (e) {
        let td = $(e.target).closest('td');
        if (td) {
            if (td.prop('cellIndex') == 0) return;
        }

      if (!$(e.target).closest('.btn-group').length && !$(e.target).closest('.btn-item-toggle').length) {
         var data = $('#table_items').DataTable().row( this ).data();
         var id = data['id'];

         if (!id) {
          cms.log("Missing id!!!");
          return;
        }
        showUser(id);
      }
    });

    function showUser(user_id) {
      if (!user_id) { return; }

      var url = '{{ route('cms.tenants.show', '__id__') }}'.replace('__id__', user_id);
      window.location.href = url;
    }
  });

</script>
@endpush

@section("title")
{{ __('cms.sidemenu.tenants') }}
@endsection

@section("top_right")
@endsection

@section("content")
<div class="card">
    <div class="card-body table-dataTable table-responsive">
        <table id="table_items" class="table table-hover w-100">
            <thead>
                <tr>
                    <th>{{ __('cms.id') }}</th>
                    <th>{{ __('cms.status')}}</th>
                    <th>{{ __('cms.name') }}</th>
                    <th>{{__('cms.last_updated') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection