@extends('admin.layouts.default')
@section('content')
    <div class="new_forecast_panel" id="app">

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

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

            <div class="content">

                <div class="table-and-buttons-wrapper">

                    <table class="master">

                        <tr>
                            <th class="col-1">Master</th>
                            <th>Select</th>
                        </tr>

                        <tr>
                            <td class="col-1">Template Name</td>
                            <td>
                                <input type="text"
                                       name="TemplateName"
                                       v-model="finalObject.planning_master.Template_Name"/>
                            </td>
                        </tr>

                        <tr>
                            <td class="col-1">Date Range starting from</td>
                            <td :class="{'non-editable': finalObject.planning_master.ID}">
                                <input type="date"
                                       name="PreviousYearRangeFrom"
                                       v-model="finalObject.planning_master.Forecast_Start_Date"
                                       :disabled="finalObject.planning_master.ID"/>
                            </td>
                        </tr>

                        <tr>
                            <td class="col-1">Status</td>
                            <td>
                                <select name="Status"
                                        id="Status"
                                        v-model="finalObject.planning_status_id">
                                    <option
                                            v-for="(status, index) in statuses"
                                            :key="index"
                                            :value="status.ID"
                                            :selected="finalObject.planning_status_id === status.ID"
                                    >@{{status.Status_Description}}
                                    </option>
                                </select>
                            </td>
                        </tr>

                    </table>

                    <div class="custom-button" @click="saveOptions">@{{ buttonLabel }}</div>

                </div>

                <table class="dimension">

                    <tr>
                        <th class="col-1">Dimension (Granularity)</th>
                        <th>Include</th>
                    </tr>

                    <tr>
                        <td class="col-1">Entity ID</td>
                        <td>
                            <input type="checkbox"
                                   name="EntityID"
                                   disabled
                                   checked/>
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Plant Name</td>
                        <td>
                            <input type="checkbox"
                                   name="PlantName"
                                   disabled
                                   checked/>
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Customer No</td>
                        <td><input type="checkbox"
                                   name="CustomerNo"
                                   disabled
                                   checked/>
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Customer Name</td>
                        <td><input type="checkbox"
                                   name="CustomerName"
                                   disabled
                                   checked/>
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Market Segment L2 Name</td>
                        <td><input type="checkbox"
                                   name="MarketSegmentL2Name"
                                   v-model="finalObject.forecast_visibility.Segment_Name_L2"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                  />
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Market Segment L1 Name</td>
                        <td><input type="checkbox"
                                   name="MarketSegmentL1Name"
                                   v-model="finalObject.forecast_visibility.Segment_Name_L1"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                   />
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Market Segment Flex Name</td>
                        <td><input type="checkbox"
                                   name="MarketSegmentFlexName"
                                   v-model="finalObject.forecast_visibility.Segment_Name_Flex"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                   />
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Product Group 1 Name</td>
                        <td><input type="checkbox"
                                   name="ProductGroup1Name"
                                   v-model="finalObject.forecast_visibility.Prodh_Name_L1"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                  />
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Product Group 2 Name</td>
                        <td><input type="checkbox"
                                   name="ProductGroup2Name"
                                   v-model="finalObject.forecast_visibility.Prodh_Name_L2"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                   />
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Product Group 3 Name</td>
                        <td><input type="checkbox"
                                   name="ProductGroup3Name"
                                   v-model="finalObject.forecast_visibility.Prodh_Name_L3"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                  />
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Product Group 4 Name</td>
                        <td><input type="checkbox"
                                   name="ProductGroup4Name"
                                   v-model="finalObject.forecast_visibility.Prodh_Name_L4"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                   />
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Product Group 5 Name</td>
                        <td><input type="checkbox"
                                   name="ProductGroup5Name"
                                   v-model="finalObject.forecast_visibility.Prodh_Name_L5"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                   />
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Product Group 6 Name</td>
                        <td><input type="checkbox"
                                   name="ProductGroup6Name"
                                   v-model="finalObject.forecast_visibility.Prodh_Name_L6"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                   />
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Sales Responsible Name</td>
                        <td><input type="checkbox"
                                   name="SalesResponsibleName"
                                   v-model="finalObject.forecast_visibility.Sales_Representative_Name"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                   />
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Country</td>
                        <td><input type="checkbox"
                                   name="Country"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                   v-model="finalObject.forecast_visibility.Sold_To_Country_ID"/></td>
                    </tr>

                    <tr>
                        <td class="col-1">Region</td>
                        <td><input type="checkbox"
                                   name="Region"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                   v-model="finalObject.forecast_visibility.Region"/></td>
                    </tr>

                    <tr>
                        <td class="col-1">Global Region</td>
                        <td><input type="checkbox"
                                   name="Global_Region"
                                   :disabled="finalObject.forecast_visibility.ID !== null"
                                   v-model="finalObject.forecast_visibility.Global_Region"/></td>
                    </tr>

                </table>

                <table class="key-figures">

                    <tr>
                        <th class="col-1">Key Figures</th>
                        <th>Include</th>
                    </tr>

                    <tr>
                        <td class="col-1">Gross Sales</td>
                        <td><input type="checkbox" name="GrossSales" v-model="finalObject.forecast_visibility.Gross_Sales"/>
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Net Sales</td>
                        <td><input type="checkbox" name="NetSales" v-model="finalObject.forecast_visibility.Net_Sales"/>
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">Price</td>
                        <td><input type="checkbox" name="Price" v-model="finalObject.forecast_visibility.Price"/>
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">KG</td>
                        <td><input type="checkbox" name="KG" v-model="finalObject.forecast_visibility.KG"/>
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">QM</td>
                        <td><input type="checkbox" name="QM" v-model="finalObject.forecast_visibility.SQM"/>
                        </td>
                    </tr>

                    <tr>
                        <td class="col-1">PCs</td>
                        <td><input type="checkbox" name="PCs" v-model="finalObject.forecast_visibility.PCs"/>
                        </td>
                    </tr>

                </table>

            </div>

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

                </div>
            </transition>

        </div>

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

    </div>
@endsection
@section('footer_scripts')

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