@extends('app')
@push('styles')
    <style>

        .courses-container {
            height: 5em;
            margin-bottom: 2em;
        }

        .course {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
            display: flex;
            max-width: 100%;
            margin: 20px;
            overflow: hidden;
            /*width: 700px;*/
        }

        .course h6 {
            opacity: 0.6;
            margin: 0;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .course h2 {
            letter-spacing: 1px;
            margin: 10px 0;
        }

        .course-preview {
            /*background-color: #2A265F;*/
            background-image: url({{asset('NewUI/Register/images/twitter-trending-campaign.jpg')}});
            background-size: cover;
            color: #fff;
            padding: 30px;
            max-width: 250px;
        }

        .course-preview a {
            color: #fff;
            display: inline-block;
            font-size: 12px;
            opacity: 0.6;
            margin-top: 30px;
            text-decoration: none;
        }

        .course-info {
            padding: 30px;
            position: relative;
            width: 100%;
        }

        .progress-container {
            position: absolute;
            top: 30px;
            right: 30px;
            text-align: right;
            width: 50px;
        }

        .progress {
            background-color: #ddd;
            border-radius: 3px;
            height: 5px;
            width: 100%;
        }

        .progress::after {
            border-radius: 3px;
            background-color: #2A265F;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 5px;
            width: 80%;
        }

        .progress-text {
            font-size: 10px;
            opacity: 0.6;
            letter-spacing: 1px;
        }

        .btn {
            background-color: #2A265F;
            border: 0;
            border-radius: 50px;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
            color: #fff;
            font-size: 16px;
            padding: 12px 25px;
            position: absolute;
            bottom: 30px;
            right: 30px;
            letter-spacing: 1px;
        }


        .floating-btn {
            border-radius: 26.5px;
            background-color: #001F61;
            border: 1px solid #001F61;
            box-shadow: 0 16px 22px -17px #03153B;
            color: #fff;
            cursor: pointer;
            font-size: 16px;
            line-height: 20px;
            padding: 12px 20px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 999;
        }

        .floating-btn:hover {
            background-color: #ffffff;
            color: #001F61;
        }

        .floating-btn:focus {
            outline: none;
        }

        .floating-text {
            background-color: #001F61;
            border-radius: 10px 10px 0 0;
            color: #fff;
            padding: 7px 15px;
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            z-index: 998;
        }

        .floating-text a {
            color: #FF7500;
            text-decoration: none;
        }

        @media screen and (max-width: 480px) {

            .social-panel-container.visible {
                transform: translateX(0px);
            }

            .floating-btn {
                right: 10px;
            }
        }
    </style>
@endpush

<br>

<div class="col-md-12">
    <div class="widget widget-shadow text" style="background-image: url({{asset('NewUI/dashboard/assets/images/twitter_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"> Whats Trending </p>
            </div>
        </div>
    </div>
</div>

{{--<div class="col-lg-5" style="float: right;margin-top: -5em">--}}
{{--    <select class="form-control" id="location_changer" onchange="lowkey()">--}}
{{--        <option>-- Select Location -- </option>--}}
{{--        <option value="1326075">Accra </option>--}}
{{--        <option value="1330595">Kumasi </option>--}}
{{--    </select>--}}
{{--</div>--}}


    <div class="container-fluid">
            <div id="trends">

{{--                <div class="col-lg-4">--}}
{{--                    <div class="courses-container">--}}
{{--                        <div class="course">--}}
{{--                            <div class="course-preview" style="width: 7em !important;">--}}

{{--                            </div>--}}


{{--                            <div class="course-info">--}}
{{--                                <div class="progress-container">--}}
{{--                                    <div class="progress"></div>--}}
{{--                                    <span class="progress-text">--}}
{{--                                    6/9 Challenges--}}
{{--                                </span>--}}
{{--                                </div>--}}
{{--                                <div style="width: 13em">--}}
{{--                                    <h6 >Chapter 4 My Loive is Good</h6>--}}
{{--                                </div>--}}

{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </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 src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

    <script>


        $(document).ready(function () {

            localStorage.setItem('loc','1326075');
            // $('#demo').append('What\'s Trending in Accra');

            // Consume End point for user details
            var twitter_access_token = '{!!  $twitter_accesstoken->twitter_access_token !!}';
            var twitter_token_secret = '{!!  $twitter_access_secret->twitter_token_secret !!}';
            localStorage.setItem('twitter_access_token', twitter_access_token);
            localStorage.setItem('twitter_token_secret', twitter_token_secret);

            var mydata = {
                'access_token': twitter_access_token,
                'access_token_secret': twitter_token_secret,
                'location_id': localStorage.getItem('loc')
            };

            var url = 'https://social.snwolley.com/twitter-api/get/trends';


            $.post(url, mydata, function (data) {
                console.log(data);
                $.each(data.data[0].trends, function (i, item) {

                    var twitter_count;
                    if(item.tweet_volume == null)
                    twitter_count = '0';
                    else
                     twitter_count = item.tweet_volume;



                    $('#trends').append('<div class="col-lg-4">\n' +
                        '                    <a onclick="mytins(\'' + item.name + '\')" target="_blank"><div class="courses-container">\n' +
                        '                        <div class="course">\n' +
                        '                            <div class="course-preview" style="width: 2em !important;">\n' +
                        '\n' +
                        '                            </div>\n' +
                        '\n' +
                        '\n' +
                        '                            <div class="course-info">\n' +
                        '                                <div class="progress-container">\n' +
                        '                                    <div class="progress"></div>\n' +
                        '                                    <span style="margin-left: -10em" class="progress-text">\n' +
                        '                                    '+twitter_count+' Tweets\n' +
                        '                                </span>\n' +
                        '                                </div>\n' +
                        '                                <div style="width: 10em">\n' +
                        '                                    <h6 >'+item.name+'</h6>\n' +
                        '                                </div>\n' +
                        '\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                    </div></a>\n' +
                        '                </div>');
                });
            });


        });


        function mytins($trend_name) {
            // console.log($caption);
            localStorage.setItem('trend_name', $trend_name);

            localStorage.setItem('trend_pos', '0');
            localStorage.setItem('trend_neg', '0');
            localStorage.setItem('trend_neu', '0');

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


    </script>

@endpush