@extends('layouts.app_discussion')

@section('content')


<div class="container">
    <div class="row">
        <div class="col-md-3">
            @include('includes/dashboard/left_menu')
        </div>
        <div class="col-md-9 h-100">
          
            <div class="col-lg-12">
                <div class="wrapper wrapper-content animated fadeInRight pb-4">
                    <div class="ibox-content forum-container">
                        <div class="forum-title">
                            <div class="pull-right forum-desc">   
                            </div>
                            @include('discussion_forum/include/title')
                            {{-- {{ Breadcrumbs::render('discussions', $post) }} --}}
                        </div>
                        {{-- <div class="forum-item active">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="forum-icon">
                                        <i class="fa fa-shield"></i>
                                    </div>
                                    <a href="" class="forum-item-title">{{ $post['thirdlevel']['FocusAreaAccountabilities']['FocusArea']['fa_full_form']}}</a>
                                    <div class="forum-sub-title">{{ $post['thirdlevel']['FocusAreaAccountabilities']['FocusArea']['description'] }}</div>
                                    <div class="d-flex justify-content-between">
                                      <div>
                                        <a href="" class="forum-item-title forum-sub-title mt-2">{{ $post['thirdlevel']['FocusAreaAccountabilities']['accountabilities']}}</a>
                                      </div>
                                      <div class="row">
                                        <div class="col-auto my-auto">
                                          <i class="fa fa-wrench" aria-hidden="true"></i>
                                        </div>
                                        <div class="col-auto my-auto">
                                          <i class="fa fa-calendar-o" aria-hidden="true"></i>
                                        </div>
                                        <div class="col-auto my-auto">
                                          <i class="fa fa-file-o" aria-hidden="true"></i>
                                        </div>
                                      </div>
                                    </div>
                                    
                                    <div class="forum-sub-title">{{ $post['thirdlevel']['FocusAreaAccountabilities']['description'] }}</div>
                                    
                                    <div class="d-flex justify-content-between">
                                      <div>
                                        <a href="" class="forum-item-title forum-sub-title mt-2">{{ $post['thirdlevel']['subject']}}</a>
                                      </div>
                                      <div class="row">
                                        <div class="col-auto my-auto">
                                          <i class="fa fa-wrench" aria-hidden="true"></i>
                                        </div>
                                        <div class="col-auto my-auto">
                                          <i class="fa fa-calendar-o" aria-hidden="true"></i>
                                        </div>
                                        <div class="col-auto my-auto">
                                          <i class="fa fa-file-o" aria-hidden="true"></i>
                                        </div>
                                      </div>
                                    </div>
                                    
                                  </div>
                            </div>
                        </div> --}}

                        <div class="my-4">
                          <div class="fw-xs font-sm text-muted">
                            <img class="img-fluid img-responsive rounded-circle mr-2" src="https://i.imgur.com/qdiP4DB.jpg" width="38">
                            <span class="text-sm text-secondary fw-bold">{{Auth::user()->email}}</span>
                          </div>
                          {!! html_entity_decode( $post->post) !!} 
                          @include('admin/fourthleveltopic/attachments',['attachments'=>$post['postAttachments']])
                          <div class="d-flex align-items-end mb-3">
                            <div class="col-md-12">
                              <div class="row">
                                    <div class="col-auto pr-1 "><i class="fa fa-thumbs-o-up text-primary"></i><span class="text-primary"> {{$post->post_likes_count}}</span></div>
                                    <div class="col-auto  px-1"><i class="fa fa-heart-o text-primary"></i><span class="text-primary"> {{$post->post_loves_count}}</span></div>
                                    <div class="col-auto  px-1"><i class="fa fa-comment-o text-primary"></i><span class="text-primary"> {{ $post->member_post_count  }}</span></div>
                                    <div class="col-auto  px-1"><i class="fa fa-eye text-primary"></i> <span class="text-primary">{{ $post->post_views_count  }}</span> </div>
                               
                                <div class="col d-flex justify-content-end"> 
                                  <div class=""><i class="ion-ios-eye-outline icon-1x"></i> <small class="d-block text-sm text-primary">Posted on: {{ \App\Helpers\Helper::formatDateTime($post->created_at);}}</small></div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div> 
                       
                        @foreach($post->memberPost as $memberPost)
                          <div class="card row-hover pos-relative py-3 px-3 mb-3">
                            <div class="fw-bold">
                              <small class="fw-xs">
                                <img class="img-fluid img-responsive rounded-circle mr-2" src="https://i.imgur.com/qdiP4DB.jpg" width="38">
                                <span class="text-sm text-secondary fw-bold">{{ $memberPost->member->name}}</span>
                                  
                              </small>
                            </div>
                            {!! html_entity_decode($memberPost->member_post) !!}
                            <div class="d-flex align-items-end">
                              <div class="col-md-12">
                                <div class="row">
                                  <div class="col-auto"> <i class="ion-connection-bars icon-1x"></i> <small class="d-block text-sm text-primary">0 likes</small> </div>
                                  <div class="col-auto"> <i class="ion-ios-chatboxes-outline icon-1x"></i> <small class="d-block text-sm text-primary">Comments</small> </div>
                                  <div class="col-auto"> <i class="ion-ios-eye-outline icon-1x"></i> <small class="d-block text-sm text-primary">0 Views</small> </div>
                                
                                  <div class="col d-flex justify-content-end"> 
                                    <div class=""><i class="ion-ios-eye-outline icon-1x"></i> <small class="d-block text-sm text-primary">Posted on: {{ \App\Helpers\Helper::formatDateTime($post->created_at);}}</small></div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            {{-- <div class="col-md-4 op-7">
                              <div class="row op-7">
                              <div class="col"> <i class="ion-connection-bars icon-1x"></i> <small class="d-block text-sm text-primary">141 likes</small> </div>
                              <div class="col"> <i class="ion-ios-chatboxes-outline icon-1x"></i> <small class="d-block text-sm text-primary">122 Replys</small> </div>
                              <div class="col"> <i class="ion-ios-eye-outline icon-1x"></i> <small class="d-block text-sm text-primary">290 Views</small> </div>
                              </div>
                            </div> --}}
                          </div>
                        @endforeach
                        <div id="editor" style="height:150px"></div>  
                        <div class="col mt-3">
                          <input type="hidden" id="discussion_post_id" value={{ $discussion_post_id }}>
                          {{-- <textarea class="form-control form-control-sm" id="member_post" placeholder="Add Comments..."></textarea> --}}
                        </div>
                        <div class="col-auto ms-auto d-flex justify-content-end py-2">
                          <a class="btn btn-outline-primary btn-rounded btn-sm px-4" id="btnAddComment">Add Comment</a>
                        </div>
                    </div>
                </div>
            </div>                   
          </div>
        </div>
@endsection

<script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>


<script>
  var APP_URL  = "{{ url('')}}";
  $(document).ready(function() {
    $(document).on("click", "#btnAddComment", function (e) {
      var myEditor = document.querySelector('#editor')
      var post = myEditor.children[0].innerHTML


      $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Posting...')
       $.ajaxSetup({
               headers: {
                   'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
               }
           });   
           e.preventDefault();
           $.ajax({
               data:{member_post: post, discussion_post_id:  $('#discussion_post_id').val()},
               url: APP_URL + "/discussion-forum/addComment",
               type: "POST",
               dataType:"json",
               beforeSend: function(){
                  
               },
               success: function(result) {
                  $('#member_post').val('');
                   location.reload();
               },
               error:function (response){
                 
                 
               },
               complete:function(data){
                  
               }
           });
   });
      $(document).on("click", ".img-focus", function (e) {
        var attachment_id = $(this).attr('attachment-id');
        var post_id = $(this).attr('post-id');
        $.ajaxSetup({
            headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                data: {attachment_id: attachment_id },
                url: APP_URL + "/discussion-forum/get-attachment",
                type: "POST",
                dataType: 'json',
                success: function(result) {
                  $('#post'+result.data.discussion_post_id).attr('src', APP_URL+'/attachments/'+result.data.file_name )
                },
                complete:function(data){}
            });  
      })
    
  });
</script>
 <style>
     .dashboard-pg .card{
        background-image: url('{{url('/assets/images/Ellipse 156.png')}}');
         background-color: #f0f0f0;
         background-repeat: no-repeat;
         background-position-x: center;
         margin-bottom: 20px;
         padding: 10px;
     }

.white-bg {
    background-color: #ffffff;
}
.page-heading {
    border-top: 0;
    padding: 0 10px 20px 10px;
}

.forum-post-container .media {
  margin: 10px 10px 10px 10px;
  padding: 20px 10px 20px 10px;
  border-bottom: 1px solid #f1f1f1;
}
.forum-avatar {
  float: left;
  margin-right: 20px;
  text-align: center;
  width: 110px;
}
.forum-avatar .img-circle {
  height: 48px;
  width: 48px;
}
.author-info {
  color: #676a6c;
  font-size: 11px;
  margin-top: 5px;
  text-align: center;
}
.forum-post-info {
  padding: 9px 12px 6px 12px;
  background: #f9f9f9;
  border: 1px solid #f1f1f1;
}
.media-body > .media {
  background: #f9f9f9;
  border-radius: 3px;
  border: 1px solid #f1f1f1;
}
.forum-post-container .media-body .photos {
  margin: 10px 0;
}
.forum-photo {
  max-width: 140px;
  border-radius: 3px;
}
.media-body > .media .forum-avatar {
  width: 70px;
  margin-right: 10px;
}
.media-body > .media .forum-avatar .img-circle {
  height: 38px;
  width: 38px;
}
.mid-icon {
  font-size: 66px;
}
.forum-item {
  margin: 10px 0;
  padding: 10px 0 20px;
  border-bottom: 1px solid #f1f1f1;
}
.views-number {
  font-size: 24px;
  line-height: 18px;
  font-weight: 400;
}
.forum-container,
.forum-post-container {
  /* padding: 30px !important; */
}
.forum-item small {
  color: #999;
}
.forum-item .forum-sub-title {
  color: #999;
  margin-left: 50px;
}
.forum-title {
  margin: 15px 0 15px 0;
}
.forum-info {
  text-align: center;
}
.forum-desc {
  color: #999;
}
.forum-icon {
  float: left;
  width: 30px;
  margin-right: 20px;
  text-align: center;
}
a.forum-item-title {
  color: inherit;
  display: block;
  font-size: 18px;
  font-weight: 600;
}
a.forum-item-title:hover {
  color: inherit;
}
.forum-icon .fa {
  font-size: 30px;
  margin-top: 8px;
  color: #9b9b9b;
}
.forum-item.active .fa {
  color: #0B9D9E;
}
.forum-item.active a.forum-item-title {
  color: #0B9D9E;
}
.forum-item.active h6 {
  color: #616161;
  font-weight: bold
}
@media (max-width: 992px) {
  .forum-info {
    margin: 15px 0 10px 0;
    /* Comment this is you want to show forum info in small devices */
    display: none;
  }
  .forum-desc {
    float: none !important;
  }
}





.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox.collapsed .ibox-content {
  display: none;
}
.ibox.collapsed .fa.fa-chevron-up:before {
  content: "\f078";
}
.ibox.collapsed .fa.fa-chevron-down:before {
  content: "\f077";
}
.ibox:after,
.ibox:before {
  display: table;
}
.ibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 3px 0 0;
  color: inherit;
  margin-bottom: 0;
  padding: 14px 15px 7px;
  min-height: 48px;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  /* padding: 15px 20px 20px 20px; */
  border-color: #e7eaec;
  border-image: none;
  border-width: 1px 0;
}
.ibox-footer {
  color: inherit;
  border-top: 1px solid #e7eaec;
  font-size: 90%;
  background: #ffffff;
  padding: 10px 15px;
}

.message-input {
    height: 90px !important;
}
.form-control, .single-line {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    font-size: 14px;
}
.text-navy {
    color: #0B9D9E;
}
.mid-icon {
    font-size: 66px !important;
}
.m-b-sm {
    margin-bottom: 10px;
}
</style>