@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">M+
                                                    </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">
                                                    <div class="form-group">
                                                        <label class="control-label">City</label>
                                                        <v-select v-if="cities.length" placeholder="Select"
                                                                  :options="cities" v-model="city_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">Origin</label>
                                                        <v-select v-if="ethnicities.length" placeholder="Select"
                                                                  :options="ethnicities" v-model="ethnicity"
                                                                  :reduce="entity => entity.id" label="text">
                                                        </v-select>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Age Group</label>
                                                        <v-select v-if="age_groups.length" placeholder="Select"
                                                                  :options="age_groups" v-model="age_group"
                                                                  :reduce="entity => entity.id" label="text">
                                                        </v-select>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="control-label">Gender</label>
                                                    <div class="form-group">
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="gender_male" value="male" name="gender"
                                                                   v-model="gender">
                                                            <label class="custom-control-label"
                                                                   for="gender_male">Male</label>
                                                        </div>
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="gender_female" value="female" name="gender"
                                                                   v-model="gender">
                                                            <label class="custom-control-label"
                                                                   for="gender_female">Female</label>
                                                        </div>
                                                        <div
                                                            class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" class="custom-control-input"
                                                                   id="gender_all" value="" name="gender"
                                                                   v-model="gender">
                                                            <label class="custom-control-label"
                                                                   for="gender_all">All</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="getMplus"/>
                                        </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')])}}";

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

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

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

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

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

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

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


    </script>


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

@endpush