@extends('backend.layouts.master')
@section('content')
<div class="content-wrapper">
    <section class="content-header">
        @include('backend.common-views.messages')
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                        <li class="breadcrumb-item active">Community Forum Answer</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Community Forum Answer</h3>
                        </div>
                        <div class="card-body">
                            <div class="mb-2 d-flex justify-content-end">
                                <button type="button" class="btn btn-primary btn-flat mr-2" data-toggle="modal" data-target="#exampleModal">
                                    <i class="fas fa-plus"></i> Add Answer
                                </button>
                                <button type="button" class="btn btn-outline-danger btn-flat" onclick="window.history.back();">Cancel</button>
                            </div>
                            <h5><b>{{$question->question}}</b></h5>
                            <input type="hidden" name="forum_id" value="{{$id}}" id="forum_id">
                            @foreach($comunityForumDatas as $forumData)
                                <div class="row mb-2">
                                    <div class="col-9">
                                        <div class="row">
                                            <div class="col-6">
                                                @if($forumData->is_admin  === 1)
                                                <textarea name="answer" id="forumData_{{$forumData->id}}" class="form-control" type="text" rows="2" cols="10">{{ $forumData->answer }}</textarea>
                                                @endif
                                            </div>
                                            <div class="col-6">
                                                @if($forumData->is_admin === 0)
                                                <textarea name="answer" id="forumData_{{$forumData->id}}" class="form-control" type="text" rows="2" cols="10">{{ $forumData->answer }}</textarea>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <button type="button" class="btn btn-warning btn-sm edit-forum-btn" title="Save"  data-forum-id="{{ $forumData->id }}"><i class="fas fa-save"></i>
                                        </button>
                                        <button type="button" class="btn {{$forumData->is_active === 1 ? 'btn-warning' : 'btn-success'}} btn-sm forum_id" id="change-status-btn"
                                            title="{{ $forumData->is_active === 1 ? 'Inactive' : 'Active' }}"
                                            data-forum-id="{{ $forumData->id }}"
                                            data-active="{{ $forumData->is_active == 1 ? 'true' : 'false' }}">
                                            @if($forumData->is_active == 1)
                                                <i class="fas fa-thumbs-down"></i>
                                            @else
                                                <i class="fas fa-thumbs-up"></i>
                                            @endif
                                        </button>
                                        <a onclick="return confirm('Are you sure you want to delete this entry?')" href="{{route('admin.comunity-sub-forum.delete-change-forum',$forumData->id)}}" class="btn btn-danger btn-sm" title="Delete"><i class="fas fa-trash-alt"></i>
                                        </a>
                                    </div>
                                    <div class="col-1 status-change">
                                        @if($forumData->is_active == 1)
                                            <div class="status-change" data-forum-id="{{ $forumData->id }}"><span class="badge badge-success">Active</span></div>
                                        @else
                                            <div class="status-change" data-forum-id="{{ $forumData->id }}"><span class="badge badge-warning">Inactive</span></div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Answer</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <textarea name="answer" class="form-control" type="text" rows="2" cols="10" id="forum_answer"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info forum-add-btn">Save</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@endsection
@push('js')
<script>
$(document).ready(function() {
    $(document).on('click', '.forum_id', function() {
        const forum_id = $(this).attr('data-forum-id');
        $.ajax({
            type: "POST",
            url: "{{route('admin.comunity-forum.change-forum-status')}}",
            data: { id: forum_id , child_data: true},
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            beforeSend: function(){ $('.loading-block').show();},
            success: function(data) {
                if(data.message === 'success'){
                    $('.loading-block').hide();
                    $('.status-change[data-forum-id="' + forum_id + '"]').html('');
                    $(this).attr('title', data.active ? 'Inactive' : 'Active');
                    if(data.active){
                        $('.status-change[data-forum-id="' + forum_id + '"]').html('<span class="badge badge-success">Active</span>');
                        $('#change-status-btn[data-forum-id="' + forum_id + '"]').addClass('btn-warning');
                        $('#change-status-btn[data-forum-id="' + forum_id + '"]').removeClass('btn-success');
                    }else{
                        $('.status-change[data-forum-id="' + forum_id + '"]').html('<span class="badge badge-warning">Inactive</span>');
                        $('#change-status-btn[data-forum-id="' + forum_id + '"]').removeClass('btn-warning');
                        $('#change-status-btn[data-forum-id="' + forum_id + '"]').addClass('btn-success');
                    }

                    var buttonText = data.active ? '<i class="fas fa-thumbs-down"></i>' : '<i class="fas fa-thumbs-up"></i>';
                    $('#change-status-btn[data-forum-id="' + forum_id + '"]').html(buttonText);
                    $('#change-status-btn[data-forum-id="' + forum_id + '"]').attr('title', data.active ? 'Inactive' : 'Active');
                }
            }
        });
    });

    $('.edit-forum-btn').click(function(){
        const forum_id = $(this).attr('data-forum-id');
        const ans = $('#forumData_'+forum_id).val();
        $.ajax({
            type: "POST",
            url: "{{route('admin.comunity-forum.edit')}}",
            data: { id: forum_id, answer:ans },
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            beforeSend: function(){ $('.loading-block').show();},
            success: function(data) {
                if(data.message === 'success'){
                    window.location.reload();
                }
            }
        });
    });

    $('.forum-add-btn').click(function(){
        const forum_id = $('#forum_id').val();
        const answer = $('#forum_answer').val();
        $.ajax({
            type: "POST",
            url: "{{route('admin.comunity-forum.add')}}",
            data: { id: forum_id, answer: answer },
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            beforeSend: function(){ $('.loading-block').show();},
            success: function(data) {
                if(data.message === 'success'){
                    window.location.reload();
                }
            }
        });
    });
});
</script>
@endpush