@extends('smartadmin::layout')

@section('title')
@lang('Operator Dashboard')
@endsection

@section('breadcrumbs')
@include('smartadmin::components.breadcrumbs', ['category' => 'Dashboard', 'sub_category' => '', 'page_title' => 'Operator Dashboard'])
@endsection

@section('subheader')
@include('smartadmin::components.subheader', ['icon' => 'globe', 'page_title' => 'OPERATOR DASHBOARD', 'sub_title' => 'SubTitle', 'badge_text' => 'STICKER', 'punch_line' => 'This dashboard displays the membership and revenue KPIs for the operator from the last 5 years and benchmarks them against the sector based on the year-on-year growth rates.', 'sub_header' => ''])
@endsection

@section('content')

<div class="row">
@include('components.kpi_box_triple', [
    'colors' => ["#00ABBA", "#00B9BC", "#008F94", "#D3E5E7"],
    'title' => "MEMBERSHIPS",
    'tooltip' => "",
    'values' => [number_formater(end($operator_memberships)), array_key_last($operator_memberships)]
    ])
@include('components.kpi_box_double_single', [
    'colors' => ["#00ABBA", "#009FAA", "#00B9BC", "#008F94", "#D3E5E7"],
    'title' => '% CHANGE',
    'tooltip' => "",
    'values' => [number_formater($operator_memberships[2019]), growth($operator_memberships[2021], $operator_memberships[2019])."%", "2021 vs 2019"]
    ])
@include('components.kpi_box_triple', [
    'colors' => ["#DB005F", "#F00167", "#BC0043", "#D3E5E7"],
    'title' => "REVENUES",
    'tooltip' => "",
    'values' => ["€".number_formater(end($operator_revenues)), array_key_last($operator_revenues)]
    ])
@include('components.kpi_box_double_single', [
    'colors' => ["#DB005F", "#D4004C", "#F00167", "#BC0043", "#D3E5E7"],
    'title' => '% CHANGE',
    'tooltip' => "",
    'values' => ["€".number_formater($operator_revenues[2019]), growth($operator_revenues[2021], $operator_revenues[2019])."%", "2021 vs 2019"]
    ])
</div>

<div class="row">
    <div class="col-xl-6">
        <div id="panel-1" class="panel">
            <div class="panel-hdr">
                <h2>
                    Membership Graph
                </h2>
                @include('smartadmin::components.panel_toolbar')
            </div>
            <div class="panel-container show">
                {{-- <div class="panel-tag"></div> --}}
                <div class="panel-content">
                    <div id="graph_1" style="height: 400px; margin: 0 auto">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div id="panel-1" class="panel">
            <div class="panel-hdr">
                <h2>
                    Revenue Graph
                </h2>
                @include('smartadmin::components.panel_toolbar')
            </div>
            <div class="panel-container show">
                {{-- <div class="panel-tag"></div> --}}
                <div class="panel-content">
                    <div id="graph_2" style="height: 400px; margin: 0 auto">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div id="panel-1" class="panel">
            <div class="panel-hdr">
                <h2>
                    Membership Recovery
                </h2>
                @include('smartadmin::components.panel_toolbar')
            </div>
            <div class="panel-container show">
                {{-- <div class="panel-tag"></div> --}}
                <div class="panel-content">
                    <div id="graph_3" style="height: 400px; margin: 0 auto">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div id="panel-1" class="panel">
            <div class="panel-hdr">
                <h2>
                    Revenue Recovery
                </h2>
                @include('smartadmin::components.panel_toolbar')
            </div>
            <div class="panel-container show">
                {{-- <div class="panel-tag"></div> --}}
                <div class="panel-content">
                    <div id="graph_4" style="height: 400px; margin: 0 auto">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    @include('components.kpi_box_double_single', [
    'colors' => ["#00ABBA", "#009FAA", "#00B9BC", "#008F94", "#D3E5E7"],
    'title' => 'ATTRITION RATE',
    'tooltip' => "",
    'values' => ["6.55%", "8.41%", "Operator vs Sector"]
    ])
@include('components.kpi_box_double_single', [
    'colors' => ["#00ABBA", "#009FAA", "#00B9BC", "#008F94", "#D3E5E7"],
    'title' => 'JOINER RATE',
    'tooltip' => "",
    'values' => ["4.50%", "4.21%", "Operator vs Sector"]
    ])
@include('components.kpi_box_double_single', [
    'colors' => ["#00ABBA", "#009FAA", "#00B9BC", "#008F94", "#D3E5E7"],
    'title' => 'MEMBERSHIP LENGTH',
    'tooltip' => "(months)",
    'values' => ["15.40", "14.35", "Operator vs Sector"]
    ])
@include('components.kpi_box_double_single', [
    'colors' => ["#00ABBA", "#009FAA", "#00B9BC", "#008F94", "#D3E5E7"],
    'title' => 'FREQUENCY OF VIST',
    'tooltip' => "(visits/month)",
    'values' => ["7.20", "6.50", "Operator vs Sector"]
    ])
</div>

<div class="row">
    <div class="col-xl-12">
        <div id="panel-1" class="panel">
            <div class="panel-hdr">
                <h2>
                    Attrition vs Joiner Rate Analysis
                </h2>
                @include('smartadmin::components.panel_toolbar')
            </div>
            <div class="panel-container show">
                {{-- <div class="panel-tag"></div> --}}
                <div class="panel-content">
                    <div id="graph_5" style="height: 400px; margin: 0 auto">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 

@endsection

@section('pr-css')
@endsection

@section('pr-scripts')
@endsection

@push('scripts')

@include('layouts.charts.column', [
    'id' => 'graph_1',
    'title' => 'MEMBERSHIPS',
    'subtitle' => "Total Memberships (operator) in the last 5 years",
    'categories' => json_encode(array_keys($operator_memberships)),
    'colors'    => ['#00ABBA'],
    'x_title' => '',
    'xAxis' => true,
    'pointFormat' => '{point.y:,.0f}',
    'y_title' => '',
    'grouping' => true,
    'round' => true,
    'data' => "[{name: 'Operator', data: [".implode(',', $operator_memberships)."]}]",
    ])

@include('layouts.charts.column', [
    'id' => 'graph_2',
    'title' => 'REVENUES',
    'subtitle' => "Total Revenues (operator) in the last 5 years",
    'categories' => json_encode(array_keys($operator_revenues)),
    'colors'    => ['#DB005F'],
    'x_title' => '',
    'xAxis' => true,
    'pointFormat' => '€{point.y:,.0f}',
    'y_title' => '€',
    'grouping' => true,
    'round' => true,
    'symbol' => '€',
    'data' => "[{name: 'Operator', data: [".implode(',', $operator_revenues)."]}]",
])

@include('layouts.charts.column', [
    'id' => 'graph_3',
    'title' => 'MEMBERSHIP GROWTH ANALYSIS',
    'subtitle' => "Year-on-Year change for Memberships (operator vs sector)",
    'categories' => json_encode(array_keys($analysis_category)),
    'colors'    => ['#00ABBA', '#042155'],
    'x_title' => '',
    'xAxis' => true,
    'pointFormat' => '%{point.y:,.2f}',
    'y_title' => '%',
    'grouping' => true,
    'round' => false,
    'data' => "[{name: 'Operator', data: [".implode(',', $operator_analysis_membership)."]}, {name: 'Sector', data: [".implode(',', $sector_analysis_membership)."]}]",
])

@include('layouts.charts.column', [
    'id' => 'graph_4',
    'title' => 'REVENUE GROWTH ANALYSIS',
    'subtitle' => "Year-on-Year change for Revenues (operator vs sector)",
    'categories' => json_encode(array_keys($analysis_category)),
    'colors'    => ['#DB005F', '#FF9C09'],
    'x_title' => '',
    'xAxis' => true,
    'pointFormat' => '%{point.y:,.2f}',
    'y_title' => '%',
    'grouping' => true,
    'round' => false,
    'data' => "[{name: 'Operator', data: [".implode(',', $operator_analysis_revenue)."]}, {name: 'Sector', data: [".implode(',', $sector_analysis_revenue)."]}]",
])

<script type="text/javascript">
Highcharts.chart('graph_5', {

    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },
    colors: {!! json_encode(['#00ABBA']) !!},
    legend: {
        enabled: false
    },

    title: {
        text: 'Attrition vs Joiner Rate Analysis'
    },

    subtitle: {
        text: 'Operator vs Sector in 2021'
    },

    accessibility: {
        point: {
            valueDescriptionFormat: '{index}. {point.name}, Attrition Rate: {point.x}, Joiner Rate: {point.y}g, Membership Length: {point.z}%.'
        }
    },

    xAxis: {
        gridLineWidth: 1,
        title: {
            text: 'Attrition Rate'
        },
        labels: {
            format: '{value} %'
        },
        plotLines: [{
            color: 'black',
            dashStyle: 'dot',
            width: 2,
            value: 8.41,
            label: {
                rotation: 0,
                y: 15,
                style: {
                    fontStyle: 'italic'
                },
                text: 'Sector Average - Attrition Rate: 8.41%'
            },
            zIndex: 3
        }],
        accessibility: {
            rangeDescription: 'Range: 0 to 20%.'
        }
    },

    yAxis: {
        startOnTick: false,
        endOnTick: false,
        title: {
            text: 'Joiner Rate'
        },
        labels: {
            format: '{value} %'
        },
        maxPadding: 0.2,
        plotLines: [{
            color: 'black',
            dashStyle: 'dot',
            width: 2,
            value: 4.21,
            label: {
                align: 'left',
                style: {
                    fontStyle: 'italic'
                },
                text: 'Sector Average - Joiner Rate: 4.21%',
                x: 15
            },
            zIndex: 3
        }],
        accessibility: {
            rangeDescription: 'Range: 0 to 160 grams.'
        }
    },

    tooltip: {
        useHTML: true,
        headerFormat: '<table>',
        pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
            '<tr><th>Attrition Rate:</th><td>{point.x:,.2f}%</td></tr>' +
            '<tr><th>Joiner Rate:</th><td>{point.y:,.2f}%</td></tr>' +
            '<tr><th>Membership Lenght:</th><td>{point.z:,.2f}</td></tr>',
        footerFormat: '</table>',
        followPointer: true
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },

  series: [{
    data: [
        { x:0.0411 * 100, y: 0.0628 * 100, z: 17.7, name: 'Club 1', country: 'Club 1' },
        { x:0.0395 * 100, y: 0.0563 * 100, z: 11.78, name: 'Club 2', country: 'Club 2' },
        { x:0.053 * 100, y: 0.0562 * 100, z: 13.45, name: 'Club 3', country: 'Club 3' },
        { x:0.061 * 100, y: 0.0117 * 100, z: 11.96, name: 'Club 4', country: 'Club 4' },
        { x:0.0503 * 100, y: 0.0442 * 100, z: 17.31, name: 'Club 5', country: 'Club 5' },
        { x:0.0808 * 100, y: 0.0451 * 100, z: 18.61, name: 'Club 6', country: 'Club 6' },
        { x:0.1119 * 100, y: 0.0456 * 100, z: 16.94, name: 'Club 7', country: 'Club 7' },
        { x:0.022 * 100, y: 0.0534 * 100, z: 12.54, name: 'Club 8', country: 'Club 8' },
        { x:0.0952 * 100, y: 0.0292 * 100, z: 11.33, name: 'Club 9', country: 'Club 9' },
        { x:0.0605 * 100, y: 0.0686 * 100, z: 20.39, name: 'Club 10', country: 'Club 10' },
        { x:0.0597 * 100, y: 0.077 * 100, z: 9.86, name: 'Club 11', country: 'Club 11' },
        { x:0.0626 * 100, y: 0.0182 * 100, z: 18.87, name: 'Club 12', country: 'Club 12' },
        { x:0.1072 * 100, y: 0.0402 * 100, z: 20.32, name: 'Club 13', country: 'Club 13' },
        { x:0.0466 * 100, y: 0.0179 * 100, z: 15.81, name: 'Club 14', country: 'Club 14' },
        { x:0.0914 * 100, y: 0.0494 * 100, z: 14.09, name: 'Club 15', country: 'Club 15' }
    ]
  }]

});
</script>
@endpush