@extends("cms.layouts.app", ['page_id' => 'cms_users_index'])

@push("js")
<script type="text/javascript">
  $(function () {
    $('#table_users').DataTable({
      processing: true,
      serverSide: true,
      pageLength: 25,
      lengthMenu: [10, 25,  50, 100, 200, 300, 400, 500],
      ajax: {
        url: '{{ route('cms.cms_users.datatable') }}',
      },
      columns: [
      { data: 'id', name: 'id', visible: false, searchable: false},
      {
          data: 'status', name: 'status',
          render: function ( data, type, row, meta ) {
              var status = row['status'];
              var user_id = row['id'];
              var isActive = status == {{ CmsUser::Active }};
              var disabled = (user_id != {{ Auth::user()->id }})? '' : 'disabled';
              var html = '<button type="button" class="btn btn-sm btn-toggle btn-user-toggle ' + (isActive? 'active': '') + '" data-toggle="button" aria-pressed="' + (isActive? 'true': 'false') + '" autocomplete="off" ' + disabled + '><div class="handle"></div></button>';
              return html;
          },
      },
      // {
      //     data: 'role_name', name: 'role_name',
      //     render: function ( data, type, row, meta ) {
      //         return '<span class="badge badge-pill badge-user-role-' + parseInt(row['role_id']) + '">' + row['role_name'] + '</span>';
      //     },
      // },
      { data: 'name', name: 'name'},
      { data: 'email', name: 'email'},
      { data: 'contact_number', name: 'contact_number'},
      {
	  	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_users 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-user-toggle').length) {
         var data = $('#table_users').DataTable().row( this ).data();
         var id = data['id'];

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

    $('#table_users tbody').on('click', '.btn-user-toggle', function (e) {
      var data = $('#table_users').DataTable().row($(this).closest('tr')).data();
      var id = data['id'];
      var name = data['name'];
      var status = data['status'];

      if (!id || !name) { return; }

      var isActive = status == {{ CmsUser::Active }};
      if (confirm('Are you sure to ' + (isActive? 'inactivate' : 'activate') + ' \"' + name + '\"?')) {
        var form = $("#form-inactivate-item");
        var route = isActive? '{{ route('cms.cms_users.inactivate', '__id__') }}' : '{{ route('cms.cms_users.activate', '__id__') }}'
        var form_action = route.replace('__id__', id);
        form.attr('action', form_action);
        form.submit();
      } else {
          //set it back to previous state
          $(this).attr('aria-pressed', function(_, attr){ return !attr});
          $(this).toggleClass('active');
      }
    });

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

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

</script>
@endpush

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

@section("top_right")
<div class="btn-group float-right">
    <a class="btn btn-secondary btn-icon" href="{{ route('cms.cms_users.create') }}" role="button" title="Add">
        <i class="las la-user-plus mr-2"></i> {{ __('cms.add') }}
    </a>
</div>
@endsection

@section("content")
<div class="card">
    <div class="card-body table-dataTable table-responsive">
        <table id="table_users" class="table table-hover w-100">
            <thead>
                <tr>
                    <th>{{ __('cms.id') }}</th>
                    <th>{{ __('cms.active')}}</th>
                    <!-- <th>{{ __('cms.role.role') }}</th> -->
                    <th>{{ __('cms.name') }}</th>
                    <th>{{ __('cms.email') }}</th>
                    <th>{{ __('cms.cms_user.contact_number') }}</th>
                    <th>{{__('cms.last_updated') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
{{ Form::open(['method' => 'POST', 'id' => "form-inactivate-item"]) }} {{ Form::close() }}
@endsection