@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')

<main>
    <div class="container-fluid"> 
		<div class="mb-4 mt-2"></div>
		
            <center><h4 class="text-success"> {{ Session::get('message') }}</h4></center>
        <div id="card" class="card mb-4">
            <div class="card-header">
                <i class="fas fa-table mr-1"></i>
                Page List <a href="{{ route('page.create') }}"><button type="button" class="btn btn-info btn-sm"><i class="fa fa-plus"></i> Add Page</button></a>
            </div>
            
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>URL</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                      
                        <tbody>
                            @foreach(\App\Page::take(100)->skip(0)->orderBy('id','desc')->get() as $user)
                                    <tr>
                                        <td>{{ $user->id }}</td>
                                        <td> {{ $user->title }}</td>
                                        <td> {{ route('page.view', $id = $user->id) }}</td>
                                        
										<td class="justify-content-center" style="display: inline-flex; width: 100%; padding: 15px 0;">
										    <a href="{{ route('page.view', $id = $user->id) }}" class="btn btn-sm btn-success" role="button" target="_blank"><i class="fa fa-eye"></i></a>
                                            <a href="{{ route('page.edit',['id'=>$user->id])}}" class="btn btn-sm btn-info" role="button"><i class="fa fa-edit"></i></a>
                                            <form action="{{ route('page.destroy', $id = $user->id) }}"
                                                  method="post">
                                                <input type="hidden" name="_method"
                                                       value="DELETE">
                                                {{ csrf_field() }}
                                                <button type="submit" class="btn btn-sm btn-danger permanently" onclick="return confirm('Are you sure to delete this item?')"><i class="fa fa-trash"></i></button>

                                            </form>
                                        </td>
										
                                    </tr>
                                @endforeach
                                
                          
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>
    





@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