@extends('layout.admin', ['title' => 'User Export', 'active' => 'user_export'])
@section('content')
    <div class="app-content main-content">
        <div class="side-app">
            <div class="container-fluid main-container">

                <!--Page header-->
                <div class="page-header">
                    <div class="page-leftheader">
                        <h4 class="page-title">User Exporter</h4>
                    </div>
                </div>
                <!--End Page header-->

                <!-- Row -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">User Export</div>
                            </div>
                            <div class="card-body">
                                <div class="">
                                    <div class="table-responsive">
                                        <table id="example" class="table table-bordered text-nowrap key-buttons">
                                            <thead>
                                                <tr>
                                                    <th class="border-bottom-0">F Name</th>
                                                    <th class="border-bottom-0">L Name</th>
                                                    <th class="border-bottom-0">Email</th>
                                                    <th class="border-bottom-0">Phone</th>
                                                    <th class="border-bottom-0">Role</th>
                                                    <th class="border-bottom-0">Entry Date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($users as $user)
                                                    <tr>
                                                        <td>{{ $user->fname }}</td>
                                                        <td>{{ $user->lname }}</td>
                                                        <td>{{ $user->email }}</td>
                                                        <td>{{ $user->phone }}</td>
                                                        <td>{{ $user->roles->role_name }}</td>
                                                        <td>{{ \Carbon\Carbon::parse($user->created_at)->format('d-m-Y') }}</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="6">
                                                            <h3 class="text-center text-muted">No Data!</h3>
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                   <!-- /Row -->
               
            </div>
        </div>
        <!-- end app-content-->
    </div>
@endsection

@section('custom_js')
    @include('admin.widgets.datatablescript')
    <script>
        $(document).ready(function(){
            const dataTableTitle = 'Product Report';
            const dataTableOptions = {
                dom: 'Blfrtip',
                lengthMenu: [30, 50,
                    100, 200
                ],
                buttons: [
                    {
                        extend: 'colvis',
                        fade: 0,
                        className: 'btn btn-primary'
                    },
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: ':visible'
                        },
                        title: dataTableTitle,
                        className: 'btn btn-primary'
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: ':visible'
                        },
                        title: dataTableTitle,
                        className: 'btn btn-primary'
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: ':visible'
                        },
                        title: dataTableTitle,
                        className: 'btn btn-primary'
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: ':visible',
                        },
                        title: dataTableTitle,
                        className: 'btn btn-primary'
                    }
                ],
                initComplete: function() {
                    $('.dt-buttons').addClass('btn-group');
                    $('.dt-button').removeClass('dt-button');
                }
            }
            $('#example').DataTable(dataTableOptions);
        });
    </script>

    <!-- Circle-progress js-->
    <script src="{{asset('assets/admin/js/vendors/circle-progress.min.js')}}"></script>

    <!-- Jquery-rating js-->
    <script src="{{asset('assets/admin/plugins/rating/jquery.rating-stars.js')}}"></script>
     <!-- Select2 js -->
     <script src="{{asset('assets/admin/plugins/select2/select2.full.min.js')}}"></script>
     <script src="{{asset('assets/admin/js/select2.js')}}"></script>

    <!-- Data tables -->

   


@endsection