@extends('admin.layouts.default')

@section('content')

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

        <div class="heading-wrapper">

            <h1>New Prospect</h1>

        </div>

        <div class="content">

            <div class="form-wrapper">

                <div class="dropdown-wrapper">

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

                    <div class="dropdown">

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

                            <span>@{{ chosenCountry.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
                                    v-for="(country, index) in contentData.countries"
                                    :key="index"
                                    class="option"
                                    @click="selectOption($event, 'country', country)"
                            >@{{ country.Country_Name }}
                            </div>

                        </div>

                    </div>

                </div>

                <div class="dropdown-wrapper">

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

                        <div class="dropdown">

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

                                <span>@{{ chosenEntity.Entity_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="(entity, index) in contentData.entities"
                                        :key="index"
                                        class="option"
                                        @click="selectOption($event, 'entityID', entity)"
                                >@{{ entity.Entity_Name }}
                                </div>

                            </div>

                        </div>

                    </div>

                <div class="input-wrapper">

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

                    <input v-model="chosenSoldToCustomer" type="text">

                </div>

                <div class="dropdown-wrapper">

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

                    <div class="dropdown">

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

                            <span>@{{ chosenGroupAccount }}</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="(groupAccount, index) in contentData.group_accounts"
                                    :key="index"
                                    class="option"
                                    @click="selectOption($event, 'groupAccount', groupAccount)"
                            >@{{ groupAccount }}
                            </div>

                        </div>

                    </div>

                </div>

                <div class="dropdown-wrapper">

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

                    <div class="dropdown">

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

                            <span>@{{ chosenMarketSegment.Market_Segment }}</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="(segment, index) in contentData.segments"
                                    :key="index"
                                    class="option"
                                    @click="selectOption($event, 'marketSegment', segment)"
                            >@{{ segment.Market_Segment }}
                            </div>

                        </div>

                    </div>

                </div>

                <div 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 contentData.manufacturing_plants"
                                    :key="index"
                                    class="option"
                                    @click="selectOption($event, 'plant', plant)"
                            >@{{ plant.Plant_Name }}
                            </div>

                        </div>

                    </div>

                </div>

                <div class="input-wrapper">

                    <span class="field-label">ZIP Code</span>

                    <input v-model="chosenZipCode" type="text">

                </div>

                <div class="input-wrapper">

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

                    <input v-model="chosenCity" type="text">

                </div>

                <div class="input-wrapper">

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

                    <input v-model="chosenAddress" type="text">

                </div>

                <div @click="addProspect" :class="{button: true, disabled: !addButtonAvailability}">Add new prospect and forecast line</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_prospect.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_prospect.js') }}"></script>
@endsection