@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content')
    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    @if(session()->has('fail'))
        <div class="alert alert-danger">
            {{ session()->get('fail') }}
        </div>
    @endif
    <!-- Default box -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Data Seluruh Pengguna</h3>
        </div>
        <div class="card-body">
            <table id="example2" class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>No</th>
                    <th>Nama</th>
                    <th>E-Mail</th>
                    <th>No Telp</th>
                    <th>NIK</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @forelse($users as $index => $user)
                    <tr>
                        <td>{{$index+1}}</td>
                        <td>{{$user->name}}</td>
                        <td>{{$user->email}}</td>
                        <td>{{$user->phone_number}}</td>
                        <td>{{$user->nik}}</td>
                        <td>{{$user->status}}</td>
                        <td>
                            <form role="form" action="/members/actived" method="POST">
                                {{ csrf_field() }}
                                <input type="hidden" id="uid" name="uid" value="{{$user->uid}}" />
                                <input type="hidden" id="status" name="status" value="active" />
                                <button type="submit" class="btn btn-primary">Reactive</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <p>No Data.</p>
                @endforelse
                </tbody>
            </table>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->

{{--    <div class="card">--}}
{{--        <div class="card-header">--}}
{{--            <h3 class="card-title">Grafik Jumlah Pendaftar</h3>--}}
{{--        </div>--}}
{{--        <div class="card-body">--}}
{{--            @include('user.chart')--}}
{{--        </div>--}}
{{--        <!-- /.card-body -->--}}
{{--    </div>--}}
    <!-- /.card -->
@stop
@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">

    <link rel="stylesheet" href="/vendor/datatables/css/dataTables.bootstrap4.css">

    <style>
        #chartdiv {
            width	: 100%;
            height	: 500px;
        }
    </style>

    <!-- Resources -->
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
    <script src="https://www.amcharts.com/lib/3/pie.js"></script>
    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
@stop
@section('js')
    <script src="/vendor/datatables/js/jquery.dataTables.js"></script>
    <script src="/vendor/datatables/js/dataTables.bootstrap4.js"></script>
    <script>
        $(function () {
            $('#example2').DataTable();
        });
    </script>
    @include('user.script.chart')
@stop