@extends('template.master')

@section('page_styles')
{{--CUSTOM STYLES HERE--}}
<link rel="stylesheet" href="{{asset('assets/css/animate/animate.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/owl-carousel/owl.carousel.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/owl-carousel/owl.theme.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/leaflet/leaflet.min.css')}}">
<link rel="stylesheet" href="{{ asset('css/layout/dashboard.css') }}">
<link rel="stylesheet" href="{{ asset('css/layout/payment.css') }}">
    <style>
        #canvas {
            display: block;
            position: fixed;
            zindex: 1;
            pointer-events: none;
        }

    </style>
<style>
    #gathering-data-holder {
        background-image:url("{{asset('img/dashboard-sm.png')}}");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        /* The image used */
        /* Add the blur effect */
        filter: blur(8px);
        -webkit-filter: blur(8px);
        height:100%;
    }
    .module {
        position: relative;
    }
    .module::before {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-image:url("{{asset('img/dashboard-sm.png')}}");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        filter: grayscale(100%);
        /* Add the blur effect */
        filter: blur(8px);
        -webkit-filter: blur(8px);
    }
</style>
@stop

@section('content')

<div class="container-fluid">
    @if ($errors->any())
    <div class="alert alert-danger" style="width: 100%;">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    @include('payment.utilities.payment_form')

    <div class="feature-widgets">
        @include('payment.utilities.plan_headers')
    </div>

    @if($has_domain_data == 1)
        <div class="feature-widgets row" style="">
        <div class="col-md-4">
            <div class="widget widget-10 has-shadow">
                <!-- Begin Widget Header -->
                <div class="widget-header bordered d-flex align-items-center">
                    <h2>Real Time Social Scheduled Posts</h2>
{{--                    <div class="widget-options">--}}
{{--                        <div class="dropdown">--}}
{{--                            <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">--}}
{{--                                <i class="la la-ellipsis-h"></i>--}}
{{--                            </button>--}}
{{--                            <div class="dropdown-menu">--}}
{{--                                <a href="#" class="dropdown-item">--}}
{{--                                    <i class="la la-bell-slash"></i>Disable Alerts--}}
{{--                                </a>--}}
{{--                                <a href="#" class="dropdown-item">--}}
{{--                                    <i class="la la-edit"></i>Edit Widget--}}
{{--                                </a>--}}
{{--                                <a href="#" class="dropdown-item faq">--}}
{{--                                    <i class="la la-question-circle"></i>FAQ--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                </div>
                <!-- End Widget Header -->
                <!-- Begin Widget Body -->
                <div class="widget-body no-padding widget-scroll" style="max-height: 600px; overflow: hidden; outline: none;">
                    <ul class="ticket list-group w-100">
                        @if(empty($rts_data))
                            <li class="text-center text-muted">No Realtime Social Data</li>
                        @else
                            @foreach($rts_data as $rtsd)
                                <li class="list-group-item">
                                    <div class="media">
                                        <div class="media-left align-self-center pr-4">
                                            <img src="https://realtimesocial.com/template_files/{{$rtsd->image}}" class="user-img " alt="..." style="width:100px;">
                                        </div>
                                        <div class="media-body align-self-center">
                                            <div class="username">
                                                @if($rtsd->token_type == 2)
                                                    <h4>Facebook</h4>
                                                @elseif($rtsd->token_type == 3)
                                                    <h4>Twitter</h4>
                                                @elseif($rtsd->token_type == 13)
                                                    <h4>Instagram</h4>
                                                @else
                                                    <h4>Social Media Account</h4>
                                                @endif
                                            </div>
                                            <div class="msg">
                                                <p>
                                                    {{$rtsd->content}}
                                                </p>
                                            </div>
                                            <div class="status">
                                                <span class="open mr-2">{{date('F d, Y H:iA', strtotime($rtsd->post_date))}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        @endif

                    </ul>
                </div>
                <!-- End Widget Body -->
            </div>
        </div>
        <div class="col-md-4">
            <div class="widget widget-34 has-shadow">
                <!-- Begin Widget Header -->
                <div class="widget-header bordered d-flex align-items-center">
                    <h2>Real Time Reviews Ratings</h2>
                </div>
                <!-- End Widget Header -->
                <!-- Begin Widget Body -->
                <div class="widget-body hidden rtr-data">
                    <div class="spinner"></div>
                    <center><span style="padding: 2%;">Loading...</span></center>
                </div>
                <!-- End Widget Body -->
            </div>
        </div>

        <div class="col-md-4">
            <div class="widget widget-11 has-shadow">
                <div class="widget-header bordered d-flex align-items-center">
                    <h2>Real Time Chat Leads</h2>
                </div>
                <div class="widget-body widget-scroll rtc-data" style="max-height: 600px; overflow: hidden; outline: none;" tabindex="3">
                    <div class="spinner"></div>
                    <center><span style="padding: 2%;">Loading...</span></center>
                </div>
                <!-- End Widget Body -->
            </div>
        </div>
    </div>
    @else
        <div class="row">
        <div class="col-md-12">
            <div id="" class="module jumbotron text-center">
                <div class="">
                    <div class="module-inside">
                        <h1 class="display-4 text-white">Welcome to your Dashboard</h1>
                        <p class="lead text-white-50">
                            The system is working hard to learn more about your account. Overview data will be available once it gathers sufficient data.
                        </p>
                        <hr class="my-4">
                    </div>
                </div>

            </div>
        </div>
        </div>
    @endif
</div>

@stop

@section('page_modals')

    @if(auth()->user()->has_rts && auth()->user()->source == 'offer.realtimemarketing.com/rts')
        <iframe src="https://dashboard.realtimepro.io/dashboard/logout" style=width:1px;height:1px;display:none;"></iframe>
        <iframe src="https://www.realtimechat.com/logout" style=width:1px;height:1px;display:none;"></iframe>
        <!-- Modal -->
        <div class="modal fade" id="modalOfferSubscriptionSuccess" tabindex="-1" role="dialog" aria-labelledby="modalSubscriptionTitle" aria-hidden="true" style="width: 100%;" data-backdrop="static" data-keyboard="false">
            <canvas id="canvas"></canvas>
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">

                    <div class="modal-body">

                        <center>
                            <div class="image">
                                <img src="assets/img/rts.png" alt="logo" style="width: 200px;">
                            </div>
                            <strong>KEEP YOUR BRAND FRESH!</strong><br/>
                            <ul class="feature-list pl-3">
                                <li>
                                    <i class="la la-check-circle-o"></i>
                                    <span>Professionally written and designed social media posts.</span>
                                </li>
                                <li>
                                    <i class="la la-check-circle-o"></i>
                                    <span>Auto-publish up to 150 posts a month</span>
                                </li>
                                <li>
                                    <i class="la la-check-circle-o"></i>
                                    <span>Facebook, Twitter, and Instagram</span>
                                </li>
                            </ul>
                        </center>
                        <br/>
                       @php
                            $url = '#';

                            if(auth()->user()->has_rts && auth()->user()->source == 'offer.realtimemarketing.com/rts')
                            {
                                if(auth()->user()->has_rtr)
                                    $url = route('sso.rtr');
                                else if(auth()->user()->has_rts)
                                    $url = route('sso.rts');
                                else if(auth()->user()->has_rtc)
                                    $url = route('sso.rtc');
                            }
                            else
                            {
                                if($key == 'Real Time Reviews')
                                    $url = 'https://realtimereviews.com';
                                else if($key == 'Real Time Social')
                                    $url = 'https://realtimesocial.com';
                                else if($key == 'Real Time Chat')
                                    $url = 'https://realtimechat.com';
                            }
                        @endphp
                        <br/>

                        <a style="font-size: 2em;" class="btn btn-block btn-gradient-03" href="{{ $url }}" target="_blank">
                            @if(auth()->user()->has_rts && auth()->user()->source == 'offer.realtimemarketing.com/rts') Access My Account @else View Details @endif
                        </a>


                        <br/>
                    </div>
                </div>
            </div>
        </div>

    @elseif(session()->has('success_subscription'))
        <iframe src="https://dashboard.realtimepro.io/dashboard/logout" style=width:1px;height:1px;display:none;"></iframe>
        <iframe src="https://www.realtimechat.com/logout" style=width:1px;height:1px;display:none;"></iframe>
    <!-- Modal -->
    <div class="modal fade" id="modalSubscriptionSuccess" tabindex="-1" role="dialog" aria-labelledby="modalSubscriptionTitle" aria-hidden="true" style="width: 100%;" onclick="javascript: removeWelcomeModal()">
        <canvas id="canvas"></canvas>
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">

                <div class="modal-body">
                    <div class="container">
                        <div class="jumbotron text-center">
                            <h1 style="font-size:3.5em;">Thank you for signing up!</h1>
                            <p style="font-size:1.5em;">
                                We are super thrilled to have you on board! You've been added to our list and will hear from us soon.
                            </p>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-success btn-square text-white" data-dismiss="modal">
                    <h1 class="text-white">Okay, let's begin!</h1>
                </button>
            </div>
        </div>
    </div>
    @endif
@stop
@section('page_scripts')

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>


<script src="https://js.stripe.com/v3/"></script>
<!--CUSTOM SCRIPTS-->
<script src="{{asset('assets/vendors/js/owl-carousel/owl.carousel.min.js')}}"></script>
<script>

    $(document).ready(function()
    {
        load_rtc();
        load_rtr();
    });
    var stripe = Stripe('{{ $stripe_key }}');

    // Create an instance of Elements.
    var elements = stripe.elements();

    // Custom styling can be passed to options when creating an Element.
    // (Note that this demo uses a wider set of styles than the guide below.)
    var style = {
        base: {
            color: '#32325d',
            lineHeight: '18px',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };

    // Create an instance of the card Element.
    var card = elements.create('card', {
        style: style
    });

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');

    // Handle real-time validation errors from the card Element.
    card.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });

    // Handle form submission.
    var form = document.getElementById('checkout-form');
    form.addEventListener('submit', function(event) {
        event.preventDefault();

        stripe.createToken(card).then(function(result) {
            if (result.error) {
                // Inform the user if there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
            } else {
                // Send the token to your server.
                stripeTokenHandler(result.token);
            }
        });
    });

    // Choose Plan
    function purchase(id, name) {
        $('.plan').text(name + ' Subscription');
        $('.plan-hidden').val(id);
    }

    function removeWelcomeModal()
    {
        $.ajax({
           type: 'POST',
           url: 'action/removeWelcomeModal',
           data: {"_token": "{{ csrf_token() }}"},
           dataType: 'json',
           success: function(resp) {

           }
       });
    }


    @if(auth()->user()->has_rts && auth()->user()->source == 'offer.realtimemarketing.com/rts')
        $(function(){
            $('#modalOfferSubscriptionSuccess').modal('toggle');
        });

    @elseif(session()->has('success_subscription'))
        $(function(){
            $('#modalSubscriptionSuccess').modal('toggle');
        });
    (function () {
        // globals
        var canvas;
        var ctx;
        var W;
        var H;
        var mp = 150; //max particles
        var particles = [];
        var angle = 0;
        var tiltAngle = 0;
        var confettiActive = true;
        var animationComplete = true;
        var deactivationTimerHandler;
        var reactivationTimerHandler;
        var animationHandler;

        // objects

        var particleColors = {
            colorOptions: ["DodgerBlue", "OliveDrab", "Gold", "pink", "SlateBlue", "lightblue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"],
            colorIndex: 0,
            colorIncrementer: 0,
            colorThreshold: 10,
            getColor: function () {
                if (this.colorIncrementer >= 10) {
                    this.colorIncrementer = 0;
                    this.colorIndex++;
                    if (this.colorIndex >= this.colorOptions.length) {
                        this.colorIndex = 0;
                    }
                }
                this.colorIncrementer++;
                return this.colorOptions[this.colorIndex];
            }
        }

        function confettiParticle(color) {
            this.x = Math.random() * W; // x-coordinate
            this.y = (Math.random() * H) - H; //y-coordinate
            this.r = RandomFromTo(10, 30); //radius;
            this.d = (Math.random() * mp) + 10; //density;
            this.color = color;
            this.tilt = Math.floor(Math.random() * 10) - 10;
            this.tiltAngleIncremental = (Math.random() * 0.07) + .05;
            this.tiltAngle = 0;

            this.draw = function () {
                ctx.beginPath();
                ctx.lineWidth = this.r / 2;
                ctx.strokeStyle = this.color;
                ctx.moveTo(this.x + this.tilt + (this.r / 4), this.y);
                ctx.lineTo(this.x + this.tilt, this.y + this.tilt + (this.r / 4));
                return ctx.stroke();
            }
        }

        $(document).ready(function () {
            SetGlobals();
            InitializeButton();
            InitializeConfetti();

            $(window).resize(function () {
                W = window.innerWidth;
                H = window.innerHeight;
                canvas.width = W;
                canvas.height = H;
            });

        });

        function InitializeButton() {
            $('#stopButton').click(DeactivateConfetti);
            $('#startButton').click(RestartConfetti);
        }

        function SetGlobals() {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
            W = window.innerWidth;
            H = window.innerHeight;
            canvas.width = W;
            canvas.height = H;
        }

        function InitializeConfetti() {
            particles = [];
            animationComplete = false;
            for (var i = 0; i < mp; i++) {
                var particleColor = particleColors.getColor();
                particles.push(new confettiParticle(particleColor));
            }
            StartConfetti();
        }

        function Draw() {
            ctx.clearRect(0, 0, W, H);
            var results = [];
            for (var i = 0; i < mp; i++) {
                (function (j) {
                    results.push(particles[j].draw());
                })(i);
            }
            Update();

            return results;
        }

        function RandomFromTo(from, to) {
            return Math.floor(Math.random() * (to - from + 1) + from);
        }


        function Update() {
            var remainingFlakes = 0;
            var particle;
            angle += 0.01;
            tiltAngle += 0.1;

            for (var i = 0; i < mp; i++) {
                particle = particles[i];
                if (animationComplete) return;

                if (!confettiActive && particle.y < -15) {
                    particle.y = H + 100;
                    continue;
                }

                stepParticle(particle, i);

                if (particle.y <= H) {
                    remainingFlakes++;
                }
                CheckForReposition(particle, i);
            }

            if (remainingFlakes === 0) {
                StopConfetti();
            }
        }

        function CheckForReposition(particle, index) {
            if ((particle.x > W + 20 || particle.x < -20 || particle.y > H) && confettiActive) {
                if (index % 5 > 0 || index % 2 == 0) //66.67% of the flakes
                {
                    repositionParticle(particle, Math.random() * W, -10, Math.floor(Math.random() * 10) - 20);
                } else {
                    if (Math.sin(angle) > 0) {
                        //Enter from the left
                        repositionParticle(particle, -20, Math.random() * H, Math.floor(Math.random() * 10) - 20);
                    } else {
                        //Enter from the right
                        repositionParticle(particle, W + 20, Math.random() * H, Math.floor(Math.random() * 10) - 20);
                    }
                }
            }
        }
        function stepParticle(particle, particleIndex) {
            particle.tiltAngle += particle.tiltAngleIncremental;
            particle.y += (Math.cos(angle + particle.d) + 3 + particle.r / 2) / 2;
            particle.x += Math.sin(angle);
            particle.tilt = (Math.sin(particle.tiltAngle - (particleIndex / 3))) * 15;
        }

        function repositionParticle(particle, xCoordinate, yCoordinate, tilt) {
            particle.x = xCoordinate;
            particle.y = yCoordinate;
            particle.tilt = tilt;
        }

        function StartConfetti() {
            W = window.innerWidth;
            H = window.innerHeight;
            canvas.width = W;
            canvas.height = H;
            (function animloop() {
                if (animationComplete) return null;
                animationHandler = requestAnimFrame(animloop);
                return Draw();
            })();
        }

        function ClearTimers() {
            clearTimeout(reactivationTimerHandler);
            clearTimeout(animationHandler);
        }

        function DeactivateConfetti() {
            confettiActive = false;
            ClearTimers();
        }

        function StopConfetti() {
            animationComplete = true;
            if (ctx == undefined) return;
            ctx.clearRect(0, 0, W, H);
        }

        function RestartConfetti() {
            ClearTimers();
            StopConfetti();
            reactivationTimerHandler = setTimeout(function () {
                confettiActive = true;
                animationComplete = false;
                InitializeConfetti();
            }, 100);

        }

        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    return window.setTimeout(callback, 1000 / 60);
                };
        })();
    })();
    @endif




    function load_rtc(){
        $.ajax({
            type: 'POST',
            url: '{{route('dashboard.action', ['rtc_data'])}}',
            dataType: 'html',
            success: function(resp) {
                $('.rtc-data').html(resp);
            }
        });
    }

    function load_rtr(){
        $.ajax({
            type: 'POST',
            url: '{{route('dashboard.action', ['rtr_data'])}}',
            dataType: 'html',
            success: function(resp) {
                console.log('RTR:');
                console.table(resp);
                $('.rtr-data').html(resp);
            }
        });
    }

</script>
@stop