@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">
            <div class="col-lg-12">
                <div class="wrapper wrapper-content animated fadeInRight" >
                    <div class="ibox-content forum-container">

                      <div class="forum-title">

                        @include('discussion_forum/include/title')
                        {{ Breadcrumbs::render('third-level', $title) }}
                        <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->FocusArea->fa_full_form}}</a>
                                  <div class="forum-sub-title">{{ $title->FocusArea->description}}</div> --}}
                                  <div class="d-flex justify-content-between">
                                    <div>
                                      <a href="{{url($role.'/discussion-forum/topic?key_title='.\App\Helpers\Helper::encriptId($title->id))}}" class="forum-item-title">{{ $title->accountabilities}}</a>
                                    </div>
                                    <div class="row">
                                      <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">
                                        <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->description}}</div>
                                  <ul class="m-0 px-3">
                                  @foreach($thirdLevelSubjects as $key=>$topic)
                                    <a href="{{url($role.'/discussion-forum/fourth-level?key_title='.\App\Helpers\Helper::encriptId($topic->id))}}" class="forum-item-title  mt-2 text-primary">
                                      <div class="d-flex justify-content-between">
                                        <div>
                                          <li>{{ $topic['subject'] }}</li>
                                        </div>
                                        <div class="row">
                                          <div class="col-auto my-auto">
                                            <i class="fa fa-wrench text-primary" aria-hidden="true"></i>
                                          </div>
                                          <div class="col-auto my-auto">
                                            <i class="fa fa-calendar-o text-primary" aria-hidden="true"></i>
                                          </div>
                                          <div class="col-auto my-auto">
                                            <i class="fa fa-file-o text-primary" aria-hidden="true"></i>
                                          </div>
                                        </div>
                                      </div>
                                    </a>
                                    @if(Auth::user()->role == 1)
                                      <div class="row  d-flex justify-content-end py-2">
                                        <div class="col-auto">
                                          <a data-id="{{ \App\Helpers\Helper::encriptId($topic->id) }}" class="btnModalThirdLevel cursor-pointer"><span class="fa fa-pencil text-primary"></span></a>
                                        </div>
                                        <div class="col-auto">
                                          <a data-id="{{ $topic->id }}" class="deleteThirdLevelTopic cursor-pointer"><span class="fa fa-trash text-primary"></span></a>
                                        </div>
                                      </div>
                                    @endif
                                  @endforeach
                                </ul>
                              </div>
                             
                          </div>
                        </div>
                        @if(Auth::user()->role == 1)
                          <div class=" px-4">
                            <div class="row">
                              <div class="col-auto ms-auto d-flex justify-content-end py-2">
                                <a data-id="{{ app('request')->input('id')}}" id="createThirdLevelButton" class="btn btn-outline-primary btn-rounded btn-sm px-4">Create Sub Topic</a>
                              </div>
                            </div> 
                          </div>
                        @endif
                      

                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</div>

<!-- Modal -->
<div class="modal" id="thirdLevelModal" tabindex="-1" aria-labelledby="thirdLevelModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered  modal-lg">
    <div class="modal-content">
      <div class="modal-body" id="thirdLevelModalBody"></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", ".deleteThirdLevelTopic", function (e) {
      $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Deleting...');
      var subject_id = $(this).attr("data-id");
      $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });   
      
            $.ajax({
                data:{subject_id: subject_id},
                url: APP_URL + "/admin/discussion-forum/third-level/delete-subject",
                type: "POST",
                dataType: 'json',
                success: function(result) {
                  location.reload(); 
                },
                error:function (response){},
                complete:function(data){
                    
                }
          });
      });

      // open create form
      $(document).on("click", "#createThirdLevelButton", 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 + "/admin/discussion-forum/third-level/open-create-form",
                type: "POST",
                dataType: 'html',
                success: function(result) {
                  $('#thirdLevelModal').modal('show');
                  $('#thirdLevelModalBody').html(result);
                },
                error:function (response){},
                complete:function(data){
                    
                }
          });  
      })
      // end open create form

      //Create
      $(document).on("click", "#submitThirdLevelTopic", 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> Create...');
        var data = $("#createThirdLevelTopicForm").serialize();
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });   
      
            $.ajax({
                data:data,
                url: APP_URL + "/admin/discussion-forum/third-level/create-subject",
                type: "POST",
                dataType: 'json',
                success: function(result) {
                  location.reload();
                },
                error:function (response){
                  $(_this).html('Create')
                  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){
                    
                }
          });
      });
      //end create

      // open edit form
      $(document).on("click", ".btnModalThirdLevel", function (e) {
        var subject_id = $(this).attr("data-id");
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });   
      
            $.ajax({
                data:{subject_id: subject_id},
                url: APP_URL + "/admin/discussion-forum/third-level/open-update-form",
                type: "POST",
                dataType: 'html',
                success: function(result) {
                  $('#thirdLevelModal').modal('show');
                  $('#thirdLevelModalBody').html(result);
                },
                error:function (response){
                  $(_this).html('Create')
                  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){
                    
                }
          });  
      })
      // end open edit form

      //update
      $(document).on("click", "#updateThirdLevelTopic", 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> Save Changes...');
        var data = $("#thirdLevelTopicForm").serialize();
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                data:data,
                url: APP_URL + "/admin/discussion-forum/third-level/update-subject",
                type: "POST",
                dataType: 'json',
                success: function(result) {
                  location.reload();
                },
                error:function (response){
                  $(_this).html('Create')
                  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){
                    
                }
          });
      })
     //end update   
  });

</script>