@extends('layouts.mypage')

@section('page-header')
<h1 class="page-header">{{$story->user->firstname}} {{$story->user->lastname}} Story</h1>
@endsection


@section('content')
<style >

</style>

@if (Auth::check())
<div class="panel">
	<div class="panel-heading pl10">
		<span class="panel-title">
		Write Form
		</span>
	</div>
	<div class="panel-body pn pt20">
		<div class="admin-form theme-system" style="padding:16px;">
			<div class="section" id="spy2">
			<label for="story_img" class="field file">
			<span class="button btn-default"> Choose File </span>
			<input type="file" class="gui-file" name="story_img" id="story_img" onchange="document.getElementById('uploader1').value = this.value;">
			<input type="text" class="gui-input" id="uploader1" placeholder="no file selected" readonly="">
			</label>
			</div>

			<div class="section" id="spy3">
			<label for="comment" class="field prepend-icon">
			<textarea class="gui-textarea" id="comment" name="comment" placeholder="Your comment" aria-required="true" aria-invalid="false"></textarea>
			<label for="comment" class="field-icon">
			<i class="fa fa-comments"></i>
			</label>
			</label>
			</div>

			<div class="text-right">
			<button id="btn_story_write" class="button btn-system submit-btn">Write Story</button>
			</div>
		</div>
	</div>
</div>
@endif
			@foreach($stories as $story)
			<div class="social-feed-box" data-id="{{ $story->id }}" >

				<div class="pull-right social-action dropdown">
					<button data-toggle="dropdown" class="dropdown-toggle btn-white btn-xs" aria-expanded="false">
						<i class="fa fa-angle-down"></i>
					</button>
					<ul class="dropdown-menu m-t-xs">
						<li><a href="javascript:" class="btn_story_delete">Delete</a></li>
					</ul>
				</div>
                <div class="social-avatar">
                    <a href="" class="pull-left">
                        <img alt="image" src="http://fadmin.flybook.kr/bk/img/a1.jpg">
                    </a>
                    <div class="media-body">
                        <a href="#">
						{{ $story->user->firstname }} {{ $story->user->lastname }}
                        </a>
                        <small class="text-muted">{{ substr($story->created_at, 11, 5) }} - {{ str_replace('-', '.', substr($story->created_at, 0, 10)) }}</small>
                    </div>
                </div>
                <div class="social-body">
					@if($story->story_img)
					<p><img src="{{ $story->story_img }}" style="width:100%;" /></p>
					@endif
                    <p>
					{!! nl2br($story->comment) !!}
                    </p>
					<div class="media-links">
					  <a href="#" class="mr10 text-muted">
						<span class="fa fa-thumbs-o-up mr5"></span> Like </a>
					</div>
                </div>
                <div class="social-footer">
					@foreach($story->comments as $comment)
                    <div class="social-comment">
                        <a href="" class="pull-left">
                            <img alt="image" src="http://fadmin.flybook.kr/bk/img/a1.jpg">
                        </a>
                        <div class="media-body">
                            <a href="#">
							{{ $comment->user->firstname }} {{ $comment->user->lastname }}
                            </a>
                            {!! nl2br($comment->comment) !!}
							<br /><small class="text-muted">{{ str_replace('-', '.', substr($comment->created_at, 0, 10)) }}</small>
                        </div>
                    </div>
					@endforeach

					@if (Auth::check())
                    <div class="social-comment" style="position:relative;">
						{{ csrf_field() }}
                        <a href="" class="pull-left">
                            <img alt="image" src="http://fadmin.flybook.kr/bk/img/a1.jpg">
                        </a>
                        <div class="media-body" style="padding-right: 70px;">
                            <textarea class="form-control" placeholder="Write comment..."></textarea>
                        </div>
						<button type="submit" class="button btn-default submit-btn" style="position:absolute;right:0;top:0;width:70px;height:54px;border:none;border:solid 1px #c3c3c3;">Write</button>
                    </div>
					@endif

                </div>

            </div>
			@endforeach
@endsection



@section('script')
	@include('script.comment')
@endsection