@extends('admin.layouts.default')

@section('content')

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

        <div class="heading-wrapper">
            <h1>Forecast Edit</h1>
        </div>

        <div class="content">

            <div class="top-buttons">

{{--                <div class="edit-wrapper">--}}

{{--                    <div class="title">--}}
{{--                        <span>EDIT</span>--}}
{{--                    </div>--}}

{{--                    <div class="buttons-wrapper">--}}

{{--                        <div @click="toggleLocked" :class="{button: true, active: isLocked}">--}}
{{--                            <span>Lock Sales/Qty</span>--}}
{{--                        </div>--}}

{{--                    </div>--}}

{{--                </div>--}}

                <div class="action">

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

                    <div class="buttons-wrapper">

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

                    </div>

                </div>

            </div>

            <table>

                <thead>

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

                </thead>

                <tbody>

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

                        <select v-if="forecast.Entity_ID === '' || forecast.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>@{{forecast.Entity_ID}}</span>

                    </td>

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

                        <select v-if="forecast.Plant_Name === '' || forecast.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>@{{forecast.Plant_Name}}</span>

                    </td>

                    <td v-if="forecast.hasOwnProperty('Customer_Sold_To_ID')"
                        :class="{editable: forecast.Customer_Sold_To_ID === '' || forecast.Customer_Sold_To_ID === null}">
                        @{{forecast.Customer_Sold_To_ID}}
                    </td>

                    <td v-if="forecast.hasOwnProperty('Sold_To_Name')"
                        :class="{editable: forecast.Sold_To_Name === '' || forecast.Sold_To_Name === null}">
                        @{{forecast.Sold_To_Name}}
                    </td>

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

                        <select v-if="forecast.Segment_Name_L2 === '' || forecast.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>@{{ forecast.Segment_Name_L2 }}</span>

                    </td>

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

                        <select v-if="forecast.Segment_Name_L1 === '' || forecast.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>@{{forecast.Segment_Name_L1}}</span>

                    </td>

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

                        <select v-if="forecast.Segment_Name_Flex === '' || forecast.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>@{{forecast.Segment_Name_Flex}}</span>

                    </td>

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

                        <select v-if="forecast.Sold_To_Country_ID === '' || forecast.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>@{{forecast.Sold_To_Country_ID}}</span>

                    </td>

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

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

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

                    </td>

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

                        <select v-if="forecast.Global_Region === '' || forecast.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>@{{forecast.Global_Region}}</span>

                    </td>

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

                        <select
                                v-if="forecast.Prodh_Name_L1 === '' || forecast.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>@{{forecast.Prodh_Name_L1}}</span>

                    </td>

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

                        <select v-if="forecast.Prodh_Name_L2 === '' || forecast.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>@{{forecast.Prodh_Name_L2}}</span>

                    </td>

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

                        <select v-if="forecast.Prodh_Name_L3 === '' || forecast.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>@{{forecast.Prodh_Name_L3}}</span>

                    </td>

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

                        <select v-if="forecast.Prodh_Name_L4 === '' || forecast.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>@{{forecast.Prodh_Name_L4}}</span>

                    </td>

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

                        <select v-if="forecast.Prodh_Name_L5 === '' || forecast.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>@{{forecast.Prodh_Name_L5}}</span>

                    </td>

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

                        <select v-if="forecast.Prodh_Name_L6 === '' || forecast.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>@{{forecast.Prodh_Name_L6}}</span>

                    </td>

                    <td v-if="forecast.hasOwnProperty('Sales_Representative_Name')"
                        :class="{editable: forecast.Sales_Representative_Name === '' || forecast.Sales_Representative_Name === null}">
                        @{{forecast.Sales_Representative_Name}}
                    </td>

                </tr>

                </tbody>


            </table>

            <table>

                <thead>

                <tr>
                    <th></th>
                    <th v-for="displayedMonth in displayedMonths">
                        @{{ displayedMonth }}
                    </th>
                </tr>

                </thead>

                <tbody>

                <tr v-if="visibleSections.hasOwnProperty('Gross_Sales') && visibleSections.Gross_Sales">
                    <td>Gross Sales</td>
                    <td
                            v-for="(grossSale, index) in formattedDatas.grossSales"
                            :key="index"
                            :class="{editable: index>2}"
                    >
                        <input
                                type="number"
                                v-model="grossSale.value"
                                v-if="index>2"
                        >

                        <div v-else> @{{ grossSale.value }}</div>
                    </td>
                </tr>

                <tr v-if="visibleSections.hasOwnProperty('Net_Sales') && visibleSections.Net_Sales">
                    <td>Net Sales</td>
                    <td
                            v-for="(netSale, index) in formattedDatas.netSales"
                            :key="index"
                            :class="{disabled: index>2}">
{{--                        <input--}}
{{--                                type="number"--}}
{{--                                v-if="index>2"--}}
{{--                                v-model="netSale.value"--}}
{{--                                @input="changeNetSales($event, index)"--}}
{{--                        >--}}

                        <div> @{{ netSale.value }}</div>
                    </td>
                </tr>

                <tr v-if="visibleSections.hasOwnProperty('Price') && visibleSections.Price">
                    <td>Sales Price/kQty</td>
                    <td
                            v-for="(price, index) in formattedDatas.price"
                            :key="index"
                            :class="{editable: index>2}"
                    >
                        <input
                                type="number"
                                v-model="price.value"
                                v-if="index>2"
                                @input="changePrice($event, index)"
                        >

                        <div v-else> @{{ price.value }}</div>
                    </td>
                </tr>

                <tr v-if="visibleSections.hasOwnProperty('KG') && visibleSections.KG">
                    <td>QTY_KG</td>
                    <td
                            v-for="(qty_kg, index) in formattedDatas.kg"
                            :key="index"
                            :class="{editable: index>2 && productUnitDisplayed('kg'), disabled: index>2 && !productUnitDisplayed('kg')}"
                    >
                        <input
                                type="number"
                                v-model="qty_kg.value"
                                v-if="index>2"
                                @input="changeQTY($event, index)"
                        >

                        <div v-else> @{{ qty_kg.value }}</div>
                    </td>
                </tr>

                <tr v-if="visibleSections.hasOwnProperty('SQM') && visibleSections.SQM">
                    <td>QTY_SQM</td>
                    <td
                            v-for="(qty_sqm, index) in formattedDatas.sqm"
                            :key="index"
                            :class="{editable: index>2 && productUnitDisplayed('sqm'), disabled: index>2 && !productUnitDisplayed('sqm')}"
                    >
                        <input
                                type="number"
                                v-model="qty_sqm.value"
                                v-if="index>2"
                                @input="changeQTY($event, index)"
                        >

                        <div v-else> @{{ qty_sqm.value }}</div>
                    </td>
                </tr>

                <tr v-if="visibleSections.hasOwnProperty('PCs') && visibleSections.PCs">
                    <td>QTY_PCs</td>
                    <td
                            v-for="(qty_pcs, index) in formattedDatas.pcs"
                            :key="index"
                            :class="{editable: index>2 && productUnitDisplayed('pcs'), disabled: index>2 && !productUnitDisplayed('pcs')}"
                    >
                        <input
                                type="number"
                                v-model="qty_pcs.value"
                                v-if="index>2"
                                @input="changeQTY($event, index)"
                        >

                        <div v-else> @{{ qty_pcs.value }}</div>
                    </td>
                </tr>

                </tbody>

            </table>

            <div class="buttons-wrapper">
                <div @click="saveForecast(0)" class="custom-button"> SAVE </div>
                <div @click="saveForecast(1)" class="custom-button"> SAVE & RETURN </div>
                <div @click="saveForecast(2)" class="custom-button"> SAVE & NEXT </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>

@endsection

@section('footer_scripts')

    <script>

        var appSettings = {
            template_id: {!!json_encode($template_id)!!},
            forecast_id: {!!json_encode($forecast_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_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/Forecast/forecast_edit.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-modal.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_edit.js') }}"></script>

@endsection