@extends('app')
@push('styles')
    <link rel="stylesheet" href="{{asset('NewUI/dashboard/assets/css/facebook.css')}}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
@endpush

<br>

<div class="col-md-12">
    <div class="widget widget-shadow text" style="background-image: url({{asset('NewUI/dashboard/assets/images/fb_01.jpg')}}); background-size: cover;background-position:center;height: 20em">
        <br>
        <br>
        <div class="widget-body text-center">
        </div>
        <div class="widget-footer" style="background-color: rgba(0, 0, 0, 0.87)">
            <div class="row no-space" style="margin-top: 9em;padding: 0.5em;height: 4em">
                <p align="center" id="demo" style="font-size: 1.5em;color:#fff">Loading...</p>
            </div>
        </div>
    </div>
</div>


<br>
<br>
<br>
<br>

<div class="container-fluid" style="width:100% !important;margin-top: 1em">

    <div class="row">
        <br>
        @if(session('success'))
            <div class="alert alert-success">
                <ul>
                    <li>{{ session('success') }}</li>
                </ul>
            </div>
        @endif
        @if(count($errors)>0)
            <br>
            <div class="alert alert-danger">
                <ul>
                    @foreach($errors->all() as $error)
                        <li>
                            {{$error}}
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if($trial && $daily)
            <div class="alert alert-success">
                <ul>
                    <li>You have exhausted your post for today</li>
                </ul>
            </div>
        @endif


        <br>

        <div class="container-fluid">
        <div class="row" id="fb-page">

        </div>
        </div>





    @if($can_post)
    <div id="container-floating" class="wrapper">
    @endif
    </div>

</div>

</div>



@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
    <script>
        let td = '{{ !empty($trial) ? \Carbon\Carbon::parse($trial->created_at)->addDays(7) : (!empty($expiry) ? $expiry->expiry_date : date('Y-m-d h:i:s')) }}';

        let countDownDate = new Date(td).getTime();

        let x = setInterval(function () {

            const now = new Date().getTime();

            const distance = countDownDate - now;
            let days = Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("demo").innerHTML = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s <br><small style='color:#ffc107;font-size: 0.5em'>until expiration</small>";

            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "TRIAL PERIOD EXPIRED";
            }
        }, 1000);
    </script>


{{--    Fetching from Facebook Endpoint--}}
    <script>
        $(document).ready(function(){

            // Consume Posts Endpoint

            var mypostdata = {
                'page_access_token': localStorage.getItem('selected_access_token').toString(),
                'page_id': localStorage.getItem('selected_page_id').toString()
            };

            var posturl = 'https://social.snwolley.com/facebook-api/get/feed';

            //Assign image
            // $('#page-img').attr('src',localStorage.getItem('page_image'));
            $.post(posturl,mypostdata,function (data) {

                console.log(data);
                $.each(data ,function(i,item) {

                    //For date
                    var post_date = moment(item.created_time, "YYYYMMDD").fromNow();

                    //For Post image
                    var fb_img;
                    if(!item.full_picture)
                        fb_img = 'https://image.freepik.com/free-photo/facebook-reactions-emoji-3d-render-premium-photo-social-media-balloon-symbol-with-like-thumbs-up-icons-pattern_41204-556.jpg';
                    else
                        fb_img = item.full_picture;

                    var msg = item.message;

                    $('#fb-page').append('<div class="col-lg-4">\n' +
                        '            <div class="facebook-card" style="margin-bottom: 2em; height: 45em;overflow-y: scroll">\n' +
                        '                <div class="facebook-card-header" style="height: 13em;overflow-y: scroll">\n' +
                        '                    <img class="facebook-card-user-image" id="page-img" src="'+decodeURIComponent(localStorage.getItem('page_image'))+'">\n' +
                        '                    <a class="facebook-card-user-name" href="#" target="_blank">'+localStorage.getItem('page_name')+'</a>\n' +
                        '                    <a class="facebook-card-icon facebook-dots" href="#"><i class="fa fa-ellipsis-h"></i></a>\n' +
                        '                    <p class="date">'+post_date+' • <a class="facebook-card-icon facebook-world" href="#"><i class="fa fa-globe"></i></a></p>\n' +
                        '                    <p class="description">'+item.message+'<a class="facebook-card-usertag" href="#" target="_blank"></a></p>\n' +
                        '                </div>\n' +
                        '                <div style="height:22em;overflow-y: scroll" class="facebook-card-image">\n' +
                        '                    <img src="'+fb_img +'" style="width: 100%">\n' +
                        '                </div>\n' +
                        '                <br>\n' +
                        '                <div class="facebook-card-content">\n' +
                        '                    <p>\n' +
                        '                        <a style="text-decoration: none" href="#" class="facebook-card-icon"><i class="fa fa-thumbs-o-up" style="color: #0d47a1"></i> <font>'+item.likes.summary.total_count+'</font> Like</a>\n' +
                        '                        <a style="text-decoration: none" href="#" class="facebook-card-icon"><i class="fa fa-comment-o" style="color: #0d47a1"></i> <font>'+item.comments.summary.total_count+'</font> Comment</a>\n' +
                        '                        <a style="text-decoration: none" href="#" class="facebook-card-icon"><i class="fa fa-share" style="color: #0d47a1"></i> Share</a>\n' +
                        '                    </p>\n' +
                        '                </div>\n' +
                        '\n' +
                        '                <div class="azul">\n' +
                        '                    <a onclick="mytins(\'' + post_date + '\', \'' + fb_img + '\', \'' + encodeURI(escape(msg)) + '\', \'' + item.id + '\')" class="btn btn-block btn-danger" style="background-color: #1a237e; color:#fff;border-color: #fff"><i class="fa fa-facebook-official fa-lg"></i> See Sentiments</a>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '        </div>')

                });

            });

        });

        function mytins($date,$img,$caption,$postid) {
            // console.log($caption);
            localStorage.setItem('selected_date', $date);
            localStorage.setItem('selected_fullimg', $img);
            localStorage.setItem('selected_caption', $caption);
            localStorage.setItem('selected_postid', $postid);
            console.log($date);
            console.log($img);


            localStorage.setItem('pos','0');
            localStorage.setItem('neg','0');
            localStorage.setItem('neu','0');

            //    Route to sentiment page
            window.location.href = '{{URL::to('sentiment/facebook')}}';
        }



    </script>


@endpush