@extends('layout.master')

@section('title', 'Manage Users')

@section('content')

    <section>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-content">
                        <div class="card-header">
                             <h1>Manage Users</h1>
                        </div>
                        <div class="card-body card-dashboard">
                            @include('inc.messages')
                            <p class="text-muted">Accounts are valid for 2 years. Use <strong>Renew</strong> to extend an account by another 2 years.</p>
                            <table class="table table-bordered datatable" id="datatable" style="z-index: 3;">
                                <thead>
                                    <tr role="row" class="bg-primary white">
                                        <th class="border-primary border-darken-1">S. No.</th>
                                        <th class="border-primary border-darken-1">Name</th>
                                        <th class="border-primary border-darken-1">Email</th>
                                        <th class="border-primary border-darken-1">Role</th>
                                        <th class="border-primary border-darken-1">Expires</th>
                                        <th class="border-primary border-darken-1">Status</th>
                                        <th class="border-primary border-darken-1">Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/extensions/toastr.css')}}">
    <style type="text/css">
        table.dataTable { font-size: 12px; }
        #toast-bottom-center.toast-container { text-align: center; }
    </style>
@endsection

@section('js')
    <script src="{{asset('app-assets/vendors/js/extensions/toastr.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/datatable_buttons.js')}}" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var table = $('.datatable').DataTable({
                dom: '<"d-inline-block"l><"pull-right"B>tipr',
                buttons: [ 'reset' ],
                scrollX: false, scrollY: '500px',
                lengthMenu: [[50, 100, 500, -1], [50, 100, 500, 'All']],
                pageLength: 50,
                pagingType: 'full_numbers',
                processing: true,
                language: { processing: data_table_loader },
                serverSide: true,
                ajax: '{{ route('users.manage.list') }}',
                rowId: 'id',
                order: [[1, 'asc']],
                columns: [
                    {orderable: false, searchable: false, class: 'align-middle text-center', render: function (d,t,r,m) { return m.row + 1; }},
                    {data: 'name', name: 'name', class: 'align-middle text-center'},
                    {data: 'email', name: 'email', class: 'align-middle text-center'},
                    {data: 'role', name: 'role', class: 'align-middle text-center'},
                    {data: 'expiry', name: 'profile_expires_at', class: 'align-middle text-center'},
                    {data: 'account_status', name: 'account_status', orderable: false, searchable: false, class: 'align-middle text-center'},
                    {data: 'action', name: 'action', orderable: false, searchable: false, class: 'align-middle text-center'},
                ]
            });

            $('body').on('click', 'button.renew_user', function () {
                var id = $(this).data('id');
                if (!confirm('Renew this user for another 2 years?')) return;
                $.ajax({
                    url: '{!! route('users.renew') !!}',
                    method: 'POST',
                    data: { '_token': '{{ csrf_token() }}', 'id': id }
                }).done(function (data) {
                    if (data && data.status == 1) {
                        toastr.success(data.message, 'Success!', {positionClass: 'toast-bottom-center', containerId: 'toast-bottom-center'});
                        table.draw(false);
                    } else {
                        toastr.error(data.message || 'Error', 'Error!', {positionClass: 'toast-bottom-center', containerId: 'toast-bottom-center'});
                    }
                });
            });
        });
    </script>
@endsection