@extends('admin.layouts.default')

@section('content')

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

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

            <div class="heading-wrapper">

                <h1>Forecast Template</h1>

                <a v-if="(!forecastKeys.hasOwnProperty('isEmpty') && !forecastKeys.isEmpty)" :href=" '/api/planning/forecast/' + 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-search_for_export=' + encodeURIComponent(searchFilter)
                + '&Gross_Sales=' + visibleSections.Gross_Sales
                + '&Net_Sales=' + visibleSections.Net_Sales
                + '&Price=' + visibleSections.Price
                + '&KG=' + visibleSections.KG
                + '&SQM=' + visibleSections.SQM
                + '&PCs=' + visibleSections.PCs
                + '&future_months=' + futureMonths
    ">
                    <div class="export-button"> EXPORT</div>
                </a>

            </div>

            <div class="content">

                <div class="top-buttons">

                    <div class="view-wrapper">

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

                        <div class="buttons-wrapper">

                            <div class="left-buttons">

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

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

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

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

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

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

                            </div>

                            <div class="right-buttons">

                                <div @click="setFutureMonths(3)" :class="{button: true, active: futureMonths === 3}">
                                    <span>3M</span>
                                </div>

                                <div @click="setFutureMonths(6)" :class="{button: true, active: futureMonths === 6}">
                                    <span>6M</span>
                                </div>

                                <div @click="setFutureMonths(12)" :class="{button: true, active: futureMonths === 12}">
                                    <span>12M</span>
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="action">

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

                        <div class="buttons-wrapper">

                            <div @click="toggleResetAllModal" class="button">
                                <span>RESET ALL FORECASTS</span>
                            </div>

                        </div>

                    </div>

                </div>

                <div class="filters-section">

                    <div class="left-filters">

                        <div v-if="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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>

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

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

                        <th v-if="visibleSections.Gross_Sales" :colspan="3 + futureMonths">GROSS SALES</th>

                        <th v-if="visibleSections.Net_Sales" :colspan="3 + futureMonths">NET SALES</th>

                        <th v-if="visibleSections.Price" :colspan="3 + futureMonths">Sales Price/kQty</th>

                        <th v-if="visibleSections.KG" :colspan="3 + futureMonths">KG</th>

                        <th v-if="visibleSections.SQM" :colspan="3 + futureMonths">SQM</th>

                        <th v-if="visibleSections.PCs" :colspan="3 + futureMonths">PCs</th>

                    </tr>

                    <tr>

                        <th>Actions</th>

                        {{--                    MASTER DATA--}}
                        <th v-if="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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="forecastKeys.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>

                        {{--                    GROSS SALES--}}
                        <th
                                v-if="visibleSections.Gross_Sales"
                                v-for="displayedMonth in displayedMonths.slice(0, historicalMonths + futureMonths)"
                        >@{{ displayedMonth }}
                        </th>

                        {{--                    NET SALES--}}
                        <th
                                v-if="visibleSections.Net_Sales"
                                v-for="displayedMonth in displayedMonths.slice(0, historicalMonths + futureMonths)"
                        >@{{ displayedMonth }}
                        </th>

                        {{--                    PRICE--}}
                        <th
                                v-if="visibleSections.Price"
                                v-for="displayedMonth in displayedMonths.slice(0, historicalMonths + futureMonths)"
                        >@{{ displayedMonth }}
                        </th>

                        {{--                    KG--}}
                        <th
                                v-if="visibleSections.KG"
                                v-for="displayedMonth in displayedMonths.slice(0, historicalMonths + futureMonths)"
                        >@{{ displayedMonth }}
                        </th>

                        {{--                    SQM--}}
                        <th
                                v-if="visibleSections.SQM"
                                v-for="displayedMonth in displayedMonths.slice(0, historicalMonths + futureMonths)"
                        >@{{ displayedMonth }}
                        </th>

                        {{--                    PCs--}}
                        <th
                                v-if="visibleSections.PCs"
                                v-for="displayedMonth in displayedMonths.slice(0, historicalMonths + futureMonths)"
                        >@{{ displayedMonth }}
                        </th>

                    </tr>

                    </thead>


                    {{--                Table content--}}

                    <tbody>

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

                        <td class="action">

                            <a :href=" '/planning/forecast/forecast-edit?template_id=' + templateID
                            + '&forecast_id=' + forecast.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-country=' + (encodeURIComponent(selectedFilters.countryFilter.Sold_To_Country_ID) ?? '')
                            + '&filter-region=' + (encodeURIComponent(selectedFilters.regionFilter) ?? '')
                            + '&filter-global_region=' + (encodeURIComponent(selectedFilters.globalRegionFilter) ?? '')
                            "
                               v-if="!isTemplateClosed">
                                <img
                                        src="{{asset('assets/img/folder.png')}}"
                                        alt="edit"
                                        title="Edit"
                                >
                            </a>

                            <img
                                    src="{{asset('assets/img/reset.png')}}"
                                    alt="reset"
                                    title="Reset"
                                    @click="toggleResetForecastModal(index)"
                            >

                            <img
                                    src="{{asset('assets/img/comment.png')}}"
                                    alt="comment"
                                    title="Comment"
                                    v-if="forecast.Comment !== null && forecast.Comment !== ''"
                                    @click="toggleModal(index)"
                            >

                            <img
                                    src="{{asset('assets/img/noComment.png')}}"
                                    alt="no comment"
                                    title="Comment"
                                    v-else
                                    @click="toggleModal(index)"
                            >

                            <img
                                    src="{{asset('assets/img/denied.png')}}"
                                    alt="close"
                                    class="delete-forecast"
                                    v-if="forecast.Line_Type === 'O' ||
                                        forecast.Line_Type === 'NB' ||
                                        forecast.Line_Type === 'P'"
                                    @click="deleteForecast(forecast.ID)"
                                    title="Close"
                            >

                        </td>

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

                        {{--                                        GROSS SALES--}}
                        <td
                                v-if="visibleSections.Gross_Sales"
                                v-for="(data, index) in forecast.grossSales.slice(0, historicalMonths + futureMonths)"
                                :class="{ futureMonths: index>2 }"
                        >@{{ data }}
                        </td>

                        {{--                    NET SALES--}}
                        <td
                                v-if="visibleSections.Net_Sales"
                                v-for="(data, index) in forecast.netSales.slice(0, historicalMonths + futureMonths)"
                                :class="{ futureMonths: index>2 }"
                        >@{{ data }}
                        </td>

                        {{--                    PRICE--}}
                        <td
                                v-if="visibleSections.Price"
                                v-for="(data, index) in forecast.price.slice(0, historicalMonths + futureMonths)"
                                :class="{ futureMonths: index>2 }"
                        >@{{ data }}
                        </td>

                        {{--                    KG--}}
                        <td
                                v-if="visibleSections.KG"
                                v-for="(data, index) in forecast.kg.slice(0, historicalMonths + futureMonths)"
                                :class="{ futureMonths: index>2 }"
                        >@{{ data }}
                        </td>

                        {{--                                        SQM--}}
                        <td
                                v-if="visibleSections.SQM"
                                v-for="(data, index) in forecast.sqm.slice(0, historicalMonths + futureMonths)"
                                :class="{ futureMonths: index>2 }"
                        >@{{ data }}
                        </td>

                        {{--                                        PCs--}}
                        <td
                                v-if="visibleSections.PCs"
                                v-for="(data, index) in forecast.pcs.slice(0, historicalMonths + futureMonths)"
                                :class="{ futureMonths: index>2 }"
                        >@{{ data }}
                        </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="forecast.Comment"
                                            name="comment"
                                            rows="8">@{{forecast.Comment}}
                                    </textarea>

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

                                    <div class="buttons-wrapper">

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

                                        <div @click="saveComment(forecast.ID, forecast.Comment)" class="save">Save</div>

                                    </div>

                                </div>

                            </transition>

                            <transition name="fade">
                                <div class="confirmation-modal" v-if="activeResetForecastIndex === index">
                                    <h3>WARNING</h3>

                                    <div class="confirmation-modal-info">
                                        <p>This will reset the data in the database single</p>
                                        <p>Are you sure you want to proceed?</p>
                                    </div>

                                    <button @click="resetForecasts(forecast.ID)" class="apply">YES</button>
                                    <button @click="toggleResetForecastModal(-1)" class="cancel">NO</button>
                                </div>
                            </transition>

                        </td>

                    </tr>

                    </tbody>

                </table>

                <div v-if="!forecastKeys.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">
                    <div class="custom-button" @click="goToNewBusiness">New Business</div>
                    <div class="custom-button" @click="goToPipeline" v-if="!isTemplateClosed">Pipeline</div>
                </div>

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

            <transition name="fade">
                <div class="confirmation-modal" v-if="isResetAllModalOpened">
                    <h3>WARNING</h3>

                    <div class="confirmation-modal-info">
                        <p>This will reset the data in the database</p>
                        <p>Are you sure you want to proceed?</p>
                    </div>

                    <button @click="resetForecasts()" class="apply">YES</button>
                    <button @click="toggleResetAllModal" class="cancel">NO</button>
                </div>
            </transition>

        </div>

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

    </div>

@endsection

@section('footer_scripts')

    <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/Forecast/forecast_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/Forecast/forecast_template.js') }}"></script>

@endsection