@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">
        <div class="wrapper wrapper-content animated fadeInRight" style="min-height: 625px">
          <div class="ibox-content forum-container h-100">
              <div class="forum-title">
                  <div class="pull-right forum-desc">   
                  </div>
                  @include('discussion_forum/include/title')
                  {{ Breadcrumbs::render('fourth-level', $title) }}
              </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">{{ $title->FocusAreaAccountabilities->FocusArea->fa_full_form}}</a>
                          <div class="forum-sub-title">{{ $title->FocusAreaAccountabilities->FocusArea->description}}</div>
                          <div class="d-flex justify-content-between">
                            <div>
                            <a href="" class="forum-item-title forum-sub-title mt-2">
                                {{ $title->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">{{ $title->FocusAreaAccountabilities->description}}</div> --}}
            
                          <div class="d-flex justify-content-between">
                            <div>
                              <a href="{{url($role.'/discussion-forum/topic?key_title='.\App\Helpers\Helper::encriptId($title->focus_area_id))}}" class="forum-item-title  pb-2">{{ $title['accountabilities'] }}</a>
                            </div>
                            <div class="row">
                              <div class="col-auto my-auto">
                                <a title="ChatConnect" data-groupid="{{ $title->id }}" class="connect-group-chat" href="#"><i class="fa fa-comment-o" aria-hidden="true"></i></a>
                            </div>
                              <div class="col-auto my-auto">
                                <a href="{{url('tools')}}"><i class="fa fa-wrench" title="Tools" aria-hidden="true"></i></a>
                            </div>
                            <div class="col-auto my-auto">
                                <a href="{{ url('events?sub_category='.\App\Helpers\Helper::encriptId($title->id))}}"><i class="fa fa-calendar-o" title="Events" aria-hidden="true"></i></a>
                            </div>
                            <div class="col-auto my-auto">
                              <a href="{{ url('resources?sub_category='.\App\Helpers\Helper::encriptId($title->id))}}">
                                  <i title="Resources" class="fa fa-file-o" aria-hidden="true"></i>
                              </a>
                            </div>
                            </div>
                          </div>
                          <div class="forum-sub-title  pb-2">{{ $title->description}}</div>
                          <div class="row">
                            <div class="col d-flex justify-content-end pb-3">
                              <a data-id="{{ app('request')->input('key_title')}}" class="createFourthLevelButton btn btn-primary btn-rounded btn-sm px-4">Add New Post</a>
                            </div>
                          </div> 
                        
                          @if(app('request')->input('tag'))
                            <div class=""> @include('admin/fourthleveltopic/tagItem')</div>
                          @endif
                          @if(count($topics) == 0)
                            <div class="card row-hover pos-relative px-3 py-3 w-100 mb-3">No post available.</div>
                          @endif
                          <div class="overflow-auto"> @include('admin/fourthleveltopic/post_list')</div>
                        </div>
                        </div>
                        {{ $topics->appends(request()->query())->links() }}
                        {{-- @if(Auth::user()->role == 1) --}}
                          <div class="row">
                            <div class="col d-flex justify-content-end mt-3">
                              <a data-id="{{ app('request')->input('key_title')}}" class="createFourthLevelButton btn btn-primary btn-rounded btn-sm px-4">Add New Post</a>
                            </div>
                          </div> 
                        {{-- @endif --}}
                </div>
              </div>
          </div>      
        </div>
      </div>



    <!-- Modal -->
    <div class="modal" id="fourthLevelModal" tabindex="-1" aria-labelledby="fourthLevelModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered  modal-lg">
        <div class="modal-content">
          <div class="modal-body" id="fourthLevelModalBody"></div>
        </div>
      </div>
    </div>
    <script src="{{ asset('assets/pluggins/inputtag/scripts/choices.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/pluggins/inputtag/styles/choices.min.css') }}" />
    <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() {
        // open create form
        $(document).on("click", ".createFourthLevelButton", function (e) {
            var parent_id = $(this).attr("data-id");
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });   
          
                $.ajax({
                    data:{parent_id: parent_id},
                    url: APP_URL + "/discussion-forum/fourth-level/open-create-form",
                    type: "POST",
                    dataType: 'html',
                    success: function(result) {
                      $('#fourthLevelModal').modal('show');
                      $('#fourthLevelModalBody').html(result);
                    },
                    error:function (response){},
                    complete:function(data){
                        
                    }
              });  
        })
    
        // open reply form
        $(document).on("click", ".createFourthLevelReplyButton", function (e) {
            var discussion_post_id = $(this).attr("discussion-post-id");
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:{discussion_post_id: discussion_post_id},
                    url: APP_URL + "/discussion-forum/fourth-level/open-reply-form",
                    type: "POST",
                    dataType: 'html',
                    success: function(result) {
                      $('#fourthLevelModal').modal('show');
                      $('#fourthLevelModalBody').html(result);
                    },
                    error:function (response){},
                    complete:function(data){
                        
                    }
              });  
        })
    
        // Add post
        $(document).on("click", "#addNewPost", function (e) {
          $('.is-invalid').removeClass('is-invalid');
          $('.invalid-feedback').remove();
          var _this = $(this);
          $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Posting...');
          var parent_id = $('#parent_id').val();
          var myEditor = document.querySelector('#editor_fourth_level')
          var post = myEditor.children[0].innerHTML
          if(post == "<p><br></p>") {
            post = '';
          }
          var data = new FormData();
          jQuery.each(jQuery('#file')[0].files, function(i, file) {
              data.append('file[]', file);
          });
          data.append('post', post);
          data.append('parent_id', parent_id);
          jQuery.each(jQuery('#tag').val(), function(i, tag) {
              data.append('tag[]', tag);
          });
          $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                }); 
                $.ajax({
                    data:data,
                    url: APP_URL + "/discussion-forum/add-post",
                    type: "POST",
                    dataType: 'json',
                    mimeType: 'multipart/form-data',
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function(){
                        
                    },
                    success: function(result) {
                      $('#post').val('');
                        location.reload();
                    },
                    error:function (response){
                      $(_this).html('Add new post')
                      var obj = response.responseJSON.json;
                      $.each(obj, function(key,value) {
                        $('#editor_fourth_level').addClass('is-invalid');
                        $('#editor_fourth_level').after('<div class="invalid-feedback">'+value+'</div>')
                      });
                  },
                    complete:function(data){
                        
                    }
              });
         });
        // End Add post
    
        // Add Reply
        $(document).on("click", ".submitReplyPost", function (e) {
          $('.is-invalid').removeClass('is-invalid');
          $('.invalid-feedback').remove();
          var _this = $(this);
          $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Posting...');
          var discussion_post_id = $('#discussion_post_id').val();
          var myEditor = document.querySelector('#editor_fourth_level')
          var post = myEditor.children[0].innerHTML
          if(post == "<p><br></p>") {
            post = '';
          }
          var data = new FormData();
          jQuery.each(jQuery('#file')[0].files, function(i, file) {
              data.append('file[]', file);
          });
          data.append('post', post);
          data.append('discussion_post_id', discussion_post_id);
          $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });   
          
                $.ajax({
                    data:data,
                    url: APP_URL + "/discussion-forum/add-reply-post",
                    type: "POST",
                    dataType: 'json',
                    mimeType: 'multipart/form-data',
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(result) {
                      $('#post').val('');
                        location.reload();
                    },
                    error:function (response){
                      $(_this).html('Reply post')
                      var obj = response.responseJSON.json;
                      $.each(obj, function(key,value) {
                        $('#editor_fourth_level').addClass('is-invalid');
                        $('#editor_fourth_level').after('<div class="invalid-feedback">'+value+'</div>')
                      });
                  },
                    complete:function(data){
                        
                    }
              });
         });
        // End Add reply
    
        // open edit form
        $(document).on("click", ".btnModalFourthLevel", function (e) {
            var post_id = $(this).attr("post-id");
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });   
          
                $.ajax({
                    data:{post_id: post_id},
                    url: APP_URL + "/discussion-forum/fourth-level/open-update-form",
                    type: "POST",
                    dataType: 'html',
                    success: function(result) {
                      $('#fourthLevelModal').modal('show');
                      $('#fourthLevelModalBody').html(result);
                    },
                    error:function (response){},
                    complete:function(data){
                        
                    }
              });  
          })
          //edit
          $(document).on("click", "#updateFourthLevelTopic", function (e) {
          $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Posting...');
          var post_id = $('#post_id').val();
          var myEditor = document.querySelector('#editor_fourth_level')
          var post = myEditor.children[0].innerHTML
          var data = new FormData();
          jQuery.each(jQuery('#file')[0].files, function(i, file) {
              data.append('file[]', file);
          });
          jQuery.each(jQuery('#tag').val(), function(i, tag) {
              data.append('tag[]', tag);
          });
          data.append('post', post);
          data.append('post_id', post_id);
          $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });   
          
                $.ajax({
                    data:data,
                    url: APP_URL + "/discussion-forum/edit-post",
                    type: "POST",
                    dataType: 'json',
                    mimeType: 'multipart/form-data',
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function(){
                        
                    },
                    success: function(result) {
                        console.log(result);
                        location.reload();
                    },
                    error:function (response){
                      
                      
                    },
                    complete:function(data){
                        
                    }
              });
          });
    
          //delete
          // $(document).on("click", ".deleteFourthLevelTopic", function (e) {
          // $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Deleting...');
          // var post_id = $(this).attr('post-id');
          // $.ajaxSetup({
          //           headers: {
          //               'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
          //           }
          //       });   
          
          //       $.ajax({
          //           data:{post_id : post_id},
          //           url: APP_URL + "/discussion-forum/delete-post",
          //           type: "POST",
          //           dataType: 'json',
          //           beforeSend: function(){
                        
          //           },
          //           success: function(result) {
          //               console.log(result);
          //               location.reload();
          //           },
          //           error:function (response){
                      
                      
          //           },
          //           complete:function(data){
                        
          //           }
          //     });
          // });
    
        //addAttachment form
        $(document).on("click", ".btnModalFourthLevelAttachment", function (e) {
            var post_id = $(this).attr("post-id");
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });   
          
                $.ajax({
                    data:{post_id: post_id},
                    url: APP_URL + "/discussion-forum/fourth-level/open-attachment-form",
                    type: "POST",
                    dataType: 'html',
                    success: function(result) {
                      $('#fourthLevelModal').modal('show');
                      $('#fourthLevelModalBody').html(result);
                    },
                    error:function (response){},
                    complete:function(data){
                        
                    }
              });  
          })
    
          //upload file
        $(document).on("click", "#uploadFourthLevelFile", function (e) {
          $('.is-invalid').removeClass('is-invalid');
          $('.invalid-feedback').remove();
          var _this = $(this);
          $(_this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Uploading...');
          let formData = new FormData();
          var data = new FormData();
          var discussion_post_id = $('#fourthLevelTopicAttachmentForm #discussion_post_id').val();
          jQuery.each(jQuery('#file')[0].files, function(i, file) {
              data.append('file[]', file);
              data.append('discussion_post_id', discussion_post_id);
          });
          $.ajaxSetup({
              headers: {
                      'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                  }
              });
              $.ajax({
                  data: data,
                  url: APP_URL + "/discussion-forum/fourth-level/add-attachments",
                  type: "POST",
                  dataType: 'json',
                  mimeType: 'multipart/form-data',
                  contentType: false,
                  cache: false,
                  processData: false,
                  success: function(result) {
                      location.reload();
                  },
                  error:function (response){
                    $(_this).html('upload')
                    var obj = response.responseJSON.json;
                    $.each(obj, function(key,value) {
                      $('#'+key).addClass('is-invalid');
                      $('#'+key).after('<div class="invalid-feedback">'+value+'</div>')
                    });
                  },
                  complete:function(data){
                      
                  }
              });  
          })
    
          // delete attachment
          $(document).on("click", ".removeAttachment", function (e) {
          var attachment_id = $(this).attr('attachment-id');
          $.ajaxSetup({
              headers: {
                      'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                  }
              });
              $.ajax({
                  data: {id: attachment_id },
                  url: APP_URL + "/discussion-forum/fourth-level/delete-attachments",
                  type: "POST",
                  dataType: 'json',
                  success: function(result) {
                      location.reload();
                  },
                  complete:function(data){}
              });  
          })
    
          // update activities
          $(document).on("click", ".post_activity", function (e) {
          var post_id = $(this).attr('post-id');
          var activity_type = $(this).attr('activity-type');
          $.ajaxSetup({
              headers: {
                      'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                  }
              });
              $.ajax({
                  data: {post_id: post_id, post_type: 1, activity_type: activity_type },
                  url: APP_URL + "/discussion-forum/update-post-activities",
                  type: "POST",
                  dataType: 'json',
                  success: function(result) {
                      location.reload();
                  },
                  complete:function(data){}
              });  
          })
    
          // update view event
          $(document).on("click", ".update_view_activity", function (e) {
          var post_id = $(this).attr('post-id');
          var post_link = $(this).attr('post-link');
          $.ajaxSetup({
              headers: {
                      'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                  }
              });
              $.ajax({
                  data: {post_id: post_id, post_type: 1 },
                  url: APP_URL + "/discussion-forum/update-views",
                  type: "POST",
                  dataType: 'json',
                  success: function(result) {
                      location.href = post_link;
                  },
                  complete:function(data){}
              });  
          })
          
      });
    
      $(document).on("mouseenter", ".myDIV", function (e) {
              $(this).attr('id');
              $(this).next('.btn-emoji').removeClass('d-none');
              $(document).on("mouseleave", ".row-emoji-btn", function (e) {
                $('.btn-emoji').addClass('d-none');
              });
      });
      $(document).on("click", ".viewReplies", function (e) {
        var _this = $(this);
          $(_this).html('View Replies...<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span>');
      });
    
      $(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){}
              });  
      })
    
    
      $(document).on("click", ".tagPostBtn", function (e) {
        var parent_id = $(this).attr('parent-id');
        var post_id = $(this).attr('post-id');
        $.ajaxSetup({
              headers: {
                      'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                  }
              });
              $.ajax({
                  data: {parent_id: parent_id , post_id: post_id},
                  url: APP_URL + "/discussion-forum/open-tag-form",
                  type: "POST",
                  dataType: 'html',
                  success: function(result) {
                      $('#fourthLevelModal').modal('show');
                      $('#fourthLevelModalBody').html(result);
                  },
                  complete:function(data){}
              });  
      })
    
      $(document).on("click", ".submitTags", function (e) {
        $.ajaxSetup({
              headers: {
                      'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                  }
              });
              let formData = $('#addTagForm').serialize();
              $.ajax({
                  data: formData,
                  url: APP_URL + "/discussion-forum/add-tag",
                  type: "POST",
                  dataType: 'json',
                  success: function(result) {
                      location.reload();
                  },
                  complete:function(data){}
              });  
      })
      
      
        
    
    
      
     
    </script>
@endsection