@extends('backEnd.master')
@section('styles')
<link rel="stylesheet" href="{{asset(asset_path('modules/marketing/css/style.css'))}}" />
@endsection
@section('mainContent')
@if(isModuleActive('FrontendMultiLang'))
@php
$LanguageList = getLanguageList();
@endphp
@endif
<section class="admin-visitor-area up_st_admin_visitor">
    <div class="container-fluid p-0">
        <div class="">
            <div class="col-lg-10 offset-lg-1">
                <div class="main-title">
                    <h3 class="mb-30">{{__('marketing.create_news_letter')}} </h3>
                </div>
            </div>
        </div>
        <div id="formHtml" class="col-lg-10 offset-lg-1">
            <div class="white-box">
                <form action="" id="add_form">
                    <div class="add-visitor">
                        <div class="row">
                            @if(isModuleActive('FrontendMultiLang'))
                                <div class="col-lg-12">
                                    <ul class="nav nav-tabs justify-content-start mt-sm-md-20 mb-30 grid_gap_5" role="tablist">
                                        @foreach ($LanguageList as $key => $language)
                                            <li class="nav-item lang_code" data-id="{{$language->code}}">
                                                <a class="nav-link anchore_color @if (auth()->user()->lang_code == $language->code) active @endif" href="#element{{$language->code}}" role="tab" data-toggle="tab" aria-selected="@if (auth()->user()->lang_code == $language->code) true @else false @endif">{{ $language->native }} </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                    <div class="tab-content">
                                        @foreach ($LanguageList as $key => $language)
                                            <div role="tabpanel" class="tab-pane fade @if (auth()->user()->lang_code == $language->code) show active @endif" id="element{{$language->code}}">
                                                <div class="col-lg-12">
                                                    <div class="primary_input mb-25">
                                                        <label class="primary_input_label" for="title">{{ __('common.title') }} <span class="text-danger">*</span></label>
                                                        <input class="primary_input_field" type="text" id="title" name="title[{{$language->code}}]" autocomplete="off" value="{{ old('title.'.$language->code) }}" placeholder="{{ __('common.title') }}">
                                                        <span class="text-danger" id="error_title_{{$language->code}}"></span>
                                                    </div>
                                                </div>
                                                <div class="col-xl-12">
                                                    <div class="primary_input mb-25">
                                                        <label class="primary_input_label" for="">{{__('general_settings.short_code')}} <small>({{__('general_settings.use_these_to_get_your_neccessary_info')}})</small> </label>
                                                        <label class="primary_input_label red_text" for="">{GIFT_CARD_NAME}, {SECRET_CODE}, {USER_FIRST_NAME}, {USER_EMAIL}, {EMAIL_SIGNATURE}, {EMAIL_FOOTER}, {ORDER_TRACKING_NUMBER}, {WEBSITE_NAME}</label>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="primary_input mb-25">
                                                        <label class="primary_input_label" for="message">{{ __('common.message') }} <span class="text-danger">*</span></label>
                                                        <textarea name="message[{{$language->code}}]" id="message" class="summernote" placeholder="" >{{ old('message.'.$language->code) ?? $email_template->value }}</textarea>
                                                    </div>
                                                    <span class="text-danger" id="error_message_{{$language->code}}"></span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                <div class="col-lg-12">
                                    <div class="primary_input mb-25">
                                        <label class="primary_input_label" for="title">{{ __('common.title') }} <span class="text-danger">*</span></label>
                                        <input class="primary_input_field" type="text" id="title" name="title" autocomplete="off" value="" placeholder="{{ __('common.title') }}">
                                        <span class="text-danger" id="error_title"></span>
                                    </div>
                                </div>
                                <div class="col-xl-12">
                                    <div class="primary_input mb-25">
                                        <label class="primary_input_label" for="">{{__('general_settings.short_code')}} <small>({{__('general_settings.use_these_to_get_your_neccessary_info')}})</small> </label>
                                        <label class="primary_input_label red_text" for="">{GIFT_CARD_NAME}, {SECRET_CODE}, {USER_FIRST_NAME}, {USER_EMAIL}, {EMAIL_SIGNATURE}, {EMAIL_FOOTER}, {ORDER_TRACKING_NUMBER}, {WEBSITE_NAME}</label>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="primary_input mb-25">
                                        <label class="primary_input_label" for="message">{{ __('common.message') }} <span class="text-danger">*</span></label>
                                        <textarea name="message" id="message" class="summernote" placeholder="" >{{ $email_template->value }}</textarea>
                                    </div>
                                    <span class="text-danger" id="error_message"></span>
                                </div>
                            @endif
                            <div class="col-xl-12">
                                <div class="primary_input mb-15">
                                    <label class="primary_input_label" for="publish_date">{{ __('marketing.publish_on') }} <span class="text-danger">*</span></label>
                                    <div class="primary_datepicker_input">
                                        <div class="no-gutters input-right-icon">
                                            <div class="col">
                                                <div class="">
                                                    <input placeholder="{{__('common.date')}}" class="primary_input_field primary-input date form-control" id="publish_date" type="text" name="publish_date" value="{{date('m/d/Y')}}" autocomplete="off" required>
                                                </div>
                                            </div>
                                            <button class="" type="button"> <i class="ti-calendar" id="start-date-icon"></i></button>
                                        </div>
                                    </div>
                                    <span class="text-danger" id="error_publish_date"></span>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="primary_input mb-15">
                                    <label class="primary_input_label" for="">{{ __('marketing.send_to') }} <span class="text-danger">*</span></label>
                                    <select name="send_to" id="send_to" class="primary_select mb-15">
                                        <option disabled selected>{{ __('common.select') }}</option>
                                        <option value="1">{{__('marketing.all_user')}}</option>
                                        <option value="2">{{__('marketing.role_wise')}}</option>
                                        <option value="3">{{__('marketing.multiple_role_select_user')}}</option>
                                        <option value="4">{{__('marketing.all_subscription')}}</option>
                                    </select>
                                    <span class="text-danger" id="error_send_to"></span>
                                </div>
                            </div>
                            <div id="all_user_div" class="col-lg-12 d-none">
                                <div class="primary_input mb-15">
                                    <label class="primary_input_label" for="all_user">{{ __('marketing.all_user') }} <span class="text-danger">*</span></label>
                                    <select name="all_user[]" id="all_user" class="primary_select mb-15" multiple>
                                        <option disabled>{{ __('common.select') }}</option>
                                        @if(isModuleActive('MultiVendor'))
                                            @foreach ($users as $key => $user)
                                                <option selected value="{{ $user->id }}">
                                                    {{ $user->email}}</option>
                                            @endforeach
                                        @else
                                            @foreach ($users->where('role_id','!=',5)->where('role_id','!=', 6) as $key => $user)
                                                <option selected value="{{ $user->id }}">
                                                    {{ $user->email}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <span class="text-danger" id="error_all_user"></span>
                                </div>
                            </div>
                            <div id="select_role_div" class="col-lg-12 d-none">
                                <div class="primary_input mb-15">
                                    <label class="primary_input_label" for="role">{{ __('common.select_role') }} <span class="text-danger">*</span></label>
                                    <select name="role" id="role" class="primary_select mb-15">
                                        <option disabled selected>{{ __('common.select') }}</option>
                                        @if(isModuleActive('MultiVendor'))
                                            @foreach ($roles as $key => $role)
                                                <option value="{{ $role->id }}">{{ $role->name }}
                                                </option>
                                            @endforeach
                                        @else
                                            @foreach ($roles->where('type','!=','seller') as $key => $role)
                                                <option value="{{ $role->id }}">{{ $role->name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <span class="text-danger" id="error_role"></span>
                                </div>
                            </div>
                            <div id="select_role_user_div" class="col-lg-12 d-none">
                                <div class="primary_input mb-15">
                                    <label class="primary_input_label" for="role_user">{{ __('marketing.selected_role_user') }} <span class="text-danger">*</span></label>
                                    <select name="role_user[]" id="role_user" class="primary_select mb-15" multiple>
                                        <option disabled>{{ __('common.select') }}</option>
                                    </select>
                                    <span class="text-danger" id="error_role_user"></span>
                                </div>
                            </div>
                            <div id="multiple_role_div" class="col-lg-12 d-none">
                                <label>{{__('marketing.mail_to')}} <span class="text-danger">*</span></label>
                                <br>
                                <div class="">
                                    <input type="checkbox" checked id="role_all" class="common-checkbox" value="" name="">
                                    <label for="role_all">{{__('common.all')}}</label>
                                </div>
                                @if(isModuleActive('MultiVendor'))
                                    @foreach ($roles as $key => $role)
                                        <div class="">
                                            <input type="checkbox" checked id="role_{{ $role->id }}" class="common-checkbox multi_check" value="{{ $role->id }}" name="role_list[]">
                                            <label for="role_{{ $role->id }}">{{ $role->name }}</label>
                                        </div>
                                    @endforeach
                                @else
                                    @foreach ($roles->where('type','!=','seller') as $key => $role)
                                        <div class="">
                                            <input type="checkbox" checked id="role_{{ $role->id }}"
                                                class="common-checkbox multi_check" value="{{ $role->id }}"
                                                name="role_list[]">
                                            <label for="role_{{ $role->id }}">{{ $role->name }}</label>
                                        </div>
                                    @endforeach
                                @endif
                                <span class="text-danger" id="error_role_list"></span>
                            </div>
                            <div id="subscriber_div" class="col-lg-12 d-none">
                                <label>{{__('marketing.mail_to')}} <span class="text-danger">*</span></label>
                                <br>
                                <div class="">
                                    <input type="checkbox" checked id="subscriber_all" class="common-checkbox" value="" name="">
                                    <label for="subscriber_all">{{__('common.all')}}</label>
                                </div>
                                @foreach ($subscribers as $key => $subscriber)
                                    <div class="">
                                        <input type="checkbox" checked id="subscriber_{{ $key }}"
                                            class="common-checkbox subscriber_check" value="{{ $subscriber->id }}"
                                            name="subscriber_list[]">
                                        <label for="subscriber_{{ $key }}">{{ $subscriber->email }}</label>
                                    </div>
                                @endforeach
                                <span class="text-danger" id="error_subscriber_list"></span>
                            </div>
                        </div>
                        <div class="row mt-40">
                            <div class="col-lg-6 offset-lg-3">
                                <div class="col-lg-12 text-center">
                                    <button id="submit_btn" type="submit" class="primary-btn fix-gr-bg" data-toggle="tooltip" title="" data-original-title=""> <span class="ti-check"></span>  {{ __('marketing.save_test_mail') }} </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <div id="testMailDiv">
    </div>
</section>
@endsection
@push('scripts')
<script>
    (function($){
        "use strict";
        $(document).ready(function(){
            $(document).on('submit', '#add_form', function(event) {
                event.preventDefault();
                $("#submit_btn").prop('disabled', true);
                $('#submit_btn').text("{{ __('common.submitting') }}");
                $('#pre-loader').removeClass('d-none');
                removeValidateError();
                var formElement = $(this).serializeArray()
                var formData = new FormData();
                formElement.forEach(element => {
                    formData.append(element.name, element.value);
                });
                formData.append('_token', "{{ csrf_token() }}");
                $.ajax({
                    url: "{{ route('marketing.news-letter.store') }}",
                    type: "POST",
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(response) {
                        reloadWithData(response);
                        resetForm();
                        toastr.success("{{__('common.created_successfully')}}", "{{__('common.success')}}");
                        $("#submit_btn").prop('disabled', false);
                        $('#submit_btn').text('Save & Test Mail');
                        $('#pre-loader').addClass('d-none');
                    },
                    error: function(response) {
                        if(response.responseJSON.error){
                            toastr.error(response.responseJSON.error ,"{{__('common.error')}}");
                            $('#pre-loader').addClass('d-none');
                            return false;
                        }
                        $("#submit_btn").prop('disabled', false);
                        $('#submit_btn').text('Save & Test Mail');
                        $('#pre-loader').addClass('d-none');
                        showValidationErrors('#add_form', response.responseJSON.errors);
                    }
                });
            });
            $(document).on('change', '#send_to', function(event) {
                let value = $('#send_to').val();
                if (value == 1) {
                    $('#all_user_div').removeClass('d-none');
                } else {
                    $('#all_user_div').addClass('d-none');
                }
                if (value == 2) {
                    $('#select_role_div').removeClass('d-none');
                    $('#select_role_user_div').removeClass('d-none');
                } else {
                    $('#select_role_div').addClass('d-none');
                    $('#select_role_user_div').addClass('d-none');
                }
                if (value == 3) {
                    $('#multiple_role_div').removeClass('d-none');
                } else {
                    $('#multiple_role_div').addClass('d-none');
                }
                if (value == 4) {
                    $('#subscriber_div').removeClass('d-none');
                } else {
                    $('#subscriber_div').addClass('d-none');
                }
            });
            $(document).on('change', '#role', function(event) {
                $('#role_user').empty();
                $('#pre-loader').removeClass('d-none');
                let role = $('#role').val();
                let base_url = $('#url').val();
                let url = base_url + '/marketing/news-letter/role-user?id=' + role;
                $.get(url, function(data) {
                    $('#role_user').empty();
                    $('#role_user').html(data);
                    $('#role_user').niceSelect('update');
                    $('#pre-loader').addClass('d-none');
                });
            });
            $(document).on('submit', '#testMailForm', function(event) {
                event.preventDefault();
                let email = $('#email').val();
                if(email != ''){
                    $("#mail_send_btn").prop('disabled', true);
                    $('#mail_send_btn').text("{{ __('marketing.sending') }}");
                    $('#error_email').text('');
                    $('#pre-loader').removeClass('d-none');
                    var formElement = $(this).serializeArray()
                    var formData = new FormData();
                    formElement.forEach(element => {
                        formData.append(element.name, element.value);
                    });
                    formData.append('_token', "{{ csrf_token() }}");
                    $.ajax({
                        url: "{{ route('marketing.news-letter.test-mail') }}",
                        type: "POST",
                        cache: false,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function(response) {
                            toastr.success("{{__('marketing.test_mail_has_been_send_successfully')}}","{{__('common.success')}}");
                            $('#testModal').modal('hide');
                            $("#mail_send_btn").prop('disabled', false);
                            $('#mail_send_btn').text("{{ __('common.send') }}");
                            window.location.href = "{{ route('marketing.news-letter')}}";
                        },
                        error: function(response) {
                            $("#mail_send_btn").prop('disabled', false);
                            $('#mail_send_btn').text("{{ __('common.send') }}");
                            $('#pre-loader').addClass('d-none');
                            toastr.error('{{ __("common.error_message") }}');
                        }
                    });
                }else{
                    $('#error_email').text('Email is Required.');
                }
            });
            $('.summernote').summernote({
                placeholder: '',
                tabsize: 2,
                height: 500,
                codeviewFilter: true,
                codeviewIframeFilter: true
            });
            $(document).on('change', '#role_all', function(){
                role_all_check($(this)[0]);
            });
            $(document).on('change', '#subscriber_all', function(){
                subscriber_all_check($(this)[0]);
            });
            function role_all_check(el) {
                if (el.checked) {
                    $('.multi_check').prop('checked', true);
                } else {
                    $('.multi_check').prop('checked', false);
                }
            }
            function subscriber_all_check(el){
                if (el.checked) {
                    $('.subscriber_check').prop('checked', true);
                } else {
                    $('.subscriber_check').prop('checked', false);
                }
            }
            function reloadWithData(response){
                $('#testMailDiv').empty();
                $('#testMailDiv').html(response.testMailModal);
                $('#testModal').modal('show');
            }
            function showValidationErrors(formType, errors) {
                @if(isModuleActive('FrontendMultiLang'))
                    $(formType + ' #error_title_{{auth()->user()->lang_code}}').text(errors['title.{{auth()->user()->lang_code}}']);
                    $(formType + ' #error_message_{{auth()->user()->lang_code}}').text(errors['message.{{auth()->user()->lang_code}}']);
                @else
                    $(formType + ' #error_title').text(errors.title);
                    $(formType + ' #error_message').text(errors.message);
                @endif
                $(formType + ' #error_send_to').text(errors.send_to);
                $(formType + ' #error_publish_date').text(errors.publish_date);
                $(formType + ' #error_all_user').text(errors.all_user);
                $(formType + ' #error_role').text(errors.role);
                $(formType + ' #error_role_user').text(errors.role_user);
                $(formType + ' #error_role_list').text(errors.role_list);
                $(formType + ' #error_subscriber_list').text(errors.subscriber_list);
            }
            function resetForm() {
                $('#add_form')[0].reset();
                $('#send_to').niceSelect('update');
                $('#all_user_div').addClass('d-none');
                $('#select_role_div').addClass('d-none');
                $('#select_role_user_div').addClass('d-none');
                $('#multiple_role_div').addClass('d-none');
                $('#subscriber_div').addClass('d-none');
            }
            function removeValidateError(){
                @if(isModuleActive('FrontendMultiLang'))
                $('#error_title_{{auth()->user()->lang_code}}').text('');
                $('#error_message_{{auth()->user()->lang_code}}').text('');
                @else
                $('#error_title').text('');
                $('#error_message').text('');
                @endif
                $('#error_send_to').text('');
                $('#error_publish_date').text('');
                $('#error_all_user').text('');
                $('#error_role').text('');
                $('#error_role_user').text('');
                $('#error_role_list').text('');
                $('#error_subscriber_list').text('');
            }
        });
    })(jQuery);
</script>
@endpush
