@extends("cms.layouts.app")

@push("js")
<script type="text/javascript">
$(function () {
    $('#table_members').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: '{{ route('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 == {{ User::Active }};
                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"><div class="handle"></div></button>';
                return html;
            },
          },
          {
              data: 'email_verified', name: 'email_verified',
              render: function ( data, type, row, meta ) {
                  return data == '1' ? '{{ __('cms.yes') }}' : '{{ __('cms.no') }}';
              }
          },
          { data: 'display_id', name: 'display_id'},
          { data: 'name', name: 'name'},
          { data: 'email', name: 'email'},
          {
            data: 'is_consented', name: 'is_consented', searchable: false,
            render: function ( data, type, row, meta ) {
                return data == '1' ? '{{ __('cms.yes') }}' : '{{ __('cms.no') }}';
            }
          },
          {
	      	data: 'cms_updated_at', name: 'cms_updated_at',
	      	render: function ( data, type, row, meta ) {
                if (data) {
                    return `${row['cms_updater_name']}<br><small>${row['cms_updated_at']}<small>`;
                }
                return '{{ __('cms.na') }}';
	      	},
	      },
      ],
        responsive: true
    });

    $('#table_members 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_members').DataTable().row( this ).data();
         var id = data['id'];

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

    $('#table_members tbody').on('click', '.btn-user-toggle', function (e) {
      var data = $('#table_members').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 == {{ User::Active }};
      if (confirm('Are you sure to ' + (isActive? 'inactivate' : 'activate') + ' \"' + name + '\"?')) {
        var form = $("#form-inactivate-item");
        var route = isActive? '{{ route('cms.users.inactivate', '__id__') }}' : '{{ route('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 showDetails(id) {
      if (!id) { return; }

      var url = '{{ route('cms.users.show', '__id__') }}'.replace('__id__', id);
      window.location.href = url;
    }
});
</script>
@endpush

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

@section('top_right')
<a class="btn btn-primary" href="{{ route('cms.users.create') }}" role="button" title="Add">
    <i class="fas fa-user-plus"></i> {{ __('cms.add') }}
</a>
<a class="btn btn-primary" href="{{ route('cms.users.export') }}"> {{ __('general.export') }}</a>
@endsection

@section("content")
<div class="card">
    <div class="card-body table-dataTable table-responsive">
        <table id="table_members" class="table table-hover w-100">
            <thead>
                <tr>
                    <th>{{ __('cms.id')}}</th>
                    <th>{{ __('cms.active')}}</th>
                    <th>{{ __('cms.user.email_verified') }}</th>
                    <th>{{ __('cms.user.display_id')}}</th>
                    <th>{{ __('cms.name')}}</th>
                    <th>{{ __('cms.email')}}</th>
                    <th>{{ __('cms.receive_promotion') }}</th>
                    <th>{{__('cms.last_updated') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

{{ Form::open(['method' => 'POST', 'id' => "form-inactivate-item"]) }} {{ Form::close() }}

@endsection