@extends('admin.layouts.default')

@section('content')

    <div v-if="hasContentLoaded" class="budget_edit" id="app" v-cloak>

        <div class="heading-wrapper">

            <h1>Budget Edit</h1>

            <img
                    src="{{asset('assets/img/aditionalInfo.svg')}}"
                    alt="info"
                    title="Info"
                    @click="additionalInfo"
            >

        </div>

        <div class="content">

            <table class="master-table">

                <thead>

                <tr>
                    <th v-if="budget.hasOwnProperty('Line_Type')">Type</th>
                    <th v-if="budget.hasOwnProperty('Entity_ID')">Entity ID</th>
                    <th v-if="budget.hasOwnProperty('Plant_Name')">Plant</th>
                    <th v-if="budget.hasOwnProperty('Customer_Sold_To_ID')">Customer No</th>
                    <th v-if="budget.hasOwnProperty('Sold_To_Name')">Customer Name</th>
                    <th v-if="budget.hasOwnProperty('Segment_Name_L2')">Market Segment L2</th>
                    <th v-if="budget.hasOwnProperty('Segment_Name_L1')">Market Segment L1</th>
                    <th v-if="budget.hasOwnProperty('Segment_Name_Flex')">Market Segment Flex Name</th>
                    <th v-if="budget.hasOwnProperty('Sold_To_Country_ID')">Country</th>
                    <th v-if="budget.hasOwnProperty('Region')">Region</th>
                    <th v-if="budget.hasOwnProperty('Global_Region')">Global Region</th>
                    <th v-if="budget.hasOwnProperty('Prodh_Name_L1')">Product Group 1</th>
                    <th v-if="budget.hasOwnProperty('Prodh_Name_L2')">Product Group 2</th>
                    <th v-if="budget.hasOwnProperty('Prodh_Name_L3')">Product Group 3</th>
                    <th v-if="budget.hasOwnProperty('Prodh_Name_L4')">Product Group 4</th>
                    <th v-if="budget.hasOwnProperty('Prodh_Name_L5')">Product Group 5</th>
                    <th v-if="budget.hasOwnProperty('Prodh_Name_L6')">Product Group 6</th>
                    <th v-if="budget.hasOwnProperty('Sales_Representative_Name')">Sales Responsible</th>
                    <th v-if="budget.hasOwnProperty('Group_Account')">Group Account</th>
                    <th v-if="budget.hasOwnProperty('Currency')">Currency</th>
                </tr>

                </thead>

                <tbody>

                <tr>
                    <td v-if="budget.hasOwnProperty('Line_Type')">
                        @{{budget.Line_Type}}
                    </td>

                    <td v-if="budget.hasOwnProperty('Entity_ID')"
                        :class="{editable: budget.Entity_ID === '' || budget.Entity_ID === null}">

                        <select v-if="budget.Entity_ID === '' || budget.Entity_ID === null"
                                v-model="selectedMasterData.Entity_ID">
                            <option
                                    v-for="(entity, index) in masterData.entities"
                                    :key="index"
                                    :value="entity.ID">@{{ entity.Entity_Name }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Entity_ID}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Plant_Name')"
                        :class="{editable: budget.Plant_Name === '' || budget.Plant_Name === null}">

                        <select v-if="budget.Plant_Name === '' || budget.Plant_Name === null"
                                v-model="selectedMasterData.plant">
                            <option
                                    v-for="(plant, index) in masterData.plants"
                                    :key="index"
                                    :value="plant">@{{ plant.Plant_Name }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Plant_Name}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Customer_Sold_To_ID')">@{{budget.Customer_Sold_To_ID}}</td>

                    <td v-if="budget.hasOwnProperty('Sold_To_Name')">@{{budget.Sold_To_Name}}</td>

                    <td v-if="budget.hasOwnProperty('Segment_Name_L2')"
                        :class="{editable: budget.Segment_Name_L2 === '' || budget.Segment_Name_L2 === null}">

                        <select v-if="budget.Segment_Name_L2 === '' || budget.Segment_Name_L2 === null"
                                v-model="selectedMasterData.market_segment_l2">
                            <option
                                    v-for="(segment, index) in masterData.market_segments_l2"
                                    :key="index"
                                    :value="segment">@{{segment.Market_Segment}}
                            </option>
                        </select>
                        <span v-else>@{{ budget.Segment_Name_L2 }}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Segment_Name_L1')"
                        :class="{editable: budget.Segment_Name_L1 === '' || budget.Segment_Name_L1 === null}">

                        <select v-if="budget.Segment_Name_L1 === '' || budget.Segment_Name_L1 === null"
                                v-model="selectedMasterData.market_segment_l1">
                            <option
                                    v-for="(segment, index) in masterData.market_segments_l1"
                                    :key="index"
                                    :value="segment">@{{ segment.Market_Segment }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Segment_Name_L1}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Segment_Name_Flex')"
                        :class="{editable: budget.Segment_Name_Flex === '' || budget.Segment_Name_Flex === null}">

                        <select v-if="budget.Segment_Name_Flex === '' || budget.Segment_Name_Flex === null"
                                v-model="selectedMasterData.market_segment_flex">
                            <option
                                    v-for="(segment, index) in masterData.market_segments_flex"
                                    :key="index"
                                    :value="segment">@{{ segment.Segment_Name_Flex }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Segment_Name_Flex}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Sold_To_Country_ID')"
                        :class="{editable: budget.Sold_To_Country_ID === '' || budget.Sold_To_Country_ID === null}">

                        <select v-if="budget.Sold_To_Country_ID === '' || budget.Sold_To_Country_ID === null"
                                v-model="selectedMasterData.country">
                            <option
                                    v-for="(country, index) in masterData.countries"
                                    :key="index"
                                    :value="country">@{{ country.Country_Name }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Sold_To_Country_ID}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Region')"
                        :class="{editable: budget.Region === '' || budget.Region === null}">

                        <select v-if="budget.Region === '' || budget.Region === null"
                                v-model="selectedMasterData.region">
                            <option
                                    v-for="(region, index) in masterData.regions"
                                    :key="index"
                                    :value="region">@{{ region }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Region}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Global_Region')"
                        :class="{editable: budget.Global_Region === '' || budget.Global_Region === null}">

                        <select v-if="budget.Global_Region === '' || budget.Global_Region === null"
                                v-model="selectedMasterData.globalRegion">
                            <option
                                    v-for="(global_region, index) in masterData.global_regions"
                                    :key="index"
                                    :value="global_region">@{{ global_region }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Global_Region}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Prodh_Name_L1')"
                        :class="{editable: budget.Prodh_Name_L1 === '' || budget.Prodh_Name_L1 === null}">

                        <select
                                v-if="budget.Prodh_Name_L1 === '' || budget.Prodh_Name_L1 === null"
                                v-model="selectedMasterData.productGroup1"
                                @change="getProductUnit"
                        >
                            <option
                                    v-for="(product, index) in masterData.prod_groups_1"
                                    :key="index"
                                    :value="product">@{{ product.Prodh_Name }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Prodh_Name_L1}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Prodh_Name_L2')"
                        :class="{editable: budget.Prodh_Name_L2 === '' || budget.Prodh_Name_L2 === null}">

                        <select v-if="budget.Prodh_Name_L2 === '' || budget.Prodh_Name_L2 === null"
                                v-model="selectedMasterData.productGroup2">
                            <option
                                    v-for="(product, index) in masterData.prod_groups_2"
                                    :key="index"
                                    :value="product">@{{ product.Prodh_Name }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Prodh_Name_L2}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Prodh_Name_L3')"
                        :class="{editable: budget.Prodh_Name_L3 === '' || budget.Prodh_Name_L3 === null}">

                        <select v-if="budget.Prodh_Name_L3 === '' || budget.Prodh_Name_L3 === null"
                                v-model="selectedMasterData.productGroup3">
                            <option
                                    v-for="(product, index) in masterData.prod_groups_3"
                                    :key="index"
                                    :value="product">@{{ product.Prodh_Name }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Prodh_Name_L3}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Prodh_Name_L4')"
                        :class="{editable: budget.Prodh_Name_L4 === '' || budget.Prodh_Name_L4 === null}">

                        <select v-if="budget.Prodh_Name_L4 === '' || budget.Prodh_Name_L4 === null"
                                v-model="selectedMasterData.productGroup4">
                            <option
                                    v-for="(product, index) in masterData.prod_groups_4"
                                    :key="index"
                                    :value="product">@{{ product.Prodh_Name }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Prodh_Name_L4}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Prodh_Name_L5')"
                        :class="{editable: budget.Prodh_Name_L5 === '' || budget.Prodh_Name_L5 === null}">

                        <select v-if="budget.Prodh_Name_L5 === '' || budget.Prodh_Name_L5 === null"
                                v-model="selectedMasterData.productGroup5">
                            <option
                                    v-for="(product, index) in masterData.prod_groups_5"
                                    :key="index"
                                    :value="product">@{{ product.Prodh_Name }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Prodh_Name_L5}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Prodh_Name_L6')"
                        :class="{editable: budget.Prodh_Name_L6 === '' || budget.Prodh_Name_L6 === null}">

                        <select v-if="budget.Prodh_Name_L6 === '' || budget.Prodh_Name_L6 === null"
                                v-model="selectedMasterData.productGroup6">
                            <option
                                    v-for="(product, index) in masterData.prod_groups_6"
                                    :key="index"
                                    :value="product">@{{ product.Prodh_Name }}
                            </option>
                        </select>

                        <span v-else>@{{budget.Prodh_Name_L6}}</span>

                    </td>

                    <td v-if="budget.hasOwnProperty('Sales_Representative_Name')">
                        @{{budget.Sales_Representative_Name}}
                    </td>

                    <td v-if="budget.hasOwnProperty('Group_Account')">
                        @{{budget.Group_Account}}
                    </td>

                    <td :class="{editable: budget.Currency === '' || budget.Currency === null}">

                        <select v-if="budget.Currency === '' || budget.Currency === null"
                                v-model="selectedMasterData.currency">
                            <option
                                    v-for="(currency, index) in masterData.currencies"
                                    :key="index"
                                    :value="currency.Currency ">@{{ currency.Currency }}
                            </option>
                        </select>

                        <span v-else>@{{ budget.Currency }}</span>
                    </td>

                </tr>

                </tbody>

            </table>

            <table class="sections-table">

                <thead>

                <tr>
                    <th></th>
                    <th>Sales Price/kQty</th>
                    <th v-if="budget.hasOwnProperty('PPY_Net_Sales_I')
                                  || budget.hasOwnProperty('PY_Net_Sales_I')
                                  || budget.hasOwnProperty('YTD_Net_Sales_I')
                                  || budget.hasOwnProperty('B-CY_Net_Sales_I')
                                  || budget.hasOwnProperty('OL_Net_Sales_P')
                                  || budget.hasOwnProperty('B-NY_Net_Sales_P')"
                    >
                        Net Sales
                    </th>

                    <th v-if="budget.hasOwnProperty('PPY_Material_Margin_P')
                                  || budget.hasOwnProperty('PY_Material_Margin_P')
                                  || budget.hasOwnProperty('YTD_Material_Margin_P')
                                  || budget.hasOwnProperty('B-CY_Material_Margin_P')
                                  || budget.hasOwnProperty('OL_Material_Margin_P')
                                  || budget.hasOwnProperty('B-NY_Material_Margin_P')"
                    >
                        MM (%)
                    </th>

                    <th v-if="budget.hasOwnProperty('PPY_Contribution_Margin_P')
                                  || budget.hasOwnProperty('PY_Contribution_Margin_P')
                                  || budget.hasOwnProperty('YTD_Contribution_Margin_P')
                                  || budget.hasOwnProperty('B-CY_Contribution_Margin_P')
                                  || budget.hasOwnProperty('OL_Contribution_Margin_P')
                                  || budget.hasOwnProperty('B-NY_Contribution_Margin_P')"
                    >
                        CM (%)
                    </th>

                    <th v-if="budget.hasOwnProperty('PPY_Gross_Margin_P')
                                  || budget.hasOwnProperty('PY_Gross_Margin_P')
                                  || budget.hasOwnProperty('YTD_Gross_Margin_P')
                                  || budget.hasOwnProperty('B-CY_Gross_Margin_P')
                                  || budget.hasOwnProperty('OL_Gross_Margin_P')
                                  || budget.hasOwnProperty('B-NY_Gross_Margin_P')"
                    >
                        GM (%)
                    </th>

                    <th v-if="budget.hasOwnProperty('PPY_EBITDA_P')
                                  || budget.hasOwnProperty('PY_EBITDA_P')
                                  || budget.hasOwnProperty('YTD_EBITDA_P')
                                  || budget.hasOwnProperty('B-CY_EBITDA_P')
                                  || budget.hasOwnProperty('OL_EBITDA_P')
                                  || budget.hasOwnProperty('B-NY_EBITDA_P')"
                    >
                        EBITDA (%)
                    </th>

                    <th v-if="budget.hasOwnProperty('PPY_Quantity_QM_I')
                                  || budget.hasOwnProperty('PY_Quantity_QM_I')
                                  || budget.hasOwnProperty('YTD_Quantity_QM_I')
                                  || budget.hasOwnProperty('B-CY_Quantity_QM_I')
                                  || budget.hasOwnProperty('OL_Quantity_QM_I')
                                  || budget.hasOwnProperty('B-NY_Quantity_QM_I')"
                    >
                        Qty_SQM
                    </th>

                    <th v-if="budget.hasOwnProperty('PPY_Quantity_KG_I')
                                  || budget.hasOwnProperty('PY_Quantity_KG_I')
                                  || budget.hasOwnProperty('YTD_Quantity_KG_I')
                                  || budget.hasOwnProperty('B-CY_Quantity_KG_I')
                                  || budget.hasOwnProperty('OL_Quantity_KG_I')
                                  || budget.hasOwnProperty('B-NY_Quantity_KG_I')"
                    >
                        Qty_KG
                    </th>

                    <th v-if="budget.hasOwnProperty('PPY_Quantity_PCs_I')
                                  || budget.hasOwnProperty('PY_Quantity_PCs_I')
                                  || budget.hasOwnProperty('YTD_Quantity_PCs_I')
                                  || budget.hasOwnProperty('B-CY_Quantity_PCs_I')
                                  || budget.hasOwnProperty('OL_Quantity_PCs_I')
                                  || budget.hasOwnProperty('B-NY_Quantity_PCs_I')"
                    >
                        QTY_PCs
                    </th>
                    <th>Distribution</th>
                </tr>

                </thead>

                <tbody>

                <tr v-if="visibleSections.Previous_Previous_Period">
                    <td class="first-column">PPY @{{ years_for_sections.Previous_Previous_Period }}</td>
                    <td>@{{budget.PPY_Sales_Price !== null ? budget.PPY_Sales_Price.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PPY_Sales_Price}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PPY_Net_Sales_I')">
                        @{{budget.PPY_Net_Sales_I !== null ? budget.PPY_Net_Sales_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PPY_Net_Sales_I}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PPY_Material_Margin_P')">
                        @{{budget.PPY_Material_Margin_Percentage !== null ?
                        budget.PPY_Material_Margin_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PPY_Material_Margin_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PPY_Contribution_Margin_P')">
                        @{{budget.PPY_Contribution_Margin_Percentage !== null ?
                        budget.PPY_Contribution_Margin_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PPY_Contribution_Margin_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PPY_Gross_Margin_P')">
                        @{{budget.PPY_Gross_Margin_Percentage!== null ?
                        budget.PPY_Gross_Margin_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PPY_Gross_Margin_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PPY_EBITDA_P')">
                        @{{budget.PPY_EBITDA_Percentage !== null ? budget.PPY_EBITDA_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PPY_EBITDA_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PPY_Quantity_QM_I')">
                        @{{budget.PPY_Quantity_QM_I !== null ? budget.PPY_Quantity_QM_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PPY_Quantity_QM_I}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PPY_Quantity_KG_I')">
                        @{{budget.PPY_Quantity_KG_I !== null ? budget.PPY_Quantity_KG_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PPY_Quantity_KG_I}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PPY_Quantity_PCs_I')">
                        @{{budget.PPY_Quantity_PCs_I !== null ? budget.PPY_Quantity_PCs_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PPY_Quantity_PCs_I}}
                    </td>
                    <td></td>
                </tr>

                <tr v-if="visibleSections.Previous_Period">
                    <td class="first-column">Previous FY @{{ years_for_sections.Previous_Period }}</td>
                    <td>@{{budget.PY_Sales_Price !== null ? budget.PY_Sales_Price.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PY_Sales_Price}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PY_Net_Sales_I')">
                        @{{budget.PY_Net_Sales_I !== null ? budget.PY_Net_Sales_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PY_Net_Sales_I}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PY_Material_Margin_P')">
                        @{{budget.PY_Material_Margin_Percentage !== null ?
                        budget.PY_Material_Margin_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PY_Material_Margin_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PY_Contribution_Margin_P')">
                        @{{budget.PY_Contribution_Margin_Percentage !== null ?
                        budget.PY_Contribution_Margin_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PY_Contribution_Margin_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PY_Gross_Margin_P')">
                        @{{budget.PY_Gross_Margin_Percentage!== null ?
                        budget.PY_Gross_Margin_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PY_Gross_Margin_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PY_EBITDA_P')">
                        @{{budget.PY_EBITDA_Percentage !== null ? budget.PY_EBITDA_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PY_EBITDA_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PY_Quantity_QM_I')">
                        @{{budget.PY_Quantity_QM_I !== null ? budget.PY_Quantity_QM_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PY_Quantity_QM_I}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PY_Quantity_KG_I')">
                        @{{budget.PY_Quantity_KG_I !== null ? budget.PY_Quantity_KG_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PY_Quantity_KG_I}}
                    </td>
                    <td v-if="budget.hasOwnProperty('PY_Quantity_PCs_I')">
                        @{{budget.PY_Quantity_PCs_I !== null ? budget.PY_Quantity_PCs_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.PY_Quantity_PCs_I}}
                    </td>
                    <td></td>
                </tr>

                <tr v-if="visibleSections.Budget_CY">
                    <td class="first-column">Bud CY</td>
                    <td>
                        @{{budget['B-CY_Sales_Price'] !== null ? budget['B-CY_Sales_Price'].toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget['B-CY_Sales_Price']}}
                    </td>
                    <td v-if="budget.hasOwnProperty('B-CY_Net_Sales_I')">
                        @{{budget['B-CY_Net_Sales_I'] !== null ? budget['B-CY_Net_Sales_I'].toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget['B-CY_Net_Sales_I']}}
                    </td>
                    <td v-if="budget.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,
                        }) : budget['B-CY_Material_Margin_Percentage']}}
                    </td>
                    <td v-if="budget.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,
                        }) : budget['B-CY_Contribution_Margin_Percentage']}}
                    </td>
                    <td v-if="budget.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,
                        }) : budget['B-CY_Gross_Margin_Percentage']}}
                    </td>
                    <td v-if="budget.hasOwnProperty('B-CY_EBITDA_P')">
                        @{{budget['B-CY_EBITDA_Percentage'] !== null ?
                        budget['B-CY_EBITDA_Percentage'].toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget['B-CY_EBITDA_Percentage']}}
                    </td>
                    <td v-if="budget.hasOwnProperty('B-CY_Quantity_QM_I')">
                        @{{budget['B-CY_Quantity_QM_I'] !== null ? budget['B-CY_Quantity_QM_I'].toLocaleString('en-US',
                        {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget['B-CY_Quantity_QM_I']}}
                    </td>
                    <td v-if="budget.hasOwnProperty('B-CY_Quantity_KG_I')">
                        @{{budget['B-CY_Quantity_KG_I'] !== null ? budget['B-CY_Quantity_KG_I'].toLocaleString('en-US',
                        {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget['B-CY_Quantity_KG_I']}}
                    </td>
                    <td v-if="budget.hasOwnProperty('B-CY_Quantity_PCs_I')">
                        @{{budget['B-CY_Quantity_PCs_I'] !== null ?
                        budget['B-CY_Quantity_PCs_I'].toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget['B-CY_Quantity_PCs_I']}}
                    </td>
                    <td></td>
                </tr>

                <tr v-if="visibleSections.Outlook">

                    <td class="first-column">Forecast 6+6</td>

                    <td class="editable">
                        <input type="number" v-model="budget['OL_Price_P']">
                    </td>

                    <td v-if="budget.hasOwnProperty('OL_Net_Sales_P')">
                        @{{ calculateOlNetSales !== null ? calculateOlNetSales.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : calculateOlNetSales
                        }}
                    </td>

                    <td v-if="budget.hasOwnProperty('OL_Material_Margin_P')" class="editable">
                        <input type="number" v-model="budget['OL_Material_Margin_Percentage']">
                    </td>

                    <td v-if="budget.hasOwnProperty('OL_Contribution_Margin_P')" class="editable">
                        <input type="number" v-model="budget['OL_Contribution_Margin_Percentage']">
                    </td>

                    <td v-if="budget.hasOwnProperty('OL_Gross_Margin_P')" class="editable">
                        <input type="number" v-model="budget['OL_Gross_Margin_Percentage']">
                    </td>

                    <td v-if="budget.hasOwnProperty('OL_EBITDA_P')" class="editable">
                        <input type="number" v-model="budget['OL_EBITDA_Percentage']">
                    </td>

                    <td v-if="budget.hasOwnProperty('OL_Quantity_QM_I')"
                        :class="{editable: productUnitDisplayed('sqm')}"
                    >
                        <input v-if="productUnitDisplayed('sqm')" type="number" v-model="budget['OL_Quantity_QM_I']">
                    </td>

                    <td v-if="budget.hasOwnProperty('OL_Quantity_KG_I')"
                        :class="{editable: productUnitDisplayed('kg')}"
                    >
                        <input v-if="productUnitDisplayed('kg')" type="number" v-model="budget['OL_Quantity_KG_I']">
                    </td>

                    <td v-if="budget.hasOwnProperty('OL_Quantity_PCs_I')"
                        :class="{editable: productUnitDisplayed('pcs')}"
                    >
                        <input v-if="productUnitDisplayed('pcs')" type="number" v-model="budget['OL_Quantity_PCs_I']">
                    </td>

                    <td></td>

                </tr>

                <tr v-if="visibleSections['Year_To_Date(YTD)']">
                    <td class="first-column">YTD @{{ years_for_sections.YTD }}</td>
                    <td>@{{budget.YTD_Sales_Price !== null ? budget.YTD_Sales_Price.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.YTD_Sales_Price}}
                    </td>
                    <td v-if="budget.hasOwnProperty('YTD_Net_Sales_I')">
                        @{{budget.YTD_Net_Sales_I !== null ? budget.YTD_Net_Sales_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.YTD_Net_Sales_I}}
                    </td>
                    <td v-if="budget.hasOwnProperty('YTD_Material_Margin_P')">
                        @{{budget.YTD_Material_Margin_Percentage !== null ?
                        budget.YTD_Material_Margin_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.YTD_Material_Margin_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('YTD_Contribution_Margin_P')">
                        @{{budget.YTD_Contribution_Margin_Percentage !== null ?
                        budget.YTD_Contribution_Margin_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.YTD_Contribution_Margin_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('YTD_Gross_Margin_P')">
                        @{{budget.YTD_Gross_Margin_Percentage !== null ?
                        budget.YTD_Gross_Margin_Percentage.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.YTD_Gross_Margin_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('YTD_EBITDA_P')">
                        @{{budget.YTD_EBITDA_Percentage !== null ? budget.YTD_EBITDA_Percentage.toLocaleString('en-US',
                        {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.YTD_EBITDA_Percentage}}
                    </td>
                    <td v-if="budget.hasOwnProperty('YTD_Quantity_QM_I')">
                        @{{budget.YTD_Quantity_QM_I !== null ? budget.YTD_Quantity_QM_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.YTD_Quantity_QM_I}}
                    </td>
                    <td v-if="budget.hasOwnProperty('YTD_Quantity_KG_I')">
                        @{{budget.YTD_Quantity_KG_I !== null ? budget.YTD_Quantity_KG_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.YTD_Quantity_KG_I}}
                    </td>
                    <td v-if="budget.hasOwnProperty('YTD_Quantity_PCs_I')">
                        @{{budget.YTD_Quantity_PCs_I !== null ? budget.YTD_Quantity_PCs_I.toLocaleString('en-US', {
                        maximumFractionDigits: 2,
                        minimumFractionDigits: 0,
                        }) : budget.YTD_Quantity_PCs_I}}
                    </td>
                    <td></td>
                </tr>

                <tr v-if="visibleSections.Budget_NY">

                    <td class="first-column">Bud @{{ years_for_sections.Budget_NY }}</td>

                    <td class="editable">
                        <input type="number" v-model="budget['B-NY_Price_P']">
                    </td>

                    <td v-if="budget.hasOwnProperty('B-NY_Net_Sales_P')">
                        @{{ calculateBudNyNetSales !== null ? calculateBudNyNetSales.toLocaleString('en-US', {
                            maximumFractionDigits: 2,
                            minimumFractionDigits: 0,
                            }) : calculateBudNyNetSales
                        }}
                    </td>

                    <td v-if="budget.hasOwnProperty('B-NY_Material_Margin_P')" class="editable">
                        <input type="number" v-model="budget['B-NY_Material_Margin_Percentage']">
                    </td>

                    <td v-if="budget.hasOwnProperty('B-NY_Contribution_Margin_P')" class="editable">
                        <input type="number" v-model="budget['B-NY_Contribution_Margin_Percentage']">
                    </td>

                    <td v-if="budget.hasOwnProperty('B-NY_Gross_Margin_P')" class="editable">
                        <input type="number" v-model="budget['B-NY_Gross_Margin_Percentage']">
                    </td>

                    <td v-if="budget.hasOwnProperty('B-NY_EBITDA_P')" class="editable">
                        <input type="number" v-model="budget['B-NY_EBITDA_Percentage']">
                    </td>

                    <td v-if="budget.hasOwnProperty('B-NY_Quantity_QM_I')"
                        :class="{editable: productUnitDisplayed('sqm')}">
                        <input v-if="productUnitDisplayed('sqm')" type="number" v-model="budget['B-NY_Quantity_QM_I']">
                    </td>

                    <td v-if="budget.hasOwnProperty('B-NY_Quantity_KG_I')"
                        :class="{editable: productUnitDisplayed('kg')}">
                        <input v-if="productUnitDisplayed('kg')" type="number" v-model="budget['B-NY_Quantity_KG_I']">
                    </td>

                    <td v-if="budget.hasOwnProperty('B-NY_Quantity_PCs_I')"
                        :class="{editable: productUnitDisplayed('pcs')}">
                        <input v-if="productUnitDisplayed('pcs')" type="number" v-model="budget['B-NY_Quantity_PCs_I']">
                    </td>

                    <td class="editable">
                        <select name="distribution-dropdown" id="dropdown" v-model="distributionOption">
                            <option :value="0">Equal</option>
                            <option :value="1">Manual</option>
                        </select>
                    </td>
                </tr>

                </tbody>

            </table>

            <table class="distribution-table" v-if="displayDistributionTable">

                <thead>

                <tr>
                    <th>In %</th>
                    <th
                            v-for="(month, index) in distributionMonths"
                            :key="index"
                    >@{{ month.label }}
                    </th>
                    <th>Total</th>
                </tr>

                </thead>

                <tbody>

                <tr>
                    <td>Bud @{{ years_for_sections.Budget_NY }}</td>
                    <td
                            v-for="(month, index) in distributionMonths"
                            :key="index"
                            class="editable"
                    >

                        <input type="number" v-model="month.value" @blur="checkIfEmpty(month)">

                    </td>
                    <td>@{{ calculateDistributionTotal }}</td>

                </tr>

                </tbody>

            </table>

            <div class="bottom-buttons">
                <div @click="saveBudget(0)" class="custom-button">SAVE</div>

                <div @click="saveBudget(1)" class="custom-button">SAVE & RETURN</div>

                <div @click="saveBudget(2)" class="custom-button">SAVE & NEXT</div>
            </div>

        </div>

        <transition name="fade">

            <div class="pop-up" v-if="additionalInfoOpened">

                <div class="additionalInfoContent">
                    <div class="title-wrapper">
                        <img
                                src="{{asset('assets/img/aditionalInfo.svg')}}"
                                alt="info"
                                title="Info"
                        >

                        <h3 class="popup-title">Attention!</h3>
                    </div>

                    <p>Column "Sales Price/kQty": Enter the Sales Price per THOUSAND unit.</p>

                    <p>Column "Qty_SQM/KG/PCs": Enter the volume in the original amount.</p>

                    <div @click="additionalInfoOpened = false" class="cancel">Understand</div>
                </div>

                <div class="backdrop" @click="additionalInfoOpened = false"></div>

            </div>

        </transition>

        <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>

@endsection

@section('footer_scripts')

    <script>

        var appSettings = {
            template_id: {!!json_encode($template_id)!!},
            budget_id: {!!json_encode($budget_id)!!},
            filter_entity: {!!json_encode($filter_entity)!!},
            filter_plant: {!!json_encode($filter_plant)!!},
            filter_customer_no: {!!json_encode($filter_customer_no)!!},
            filter_customer_name: {!!json_encode($filter_customer_name)!!},
            filter_market_seg_l2: {!!json_encode($filter_market_seg_l2)!!},
            filter_market_seg_l1: {!!json_encode($filter_market_seg_l1)!!},
            filter_market_seg_flex: {!!json_encode($filter_market_seg_flex)!!},
            filter_prod_group_1: {!!json_encode($filter_prod_group_1)!!},
            filter_prod_group_2: {!!json_encode($filter_prod_group_2)!!},
            filter_prod_group_3: {!!json_encode($filter_prod_group_3)!!},
            filter_prod_group_4: {!!json_encode($filter_prod_group_4)!!},
            filter_prod_group_5: {!!json_encode($filter_prod_group_5)!!},
            filter_prod_group_6: {!!json_encode($filter_prod_group_6)!!},
            filter_employee: {!!json_encode($filter_employee)!!},
            filter_group_account: {!!json_encode($filter_group_account)!!},
            filter_country: {!!json_encode($filter_country)!!},
            filter_region: {!!json_encode($filter_region)!!},
            filter_global_region: {!!json_encode($filter_global_region)!!},
        };

    </script>

    <link href="{{ asset('assets/css/pages/BF/Budget/budget_edit.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_edit.js') }}"></script>
@endsection