@extends('layouts.private')

@section('content')
<style type="text/css">
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
 

    table.table th i {
        font-size: 13px;
        margin: 0 5px;
        cursor: pointer;
    }
    table.table td:last-child {
        width: 130px;
    }
    table.table td a {
        color: #a0a5b1;
        display: inline-block;
        margin: 0 5px;
    }
	table.table td a.view {
        color: #03A9F4;
    }
    table.table td a.edit {
        color: #FFC107;
    }
    table.table td a.delete {
        color: #E34724;
    }
    table.table td i {
        font-size: 19px;
    }    
    
</style>
<div class="card ">
          <div class="card-body">
    @if ($message = Session::get('success'))
    <div class="alert alert-success">
      <p>{{ $message }}</p>
    </div>
    @endif

        <table id="data-table" class="table table-bordered">
        <a class="btn btn-success" href="{{ route('administer.users.create') }}">Create New</a>

            <thead>
                <tr>
                    <th>#</th>
                    <th>Name <i class="fa fa-sort"></i></th>
                    <th>Email</th>
                    <th>Role <i class="fa fa-sort"></i></th>
                    <th>TenantID</th>
                    <th>Last Login <i class="fa fa-sort"></i></th>
                    <th>Created Date</th>
                    <th>User Status</th>
                    <th>Actions <i class="fa fa-sort"></i></th>
                </tr>
            </thead>
            <tbody>
                @foreach($records as $data)
                <tr>
                    <td>{{ $i++ }}</td>
                    <td>{{ $data->name }}</td>
                    <td>{{ $data->email }}</td>
                    <td>{{ $data->user_type }}</td>
                    <td>{{ $data->tenant_id }}</td>
                    <td>{{ $data->last_login_at }}</td>
                    <td>{{ $data->created_at }}</td>
                    <td class="text-center">
                        <div class="sortingAction text-center p-0 m-0">                                        
                            <label class="c-switch c-switch-label c-switch-opposite c-switch c-switch-success">                        
                                <input class="c-switch-input p-0 m-0" type="checkbox" name="active" value="true" @if($data->status == 'Active'){{'checked'}}@endif onchange="updateStatus('{{$data->id}}', this)"  ><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                            </label><br/>
                        </div>
                    </td>
                    <td>
          
                        <a target="_blank" href="{{ route('usersLogin',$data->id) }}" class="sign" title="Login as user" data-toggle="tooltip"><img width="20" src="{{asset('images/login_icon.png')}}"></a>
                        <a href="{{ route('administer.users.show',$data->id) }}" class="view" title="Show" data-toggle="tooltip"><i class="material-icons">&#xE417;</i></a>
                        <a href="{{ route('administer.users.edit',$data->id) }}" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                        {!! Form::open(['method' => 'DELETE','route' => ['administer.users.destroy', $data->id],'style'=>'display:inline']) !!}
                            <a onclick="$(this).closest('form').submit()" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
                        {!! Form::close() !!}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
<script>
$(document).ready(function() {
    $('#data-table').dataTable({
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "iDisplayLength": 50,
        "bLengthChange": false
    });
    $('#data-table').attr('style', 'border-collapse: collapse !important');

} );
function updateStatus(id, event){
    
    var active = 'Inactive';
    if($(event).prop("checked") == true){
            active = 'Active';
    }
    $.post("{{route('administerUsersStatusUpdate')}}", {'status' : active, 'id' : id}, function(data) {
        toastr.success(data.message);
    });
}
</script>
@endsection