@extends('layout.master')

@section('title')
  {{ $post->title }} -
@endsection

@section('content')
  <h2>{{ $post->title }}</h2>
  <div>
    <span class="text-secondary">Published at: {{ $post->create_at }}</span>,
    <span class="text-secondary">Author: <a href="/user/{{ $post->author }}" class="text-info">{{ $post->author }}</a></span>
    @if(isset($_SESSION['is_auth']) && $post->author == $_SESSION['username'])
      <a href="/post/{{ $post->id }}/edit" class="text-primary">Edit</a>
      <a href="#" class="text-danger" data-toggle="modal" data-target="#confirm-modal">Delete</a>
      <div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog" aria-labelledby="confirm-label" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="confirm-label">Confirmation</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              Are you sure you want to delete this post?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
              <form method="POST" action="/post/{{ $post->id }}/delete">
                <input type="hidden" name="_token" value="{{ $_SESSION['_token'] }}">
                <button type="submit" class="btn btn-danger">Yes</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    @endif
  </div>
  <article id="content">
    @markdown($post->content)
  </article>
  @if(count($tags))
    <div class="tags text-right">
      @foreach($tags as $key => $tag)
        <a href="/tag/{{ $tag->id }}" class="text-info">{{ $tag->keyword }}</a>
        @if($key < count($tags) - 1),@endif
      @endforeach
    </div>
  @endif
@endsection

@section('comments')
  <div class="comments">
    @if(isset($comment_errors))
      <ul class="errors alert alert-danger">
        @foreach($comment_errors as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    @endif
    @if(isset($_SESSION['is_auth']))
      <form method="POST" action="/comment/create" class="comment-form">
        <input type="hidden" name="_token" value="{{ $_SESSION['_token'] }}">
        <input type="hidden" name="post_id" value="{{ $post->id }}">
        <div class="form-group">
          <textarea name="content" rows="1" class="form-control"></textarea>
        </div>
        <button type="submit" class="btn btn-primary float-right">Comment</button>
      </form>
    @endif
    @if(count($comments))
      <h3>{{ $post->num_of_comments }} {{ $post->num_of_comments > 1 ? 'comments' : 'comment' }}:</h3>
      @foreach($comments as $comment)
        <img src="https://www.gravatar.com/avatar/{{ md5(strtolower(trim($comment->email))) }}?s=50&d=mm&r=pg" class="avatar">
        <div>
          <h5>{{ $comment->author }}</h5>
          <span class="text-secondary">{{ $comment->create_at }}</span>
          @if(isset($_SESSION['is_auth']))
            @if($comment->author == $_SESSION['username'])
              <a href="#" class="text-primary" data-toggle="modal" data-target="#comment-edit-modal" data-action="/comment/{{ $comment->id }}/edit">Edit</a>
            @endif
            @if($post->author == $_SESSION['username'])
              <a href="#" class="text-danger" data-toggle="modal" data-target="#comment-confirm-modal" data-action="/comment/{{ $comment->id }}/delete">Delete</a>
            @endif
          @endif
        </div>
        <p>{!! nl2br(e($comment->content)) !!}</p>
      @endforeach
      <div class="modal fade" id="comment-confirm-modal" tabindex="-1" role="dialog" aria-labelledby="confirm-label" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="comment-confirm-label">Confirmation</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              Are you sure you want to delete this comment?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
              <form method="POST" action="" id="delete-form">
                <input type="hidden" name="_token" value="{{ $_SESSION['_token'] }}">
                <input type="hidden" name="post_id" value="{{ $post->id }}">
                <button type="submit" class="btn btn-danger">Yes</button>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="comment-edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-label" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="comment-edit-label">Edit Comment</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form method="POST" action="" id="comment-edit-form">
              <input type="hidden" name="_token" value="{{ $_SESSION['_token'] }}">
              <input type="hidden" name="post_id" value="{{ $post->id }}">
              <div class="modal-body">
                <div class="form-group">
                  <textarea name="content" rows="3" class="form-control"></textarea>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Edit</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    @endif
  </div>
@endsection