@extends('app')

@section('page_title')
    Send Campaign Mail
@endsection


@push('styles')
    <link rel="stylesheet" href="{{asset('assets/examples/css/pages/profile.min3f0d.css?v2.2.0')}}">
    <script src="{{asset('js/ckeditor/ckeditor.js')}}"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{asset('css/DateTimePicker.min.css')}}" />
    <link rel="stylesheet" type="text/css" href="{{asset('css/DateTimePicker-ltie9.min.css')}}" />
    <script type="text/javascript" src="{{asset('js/DateTimePicker-ltie9.min.js')}}"></script>

@endpush

@section('page_content')
    <div class="page-content container-fluid">
        <div class="row">
            @include('includes.side_profile')

            <div class="col-md-9">
                <!-- Panel Wizard Form -->
                <div class="panel">
                    <div class="panel-body nav-tabs-animate nav-tabs-horizontal">
                        <form method="post" enctype="multipart/form-data" class="registration lato" onsubmit="return disableSubmitCampaignBtn()">
                            @if(count($errors)>0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>
                                                {{$error}}
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            @if(session('success'))
                                <div class="alert alert-success">
                                    <ul>
                                        <li>{{ session('success') }}</li>
                                    </ul>
                                </div>
                            @endif

                            @if(session('error'))
                                <div class="alert alert-danger">
                                    <p>{{ session('error') }}</p>
                                </div>
                            @endif

                            @csrf
                            <h3>
                                Send Campaign Mail<br>
                                <small>Create & Schedule Campaign</small>
                            </h3>
                            <hr>
                                <div class="row">
                                    <div class="col-md-3"></div>
                                    <div class="form-row text-center mx-auto">
                                        <div class="form-group col-md-6">
                                            <label for="recipientList" class="h5">Recipients list <em class="text-danger">*</em></label>
                                            <select class="form-control " name="user_mailing_list_id" id="recipientList" required>
                                                <option value="">-- select a list --</option>
                                                @foreach($mailingLists as $mailingList)
                                                    <option value="{{ $mailingList->id }}" {{ old('user_mailing_list_id') == $mailingList->id ? 'selected' : '' }}>{{ $mailingList->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                    </div>
                                </div>


                                <div class="form-row">

                                    <div class="form-group col-md-6">
                                        <label for="tag" class="h5">Tag </label>
                                        <input type="text" class="form-control" value="{{old('tag')}}"
                                               name="tag" placeholder="">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="campaign_name" class="h5">Campaign Name <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control" value="{{old('campaign_name')}}"
                                               name="campaign_name" placeholder="" required>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="subject" class="h5">Subject <em class="text-danger"></em></label>
                                        <input type="text" class="form-control" value="{{old('subject')}}" id="subject"
                                               name="subject" placeholder="" required>
                                    </div>


                                    <div class="form-group col-md-6">
                                        <label for="from_name" class="h5">Sender Name <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control" value="{{old('from_name')}}" id="from_name"
                                               name="from_name" placeholder="" required>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="reply_to" class="h5">Reply To <em class="text-danger">*</em></label>
                                        <input type="email" class="form-control" value="{{old('reply_to')}}" id="reply_to"
                                               name="reply_to" placeholder="replay@mail.com" required>
                                    </div>


                                    <div class="form-group col-md-6">
                                        <label for="company_email" class="h5">Company Email <em class="text-danger">*</em></label>
                                        <input type="text" class="form-control" value="{{old('company_email')}}"
                                               name="company_email" placeholder="company@mail.com" required>
                                    </div>


                                    <div class="form-group col-md-6">
                                        <label for="email_footer" class="h5">Email Footer </label>
                                        <input type="text" class="form-control" value="{{old('email_footer')}}"
                                               name="email_footer" placeholder="">
                                    </div>


                                    <div class="form-group col-md-6">
                                        <label for="schedule_at" class="h5">Schedule At <em class="text-danger">*</em></label>
                                        <input type="datetime-local" class="form-control" value="{{old('schedule_at')}}" name="schedule_at" required>
                                    </div>


                                    <div class="row col-md-12">
                                        <div class="form-group col-md-6">
                                            <label for="attachment_file" class="h5">Mail Attachment File </label>
                                            <input type="file" class="form-control" value="{{old('attachment_file')}}" name="attachment_file">
                                        </div>
                                    </div>



                                    <div class="form-group col-md-12">
                                        <label for="message" class="h5">Message <em class="text-danger"></em></label>
                                        <div class="body_image"></div>
                                        <div class="ck_message">
                                            <textarea rows="100" class="form-control"  name="message" id="message">{{old('message')}}</textarea>
                                        </div>
                                    </div>
                                </div>

                            <div class="row">
                                <div class="text-center">
                                    <button type="submit" id="submit-list-btn" class="btn btn-sm" style="background-color: #8e0d0e ;color:white"><i class="fa fa-send-o" style="color: #fff"></i> Create & Schedule Campaign</button>
{{--                                    <input type="submit" id="" class="btn btn-sm" name="submit"  value="Save & Send" style="background-color: #8e0d0e ;color:white"><i class="fa fa-send-o" style="color: #fff"></i>--}}
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection


@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
{{--<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>--}}
    <script type="text/javascript" src="{{asset('js/DateTimePicker.min.js')}}"></script>


    <script>

        function disableSubmitCampaignBtn(){
            let submitBtn = $('#submit-list-btn');
            submitBtn.attr('disabled', true);
        }

    </script>

    <script>
        $(document).ready(function()
        {
            let recipientList = $('#recipientList');

            CKEDITOR.config.height = 500;
            CKEDITOR.replace('message');

            $('#template').on('change',function () {
                const value = $(this).val(),
                    type = $('option:selected', this).data('toggle'),
                    file_name =  $('option:selected', this).data('body_image'),
                    tmp_path = "{{asset('/storage/template/file_name')}}",
                    path =  tmp_path.replace('file_name',file_name);
                console.log(value,type,path);

                if(type === 'image')
                {

                    $('.ck_message').hide();
                    $('.body_image').show();
                    $('.body_image').html('<img src="'+path+'" alt=""  width="100%"/>');
                }
                else
                {
                    $('.body_image').hide();
                    $('.ck_message').show();
                }
            })



            recipientList.on('change', function (e){
                e.preventDefault();
                let userMailListId = $(this).val();
                let fromName = $('#from_name');
                let fromEmail = $('#reply_to');
                let subject = $('#subject');

                if(userMailListId){

                    $.ajax({
                        url: "{{ route('email.campaigns.getUserMailListData','userMailList') }}".replace('userMailList',userMailListId),
                        method: "GET",
                        data: {
                            _token: "{{ csrf_token() }}"
                        }
                    }).done(response => {
                        if (response.code === 200){
                            fromName.val(response.data.from_name)
                            fromEmail.val(response.data.from_email)
                            subject.val(response.data.subject)
                        }
                    })
                }
            })

            $('.selectList').select2();
        });

    </script>

@endpush