@extends('layouts.app_discussion')
@section('content')
<div class="container mb-4" id="start-discussion">
    <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 border-bottom">
                            <div class="pull-right forum-desc"></div>
                            <h3 class="text-primary">Events</h3>
                            {{ Breadcrumbs::render('events' ) }}
                            <hr>
                            <div class="row">
                                <div class="col"><h4>Event List</h4></div>
                                <div class="col-auto ms-auto mb-3">
                                    @if(app('request')->input('sub_category') || app('request')->input('category'))
                                        <a href="{{ url('/discussion-forum/topic?key_title='.$category_id) }}" class="mx-4">Back to Discussion Forum</a>
                                    @endif
                                    @if(Auth::user()->role == 1 && Request::has('sub_category') == false && app('request')->input('category') == false)
                                        <a data-id="{{ app('request')->input('key_title')}}" class="createSubCategoryEvents btn btn-primary btn-rounded btn-sm px-4">Add New Event</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @include('events/list')
                    </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){
                      
                  }
            });  
      })


      // open update form
      $(document).on("click", ".openEditEvent", function (e) {
          var data_id = $(this).attr("data-id");
          $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                  }
              });   
        
              $.ajax({
                  data:{event_id: data_id},
                  url: APP_URL + "/events/sub-category/open-update-form",
                  type: "POST",
                  dataType: 'html',
                  success: function(result) {
                    $('#fourthLevelModal').modal('show');
                    $('#fourthLevelModalBody').html(result);
                  },
                  error:function (response){},
                  complete:function(data){
                      
                  }
            });  
      })
  
      
      $(document).on("change", "#category_id", function (e) {
            $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                  }
              }); 
              $.ajax({
                  data:{category_id: $(this).val()},
                  url: APP_URL + "/events/sub-category/get-sub-category-list-box",
                  type: "POST",
                  dataType: 'html',
                  success: function(result) {
                    console.log(result)
                    $('#ajaxSubCategory').html(result)
                  }
            });
       
      })
      
      // Add event
      $(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('Save')
                    var obj = response.responseJSON.json;
                    $.each(obj, function(key,value) {
                      $('#'+key).addClass('is-invalid');
                      $('#'+key).after('<div class="invalid-feedback">'+value+'</div>')
                    });
                },
            });
       });
      // End Add event


      // Edit event
      $(document).on("click", "#editEvent", 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 parent_id = $('#parent_id').val();
        $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                  }
              }); 
              $.ajax({
                  data:$("#updateEvent").serialize(),
                  url: APP_URL + "/events/update",
                  type: "POST",
                  dataType: 'json',
                  success: function(result) {
                      location.reload();
                  },
                  error:function (response){
                    $(_this).html('Save Changes')
                    var obj = response.responseJSON.json;
                    $.each(obj, function(key,value) {
                      $('#'+key).addClass('is-invalid');
                      $('#'+key).after('<div class="invalid-feedback">'+value+'</div>')
                    });
                },
            });
       });
      // End edit event
    });
  
    
    
      
  
  
    
   
  </script>