@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">{{ $campaign->recepient_type_formatted }}
                                                    </h3>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">Country</label>
                                                        <v-select v-if="countries.length"
                                                                  placeholder="Select"
                                                                  :options="countries"
                                                                  v-model="country_id"
                                                                  :reduce="entity => entity.id"
                                                                  label="text"
                                                                  multiple/>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label">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>

                                        </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 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 industries = new Array();
        @foreach($industries as $industry)
            industries[{{ $loop->index}}] = {'id': {!! $industry->id !!}, 'text': '{!! $industry->name !!}'}
        @endforeach

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

        var recepient_type = '{{ $recipient_type }}'


    </script>

    <script>

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

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


    </script>


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

@endpush