@extends('admin.layouts.main')

@section('title')
    Step 2
@endsection

@section('content')

    <main>

        <loading :active.sync="isLoading"></loading>

        <div class="two-col" v-cloak>

            @include("admin.common.sidebar")

            <div class="right-sec">

                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">
                                @if($campaign)
                                    Edit Campaign
                                @else
                                    Add Campaign
                                @endif
                            </a></li>
                        <li class="breadcrumb-item" aria-current="page">
                            <a
                                href="{{ route('admin.campaigns.addEditStep1',['panel' => Session::get('panel'),'id' => $campaign->id ]) }}">
                                Configure</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Recipients</li>
                    </ol>
                </nav>

                <template v-if="preview">
                    @include('admin.modules.campaign.preview_recipients')
                </template>

                <form id="formStep2" method="post" v-else>
                    @csrf
                    <input type="hidden" name="id" id="id" value="{{ $campaign->id }}"/>
                    <div class="form-sec">

                        <div class="container">
                            <div class="row">
                                <div class="col-12">
                                    <p class="extrasmall-font m-0 orange">Step 2 of 3</p>
                                </div>
                                <div class="col-lg-3">
                                    <h2 class="medium-font semibold gray mb-3">Add Recipients</h2>
                                </div>
                                <div class="col-lg-9">
                                    <a href="javascript:void(0)"
                                       class="btn btn-cncl mr-2 float-right" @click="resetData">Reset Filter</a>
                                </div>
                                <div class="col-lg-12">

                                    <div class="step-box border shadow-none">

                                        <div class="tab">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h3 class="gray small-font semibold border-bottom pb-2">
                                                        Consultants
                                                    </h3>
                                                </div>
                                            </div>

                                            <div class="row">

                                                <div class="col-md-6">
                                                    <label class="control-label">Subscription Status</label>
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="subscription_status_active"
                                                                   value="active"
                                                                   name="subscription_status"
                                                                   v-model="subscription_status">
                                                            <label class="custom-control-label"
                                                                   for="subscription_status_active">Active</label>
                                                        </div>
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="subscription_status_inactive"
                                                                   value="inactive"
                                                                   name="subscription_status"
                                                                   v-model="subscription_status">
                                                            <label class="custom-control-label"
                                                                   for="subscription_status_inactive">Expired</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6"
                                                     v-if="subscription_status && subscription_status == 'active'">
                                                    <label class="control-label">Profile Status</label>
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="profile_status_active" value="active"
                                                                   name="active"
                                                                   v-model="profile_status">
                                                            <label class="custom-control-label"
                                                                   for="profile_status_active">Active</label>
                                                        </div>
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="profile_status_inactive" value="inactive"
                                                                   name="profile_active"
                                                                   v-model="profile_status">
                                                            <label class="custom-control-label"
                                                                   for="profile_status_inactive">Deactivated</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">


                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label"
                                                               for="location_id">Location</label>
                                                        <v-select label="text"
                                                                  :reduce="entity => entity.id"
                                                                  :filterable="false"
                                                                  :options="cities"
                                                                  @search="onSearchCity"
                                                                  v-model="city_id"
                                                                  placeholder="Select">
                                                            <template slot="no-options">
                                                                Please enter 3 or more characters
                                                            </template>
                                                            <template slot="option" slot-scope="option">
                                                                <div class="d-center">
                                                                    @{{ option.text }}
                                                                </div>
                                                            </template>
                                                            <template slot="selected-option" slot-scope="option">
                                                                <div class="selected d-center">
                                                                    @{{ option.text }}
                                                                </div>
                                                            </template>
                                                        </v-select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Categories</label>
                                                        <v-select v-if="categories.length"
                                                                  placeholder="Select"
                                                                  :options="categories"
                                                                  v-model="category_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple>
                                                        </v-select>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Skills</label>
                                                        <v-select v-if="skills.length"
                                                                  placeholder="Select"
                                                                  :options="skills"
                                                                  v-model="skill_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple></v-select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Experience Level</label>
                                                        <v-select v-if="experience_level.length"
                                                                  placeholder="Select"
                                                                  :options="experience_level"
                                                                  v-model="experience_level_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"></v-select>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Hourly Rate</label>
                                                        <v-select v-if="hourly_rates.length"
                                                                  placeholder="Select"
                                                                  :options="hourly_rates"
                                                                  v-model="hourly_rate_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"></v-select>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Consultant Type</label>
                                                        <v-select v-if="consultant_types.length"
                                                                  placeholder="Select"
                                                                  :options="consultant_types"
                                                                  v-model="consultant_type_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"></v-select>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="tab-btn">
                                            <a href="{{ route('admin.campaigns.addEditStep1',['panel' => Session::get('panel'),'id' => $campaign->id]) }}"
                                               class="btn btn-cncl mr-2 float-left">Previous</a>
                                            <input type="button" class="btn btn-em float-right" value="Next"
                                                   @click="getRecipients"/>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>
@endsection

@push('pageJs')

    <script>
        var cities_url = "{{ route('city.ajaxSearch') }}";
        var groupsUrl = "{{ route('admin.candidates.groups',['panel' => session('panel')]) }}";
        var storeFilterUrl =
            "{{ route('admin.campaigns.storeStep2',['panel' => session('panel'),'id' => $campaign->id]) }}";
        var newsletterUrl = "{{ route('admin.campaigns.newsletter',['panel' => session('panel'),'id' => $campaign->id]) }}";

        var recipientsUrl = "{{route('admin.campaigns.recipients', ['panel' => session('panel')])}}";

        var categories = new Array();
        @foreach($categories as $category)
            categories[{{ $loop->index}}] = {'id': {!! $category->id !!}, 'text': '{!! $category->name !!}'}
        @endforeach
        var skills = new Array();
        @foreach($skills as $skill)
            skills[{{ $loop->index}}] = {'id': {!! $skill->id !!}, 'text': '{!! $skill->name !!}'}
        @endforeach

    </script>
    <script>
        var cities = new Array();
        @if($city)
        var city_id = {{ $city->id }}
            cities[0] = {!! json_encode($city,true) !!};
        @else
        var city_id = '';
        @endif

        @if(isset($filter['category_id']))
        var category_id = {{ json_encode($filter['category_id']) }}
        @else
        var category_id = '';
        @endif

        @if(isset($filter['skill_id']))
        var skill_id = {{ json_encode($filter['skill_id']) }}
        @else
        var skill_id = '';
        @endif

        @if(isset($filter['experience_level_id']))
        var experience_level_id = '{{ $filter['experience_level_id'] }}'
        @else
        var experience_level_id = '';
        @endif

        @if(isset($filter['hourly_rate_id']))
        var hourly_rate_id = {{ $filter['hourly_rate_id'] }}
        @else
        var hourly_rate_id = '';
        @endif

        @if(isset($filter['consultant_type_id']))
        var consultant_type_id = '{{ $filter['consultant_type_id'] }}'
        @else
        var consultant_type_id = '';
        @endif

        @if(isset($filter['profile_status']))
        const profile_status = '{{ $filter['profile_status'] }}'
        @else
        const profile_status = '';
        @endif

        @if(isset($filter['subscription_status']))
        const subscription_status = '{{ $filter['subscription_status'] }}'
        @else
        const subscription_status = '';
        @endif


    </script>
    <script type="text/javascript" src="{{ asset('js/admin/campaign/filter_consultant.js') }}"></script>

@endpush