@extends('admin.layouts.default')

@section('content')

    <div class="budget_template" id="app">

        <div v-if="hasContentLoaded" v-cloak>

            <div class="heading-wrapper">

                <h1>Budget Template</h1>

                <a v-if="(!budgetKeys.hasOwnProperty('isEmpty') && !budgetKeys.isEmpty)" :href=" '/api/planning/budget/' + templateID + '/export-to-excel?filter-entity='
            + (encodeURIComponent(selectedFilters.Entity_ID) ?? '')
            + '&filter-plant=' + (encodeURIComponent(selectedFilters.plantFilter.Manufacturing_Plant_ID) ?? '')
            + '&filter-customer_no=' + (encodeURIComponent(selectedFilters.customerFilter.Customer_Sold_To_ID) ?? '')
            + '&filter-customer_name=' + (encodeURIComponent(selectedFilters.customerFilter.Sold_To_Name) ?? '')
            + '&filter-market_seg_l2=' + (encodeURIComponent(selectedFilters.marketSegmentL2Filter.Segment_Code_L2) ?? '')
            + '&filter-market_seg_l1=' + (encodeURIComponent(selectedFilters.marketSegmentL1Filter.Segment_Code_L1) ?? '')
            + '&filter-market_seg_flex=' + (encodeURIComponent(selectedFilters.marketSegmentFlexFilter.Segment_Code_Flex) ?? '')
            + '&filter-country=' + (encodeURIComponent(selectedFilters.countryFilter.Sold_To_Country_ID) ?? '')
            + '&filter-region=' + (encodeURIComponent(selectedFilters.regionFilter) ?? '')
            + '&filter-global_region=' + (encodeURIComponent(selectedFilters.globalRegionFilter) ?? '')
            + '&filter-prod_group_1=' + (encodeURIComponent(selectedFilters.productGroup1Filter.Prodh_ID_L1) ?? '')
            + '&filter-prod_group_2=' + (encodeURIComponent(selectedFilters.productGroup2Filter.Prodh_ID_L2) ?? '')
            + '&filter-prod_group_3=' + (encodeURIComponent(selectedFilters.productGroup3Filter.Prodh_ID_L3) ?? '')
            + '&filter-prod_group_4=' + (encodeURIComponent(selectedFilters.productGroup4Filter.Prodh_ID_L4) ?? '')
            + '&filter-prod_group_5=' + (encodeURIComponent(selectedFilters.productGroup5Filter.Prodh_ID_L5) ?? '')
            + '&filter-prod_group_6=' + (encodeURIComponent(selectedFilters.productGroup6Filter.Prodh_ID_L6) ?? '')
            + '&filter-employee=' + (encodeURIComponent(selectedFilters.salesResponsibleFilter.Sales_Representative_ID) ?? '')
            + '&filter-group_account=' + (encodeURIComponent(selectedFilters.groupAccountFilter) ?? '')
            + '&filter-search_for_export=' + encodeURIComponent(searchFilter)
            + '&Previous_Previous_Period=' + visibleSections.Previous_Previous_Period
            + '&Previous_Period=' + visibleSections.Previous_Period
            + '&Year_To_Date(YTD)=' + visibleSections['Year_To_Date(YTD)']
            + '&Budget_CY=' + visibleSections.Budget_CY
            + '&Outlook=' + visibleSections.Outlook
            + '&Budget_NY=' + visibleSections.Budget_NY
">
                    <div class="export-button"> EXPORT </div>
                </a>

            </div>

            <div class="content">

                <div class="top-buttons">

                    <div v-if="hasFreezePermission && !isTemplateClosed" class="freeze-wrapper">

                        <div class="title">
                            <span @click="toggleIsFreeze" :class="{active: isFreeze}">FREEZE</span>
                            <span @click="toggleIsFreeze" :class="{active: !isFreeze}">UNFREEZE</span>
                        </div>

                        <div class="buttons-wrapper">

                            <div @click="freezeFilteredBudgets" class="button">
                                <span>Filter Section</span>
                            </div>

                            <div @click="freezeAllBudgets" class="button">
                                <span>All</span>
                            </div>

                        </div>

                    </div>

                    <div class="view-wrapper">

                        <div class="title">
                            <span>VIEW</span>
                        </div>

                        <div class="buttons-wrapper">

                            <div
                                    v-if="visibleSectionsBackup.Previous_Previous_Period"
                                    :class="{button: true, active: visibleSections.Previous_Previous_Period}"
                                    @click="visibleSections.Previous_Previous_Period = !visibleSections.Previous_Previous_Period"
                            >
                                <span>Previous Previous Year</span>
                            </div>

                            <div
                                    v-if="visibleSectionsBackup.Previous_Period"
                                    :class="{button: true, active: visibleSections.Previous_Period}"
                                    @click="visibleSections.Previous_Period = !visibleSections.Previous_Period"
                            >
                                <span>Previous @{{ previousPeriodYear }}</span>
                            </div>

                            <div
                                    v-if="visibleSectionsBackup['Year_To_Date(YTD)']"
                                    :class="{button: true, active: visibleSections['Year_To_Date(YTD)']}"
                                    @click="visibleSections['Year_To_Date(YTD)'] = !visibleSections['Year_To_Date(YTD)']"
                            >
                                <span>YTD @{{ ytdYear }}</span>
                            </div>

                            <div
                                    v-if="visibleSectionsBackup.Budget_CY"
                                    :class="{button: true, active: visibleSections.Budget_CY}"
                                    @click="visibleSections.Budget_CY = !visibleSections.Budget_CY"
                            >
                                <span>Bud CY</span>
                            </div>

                            <div
                                    v-if="visibleSectionsBackup.Outlook"
                                    :class="{button: true, active: visibleSections.Outlook}"
                                    @click="visibleSections.Outlook = !visibleSections.Outlook"
                            >
                                <span>Forecast 6+6</span>
                            </div>

                            <div
                                    v-if="visibleSectionsBackup.Budget_NY"
                                    :class="{button: true, active: visibleSections.Budget_NY}"
                                    @click="visibleSections.Budget_NY = !visibleSections.Budget_NY"
                            >
                                <span>Bud @{{ budgetNYYear }}</span>
                            </div>

                        </div>

                    </div>

                </div>

                <div class="filters-section">

                    <div class="left-filters">

                        <div v-if="budgetKeys.hasOwnProperty('Entity_ID')" class="dropdown-wrapper">

                            <span class="dropdown-label">Entity ID</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.Entity_ID }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'entityID', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.entity"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'entityID', filter)"
                                    >@{{ filter.Entity_ID }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Plant_Name')" class="dropdown-wrapper">

                            <span class="dropdown-label">Plant</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.plantFilter.Plant_Name }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'plant', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.plants"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'plant', filter)"
                                    >@{{ filter.Plant_Name }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Customer_Sold_To_ID')" class="dropdown-wrapper">

                            <span class="dropdown-label">Customer ID</span>

                            <input v-model="selectedFilters.customerFilter.Customer_Sold_To_ID" type="text"
                                   @keyup.enter="selectOption(null, 'customerId', selectedFilters.customerFilter.Customer_Sold_To_ID)">

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Sold_To_Name')" class="dropdown-wrapper">

                            <span class="dropdown-label">Customer Name</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.customerFilter.Sold_To_Name }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'customerName', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.customers"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'customerName', filter)"
                                    >@{{ filter.Sold_To_Name }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Segment_Name_L2')" class="dropdown-wrapper">

                            <span class="dropdown-label">Market Segment L2</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.marketSegmentL2Filter.Segment_Name_L2 }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'marketSegmentL2', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.market_segments_l2"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'marketSegmentL2', filter)"
                                    >@{{ filter.Segment_Name_L2 }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Segment_Name_L1')" class="dropdown-wrapper">

                            <span class="dropdown-label">Market Segment L1</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.marketSegmentL1Filter.Segment_Name_L1 }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'marketSegmentL1', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.market_segments_l1"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'marketSegmentL1', filter)"
                                    >@{{ filter.Segment_Name_L1 }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Segment_Name_Flex')" class="dropdown-wrapper">

                            <span class="dropdown-label">Market Segment Flex</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.marketSegmentFlexFilter.Segment_Name_Flex }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'marketSegmentFlex', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.market_segments_flex"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'marketSegmentFlex', filter)"
                                    >@{{ filter.Segment_Name_Flex }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Sold_To_Country_ID')" class="dropdown-wrapper">

                            <span class="dropdown-label">Country</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.countryFilter.Country_Name }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'country', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.countries"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'country', filter)"
                                    >@{{ filter.Country_Name }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Region')" class="dropdown-wrapper">

                            <span class="dropdown-label">Region</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.regionFilter }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'region', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.regions"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'region', filter)"
                                    >@{{ filter.Region }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Global_Region')" class="dropdown-wrapper">

                            <span class="dropdown-label">Global Region</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.globalRegionFilter }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'globalRegion', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.global_regions"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'globalRegion', filter)"
                                    >@{{ filter.Global_Region }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Prodh_Name_L1')" class="dropdown-wrapper">

                            <span class="dropdown-label">Product Group 1</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.productGroup1Filter.Prodh_Name_L1 }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'prodGroup1', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.prod_groups_1"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'prodGroup1', filter)"
                                    >@{{ filter.Prodh_Name_L1 }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Prodh_Name_L2')" class="dropdown-wrapper">

                            <span class="dropdown-label">Product Group 2</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.productGroup2Filter.Prodh_Name_L2 }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'prodGroup2', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.prod_groups_2"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'prodGroup2', filter)"
                                    >@{{ filter.Prodh_Name_L2 }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Prodh_Name_L3')" class="dropdown-wrapper">

                            <span class="dropdown-label">Product Group 3</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.productGroup3Filter.Prodh_Name_L3 }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'prodGroup3', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.prod_groups_3"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'prodGroup3', filter)"
                                    >@{{ filter.Prodh_Name_L3 }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Prodh_Name_L4')" class="dropdown-wrapper">

                            <span class="dropdown-label">Product Group 4</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.productGroup4Filter.Prodh_Name_L4 }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'prodGroup4', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.prod_groups_4"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'prodGroup4', filter)"
                                    >@{{ filter.Prodh_Name_L4 }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Prodh_Name_L5')" class="dropdown-wrapper">

                            <span class="dropdown-label">Product Group 5</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.productGroup5Filter.Prodh_Name_L5 }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'prodGroup5', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.prod_groups_5"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'prodGroup5', filter)"
                                    >@{{ filter.Prodh_Name_L5 }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Prodh_Name_L6')" class="dropdown-wrapper">

                            <span class="dropdown-label">Product Group 6</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.productGroup6Filter.Prodh_Name_L6 }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'prodGroup6', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.prod_groups_6"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'prodGroup6', filter)"
                                    >@{{ filter.Prodh_Name_L6 }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Sales_Representative_Name')" class="dropdown-wrapper">

                            <span class="dropdown-label">Sales Responsible</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.salesResponsibleFilter.Sales_Representative_Name }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'salesResponsible', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.employees"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'salesResponsible', filter)"
                                    >@{{ filter.Sales_Representative_Name }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div v-if="budgetKeys.hasOwnProperty('Group_Account')" class="dropdown-wrapper">

                            <span class="dropdown-label">Group Account</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ selectedFilters.groupAccountFilter }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <input
                                            type="text"
                                            placeholder="Search.."
                                            class="dropdown-input"
                                            @input="filterDropdown($event)">

                                    <div
                                            class="option"
                                            @click="selectOption($event, 'groupAccount', null)">
                                    </div>

                                    <div
                                            v-for="(filter, index) in filters.group_accounts"
                                            :key="index"
                                            class="option"
                                            @click="selectOption($event, 'groupAccount', filter)"
                                    >@{{ filter.Group_Account }}
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="right-filters">

                        <div class="dropdown-wrapper">

                            <label for="search-filter">Search:</label>

                            <input v-model="searchFilter" type="text" id="search-filter">

                        </div>

                        <div class="dropdown-wrapper">

                            <span class="dropdown-label">Show</span>

                            <div class="dropdown">

                                <div @click="toggleDropdown($event)" class="dropbtn">

                                    <span>@{{ perPage }}</span>

                                    <i class="arrow down"></i>

                                </div>

                                <div class="dropdown-content">

                                    <div
                                            v-for="option in entriesOptions"
                                            @click="entriesHandler($event, option)"
                                            class="option">
                                        @{{ option }}
                                    </div>

                                </div>

                            </div>

                            <span class="dropdown-label">entries</span>

                        </div>

                    </div>

                </div>

                <table>

                    <thead>

                    <tr>
                        <th colspan="3">FREEZE STATUS</th>

                        <th></th>

                        <th :colspan="numberOfMasterData">MASTERDATA</th>

                        <th v-if="visibleSections.Previous_Previous_Period" :colspan="numberOfKeyFigures.PPY">PREVIOUS PREVIOUS YEAR</th>

                        <th v-if="visibleSections.Previous_Period" :colspan="numberOfKeyFigures.PY">PREVIOUS @{{ previousPeriodYear }}</th>

                        <th v-if="visibleSections['Year_To_Date(YTD)']" :colspan="numberOfKeyFigures.YTD">YTD @{{ ytdYear }}</th>

                        <th v-if="visibleSections.Budget_CY" :colspan="numberOfKeyFigures.BCY">BUDGET CY</th>

                        <th v-if="visibleSections.Outlook" :colspan="numberOfKeyFigures.OL">Forecast 6+6</th>

                        <th v-if="visibleSections.Budget_NY" :colspan="numberOfKeyFigures.BNY">BUDGET @{{ budgetNYYear }}</th>

                    </tr>

                    <tr>

                        <th>Level 1</th>
                        <th>Level 2</th>
                        <th>Level 3</th>

                        <th>Actions</th>

                        <th v-if="budgetKeys.hasOwnProperty('Line_Type')">
                            <span>Type</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Line_Type', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Line_Type', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Opportunity_Source_ID')">
                            <span>Opp No</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Opportunity_Source_ID', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Opportunity_Source_ID', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Entity_ID')">
                            <span>Entity ID</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Entity_ID', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Entity_ID', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Plant_Name')">
                            <span>Plant</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Plant_Name', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Plant_Name', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Customer_Sold_To_ID')">
                            <span>Customer ID</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'Customer_Sold_To_ID', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Customer_Sold_To_ID', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Sold_To_Name')">
                            <span>Customer Name</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Sold_To_Name', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Sold_To_Name', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Group_Account')">
                            <span>Group Account</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'Group_Account', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Group_Account', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Segment_Name_L2')">
                            <span>Market Segment L2</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'Segment_Name_L2', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Segment_Name_L2', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Segment_Name_L1')">
                            <span>Market Segment L1</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'Segment_Name_L1', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Segment_Name_L1', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Segment_Name_Flex')">
                            <span>Market Segment Flex Name</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'Segment_Name_Flex', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Segment_Name_Flex', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Sold_To_Country_ID')">
                            <span>Country</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'Sold_To_Country_ID', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Sold_To_Country_ID', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Region')">
                            <span>Region</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'Region', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Region', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Global_Region')">
                            <span>Global Region</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'Global_Region', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Global_Region', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Prodh_Name_L1')">
                            <span>Product Group 1</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Prodh_Name_L1', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Prodh_Name_L1', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Prodh_Name_L2')">
                            <span>Product Group 2</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Prodh_Name_L2', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Prodh_Name_L2', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Prodh_Name_L3')">
                            <span>Product Group 3</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Prodh_Name_L3', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Prodh_Name_L3', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Prodh_Name_L4')">
                            <span>Product Group 4</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Prodh_Name_L4', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Prodh_Name_L4', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Prodh_Name_L5')">
                            <span>Product Group 5</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Prodh_Name_L5', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Prodh_Name_L5', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Prodh_Name_L6')">
                            <span>Product Group 6</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'Prodh_Name_L6', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Prodh_Name_L6', 'desc')"></i>
                        </th>
                        <th v-if="budgetKeys.hasOwnProperty('Sales_Representative_Name')">
                            <span>Sales Responsible</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'Sales_Representative_Name', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Sales_Representative_Name', 'desc')"></i>
                        </th>
                        <th>
                            <span>Currency</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'Currency', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'Currency', 'desc')"></i>
                        </th>

{{--                                           PREVIOUS PREVIOUS PERIOD--}}
                        <th v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Gross_Sales_I')">
                            <span>Gross Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PPY_Gross_Sales_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PPY_Gross_Sales_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Net_Sales_I')">
                            <span>Net Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PPY_Net_Sales_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PPY_Net_Sales_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Material_Margin_P')">
                            <span>Material Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PPY_Material_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PPY_Material_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Contribution_Margin_P')">
                            <span>Contribution Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PPY_Contribution_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PPY_Contribution_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Gross_Margin_P')">
                            <span>Gross Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PPY_Gross_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PPY_Gross_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_EBITDA_P')">
                            <span>EBITDA</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'PPY_EBITDA_P', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PPY_EBITDA_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Quantity_KG_I')">
                            <span>KG</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PPY_Quantity_KG_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PPY_Quantity_KG_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Quantity_QM_I')">
                            <span>SQM</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PPY_Quantity_QM_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PPY_Quantity_QM_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Quantity_PCs_I')">
                            <span>PCs</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PPY_Quantity_PCs_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PPY_Quantity_PCs_I', 'desc')"></i>
                        </th>

{{--                                            PREVIOUS YEAR--}}
                        <th v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Gross_Sales_I')">
                            <span>Gross Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PY_Gross_Sales_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PY_Gross_Sales_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Net_Sales_I')">
                            <span>Net Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PY_Net_Sales_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PY_Net_Sales_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Material_Margin_P')">
                            <span>Material Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PY_Material_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PY_Material_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Contribution_Margin_P')">
                            <span>Contribution Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PY_Contribution_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PY_Contribution_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Gross_Margin_P')">
                            <span>Gross Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PY_Gross_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PY_Gross_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_EBITDA_P')">
                            <span>EBITDA</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'PY_EBITDA_P', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PY_EBITDA_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Quantity_KG_I')">
                            <span>KG</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PY_Quantity_KG_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PY_Quantity_KG_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Quantity_QM_I')">
                            <span>SQM</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PY_Quantity_QM_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PY_Quantity_QM_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Quantity_PCs_I')">
                            <span>PCs</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'PY_Quantity_PCs_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'PY_Quantity_PCs_I', 'desc')"></i>
                        </th>

{{--                                            YTD--}}
                        <th v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Gross_Sales_I')">
                            <span>Gross Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'YTD_Gross_Sales_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'YTD_Gross_Sales_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Net_Sales_I')">
                            <span>Net Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'YTD_Net_Sales_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'YTD_Net_Sales_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Material_Margin_P')">
                            <span>Material Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'YTD_Material_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'YTD_Material_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Contribution_Margin_P')">
                            <span>Contribution Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'YTD_Contribution_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'YTD_Contribution_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Gross_Margin_P')">
                            <span>Gross Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'YTD_Gross_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'YTD_Gross_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_EBITDA_P')">
                            <span>EBITDA</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'YTD_EBITDA_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'YTD_EBITDA_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Quantity_KG_I')">
                            <span>KG</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'YTD_Quantity_KG_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'YTD_Quantity_KG_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Quantity_QM_I')">
                            <span>SQM</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'YTD_Quantity_QM_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'YTD_Quantity_QM_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Quantity_PCs_I')">
                            <span>PCs</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'YTD_Quantity_PCs_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'YTD_Quantity_PCs_I', 'desc')"></i>
                        </th>

{{--                                            BUDGET CY--}}
                        <th v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Gross_Sales_I')">
                            <span>Gross Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-CY_Gross_Sales_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-CY_Gross_Sales_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Net_Sales_I')">
                            <span>Net Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-CY_Net_Sales_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-CY_Net_Sales_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Material_Margin_P')">
                            <span>Material Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-CY_Material_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-CY_Material_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Contribution_Margin_P')">
                            <span>Contribution Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-CY_Contribution_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-CY_Contribution_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Gross_Margin_P')">
                            <span>Gross Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-CY_Gross_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-CY_Gross_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_EBITDA_P')">
                            <span>EBITDA</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-CY_EBITDA_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-CY_EBITDA_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Quantity_KG_I')">
                            <span>KG</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-CY_Quantity_KG_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-CY_Quantity_KG_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Quantity_QM_I')">
                            <span>SQM</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-CY_Quantity_QM_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-CY_Quantity_QM_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Quantity_PCs_I')">
                            <span>PCs</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-CY_Quantity_PCs_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-CY_Quantity_PCs_I', 'desc')"></i>
                        </th>

{{--                                            OUTLOOK--}}
                        <th v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Gross_Sales_I')">
                            <span>Gross Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'OL_Gross_Sales_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'OL_Gross_Sales_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Net_Sales_P')">
                            <span>Net Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'OL_Net_Sales_P', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'OL_Net_Sales_P', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Material_Margin_P')">
                            <span>Material Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'OL_Material_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'OL_Material_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Contribution_Margin_P')">
                            <span>Contribution Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'OL_Contribution_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'OL_Contribution_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Gross_Margin_P')">
                            <span>Gross Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'OL_Gross_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'OL_Gross_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_EBITDA_P')">
                            <span>EBITDA</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'OL_EBITDA_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'OL_EBITDA_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Quantity_KG_I')">
                            <span>KG</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'OL_Quantity_KG_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'OL_Quantity_KG_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Quantity_QM_I')">
                            <span>SQM</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'OL_Quantity_QM_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'OL_Quantity_QM_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Quantity_PCs_I')">
                            <span>PCs</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'OL_Quantity_PCs_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'OL_Quantity_PCs_I', 'desc')"></i>
                        </th>

{{--                                            BUDGET NY--}}
                        <th v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Gross_Sales_I')">
                            <span>Gross Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-NY_Gross_Sales_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-NY_Gross_Sales_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Net_Sales_P')">
                            <span>Net Sales</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-NY_Net_Sales_P', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-NY_Net_Sales_P', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Price_P')">
                            <span>Sales Price/kQty</span>
                            <i class="fas fa-sort-amount-down" @click="sortRecords($event, 'B-NY_Price_P', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-NY_Price_P', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Material_Margin_P')">
                            <span>Material Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-NY_Material_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-NY_Material_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Contribution_Margin_P')">
                            <span>Contribution Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-NY_Contribution_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-NY_Contribution_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Gross_Margin_P')">
                            <span>Gross Margin</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-NY_Gross_Margin_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-NY_Gross_Margin_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_EBITDA_P')">
                            <span>EBITDA</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-NY_EBITDA_Percentage', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-NY_EBITDA_Percentage', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Quantity_KG_I')">
                            <span>KG</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-NY_Quantity_KG_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-NY_Quantity_KG_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Quantity_QM_I')">
                            <span>SQM</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-NY_Quantity_QM_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-NY_Quantity_QM_I', 'desc')"></i>
                        </th>
                        <th v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Quantity_PCs_I')">
                            <span>PCs</span>
                            <i class="fas fa-sort-amount-down"
                               @click="sortRecords($event, 'B-NY_Quantity_PCs_I', 'asc')"></i>
                            <i class="fas fa-sort-amount-up hidden"
                               @click="sortRecords($event, 'B-NY_Quantity_PCs_I', 'desc')"></i>
                        </th>

                    </tr>

                    </thead>


{{--                                    Table content--}}

                    <tbody>

                    <tr
                            v-for="(budget, index) in computedTableData"
                            :key="index"
                    >

                        <td class="freeze-status">
                            <div :class="{ red: budget.Freeze_L1, green: !budget.Freeze_L1 }"> &nbsp;</div>
                        </td>

                        <td class="freeze-status">
                            <div :class="{ red: budget.Freeze_L2, green: !budget.Freeze_L2 }"> &nbsp;</div>
                        </td>

                        <td class="freeze-status">
                            <div :class="{ red: budget.Freeze_L3, green: !budget.Freeze_L3 }"> &nbsp;</div>
                        </td>

                        <td class="action">
                            <a :href=" '/planning/budget/budget-edit?template_id=' + templateID
                            + '&budget_id=' + budget.ID
                            + '&filter-entity=' + (encodeURIComponent(selectedFilters.Entity_ID) ?? '')
                            + '&filter-plant=' + (encodeURIComponent(selectedFilters.plantFilter.Manufacturing_Plant_ID) ?? '')
                            + '&filter-customer_no=' + (encodeURIComponent(selectedFilters.customerFilter.Customer_Sold_To_ID) ?? '')
                            + '&filter-customer_name=' + (encodeURIComponent(selectedFilters.customerFilter.Sold_To_Name) ?? '')
                            + '&filter-market_seg_l2=' + (encodeURIComponent(selectedFilters.marketSegmentL2Filter.Segment_Code_L2) ?? '')
                            + '&filter-market_seg_l1=' + (encodeURIComponent(selectedFilters.marketSegmentL1Filter.Segment_Code_L1) ?? '')
                            + '&filter-market_seg_flex=' + (encodeURIComponent(selectedFilters.marketSegmentFlexFilter.Segment_Code_Flex) ?? '')
                            + '&filter-prod_group_1=' + (encodeURIComponent(selectedFilters.productGroup1Filter.Prodh_ID_L1) ?? '')
                            + '&filter-prod_group_2=' + (encodeURIComponent(selectedFilters.productGroup2Filter.Prodh_ID_L2) ?? '')
                            + '&filter-prod_group_3=' + (encodeURIComponent(selectedFilters.productGroup3Filter.Prodh_ID_L3) ?? '')
                            + '&filter-prod_group_4=' + (encodeURIComponent(selectedFilters.productGroup4Filter.Prodh_ID_L4) ?? '')
                            + '&filter-prod_group_5=' + (encodeURIComponent(selectedFilters.productGroup5Filter.Prodh_ID_L5) ?? '')
                            + '&filter-prod_group_6=' + (encodeURIComponent(selectedFilters.productGroup6Filter.Prodh_ID_L6) ?? '')
                            + '&filter-employee=' + (encodeURIComponent(selectedFilters.salesResponsibleFilter.Sales_Representative_ID) ?? '')
                            + '&filter-group_account=' + (encodeURIComponent(selectedFilters.groupAccountFilter) ?? '')
                            + '&filter-country=' + (encodeURIComponent(selectedFilters.countryFilter.Sold_To_Country_ID) ?? '')
                            + '&filter-region=' + (encodeURIComponent(selectedFilters.regionFilter) ?? '')
                            + '&filter-global_region=' + (encodeURIComponent(selectedFilters.globalRegionFilter) ?? '')
                            "
                               v-if="!isTemplateClosed && budget.Edit_Permission">
                                <img
                                        src="{{asset('assets/img/folder.png')}}"
                                        alt="edit"
                                        title="Edit"
                                >
                            </a>
                            <img
                                    src="{{asset('assets/img/comment.png')}}"
                                    alt="comment"
                                    v-if="budget.Comment !== null && budget.Comment !== ''"
                                    @click="toggleModal(index)"
                                    title="Comment"
                            >
                            <img
                                    src="{{asset('assets/img/noComment.png')}}"
                                    alt="no comment"
                                    v-else
                                    @click="toggleModal(index)"
                                    title="Comment"
                            >
                            <img
                                    src="{{asset('assets/img/denied.png')}}"
                                    alt="close"
                                    class="delete-budget"
                                    v-if="budget.Edit_Permission && (budget.Line_Type === 'O' ||
                                        budget.Line_Type === 'OT (customer)' ||
                                        budget.Line_Type === 'OT (prospect)' ||
                                        budget.Line_Type === 'OR (customer)' ||
                                        budget.Line_Type === 'OR (prospect)' ||
                                        budget.Line_Type === 'ONB (customer)' ||
                                        budget.Line_Type === 'ONB (prospect)' ||
                                        budget.Line_Type === 'NB' ||
                                        budget.Line_Type === 'P')"
                                    @click="deleteBudget(budget.ID)"
                                    title="Close"
                            >
                        </td>

                        <td v-if="budgetKeys.hasOwnProperty('Line_Type')">@{{budget.Line_Type}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Opportunity_Source_ID')">@{{budget.Opportunity_Source_ID}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Entity_ID')">@{{budget.Entity_ID}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Plant_Name')">@{{budget.Plant_Name}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Customer_Sold_To_ID')">@{{budget.Customer_Sold_To_ID}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Sold_To_Name')">@{{budget.Sold_To_Name}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Group_Account')">
                            @{{budget.Group_Account}}
                        </td>
                        <td v-if="budgetKeys.hasOwnProperty('Segment_Name_L2')">@{{budget.Segment_Name_L2}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Segment_Name_L1')">@{{budget.Segment_Name_L1}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Segment_Name_Flex')">@{{budget.Segment_Name_Flex}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Sold_To_Country_ID')">@{{budget.Sold_To_Country_ID}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Region')">@{{budget.Region}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Global_Region')">@{{budget.Global_Region}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Prodh_Name_L1')">@{{budget.Prodh_Name_L1}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Prodh_Name_L2')">@{{budget.Prodh_Name_L2}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Prodh_Name_L3')">@{{budget.Prodh_Name_L3}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Prodh_Name_L4')">@{{budget.Prodh_Name_L4}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Prodh_Name_L5')">@{{budget.Prodh_Name_L5}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Prodh_Name_L6')">@{{budget.Prodh_Name_L6}}</td>
                        <td v-if="budgetKeys.hasOwnProperty('Sales_Representative_Name')">
                            @{{budget.Sales_Representative_Name}}
                        </td>
                        <td>@{{ budget.Currency }}</td>

{{--                                            PREVIOUS PREVIOUS YEAR--}}
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Gross_Sales_I')">
                            @{{ budget.PPY_Gross_Sales_I !== null ? numberWithCommas(budget.PPY_Gross_Sales_I .toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.PPY_Gross_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Net_Sales_I')">
                            @{{ budget.PPY_Net_Sales_I !== null ? numberWithCommas(budget.PPY_Net_Sales_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.PPY_Net_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Material_Margin_P')">
                            @{{ budget.PPY_Material_Margin_Percentage !== null ? budget.PPY_Material_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.PPY_Material_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Contribution_Margin_P')">
                            @{{ budget.PPY_Contribution_Margin_Percentage !== null ? budget.PPY_Contribution_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.PPY_Contribution_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Gross_Margin_P')">
                            @{{ budget.PPY_Gross_Margin_Percentage !== null ? budget.PPY_Gross_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.PPY_Gross_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_EBITDA_P')">
                            @{{ budget.PPY_EBITDA_Percentage !== null ? budget.PPY_EBITDA_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : PPY_EBITDA_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Quantity_KG_I')">
                            @{{ budget.PPY_Quantity_KG_I !== null ? numberWithCommas(budget.PPY_Quantity_KG_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.PPY_Quantity_KG_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Quantity_QM_I')">
                            @{{ budget.PPY_Quantity_QM_I !== null ? numberWithCommas(budget.PPY_Quantity_QM_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.PPY_Quantity_QM_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Quantity_PCs_I')">
                            @{{ budget.PPY_Quantity_PCs_I !== null ? numberWithCommas(budget.PPY_Quantity_PCs_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.PPY_Quantity_PCs_I
                            }}
                        </td>

{{--                                            PREVIOUS YEAR--}}
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Gross_Sales_I')">
                            @{{ budget.PY_Gross_Sales_I !== null ? numberWithCommas(budget.PY_Gross_Sales_I .toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.PY_Gross_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Net_Sales_I')">
                            @{{ budget.PY_Net_Sales_I !== null ? numberWithCommas(budget.PY_Net_Sales_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.PY_Net_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Material_Margin_P')">
                            @{{ budget.PY_Material_Margin_Percentage !== null ? budget.PY_Material_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.PY_Material_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Contribution_Margin_P')">
                            @{{ budget.PY_Contribution_Margin_Percentage !== null ? budget.PY_Contribution_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.PY_Contribution_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Gross_Margin_P')">
                            @{{ budget.PY_Gross_Margin_Percentage !== null ? budget.PY_Gross_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.PY_Gross_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_EBITDA_P')">
                            @{{ budget.PY_EBITDA_Percentage !== null ? budget.PY_EBITDA_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : PY_EBITDA_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Quantity_KG_I')">
                            @{{ budget.PY_Quantity_KG_I !== null ? numberWithCommas(budget.PY_Quantity_KG_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.PY_Quantity_KG_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Quantity_QM_I')">
                            @{{ budget.PY_Quantity_QM_I !== null ? numberWithCommas(budget.PY_Quantity_QM_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.PY_Quantity_QM_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Quantity_PCs_I')">
                            @{{ budget.PY_Quantity_PCs_I !== null ? numberWithCommas(budget.PY_Quantity_PCs_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.PY_Quantity_PCs_I
                            }}
                        </td>

{{--                                            YTD--}}
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Gross_Sales_I')">
                            @{{ budget.YTD_Gross_Sales_I !== null ? numberWithCommas(budget.YTD_Gross_Sales_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.YTD_Gross_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Net_Sales_I')">
                            @{{ budget.YTD_Net_Sales_I !== null ? numberWithCommas(budget.YTD_Net_Sales_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.YTD_Net_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Material_Margin_P')">
                            @{{ budget.YTD_Material_Margin_Percentage !== null ? budget.YTD_Material_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.YTD_Material_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Contribution_Margin_P')">
                            @{{ budget.YTD_Contribution_Margin_Percentage !== null ? budget.YTD_Contribution_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.YTD_Contribution_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Gross_Margin_P')">
                            @{{ budget.YTD_Gross_Margin_Percentage !== null ? budget.YTD_Gross_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.YTD_Gross_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_EBITDA_P')">
                            @{{ budget.YTD_EBITDA_Percentage !== null ? budget.YTD_EBITDA_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.YTD_EBITDA_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Quantity_KG_I')">
                            @{{ budget.YTD_Quantity_KG_I !== null ? numberWithCommas(budget.YTD_Quantity_KG_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.YTD_Quantity_KG_I
                            }}
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Quantity_QM_I')">
                            @{{ budget.YTD_Quantity_QM_I !== null ? numberWithCommas(budget.YTD_Quantity_QM_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.YTD_Quantity_QM_I
                            }}
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Quantity_PCs_I')">
                            @{{ budget.YTD_Quantity_PCs_I !== null ? numberWithCommas(budget.YTD_Quantity_PCs_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.YTD_Quantity_PCs_I
                            }}
                        </td>

{{--                                            BUDGET CY--}}
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Gross_Sales_I')">
                            @{{ budget['B-CY_Gross_Sales_I'] !== null ? numberWithCommas(budget['B-CY_Gross_Sales_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-CY_Gross_Sales_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Net_Sales_I')">
                            @{{ budget['B-CY_Net_Sales_I'] !== null ? numberWithCommas(budget['B-CY_Net_Sales_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-CY_Net_Sales_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Material_Margin_P')">
                            @{{ budget['B-CY_Material_Margin_Percentage'] !== null ? budget['B-CY_Material_Margin_Percentage'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget['B-CY_Material_Margin_Percentage']
                            }}%
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Contribution_Margin_P')">
                            @{{ budget['B-CY_Contribution_Margin_Percentage'] !== null ? budget['B-CY_Contribution_Margin_Percentage'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget['B-CY_Contribution_Margin_Percentage']
                            }}%
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Gross_Margin_P')">
                            @{{ budget['B-CY_Gross_Margin_Percentage'] !== null ? budget['B-CY_Gross_Margin_Percentage'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget['B-CY_Gross_Margin_Percentage']
                            }}%
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_EBITDA_P')">
                            @{{ budget['B-CY_EBITDA_Percentage'] !== null ? budget['B-CY_EBITDA_Percentage'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget['B-CY_EBITDA_Percentage']
                            }}%
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Quantity_KG_I')">
                            @{{ budget['B-CY_Quantity_KG_I'] !== null ? numberWithCommas(budget['B-CY_Quantity_KG_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-CY_Quantity_KG_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Quantity_QM_I')">
                            @{{ budget['B-CY_Quantity_QM_I'] !== null ? numberWithCommas(budget['B-CY_Quantity_QM_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-CY_Quantity_QM_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Quantity_PCs_I')">
                            @{{ budget['B-CY_Quantity_PCs_I'] !== null ? numberWithCommas(budget['B-CY_Quantity_PCs_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-CY_Quantity_PCs_I']
                            }}
                        </td>

{{--                                            OUTLOOK--}}
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Gross_Sales_I')">
                            @{{ budget.OL_Gross_Sales_I !== null ? numberWithCommas(budget.OL_Gross_Sales_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.OL_Gross_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Net_Sales_P')">
                            @{{ budget.OL_Net_Sales_P !== null ? numberWithCommas(budget.OL_Net_Sales_P.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.OL_Net_Sales_P
                            }}
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Material_Margin_P')">
                            @{{ budget.OL_Material_Margin_Percentage !== null ? budget.OL_Material_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.OL_Material_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Contribution_Margin_P')">
                            @{{ budget.OL_Contribution_Margin_Percentage !== null ? budget.OL_Contribution_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.OL_Contribution_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Gross_Margin_P')">
                            @{{ budget.OL_Gross_Margin_Percentage !== null ? budget.OL_Gross_Margin_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.OL_Gross_Margin_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_EBITDA_P')">
                            @{{ budget.OL_EBITDA_Percentage !== null ? budget.OL_EBITDA_Percentage.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget.OL_EBITDA_Percentage
                            }}%
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Quantity_KG_I')">
                            @{{ budget.OL_Quantity_KG_I !== null ? numberWithCommas(budget.OL_Quantity_KG_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.OL_Quantity_KG_I
                            }}
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Quantity_QM_I')">
                            @{{ budget.OL_Quantity_QM_I !== null ? numberWithCommas(budget.OL_Quantity_QM_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.OL_Quantity_QM_I
                            }}
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Quantity_PCs_I')">
                            @{{ budget.OL_Quantity_PCs_I !== null ? numberWithCommas(budget.OL_Quantity_PCs_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget.OL_Quantity_PCs_I
                            }}
                        </td>

{{--                                            BUDGET NY--}}
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Gross_Sales_I')">
                            @{{ budget['B-NY_Gross_Sales_I'] !== null ? numberWithCommas(budget['B-NY_Gross_Sales_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-NY_Gross_Sales_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Net_Sales_P')">
                            @{{ budget['B-NY_Net_Sales_P'] !== null ? numberWithCommas(budget['B-NY_Net_Sales_P'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-NY_Net_Sales_P']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Price_P')">
                            @{{ budget['B-NY_Price_P'] !== null ? numberWithCommas(budget['B-NY_Price_P'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-NY_Price_P']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Material_Margin_P')">
                            @{{ budget['B-NY_Material_Margin_Percentage'] !== null ? budget['B-NY_Material_Margin_Percentage'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget['B-NY_Material_Margin_Percentage']
                            }}%
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Contribution_Margin_P')">
                            @{{ budget['B-NY_Contribution_Margin_Percentage'] !== null ? budget['B-NY_Contribution_Margin_Percentage'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget['B-NY_Contribution_Margin_Percentage']
                            }}%
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Gross_Margin_P')">
                            @{{ budget['B-NY_Gross_Margin_Percentage'] !== null ? budget['B-NY_Gross_Margin_Percentage'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget['B-NY_Gross_Margin_Percentage']
                            }}%
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_EBITDA_P')">
                            @{{ budget['B-NY_EBITDA_Percentage'] !== null ? budget['B-NY_EBITDA_Percentage'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) : budget['B-NY_EBITDA_Percentage']
                            }}%
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Quantity_KG_I')">
                            @{{ budget['B-NY_Quantity_KG_I'] !== null ? numberWithCommas(budget['B-NY_Quantity_KG_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-NY_Quantity_KG_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Quantity_QM_I')">
                            @{{ budget['B-NY_Quantity_QM_I'] !== null ? numberWithCommas(budget['B-NY_Quantity_QM_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-NY_Quantity_QM_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Quantity_PCs_I')">
                            @{{ budget['B-NY_Quantity_PCs_I'] !== null ? numberWithCommas(budget['B-NY_Quantity_PCs_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : budget['B-NY_Quantity_PCs_I']
                            }}
                        </td>

                        <td class="popup-column">

                            <transition name="fade">

                                <div class="pop-up" v-if="activeCommentIndex === index">

                                    <span class="popup-title">Comments:</span>

                                    <div class="separator"></div>

                                    <textarea
                                            v-model="budget['Comment']"
                                            name="comment"
                                            rows="8">@{{budget['Comment']}}
                                </textarea>

                                    <div class="separator"></div>

                                    <div class="buttons-wrapper">

                                        <div @click="cancelComment(index)" class="cancel">Cancel</div>

                                        <div @click="saveComment(budget.ID, budget['Comment'])" class="save">Save</div>

                                    </div>

                                </div>

                            </transition>

                        </td>

                    </tr>

                    <tr>
                        <td :colspan="numberOfMasterData+4">Total</td>

                        {{--                                           PREVIOUS PREVIOUS YEAR--}}
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Gross_Sales_I')">
                            @{{ totals.Previous_Previous_Period.PPY_Gross_Sales_I !== null ? numberWithCommas(totals.Previous_Previous_Period.PPY_Gross_Sales_I .toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Previous_Previous_Period.PPY_Gross_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Net_Sales_I')">
                            @{{ totals.Previous_Previous_Period.PPY_Net_Sales_I !== null ? numberWithCommas(totals.Previous_Previous_Period.PPY_Net_Sales_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Previous_Previous_Period.PPY_Net_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Material_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Contribution_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Gross_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_EBITDA_P')">
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Quantity_KG_I')">
                            @{{ totals.Previous_Previous_Period.PPY_Quantity_KG_I !== null ? numberWithCommas(totals.Previous_Previous_Period.PPY_Quantity_KG_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Previous_Previous_Period.PPY_Quantity_KG_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Quantity_QM_I')">
                            @{{ totals.Previous_Previous_Period.PPY_Quantity_QM_I !== null ? numberWithCommas(totals.Previous_Previous_Period.PPY_Quantity_QM_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Previous_Previous_Period.PPY_Quantity_QM_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Previous_Period && budgetKeys.hasOwnProperty('PPY_Quantity_PCs_I')">
                            @{{ totals.Previous_Previous_Period.PPY_Quantity_PCs_I !== null ? numberWithCommas(totals.Previous_Previous_Period.PPY_Quantity_PCs_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Previous_Previous_Period.PPY_Quantity_PCs_I
                            }}
                        </td>

                        {{--                                            PREVIOUS YEAR--}}
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Gross_Sales_I')">
                            @{{ totals.Previous_Period.PY_Gross_Sales_I !== null ? numberWithCommas(totals.Previous_Period.PY_Gross_Sales_I .toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Previous_Period.PY_Gross_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Net_Sales_I')">
                            @{{ totals.Previous_Period.PY_Net_Sales_I !== null ? numberWithCommas(totals.Previous_Period.PY_Net_Sales_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Previous_Period.PY_Net_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Material_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Contribution_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Gross_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_EBITDA_P')">
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Quantity_KG_I')">
                            @{{ totals.Previous_Period.PY_Quantity_KG_I !== null ? numberWithCommas(totals.Previous_Period.PY_Quantity_KG_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Previous_Period.PY_Quantity_KG_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Quantity_QM_I')">
                            @{{ totals.Previous_Period.PY_Quantity_QM_I !== null ? numberWithCommas(totals.Previous_Period.PY_Quantity_QM_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Previous_Period.PY_Quantity_QM_I
                            }}
                        </td>
                        <td v-if="visibleSections.Previous_Period && budgetKeys.hasOwnProperty('PY_Quantity_PCs_I')">
                            @{{ totals.Previous_Period.PY_Quantity_PCs_I !== null ? numberWithCommas(totals.Previous_Period.PY_Quantity_PCs_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Previous_Period.PY_Quantity_PCs_I
                            }}
                        </td>

                        {{--                                            YTD--}}
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Gross_Sales_I')">
                            @{{ totals['Year_To_Date(YTD)'].YTD_Gross_Sales_I !== null ? numberWithCommas(totals['Year_To_Date(YTD)'].YTD_Gross_Sales_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals['Year_To_Date(YTD)'].YTD_Gross_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Net_Sales_I')">
                            @{{ totals['Year_To_Date(YTD)'].YTD_Net_Sales_I !== null ? numberWithCommas(totals['Year_To_Date(YTD)'].YTD_Net_Sales_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals['Year_To_Date(YTD)'].YTD_Net_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Material_Margin_P')">
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Contribution_Margin_P')">
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Gross_Margin_P')">
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_EBITDA_P')">
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Quantity_KG_I')">
                            @{{ totals['Year_To_Date(YTD)'].YTD_Quantity_KG_I !== null ? numberWithCommas(totals['Year_To_Date(YTD)'].YTD_Quantity_KG_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals['Year_To_Date(YTD)'].YTD_Quantity_KG_I
                            }}
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Quantity_QM_I')">
                            @{{ totals['Year_To_Date(YTD)'].YTD_Quantity_QM_I !== null ? numberWithCommas(totals['Year_To_Date(YTD)'].YTD_Quantity_QM_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals['Year_To_Date(YTD)'].YTD_Quantity_QM_I
                            }}
                        </td>
                        <td v-if="visibleSections['Year_To_Date(YTD)'] && budgetKeys.hasOwnProperty('YTD_Quantity_PCs_I')">
                            @{{ totals['Year_To_Date(YTD)'].YTD_Quantity_PCs_I !== null ? numberWithCommas(totals['Year_To_Date(YTD)'].YTD_Quantity_PCs_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals['Year_To_Date(YTD)'].YTD_Quantity_PCs_I
                            }}
                        </td>

                        {{--                                            BUDGET CY--}}
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Gross_Sales_I')">
                            @{{ totals.Budget_CY['B-CY_Gross_Sales_I'] !== null ? numberWithCommas(totals.Budget_CY['B-CY_Gross_Sales_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_CY['B-CY_Gross_Sales_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Net_Sales_I')">
                            @{{ totals.Budget_CY['B-CY_Net_Sales_I'] !== null ? numberWithCommas(totals.Budget_CY['B-CY_Net_Sales_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_CY['B-CY_Net_Sales_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Material_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Contribution_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Gross_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_EBITDA_P')">
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Quantity_KG_I')">
                            @{{ totals.Budget_CY['B-CY_Quantity_KG_I'] !== null ? numberWithCommas(totals.Budget_CY['B-CY_Quantity_KG_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_CY['B-CY_Quantity_KG_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Quantity_QM_I')">
                            @{{ totals.Budget_CY['B-CY_Quantity_QM_I'] !== null ? numberWithCommas(totals.Budget_CY['B-CY_Quantity_QM_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_CY['B-CY_Quantity_QM_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_CY && budgetKeys.hasOwnProperty('B-CY_Quantity_PCs_I')">
                            @{{ totals.Budget_CY['B-CY_Quantity_PCs_I'] !== null ? numberWithCommas(totals.Budget_CY['B-CY_Quantity_PCs_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_CY['B-CY_Quantity_PCs_I']
                            }}
                        </td>

                        {{--                                            OUTLOOK--}}
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Gross_Sales_I')">
                            @{{ totals.Outlook.OL_Gross_Sales_I !== null ? numberWithCommas(totals.Outlook.OL_Gross_Sales_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Outlook.OL_Gross_Sales_I
                            }}
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Net_Sales_P')">
                            @{{ totals.Outlook.OL_Net_Sales_P !== null ? numberWithCommas(totals.Outlook.OL_Net_Sales_P.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Outlook.OL_Net_Sales_P
                            }}
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Material_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Contribution_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Gross_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_EBITDA_P')">
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Quantity_KG_I')">
                            @{{ totals.Outlook.OL_Quantity_KG_I !== null ? numberWithCommas(totals.Outlook.OL_Quantity_KG_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Outlook.OL_Quantity_KG_I
                            }}
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Quantity_QM_I')">
                            @{{ totals.Outlook.OL_Quantity_QM_I !== null ? numberWithCommas(totals.Outlook.OL_Quantity_QM_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Outlook.OL_Quantity_QM_I
                            }}
                        </td>
                        <td v-if="visibleSections.Outlook && budgetKeys.hasOwnProperty('OL_Quantity_PCs_I')">
                            @{{ totals.Outlook.OL_Quantity_PCs_I !== null ? numberWithCommas(totals.Outlook.OL_Quantity_PCs_I.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Outlook.OL_Quantity_PCs_I
                            }}
                        </td>

                        {{--                                            BUDGET NY--}}
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Gross_Sales_I')">
                            @{{ totals.Budget_NY['B-NY_Gross_Sales_I'] !== null ? numberWithCommas(totals.Budget_NY['B-NY_Gross_Sales_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_NY['B-NY_Gross_Sales_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Net_Sales_P')">
                            @{{ totals.Budget_NY['B-NY_Net_Sales_P'] !== null ? numberWithCommas(totals.Budget_NY['B-NY_Net_Sales_P'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_NY['B-NY_Net_Sales_P']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Price_P')">
                            @{{ totals.Budget_NY['B-NY_Price_P'] !== null ? numberWithCommas(totals.Budget_NY['B-NY_Price_P'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_NY['B-NY_Price_P']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Material_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Contribution_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Gross_Margin_P')">
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_EBITDA_P')">
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Quantity_KG_I')">
                            @{{ totals.Budget_NY['B-NY_Quantity_KG_I'] !== null ? numberWithCommas(totals.Budget_NY['B-NY_Quantity_KG_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_NY['B-NY_Quantity_KG_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Quantity_QM_I')">
                            @{{ totals.Budget_NY['B-NY_Quantity_QM_I'] !== null ? numberWithCommas(totals.Budget_NY['B-NY_Quantity_QM_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_NY['B-NY_Quantity_QM_I']
                            }}
                        </td>
                        <td v-if="visibleSections.Budget_NY && budgetKeys.hasOwnProperty('B-NY_Quantity_PCs_I')">
                            @{{ totals.Budget_NY['B-NY_Quantity_PCs_I'] !== null ? numberWithCommas(totals.Budget_NY['B-NY_Quantity_PCs_I'].toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            useGrouping: false
                            }) ) : totals.Budget_NY['B-NY_Quantity_PCs_I']
                            }}
                        </td>
                    </tr>

                    </tbody>


                </table>

                <div v-if="!budgetKeys.hasOwnProperty('isEmpty')" class="pagination-row">

                    <span>Showing @{{ lowerEntry }} to @{{ upperEntry }} of @{{ totalRecords }} entries</span>

                    <div class="buttons-wrapper">

                        <div
                                @click="goToPage(pageNumber - 1)"
                                :class="{'pagination-button': true, disabled: pageNumber <= 1}">Previous
                        </div>


                        <div
                                v-for="(pageNum, index) in pages"
                                :key="index"
                                @click="goToPage(pageNum)"
                                :class="{'pagination-button': true, active: pageNumber === pageNum, disabled: pageNum === '...'}">
                            @{{ pageNum }}
                        </div>

                        <div
                                @click="goToPage(pageNumber + 1)"
                                :class="{'pagination-button': true, disabled: pageNumber >= numberOfPages}">Next
                        </div>

                    </div>


                </div>

                <div class="bottom-buttons">
                    @if(Sentinel::inRole('admin'))
                    <div class="custom-button" @click="goToNewBusiness" v-if="!isTemplateClosed">New Business</div>
                    @endif
                    <div class="custom-button" @click="goToPipeline" v-if="!isTemplateClosed">Pipeline</div>
                </div>

                <transition name="fade">
                    <div class="confirmation-modal" v-if="isFrozenModalOpened">
                        <h3>Finalisation notification</h3>

                        <div class="confirmation-modal-info">
                            <p>You froze your budget.</p>
                            <p>Do you want to send a notification to your approver?</p>
                        </div>

                        <button @click="notifyApprover" class="apply">YES</button>
                        <button @click="closeConfirmationModal" class="cancel">NO</button>
                    </div>
                </transition>

            </div>

            <transition name="fade">
                <div v-if="showNotifications" class="notifications">
                    <div
                            v-for="(notification, index) in notifications"
                            :key="index"
                            :class="{notification: true,  error: notificationType === 'error', success: notificationType === 'success' }">
                        @{{ notification }}
                    </div>

                </div>
            </transition>

        </div>

        <div v-else class="loader">
            <img src="{{asset('assets/img/loading.gif')}}" alt="loader"/>
        </div>

    </div>

@endsection

@section('footer_scripts')
    <script>

        var salesResponsibleID = {!!json_encode($sales_responsible)!!};

    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
          integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>

    <link href="{{ asset('assets/css/pages/BF/Budget/budget_template.css') }}" rel="stylesheet" type="text/css"/>

    <link href="{{ asset('assets/css/pages/BF/Custom_components/searchable_dropdown.css') }}" rel="stylesheet"
          type="text/css"/>

    <link href="{{ asset('assets/css/pages/BF/Custom_components/custom-modal.css') }}" rel="stylesheet"
          type="text/css"/>

    <link href="{{ asset('assets/css/pages/BF/Custom_components/custom-pagination.css') }}" rel="stylesheet"
          type="text/css"/>

    <link href="{{ asset('assets/css/pages/BF/Custom_components/custom-table.css') }}" rel="stylesheet"
          type="text/css"/>

    <link href="{{ asset('assets/css/pages/BF/Custom_components/custom-button.css') }}" rel="stylesheet"
          type="text/css"/>

    <script src="{{asset('assets/js/pages/vue.js')}}"></script>

    <script language="javascript" type="text/javascript"
            src="{{ asset('assets/js/pages/BF/Budget/budget_template.js') }}"></script>

@endsection