@extends('layouts.admin')


@section('style')
    <link rel="stylesheet" href="{{ asset('assets/bower/datatables.net-bs/css/dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="https://pivottable.js.org/dist/pivot.css">
    <style>
        div.data-group-select {
            padding: 0px;
            margin: 5px;
            display: block;
            vertical-align: top;
        }

        div.analytics-module {
            display: inline-block;
            float: left;
            vertical-align: top;
            margin: 0px 10px 10px 0px;
            width: 400px;
            height: 150px;
            padding: 0px 10px;
            border-radius: 10px;
            -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
            -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
            box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
            background-color: #FFFFFF;
            cursor: pointer;
        }

        div.analytics-module.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        div.analytics-module-image {
            width: 100px;
            height: 150px;
            display: inline-block;
            margin: 0px 5px;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
        }

        div.analytics-module-intro {
            width: 250px;
            height: 150px;
            display: inline-block;
            margin: 0px;
            vertical-align: top;
        }

        h3.analytics-module-title {
            width: 100%;
            font-weight: bold;
            font-size: 1.5em;
            color: #000000;
        }

        p.analytics-module-description {
            display: inline-block;
            width: 100%;
        }

        div.data-group-select-option {
            display: inline-block;
            height: 50px;
            margin: 0px;
            width: 140px;
            padding: 10px 5px;
            font-weight: bold;
            color: #b8c7ce;
            background-color: #222d32;
            border-bottom: 1px solid;
            border-color: #FFFFFF;
            cursor: pointer;
        }

        div.data-group-select-option:hover, div.data-group-select-option.selected {
            width: 160px;
            background-color: #555299;
            color: #FFFFFF;
            border-radius: 0px 20px 20px 0px;
        }

        div.data-group {
            padding: 0px;
            margin: 0px;
            min-height: 150px;
            min-width: 200px;
            vertical-align: top;
        }

        button.btn-data-select {
            background-color: #FFFFFF;
            color: #20b1bc;
            border: 0px;
            font-size: 2em;
            padding: 10px 25px;
            margin: 5px;
            border-radius: 3px;
        }

        button.btn-data-select:hover, button.btn-data-select.active {
            background-color: #20b1bc;
            color: #FFFFFF;
            border: 0px;
            border-radius: 3px;
        }

        button#btn-save-view {
            color: #20b1bc;
            border-radius: 3px;
            border: 2px solid #20b1bc;
            float: right;
        }

        button#btn-save-view:hover {
            background-color: #20b1bc;
            color: #FFFFFF;
        }

        div#data-view-container {
            display: inline-block;
            background-color: #FFFFFF;
            width: 100%;
            /* height: 110px; */
            margin: 5px 5px;
            padding: 5px;
            border-radius: 5px;
            vertical-align: top;
        }

        .hide {
            display: none;
        }

        p.data-group-title {
            font-weight: bold;
            font-size: 3em;
        }

        p.data-group-guidetext {
            font-size: 1.5em;
            font-weight: bold;
            margin: 0px;
        }

        div.data-group select {
            width: 100%;
        }

        div#data-view-container label {
            width: 80px;
            margin-right: 10px;
            display: inline-block;
        }

        input#data-view-title, input#data-view-description {
            width: calc(100% - 100px);
            display: inline-block;
            border: 1px solid #FFFFFF;
        }

        input#data-view-title:hover, input#data-view-description:hover, input#data-view-title:focus, input#data-view-description:focus {
            border: 1px solid #605ca8;
        }

        div#pivotUI {
            margin: 10px 5px;
            box-sizing: border-box;
            width: 100%;
            overflow: scroll;
        }

        div#pivotUI::-webkit-scrollbar {
            width: 12px; /* width of the entire scrollbar */
        }

        div#pivotUI::-webkit-scrollbar-track {
            background: #ecf0f5; /* color of the tracking area */
        }

        div#pivotUI::-webkit-scrollbar-thumb {
            background-color: #605ca8;
            border-radius: 20px;
            border: 5px solid #ecf0f5;
        }

        div#api_token_container {
            display: grid;
            float: left;
            vertical-align: top;
            margin: 0px 10px 10px 0px;
            width: 400px;
            height: 50px;
            padding: 0px 10px;
            border-radius: 10px;
            -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
            -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
            box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
            background-color: #FFFFFF;
            grid-template-columns: 20% 60% 20%;
        }

        div#api_token_container div {
            display: inline-grid;
            line-height: 50px;
        }

        div#api_token_content {
            background-color: #e9e9e9;
            text-align: center;
            font-weight: bold;
            overflow-x: scroll;
            padding: 0px 1em;
            cursor: pointer;
        }

        button#btn-refresh-api-token {
            color: #38737f;
            font-weight: bold;
            background-color: #FFFFFF;
            border: 0px;
            padding: 0px;
        }
    </style>
@endSection

@php
    $module_activation = getModuleActivationStatus();
@endphp

@section('content')

    <!-- Main content -->
    <section class="content">

        <div class='data-group-select'>
            @if($module_activation['plant'])
                <div class='analytics-module' datagroup='plant-rewards'>
                    <div class='analytics-module-image' style='background-image: url("../dist/img/AR_Icon.svg");'>
                    </div>
                    <div class='analytics-module-intro'>
                        <h3 class='analytics-module-title'>AR Gamification</h3>
                        <p class='analytics-module-description'>Drive Brand Engagement through the implementation of
                            Unique Augmented Realty Experience</p>
                    </div>
                </div>
            @endif

            @if($module_activation['dsc'])
                <div class='analytics-module' datagroup='digital-stampcard'>
                    <div class='analytics-module-image'
                         style='background-image: url("../dist/img/DigitalStampCard.png");'>
                    </div>
                    <div class='analytics-module-intro'>
                        <h3 class='analytics-module-title'>Digital Stamp Card</h3>
                        <p class='analytics-module-description'>Drive offline transaction and engagement for specific
                            merchants and timebelts</p>
                    </div>
                </div>
            @endif


            @if($module_activation['dvoucher'])
                <div class='analytics-module' datagroup='vouchers'>
                    <div class='analytics-module-image'
                         style='background-image: url("../dist/img/DigitalVoucher.png");'></div>
                    <div class='analytics-module-intro'>
                        <h3 class='analytics-module-title'>Digital Vouchers</h3>
                        <p class='analytics-module-description'>Drive instore conversion with online advertising and
                            automated reminders</p>
                    </div>
                </div>
            @endif

            @if($module_activation['dstw'])
                <div class='analytics-module disabled' datagroup='spinwheel'>
                    <div class='analytics-module-image' style='background-image: url("../dist/img/SpinWin.png");'></div>
                    <div class='analytics-module-intro'>
                        <h3 class='analytics-module-title'>Spin & Win</h3>
                        <p class='analytics-module-description'>Reward and delight consumers to capture customer data at
                            the Point-of-sale</p>
                    </div>
                </div>
            @endif

            @if(config('sys.super_qr_active'))
                <div class='analytics-module disabled' datagroup='superqr'>
                    <div class='analytics-module-image' style='background-image: url("../dist/img/SuperQR.png");'></div>
                    <div class='analytics-module-intro'>
                        <h3 class='analytics-module-title'>SuperQR</h3>
                        <p class='analytics-module-description'>Build a 360 view of offline activity across locations
                            through store check-ins</p>
                    </div>
                </div>
            @endif

            <!--
            <div class='analytics-module disabled' datagroup='pushads'>
                <div class='analytics-module-image' style='background-image: url("../dist/img/Pushads.png");'></div>
                <div class='analytics-module-intro'>
                    <h3 class='analytics-module-title'>PushAds</h3>
                    <p class='analytics-module-description'>Connect media spend and online advertising with your offline activity</p>
                </div>
            </div>
            -->

            @if(config('sys.footfall_active'))
                <div class='analytics-module' datagroup='footfall'>
                    <div class='analytics-module-image'
                         style='background-image: url("../dist/img/FootfallData.png");'></div>
                    <div class='analytics-module-intro'>
                        <h3 class='analytics-module-title'>Footfall</h3>
                        <p class='analytics-module-description'>Track hourly footfall across locations with Google's
                            footfall activity index</p>
                    </div>
                </div>
            @endif

            @if(config('sys.search_volume_active'))
            <div class='analytics-module' datagroup='retail-brands'>
                <div class='analytics-module-image'
                     style='background-image: url("../dist/img/GoogleSearchVolume.png");'></div>
                <div class='analytics-module-intro'>
                    <h3 class='analytics-module-title'>Brand Intent</h3>
                    <p class='analytics-module-description'>See online search intent across multiple categories, brands
                        and cities</p>
                </div>
            </div>
            @endif

            @hasrole('super-admin')

            <div id='api_token_container'>
                <div>API TOKEN</div>
                <div id='api_token_content'></div>
                <div>
                    <button id='btn-refresh-api-token'>Refresh</button>
                </div>
            </div>
            @endrole

        </div>

        <div id='dataSelection'>

            @if($module_activation['plant'])
            <!-- Plant Reward -->
            <div class='data-group' datagroup='plant-rewards' style='display: none;'>
                <p class='data-group-title'>Plant Rewards</p>
                <p class='data-group-guidetext'>1. Select a dataset</p>
                <p>
                    <button class='btn-data-select' datatype='users'>Users</button>
                    <button class='btn-data-select' datatype='redemptions'>Redemptions</button>
                    <button class='btn-data-select' datatype='plants'>Plants</button>
                    <button class='btn-data-select' datatype='tokens'>Tokens</button>
                    <button class='btn-data-select' datatype='growth-tokens'>Receipt Tokens</button>
                    <button class='btn-data-select' datatype='merchant-qrs'>Merchant QRs</button>
                    <button class='btn-data-select' datatype='daily-challenges'>Daily Challenges</button>
                    <button class='btn-data-select' datatype='ar-cores'>AR Cores</button>
                    <button class='btn-data-select' datatype='nutrition'>Nutrition</button>
                </p>
                <p>
                <p class='data-group-guidetext'>2. Select or create a view</p>
                <select class='data-view' datagroup='plant-rewards'>
                    <option value='' type='default'>Choose one</option>
                    <option value='create' type='default'>Create New View</option>
                </select>
                </p>
            </div>
            @endif

            @if($module_activation['dsc'])
            <!--Digital Stampcard-->
            <div class='data-group' datagroup='digital-stampcard' style='display: none;'>
                <p class='data-group-title'>Digital Stampcard</p>
                <p class='data-group-guidetext'>1. Select a dataset</p>
                <p>
                    <button class='btn-data-select' datatype='users'>Users</button>
                    <button class='btn-data-select' datatype='merchants'>Merchants</button>
                    <button class='btn-data-select' datatype='receipts'>Receipts</button>
                    <button class='btn-data-select' datatype='logs'>Raw Log</button>
                </p>
                <p>
                <p class='data-group-guidetext'>2. Select or create a view</p>
                <select class='data-view' datagroup='digital-stampcard'>
                    <option value='' type='default'>Choose one</option>
                    <option value='create' type='default'>Create New View</option>
                </select>
                </p>
            </div>
            @endif

            @if($module_activation['dvoucher'])
            <!--Vouchers-->
            <div class='data-group' datagroup='vouchers' style='display: none;'>
                <p class='data-group-title'>Vouchers</p>
                <p class='data-group-guidetext'>1. Select a dataset</p>
                <p>
                    <button class='btn-data-select' datatype='voucher-users'>Users</button>
                    <button class='btn-data-select' datatype='voucher-downloads'>Downloads</button>
                    <button class='btn-data-select' datatype='voucher-transactions'>Transactions</button>
                </p>
                <p>
                <p class='data-group-guidetext'>2. Select or create a view</p>
                <select class='data-view' datagroup='vouchers'>
                    <option value='' type='default'>Choose one</option>
                    <option value='create' type='default'>Create New View</option>
                </select>
                </p>
            </div>
            @endif

            @if($module_activation['dstw'])
            <!--Spin Wheel-->
            <div class='data-group' datagroup='spinwheel' style='display: none;'>
                <p class='data-group-title'>Spin Wheel</p>
                <p class='data-group-guidetext'>1. Select a dataset</p>
                <p>
                    <button class='btn-data-select' datatype='spinwheel-entries'>Entries</button>
                    <button class='btn-data-select' datatype='spinwheel-receipts'>Receipts</button>
                </p>
                <p>
                <p class='data-group-guidetext'>2. Select or create a view</p>
                <select class='data-view' datagroup='spinwheel'>
                    <option value='' type='default'>Choose one</option>
                    <option value='create' type='default'>Create New View</option>
                </select>
                </p>
            </div>
            @endif

            @if(config('sys.super_qr_active'))
            <!--SuperQR-->
                <div class='data-group' datagroup='superqr' style='display: none;'>
                    <p class='data-group-title'>SuperQR</p>
                    <p class='data-group-guidetext'>1. Select a dataset</p>
                    <p>
                        <button class='btn-data-select' datatype='superqr-checkin'>Check-ins</button>

                    </p>
                    <p>
                        <p class='data-group-guidetext'>2. Select or create a view</p>
                        <select class='data-view' datagroup='superqr'>
                            <option value='' type='default'>Choose one</option>
                            <option value='create' type='default'>Create New View</option>
                        </select>
                    </p>
                </div>
            @endif

            @if(config('sys.footfall_active'))
            <!--Footfall-->
                <div class='data-group' datagroup='footfall' style='display: none;'>
                    <p class='data-group-title'>Mall Footfall</p>
                    <p class='data-group-guidetext'>1. Select a dataset</p>
                    <p>
                        <button class='btn-data-select' datatype='asia-retail-malls-sg'>Singapore</button>
                        <button class='btn-data-select' datatype='asia-retail-malls-my'>Malaysia</button>
                        <button class='btn-data-select' datatype='asia-retail-malls-id'>Indonesia</button>
                    </p>
                    <p>
                        <p class='data-group-guidetext'>2. Select or create a view</p>
                        <select class='data-view' datagroup='footfall'>
                            <option value='' type='default'>Choose one</option>
                            <option value='create' type='default'>Create New View</option>
                        </select>
                    </p>
                </div>
            @endif

            @if(config('sys.search_volume_active'))
            <!--Retail Brands-->
                <div class='data-group' datagroup='retail-brands' style='display: none;'>
                    <p class='data-group-title'>Retail Brand Intent (Search Volume)</p>
                    <p class='data-group-guidetext'>1. Select a dataset</p>
                    <p>
                        <button class='btn-data-select' datatype='Asia'>Asia</button>
                    </p>
                    <p>
                        <p class='data-group-guidetext'>2. Select or create a view</p>
                        <select class='data-view' datagroup='retail-brands'>
                            <option value='0' type='default'>Choose one</option>
                            <option value='create' type='default'>Create New View</option>
                        </select>
                    </p>
                </div>
            @endif

            <div id='data-view-container' style='display: none;'>
                <p>
                    <label>Title</label>
                    <input id='data-view-title' placeholder='e.g. My analysis'></input>
                </p>
                <p>
                    <label>Description</label>
                    <input id='data-view-description'
                           placeholder='e.g. Activity of offline retail customers, by outlet and across time'></input>
                </p>
                <p>
                    <label id='view-status'></label>
                    <button id='btn-save-view'>Save</button>
                </p>
            </div>
        </div>
        <div id="pivotUI"></div>
    </section>


    <!-- /.content -->

@endsection


@section('script')
    <!-- DataTables -->
    <script src="{{ asset('assets/bower/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/bower/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-basic-latest.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://pivottable.js.org/dist/pivot.js"></script>
    <script type="text/javascript" src="https://pivottable.js.org/dist/plotly_renderers.js"></script>
    <script type="text/javascript" src="https://pivottable.js.org/dist/export_renderers.js"></script>
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <script>
        $(document).ready(function () {

            $(document).on("click", ".analytics-module", function (e) {

                window.datagroup = $(this).attr('datagroup');

                $(".data-group-select").hide();

                $(".data-group").hide();
                $(".data-group[datagroup=" + window.datagroup + "]").show();

            });
            $(document).on("click", "#btn-refresh-api-token", function (e) {
                $.ajax({
                    method: "post",
                    cache: false,
                    url: AJAX_URL + 'analytics_refresh_api_token',
                    data: '',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                }).done(function (response) {
                    var response = typeof response === 'string' ? JSON.parse(response) : response;

                    console.log(response);

                    $("#api_token_content").html(response.api_token);
                });
            });

            $(document).on("click", "#api_token_content", function (e) {

                var range = document.createRange();
                range.selectNode(document.getElementById("api_token_content"));
                window.getSelection().removeAllRanges(); // clear current selection
                window.getSelection().addRange(range); // to select text
                document.execCommand("copy");
                window.getSelection().removeAllRanges();// to deselect

                $("#btn-refresh-api-token").html("Copied");
                setTimeout(function () {
                    $("#btn-refresh-api-token").html("Refresh");
                }, 2000);

            });

            $(document).on("change", "select.data-view", function (e) {

                $("#pivotUI").html("<img src='../dist/img/loader-transparent.gif'></img>");
                $("#data-view-title").val("");
                $("#data-view-description").val("");

                var view = $(this).find("option:selected").val();
                console.log(view);
                if (view != '') {

                    $("#data-view-container").show();

                    if (view != 'create') {

                        var postdata = {'view_id': view};
                        console.log(postdata);
                        $.ajax({
                            method: "post",
                            cache: false,
                            url: AJAX_URL + 'analytics_get_view',
                            data: postdata,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                        }).done(function (response) {
                            var response = typeof response === 'string' ? JSON.parse(response) : response

                            if (response.status == 'success') {
                                console.log(response);

                                $("#data-view-title").val(response.view.title);
                                $("#data-view-description").val(response.view.description);
                                window.viewid = response.view.viewid;

                                display_data(window.datatype, response.view.setting);
                            }
                        });

                    } else {
                        display_data(window.datatype, null);
                    }


                }
            });

            $(document).on("click", "#btn-save-view", function (e) {

                var config = $("#pivotUI").data("pivotUIOptions");
                var config_copy = JSON.parse(JSON.stringify(config));
                delete config_copy["aggregators"];
                delete config_copy["renderers"];

                var postdata = {
                    'title': $("#data-view-title").val(),
                    'description': $("#data-view-description").val(),
                    'datagroup': window.datagroup,
                    'datatype': window.datatype,
                    'setting': JSON.stringify(config_copy)
                };

                console.log(postdata);
                $.ajax({
                    method: "post",
                    cache: false,
                    url: AJAX_URL + 'analytics_save_view',
                    data: postdata,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                }).done(function (response) {
                    var response = typeof response === 'string' ? JSON.parse(response) : response

                    if (response.status == 'success') {
                        console.log(response);
                        $("select.data-view[datagroup=" + window.datagroup + "]").append("<option value='" + response.save.view_id + "' datatype='" + response.save.data_type + "' type='customview'>" + response.save.title + "<option>");
                    }
                });
            });

            $(document).on("click", ".btn-data-select", function () {

                $(".btn-data-select").removeClass("active");
                $(this).addClass("active");

                $("select.data-view")[0].selectedIndex = 0;
                $("#data-view-container").hide();
                $("#pivotUI").html("");

                window.datatype = $(this).attr('datatype');
                console.log(window.datatype);

                var postdata = {'data_group': datagroup, 'data_type': datatype};
                console.log(postdata);

                $.ajax({
                    method: "post",
                    cache: false,
                    url: AJAX_URL + 'analytics_list_view',
                    data: postdata,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                }).done(function (response) {
                    var response = typeof response === 'string' ? JSON.parse(response) : response
                    $("select.data-view option[type=customview]").remove();

                    if (response.status == 'success') {
                        console.log(response);
                        $.each(response.views, function (index, item) {
                            $("select.data-view[datagroup=" + window.datagroup + "]").append("<option value='" + item.viewid + "' datatype='" + item.data_type + "' type='customview'>" + item.title + "</option>");
                        });

                    }
                });
                jQuery("select.data-view option:not([type])").remove();
                $("select.data-view").val($("select.data-view option:first").val());
            });


            function display_data(datatype, view_setting) {
                window.datatype = datatype;
                console.log(view_setting);

                var fn = {
                    'digital-stampcard': 'analyse_dsc',
                    'retail-brands': 'analyse_retailbrands',
                    'footfall': 'analyse_footfall',
                    'vouchers': 'analyse_vouchers',
                    'plant-rewards': 'analyse_plant_rewards',
                };

                var postdata = {'start_date': '', 'end_date': '', 'datatype': datatype};
                console.log(postdata);

                $.ajax({
                    method: "post",
                    cache: false,
                    url: AJAX_URL + fn[window.datagroup],
                    data: postdata,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                }).done(function (response) {

                    var response = typeof response === 'string' ? JSON.parse(response) : response
                    if (response.status == 'success') {

                        var core_data = response.data;
                        console.log(core_data);

                        google.load("visualization", "1", {packages: ["corechart", "charteditor"]});

                        var dateFormat = $.pivotUtilities.derivers.dateFormat;
                        var sortAs = $.pivotUtilities.sortAs;
                        var tpl = $.pivotUtilities.aggregatorTemplates;
                        var fmt = $.pivotUtilities.numberFormat({suffix: " ьз╕C"});

                        $(function () {

                            var derivers = $.pivotUtilities.derivers;
                            var renderers = $.extend(
                                $.pivotUtilities.renderers,
                                $.pivotUtilities.plotly_renderers,
                                $.pivotUtilities.d3_renderers,
                                $.pivotUtilities.export_renderers
                            );
                            var setting = {
                                renderers: renderers,
                                rendererOptions: {gchart: {width: 400, height: 400}}
                            }

                            if (view_setting !== null) {
                                $.extend(setting, view_setting);
                            }

                            console.log(setting);
                            $("#pivotUI").pivotUI(core_data, setting, true);

                        });
                    }

                });
            }


        });

    </script>
@endSection