@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">Movers
                                                    </h3>
                                                </div>
                                            </div>

                                            <div class="row">

                                                <div class="col-md-6">
                                                    <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="1"
                                                                   name="profile_status"
                                                                   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="0"
                                                                   name="profile_status"
                                                                   v-model="profile_status">
                                                            <label class="custom-control-label"
                                                                   for="profile_status_inactive">Inactive</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="control-label">Profile Type</label>
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="profile_type_company" value="company"
                                                                   name="profile_type"
                                                                   v-model="profile_type">
                                                            <label class="custom-control-label"
                                                                   for="profile_type_company">Company</label>
                                                        </div>
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="profile_type_person" value="person"
                                                                   name="profile_type"
                                                                   v-model="profile_type">
                                                            <label class="custom-control-label"
                                                                   for="profile_type_person">Person</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Category</label>
                                                        <v-select v-if="categories.length" placeholder="Select"
                                                                  :options="categories" v-model="category_id"
                                                                  :reduce="entity => entity.id" label="text"
                                                                  multiple>
                                                    </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">
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="control-label">Available for a speaker
                                                        inquiry?</label>
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="speaker_inquiry_yes" value="1"
                                                                   name="speaker_inquiry"
                                                                   v-model="speaker_inquiry">
                                                            <label class="custom-control-label"
                                                                   for="speaker_inquiry_yes">Yes</label>
                                                        </div>
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="speaker_inquiry_no" value="0"
                                                                   name="speaker_inquiry"
                                                                   v-model="speaker_inquiry">
                                                            <label class="custom-control-label"
                                                                   for="speaker_inquiry_no">No</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="getMovers"/>
                                        </div>

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

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

@push('pageJs')

    <script>
        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')])}}";

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

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

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

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

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

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

    </script>

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

@endpush