@extends('layouts.main')
@section('title','Email Templates')
@section('content')


<link rel="stylesheet" href="{{ secure_asset('assets/css/tagify.css')}}">
 
<style>
  #js-thumnile {
    display: none;
  }
  #file-input-label {
    cursor: pointer;
    padding: 4px 31px;
    /*border: 1px solid #999;*/
    border-radius: 4px;
    margin-right: 20px;
    color: #fff;
  font-size: 14px;
  background: #0b6323;
  }
  #file-copy-label {
    padding: 4px 8px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    background: #0b6323;
  }
   #file-copy-label:hover {
    background-color: #4d4d4d;
    color: white;
  }
  #file-input-label:hover {
    background-color: #4d4d4d;
    color: white;
  }
 .tooltip {
  position: relative;
  display: inline-block;
  opacity: 1;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.custom-tag tags{
  height: unset !important;
}
/*.pre-btn{
  background-color: #E4FFBF !important;
  text-decoration: none !important;
}*/

</style>
<input type="hidden" name="previous_image_path" class="previous_image_path" id ="previous_image_path" value="" />
<div class="pcoded-content">
  <div class="pcoded-inner-content">
    <div class="main-body">
      <div class="page-wrapper">
        <div class="page-header">
          <div class="page-header-title">
            <h4>Email Templates</h4>
          </div>
        </div>

        <div class="page-body">
          @if($message = Session::get('success'))
                     <div class="alert alert-success background-success">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="icofont icofont-close-line-circled text-white"></i>
                      </button>
                      <strong>Success!</strong> {{ $message }}
                    </div>
                @elseif($message = Session::get('error'))
                <div class="alert alert-danger background-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <i class="icofont icofont-close-line-circled text-white"></i>
                    </button>
                    <strong>Error!</strong>{{ $message }}
                  </div>
                @endif
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-8 col-xl-8">
             {!! Form::open(["route" => ["email-template.store"], "method" => "POST", "id" => "template_form_add"]) !!}
                <div class="card-unborder card-block">
                      <div class="form-group row">
                            <label class="col-sm-12 col-form-label">Mail Type <span style="color: #f0433a;">*</span> :</label>
                            <div class="col-sm-12">
                            {!! Form::select('email_type',$admin_notification_type,[],['class'=>'form-control js-select2 w-100-p','multiple'=>false,'id'=>'js-corporate-pro-role','data-placeholder'=>'Select']) !!}

                             @if ($errors->has('email_type'))
                                        {{--<strong  class="help-block">{!! $errors->first('email_type') !!}</strong>--}}
                                        <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="email_type-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('email_type') !!}" data-trigger="hover"></span>
                                     @endif
                            </div>
                          </div>
                          <div class="form-group row">
                            <label class="col-sm-12 col-form-label">Mail Subject <span style="color: #f0433a;">*</span> :</label>
                            <div class="col-sm-12">
                            {!! Form::text('email_subject',"",['class'=>'form-control','placeholder'=>'Enter Title','maxlength'=>'290','id'=>'media_title','onkeypress'=>'return allowOnlyLettersAndSpaceForTitle(event,this);'])!!}
                             @if ($errors->has('email_subject'))
                                        {{--<strong  class="help-block">{!! $errors->first('email_subject') !!}</strong>--}}
                                        <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="email_subject-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('email_subject') !!}" data-trigger="hover"></span>
                                     @endif
                            </div>
                          </div>
                          <div class="form-group row">
                            <label class="col-sm-12 col-form-label">To Mail <span style="color: #f0433a;">*</span> :</label>
                            <div class="col-sm-12 custom-tag">
                             {!! Form::text('to_email',"",['class'=>'form-control','placeholder'=>'Enter TO Mail','id'=>'to_email'])!!}
                              
                             @if ($errors->has('to_email'))
                                        {{--<strong  class="help-block">{!! $errors->first('to_email') !!}</strong>--}}
                                        <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="to_email-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('to_email') !!}" data-trigger="hover"></span>
                                     @endif
                            </div>
                          </div>
                         <div class="form-group row">
                            <label class="col-sm-12 col-form-label">To Mail <span style="color: #f0433a;">*</span> :</label>
                            <div class="col-sm-12 custom-tag">
                             {!! Form::text('cc_email',"",['class'=>'form-control','placeholder'=>'Enter CC Mail','id'=>'cc_email'])!!}
                              
                             @if ($errors->has('cc_email'))
                                        {{--<strong  class="help-block">{!! $errors->first('cc_email') !!}</strong>--}}
                                        <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="cc_email-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('cc_email') !!}" data-trigger="hover"></span>
                                     @endif
                            </div>
                          </div>
                          

                           <div class="form-group row">
                            <label class="col-sm-12 col-form-label">Mail Content/ Description <span style="color: #f0433a;">*</span> :</label>
                            <div class="col-sm-12">
                            {!!Form::textarea('email_content',"",['class'=>'form-control summernote','placeholder'=>'Content','id'=>'content'])!!}
                            @if($errors->has('email_content'))
                              <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="email_content-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('email_content') !!}" data-trigger="hover"></span>
                            @endif
                            </div>
                            <div class="col-sm-12">
                            @foreach($email_content_variables as $var)
                            <a href="#" class="mail-content-variable btn btn-link mr-2 medium-font-size mt-2 mb-2 p-t-2 badge badge-info" data-var="{{$var}}">{{$var}}</a>
                            @endforeach
                            </div>
                          </div>
                            
                          <div class="form-group row">
                            <div class="col-md-12 text-left">
                            <button type="submit" id="submit_form" class="btn btn-primary m-r-5">
                          Save  
                        </button>
                            <a href="{{secure_url('email-template/list')}}" class="p-l-40">Cancel</a>
                            </div>
                         </div>
                        
                         </div>
              {!! Form::close() !!}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection @section('footer')
<script src="{{ secure_asset('assets/js/tagify.min.js')}}"></script>
<script type="text/javascript">
  
    var inputtomail = document.querySelector('input[name=to_email]');
    var tagifyToemail = new Tagify(inputtomail,{ pattern: /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/});

   

    var inputccmail = document.querySelector('input[name=cc_email]');
    var tagifyccemail = new Tagify(inputccmail,{ pattern: /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/});
    

    // $("#click").on("click", function() {
    //   var n = "ADD_IT_" + Math.random();
    //   var tags = [];
    //   tags.push(n);
    //   tagify.addTags(tags);
    // })
  
 $(document).ready(function(){
    $(document).on('click',"#mail_content_variable_button", function () {
        $('.mail_content_variable').removeClass('d-none');
    });
    $(document).on('click','.mail-content-variable',function(e){
          e.preventDefault();
           var _this = $(this);          
            console.log(_this);
          var _cureditor = $(".summernote").summernote("code");
          $(".summernote").summernote('editor.insertText', _this.data('var'));
      });
    });
$(function(){
    $("#file-copy-label").on("click",function(){
      var temp=$("<input>");
      $('body').append(temp);
      temp.val($('#image_path').text()).select();
      document.execCommand("copy");

      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copied";
    });
});

    function outFunc() {
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copy to clipboard";
    }


// $(document).on('change','.thumbnail_image',function(e){
//   formData = new FormData();
//   formData.append('thumbnail_img', $('input[type=file]')[0].files[0]);
//   formData.append('page_type', $("input[type='radio'][name='type']:checked").val());
//   formData.append('previous_image_path', $("#previous_image_path").val());
//   formData.append('_token', "{{ csrf_token() }}");  
//   $.ajax({
//             url: "{{secure_url('local-drive-image-upload')}}",
//             cache: false,
//             contentType: false,
//             processData: false,
//             data: formData,
//             type: "post",
//             success: function (response) {
//             if (response.status == 200) {
//               $('.image_path').html(response.path).trigger('change');
//               $('#previous_image_path').val(response.path);
//               alertMessage("success","Image Uploaded Successfully","Success");
//               $('#file-copy-label_div').removeClass('d-none');
//             }else if(response.status == 501){
//               swal({
//                     html: true, 
//                     title: '<span class="sweet-danger-text">Error</span>', 
//                     text: response.message,
//                     type: "error",
//                     confirmButtonText: "OK",
//                     closeOnConfirm: false,
//                     confirmButtonColor: '#f0443a',
//                   // },function(){
//                   //   swal.close();
//                   //   formData.append('image_overwrite', 1);
//                   //   uploadImageAjax(formData);
//                     });
//             }else {
//               swal({
//                 html: true, 
//                 title: '<span class="sweet-danger-text">Error</span>', 
//                 text: response.message,
//                 type: "error",
//                 showCancelButton: false,
//                 confirmButtonText: "OK",
//                 closeOnConfirm: false,
//                 confirmButtonColor: '#f0443a',
//               });
//             }
//             $("#js-thumnile").val('');
//           },
//         });
// });
function uploadImageAjax(formData){
  $.ajax({
        url: "{{secure_url('local-drive-image-upload')}}",
        cache: false,
        contentType: false,
        processData: false,
        data: formData,
        type: "post",
      success: function(data) {
        if(data.status ==200){           
         $('.image_path').html(data.path).trigger('change');
         $('#previous_image_path').val(data.path);
          alertMessage("success","Image Replaced Successfully","Success");
        }else{
          alertMessage("danger",data.message,"Error");
        }
      }
    });
}

// $('#media_title').bind("cut copy paste",function(e) {
//      e.preventDefault();
//  });
$('#media_alias').bind("cut copy paste",function(e) {
     e.preventDefault();
 });
$('#media_file_name').bind("cut copy paste",function(e) {
     // e.preventDefault();
});
function removeSpecialChars(e,t){
  var special_chars_replaced = t.replace(/[^a-z]/gi, '');
  var number_replaced = special_chars_replaced.replace(/[0-9]/g, '');
     $('#media_file_name').val(number_replaced);
}

function allowOnlyLetters(e, t){
       if (window.event)    
       {    
          var charCode = window.event.keyCode;    
       }    
       else if (e)   
       {    
          var charCode = e.which;    
       }    
       else { return true; }    
       if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123)){
          return true;
       }else  
       {    
          return false;    
       }           
}
function allowOnlyLettersAndSpaceForTitle(e, t){
     var len = $('#media_title').val().length;
       if (window.event){    
          var charCode = window.event.keyCode;    
       }    
       else if (e){    
          var charCode = e.which;    
       }    
       else { return true; }
       if(len == 0){
        if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))    
           return true;
        else
          return false;  
       }else
          return true;    
}
function allowOnlyLettersAndSpaceForAlias(e, t){
     var len = $('#media_alias').val().length;
       if (window.event){    
          var charCode = window.event.keyCode;    
       }    
       else if (e){    
          var charCode = e.which;    
       }    
       else { return true; }
       if(charCode == 32)
        return false;
       if(len == 0){
        if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))    
           return true;
        else
          return false;  
       }else if((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 45))
          return true;
       else
          return false;      
}
$(document).ready(function() {
  $('.summernote').summernote({
    height: 250,
    width: 680,
    callbacks: {
    onImageUpload: function(images) {
     sendFile(images[0]);
    },
    onChange: function (content) {
            var html = content.trim();
            if (html.substring(0, 4) == '<br>' || html.substring(0, 11) == '<p><br></p>') {
                $(document).find('.summernote').summernote('code', '')
            }
        },
       onKeyup: function (e) {
          $('#submit_form').find('[name=content]').valid();
       }
  }
});

function sendFile(images,editor) {
        var data = new FormData();
        data.append("image", images);
        $.ajax({
            url: "{{secure_url('editorfileupload')}}",
            cache: false,
            contentType: false,
            processData: false,
            data: data,
            type: "post",
            success: function(response) {
                var image = $('<img>').attr('src', response.resources);
                $('.summernote').summernote("insertNode", image[0]);
            },
            error: function(data) {
            }
        });
    }
});

jQuery.validator.addMethod("specialCharacterValidation", function(value, element) {
  var value = $('#media_title').val();
    value1 = value.replace(/[^a-zA-Z0-9]/g, '');
    text = value1.replace(/[0-9]/g, '');
    if(text.length == 0){
      return false;
  }
    else{
      return true;
    }

}, "The title should not contain only special characters/numbers");
jQuery.validator.addMethod("startingSpecialCharacterValidation", function(value, element) {
  var value = $('#media_title').val();
   if(value.length > 0){
      charCode=value.codePointAt(0);
      if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123)){
        return true;
      }
      else{
        return false;
      }
  }
    else{
      return true;
    }

}, "The title should not start with special characters/numbers");

$('#template_form_add').validate({
     errorElement: 'span',
     ignore: '.note-editor *',
  errorPlacement: function (error,element){
    var parent = $(element).parent();
    $('.tooltip').tooltip('hide');
    $("body").find('#'+error[0].id+'-custom').remove();
    parent.append('<span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="'+error[0].id+'-custom" data-toggle="tooltip" data-original-title="'+error[0].innerText+'" data-trigger="hover"></span>');
    $('#'+error[0].id+'-custom').tooltip();
  },
  success: function (element){
  $("body").find('#'+element[0].id+'-custom').remove();
  $('#'+element[0].id+'-custom').tooltip('hide');
  $('.js-tooltip-validate').tooltip();
  },
  onfocusout: false,
    rules: {
        email_type: {
        required:true,
      },
      email_subject: {
        required:true,
        maxlength:250,
        minlength:3,
      },
      email_content: {
        required:true,
        maxlength:5000,
        minlength:3,
      },
      to_email: {
        required:true,
      },
      cc_email: {
        required:true,
      },
      
   },
  messages: {
     email_type: {
      required:"Please Choose Type",
      
    },
     email_subject: {
      required:"Please enter Subject ",
      
      maxlength: "Subject  accepts max 250 characters",
      minlength: "Subject  accepts min 3 characters",
    },
     email_content: {
      required:"Please enter content ",
      maxlength: "Content  accepts max 5000 characters",
      minlength: "Content  accepts min 3 characters",
     },
      to_email: {
      required:"Please enter To email",
    },
     cc_email: {
      required:"Please enter  CC email",
    },
      
  },
  submitHandler:function(form){
      var inputtomail = $('input[name=to_email]').val();
      var to_Email = JSON.parse(inputtomail);
      let toMail = to_Email.map(x => x.value);
      var inputccmail = $('input[name=cc_email]').val();
      var cc_Email = JSON.parse(inputccmail);
      let ccMail = cc_Email.map(x => x.value);
      var checkDuplicate = intersectionOfArrays(toMail, ccMail);
      if(checkDuplicate.length > 0){
        alertMessage('warning',"Duplicate mails should not be Allowed","Alert");
        return false;
      }      
    $("#submit_form").text("Processing...").attr("disabled",true);
    form.submit();
          
      } 

 });


</script>

@endsection