@extends('layouts.admin.main')
@section('title', __('Send Newsletter'))
@section('style')
    <link href="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js"></script>
   
    <style>
        .select2-container--default .select2-results__option[aria-selected=true]{
            background-color: #777677 !important;
            color: #f4f4f4 !important;
        }
        .card-header:first-child{
            padding: 0 !important;
        }
        .note-group-select-from-files{
            display: none;
        }
    </style>
@endsection
@section('rightbar-content')                
<div class="breadcrumbbar">
	<div class="row align-items-center">
		<div class="col-md-7 col-lg-7">
			<h4 class="page-title">All Subscribers</h4>
			<div class="breadcrumb-list">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{url('/')}}">{{ __('adminWords.home') }}</a></li>
					<li class="breadcrumb-item"><a href="#">Subcribers</a></li>
				</ol>
			</div>
		</div>
	</div>          
</div>

<div class="contentbar">  
	<div class="row">
		<div class="col-lg-12"> 
			<div class="card m-b-30">
				<div class="card-header">                                
					<div class="row align-items-center">
						<div class="col-6">
							<h5 class="card-title mb-0">Send NewsLetter</h5>
						</div>
					</div>
				</div>
				<div class="card-body">			
                    <form action="{{ route('send_letter') }}" method="post">	
                         @csrf	
						<div class="row">
                              <div class="col-md-2">
                                   <label>Emails (subscribers)</label>
                              </div>
                              <div class="col-md-5">
                                    <select name="email[]"  class="form-control multipleSelectWithSearch require" multiple="multiple" data-placeholder="Select Subscribers" required>
                                      
                                        @if($subscribers->count() > 0)
                                        @foreach($subscribers as $emails)
                                        <option value="{{ $emails->email }}">{{ $emails->email }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                              </div>
                        </div>


                        <div class="row mt-3">
                              <div class="col-md-2">
                                   <label>Subject</label>
                              </div>
                              <div class="col-md-5">
                                    <input type="text" name="subject" class="form-control" required>
                              </div>
                        </div>


                        <div class="row mt-3">
                                <div class="col-md-2">
                                      <label>Content</label>
                                </div>
                                <div class="col-md-8">
                                    <textarea name="content" id="summernote" required></textarea>
                                </div>
                        </div>

                        <div class="btns text-center mt-3">
                               <input type="submit" value="Send" class="btn btn-success">
                        </div>
                     </form>
				</div>
			</div>
		</div>
	</div>
</div>

                       <!-- File Upload Modal -->
                        <div class="modal fade" id="fileUploadModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <form action="#" method="post" enctype="multipart/form-data" id="fileUploadForm">
                                        <div class="modal-body">
                                                 <div class="row">
                                                       <div class="col-md-3">
                                                             <label for="image">Image</label>
                                                       </div>

                                                       <div class="col-md-5">
                                                            <input type="file" name="image" id="image" class="form-control">
                                                       </div>
                                                 </div>
                                                 <input type="hidden" name="csrf" id="csrf" value="{{ csrf_token()  }}">
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary uploadBtn">Upload</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
@endsection
@section('script')
	<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>      
    <script src="{{ asset('assets/js/mrcls-custom.js') }}"></script>  
    

    <script src="https://cdn.datatables.net/1.13.3/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/buttons/2.3.5/js/dataTables.buttons.min.js"></script>
     <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script> 


     <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

     <script>
        $(document).ready(function(){
            $('#Dashboard-tab').trigger('click');
        });

        $('textarea#summernote').summernote({
     
            tabsize: 2,
            height: 100,
            toolbar: [
                        ['insert', ['picture', 'link', 'video', 'table', 'hr', 'file']],
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['font', ['strikethrough', 'superscript', 'subscript']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']],
                        ['misc', ['fullscreen', 'codeview']],
                    ],
       });

       $('.note-btn').click(function(e){
           var attribute = $(this).attr('data-original-title');
           if(attribute == "Picture"){
            $('.link-dialog').modal('hide');
              $('.modal').modal('hide');
            // $('.note-image-url').val('test.png');
            $('#fileUploadModal').modal('show');
           }
       });

       $('.uploadBtn').click(function(){
            var formData = new FormData();
            var image = $('#image').prop('files')[0];

            var csrf = $('#csrf').val();
            formData.append('image',image);

            $.ajax({
                headers:{
                    'X-CSRF-TOKEN':csrf,
                },
                type:"POST",
                url:"{{ route('upload_image_fetchUrl') }}",
                dataType:'text',
                processData:false,
                contentType:false,
                data:formData,
                success:function(response){
                    var data = JSON.parse(response);
                    if(data.status == 1 || data.status == '1'){
                        $('#summernote').summernote('editor.insertImage', data.url);
                        $('#fileUploadModal').modal('hide');
                    }else{
                        toastr.error('Something went wrong');
                    }
                },
                error:function(){
                    alert('error');
                }

            });
       });
    </script>  
@endsection