@extends('admin.layouts.main')

@section('title')
    Campaign - {{ $campaign->name }}
@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>
                        @if($campaign->status != 'completed')
                        <li class="breadcrumb-item active" aria-current="page">
                            <a
                                href="{{ route('admin.campaigns.addEditStep1',['panel' => Session::get('panel'),'id' => $campaign->id ]) }}">
                                Configure</a>
                        </li>
                        @if($campaign->recepient_type != 'all')
                            <li class="breadcrumb-item active" aria-current="page">
                                <a
                                    href="{{ route('admin.campaigns.addEditStep2',['panel' => Session::get('panel'),'id' => $campaign->id ]) }}">
                                    Recipients</a>
                            </li>
                        @endif
                        <li class="breadcrumb-item active" aria-current="page">
                            <a
                                href="{{ route('admin.campaigns.newsletter',['panel' => Session::get('panel'),'id' => $campaign->id ]) }}">
                                Email Template</a>
                        </li>
                        @endif
                        <li class="breadcrumb-item active" aria-current="page">Campaign Details</li>

                    </ol>
                </nav>

                <div class="top-bar d-flex align-items-center mb-4">
                    <h2>{{ $campaign->name }}<p><span class="extrasmall-font gray mr-1">Created on </span><span
                                class="extrasmall-font gray mr-2">{{ $campaign->created_at_formatted }}</span><span
                                class="badge badge-pill green">{{ $campaign->status_formatted }}</span></p>
                    </h2>
                    <div class="right-table-container ml-auto">
                        @if($campaign->recepient_type == 'candidate')
                            <a href="javascript:void(0)" class="btn btn-em" @click="getCandidates">View Recepients</a>
                        @elseif($campaign->recepient_type == 'consultant')
                            <a href="javascript:void(0)" class="btn btn-em" @click="getConsultants">View Recepients</a>
                        @elseif($campaign->recepient_type == 'supplier')
                            <a href="javascript:void(0)" class="btn btn-em" @click="getContacts">View Recepients</a>
                        @elseif($campaign->recepient_type == 'mfr_client')
                            <a href="javascript:void(0)" class="btn btn-em" @click="getContacts">View Recepients</a>
                        @elseif($campaign->recepient_type == 'mfmp_client')
                            <a href="javascript:void(0)" class="btn btn-em" @click="getContacts">View Recepients</a>
                        @elseif($campaign->recepient_type == 'mover')
                            <a href="javascript:void(0)" class="btn btn-em" @click="getMovers">View Recepients</a>
                        @elseif($campaign->recepient_type == 'mplus')
                            <a href="javascript:void(0)" class="btn btn-em" @click="getMplus">View Recepients</a>
                        @elseif($campaign->recepient_type == 'referee')
                            <a href="javascript:void(0)" class="btn btn-em" @click="getReferees">View Recepients</a>
                        @elseif($campaign->recepient_type == 'custom')
                            <a href="javascript:void(0)" class="btn btn-em" @click="getCustomRecipients">View
                                Recepients</a>
                        @endif

                        @if($campaign->status != 'completed')
                        <a href="{{ route('admin.campaigns.addEditStep1', ['session' => session('panel'), 'id' => $id])}}"
                           class="btn btn-em">Edit Campaign</a>
                        @endif

                        <a href="javascript:void(0)" class="btn btn-em" @click="confirm({{ $id }})">Delete</a>
                    </div>
                </div>
                <div class="form-sec">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="detail-content">
                                <!-- Tab panes -->
                                <div class="tab-content box d-block">
                                    <!-- Nav tabs -->
                                    <ul class="nav nav-tabs pl-0 mt-3" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="tab" href="#about-campaign">About
                                                Campaign</a>
                                        </li>
                                    </ul>
                                    <div id="about-campaign" class="tab-pane pt-3 fade show active">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">Campaign ID</label>
                                                    <p class="display-info">{{ $campaign->id }}</p>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">Recipients</label>
                                                    <p class="display-info">
                                                        @foreach($campaign->franchises as $franchise)
                                                            {{ $franchise->name }}<br/>
                                                        @endforeach
                                                        -> {{ $campaign->recepient_type_formatted }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">Frequency</label>
                                                    <p class="display-info">{{ $campaign->type_formatted }} @if($campaign->frequency)
                                                            | {{ $campaign->frequency_formatted }}@endif</p>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">Date & Time</label>
                                                    @if($campaign->end_date)
                                                        <p class="display-info">{{ $campaign->start_date_formatted}}
                                                            to {{ $campaign->end_date_formatted}}
                                                            at {{ $campaign->execute_at}}</p>
                                                    @else
                                                        <p>{{ $campaign->start_date_formatted}}
                                                            at {{ $campaign->execute_at}}</p>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label class="control-label">Campaign Description</label>
                                                    <p class="display-info">{{ $campaign->description }}</p>
                                                </div>
                                            </div>


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

                        <div class="col-lg-8">
                            <div class="bg-white border rounded p-4">
                                <h2 class="form-sec-title">Email Preview</h2>
                                <iframe id="emailPreview"
                                        src="{{ route('admin.campaigns.newsletterPreview',['session' => Session::get('panel'),'id' => $id ]) }}"
                                        width="600" height="900" scrolling="auto" frameborder="no"
                                        marginheight="0"></iframe>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </main>

@endsection

@push('pageModals')
    <div class="modal right" tabindex="-1" role="dialog" aria-labelledby="asset" id="modalRecipients">
        <div class="modal-dialog modal-mdr" role="document">
            <div class="modal-content" v-if="preview">
                <div class="modal-header">
                    <h4 class="modal-title" id="asset">Recipients</h4>
                    <button type="button" class="close" aria-label="Close" @click="closePreview"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="table-wrapper">

                        <div class="table-top-panel d-flex align-items-center">

                            <div class="form-group search-input float-left mb-0">
                                <img src="{{asset('/img/admin/ic_search.png')}}"
                                     srcset="{{ asset('img/admin/ic_search@2x.png') }} 2x"
                                     alt="search">
                                <input type="text" name="search_text" id="search_text" v-model="search_text"
                                       @input="search" @submit.prevent
                                       placeholder="Search">
                                <i class="material-icons" v-if="search_text" @click="clearSearch">close</i>
                            </div>

                            <div class="d-flex align-items-center mx-auto">
                                <div
                                    class="form-group select btm-arrow mb-0  without-label mr-2 d-flex align-items-center"
                                    v-if="candidates.length">
                                    <label style="white-space: nowrap;" class="mb-0 gray">{{
                        @trans('candidate.records_per_page') }}</label>
                                    <select class="form-control" id="per_page" v-model="per_page" @input="perPage">
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select>
                                </div>
                                <span>Total @{{ total }}</span>
                            </div>

                            <div class="pagination d-flex justify-content-center ml-auto" v-if="candidates.length">
                                @include('admin.common.paginate_js')
                            </div>

                        </div>

                        <div class="table-data" v-if="candidates.length">
                            <div class="table-responsive">
                                <table class="table" id="">
                                    <thead>
                                    <tr>
                                        <th>Recipient</th>
                                        <th>Email</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="candidate in candidates">
                                        @if($campaign->recepient_type != 'custom' && $campaign->recepient_type != 'referee')
                                            <td>
                                                <a :href="'{{url(Session::get('panel').'/candidates/show')}}/'+ candidate.id"
                                                   target="_blank" class="d-block text-underlined"
                                                   :title="candidate.first_name+' '+candidate.last_name">
                                                    @{{ candidate.first_name}} @{{ candidate.last_name}}
                                                </a>
                                            </td>
                                        @else
                                            <td>@{{ candidate.first_name}} @{{ candidate.last_name}}</td>
                                        @endif
                                        <td>
                                            @{{ candidate.email}}
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="!candidates.length && loaded">
                        <div class="col-md-12">
                            <div class="alert alert-warning" role="alert">
                                {{ @trans('candidate.no_records_to_show') }}
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
@endpush

@push('pageJs')
    <script>
        var campaignType = '{{ $campaign->recepient_type }}';
        var recipientsUrl = "{{route('admin.campaigns.recipients', ['panel' => session('panel')])}}";

        var data = {!! $filter !!};

        var app = new Vue({
            el: '#app',
            data: data,
            methods: {

                getCandidates() {
                    let vm = this;
                    vm.isLoading = true;
                    axios.get(recipientsUrl, {
                        params: {
                            page: this.current_page,
                            order_by: this.order_by,
                            order: this.order,
                            search: this.search_text,
                            per_page: this.per_page,
                            // filters
                            recepient_type: 'candidate',
                            status: this.candidate_status,
                            super_senior: this.super_senior,
                            industry_id: this.industry_id,
                            industry_experience_years: this.industry_experience_years,
                            job_category_id: this.job_category_id,
                            category_experience_years: this.category_experience_years,
                            work_country_id: this.work_country_id,
                            work_scope: this.work_scope,
                            qualification_category_id: this.qualification_category_id,
                            education_level_id: this.education_level_id,
                            education_country_id: this.education_country_id,
                            job_level_id: this.job_level_id,
                            employment_status_id: this.employment_status_id,
                            minimum_age: this.minimum_age,
                            maximum_age: this.maximum_age,
                            marital_status_id: this.marital_status_id,
                            minimum_salary: this.minimum_salary,
                            maximum_salary: this.maximum_salary,
                            no_of_children: this.no_of_children,
                            nationality_id: this.nationality_id,
                            ethnicity_id: this.ethnicity_id,
                            religion_id: this.religion_id,
                            country_residence_id: this.country_residence_id,
                            driving_license: this.driving_license,
                            owns_vehicle: this.owns_vehicle,
                            groups: this.selected_groups,
                            certificate_category_id: this.certificate_category_id,
                            institution_id: this.institution_id
                        }
                    })
                        .then(function (response) {
                            vm.candidates = response.data.data;
                            vm.last_page = response.data.last_page;
                            vm.from = response.data.from;
                            vm.to = response.data.to;
                            vm.total = response.data.total;
                            vm.preview = true;
                            vm.loaded = true;
                            vm.isLoading = false;
                            if (vm.isSearchEnable == true) {
                                $('#search_text').prop('disabled', false);
                                setTimeout(function () {
                                    $("input#search_text").focus();
                                }, 10);

                                vm.isSearchEnable = false;
                            }
                            $('#modalRecipients').modal('show');
                        })
                        .catch(function (error) {
                            vm.loaded = false;
                            vm.isLoading = false;
                        });
                },

                getConsultants() {

                    let vm = this;
                    vm.isLoading = true;
                    axios.get(recipientsUrl, {
                        params: {
                            page: this.current_page,
                            order_by: this.order_by,
                            order: this.order,
                            search: this.search_text,
                            per_page: this.per_page,
                            // filters
                            recepient_type: 'consultant',
                            profile_status: this.profile_status,
                            subscription_status: this.subscription_status,
                            location: this.city_id,
                            categories: this.category_id,
                            skills: this.skill_id,
                            experience_level: this.experience_level_id,
                            hourly_rate: this.hourly_rate_id,
                            consultant_type: this.consultant_type_id,
                            type: 'approved'
                        }
                    })
                        .then(function (response) {

                            vm.candidates = response.data.data;

                            vm.last_page = response.data.last_page;
                            vm.from = response.data.from;
                            vm.to = response.data.to;
                            vm.total = response.data.total;
                            vm.preview = true;

                            vm.loaded = true;
                            vm.isLoading = false;


                            if (vm.isSearchEnable == true) {
                                $('#search_text').prop('disabled', false);
                                setTimeout(function () {
                                    $("input#search_text").focus();
                                }, 10);

                                vm.isSearchEnable = false;
                            }
                            $('#modalRecipients').modal('show');

                        })
                        .catch(function (error) {
                            vm.loaded = false;
                            vm.isLoading = false;
                        });
                },

                getMovers() {

                    let vm = this;
                    vm.isLoading = true;
                    axios.get(recipientsUrl, {
                        params: {
                            page: this.current_page,
                            order_by: this.order_by,
                            order: this.order,
                            search: this.search_text,
                            per_page: this.per_page,
                            // filters
                            recepient_type: 'mover',
                            category_id: this.category_id,
                            profile_type: this.profile_type,
                            speaker_inquiry: this.speaker_inquiry,
                            hourly_rate_id: this.hourly_rate_id,
                            profile_status: this.profile_status
                        }
                    })
                        .then(function (response) {

                            vm.candidates = response.data.data;

                            vm.last_page = response.data.last_page;
                            vm.from = response.data.from;
                            vm.to = response.data.to;
                            vm.total = response.data.total;
                            vm.preview = true;

                            vm.loaded = true;
                            vm.isLoading = false;


                            if (vm.isSearchEnable == true) {
                                $('#search_text').prop('disabled', false);
                                setTimeout(function () {
                                    $("input#search_text").focus();
                                }, 10);
                                vm.isSearchEnable = false;
                            }
                            $('#modalRecipients').modal('show');
                        })
                        .catch(function (error) {
                            vm.loaded = false;
                            vm.isLoading = false;
                        });
                },

                getMplus() {

                    let vm = this;
                    vm.isLoading = true;
                    axios.get(recipientsUrl, {
                        params: {
                            page: this.current_page,
                            order_by: this.order_by,
                            order: this.order,
                            search: this.search_text,
                            per_page: this.per_page,

                            // filters
                            recepient_type: 'mplus',
                            city_id: this.city_id,
                            ethnicity: this.ethnicity,
                            gender: this.gender,
                            age_group: this.age_group,
                            profile_status: this.profile_status
                        }
                    })
                        .then(function (response) {

                            vm.candidates = response.data.data;

                            vm.last_page = response.data.last_page;
                            vm.from = response.data.from;
                            vm.to = response.data.to;
                            vm.total = response.data.total;
                            vm.preview = true;

                            vm.loaded = true;
                            vm.isLoading = false;


                            if (vm.isSearchEnable == true) {
                                $('#search_text').prop('disabled', false);
                                setTimeout(function () {
                                    $("input#search_text").focus();
                                }, 10);

                                vm.isSearchEnable = false;
                            }
                            $('#modalRecipients').modal('show');
                        })
                        .catch(function (error) {
                            vm.loaded = false;
                            vm.isLoading = false;
                        });
                },

                getContacts() {

                    let vm = this;
                    vm.isLoading = true;
                    axios.get(recipientsUrl, {
                        params: {
                            page: this.current_page,
                            order_by: 'id',
                            order: this.order,
                            search: this.search_text,
                            per_page: this.per_page,
                            // filters
                            recepient_type: campaignType,
                            country_id: this.country_id,
                            industry_id: this.industry_id,
                            contact_type: vm.contact_type
                        }
                    })
                        .then(function (response) {

                            vm.candidates = response.data.data;

                            vm.last_page = response.data.last_page;
                            vm.from = response.data.from;
                            vm.to = response.data.to;
                            vm.total = response.data.total;
                            vm.preview = true;

                            vm.loaded = true;
                            vm.isLoading = false;


                            if (vm.isSearchEnable == true) {
                                $('#search_text').prop('disabled', false);
                                setTimeout(function () {
                                    $("input#search_text").focus();
                                }, 10);
                                vm.isSearchEnable = false;
                            }

                            $('#modalRecipients').modal('show');

                        })
                        .catch(function (error) {
                            vm.loaded = false;
                            vm.isLoading = false;
                        });
                },

                getReferees() {

                    let vm = this;
                    vm.isLoading = true;
                    axios.get(recipientsUrl, {
                        params: {
                            page: this.current_page,
                            order_by: 'id',
                            order: this.order,
                            search: this.search_text,
                            per_page: this.per_page,
                            // filters
                            recepient_type: 'referee',
                        }
                    })
                        .then(function (response) {

                            vm.candidates = response.data.data;

                            vm.last_page = response.data.last_page;
                            vm.from = response.data.from;
                            vm.to = response.data.to;
                            vm.total = response.data.total;
                            vm.preview = true;

                            vm.loaded = true;
                            vm.isLoading = false;


                            if (vm.isSearchEnable == true) {
                                $('#search_text').prop('disabled', false);
                                setTimeout(function () {
                                    $("input#search_text").focus();
                                }, 10);
                                vm.isSearchEnable = false;
                            }
                            $('#modalRecipients').modal('show');
                        })
                        .catch(function (error) {
                            vm.loaded = false;
                            vm.isLoading = false;
                        });
                },

                getCustomRecipients() {

                    let vm = this;
                    vm.isLoading = true;
                    axios.get(recipientsUrl, {
                        params: {
                            page: this.current_page,
                            order_by: 'id',
                            order: this.order,
                            search: this.search_text,
                            per_page: this.per_page,

                            campaign_id: this.campaign_id,
                            recepient_type: 'custom',
                        }
                    })
                        .then(function (response) {

                            vm.candidates = response.data.data;

                            vm.last_page = response.data.last_page;
                            vm.from = response.data.from;
                            vm.to = response.data.to;
                            vm.total = response.data.total;
                            vm.preview = true;

                            vm.loaded = true;
                            vm.isLoading = false;


                            if (vm.isSearchEnable == true) {
                                $('#search_text').prop('disabled', false);
                                setTimeout(function () {
                                    $("input#search_text").focus();
                                }, 10);

                                vm.isSearchEnable = false;
                            }

                            $('#modalRecipients').modal('show');

                        })
                        .catch(function (error) {
                            vm.loaded = false;
                            vm.isLoading = false;
                        });
                },

                closePreview() {
                    this.preview = false;
                    $('#modalRecipients').modal('hide');
                },

                clearSearch() {
                    this.search_text = '';
                    if (campaignType == 'candidate')
                        this.getCandidates();
                    else if (campaignType == 'consultant')
                        this.getConsultants();
                    else if (campaignType == 'mover')
                        this.getMovers();
                    else if (campaignType == 'mplus')
                        this.getMplus();
                    else if (campaignType == 'supplier' || campaignType == 'mfr_client' || campaignType == 'mfmp_client')
                        this.getContacts();
                    else if (campaignType == 'referee')
                        this.getReferees();
                    else if (campaignType == 'custom')
                        this.getCustomRecipients();
                },

                search: _.debounce(function () {
                    $('#search_text').prop('disabled', true);
                    this.isSearchEnable = true;
                    if (this.search_text != '') {
                        this.temp_current_page = this.current_page;
                        this.current_page = 1;
                    } else {
                        this.current_page = this.temp_current_page;
                    }
                    if (campaignType == 'candidate')
                        this.getCandidates();
                    else if (campaignType == 'consultant')
                        this.getConsultants();
                    else if (campaignType == 'mover')
                        this.getMovers();
                    else if (campaignType == 'mplus')
                        this.getMplus();
                    else if (campaignType == 'supplier' || campaignType == 'mfr_client' || campaignType == 'mfmp_client')
                        this.getContacts();
                    else if (campaignType == 'referee')
                        this.getReferees();
                    else if (campaignType == 'custom')
                        this.getCustomRecipients();
                }, 1000),

                perPage(e) {
                    this.per_page = e.target.value;
                    if (campaignType == 'candidate')
                        this.getCandidates();
                    else if (campaignType == 'consultant')
                        this.getConsultants();
                    else if (campaignType == 'mover')
                        this.getMovers();
                    else if (campaignType == 'mplus')
                        this.getMplus();
                    else if (campaignType == 'supplier' || campaignType == 'mfr_client' || campaignType == 'mfmp_client')
                        this.getContacts();
                    else if (campaignType == 'referee')
                        this.getReferees();
                    else if (campaignType == 'custom')
                        this.getCustomRecipients();
                },

                paginate(page) {

                    this.current_page = page;
                    if (campaignType == 'candidate')
                        this.getCandidates();
                    else if (campaignType == 'consultant')
                        this.getConsultants();
                    else if (campaignType == 'mover')
                        this.getMovers();
                    else if (campaignType == 'mplus')
                        this.getMplus();
                    else if (campaignType == 'supplier' || campaignType == 'mfr_client' || campaignType == 'mfmp_client')
                        this.getContacts();
                    else if (campaignType == 'referee')
                        this.getReferees();
                    else if (campaignType == 'custom')
                        this.getCustomRecipients();
                },
                sort(order_by) {
                    this.order_by = order_by;
                    this.order = this.order == 'asc' ? 'desc' : 'asc';
                    if (campaignType == 'candidate')
                        this.getCandidates();
                    else if (campaignType == 'consultant')
                        this.getConsultants();
                    else if (campaignType == 'mover')
                        this.getMovers();
                    else if (campaignType == 'mplus')
                        this.getMplus();
                    else if (campaignType == 'supplier' || campaignType == 'mfr_client' || campaignType == 'mfmp_client')
                        this.getContacts();
                    else if (campaignType == 'referee')
                        this.getReferees();
                    else if (campaignType == 'custom')
                        this.getCustomRecipients();
                },
                perPage(e) {
                    this.per_page = e.target.value;
                    if (campaignType == 'candidate')
                        this.getCandidates();
                    else if (campaignType == 'consultant')
                        this.getConsultants();
                    else if (campaignType == 'mover')
                        this.getMovers();
                    else if (campaignType == 'mplus')
                        this.getMplus();
                    else if (campaignType == 'supplier' || campaignType == 'mfr_client' || campaignType == 'mfmp_client')
                        this.getContacts();
                    else if (campaignType == 'referee')
                        this.getReferees();
                    else if (campaignType == 'custom')
                        this.getCustomRecipients();
                },
                classSort(column) {
                    return {
                        'top-arrow': this.order == 'desc' && this.order_by == column,
                        'btm-arrow': this.order == 'asc' && this.order_by == column,
                        'sort-default': this.order != column
                    }

                },

            }
        });
    </script>

@endpush