@extends('smartadmin::layout')

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

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

@section('subheader')
@include('smartadmin::components.subheader', ['icon' => 'globe', 'page_title' => 'SECTOR DASHBOARD', 'sub_title' => 'SubTitle', 'badge_text' => 'STICKER', 'punch_line' => 'This dashboard displays the total membership and revenue KPIs for the sector in 2021 and benchmarks it to the pre-Covid period in 2019. The graphs below summarise the annual sector totals from the last 5 years and the year-on-year change for the membership and revenues.', 'sub_header' => ''])
@endsection

@section('content')

<div class="row">
@include('components.kpi_box_triple', [
    'size' => 'col-sm-12 col-md-3 col-xl-3',
    'colors' => ["#042155", "#183a79", "#122c5b", "#dee0e4"],
    'title' => "MEMBERSHIPS",
    'tooltip' => "",
    'values' => [number_formater(end($sector_memberships)), array_key_last($sector_memberships)]
    ])
@include('components.kpi_box_double_single', [
    'size' => 'col-sm-12 col-md-3 col-xl-3',
    'colors' => ["#042155", "#013162", "#183a79", "#122c5b", "#dee0e4"],
    'title' => '% CHANGE',
    'tooltip' => "",
    'values' => [number_formater($sector_memberships[2019]), growth($sector_memberships[2021], $sector_memberships[2019])."%", "2021 vs 2019"]
    ])
@include('components.kpi_box_triple', [
    'size' => 'col-sm-12 col-md-3 col-xl-3',
    'colors' => ["#FF9C09", "#FFAA18", "#EE8700", "#FEE8DE"],
    'title' => "REVENUES",
    'tooltip' => "",
    'values' => ["€".number_formater(end($sector_revenues)), array_key_last($sector_revenues)]
    ])
@include('components.kpi_box_double_single', [
    'size' => 'col-sm-12 col-md-3 col-xl-3',
    'colors' => ["#FF9C09", "#FF8C00", "#FFAA18", "#EE8700", "#FEE8DE"],
    'title' => '% CHANGE',
    'tooltip' => "",
    'values' => ["€".number_formater($sector_revenues[2019]), growth($sector_revenues[2021], $sector_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-12">
        <div id="panel-1" class="panel">
            <div class="panel-hdr">
                <h2>
                    Sector 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_3" 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 (sector) in the last 5 years",
    'categories' => json_encode(array_keys($sector_memberships)),
    'colors'    => ["#042155"],
    'x_title' => '',
    'xAxis' => true,
    'pointFormat' => '{point.y:,.0f}',
    'y_title' => '',
    'grouping' => true,
    'round' => true,
    'data' => "[{name: 'Sector', data: [".implode(',', $sector_memberships)."]}]",
    ])

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

@include('layouts.charts.column', [
    'id' => 'graph_3',
    'title' => 'SECTOR GROWTH ANALYSIS',
    'subtitle' => "Year-on-Year change for Memberships and Revenues (sector)",
    'categories' => json_encode(array_keys($analysis_category)),
    'colors'    => ['#042155', '#FF9C09'],
    'x_title' => '',
    'xAxis' => true,
    'pointFormat' => '%{point.y:,.2f}',
    'y_title' => '%',
    'grouping' => true,
    'round' => false,
    'data' => "[{name: 'Membership', data: [".implode(',', $sector_analysis_membership)."]}, {name: 'Revenue', data: [".implode(',', $sector_analysis_revenue)."]}]",
])

<script type="text/javascript">

</script>
@endpush