@extends('admin.layout')
@section('content')
<style type="text/css">
    .required-mark
    {
        color: red;
    }
    #watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;
    display: block;
    width: 300%;
    height: 300%;
    transform: rotate(-45deg);
    content: attr(data-watermark);
    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    }
    .content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
</style>
<div class="search-list">
    <div class="content-wrapper search-result-list">
  <section class="content-header">
    <h1> {{ trans('Update Email Notification') }} <small></small> </h1>
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('Update Email Notification') }}</li>
    </ol>
  </section>
  <section class="content"> 
    @php
        $getUserRoleData    = userRoleData();
        $SendNotification   = explode(",",$getUserRoleData->SendNotification);
        //$SendNotification         = array("Add", "View", "Edit", "Delete");
    @endphp

    <div class="row">
      <div class="col-md-12">
        <div class="box box-info">
          <div class="box-header">
            <h3 class="box-title">{{ trans('Update Email Notification') }} </h3>
          </div>
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
                    <div class="">                   
                        <div class="row"><br>
                            @if(session()->has('message'))
                            <div class="alert alert-success alert-dismissible">
                               <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                               <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
                                {{ session()->get('message') }}
                            </div>
                            @endif
                            @if(session()->has('error'))
                                <div class="alert alert-warning alert-dismissible">
                                   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                   <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
                                    {{ session()->get('error') }}
                                </div>
                            @endif
                        </div>
                         <div class="box-body">
                         @if(in_array("Edit",$SendNotification ))
                            {!! Form::open(array('url' =>'admin/update-email-notification-data', 'method'=>'post', 'class' => 'form-horizontal', 'id' => 'addNewEmailNotificationData', 'enctype'=>'multipart/form-data')) !!}
                                <input type="hidden" name="id" id="id" value="{{$result->id}}">
                                <!-- <input type="hidden" name="old_sender_id" value="{{$result->sender_id}}"> -->
                                <div class="form-group">
                                  <label for="sender_id" class="col-sm-2 col-md-3 control-label">{{ trans('Sender ID') }} <span class="required-mark">*</span></label>
                                  <div class="col-sm-10 col-md-4">
                                    {!! Form::text('sender_id',  $result->sender_id, array('class'=>'form-control', 'id'=>'sender_id', 'required'=>'required', 'readonly'=>'readonly')) !!}
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Name') }} <span class="required-mark">*</span></label>
                                  <div class="col-sm-10 col-md-4">
                                    {!! Form::text('name',  $result->name, array('class'=>'form-control', 'id'=>'name', 'required'=>'required')) !!}
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="to_id" class="col-sm-2 col-md-3 control-label">{{ trans('To Email ID') }} <span class="required-mark">*</span></label>
                                  <div class="col-sm-10 col-md-4">
                                   <div class="multiEmail">
                                    {!! Form::text('to_id',  $result->to_id, array('class'=>'form-control multiemail', 'id'=>'to_id', 'required'=>'required')) !!}
                                      </div>
                                    <div style="color: #9f9a9a;">Please enter email ID with comma (,) separated</div>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="cc_id" class="col-sm-2 col-md-3 control-label">{{ trans('CC Email ID') }} </label>
                                  <div class="col-sm-10 col-md-4">
                                   <div class="multiEmail">
                                    {!! Form::text('cc_id',  $result->cc_id, array('class'=>'form-control multiemail', 'id'=>'cc_id')) !!}
                                      </div>
                                    <div style="color: #9f9a9a;">Please enter email ID with comma (,) separated</div>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="bcc_id" class="col-sm-2 col-md-3 control-label">{{ trans('BCC Email ID') }} </label>
                                  <div class="col-sm-10 col-md-4">
                                   <div class="multiEmail">
                                    {!! Form::text('bcc_id',  $result->bcc_id, array('class'=>'form-control multiemail', 'id'=>'bcc_id')) !!}
                                      </div>
                                    <div style="color: #9f9a9a;">Please enter email ID with comma (,) separated</div>
                                  </div>
                                </div>
                              <div class="box-footer text-center">
                                <button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
                                <a href="../email-notification" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
                              </div>
                            {!! Form::close() !!}                                            
                            @else
                                <p> <strong>Please contact with SuperAdmin</strong></p>
                            @endif
                        </div>
                  </div>
              </div>
            </div>
          </div>
        </div>

        <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
		</div>

      </div>
    </div>
  </section>
</div>
</div>
<script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
			  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
		  });
</script>
<script type="text/javascript">
    
    // Alphabets Only
    $.validator.addMethod("alpha", function(value, element) {
        return this.optional(element) || value == value.match(/^[a-zA-Z\s]+$/);
    }); 
    
    // Password Check
    $.validator.addMethod("pwcheck", function(value) {
        return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,16}$/.test(value) // consists of only these
    });
    
    // Email Check
    $.validator.addMethod("email", function(value) {
        return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) // consists of only these
    });
    
    // File Size Validation
    jQuery.validator.addMethod("filesize_max", function(value, element, param) {
        var isOptional = this.optional(element),
            file;

        if(isOptional) {
            return isOptional;
        }
        if ($(element).attr("type") === "file") {

            if (element.files && element.files.length) {

                file = element.files[0];            
                return ( file.size && file.size <= param ); 
            }
        }
        return false;
    }, "File size is too large.");
    
    $( "#addNewEmailNotificationData" ).validate( {
            rules: {
                sender_id: {
                    required: true,
                    rangelength: [3, 6],
                    number: true,
                    remote: {
                        url: "../check-sender-id-for-update?id="+$('#id').val(),
                        data: {
                            sender_id: function () {
                                //you need to read this value when the validation is executed, so pass the value as a function which will be called
                                return $('#sender_id').val();
                            }
                        },
                        type: "GET"
                    },
                },
                name: {
                    required: true,
                    rangelength: [3, 100],
                    alpha: true,
                },
                to_id: {
                    required: true,
                },
            },
            messages: {
                sender_id: {
                    required: "Please enter sender id",
                    rangelength: "Please enter sender id min length 3 & max length 100",
                    number: "Please enter sender id numbers only",
                    remote: "Please enter another sender id. The sender id already exist",
                },
                name: {
                    required: "Please enter name",
                    rangelength: "Please enter name min length 3 & max length 100",
                    alpha: "Please enter name Alphabets",
                },
                to_id: {
                    required: "Please enter to email ID",
                },
            },
            errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `help-block` class to the error element
                error.addClass( "help-block" );

                // Add `has-feedback` class to the parent div.form-group
                // in order to add icons to inputs
                element.parents( ".col-sm-5" ).addClass( "has-feedback" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.parent( "label" ) );
                } else {
                    error.insertAfter( element );
                }

                // Add the span element, if doesn't exists, and apply the icon classes to it.
                if ( !element.next( "span" )[ 0 ] ) {
                    $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
                }
            },
            success: function ( label, element ) {
                // Add the span element, if doesn't exists, and apply the icon classes to it.
                if ( !$( element ).next( "span" )[ 0 ] ) {
                    $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
                }
            },
            highlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
                $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
            },
            unhighlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
                $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
            }
        } );    
</script>

<!-- JQuery/CSS added by Dalip on 26-06-2020 for separate email id -->
<script src="{!! asset('assets/admin/dist/js/jquery.email.multiple.js') !!}"></script>

    <script>
        $(document).ready(function($){
            
            $('.multiemail').each(function(i, e){
                let data =  $(this).val().split(',');
            
                $(this).email_multiple({
                    data: data
                    // reset: true
                });
            })
        });
    </script>
    <style>
.all-mail {
    display: flex;
    margin: 0 -2px;
    flex-wrap: wrap;
        max-height: 58px;
    overflow-y: auto;
}

.all-mail span.email-ids {
    background-color: #3c8dbc;
    border-color: #367fa9;
    padding: 1px 0 1px 4px;
    display: flex;
    font-size: calc(1rem * 0.875);
    position: relative;
    background: #ecf5fc;
    border: solid 1px #c2e0ff;
    padding-left: 4px;
    border-radius: 2px;
    margin-right: 4px;
    margin-bottom: calc(1rem * 0.375);
    color: #000;
    line-height: 1;
    font-size: 12px;
    align-self: center;
    margin: 0 0;
    margin-right: 4px;
    margin: 2px;
}

span.cancel-email {
    margin-left: 4px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    font-size: 11px;
    color: #000;
    order: 2;
    padding-left: 6px;
    padding-right: 6px;
    margin-right: 0;
    border-left: solid 1px #c2e0ff;
}
        input.enter-mail-id {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    border-radius: 0 !important;
    -webkit-appearance: none;
}
        .multiEmail {
    border: 1px solid #d2d6de;
    padding: 6px 12px;
}

.multiEmail input.enter-mail-id {
    padding: 0;
    border: 0 !important;
    height: auto;
}
        .multiEmail input.enter-mail-id:focus{
            border: 0;
            outline: none;
        }
</style>
<!-- JQuery/CSS added by Dalip on 26-06-2020 for separate email id -->

@endsection