@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>

                <div class="top-bar d-flex align-items-center mb-3">
                    <h2>
                        <p class="extrasmall-font m-0 orange">Step 2 of 3</p>Add Recipients
                    </h2>
                    <div class="right-table-container ml-auto align-items-center d-flex">
                        <input type="button" class="btn btn-cncl mr-2 btnImportCsv" value="Import CSV">
                        <input type="button" class="btn btn-primary-em" value="Add Selection to Recipients"
                               @click="storeFilter">
                    </div>
                </div>

                <div class="border rounded bg-white p-4">
                    <div class="table-wrapper">


                        <div class="table-top-panel row">
                            <div class="col-3">
                                <div class="form-group">
                                    <label class="control-label">First Name</label>
                                    <input type="text" class="form-control" placeholder="Type here" name="first_name"
                                           id="first_name" v-model="first_name"/>
                                    <span v-if="error && error['first_name']" class="invalid-feedback">First Name is
                                    required</span>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label class="control-label">Last Name</label>
                                    <input type="text" class="form-control" placeholder="Type here" name="last_name"
                                           id="last_name" v-model="last_name"/>
                                    <span v-if="error && error['last_name']" class="invalid-feedback">Last Name is
                                    required</span>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="control-label">Email</label>
                                    <input type="email" class="form-control" placeholder="Type here" name="email"
                                           id="email"
                                           v-model="email"/>
                                    <span v-if="error && error['email']" class="invalid-feedback">Email is
                                    required</span>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label class="control-label"></label>
                                    <a href="javascript:void(0)" class="btn btn-em" @click="storeRecipient">Add
                                        Recipient</a>
                                </div>
                            </div>
                        </div>


                        <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="recipeints.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="recipeints.length">
                                @include('admin.common.paginate_js')
                            </div>

                        </div>

                        <div class="table-data" v-if="recipeints.length">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>Recipient Name</th>
                                        <th>Email</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in recipeints">
                                        <td>@{{ item.first_name}} @{{ item.last_name}}</td>
                                        <td>@{{ item.email }}</td>
                                        <td class="act-btn">
                                            <a href="javascript:void(0)" @click="deleteRecipient(item.id)"
                                               title="Delete"
                                               class="btn btn-dlt"><i class="material-icons">delete</i></a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="row" v-if="!recipeints.length">
                            <div class="col-md-12">
                                <div class="alert alert-warning" role="alert">
                                    No records added!
                                </div>
                            </div>
                        </div>

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

        </div>
    </main>
@endsection

@push('pageJs')
    <script>
        var storeFilterUrl =
            "{{ route('admin.campaigns.storeStep2',['panel' => session('panel'),'id' => $campaign->id]) }}";
        var recipientsUrl = "{{route('admin.campaigns.recipients', ['panel' => session('panel')])}}";
        var storeRecipientUrl = "{{route('admin.campaigns.add_recipient', ['panel' => session('panel')])}}";
        var deleteRecipientUrl = "{{route('admin.campaigns.delete_recipient', ['panel' => session('panel')])}}";
        var newsletterUrl = "{{ route('admin.campaigns.newsletter',['panel' => session('panel'),'id' => $campaign->id]) }}";
        var campaign_id = "{{ $campaign->id }}";

        $(document).ready(function () {

            $('.btnImportCsv').click(function () {
                $('#importCsvModal').modal('show');
            });

            $('#importCsvModal').on('hidden.bs.modal', function (e) {
                $('#frmAttach').trigger('reset');
                $('#frmAttach').find('.invalid-feedback').remove('span');
                $('#frmAttach').find('.custom-file-input').removeClass('is-invalid');
                $('#frmAttach').find('.form-control').removeClass('is-invalid');
            });

            $(document).on('change', '#frmAttach input[type="file"]', function (e) {
                $(this).parents('.documentFileNameClass').find('.documentFileName').text(e.target.files[
                    0].name);
            });

            $(document).on('submit', '#frmAttach', function (e) {
                if ($('#frmAttach').valid()) {
                    $('.submitfrmAttach').prop('disabled', true).val('Please wait...');
                }
            })

            $("#frmAttach").validate({
                rules: {
                    'document': {
                        required: true,
                        extension: function (element) {
                            return 'csv';
                        },
                        filesize: 25
                    }
                },
                messages: {
                    'document': {
                        required: "This field is required.",
                        extension: function (element) {
                            return 'Valid file is CSV';
                        },
                    }
                }
            });
        })

        @if(Session::get('message'))
        Snackbar.show({
            pos: 'bottom-right',
            text: "{{ Session::get('message') }}",
            actionText: 'Okay'
        });
        @endif

    </script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <script type="text/javascript" src="{{ asset('js/admin/campaign/filter_custom.js') }}"></script>
@endpush

@push('pageModals')
    <div class="modal fade" id="importCsvModal" style="z-index: 9999;" data-backdrop="static">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">

                <form id="frmAttach" method="post" enctype="multipart/form-data"
                      action="{{ route('admin.campaigns.importCsv', ['panel'=> session('panel')]) }}">
                    <input type="hidden" name="campaignId" id="campaignId" value="{{ $campaign->id }}"/>
                    @csrf
                    <div class="modal-header new-light-bg border-0">
                        <h4 class="modal-title regular body-font-size">Import Csv</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <h3 class="bold">Important Notes:</h3>
                                <ol class="list">
                                    <li>First Name and Email are the minimum required fields for every Recipient; non
                                        validated recipient records will be skipped while import.
                                    </li>
                                    <li>When you import the CSV file, it will overwrite the previously added Recipients
                                        in
                                        this campaign list.
                                    </li>
                                </ol>
                            </div>
                            <div class="col-md-12">
                                <a class="text-underlined" href="{{ asset('assets') }}/sample_campaign_recipients.csv">Download
                                    a sample CSV
                                    file</a>
                            </div>
                        </div>
                        <div class="set attach-list-row">
                            <div class="form-group mb-1 documentFileNameClass">
                                <label class="control-label">Upload File</label>
                                <div class="custom-file w-100 file-type-new">
                                    <input type="file" class="custom-file-input w-100 fileInput" name="document"
                                           accept="text/csv">
                                    <label class="custom-file-label bg-white form-control text-left d-flex">Choose
                                        file...</label>
                                    <span class="attachment-bg"><img
                                            src="{{ asset('img/admin/ic-attachment-dark.svg') }}"
                                            alt="ic-attachment"/></span>
                                </div>
                                <span class="m-0 xs-font-size documentFileName"></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-center border-top-0 pt-0 pb-4">
                        <input type="submit" class="btn btn-em submitfrmAttach" value="Submit"/>
                    </div>
                </form>

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

@endpush