@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>
                  <h3 class="text-primary">Events</h3>
                  {{ Breadcrumbs::render('events.subcategory', $title) }}
              </div>
              <div class="forum-item active">
                  <div class="row">
                      <div class="col-md-12">
                          <div class="d-flex justify-content-between">
                            <div>
                              <a href="{{url('/events/topic?key_title='.\App\Helpers\Helper::encriptId($title->focus_area_id))}}" class="forum-item-title  pb-2">{{ $title['accountabilities'] }}</a>
                            </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="createSubCategoryEvents btn btn-primary btn-rounded btn-sm px-4">Add New Event</a>
                            </div>
                          </div> 
                          @include('events/list')
                    
                        </div>
                        </div>
                        
                </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>

@endsection
<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", ".createSubCategoryEvents", 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 + "/events/sub-category/open-create-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", "#addNewEvent", 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...');
      var parent_id = $('#parent_id').val();
      $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            }); 
            $.ajax({
                data:$("#createEvent").serialize(),
                url: APP_URL + "/events/create",
                type: "POST",
                dataType: 'json',
                success: function(result) {
                    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>')
                  });
              },
          });
     });
    // End Add event
  });

  
  
    


  
 
</script>