@extends('layouts.master')

@section('title', \Lang::get('forum.thread'))

@section('css')
<style type="text/css">
	.morecontent span {
		display: none;
	}

	.post-comments .media {
		border-left: 1px dotted grey;
		border-bottom: 1px dotted grey;
		margin-bottom: 5px;
		padding-left: 10px;
	}

</style>
@stop

@section('content')
<div class="container" style="margin-top: 1%; min-height: 60%">
	<div class="thread-title"><h3><a href="/forum">@lang('forum.topic_list')</a> &rsaquo; <a href="/forum/{{ $thread['result']['topic_id'] }}/thread">{{ $topic['result']['name'] }}</a> &rsaquo; {{ $thread['result']['name'] }}</h3></div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<div class="panel-title">
				<div class="pull-right">
					<i class="glyphicon glyphicon-calendar"></i> {{ date('Y-m-d', strtotime($thread['result']['created_at'])) }} , <i class="glyphicon glyphicon-time"></i> {{ date('H:i a', strtotime($thread['result']['created_at'])) }}
				</div>
				@lang('forum.posts')
			</div>
		</div>
		<div class="row panel-body">
			<div class="col-md-9 text-justify" style="padding-right:20px; border-right: 1px solid #ccc;">
				<h2>{{ $thread['result']['name'] }}</h2>
				<hr>
				<div class="content-body">
					{!! $thread['result']['value'] !!}
				</div>
			</div>

			<div class="col-md-3 text-center">
				<div class="well">
					<img class="img-rounded img-responsive center-block" src="{{ isset($thread['result']['user_profile_picture']) ? $thread['result']['user_profile_picture']['url'] : URL::asset('public/images/default-user-image.png') }}" style="border-radius: 50%;">
				</div>
			</div>
		</div>
		<div class="panel-footer">
			<i class="glyphicon glyphicon-share-alt"></i><a style="cursor: pointer;" data-toggle="collapse" data-target="#new_reply" aria-expanded="false"> @lang('global.reply') </a>
			@if($thread['result']['user_id'] == $GLOBALS['user']['result']['id'])
			|<i class="glyphicon glyphicon-edit"></i><a href="{{ $thread['result']['id'] }}/edit"> @lang('forum.edit_post') </a>
			@endif
		</div>
	</div>

	<div class="post-comments">
		<div class="collapse" id="new_reply">
			<div class="form-group">
				<label for="comment">@lang('forum.your_comment')</label>
				<textarea name="comment" class="form-control" rows="3"></textarea>
				<input type="hidden" name="post_id" value="0">
			</div>
			<button type="submit" class="btn btn-default post-reply">@lang('global.reply')</button>
		</div>

		<div class="comments-nav">
			<ul class="nav nav-pills">
				<li><a>@lang('forum.there_are') {{ ($post['status'] == 200) ? $post['total_comments'] : 0 }} @lang('forum.comments')</a></li>
				{{-- <li role="presentation" class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
						There are {{ $post['total_comments'] }} comments <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">Best</a></li>
						<li><a href="#">Hot</a></li>
					</ul>
				</li> --}}
			</ul>
		</div>
		<div class="replied-box">
			@if(!empty($post['result']))
			@foreach($post['result'] as $post)
			@include('forum.partials.post', ['post' => $post, 'target' => 'load'])
			@endforeach
			@endif
		</div>
	</div>
</div>
@stop

@section('javascript')
<script type="text/javascript"> 
	var showChar = 800;
	var ellipsestext = "...";
	var moretext = "@lang('global.show_more')";
	var lesstext = "@lang('global.hide')";
	$('.content-body').each(function() {
		var content = $(this).html();

		if(content.length > showChar) {

			var c = content.substr(0, showChar);
			var h = content.substr(showChar, content.length - showChar);

			var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink btn btn-primary btn-xs">' + moretext + '</a></span>';

			$(this).html(html);
		}

	});

	$(".morelink").click(function(){
		if($(this).hasClass("less")) {
			$(this).removeClass("less");
			$(this).html(moretext);
		} else {
			$(this).addClass("less");
			$(this).html(lesstext);
		}
		$(this).parent().prev().toggle();
		$(this).prev().toggle();
		return false;
	});

	$('[data-toggle="collapse"]').on('click', function() {
		var $this = $(this),
		$parent = typeof $this.data('parent')!== 'undefined' ? $($this.data('parent')) : undefined;
		if($parent === undefined) { 
			$this.find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
			return true;
		}

		var currentIcon = $this.find('.glyphicon');
		currentIcon.toggleClass('glyphicon-plus glyphicon-minus');
		$parent.find('.glyphicon').not(currentIcon).removeClass('glyphicon-minus').addClass('glyphicon-plus');

	});

	$('body').on('click', '.post-reply', function(){
		var button = $(this);
		var button_text = button.text();
		var post_id = button.prev().find('input[name=post_id]').val();
		var reply_text = button.prev().find('textarea').val();
		if(reply_text.length == 0){
			notification(@lang('global.comment_cannot_be_empty'), "Danger");
			return false;
		}
		$.ajax({
			url: '{{ url()->current() }}/post/create',
            type: 'POST',
            data: {
            	reply: reply_text,
            	post_id: post_id,
            	_token: "{{ csrf_token() }}"
            },
            beforeSend: function(){
                button.html('<img height="20px" width="20px" src="{{ URL::asset('public/images/loading-spinner.gif') }}"/>');
                button.attr('disabled', true);
            },
            success:function(data){
                button.html(button_text);
                button.attr('disabled', false);
                if(data.status == 200){
                    notification("@lang('forum.sucessfully_replied')", "Success");
                    if(post_id == 0){
                    	$(".replied-box").prepend(data.view);
                    }else{
                    	button.parents('.comment-meta').after(data.view);
                    }
                    button.prev().find('textarea').val('');
                }else{
					notification("[error_perform]", "Danger");
                }
            },
			error: function(xhr, exception){
				button.html(button_text);
                button.attr('disabled', false);
				if(xhr.status == 401){
					notification("@lang('global.401_error')", "Danger");
				}else{
					notification("[error_perform]", "Danger");
				}
			}
        });
	});
</script>
@stop