@extends('admin.layout')
@section('content')
<style type="text/css">
     #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;
}
	.required-mark
	{
		color: red;
	}
	.my-current
	{
		color: #00c0ef;
	}
	hr {
		margin:10px 0px;
	}
	.hr-primary{
		border: 1px solid #00c0ef;
	}
	#image_preview ul {
		display: flex;
		flex-direction: column;
		align-items: end;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#image_preview ul li span {
		float: left;
		padding-right: 10px;
		font-size: 10px;
		width: 18px;
		height: 18px;
		background: #7b7b7b;
		opacity: 1;
		margin: 0px 8px 4px 0px;
		text-align: center;
		display: block;
		border-radius: 100%;
		color: #fff;
		font-weight: normal;
		padding: 0;
		line-height: 18px;
	}
	.fglisting ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: column;
		align-items: baseline;
	}
	.fglisting ul li{
		
	}
	.fglisting ul li span {
		padding-left: 8px;
	}
	.fglisting ul li span{

	}
    /*._notes div + br, ._notes br {
        display: block;
    }*/

    ._subject .dropdown-menu {
        box-shadow: -1px 3px 13px 0 rgba(85, 85, 85, 0.52);
        border: 1px solid #b5b5b5;
        width: 100%;
    }
    
/*    CSS added by Dalip on 26-06-2020 for file upload*/
    div#upload-form input[type="file"] {
    position: absolute;
    top: 0;
    opacity: 0;
}

div#upload-form {
    position: relative;
}

div#upload-form label.control-label {
    padding: 6px 12px;
    border: 1px solid #d2d6de;
    width: 100%;
    display: flex;
    pointer-events: none;
        color: #666;
    font-weight: normal;
}
    div#upload-form label.control-label svg {
        margin-right: 5px;
    }

div#image_preview ul li span.close {
    margin: 0 0 0 5px;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: 12px;
    border-radius: 0;
    background: transparent;
}

div#image_preview {
    margin-top: 2px;
}

div#image_preview ul li a {
    font-size: 11px;
    color: #000;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

div#image_preview ul li {
    display: flex;
        background-color: #3c8dbc;
    border-color: #367fa9;
    padding: 1px 0 1px 4px;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    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: 11px;
    align-self: center;
    margin: 0 0;
    margin-right: 4px;
    /* margin-bottom: calc(1rem * 0.375); */
    margin: 2px;
}
#image_preview ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: unset;
    margin: 0 -2px;
}
div#image_preview ul li span.close i::before {
    content: "\00D7";
    font-size: 14px;
    color: #c70303;
        margin-right: 2px;
}
.dropzone .dz-preview .dz-error-message {
    top: 150px!important;
}  
.select2-container{
    max-width: 100%;
}

    
    
    
/*    CSS added for dropzone uploader by Dalip Sharma 21-09-2020*/
    div#dropzone {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px dashed rgb(0 192 239);
        margin-top: 5px;
        flex-wrap: wrap;
        padding: 0;
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .dropzone .dz-message {
        text-align: center;
        margin: 0;
    }
    html .dropzone .dz-preview .dz-image{
        width: 100px;
        height: auto;
        border-radius: 5px;
        display: flex;
    }
    html .dropzone .dz-preview .dz-details .dz-size {
        margin-bottom:0px;
        margin-top: 5px;
    }
    html .dropzone .dz-preview .dz-details {
        position: static;
        opacity: 1;
        line-height: 1.5;
        padding: 0;
    }
    html .dropzone .dz-preview {
        position: relative;
        padding: 15px;
        box-sizing: border-box;
        width: 12.5%;
        margin: 0;
    }
    html .dropzone .dz-preview .dz-image img{

        width: 70px;
        height: 70px;
        object-fit: cover;
        display: block;
        margin: 0 auto;

    }
    .dropzone .dz-preview .dz-remove {
        position: absolute;
        top: 5px;
        right: 25px;
        z-index: 99;
        font-size: 0;
        line-height: 1;
    }

    .dropzone .dz-preview .dz-remove:after {
        font-size: 20px;
        content: "\00D7";
        color: #fff;
        background: #f00;
        width: 20px;
        height: 20px;
        display: block;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
    }
    html .dropzone .dz-preview .dz-remove {
        font-size: 0;
    }
    html .dropzone .dz-preview:hover .dz-image img {-webkit-transform: scale(1.05, 1.05);-moz-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);-webkit-filter: blur(0px);filter: blur(0px);transition: all 0.5s ease-in-out;}

    html .dropzone .dz-preview .dz-image img {
        transition: all 0.5s ease-in-out;
        display: block;
        border-radius: 5px;
    }
    div#dropzone.dz-started:after {
        content: "\002B";
        display: block;
        height: 115px;
        font-size: 100px;
        font-weight: 100;
        color: #bbb;
        border: 1px solid #f0f0f0;
        line-height: 70px;
        text-align: center;
        padding: 15px;
        box-sizing: border-box;
        width: 12.5%;
        margin: 15px 0;
        vertical-align: top;
    }
    .dz-messagebottom{
        display: none;
    }
    div#dropzone.dz-started + .dz-messagebottom{
        display: block;
    }
   html .dropzone .dz-preview .dz-success-mark, html .dropzone .dz-preview .dz-error-mark {
        top: 50px;
       left:78px;
    }

    html .dropzone .dz-preview.dz-error.dz-complete .dz-error-mark g[id="Check-+-Oval-2"] {
        fill: #f00 !important;
    }
    html .dropzone .dz-preview.dz-success.dz-complete .dz-success-mark svg path {
        fill: #1a801a !important;
    }
    html .dropzone .dz-preview.dz-file-preview .dz-image{
        border-radius: 5px;
    }
    html .dropzone .dz-preview .dz-success-mark svg, html .dropzone .dz-preview .dz-error-mark svg{
        width: 30px;
    }
    html .dropzone .dz-preview.dz-file-preview .dz-image{
        background: transparent;
    }
    html .dropzone .dz-preview.dz-file-preview .dz-image img {
        border-radius: 5px;
        background: #999;
        background: linear-gradient(to bottom, #eee, #ddd);
    }
    html .dropzone .dz-preview .dz-error-message {
        top: 80px!important;
    }
    html .dropzone .dz-preview .dz-error-message{
        left: -4px;
        text-align: center;
    }
    .content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
    .ck.ck-content {
    height: 200px;
}
/*    CSS added for dropzone uploader by Dalip Sharma 21-09-2020*/
</style>

<div class="search-list">
	<div class="content-wrapper search-result-list">
  <section class="content-header">
    <h1> {{ trans('Add Review') }} <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('Add Review') }}</li>
    </ol>
  </section>
	@php
		$getUserRoleData 	= userRoleData();
		$reviews				= explode(",",$getUserRoleData->reviews);
		
	@endphp
  <section class="content"> 
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info">
           
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
                    <div class="">            
                         <div class="box-body">
						 	@if(session()->has('message'))
                                <div class="alert alert-success alert-dismissible">
                                   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                   <strong>Success!</strong>  {{ session()->get('message') }}
                                </div>
                                   
                                
                            @endif 
						 	@if (count($errors) > 0)
                                <div class="alert alert-warning alert-dismissible">
                                   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                   <strong>Warning!</strong>
                                  
                                        @foreach ($errors->all() as $error)
                                            {{ $error }}<br/>
                                        @endforeach
                                       
                                    </div>
                                   
                                
                            @endif 

							@if(in_array("Add",$reviews ))							
                            {!! Form::open(array('url' =>'admin/review/send', 'method'=>'post', 'class' => 'form-horizontal', 'id'=>'addnewuser', 'enctype'=>'multipart/form-data')) !!}

								

								
																<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Products') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-7">

											<select class="form-control  " name="body_product_id" id="body_product_id" required="">
                                            <option value="">-- Product --</option>                                                     
                                            @if(count($result['body'])>0)
                                                @foreach($result['body'] as $key =>  $iValue)  
                                                @if($iValue->products)
                                                    <option data-name="{{$iValue->products->name}}" value="{{$iValue->products->id}}" @if(old('body_product_id') == $iValue->products->id ) selected @endif >{{$iValue->products->name}}</option>
                                                @endif
                                                @endforeach
                                            @endif
                                        </select>
									</div>
								</div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Email From') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-7">
									<div class="form-control" id="emailFrom" disabled></div>

									</div>
								</div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Email To') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-7">
									{!! Form::email('emailto', '', array('class'=>'form-control', 'id'=>'emailto', 'required'=>'required')) !!}

									</div>
											
								</div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Subject') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-7">
									{!! Form::text('subject', '', array('class'=>'form-control', 'id'=>'subject', 'required'=>'required')) !!}

									</div>
											
								</div>
								
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Body') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-7">
									{!! Form::textarea('review_body', '', array('class'=>'form-control review_body', 'id'=>'review_body', 'required'=>'required')) !!}
										<a id="preview" style="display:none;cursor: pointer;font-weight: bold;">Check Preview <span class="loading" style="display:none;color:#000;">Loading....</span></a>
									</div>
											
								</div>
								<!-- <div class="form-group">
								<label for="name" class="col-sm-2 col-md-3 control-label">Preview</label>
								<div class="col-sm-10 col-md-7" id="preview"></div>
								</div> -->
								
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Attachments') }}</label>
									<div class="col-sm-10 col-md-7">
									
									<div class="col-sm-4 col-md-12">
										<input type="hidden" name="images_name" id="images_name" value="">
										<div id="dropzone" class="dropzone dz-clickable">
											<div class="dz-message">Drop files here or click to upload.</div>
										</div>
										<div class="dz-messagebottom">Drop files in the box or click on "+" to upload.</div>
									</div>
									</div>
											
								</div>	
								
								


								
								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button type="submit" class="btn btn-primary">{{ trans('Send') }}</button>
										
									</div>
								</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>


<!-- Modal -->
<div id="previewModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg" >

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Preview</h4>
      </div>
      <div class="modal-body">
      </div>
	  
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
 
@endsection 
@section('scripts')

<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

<script src="{!! asset('assets/admin/dist/js/dropzone.min.js') !!}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="{!! asset('assets/admin/src/jquery.typeahead.min.js') !!}"></script>

<script src="{!! asset('assets/admin/dist/js/my-app.js') !!}"></script>
<link href="{!! asset('assets/admin/dist/css/dropzone.min.css') !!}" rel="stylesheet" />


<script type="text/javascript">
  $(document).ready(function() {
    ClassicEditor
            .create(document.querySelector('#review_body')).then(editor => {
            editorInstance = editor;
});
		// CKEDITOR.replace('review_body');
      var emailConfig = @json($result['emailConfig']) ;
      var emailBody = @json($result['emailBody']) ;

	   $("#body_product_id").on('change', function(){
		   
		   var productId = $(this).val();
		   var productName = $(this).find(':selected').attr('data-name');
		   var subject = productName + ' - Review';
           if(productName == 'Server Center') subject = 'Phone Bill';
		   $('#emailFrom').html(emailConfig[productId]);
		   $('#subject').val(subject);
		
	   $('#review_body').val(emailBody[productId]);
        editorInstance.setData(emailBody[productId]);
		   $('#preview').show();


	   });

	   $('#preview').on('click', function(){
			var productId = $("#body_product_id").val();
			$(".loading").show();
			$.ajax({
			url:"{{ url('admin/review/emailtemplate') }}/"+productId,
			method:"post",
			data:{'body': CKEDITOR.instances['review_body'].getData()},
			success:function(data){
				$('#previewModal .modal-body').html(data);  
				$('#previewModal').modal('show');
				$(".loading").hide();
			}
			});
	   })
    });
	
    $.ajaxSetup({
        headers: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
<script type="text/javascript">
	
		/*jQuery.validator.addMethod("alphanumeric", function(value, element) {
			return this.optional(element) || /^\w+$/i.test(value);
		}, "Letters, numbers, and underscores only please c");
		*/

	// Product Form Validation
	$( "#addnewuser" ).validate( {
		    ignore: [],
		rules: {
			'products[]': {
				required: true
			},
			'attachment[]': {
				required: false,
			},
			subject: {
				required: true
				//alphanumeric: true
				
			},
			review_body: {
				required: function(textarea) {
					CKEDITOR.instances[textarea.id].updateElement(); // update textarea
					var editorcontent = textarea.value.replace(/<[^>]*>/gi, ''); // strip tags
					return editorcontent.length === 0;
				}
			},
			
			isActive: {
				required: true
			},				
			
		},
		messages: {
			'products[]': {
				required: "Please select product"
			},
			'customer[]': {
				required: "Please select Customer"
			},
			question: {
				required: "Please enter your Subject"
				
			},
			review_body:{
                        required:"Please Enter Text"


                    },
			isActive: {
				required: "Please select status"
			},
		},
		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>

<script type="text/javascript">
	 $(function () { 
        // Products
        $("#products").select2({
            closeOnSelect: true,
            placeholder: 'Products',
        
         }).on('change', function(){
		 });
        
        $("#customer").select2({
        	 closeOnSelect: true,
            placeholder: 'Customer',
        });

        });
</script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
			  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
		  });
  </script>
@endsection