@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/link_002.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: 4em">






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




    </div>

</div>
<br>
<br>



@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 = {
                'access_token': '{!!  $linkedin_access_token->linkedin_access_token !!}',
                'organization_urn': decodeURIComponent(localStorage.getItem('linkedin_organization_urn').toString())
            };

            var posturl = 'https://social.snwolley.com/linkedin-api/get_posts';

            //Assign image
            $.post(posturl,mypostdata,function (data) {

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

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

                    //For Post image
                    var lk_img;
                    if(!item.media)
                        lk_img = 'https://digitaltransformationtrends.com/wp-content/uploads/2020/01/LinkedIn.jpg';
                    else
                        lk_img = item.media;

                    var msg = item.post;

                    $('#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: 10em;overflow-y: scroll">\n' +
                        '                    <img class="facebook-card-user-image" id="page-img" src="'+decodeURIComponent(localStorage.getItem('linkedin_profile_pic'))+'">\n' +
                        '                    <a class="facebook-card-user-name" href="#" target="_blank">'+localStorage.getItem('linkedin_page_name')+'</a>\n' +
                        '                    <a class="facebook-card-icon facebook-dots" href="#"><i class="fa fa-linkedin" style="color:#1e88e5"></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">'+msg+'<a class="facebook-card-usertag" href="#" target="_blank"></a></p>\n' +
                        '                </div><hr>\n' +
                        '                <div style="height:22em;overflow-y: scroll" class="facebook-card-image">\n' +
                        '                    <img src="'+lk_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.totalLikes+'</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.totalComments+'</font> Comment</a>\n' +
                        '                    </p>\n' +
                        '                </div>\n' +
                        '\n' +
                        '                <div class="azul">\n' +
                        '                    <a onclick="mytins(\'' + post_date + '\', \'' + lk_img + '\', \'' + encodeURIComponent(escape(msg)) + '\', \'' + item.post_urn + '\')" class="btn btn-block btn-danger" style="background-color: #1e88e5; color:#fff;border-color: #fff"><i class="fa fa-linkedin-square fa-lg"></i> See Sentiments</a>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '        </div>')

                });

            });

        });

        function mytins($date,$img,$caption,$postid) {
            // console.log($caption);
            localStorage.setItem('linkedin_selected_date', $date);
            localStorage.setItem('linkedin_selected_fullimg', $img);
            localStorage.setItem('linkedin_selected_caption', $caption);
            localStorage.setItem('linkedin_selected_postid', $postid);
            console.log($date);
            console.log($img);


            localStorage.setItem('lk_pos','0');
            localStorage.setItem('lk_neg','0');
            localStorage.setItem('lk_neu','0');

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



    </script>
@endpush