@extends('app')
    @section('page_content')
        <div class="page-content container-fluid" style="margin-top: 5em">
            <div class="row">

                <div class="col-md-4">
                    <div class="widget widget-shadow text">
                        <div class="widget-header">
                            <div class="widget-header-content fadeIn animated">
                                <img src="{{asset('storage/avatars/'.@\Illuminate\Support\Facades\Auth::user()->picture->picture)}}" alt="..." class="img-thumbnail">

                                <h5 class="text-center">
                                   <i class="fa fa-facebook-official text-primary"></i>  {!! empty($fb_username) ?  '<small>Not Available</small>' : $fb_username !!}

                                </h5>
                            </div>
                        </div>
                        <div class="widget-body">
                            <button class="btn btn-primary bounceIn animated" id="fb-share">Share a post <i class="fa fa-facebook-official"></i></button>

                        </div>
                        <div class="widget-footer">
                            <div class="row no-space">
                            </div>
                        </div>
                    </div>
                </div>



                <div class="col-md-8">
                    <div class="widget widget-shadow">
                        <div class="widget-header text-center">
                            <div class="widget-header-content">
                                <br>
                                <h4 class="text-uppercase">Your Posts</h4>
                            </div>
                        </div>
                        <hr>

                        <div class="widget-body">
                            @if(empty($feeds))
                                <h4 class="text-center"> 0 posts retrieved from Facebook</h4>
                                @else

                                <ul class="list-group">
                                    @foreach($feeds as $post)
                                        <li class="list-group-item">
                                            <span class="badge" style="background-color: white !important;"><i class="fa fa-facebook-official text-primary"></i> </span>
                                          share <a style="color: black">{{$post}}</a>
                                        </li>
                                        <hr>
                                    @endforeach
                                </ul>

                            @endif
                        </div>
                        <div class="widget-footer">
                            <div class="row no-space">
                            </div>
                        </div>
                    </div>
                </div>



            </div>
         </div>


        @endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2&appId=2228953320687170&autoLogAppEvents=1"></script>

    <script>

        var site = "{{!empty(\Illuminate\Support\Facades\Auth::user()->website_url) ? \Illuminate\Support\Facades\Auth::user()->website_url : 'https://mtnmessenger.com' }}";

        $(document).ready(function () {
            window.fbAsyncInit = function () {
                FB.init({
                    appId: '432314024004251',
                    cookie: true,
                    xfbml: true,
                    version: 'v3.2'
                });
            };


            // facebook-posts
            (function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) {
                    return;
                }
                js = d.createElement(s);
                js.id = id;
                js.src = "https://connect.facebook.net/en_US/sdk.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

            function Api() {
                FB.api('/me?fields=name,email,feed', function (response) {
                    if (response && !response.error) {
                        console.log(response);
                    }
                })
            }

            function statusChangeCallback(response) {
                if (response.status === 'connected') {
                    console.log('connected');
                    Api()
                } else {
                    console.log('not connected');
                }

            }

            function checkLoginState() {
                FB.getLoginStatus(function (response) {
                    statusChangeCallback(response);
                });
            }



            $('#fb-share').on('click',function (m) {
                m.preventDefault();
                getFacebookFeed();
            });


            function getFacebookFeed() {

                FB.getLoginStatus(function (response) {
                    if (response.status === 'connected') {
                        console.log('connected ');
                        console.log(response.authResponse.accessToken);

                        const token = response.authResponse.accessToken;

                        // FB.api('/me/feed', function (data) {
                        // // , {access_token:token}
                        //     if (data && !data.error) {
                        //         console.log(data);
                        //     }
                        // })

                        // var body = 'Reading JS SDK documentation';
                        //
                        // FB.api('/me/feed', 'post', { message: body }, function(response) {
                        //     if (!response || response.error) {
                        //         alert('Error occured');
                        //     } else {
                        //         alert('Post ID: ' + response.id);
                        //     }
                        //     console.log(response);
                        // });

                        FB.ui({
                            method: 'share',
                            href: site
                        }, function (response) {

                        });

                    } else {

                    }
                }, {scope: 'email,user_posts'});

            }


            // function post() {
            //
            //     var body = 'Reading JS SDK documentation';
            //
            //     FB.api('/me/feed', 'post', { message: body }, function(response) {
            //         if (!response || response.error) {
            //             alert('Error occured');
            //         } else {
            //             alert('Post ID: ' + response.id);
            //         }
            //         console.log(response);
            //     })
            // }

        });










    </script>

@endpush