@extends('admin.layouts.main')

@section('title')
    @if($campaign)
        Edit Campaigns - Recipients
    @else
        Edit Campaigns - Recipients
    @endif
@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">
                                                        Candidates
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group btm-arrow select">
                                                        <label class="control-label">Select Status</label>
                                                        <select id="candidate_status" name="candidate_status"
                                                                v-model="candidate_status" class="form-control">
                                                            <option value="">Select Status</option>
                                                            <option value="verified">Verified</option>
                                                            <option value="active">Active</option>
                                                            <option value="inactive">Inactive</option>
                                                            <option value="blacklisted">Blacklisted</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h3 class="gray small-font semibold border-bottom pb-2">
                                                        Candidates
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-3">Types</div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="ctype_all" value="" name="super_senior"
                                                                   v-model="super_senior">
                                                            <label class="custom-control-label"
                                                                   for="ctype_all">All</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="ctype_super_senior" value="1"
                                                                   name="ctype_super_senior" v-model="super_senior">
                                                            <label class="custom-control-label"
                                                                   for="ctype_super_senior">Super Senior</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="ctype_normal" value="0" name="ctype_normal"
                                                                   v-model="super_senior">
                                                            <label class="custom-control-label"
                                                                   for="ctype_normal">Normal</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

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

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label" for="work_country_id">Country
                                                            of
                                                            Work</label>
                                                        <v-select v-if="countries.length"
                                                                  placeholder="Select"
                                                                  :options="countries"
                                                                  v-model="work_country_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group" v-if="work_country_id.length > 0">
                                                        <label class="control-label">Work scope</label>
                                                        <div class="custom-control custom-radio">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="work_scope_1" name="work_scope"
                                                                   value="within_country" v-model="work_scope">
                                                            <label class="custom-control-label"
                                                                   for="work_scope_1">Worked
                                                                within a
                                                                country</label>
                                                        </div>
                                                        <div class="custom-control custom-radio">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="work_scope_2" name="work_scope"
                                                                   value="outside_country" v-model="work_scope">
                                                            <label class="custom-control-label"
                                                                   for="work_scope_2">Worked
                                                                outside a
                                                                country</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label"
                                                               for="industry_id">Industries</label>
                                                        <v-select v-if="industries.length"
                                                                  placeholder="Select"
                                                                  :options="industries"
                                                                  v-model="industry_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group" v-if="industry_id.length > 0">
                                                        <label class="control-label">Experience Years</label>
                                                        <input type="text" class="form-control"
                                                               placeholder="Experience Years"
                                                               name="industry_experience_years"
                                                               id="industry_experience_years"
                                                               v-model="industry_experience_years"
                                                               :disabled="industries_selected"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label"
                                                               for="job_category_id">Categories</label>
                                                        <v-select v-if="job_categories.length"
                                                                  placeholder="Select"
                                                                  :options="job_categories"
                                                                  v-model="job_category_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group" v-if="job_category_id.length > 0">
                                                        <label class="control-label">Experience Years</label>
                                                        <input type="text" class="form-control"
                                                               placeholder="Experience Years"
                                                               name="category_experience_years"
                                                               id="category_experience_years"
                                                               v-model="category_experience_years"
                                                               :disabled="categories_selected"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label" for="jobLevelId">Job
                                                            Levels</label>
                                                        <v-select v-if="jobLevels.length"
                                                                  placeholder="Select"
                                                                  :options="jobLevels"
                                                                  v-model="job_level_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" for="employmentStatusId">Employment
                                                            Status</label>
                                                        <select id="employmentStatusId" class="form-control"
                                                                name="employment_status_id"
                                                                v-model="employment_status_id">
                                                            <option value="">Select</option>
                                                            <option value="employed">Employed</option>
                                                            <option value="unemployed">Unemployed</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h3 class="gray small-font semibold border-bottom pb-2">
                                                        Education &
                                                        Certification</h3>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label"
                                                               for="qualificationCategoryId">Qualification
                                                            Categories</label>
                                                        <v-select v-if="qualificationCategories.length"
                                                                  placeholder="Select"
                                                                  :options="qualificationCategories"
                                                                  v-model="qualification_category_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label" for="educationLevelId">Education
                                                            Level</label>
                                                        <v-select v-if="educationLevels.length"
                                                                  placeholder="Select"
                                                                  :options="educationLevels"
                                                                  v-model="education_level_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label" for="educationCountryId">Education
                                                            Country</label>
                                                        <v-select v-if="countries.length"
                                                                  placeholder="Select"
                                                                  :options="countries"
                                                                  v-model="education_country_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label"
                                                               for="certificate_category_id">Certificate
                                                            Category</label>
                                                        <v-select v-if="certificate_category.length"
                                                                  placeholder="Select"
                                                                  :options="certificate_category"
                                                                  v-model="certificate_category_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label"
                                                               for="institution_id">Institution</label>
                                                        <v-select label="text" :reduce="entity => entity.id"
                                                                  :filterable="false" :options="institutions"
                                                                  @search="searchInstitutions"
                                                                  v-model="institution_id" multiple>
                                                            <template slot="no-options">
                                                                type to search..
                                                            </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>


                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h3 class="gray small-font semibold border-bottom pb-2">
                                                        Demographic
                                                    </h3>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Minimum Salary</label>
                                                        <input type="text" class="form-control"
                                                               placeholder="Minimum Salary" name="minimum_salary"
                                                               id="minimum_salary" v-model="minimum_salary"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Maximum Salary</label>
                                                        <input type="text" class="form-control"
                                                               placeholder="Maximum Salary" name="maximum_salary"
                                                               id="maximum_salary" v-model="maximum_salary"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Minimum Age</label>
                                                        <input type="text" class="form-control"
                                                               placeholder="Minimum Age" name="minimum_age"
                                                               id="minimum_age" v-model="minimum_age"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Maximum Age</label>
                                                        <input type="text" class="form-control"
                                                               placeholder="Maximum Age" name="maximum_age"
                                                               id="maximum_age" v-model="maximum_age"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label" for="marital_status_id">Marital
                                                            Status</label>
                                                        <v-select v-if="maritalStatuses.length"
                                                                  placeholder="Select"
                                                                  :options="maritalStatuses"
                                                                  v-model="marital_status_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">No of Children</label>
                                                        <input type="text" class="form-control"
                                                               placeholder="No of Children" name="no_of_children"
                                                               id="no_of_children" v-model="no_of_children"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label"
                                                               for="nationality_id">Nationality</label>
                                                        <v-select v-if="countries.length"
                                                                  placeholder="Select"
                                                                  :options="countries"
                                                                  v-model="nationality_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label"
                                                               for="ethnicity_id">Origin</label>
                                                        <v-select v-if="ethinicities.length"
                                                                  placeholder="Select"
                                                                  :options="ethinicities"
                                                                  v-model="ethnicity_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label" for="country_residence_id">Country
                                                            of
                                                            Residence</label>
                                                        <v-select v-if="countries.length"
                                                                  placeholder="Select"
                                                                  :options="countries"
                                                                  v-model="country_residence_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-checkbox custom-control-inline">
                                                            <input type="checkbox" class="custom-control-input"
                                                                   id="driving_license" name="driving_license"
                                                                   v-model="driving_license">
                                                            <label class="custom-control-label"
                                                                   for="driving_license">Have
                                                                Driving
                                                                License</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-checkbox custom-control-inline">
                                                            <input type="checkbox" class="custom-control-input"
                                                                   id="owns_vehicle" name="owns_vehicle"
                                                                   v-model="owns_vehicle">
                                                            <label class="custom-control-label" for="owns_vehicle">Owns
                                                                Vehicle</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h3 class="gray small-font semibold border-bottom pb-2">
                                                        Groups</h3>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-3" v-for="group in groups">
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-checkbox custom-control-inline">
                                                            <input type="checkbox" class="custom-control-input"
                                                                   :id="'group_'+group.id" :value="group.id"
                                                                   v-model="selected_groups">
                                                            <label class="custom-control-label"
                                                                   :for="'group_'+group.id">@{{
                                                                group.name }}</label>
                                                        </div>
                                                    </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="getCandidates"/>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </main>

@endsection

@push('pageJs')

    <script>
        var countries_url = "{{ route('country.coutryajaxsearch') }}";
        var industries_url = "{{ route('industries.indexJsonKv') }}";
        var job_categories_url = "{{ route('job_categories.indexJsonKv') }}";
        var job_level_url = "{{ route('job_levels.indexJsonKv') }}";
        var employment_status_url = "{{ route('employment_statuses.indexJsonKv') }}";
        var qualification_categories_url = "{{ route('qualification_categories.indexJsonKv') }}";
        var qualifications_url = "{{ route('qualifications.indexJsonKv') }}";
        var certificate_category_url = "{{ route('certificate_categories.indexJsonKv') }}";
        var marital_status_url = "{{ route('marital_status.indexJsonKv') }}";
        var ethnicity_url = "{{ route('ethnicity.indexJsonKv') }}";
        var institution_url = "{{ route('institution.indexJson') }}";

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

        var groupsUrl = "{{ route('admin.campaigns.franchiseGroups',['panel' => session('panel'), 'id' => $campaign->id]) }}";

        var storeFilterUrl =
            "{{ route('admin.campaigns.storeStep2',['panel' => session('panel'),'id' => $campaign->id]) }}";
        var newsletterUrl = "{{ route('admin.campaigns.newsletter',['panel' => session('panel'),'id' => $campaign->id]) }}";


    </script>
    <script>
        var dataObj = {!! $filter !!}
    </script>
    <script type="text/javascript" src="{{ asset('js/admin/campaign/filter_candidate.js') }}"></script>



@endpush