@extends('admin.layouts.default')

{{-- Page title --}}
@section('title')
    ASM Report
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')
    <link href="{{ asset('assets/css/pages/pareto.css') }}" rel="stylesheet" type="text/css"/>
@stop

{{-- Page content --}}
@section('content')
    <section class="content-header">
        @if(isset($report_id))
            <h1>Edit Report</h1>
        @else
            <h1>Create Report</h1>
        @endif
    </section>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <section class="content">
        <!--main content-->
        <!--row starts-->
        <div class="row" id="app" v-cloak>
            <form class="report-form form-horizontal pareto-menu" action="#" id="report-form">
                <div class="col-md-4 report-filters" style="    float: none;">
                    <div class="" id="hidepanel1">
                        <div class="panel-body">
                            <div class="form-position">
                                <button type="button" onClick="clearForm(this.form)" id="button-lg"
                                        class="btn btn-responsive btn-primary btn-lg">
                                    Clear Inputs
                                </button>
                            </div>
                            <h2 class="first-tier-trigger">
                                <i class="glyphicon glyphicon-chevron-down showhide clickable"></i>
                                FILTERS
                            </h2>
                            <div class="input-block">
                                @include("admin.layouts.reports.filters")
                            </div>
                            <div class="form-position">
                                <button type="submit" v-on:click="applyReportFilters()" id="button-lg" class="submit-report btn btn-responsive btn-primary btn-lg">
                                    REFRESH
                                </button>

                                @if($request->get("filter-date-from") && $request->get("filter-date-to"))
                                    <button v-on:click="downloadScreenshot(true)" type="button" id="button-lg" class="save-report btn btn-responsive btn-primary btn-lg">
                                        Save
                                    </button>
                                    <button v-on:click="downloadScreenshot" type="button" id="button-lg" class="download-pdf-report btn btn-responsive btn-primary btn-lg">
                                        PDF
                                    </button>

                                    <div id="overlay_report_charts" style="display: none">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div></div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="" id="report-charts">
                    @if($request->get("filter-date-from") && $request->get("filter-date-to"))
                        {{--CHARTS--}}
                        <div class="charts-and-tables">
                            <section class="charts">
                                <div class="chart-sales-overview-ytd half-chart export-item">
                                    <div class="chart_title title_content">Sales Overview YTD</div>
                                    <div class="graph graph">
                                        <canvas id="sales_overview_chart" style="height: 200px !important;"></canvas>
                                    </div>
                                    <div id="overlay_sales_overview_chart" class="loading-overlay">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>

                                <div class="chart-sales-dev-last-year half-chart export-item">
                                    <div class="chart_title title_content">Sales Development Last 12 Months</div>
                                    <div class="graph graph">
                                        <canvas id="sales_dev_last_year_chart" style="height: 200px !important;"></canvas>
                                    </div>
                                    <div id="overlay_sales_dev_last_year_chart" class="loading-overlay">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>

                                <div class="chart-pipeline-overview half-chart export-item">
                                    <div class="chart_title title_content">Pipeline Overview</div>
                                    <div class="graph graph">
                                        <canvas id="pipeline_overview_chart" style="height: 200px !important;"></canvas>
                                    </div>
                                    <div id="overlay_pipeline_overview_chart" class="loading-overlay">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>

                                <div class="chart-sales-funnel half-chart export-item">
                                    <div class="chart_title title_content">Sales Funnel</div>
                                    <div class="graph graph">
                                        <div id="sales_funnel_chart"></div>
                                        <div id="highlighter"></div>
                                        <div id="mouseoverbox" class="mouseoverbox"></div>
                                        <div v-for='(no, index) in 5' :key='index' style="display: inline-block; box-sizing: border-box; text-align: center" :id="`treemap_${index}`"></div>
                                    </div>
                                    <div id="overlay_sales_funnel_chart" class="loading-overlay">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>
                            </section>

                            <section class="tables" style="">
                                <div>
                                    <div class="actuals-table export-item">
                                        <div class="table-title mt-5">Actuals</div>
                                        <table id="actuals-table" class="table">
                                            <thead>
                                                <tr>
                                                    <th scope="col" colspan="3"></th>
                                                    <th scope="col" colspan="8" class="background-darkest-gray">Net Sales (k)</th>
                                                    <th scope="col" colspan="2" class="background-dark-gray">CM (%)</th>
                                                    <th scope="col" colspan="2" class="background-gray">Order Intake (k)</th>
                                                    <th scope="col" colspan="2" class="background-light-gray">Order Backlog (k)</th>
                                                    <th scope="col" colspan="3" class="background-light-green">Pipeline In Progress (k)</th>
                                                    <th scope="col">Visits</th>
                                                </tr>
                                                <tr>
                                                    <th scope="col" class="background-light-gray">Total</th>
                                                    <th scope="col" class="background-light-gray">Time Frame</th>
                                                    <th scope="col" class="background-light-gray">Unit</th>
                                                    <th scope="col" class="background-light-gray">Vol</th>
                                                    <th scope="col" class="background-orange-red">ACT</th>
                                                    <th scope="col" class="background-light-gray">Vol</th>
                                                    <th scope="col" class="background-light-gray">PY</th>
                                                    <th scope="col" class="background-light-gray">Dev in %</th>
                                                    <th scope="col" class="background-light-gray">Vol</th>
                                                    <th scope="col" class="background-light-gray">BUD</th>
                                                    <th scope="col" class="background-light-gray">Dev in %</th>
                                                    <th scope="col" class="background-orange-red">ACT</th>
                                                    <th scope="col" class="background-light-gray">PY</th>
                                                    <th scope="col" class="background-light-gray">Vol</th>
                                                    <th scope="col" class="background-light-gray">Sales Value</th>
                                                    <th scope="col" class="background-light-gray">Vol</th>
                                                    <th scope="col" class="background-light-gray">Sales Value</th>
                                                    <th scope="col" class="background-light-gray"># Opps</th>
                                                    <th scope="col" class="background-light-gray">Sales Value</th>
                                                    <th scope="col" class="background-light-gray">CM in %</th>
                                                    <th scope="col" class="background-light-gray"># Visits</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-if="isEmptyObject(actualsData)" class="no-data-message d-none">
                                                    <td colspan="16" class="empty-row">No data available.</td>
                                                </tr>

                                                <tr v-for="(entry, i) in actualsData" :key="i">
                                                    <td style="text-align: left">Total</td>
                                                    <td style="text-align: left">@{{ entry.Time_Frame }}</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.Units)">
                                                        <table class="units_text_table">
                                                            <tr v-for="(unit, volume) in entry.Units" :key="volume">
                                                                <td>@{{ unit }}</td>
                                                            </tr>
                                                            <tr>
                                                                <td style="font-weight: 900">Total</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td  v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_ACT)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(count, volume) in entry.Units_Total_ACT" :key="volume">
                                                                <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td  v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.ACT_Net_Sales_Sum)">
                                                        <table class="units_numbers_table background-orange-red">
                                                            <tr v-for="(sum, volume) in entry.ACT_Net_Sales_Sum" :key="volume">
                                                                <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                                <td v-else>&nbsp;</td>

                                                            </tr>
                                                            <tr v-if="!isEmptyString(entry.Total_ACT_Net_Sales_Sum)">
                                                                <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_ACT_Net_Sales_Sum, false, true) }}</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_PY)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(count, volume) in entry.Units_Total_PY" :key="volume">
                                                                <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.PY_Net_Sales_Sum)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(sum, volume) in entry.PY_Net_Sales_Sum" :key="volume">
                                                                <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                            <tr v-if="!isEmptyString(entry.Total_PY_Net_Sales_Sum)">
                                                                <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_PY_Net_Sales_Sum, false, true) }}</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_PY)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(sum, volume) in entry.Units_Total_PY" :key="volume">
                                                                <td >&nbsp;</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="bottom_text" :class="{'highlight-red': entry.ACT_PY_DEV_Percentage < 0}">
                                                                    @{{ formatChartNumber(entry.ACT_PY_DEV_Percentage) }}%
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>


                                                    <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_BUD)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(count, volume) in entry.Units_Total_BUD" :key="volume">
                                                                <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.BUD_Net_Sales_Sum)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(sum, volume) in entry.BUD_Net_Sales_Sum" :key="volume">
                                                                <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                            <tr v-if="!isEmptyString(entry.Total_BUD_Net_Sales_Sum)">
                                                                <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_BUD_Net_Sales_Sum, false, true) }}</td>
                                                            </tr>

                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_BUD)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(sum, volume) in entry.Units_Total_BUD" :key="volume">
                                                                <td >&nbsp;</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="bottom_text" :class="{'highlight-red': entry.ACT_BUD_DEV_Percentage < 0}">
                                                                    @{{ formatChartNumber(entry.ACT_BUD_DEV_Percentage) }}%
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>


                                                    <td class="units_td" v-if="!isEmptyObject(entry.ACT_CM_Percentage)">
                                                        <table class="units_numbers_table background-orange-red">
                                                            <tr v-for="(sum, volume) in entry.ACT_CM_Percentage" :key="volume">
                                                                <td v-if="!isEmptyString(sum)">@{{ formatChartNumber(sum) }}%</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.PY_CM_Percentage)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(sum, volume) in entry.PY_CM_Percentage" :key="volume">
                                                                <td v-if="!isEmptyString(sum)">@{{ formatChartNumber(sum) }}%</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_OI)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(count, volume) in entry.Units_Total_OI" :key="volume">
                                                                <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.OI_Net_Sales_Sum)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(sum, volume) in entry.OI_Net_Sales_Sum" :key="volume">
                                                                <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                            <tr v-if="!isEmptyString(entry.Total_OI_Net_Sales_Sum)">
                                                                <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_OI_Net_Sales_Sum, false, true) }}</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_OB)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(count, volume) in entry.Units_Total_OB" :key="volume">
                                                                <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td class="units_td" v-if="!isEmptyObject(entry.OB_Net_Sales_Sum)">
                                                        <table class="units_numbers_table">
                                                            <tr v-for="(sum, volume) in entry.OB_Net_Sales_Sum" :key="volume">
                                                                <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                                <td v-else>&nbsp;</td>
                                                            </tr>
                                                            <tr v-if="!isEmptyString(entry.Total_OB_Net_Sales_Sum)">
                                                                <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_OB_Net_Sales_Sum, false, true) }}</td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td v-else>&nbsp;</td>

                                                    <td>@{{ entry.No_Opps }}</td>
                                                    <td>€ @{{ formatChartNumber(entry.Opp_Net_Sales_Sum, false, true) }}</td>
                                                    <td>@{{ formatChartNumber(entry.Opp_CM_Percentage) }}%</td>
                                                    <td>@{{ entry.No_Visits }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div id="overlay_actuals_table" class="loading-overlay">
                                            <div class="lds-roller">
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                            </div>
                                            <div></div>
                                        </div>
                                    </div>

                                    <div class="chart-lost-opp-reasons export-item">
                                        <div id="overlay_lost_opp_reasons_chart" class="loading-overlay">
                                            <div class="lds-roller">
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                            </div>
                                            <div></div>
                                        </div>

                                        <div class="chart_title title_content">Lost opportunities - Reasons (Sales Value)</div>
                                        <div class="graph graph">
                                            <canvas id="lost_opp_reasons_chart" style="height: 200px !important;"></canvas>
                                        </div>
                                    </div>
                                </div>


                                <div class="forecast-table export-item">
                                    <div class="table-title mt-5">Forecast</div>
                                    <table id="forecast-table" class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col" class="background-light-gray">Total</th>
                                                <th scope="col" class="background-light-gray">Time Frame</th>
                                                <th scope="col" class="background-orange-red">FC</th>
                                                <th scope="col" class="background-light-gray">BUD</th>
                                                <th scope="col" class="background-light-gray">Dev in %</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-if="isEmptyObject(forecastData)" class="no-data-message d-none">
                                                <td colspan="5" class="empty-row">No data available.</td>
                                            </tr>

                                            <tr v-for="(entry, i) in forecastData" :key="i">
                                                <td>Total</td>
                                                <td>@{{ entry.Time_Frame }}</td>
                                                <td class="background-orange-red">€ @{{ formatChartNumber(entry.Forecast_Net_Sales_Sum) }}</td>
                                                <td>€ @{{ formatChartNumber(entry.Budget_Net_Sales_Sum) }}</td>
                                                <td :class="{'highlight-red': entry.F_B_DEV_Percentage < 0}">
                                                    @{{ formatChartNumber(entry.F_B_DEV_Percentage) }}%
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <div id="overlay_forecast_table" class="loading-overlay">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>
                            </section>

                            <section class="comments" id="comments-export">
                                <div class="general-comment third-chart">
                                    <label for="general_comments" class="comment-section-title">High lights</label>
                                    <textarea name="general_comments" id="general_comments" class="report-comment disable-on-get-request" rows="8">@{{ commentsData.Comment_General }}</textarea>
                                </div>
                                <div class="major-claims third-chart">
                                    <label for="major_claims" class="comment-section-title">Low lights</label>
                                    <textarea name="major_claims" id="major_claims" class="report-comment disable-on-get-request" rows="8">@{{ commentsData.Comment_Issue }}</textarea>
                                </div>
                                <div class="competitor-activities third-chart">
                                    <label for="competitor_activities" class="comment-section-title">Competitor Activities / Market Trends</label>
                                    <textarea name="competitor_activities" id="competitor_activities" class="report-comment disable-on-get-request" rows="8">@{{ commentsData.Comment_Competitor }}</textarea>
                                </div>
                                <div class="main-activities third-chart">
                                    <label for="main_activities" class="comment-section-title">Main Activities Next Month / Customer Visits</label>
                                    <div v-for='(no, index) in 10' :key='index' class="numbered-input">
                                        <span>@{{ index + 1 }}.</span>
                                        <textarea name="main_activities[]" class="main-activity-comment bordered-input disable-on-get-request" rows="1" maxlength="150">@{{ commentsData['Activity_' + (index + 1)] }}</textarea>
                                    </div>
                                </div>
                            </section>

                            <section class="tables"  style="">
                                <div class="net-sales-actual-table export-item table-w-comments" style="overflow: auto">
                                    <div class="table-title mt-5">Top 10 Customers Descending Net Sales Actual</div>
                                    <table id="net-sales-actual-table" class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col" colspan="3"></th>
                                                <th scope="col" colspan="8" class="background-darkest-gray">Net Sales (k)</th>
                                                <th scope="col" colspan="2" class="background-dark-gray">CM (%)</th>
                                                <th scope="col" colspan="2 "class="background-gray">Order Intake (k)</th>
                                                <th scope="col" colspan="2" class="background-light-gray">Order Backlog (k)</th>
                                                <th scope="col" colspan="3" class="background-light-green">Pipeline In Progress (k)</th>
                                                <th scope="col">Visits</th>
                                                <th scope="col"></th>
                                            </tr>
                                            <tr>
                                                <th scope="col" class="background-light-gray">Customer Sold-To</th>
                                                <th scope="col" class="background-light-gray">@{{ netSalesActualDimension }}</th>
                                                <th scope="col" class="background-light-gray">Unit</th>
                                                <th scope="col" class="background-light-gray">Vol</th>
                                                <th scope="col" class="background-orange-red">ACT YTD</th>
                                                <th scope="col" class="background-light-gray">Vol</th>
                                                <th scope="col" class="background-light-gray">PY YTD</th>
                                                <th scope="col" class="background-light-gray">Dev in %</th>
                                                <th scope="col" class="background-light-gray">Vol</th>
                                                <th scope="col" class="background-light-gray">BUD YTD</th>
                                                <th scope="col" class="background-light-gray">Dev in %</th>
                                                <th scope="col" class="background-orange-red">ACT YTD</th>
                                                <th scope="col" class="background-light-gray">PY YTD</th>
                                                <th scope="col" class="background-light-gray">Vol</th>
                                                <th scope="col" class="background-light-gray">Sales Value</th>
                                                <th scope="col" class="background-light-gray">Vol</th>
                                                <th scope="col" class="background-light-gray">Sales Value</th>
                                                <th scope="col" class="background-light-gray"># Opps</th>
                                                <th scope="col" class="background-light-gray">Sales Value</th>
                                                <th scope="col" class="background-light-gray">CM in %</th>
                                                <th scope="col" class="background-light-gray"># Visits</th>
                                                <th scope="col" class="background-light-gray">Sales Comment</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-if="isEmptyObject(netSalesActualData)" class="no-data-message d-none">
                                                <td colspan="17" class="empty-row">No data available.</td>
                                            </tr>

                                            <tr v-for="(entry, i) in netSalesActualData" :key="i">
                                                <td style="text-align: left">@{{ entry.Sold_To_Name }}</td>
                                                <td style="text-align: left">@{{ entry.Dimension }}</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units)">
                                                    <table class="units_text_table">
                                                        <tr v-for="(unit, volume) in entry.Units" :key="volume">
                                                            <td>@{{ unit }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-weight: 900">Total</td>
                                                        </tr>
                                                    </table>
                                                </td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_ACT)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(count, volume) in entry.Units_Total_ACT" :key="volume">
                                                            <td v-if="!isEmptyString(count)"> @{{ formatChartNumber(count, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td  v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.ACT_Net_Sales_Sum_Doc_Type)">
                                                    <table class="units_numbers_table background-orange-red">
                                                        <tr v-for="(sum, volume) in entry.ACT_Net_Sales_Sum_Doc_Type" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                        <tr v-if="!isEmptyString(entry.Total_ACT_Net_Sales_Sum)">
                                                            <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_ACT_Net_Sales_Sum, false, true) }}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_PY)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(count, volume) in entry.Units_Total_PY" :key="volume">
                                                            <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td  v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.PY_Net_Sales_Sum_Doc_Type)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.PY_Net_Sales_Sum_Doc_Type" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                        <tr v-if="!isEmptyString(entry.Total_PY_Net_Sales_Sum)">
                                                            <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_PY_Net_Sales_Sum, false, true) }}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>


                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_ACT)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.Units_Total_ACT" :key="volume">
                                                            <td >&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td :class="{'highlight-red': entry.ACT_PY_DEV_Percentage < 0}">
                                                                @{{ formatChartNumber(entry.ACT_PY_DEV_Percentage) }}%
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_BUD)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(count, volume) in entry.Units_Total_BUD" :key="volume">
                                                            <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td  v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.BUD_Net_Sales_Sum)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.BUD_Net_Sales_Sum" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                        <tr v-if="!isEmptyString(entry.Total_BUD_Net_Sales_Sum)">
                                                            <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_BUD_Net_Sales_Sum, false, true) }}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_ACT)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.Units_Total_ACT" :key="volume">
                                                            <td >&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td :class="{'highlight-red': entry.ACT_BUD_DEV_Percentage < 0}">
                                                                @{{ formatChartNumber(entry.ACT_BUD_DEV_Percentage) }}%
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.ACT_CM_Percentage)">
                                                    <table class="units_numbers_table" >
                                                        <tr v-for="(sum, volume) in entry.ACT_CM_Percentage" :key="volume">
                                                            <td v-if="!isEmptyString(sum)" class="background-orange-red" :class="{'highlight-green': sum > 30, 'highlight-yellow': (sum <= 30 && sum >= 20), 'highlight-red': sum < 20}">@{{ formatChartNumber(sum) }}%</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.PY_CM_Percentage)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.PY_CM_Percentage" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">@{{ formatChartNumber(sum) }}%</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>


                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_OI)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(count, volume) in entry.Units_Total_OI" :key="volume">
                                                            <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td  v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.OI_Sales_Sum)">
                                                    <table class="units_numbers_table" :class="{'highlight-yellow': isDateDue(entry.Expected_Implementation, true, volume)}">
                                                        <tr v-for="(sum, volume) in entry.OI_Sales_Sum" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                        <tr v-if="!isEmptyString(entry.Total_OI_Net_Sales_Sum)">
                                                            <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_OI_Net_Sales_Sum, false, true) }}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_OB)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(count, volume) in entry.Units_Total_OB" :key="volume">
                                                            <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td  v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.OB_Sales_Sum)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.OB_Sales_Sum" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>                                                        </tr>
                                                        <tr v-if="!isEmptyString(entry.Total_OB_Net_Sales_Sum)">
                                                            <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_OB_Net_Sales_Sum, false, true) }}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>


                                                <td>@{{ entry.No_Opps }}</td>
                                                <td>€ @{{ formatChartNumber(entry.Opp_Sales_Sum, false, true) }}</td>
                                                <td>@{{ formatChartNumber(entry.Opp_CM_Percentage) }}%</td>
                                                <td>@{{ entry.No_Visits }}</td>
                                                <td><textarea class="comment disable-on-get-request" name="net_sales_actual_comments[]" maxlength="150">@{{ entry.Comment_Sales }}</textarea></td>
                                                <input type="hidden" name="net_sales_actual_sold_tos[]" v-bind:value="entry.Sold_To_ID">
                                                <input type="hidden" name="net_sales_actual_entity_ids[]" v-bind:value="entry.Entity_ID">
                                            </tr>
                                        </tbody>
                                    </table>

                                    <div id="overlay_net_sales_actual_table" class="loading-overlay">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>

                                <div class="net-sales-actual-vs-budget-table export-item table-w-comments" style="overflow: auto">
                                    <div class="table-title mt-5">Flop 10 Customers Descending Net Sales ACT vs. BUD</div>
                                    <table id="net-sales-actual-vs-budget-table" class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col" colspan="3"></th>
                                                <th scope="col" colspan="8" class="background-darkest-gray">Net Sales (k)</th>
                                                <th scope="col" colspan="2" class="background-dark-gray">CM (%)</th>
                                                <th scope="col" colspan="2" class="background-gray">Order Intake (k)</th>
                                                <th scope="col" colspan="2" class="background-light-gray">Order Backlog (k)</th>
                                                <th scope="col" colspan="3" class="background-light-green">Pipeline In Progress (k)</th>
                                                <th scope="col">Visits</th>
                                                <th scope="col"></th>
                                            </tr>
                                            <tr>
                                                <th scope="col" class="background-light-gray">Customer Sold-To</th>
                                                <th scope="col" class="background-light-gray">@{{ netSalesActualDimension }}</th>
                                                <th scope="col" class="background-light-gray">Unit</th>
                                                <th scope="col" class="background-light-gray">Vol</th>
                                                <th scope="col" class="background-orange-red">ACT YTD</th>
                                                <th scope="col" class="background-light-gray">Vol</th>
                                                <th scope="col" class="background-light-gray">PY YTD</th>
                                                <th scope="col" class="background-light-gray">Dev in %</th>
                                                <th scope="col" class="background-light-gray">Vol</th>
                                                <th scope="col" class="background-light-gray">BUD YTD</th>
                                                <th scope="col" class="background-light-gray">Dev in %</th>
                                                <th scope="col" class="background-orange-red">ACT YTD</th>
                                                <th scope="col" class="background-light-gray">PY YTD</th>
                                                <th scope="col" class="background-light-gray">Vol</th>
                                                <th scope="col" class="background-light-gray">Sales Value</th>
                                                <th scope="col" class="background-light-gray">Vol</th>
                                                <th scope="col" class="background-light-gray">Sales Value</th>
                                                <th scope="col" class="background-light-gray"># Opps</th>
                                                <th scope="col" class="background-light-gray">Sales Value</th>
                                                <th scope="col" class="background-light-gray">CM in %</th>
                                                <th scope="col" class="background-light-gray"># Visits</th>
                                                <th scope="col" class="background-light-gray">Sales Comment</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-if="isEmptyObject(netSalesActualVsBudgetData)" class="no-data-message d-none">
                                                <td colspan="17" class="empty-row">No data available.</td>
                                            </tr>

                                            <tr v-for="(entry, i) in netSalesActualVsBudgetData" :key="i">
                                                <td style="text-align: left">@{{ entry.Sold_To_Name }}</td>
                                                <td style="text-align: left">@{{ entry.Dimension }}</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units)">
                                                    <table class="units_text_table">
                                                        <tr v-for="(unit, volume) in entry.Units" :key="volume">
                                                            <td>@{{ unit }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-weight: 900">Total</td>
                                                        </tr>
                                                    </table>
                                                </td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_ACT)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(count, volume) in entry.Units_Total_ACT" :key="volume">
                                                            <td v-if="!isEmptyString(count)"> @{{ formatChartNumber(count, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td  v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.ACT_Net_Sales_Sum_Doc_Type)">
                                                    <table class="units_numbers_table background-orange-red">
                                                        <tr v-for="(sum, volume) in entry.ACT_Net_Sales_Sum_Doc_Type" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                        <tr v-if="!isEmptyString(entry.Total_ACT_Net_Sales_Sum)">
                                                            <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_ACT_Net_Sales_Sum, false, true) }}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_PY)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(count, volume) in entry.Units_Total_PY" :key="volume">
                                                            <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td  v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.PY_Net_Sales_Sum_Doc_Type)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.PY_Net_Sales_Sum_Doc_Type" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                        <tr v-if="!isEmptyString(entry.Total_PY_Net_Sales_Sum)">
                                                            <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_PY_Net_Sales_Sum, false, true) }}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>


                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_ACT)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.Units_Total_ACT" :key="volume">
                                                            <td >&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td :class="{'highlight-red': entry.ACT_PY_DEV_Percentage < 0}">
                                                                @{{ formatChartNumber(entry.ACT_PY_DEV_Percentage) }}%
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_BUD)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(count, volume) in entry.Units_Total_BUD" :key="volume">
                                                            <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td  v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.BUD_Net_Sales_Sum)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.BUD_Net_Sales_Sum" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                        <tr v-if="!isEmptyString(entry.Total_BUD_Net_Sales_Sum)">
                                                            <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_BUD_Net_Sales_Sum, false, true) }}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_ACT)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.Units_Total_ACT" :key="volume">
                                                            <td >&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td :class="{'highlight-red': entry.ACT_BUD_DEV_Percentage < 0}">
                                                                @{{ formatChartNumber(entry.ACT_BUD_DEV_Percentage) }}%
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>


                                                <td class="units_td" v-if="!isEmptyObject(entry.ACT_CM_Percentage)">
                                                    <table class="units_numbers_table" >
                                                        <tr v-for="(sum, volume) in entry.ACT_CM_Percentage" :key="volume">
                                                            <td v-if="!isEmptyString(sum)" class="background-orange-red" :class="{'highlight-green': sum > 30, 'highlight-yellow': (sum <= 30 && sum >= 20), 'highlight-red': sum < 20}">@{{ formatChartNumber(sum) }}%</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>


                                                <td class="units_td" v-if="!isEmptyObject(entry.PY_CM_Percentage)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.PY_CM_Percentage" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">@{{ formatChartNumber(sum) }}%</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>


                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_OI)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(count, volume) in entry.Units_Total_OI" :key="volume">
                                                            <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td  v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.OI_Sales_Sum)">
                                                    <table class="units_numbers_table" :class="{'highlight-yellow': isDateDue(entry.Expected_Implementation, true, volume)}">
                                                        <tr v-for="(sum, volume) in entry.OI_Sales_Sum" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                        <tr v-if="!isEmptyString(entry.Total_OI_Net_Sales_Sum)">
                                                            <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_OI_Net_Sales_Sum, false, true) }}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.Units_Total_OB)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(count, volume) in entry.Units_Total_OB" :key="volume">
                                                            <td v-if="!isEmptyString(count)">@{{ formatChartNumber(count, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td  v-else>&nbsp;</td>

                                                <td class="units_td" v-if="!isEmptyObject(entry.OB_Sales_Sum)">
                                                    <table class="units_numbers_table">
                                                        <tr v-for="(sum, volume) in entry.OB_Sales_Sum" :key="volume">
                                                            <td v-if="!isEmptyString(sum)">€ @{{ formatChartNumber(sum, false, true) }}</td>
                                                            <td v-else>&nbsp;</td>                                                        </tr>
                                                        <tr v-if="!isEmptyString(entry.Total_OB_Net_Sales_Sum)">
                                                            <td style="font-weight: 900">€ @{{ formatChartNumber(entry.Total_OB_Net_Sales_Sum, false, true) }}</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td v-else>&nbsp;</td>


                                                <td>@{{ entry.No_Opps }}</td>
                                                <td>€ @{{ formatChartNumber(entry.Opp_Sales_Sum, false, true) }}</td>
                                                <td>@{{ formatChartNumber(entry.Opp_CM_Percentage) }}%</td>
                                                <td>@{{ entry.No_Visits }}</td>
                                                <td><textarea class="comment disable-on-get-request" name="net_sales_actual_vs_budget_comments[]" maxlength="150">@{{ entry.Comment_Sales }}</textarea></td>
                                                <input type="hidden" name="net_sales_actual_vs_budget_sold_tos[]" v-bind:value="entry.Sold_To_ID">
                                                <input type="hidden" name="net_sales_actual_vs_budget_entity_ids[]" v-bind:value="entry.Entity_ID">
                                            </tr>
                                        </tbody>
                                    </table>

                                    <div id="overlay_net_sales_actual_vs_budget_table" class="loading-overlay">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>

                                <div class="opportunities-cm-impact-table export-item table-w-comments">
                                    <div class="table-title mt-5">Top 10 Opportunities according CM Impact Absolute</div>
                                    <table id="opportunities-impact-table" class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col" class="background-light-gray">Projects</th>
                                                <th scope="col" class="background-light-gray">@{{ opportunitiesCMImpactDimension }}</th>
                                                <th scope="col" class="background-light-gray">Sales Value</th>
                                                <th scope="col" class="background-light-gray">CM in %</th>
                                                <th scope="col" class="background-light-gray">Customer</th>
                                                <th scope="col" class="background-light-gray">Stage</th>
                                                <th scope="col" class="background-light-gray">Days in Stage</th>
                                                <th scope="col" class="background-light-gray">Opportunity Type</th>
                                                <th scope="col" class="background-light-gray">Expected Implementation</th>
                                                <th scope="col" class="background-light-gray">CoS</th>
                                                <th scope="col" class="background-light-gray">Sust.</th>
                                                <th scope="col" class="background-light-gray">Opportunity Comment</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-if="isEmptyObject(opportunitiesCMImpactData)" class="no-data-message d-none">
                                                <td colspan="12" class="empty-row">No data available.</td>
                                            </tr>

                                            <tr v-for="(entry, i) in opportunitiesCMImpactData" :key="i">
                                                <td>@{{ entry.Opportunity_Name }}</td>
                                                <td>@{{ entry.Dimension }}</td>
                                                <td>€ @{{ formatChartNumber(entry.Sales_Sum) }}</td>
                                                <td :class="{'highlight-yellow': (entry.CM_Percentage_Sum < 30 && entry.CM_Percentage_Sum >= 20), 'highlight-red': entry.CM_Percentage_Sum < 20}">
                                                    @{{ formatChartNumber(entry.CM_Percentage_Sum) }}%
                                                </td>
                                                <td>@{{ entry.Sold_To_Name }}</td>
                                                <td>@{{ entry.Stage }}</td>
                                                <td :class="'highlight-' + entry.Days_In_Stage_Color">
                                                    @{{ entry.Days_In_Stage }}
                                                </td>
                                                <td>@{{ entry.Type }}</td>
                                                <td :class="{'highlight-yellow': isDateDue(entry.Expected_Implementation, true), 'highlight-red': isDateDue(entry.Expected_Implementation)}">
                                                    @{{ entry.Expected_Implementation }}
                                                </td>
                                                <td>@{{ formatChartNumber(entry.Chance_Of_Success) }}%</td>
                                                <td>@{{ entry.Sustainability }}</td>
                                                <td><textarea class="comment disable-on-get-request" name="opportunity_impact_comments[]" rows="1" maxlength="150">@{{ entry.Comment_Opportunity }}</textarea></td>
                                                <input type="hidden" name="opportunity_impact_ids[]" v-bind:value="entry.Opportunity_ID">
                                            </tr>
                                        </tbody>
                                    </table>

                                    <div id="overlay_opportunities_cm_impact_table" class="loading-overlay">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>

                                <div class="opportunity-won-lost-changes-table export-item table-w-comments">
                                    <div class="table-title mt-5">Opportunity Entries & Won/Lost Changes within last month</div>
                                    <table id="opportunities-status-table" class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col" class="background-light-gray">Projects</th>
                                                <th scope="col" class="background-light-gray">@{{ opportunitiesWonLostChangesDimension }}</th>
                                                <th scope="col" class="background-light-gray">Sales Value</th>
                                                <th scope="col" class="background-light-gray">CM in %</th>
                                                <th scope="col" class="background-light-gray">Customer</th>
                                                <th scope="col" class="background-light-gray">Stage</th>
                                                <th scope="col" class="background-light-gray">Days in Stage</th>
                                                <th scope="col" class="background-light-gray">Opportunity Type</th>
                                                <th scope="col" class="background-light-gray">Status</th>
                                                <th scope="col" class="background-light-gray">CoS</th>
                                                <th scope="col" class="background-light-gray">Sust.</th>
                                                <th scope="col" class="background-light-gray">Opportunity Comment</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-if="isEmptyObject(opportunitiesWonLostChangesData)" class="no-data-message d-none">
                                                <td colspan="12" class="empty-row">No data available.</td>
                                            </tr>

                                            <tr v-for="(entry, i) in opportunitiesWonLostChangesData" :key="i">
                                                <td>@{{ entry.Opportunity_Name }}</td>
                                                <td>@{{ entry.Dimension }}</td>
                                                <td>€ @{{ formatChartNumber(entry.Sales_Sum) }}</td>
                                                <td :class="{'highlight-yellow': (entry.CM_Percentage_Sum < 30 && entry.CM_Percentage_Sum >= 20), 'highlight-red': entry.CM_Percentage_Sum < 20}">
                                                    @{{ formatChartNumber(entry.CM_Percentage_Sum) }}%
                                                </td>
                                                <td>@{{ entry.Sold_To_Name }}</td>
                                                <td>@{{ entry.Stage }}</td>
                                                <td :class="'highlight-' + entry.Days_In_Stage_Color">
                                                    @{{ entry.Days_In_Stage }}
                                                </td>
                                                <td>@{{ entry.Type }}</td>
                                                <td :class="'highlight-' + entry.Status_Color">
                                                    @{{ entry.Status }}
                                                </td>
                                                <td>@{{ formatChartNumber(entry.Chance_Of_Success) }}%</td>
                                                <td>@{{ entry.Sustainability }}</td>
                                                <td><textarea class="comment disable-on-get-request" name="opportunity_status_comments[]" rows="1" cols="20" maxlength="150">@{{ entry.Comment_Opportunity }}</textarea></td>
                                                <input type="hidden" name="opportunity_status_ids[]" v-bind:value="entry.Opportunity_ID">
                                            </tr>
                                        </tbody>
                                    </table>

                                    <div id="overlay_opportunities_won_lost_changes_table" class="loading-overlay">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div></div>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="filters-applied" id="filters-export">
                            <strong>*Filter criteria</strong>
                            <div>
                                @if (empty($filters_name))
                                    NONE
                                @else
                                    @foreach($filters_name as $key => $filter)
                                        @if(!is_array($filter))
                                            {{  $key . ' : ' . $filter}}
                                            <br>
                                        @else
                                            @foreach($filter as $value)
                                                {{ $key . ' : ' . $value}}
                                                <br>
                                            @endforeach
                                        @endif
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    @else
                        <div class="info-message">Select some filters in order to generate the report.</div>
                    @endif
                </div>
            </form>
        </div>
    </section>
@stop

{{--page level scripts--}}
@section('footer_scripts')
    <script>
        var token = '{{ csrf_token() }}';
        var request_data = @if(isset($request))"{{ json_encode($request->all()) }}" @else "{{ json_encode([]) }}" @endif

        @if(isset($report_id))
            var report_id = "{{ $report_id }}";
            var form_method = 'PUT';
            var route_save_report = '{{ route("admin.reports.asm.update", ['id' => $report_id]) }}';
        @else
            var report_id = "0";
            var form_method = 'POST';
            var route_save_report = '{{ route("admin.reports.asm.store") }}';
        @endif

        var route_export_report_to_png = '{{ route("admin.reports.ajax.asm.export-report-to-png") }}';
        var route_data_sales_overview = '{{ route("admin.reports.ajax.asm.data.sales-overview") }}';
        var route_data_sales_dev_last_year = '{{ route("admin.reports.ajax.asm.data.sales-dev-last-year") }}';
        var route_data_pipeline_overview = '{{ route("admin.reports.ajax.asm.data.pipeline-overview") }}';
        var route_data_sales_funnel = '{{ route("admin.reports.ajax.asm.data.sales-funnel") }}';
        var route_data_lost_opp_reasons = '{{ route("admin.reports.ajax.asm.data.lost-opportunities-reasons") }}';
        var route_data_forecast = '{{ route("admin.reports.ajax.asm.data.forecast") }}';
        var route_data_actuals = '{{ route("admin.reports.ajax.asm.data.actuals") }}';
        var route_data_net_sales_actual = '{{ route("admin.reports.ajax.asm.data.net-sales-actual") }}';
        var route_data_opportunities_cm_impact = '{{ route("admin.reports.ajax.asm.data.opportunities-cm-impact") }}';
        var route_data_opportunities_won_lost_changes = '{{ route("admin.reports.ajax.asm.data.opportunities-won-lost-changes") }}';
        var route_data_comments = '{{ route("admin.reports.ajax.asm.data.comments") }}';
    </script>

    <script type="text/javascript" src="{{ asset('assets/js/pages/jquery.ui.treemap.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/html2canvas.js') }}"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
    <script language="javascript" type="text/javascript"
            src="{{ asset('assets/js/pages/reports/asm_report.js') }}"></script>
@stop