@extends('admin.layouts.default')

@section('content')

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

        <div class="heading-wrapper">

            <h1>New Business</h1>

        </div>

        <div class="content">

            <div class="form-wrapper">

                <div class="country-wrapper">
                    <label>Country*</label>
                    <select v-model="chosenCountryID">
                        <option
                                v-for="(country, index) in countries"
                                :key="index"
                                :value="country.ID">@{{ country.Country_Name }}</option>

                    </select>
                </div>

                <div v-if="chosenCountryID" class="dropdown-wrapper">

                    <span class="field-label">Customer (Sold To)*</span>

                    <div class="dropdown">

                        <div @click="toggleDropdown($event)" class="dropbtn">

                            <span>@{{ chosenCustomer.text }}</span>

                            <i class="arrow down"></i>

                        </div>

                        <div class="dropdown-content">

                            <input
                                    type="text"
                                    placeholder="Search.."
                                    class="dropdown-input"
                                    @input="filterDropdown($event)">

                            <div
                                    v-for="(customer, index) in customers"
                                    :key="index"
                                    class="option"
                                    @click="selectOption($event, customer, 'customer')"
                            >@{{ customer.text }}
                            </div>

                        </div>

                    </div>

                </div>

                <div v-if="chosenCustomer.id" class="dropdown-wrapper disabled">

                    <span class="field-label">Entity</span>

                    <div class="dropdown">

                        <div class="dropbtn">

                            <span>@{{ masterData.entity }}</span>

                        </div>

                    </div>

                </div>

                <div v-if="chosenCustomer.id" :class="{'dropdown-wrapper': true, disabled: masterData.segment}">

                    <span class="field-label">Market segment*</span>

                    <div class="dropdown">

                        <div @click="toggleDropdown($event)" class="dropbtn">

                            <span>@{{ chosenSegment }}</span>

                            <i v-if="!masterData.segment" class="arrow down"></i>

                        </div>

                        <div class="dropdown-content">

                            <input
                                    type="text"
                                    placeholder="Search.."
                                    class="dropdown-input"
                                    @input="filterDropdown($event)">

                            <div
                                    v-for="(segment, index) in segments"
                                    :key="index"
                                    class="option"
                                    @click="selectOption($event, segment, 'segment')"
                            >@{{ segment.Market_Segment }}
                            </div>

                        </div>

                    </div>

                </div>

                <div v-if="chosenCustomer.id" class="dropdown-wrapper disabled">

                    <span class="field-label">Group Account</span>

                    <div class="dropdown">

                        <div class="dropbtn">

                            <span>@{{ masterData.customer_group }}</span>

                        </div>

                    </div>

                </div>

                <div v-if="chosenCustomer.id" class="dropdown-wrapper">

                    <span class="field-label">Plant*</span>

                    <div class="dropdown">

                        <div @click="toggleDropdown($event)" class="dropbtn">

                            <span>@{{ chosenPlant.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
                                    v-for="(plant, index) in plants"
                                    :key="index"
                                    class="option"
                                    @click="selectOption($event, plant, 'plant')"
                            >@{{ plant.Plant_Name }}
                            </div>

                        </div>

                    </div>

                </div>

                <div class="bottom-buttons">
                    <div v-if="chosenCustomer.id" @click="addForecastLine" :class="{button: true, disabled: !validateInputs}">Add Forecast Line</div>
                    <div @click="createNewProspect" class="button">Create New Prospect</div>
                </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>



    </div>

@endsection

@section('footer_scripts')

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