@extends('layouts.admin')
@section('styles')
    <link rel="stylesheet" href="{{asset('plugins/datatables/dataTables.bootstrap4.css')}}">
@endsection
@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">View All Website Users</h3>
    </div>
    <!-- /.card-header -->
    <div class="card-body">
        @if (session()->has('message'))
            <div class="alert alert-{{ session()->get('type')}} alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                <h5><i class="icon fa fa-close"></i> {{ session()->get('title')}}..!</h5>
                {{ session()->get('message')}}
            </div>
        @endif
        <table id="example1" class="table table-bordered table-striped">
            <thead>
            <tr>
                <th class="text-center" style="width: 20px">No</th>
                <th class="text-center">Photo</th>
                <th>Name</th>
                <th>Email</th>
                <th class="text-center">Total Posts</th>
                <th class="text-center">Balance</th>
                <th class="text-center">IP</th>
                <th class="text-center">Status</th>
                <th class="text-center">Action</th>
            </tr>
            </thead>
            <tbody>
            @php $id=0;@endphp
            @foreach($users as $user)
             @php $id++;@endphp
            <tr>
                <td class="text-center">{{$id}}</td>
                <td class="text-center">
                    <div class="widget-user-image">
                        <img class="img-circle elevation-2" width="50" src="{{$user->avatar}}" alt="User Avatar">
                    </div>
                </td>
                <td>{{$user->name}}</td>
                <td>{{$user->email}}</td>
                <td class="text-center">{{count($user->posts)}}</td>
                <td class="text-center">$ {{$user->balance}}</td>
                <td class="text-center">{{$user->ip}}</td>
                @if($user->email_verified_at != null)
                <td class="text-center">Verified</td>
                @else
                 <td class="text-center">Not Verified</td>
                @endif
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#changePass{{$user->id}}"><i class="fa fa-edit"></i></button>
                    <div class="modal fade" id="changePass{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="changePass{{$user->id}}" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title text-success" id="changePass{{$user->id}}"><strong>Change User Password</strong></h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form id="change-pass" action="{{ route('adminPassword') }}" method="POST">
                                        @csrf
                                        <div class="form-group">
                                            <label for="password" class="col-form-label">New Password</label>
                                            <input type="text" class="form-control" name="password" id="password">
                                        </div>
                                        <input type="hidden" name="user" value="{{$user->id}}">
                                    </form>

                                </div>
                                <div class="modal-footer">
                                    <a href="{{ route('adminPassword') }}" class="btn btn-success btn-block"  onclick="event.preventDefault(); document.getElementById('change-pass').submit();">Change Now</a>
                                </div>
                            </div>
                        </div>
                    </div>


                    <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#delPost{{$user->id}}"><i class="fa fa-trash"></i></button>
                    <div class="modal fade" id="delPost{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="delPost{{$user->id}}" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title text-info" id="delPost{{$user->id}}"><strong>Are you sure?</strong></h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <h6 class="text-primary"><strong>Once deleted, This user will not be able to login their account and destroyed their every related data.</strong></h6>
                                </div>
                                <div class="modal-footer">
                                    <a href="{{route('adminUserDestroy', $user->id)}}" class="btn btn-danger btn-block">I know, I'm not a Mad. Delete Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            @endforeach
            </tbody>
            <tfoot>
            <tr>
                <th class="text-center" style="width: 20px">No</th>
                <th class="text-center">Photo</th>
                <th>Name</th>
                <th>Email</th>
                <th class="text-center">Total Posts</th>
                <th class="text-center">Balance</th>
                <th class="text-center">IP</th>
                <th class="text-center">Status</th>
                <th class="text-center">Action</th>
            </tr>
            </tfoot>
        </table>
    </div>
    <!-- /.card-body -->
</div>
@endsection
@section('scripts')
    <script src="{{asset('plugins/datatables/jquery.dataTables.js')}}"></script>
    <script src="{{asset('plugins/datatables/dataTables.bootstrap4.js')}}"></script>
    <script>
        $(function () {
            $("#example1").DataTable();
        });
    </script>
@endsection