@extends('layouts.admin')

@section('page-title', trans('crm.newsletter_list'))

@section('content')

    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><a href="javascript:history.back()" style="color: black;"><i class="icon-arrow-left52 mr-2"></i></a> <span class="font-weight-semibold">@lang('crm.newsletter_list')</span>
                </h4>
                {{--<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>--}}
            </div>
        </div>
    </div>



    <div class="content">
        @include('partials.messages')

        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">@lang('crm.newsletter_list')</h5>
            </div>
            <div class="card-body">
                <div class="row header-controls">
                    <div class="col-md-6">
                        @if(admin_permission('newsletter.edit'))
                        <a href="javascript:new_newsletter_contact()" class="btn btn-success" id="add-newsletter-contact">
                            <i class="icon-plus-circle2"></i>&nbsp;
                            @lang('crm.new_newsletter_contact')
                        </a>
                        <a href="#" class="btn btn-success" id="import-newsletter-contacts" data-toggle="modal" data-target="#modal_newsletter_contact_import">
                            <i class="icon-plus-circle2"></i>&nbsp;
                            @lang('crm.newsletter_list_import_contacts')
                        </a>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <div class="btn-group ml-1 float-right">

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

                <table class="table" id="table-newsletter-contacts">
                    <thead>
                    <th>@lang('crm.newsletter_contact_id')</th>
                    <th>@lang('crm.newsletter_contact_email')</th>
                    <th>@lang('crm.newsletter_contact_first_name')</th>
                    <th>@lang('crm.newsletter_contact_middle_name')</th>
                    <th>@lang('crm.newsletter_contact_last_name')</th>
                    <th>@lang('crm.newsletter_contact_status')</th>
                    <th>@lang('crm.options')</th>
                    </thead>
                    <tbody>
                    @foreach($newsletter_contacts as $newsletter_contact)
                        <tr>
                            <td>{{ $newsletter_contact['id'] }}</td>
                            <td>{{ $newsletter_contact['email'] }}</td>
                            <td>{{ $newsletter_contact['first_name'] }}</td>
                            <td>{{ $newsletter_contact['middle_name'] }}</td>
                            <td>{{ $newsletter_contact['last_name'] }}</td>
                            <td>
                                <label class='form-check-label'>
                                    <input type='checkbox' data-id="{{$newsletter_contact['id']}}" class='form-check-input-switchery' onclick='statusClicked({{$newsletter_contact['id']}})' @if($newsletter_contact['status']=='active') checked @endif data-fouc/>
                                </label>
                            </td>
                            <td>
                                @if(admin_permission('newsletter.edit'))
                                <a href="javascript:edit_newsletter_contact({{ $newsletter_contact['id'] }});" class="btn btn-primary btn-circle"><i class="icon-pencil3"></i></a>
                                <a href="javascript:del_newsletter_contact({{ $newsletter_contact['id'] }});" class="btn btn-danger btn-circle">
                                    <i class="icon-cross"></i>
                                </a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="modal_newsletter_contact" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-md">
    
        </div>
    </div>
    <div id="modal_newsletter_contact_import" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h6 class="modal-title" id="myModalLabel">
                        <span class="edit-title">{{ trans('crm.newsletter_list_import_contacts') }}</span>
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
            
                {!! Form::open(['route' => ['admin.newsletter-lists.import', $newsletter_list->id], 'id' => 'newsletter_contact_form']) !!}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="">@lang('crm.newsletter_list_import_source')</label>
                                        <select name="import_source" class="form-control" requried>
                                            <option value="clients">Clients</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="">@lang('crm.newsletter_list_import_group_id')</label>
                                        <select name="client_group_id" class="form-control" requried>
                                            <option value="">All clients</option>
                                            @foreach(\CRM\CustomerGroup::all() as $clientGroup)
                                                <option value="{{ $clientGroup->id }}">{{ $clientGroup->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@lang('crm.close')</button>
                    <button type="submit" class="btn btn-info">@lang('crm.submit')</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <script>
        $(document).ready(function () {
            $('#table-newsletter-contacts').DataTable({
                'order': [[0, 'asc']]
            })
        });

        function new_newsletter_contact(){
            var url = "/admin/newsletter-contacts/modal" ;
            $.ajax({
                type: 'POST',
                url: url,
                data: {id: 0, newsletter_list_id: {{ $newsletter_list['id'] }}},
                success: function (data) {
                    $('#modal_newsletter_contact .modal-dialog').html(data.data.html);
                    $('#modal_newsletter_contact').modal('show');
                    Components.init();

                    $('#newsletter_contact_form').validate({
                        ignore: "",
                        rules: {
                            email: { required: true, email: true }
                        },
                        submitHandler: function (form){
                            manage_newsletter_contact(form);
                        },
                    });
                },
            });
        }

        function edit_newsletter_contact(id){
            var url = "/admin/newsletter-contacts/modal" ;

            $.ajax({
                type: 'POST',
                url: url,
                data: {id: id, newsletter_list_id: {{ $newsletter_list['id'] }}},
                success: function (data) {
                    $('#modal_newsletter_contact .modal-dialog').html(data.data.html);
                    $('#modal_newsletter_contact').modal('show');
                    Components.init();

                    $('#newsletter_contact_form').validate({
                        ignore: "",
                        rules: {
                            email: { required: true, email: true }
                        },
                        submitHandler: function (form){
                            manage_newsletter_contact(form);
                        },
                    });
                },
            });
        }

        function manage_newsletter_contact(form) {
            var url = form.action;
            var data = $(form).serialize();
            $.ajax({
                type:'POST',
                url:url,
                data: data,
                success:function(response){
                    successNotify('Success',response.msg);
                    reloadPage();
                }, error: function (error){
                    errorNotify('Error', error.statusText);
                },complete: function() {
                    $('#modal_newsletter_contact').modal('hide');
                }
            });
            return false;
        }

        function statusClicked(id) {
            $.ajax({
                type: 'POST',
                url: '/admin/newsletter-contacts/manage',
                data: {id: id, action: 'changeStatus'},
                success: function (data) {
                    if(data.status == '1'){
                        successNotify('Success',data.msg);
                    }else{
                        errorNotify('Success',data.msg);
                        reloadPage()
                    }
                },
                error: function (error) {
                    errorNotify('Error', '')
                    reloadPage()
                }
            });
        }

        function del_newsletter_contact(id){
            var url = "/admin/newsletter-contacts/delete" ;

            confirmAlert('', 'Are you sure to delete this item ?', 'Yes, delete it', 'Cancel', function () {
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: {id: id},
                    success: function (data) {
                        if(data.status == '1'){
                            successNotify('Success',data.msg);
                            reloadPage()
                        }else{
                            errorNotify('Success',data.msg);
                        }
                    },
                    error: function (error) {
                        successNotify('Error', '')
                    }
                });
            })
        }
    </script>
@stop