@extends('account.base')

@section('title', 'Chat')

@section('account_content')
@php($version = \Illuminate\Support\Facades\Config::get('app.version'))

<link rel="stylesheet" href="{{ asset('css/conversations.css') }}?{{$version}}" />
<script type="text/javascript" src="{{asset('plugins/galpop/js/jquery.galpop.js')}}?{{$version}}"></script>

<link type="text/css" rel="stylesheet" href="{{asset('plugins/galpop/css/jquery.galpop.css')}}?{{$version}}" media="screen" />
<link type="text/css" rel="stylesheet" href="{{asset('plugins/galpop/css/galpop-diy.css')}}?{{$version}}" media="screen" />

<div id="account-base">
	@include('chat::account_left')
	<div class="right_grid">
		<div class="mail">
			<span>{{$detail[0]->title}}</span>
		</div>
		<div class="calendar">
			<div class="calendar_left">
				<img src="{{config('locations.chatImage.asset').'adviser.png'}}" />
				<span>{{$detail[0]->sendUser}}</span>
			</div>
			<div class="calendar_right">
				<span>
					{{$detail[0]->createTime}}
				</span>
			</div>
		</div>
		<div class="file">
			<p>{{$detail[0]->title}}</p>
			<p>
				{!!$detail[0]->body!!}
			</p>
			
		</div>
		<div class="Enclosure">
			<div class="Enclosure_text">
				<p>
					<span>{{count($detail['documents'])}}</span>
					<span>{{ __('Attachment') }}</span>
				</p>
				{{--<img src="{{config('locations.chatImage.asset').'qunimg.png'}}" />--}}
			</div>
			<div class="Enclosure_img">
				@if(count($detail['documents']) > 0)
				@foreach($detail['documents'] as $one)
				<div class="ENC">
					<a class="galpop-single" data-galpop-group="gallery" href="{{empty($one->thumbnailPath) ? config('locations.customerDocument.asset').$one->filePath : config('locations.customerDocumentThumbnail.asset').$one->thumbnailPath}}">
						<img src="{{empty($one->thumbnailPath) ? config('locations.customerDocument.asset').$one->filePath : config('locations.customerDocumentThumbnail.asset').$one->thumbnailPath}}" />
					</a>
					<div class="Enclosure_img_div">
						<img src="{{config('locations.chatImage.asset').'img26_26.png'}}" />
						<span style="width:150px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{$one->name}}</span>
					</div>	
					<div id="zhe" class="zhe">
						<div class="zhe_text">
							<img src="{{config('locations.chatImage.asset').'img26_26.png'}}" />
							<span style="width:150px;overflow: hidden;white-space: wrap;">{{$one->name}}</span>
						</div>
						<div class="zhe_img">
						    <a href="{{config('locations.customerDocument.asset'). $one->filePath }}" download>
							
							<img src="{{config('locations.chatImage.asset').'xia.png'}}" />
							</a>
						</div>
					</div>
				</div>
				@endforeach
				@endif
		
			</div>
			@if(empty($detail[0]->isNotification))
			<div class="Enclosure_onclic">
			<button class="btn_fu">
				<img src="{{config('locations.chatImage.asset').'Reply.png'}}" style="margin-left: 5%;" />
				<span>
					{{ __('Quick reply') }}
				</span>
			</button>
<!-- 			<button class="btn1 btn_dele"> -->
<!-- 				<img src="{{config('locations.chatImage.asset').'delete.png'}}" /> -->
<!-- 				<span> -->
<!-- 				 删除 -->
<!-- 				</span> -->
<!-- 			</button> -->
			</div>
			@endif
		</div>
		<div class="Reply">
			<div class="iot">
				<img src="{{config('locations.chatImage.asset').'Own.png'}}" />
			</div>
			<div class="iod">
				
				<div class="iod_one">
					<img src="{{config('locations.chatImage.asset').'Reply.png'}}" class="pio" />
					<span></span>
				</div>
				<form id="replyForm" method="post" action="/account/Chat/replay">
					<input type="hidden" name="messageID" value="{{$detail[0]->messageID}}">
					<input type="hidden" name="abc" value="">
					<input type="hidden" name="documentsID" id="replayDocumentsID" value="">
					{{ csrf_field() }}
				<div class="iod_tow">
					<div>
					<textarea name="body" style="width:700px;height:163px;" minlength="2"></textarea>
					</div>
				</div>
				</form>
				{{--<a class="btn">--}}
          			{{--<div class="button" onclick="show_upload_document_modal('replay')">{{ __('Uploading attachments') }}</div>--}}
          		{{--</a>--}}
				<div class="iod_Three" id="iod_Three">
					
				</div>
				<div class="iod_Four">
					<div class="iod_left">
						  <div class="actions" style="text-align: left;">
						    <div class="ui yellow button" style="height: 30px;margin-left: 1%;" id="ol_img">
								{{ __('Send') }}
						    </div>
<!-- 						    <div class="img_so"> -->
<!-- 						     <img src="{{config('locations.chatImage.asset').'Typeface.png'}}" /> -->
<!-- 						     <img src="{{config('locations.chatImage.asset').'Enclosure.png'}}" /> -->
<!-- 						     <img src="{{config('locations.chatImage.asset').'link.png'}}" /> -->
<!-- 						     <img src="{{config('locations.chatImage.asset').'Expression.png'}}" /> -->
<!-- 						     <img src="{{config('locations.chatImage.asset').'picture.png'}}" /> -->
<!-- 						     <img src="{{config('locations.chatImage.asset').'video.png'}}" /> -->
<!-- 						     <img src="{{config('locations.chatImage.asset').'form.png'}}" /> -->
<!-- 						     <img src="{{config('locations.chatImage.asset').'map.png'}}" /> -->
<!-- 						     <img src="{{config('locations.chatImage.asset').'code.png'}}" /> -->
<!-- 						     <img src="{{config('locations.chatImage.asset').'mark.png'}}" /> -->
<!-- 						    </div> -->
						  </div>
					</div>
<!-- 					<div class="iod_right"> 
						<img src="{{config('locations.chatImage.asset').'cg.png'}}" style="margin-left: 40%;"/>
						<img src="{{config('locations.chatImage.asset').'delete.png'}}" style="margin-left: 10%;"/>
 					</div> -->
				</div>
			</div>
			
		</div>
		@foreach($replay as $one)
		<div class="Other">
			<div class="Other_div">
				<div class="Other_div_left">
					<img src="{{config('locations.chatImage.asset').'adviser.png'}}">
				</div>
				<div class="Other_div_right">
					<div class="other_header">
						<span style="font-weight: bold;">{{$one->userName}}</span>
						<span>{{$one->created_at}}</span>
					</div>
					<div class="other_text">
						<span style="width: 100%;">
							{!!htmlspecialchars_decode($one->body)!!}
						</span>
					</div>
				</div>
			</div>
		</div>
		@endforeach
    </div>
</div>
   
  	<script>
	$(document).ready(function () {
        $('.galpop-single').galpop();
		$("#replyForm").validate({
  		    rules: {
  		      body: {
  		        required: true,
  		      	maxlength:1200
  		      }
  		    },
  		    messages: {
  		      body: {
  		        required: "{{ __('Reply content empty') }}",
      		    maxlength:"{{ __('Reply content length') }} 1200"
  		      }
  		    },
  		   	showErrors: function(errorMap, errorList) {  
                var msg = "";  
                $.each( errorList, function(i,v){ 
                  msg += (v.message+"\r\n");  
                });  
                if(msg!="") //alert(msg);
                layer.msg(msg, {time: 2000,icon: 2});
  	        },
  	      	onfocusout: false  
		})
  	    $('#replyForm').ajaxForm(function(data) {
  	        if(data == true){
  	        		layer.msg("{{ __('Reply success') }}", {time: 2000,icon: 1},function(){
  	        			window.location.reload();
  	  	        });
  	        }else{
  	        		layer.msg("{{ __('Reply fail') }}", {time: 2000,icon: 2});
  	        }
  	    }); 
  	});
  	
  	$(".ENC").mouseover(function() {
	//$("#zhe").css("top", "60px") 
	//$(".Enclosure_img_div").css("display", "none")
	})
  	$(".ENC").mouseout(function() {
	//$("#zhe").css("top", "200px") 
	//$(".Enclosure_img_div").css("display", "block")
	$("Reply").hide();
//	$(".Enclosure_onclic").css("display", "none")
	})
  	
  	$(".btn_fu").click(function(){
  		
       $(".Reply").show(1000);
       $(".Enclosure_onclic").hide();
  	})
	$(".pio").click(function(){
		$(".Reply").hide(1000);
		$(".Enclosure_onclic").show();
	})
  	
  	$("#ol_img").click(function(){
  		$("#replayDocumentsID").val($("#documentsID").val());
		//$("#ol_img").unbind();
  		$("#replyForm").submit();
  	})
  	
  	$(".btn_dele").click(function(){
  		$(".Reply").attr("display","none")
  	})
  	
  	</script>
		

@endsection