@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title')
Whistle Feed Report
@endsection
<style>
    .title-style {
        cursor: default !important;
        user-select: none !important;
        -webkit-font-smoothing: antialiased !important;
        font-family: Roboto !important;
        font-size: 16px !important;
        color: rgb(117, 117, 117);
    }

    .animated-chart g:nth-of-type(3) {
        transition: 1s;
        transform: scaleY(1);
        transform-origin: bottom;
    }

    .animated-chart.animated-chart-start g:nth-of-type(3) {
        transform: scaleY(0);
    }
</style>
<div class="container-fluid">
    <div class="card  mb-3">
        <div class="card-header d-flex flex-row justify-content-between align-items-baseline mt-1">
            <div>
                <h5><span class="content_head"></span>Feed Analytics</h5>
            </div>
            <div>
                <p class="content_middle"></p>
            </div>
            <div>
                <label for="start_date"><strong> From Date :: </strong> <span class="from_date"> </span> </label>
                <label class="ml-3" for="end_date"> <strong> To Date :: </strong> <span class="to_date"> </span> </label>
            </div>
        </div>
    </div>
    <div class="card p-4 mb-3">
        <div class="row">
            <div class="col-4 main_platform">
                <p class="title-style">Platform Based Data</p>
                <div class="section" data-fun='pieChartOne()'>
                    <div id="platform_pie"></div>
                </div>
            </div>
            <div class="col-8 main_language">
                <div class="section" data-fun='barCharttwo()'>
                    <div id="language_bar" class="animated-chart animated-chart-start"></div>
                </div>
            </div>
            <!-- </div>
    </div>
    <div class="card p-4 mb-3">
        <div class="row"> -->
            <div class="col-12 main_state">
                <div class="section" data-fun="barChartOne()">
                    <div id="state_bar" class="animated-chart animated-chart-start"></div>
                </div>
            </div>
            <!-- </div>
    </div>
    <div class="card p-4 mb-3">
        <div class="row"> -->
            <div class="col-8 main_campaign">
                <div class="section" data-fun='barChartthree()'>
                    <div id="campaign_bar" class="animated-chart animated-chart-start"></div>
                </div>
            </div>
            <div class="col-4 border-left main_revenue">
                <p class="title-style">Revenue Based Data</p>
                <div class="section" data-fun='pieChartTwo()'>
                    <div id="revenue_pie"></div>
                </div>
            </div>
            <!-- </div>
    </div>

    <div class="card p-4 mb-3">
        <div class="row"> -->
            <div class="col-4 main_publisher">
                <p class="title-style">Publisher Based Data</p>
                <div class="section" data-fun='barCharttwo()'>
                    <div id="publishers_pie"></div>
                </div>
            </div>
            <div class="col-8 border-left main_category">
                <div class="section" data-fun='barChartthree()'>
                    <div id="publisher_category_bar" class="animated-chart animated-chart-start"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="application/javascript" src="{{ asset('js/Whistle_Feed/googleCharts.js') }}"></script>
<script>
    var res_data = '';
    var url = new URL(window.location.href);
    var para = {
        'filter': String,
        'child_filter': String,
        'child_filter_value': String,
        'from_date': String,
        'to_date': String,
    }
    para.filter = url.searchParams.get("a");
    para.child_filter = url.searchParams.get("b");
    para.child_filter_value = url.searchParams.get("c");
    para.from_date = url.searchParams.get("d");
    para.to_date = url.searchParams.get("e");
    $('.from_date').html(para.from_date);
    $('.to_date').html(para.to_date);

    var content_head = para.child_filter;
    $('.content_head').html(content_head.toUpperCase() + ' Based ');

    var content_middle = para.filter == 1 ? 'Impressions' : (para.filter == 2 ? 'Clicks' : (para.filter == 3 ? 'Revenue' : 'CTR'));
    $('.content_middle').html(`${content_middle.toUpperCase()}  Data `);

    if (para.child_filter == 'platform') {
        $('.main_platform').hide();
        $('.main_language').addClass('col-12');
    } else if (para.child_filter == 'revenue') {
        $('.main_revenue').hide();
        $('.main_category').addClass('col-12');
    } else if (para.child_filter == 'publisher') {
        $('.main_publisher').hide();
        $('.main_category').addClass('col-12');
    } else if (para.child_filter == 'state') {
        $('.main_state').hide();
    } else if (para.child_filter == 'category') {
        $('.main_category').hide();
        // $('.main_category').addClass('col-12');
    } else if (para.child_filter == 'campaign') {
        $('.main_campaign').hide();
        $('.main_state').removeClass('col-12');
        $('.main_state').addClass('col-8');
    } else if (para.child_filter == 'language') {
        $('.main_language').hide();
        $('.main_state').removeClass('col-12');
        $('.main_state').addClass('col-8');
    }
    // Load the Visualization API and the piechart package.
    google.charts.load('current', {
        'packages': ['corechart', 'bar']
    });

    // Set a callback to run when the Google Visualization API is loaded.
    callForCharCreation();
    async function callForCharCreation() {
        await google.charts.setOnLoadCallback(platform_data)
        await google.charts.setOnLoadCallback(language_data)
        await google.charts.setOnLoadCallback(campaign_data)
        await google.charts.setOnLoadCallback(revenue_data)
        await google.charts.setOnLoadCallback(publishers_data)
        await google.charts.setOnLoadCallback(publisher_category_data)
        await google.charts.setOnLoadCallback(state_data)
        // await google.charts.setOnLoadCallback(device_data)
    }


    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and
    // draws it.
    function platform_data() {
        return new Promise((res, rej) => {
            $.ajax({
                url: "{{url('platform_based_data_child') }}",
                type: "get",
                data: {
                    'filter': para.filter,
                    'start_date': para.from_date,
                    'end_date': para.to_date,
                    'child_filter': para.child_filter,
                    'child_filter_value': para.child_filter_value,
                },
                cache: false,
                success: function(dataResult) {
                    if (dataResult) {
                        dataResult = JSON.parse(dataResult)
                        res_data = dataResult.original
                        return res(drawChartForPlatform(res_data))
                    } else {
                        return rej('error');
                    }
                }
            });
        });
    }

    function revenue_data() {
        return new Promise((res, rej) => {
            $.ajax({
                url: "{{url('revenue_based_data_child') }}",
                type: "get",
                data: {
                    'filter': para.filter,
                    'start_date': para.from_date,
                    'end_date': para.to_date,
                    'child_filter': para.child_filter,
                    'child_filter_value': para.child_filter_value,
                },
                cache: false,
                success: function(dataResult) {
                    if (dataResult) {
                        dataResult = JSON.parse(dataResult)
                        res_data = dataResult.original
                        return res(drawChartForRevenue(res_data))
                    } else {
                        return rej('error');
                    }
                }
            });
        });
    }

    function language_data() {
        return new Promise((res, rej) => {
            $.ajax({
                url: "{{url('language_based_data_child') }}",
                type: "get",
                data: {
                    'filter': para.filter,
                    'start_date': para.from_date,
                    'end_date': para.to_date,
                    'child_filter': para.child_filter,
                    'child_filter_value': para.child_filter_value,
                },
                cache: false,
                success: function(dataResult) {
                    if (dataResult) {
                        dataResult = JSON.parse(dataResult)
                        res_data = dataResult.original
                        return res(drawChartForLanguage(res_data))
                    } else {
                        return rej('error');
                    }
                }
            });
        });
    }


    function campaign_data() {
        return new Promise((res, rej) => {
            $.ajax({
                url: "{{url('campaign_based_data_child') }}",
                type: "get",
                data: {
                    'filter': para.filter,
                    'start_date': para.from_date,
                    'end_date': para.to_date,
                    'child_filter': para.child_filter,
                    'child_filter_value': para.child_filter_value,
                },
                cache: false,
                success: function(dataResult) {
                    if (dataResult) {
                        dataResult = JSON.parse(dataResult)
                        res_data = dataResult.original
                        return res(drawChartForCampaign(res_data))
                    } else {
                        return rej('error');
                    }
                }
            });
        });
    }

    function publishers_data() {
        return new Promise((res, rej) => {
            $.ajax({
                url: "{{url('publisher_based_data_child') }}",
                type: "get",
                data: {
                    'filter': para.filter,
                    'start_date': para.from_date,
                    'end_date': para.to_date,
                    'child_filter': para.child_filter,
                    'child_filter_value': para.child_filter_value,
                },
                cache: false,
                success: function(dataResult) {
                    if (dataResult) {
                        dataResult = JSON.parse(dataResult)
                        res_data = dataResult.original
                        return res(drawChartForPublisher(res_data))
                    } else {
                        return rej('error');
                    }
                }
            });
        });
    }

    function publisher_category_data() {
        return new Promise((res, rej) => {
            $.ajax({
                url: "{{url('category_based_data_child') }}",
                type: "get",
                data: {
                    'filter': para.filter,
                    'start_date': para.from_date,
                    'end_date': para.to_date,
                    'child_filter': para.child_filter,
                    'child_filter_value': para.child_filter_value,
                },
                cache: false,
                success: function(dataResult) {
                    if (dataResult) {
                        dataResult = JSON.parse(dataResult)
                        res_data = dataResult.original
                        return res(drawChartForPublisherCategories(res_data))
                    } else {
                        return rej('error');
                    }
                }
            });
        });
    }

    function state_data() {
        // drawChartForState();
        return new Promise((res, rej) => {
            $.ajax({
                url: "{{url('get_state_based_data') }}",
                type: "get",
                data: {},
                cache: false,
                success: function(dataResult) {
                    if (dataResult) {
                        dataResult = JSON.parse(dataResult)
                        res_data = dataResult.original
                        return res(drawChartForState(res_data))
                    } else {
                        return rej('error');
                    }
                }
            });
        });
    }

    function drawChartForPlatform(res_data = null) {
        if (res_data[0].website > 0 || res_data[0].app > 0) {
            var data = google.visualization.arrayToDataTable([
                ['Platform', 'Type'],
                ['Mobile', parseFloat(Math.round(res_data[0].app))],
                ['Website', parseFloat(Math.round(res_data[0].website))],
            ]);
        } else {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'website');
            data.addColumn('number', 'mobile');
        }

        var options = {
            'title': 'Platform Based Data',
            'width': 600,
            'height': 500,
            is3D: true,
            legend: {
                position: 'bottom'
            },
            chartArea: {
                left: 0,
                top: 0,
            },

        };
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('platform_pie'));
        chart.draw(data, options);

    }

    function drawChartForRevenue(res_data = null) {
        if (res_data[0].CPC > 0 || res_data[0].CPM > 0) {
            var data = google.visualization.arrayToDataTable([
                ['Platform', 'Type'],
                ['CPC', parseFloat(Math.round(res_data[0].CPC))],
                ['CPM', parseFloat(Math.round(res_data[0].CPM))],
            ]);
        } else {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Revenue');
            data.addColumn('number', 'Total');
        }

        // Set chart options
        var options = {
            'title': 'Revenue Based Data',
            'width': 400,
            'height': 500,
            is3D: true,
            legend: {
                position: 'bottom'
            },
            chartArea: {
                right: 0,
                left: 0,
                top: 0,
            }
        };
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('revenue_pie'));
        chart.draw(data, options);

    }


    function drawChartForLanguage(res_data = null) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'language');
        data.addColumn('number', 'total');

        for (i = 0; i < res_data.length; i++) {
            data.addRow([res_data[i].language, Number(res_data[i].total)]);
        }

        var options = {
            chart: {
                title: 'Language Based Data',
                subtitle: 'Subtitle here',
            },
            bars: 'vertical',
            height: 500,
            colors: ['#99e4a0'],

        };
        var chart = new google.charts.Bar(document.getElementById('language_bar'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
        google.visualization.events.addListener(chart, 'ready', () => {
            setTimeout(() => {
                document.getElementById('language_bar').classList.remove('animated-chart-start')
            }, 1000)
        });
    }

    function drawChartForCampaign(res_data = null) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Brand');
        data.addColumn('number', 'Total');
        if (res_data.length > 0) {
            for (i = 0; i < res_data.length; i++) {
                data.addRow([res_data[i].brandname + ` (${res_data[i].campaign_id})`, Number(res_data[i].total)]);
            }
        } else {
            data.addRow(['No Data Available', parseInt(0)]);
        }
        var options = {
            chart: {
                title: 'Campaign Based Data',
                subtitle: 'Subtitle here',
            },
            bars: 'vertical',
            height: 500,
            colors: ['#e1ad01'],
        };
        var chart = new google.charts.Bar(document.getElementById('campaign_bar'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
        google.visualization.events.addListener(chart, 'ready', () => {
            setTimeout(() => {
                document.getElementById('campaign_bar').classList.remove('animated-chart-start')
            }, 1000)
        });
    }

    function drawChartForPublisher(res_data = null) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Publishers');
        data.addColumn('number', 'Total');

        if (res_data.length > 0) {
            for (i = 0; i < res_data.length; i++) {
                data.addRow([res_data[i].account_name, Number(res_data[i].total)]);
            }
        } else {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Publishers');
            data.addColumn('number', 'total');
        }
        // Set chart options
        var options = {
            title: 'Publisher Based Data',
            'width': 600,
            'height': 500,
            is3D: true,
            legend: {
                position: 'bottom'
            },
            chartArea: {
                left: 0,
                top: 0,
            },
        };
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('publishers_pie'));
        chart.draw(data, options);

    }

    function drawChartForPublisherCategories(res_data = null) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Category');
        data.addColumn('number', 'Total');
        if (res_data.length > 0) {
            for (i = 0; i < res_data.length; i++) {
                data.addRow([res_data[i].type_name, Number(res_data[i].total)]);
            }
        } else {
            data.addRow(['No Data Available', parseInt(0)]);
        }
        var options = {
            chart: {
                title: 'Category Based Data',
                subtitle: 'Subtitle here',
            },
            bars: 'vertical',
            height: 500,
            legend: {
                position: 'bottom'
            },
            colors: ['#7570b3'],
        };
        var chart = new google.charts.Bar(document.getElementById('publisher_category_bar'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
        google.visualization.events.addListener(chart, 'ready', () => {
            setTimeout(() => {
                document.getElementById('publisher_category_bar').classList.remove('animated-chart-start')
            }, 1000)
        });
    }

    function drawChartForState(res_data = null) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'username');
        data.addColumn('number', 'credits');

        for (i = 0; i < res_data.length; i++) {
            data.addRow([res_data[i].username, Number(res_data[i].credits)]);
        }

        var options = {
            chart: {
                title: 'State Based Data',
                subtitle: 'Subtitle here',
            },
            bars: 'vertical',
            height: 500
        };
        var chart = new google.charts.Bar(document.getElementById('state_bar'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
        google.visualization.events.addListener(chart, 'ready', () => {
            setTimeout(() => {
                document.getElementById('state_bar').classList.remove('animated-chart-start')
            }, 1000)
        });
    }
</script>
@endsection