@extends('layouts.master')

@section('title', 'List User')
@section('content')
<!-- Start content -->

    <div class="container-fluid">
        <div class="row heading-bg" style="background-color:  {!! \App\Helper::barColor() !!}">
					<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
						<h5 class="txt-light">{!! \App\Helper::panelName() !!}</h5>
					</div>
					<!-- Breadcrumb -->
					<div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
						<ol class="breadcrumb">
						    <li><a href="{{ url('/') }}"><span class="font-nexa">{!! \App\Helper::panelName() !!}</a></li>
							<li><a href="{{ url('/') }}">List User Active</a></li>
						</ol>
					</div>
					<!-- /Breadcrumb -->
				</div>
				<!-- /Title -->
      <div class="row">
            <div class="col-xs-12">
                <div class="panel panel-default table-responsive">
                    <div class="panel-body">
                        <div class="row">
                                    <div class="col-xs-2">
                                        <span class="label" style="background-color: {!! \App\Helper::barColor() !!}">{{ auth()->user()->level }}</span> 
                                    </div>
                                    <div class="col-xs-10 text-right">
                                        <h6>{!! \App\Helper::panelName() !!} List User Active</h6>
                                    </div>
                                </div>
                                <hr style="border-top: 1px solid {!! \App\Helper::barColor() !!}">
                    <table id="datatable-buttons" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <colgroup>
                          <col style="width:10%"/>
                          <col style="width:10%"/>
                          <col style="width:13%"/>
                          <col style="width:14%"/>
                          <col style="width:6%"/>
                          <col style="width:17%"/>
                          <col style="width:15%"/>
                          @if (auth()->user()->level == 'admin')
                          <col style="width:15%"/>
                          @endif
                        </colgroup>
                        <thead>
                        <tr>
                            <th>Username</th>
                            <!--<th>SubServer</th>-->
                            <th>Level</th>
                            <th>Registered By</th>
                            <th>Expired</th>
                            <th>Status</th>
                            <th>Saldo</th>
                            <th>Registered At</th>
                            @if (auth()->user()->level == 'admin')
                            <th>Action</th>
                            @endif
                        </tr>
                        </thead>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- container -->


<!-- content -->
@endsection

@section('js')
<script type="text/javascript">
var resizefunc = [];
var table;
$(document).ready(function() {
    table = $('#datatable-buttons').DataTable({
    serverSide: true,
    processing: true,
    order: [[ 3, "desc" ]],
    ajax: '{{ route('users.active.list') }}',
    columns: [
        {data: 'username'},
        // {data: 'sublike'},
        {data: 'level'},
        {data: 'register_by'},
        {data: 'expired_date'},
        {data: 'status'},
        {data: 'saldo'},
        {data: 'created_at'},
        @if (auth()->user()->level == 'admin')
        {data: 'action'}
        @endif
    ]
    });
});



    function suspend(id){
        var popup = confirm("Are you sure?");
        if(popup){
            $.ajax({
                url: "{{ url('/user/suspend') }}"+ '/' +id,
                type: "GET",
                success: function(data){
                    table.ajax.reload();
                },
                error: function(){
                    alert('Something wrong');
                }
            });
        }
    }


</script>
@endsection