@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="wrapper wrapper-content animated fadeInRight" style="min-height: 625px">
                <div class="ibox-content forum-container h-100">
                    <div class="col-lg-12">
                        <div class="forum-title">
                            <h3 class="text-primary">Tags</h3>
                            {{-- <div class="row">
                                <div class="col d-flex justify-content-end mb-3">
                                    <a id="btnTagModal" class="btn btn-outline-primary btn-rounded btn-sm px-4 btnTagModal">Add New Tag</a>
                                </div>
                            </div> --}}
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Focus Area</th>
                                        <th scope="col">Accountabilities</th>
                                        <th scope="col">Tags</th>
                                        <th scope="col"></th>
                                        {{-- <th scope="col"></th> --}}
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($accountabilities as $key=> $item)
                                        <tr>
                                            <th scope="row">{{ $key+1 }}</th>
                                            <td>{{ $item->focusArea->fa_full_form }}</td>
                                            <td>{{ $item->accountabilities }}</td>
                                            <td>
                                                @foreach($item['tags'] as $tag)
                                                    <a href="" class="text-primary me-2">#{{ $tag->tag }}</a>
                                                @endforeach
                                            </td>
                                            <td class="d-flex justify-content-center">
                                                <a parent-id="{{ $item->id }}" href="#" class="btnEditTagModal px-3">
                                                    <i class="fa fa-pencil text-primary px-2"></i>
                                                </a>
                                                {{-- <i class="fa fa-trash text-primary"></i> --}}
                                            </td>
                                        </tr>
                                    @endforeach    
                                </tbody>
                            </table>
                            {{-- {{ $focus_area->appends(request()->query())->links() }} --}}
                           
                        </div>
                    </div>  
                </div>
              </div>    
        </div>   
    </div>
</div>

 <!-- Modal -->
 <div class="modal" id="tagModal" tabindex="-1" aria-labelledby="tagModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered  modal-lg">
      <div class="modal-content">
        <div class="modal-body" id="tagModalBody"></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>

<style>
    .dashboard-pg .card{}
</style>


<script>
    var APP_URL  = "{{ url('')}}";
    // open create tag form
    $(document).on("click", ".btnTagModal", function (e) {
    $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            data:{},
            url: APP_URL + "/admin/tag/open-create-form",
            type: "POST",
            dataType: 'html',
            success: function(result) {
                $('#tagModal').modal('show');
                $('#tagModalBody').html(result);
            },
            error:function (response){},
            complete:function(data){
                
            }
        });  
    })
    // end open create tag form

    // open update tag form
    $(document).on("click", ".btnEditTagModal", function (e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            data:{parent_id: $(this).attr('parent-id')},
            url: APP_URL + "/admin/tag/open-create-form",
            type: "POST",
            dataType: 'html',
            success: function(result) {
                $('#tagModal').modal('show');
                $('#tagModalBody').html(result);
            },
            error:function (response){},
            complete:function(data){
                
            }
        });  
    })
    // end open update tag form

    // create tag
    $(document).on("click", "#submitTag", function (e) {
    $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        let formData =$('#createTagForm').serialize();
        $.ajax({
            data:formData,
            url: APP_URL + "/admin/tag/create-tag",
            type: "POST",
            dataType: 'html',
            success: function(result) {
                location.reload();
            },
            error:function (response){

            },
        });  
    })
    // end create tag

    // edit tag
    $(document).on("click", "#updateTag", function (e) {
    $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        let formData =$('#updateTagForm').serialize();
        $.ajax({
            data:formData,
            url: APP_URL + "/admin/tag/update-tag",
            type: "POST",
            dataType: 'html',
            success: function(result) {
               location.reload();
            },
            error:function (response){

            },
        });  
    })
    // end edit tag


</script>