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

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

            <div class="heading-wrapper">
                <h1>New budget 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">Budget Year</td>
                            <td :class="{'non-editable': finalObject.planning_master.ID}">
                                <input type="number"
                                       name="BudgetYear"
                                       v-model="finalObject.planning_master.Budget_Year"
                                       :disabled="finalObject.planning_master.ID"
                                       onkeydown="return false"/>
                            </td>
                        </tr>

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

                        <tr>
                            <td class="col-1">Penultimate Year Range to</td>
                            <td :class="{'non-editable': finalObject.planning_master.ID}">
                                <input type="date"
                                       name="PreviousYearRangeFromTo"
                                       v-model="finalObject.planning_master.Previous_Previous_Date_Range_to"
                                       :disabled="finalObject.planning_master.ID"/>
                            </td>
                        </tr>

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

                        <tr>
                            <td class="col-1">Previous Year Range to</td>
                            <td :class="{'non-editable': finalObject.planning_master.ID}">
                                <input type="date"
                                       name="PreviousYearRangeFromTo"
                                       v-model="finalObject.planning_master.Previous_Date_Range_to"
                                       :disabled="finalObject.planning_master.ID"/>
                            </td>
                        </tr>

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

                        <tr>
                            <td class="col-1">YTD Date Range to</td>
                            <td :class="{'non-editable': finalObject.planning_master.ID}">
                                <input type="date"
                                       name="YTDDateRangeTo"
                                       v-model="finalObject.planning_master.YTD_Date_Range_to"
                                       :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>

                        <tr>
                            <td class="col-1">Index Factor</td>
                            <td>
                                <input type="number"
                                       name="IndexFactor"
                                       v-model="finalObject.planning_master.Index_Factor"/>
                            </td>
                        </tr>

                    </table>

                    <div @click="toggleModal" class="custom-button" v-if="finalObject.budget_visibility.ID !== null"> Update Index</div>

                    <div @click="saveOptions" class="custom-button"> @{{ 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"
                                   :disabled="finalObject.budget_visibility.ID !== null"
                                   v-model="finalObject.budget_visibility.Segment_Name_L2"/></td>
                    </tr>

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

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

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

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

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

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

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

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

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

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

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

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

                    <tr>
                        <td class="col-1">Global Region</td>
                        <td><input type="checkbox"
                                   name="Global_Region"
                                   :disabled="finalObject.budget_visibility.ID !== null"
                                   v-model="finalObject.budget_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.budget_visibility.Gross_Sales"/>
                        </td>
                    </tr>

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

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

                    <tr>
                        <td class="col-1">Material Margin</td>
                        <td><input type="checkbox" name="MaterialMargin"
                                   v-model="finalObject.budget_visibility.Material_Margin"/></td>
                    </tr>

                    <tr>
                        <td class="col-1">Contribution Margin</td>
                        <td><input type="checkbox" name="ContributionMargin"
                                   v-model="finalObject.budget_visibility.Contribution_Margin"/></td>
                    </tr>

                    <tr>
                        <td class="col-1">Gross Margin</td>
                        <td><input type="checkbox" name="GrossMargin"
                                   v-model="finalObject.budget_visibility.Gross_Margin"/></td>
                    </tr>

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

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

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

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

                </table>

                <table class="sections">

                    <tr>
                        <th class="col-1">Sections</th>
                        <th>Include Budget</th>
                    </tr>

                    <tr>
                        <td class="col-1">Penultimate Period</td>
                        <td><input type="checkbox" name="PenultimatePeriod"
                                   v-model="finalObject.budget_visibility.Previous_Previous_Period"/></td>
                    </tr>

                    <tr>
                        <td class="col-1">Previous Period</td>
                        <td><input type="checkbox" name="PreviousPeriod"
                                   v-model="finalObject.budget_visibility.Previous_Period"/></td>
                    </tr>

                    <tr>
                        <td class="col-1">YTD</td>
                        <td><input type="checkbox" name="YTD" v-model="finalObject.budget_visibility['Year_To_Date(YTD)']"/></td>
                    </tr>

                    <tr>
                        <td class="col-1">Budget CY</td>
                        <td><input type="checkbox" name="BudgetCY" v-model="finalObject.budget_visibility.Budget_CY"/>
                        </td>
                    </tr>

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

                    <tr>
                        <td class="col-1">Budget NY</td>
                        <td><input type="checkbox" name="BudgetNY" v-model="finalObject.budget_visibility.Budget_NY"/>
                        </td>
                    </tr>

                </table>

            </div>

            <transition name="fade">
                <div class="confirmation-modal" v-if="isOpened">
                    <h3>WARNING</h3>
                    <div class="confirmation-modal-info">
                        <p>This function will apply your index factor and change the values of your budget!</p>
                    </div>
                    <button class="apply" @click="updateIndex">APPLY</button>
                    <button class="cancel" @click="toggleModal">CANCEL</button>
                </div>
            </transition>

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

                </div>
            </transition>

        </div>

        <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/Budget/new_budget_panel.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/Budget/new_budget_panel.js') }}"></script>

@endsection