@extends('includes.main')

@section('pageSpecificStyles')
    <style type="text/css">

    </style>
@endsection
@section('pageSpecificContent')

    <div class="card m-b-20">
        <div class="card-body">
            <form class="form-horizontal" method="GET" action="{{ route('user.index') }}" role="form">
                <div class="row">

                    <div class="form-group col-md-8">
                        <input autocomplete="off" value="{{ Request::get('search_text') ?? '' }}"
                            placeholder="Search Text" type="text" class="form-control" name="search_text" id="search_text">
                    </div>
                    <div class="form-group col-md-2">
                        <button class="btn btn-success">Search</button>
                    </div>

                     <div class="form-group col-md-2">
                            <div class="input-group">
                                <select id="rowCount" onchange="changeRowCount(this.value)" name="rowCount" class="form-control">
                                    <option value="" selected disabled>{{ $rowText }} Rows</option>
                                    <option value="25">25 Rows</option>
                                    <option value="50">50 Rows</option>
                                    <option value="100">100 Rows</option>
                                    <option value="1000000">All Rows</option>
                                </select>

                            </div>
                    </div>
                </div>
            </form>

            <div class="row">
                <div class="col-md-12">
                    <div class="table table-responsive b-0" data-pattern="priority-columns">
                        <table id="dataTable" class="table" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th style="cursor: pointer" onclick="sortBy('filter_email')" scope="col">Email</th>
                                    <th style="cursor: pointer" onclick="sortBy('filter_role')" scope="col">User Role</th>
                                    <th style="cursor: pointer" onclick="sortBy('filter_date')" scope="col">Registered At</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="tBody">
                                @foreach ($users as $user)
                                    <tr @if($user->status != 1) class='text-danger' @endif>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->userRole->name }}</td>
                                        <td>{{ $user->created_at }}</td>
                                        <td>
                                            <div class='dropdown'>
                                                <a class='btn btn-secondary dropdown-toggle text-white' type='button'
                                                    id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true'
                                                    aria-expanded='false'> Option </a>
                                                <div class='dropdown-menu' aria-labelledby='dropdownMenuButton'>
                                                    @if ($user->status == 1)
                                                        <a onclick="disable('user/change_status/{{ $user->iduser }}/0')"
                                                            class='dropdown-item' href='#'>Disable</a>
                                                    @else
                                                        <a onclick="activate('user/change_status/{{ $user->iduser }}/1')"
                                                            class='dropdown-item' href='#'>Activate</a>
                                                    @endif
                                                    <a onclick='destroy("{{ route('user.destroy', ['user' => $user->iduser]) }}")'
                                                        class='dropdown-item' href='#'>Delete</a>
                                                </div>
                                            </div>
                                        </td>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-12">
                    {{ $users->links() }}
                </div>
            </div>
        </div>
    </div>

@endsection
@section('pageSpecificScript')
    <script language="JavaScript" type="text/javascript">
        let table;
        let sort_direction;
        let sort_by;
        let page;
        let row_count;
        let field;
        let search_text;
        $(document).ready(function () {
             search_text = "{{ Request::get('search_text') }}";
             sort_direction = "{{ $sortDirection }}";
             sort_by = "{{ Request::get('sort_by') }}";
             page = "{{ Request::get('page') }}";
             row_count = "{{ $rowCount }}";
             field = "{{ Request::get('sort_by') ?? '' }}";
        });


        function destroy(url) {
            swal.fire({
                title: 'Permanantly Delete?',
                text: 'You will not be able to revert this process',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Delete`,
                confirmButtonClass: `deleteBtn`,
                buttonsStyling: true,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        success: function(data) {
                            showControllerErrors(data);
                            if (data.success != null) {
                                showSuccess(data.success); //show success alert
                              setTimeout(() => {
                                    window.location.reload();
                                }, 1500);
                            }
                        },
                        error: function(data) {
                            showRequestErrors(data);
                        }
                    });
                } else if (result.isDenied) {
                    Swal.fire('Process terminated', '', 'info')
                }
            });
        }

        function disable(url) {
            swal.fire({
                title: 'Disable This User?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Disable`,
                buttonsStyling: true,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: 'POST',
                        success: function(data) {
                            showControllerErrors(data);
                            if (data.success != null) {
                                showSuccess(data.success); //show success alert
                                setTimeout(() => {
                                    window.location.reload();
                                }, 1500);
                            }
                        },
                        error: function(data) {
                            showRequestErrors(data);
                        }
                    });
                } else if (result.isDenied) {
                    Swal.fire('Process terminated', '', 'info')
                }
            });
        }

        function activate(url) {
            swal.fire({
                title: 'Activate This User?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Activate`,
                buttonsStyling: true,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: 'POST',
                        success: function(data) {
                            showControllerErrors(data);
                            if (data.success != null) {
                                showSuccess(data.success); //show success alert
                              setTimeout(() => {
                                    window.location.reload();
                                }, 1500);
                            }
                        },
                        error: function(data) {
                            showRequestErrors(data);
                        }
                    });
                } else if (result.isDenied) {
                    Swal.fire('Process terminated', '', 'info')
                }
            });
        }

        function sortBy(newField) {
            field = newField;
            reloadTable();
        }

        function changeRowCount(newValue){
            row_count = newValue;
            reloadTable();
        }

        function reloadTable(){
            window.location.replace("user" + '?search_text='+search_text+'&page=' + page +'&sort_by=' + field+'&sort_direction=' + sort_direction+'&row_count='+row_count)
        }

    </script>
@endsection