@extends('layouts.backend')

@section('extra_css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css') }}">
@endsection
@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>Manage User</h3>
                </div>

                <div class="title_right">
                    <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    @include('parts.message')
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>User List</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            {{--<button class="btn btn-danger" id="newUser">Create New User</button>--}}
                            {{--<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal1">--}}
                                {{--Create New User--}}
                            {{--</button>--}}
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Photo</th>
                                    <th>Email</th>
                                    <th>Role</th>
                                    <th>Total Posts</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach(\App\User::take(100)->skip(1)->get() as $user)
                                    <tr>
                                        <td>{{ $user->name }}</td>
                                        <td><img style="width: 100px;" src="{{ $user->picture }}" alt="{{ $user->name }}"></td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->role }}</td>
                                        <td><button class="btn btn-info btncount" data-toggle="modal" data-target="#userPostDatePicker" data-id="{{$user->id}}">{{ $user->Posts->count() }}</button></td>
                                        <td>
                                            <ul class="list-inline" style="margin: 0">
                                                <li style="float:left;"><a href="{{ route('user.edit', $id = $user->id) }}"
                                                                           class="btn btn-success"><i
                                                                class="fa fa-edit"></i></a></li>
                                                <li>
                                                    <form action="{{ route('user.destroy', $id = $user->id) }}"
                                                          method="post">
                                                        <input type="hidden" name="_method"
                                                               value="DELETE">
                                                        {{ csrf_field() }}
                                                        <button type="submit"
                                                                class="btn btn-danger">
                                                            <i class="fa fa-close"></i>
                                                        </button>

                                                    </form>

                                                </li>

                                            </ul>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- Modal -->
    <div class="modal fade" id="userPostDatePicker" tabindex="-1" role="dialog" aria-labelledby="userPostDatePickerLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="userPostDatePickerLabel">Count post by date range</h4>
                </div>
                <div class="modal-body">
                    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down"></i>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="getPostCount" tabindex="-1" role="dialog" aria-labelledby="getPostCountLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="getPostCountLabel">Pick Date</h4>
                </div>
                <div class="modal-body">
                    <a class="btn btn-success" disabled="">1000post</a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>





@endsection

@section('extra_js')
    <script src="{{ asset('https://cdn.jsdelivr.net/momentjs/latest/moment.min.js') }}"></script>
    <script src="{{ asset('https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js') }}"></script>

    <script>
//        $.ajaxSetup({
//            headers: {
//                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//            }
//        });


        $(document).ready(function () {



            var user_id;
            $('.btncount').click(function (e) {
                user_id = $(this).data("id");
            });


            $(function() {


                var start = moment().subtract(29, 'days');
                var end = moment();

                function cb(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

                    console.log("{{url('/')}}/{{ \App\Setting::find(1)->admin_prefix }}/user/post-count/"+user_id +"/"+ start.format('YYYY-MM-DD') + "/" + end.format('YYYY-MM-DD'));
                    $.ajax({
                        type: "GET",
                        url   : "{{url('/')}}/{{ \App\Setting::find(1)->admin_prefix }}/user/post-count/"+user_id +"/"+ start.format('YYYY-MM-DD') + "/" + end.format('YYYY-MM-DD'),

                        cache : false,

                        beforeSend : function() {
                            console.log('beforeSend');
                        },

                        success : function(data) {
                            console.log(data);
                            if (data) {
                                $( "#printCount" ).remove();
                                $( "#reportrange" ).after( "<p class=\"text-center bg-success well well-sm\" style=\"margin-top: 10px;\" id=\"printCount\">total "+data+" posts in this days.</p>" );
                            } else {
                                console.log('error')
                            }

                        },

                        error : function() {

                        }
                    });
                }

                $('#reportrange').daterangepicker({
                    startDate: start,
                    endDate: end,
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    }
                }, cb);

                cb(start, end, user_id);

            });

            console.log("ready");


        });



    </script>

@endsection