@extends('frontend.layout.master')
@section('content')
    <!-- <section class="inner-page-banner-section">
        <div class="bg-img">
        </div>
        <div class="niveshaay-container">
            <div class="inner-banner-content">
                <h1>Community Forums</h1>
            </div>
        </div>
    </section> -->
    <div id="content-main-wrap" class="is-clearfix">
        <div id="content-area" class="site-content-area">
            <section class="community-section">
                <div class="niveshaay-container">
                    <div class="btn-wrap">
                        <button class="btn btn-green modal-link" title="Ask Your Question" data-link="question-modal">
                            Ask Your Question
                        </button>
                    </div>
                    <div class="community-outer-wrap">
                        <div class="community-list">
                            @foreach ($forum_data as $key=>$forum)  
                                <div class="community-wrap">
                                    <div class="top-content">
                                        <div class="img-wrap">
                                            <img src="{{ asset('images/user.svg') }}">
                                        </div>
                                        <div class="content-wrap">
                                            <div class="heading-txt">
                                                <span class="name">Anonymous User</span>
                                                <span class="date">{{ date("d-m-Y", strtotime($forum->created_at)) }}</span>
                                            </div>
                                            <p class="question">
                                                {{ $forum->question }}
                                            </p>
                                            <p class="answers">
                                            @if($forum->answers && count($forum->answers) > 0)
                                                {{ $forum->answers[0]->answer }}
                                            @endif
                                            </p>
                                            <div class="more-answer">
                                                @foreach ($forum->answers as $index => $ans)
                                                    @if ($index !== 0)
                                                        <p class="answers">{{ $ans->answer }}</p>
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="ans-count">
                                        {{$forum->answers->count()}}<i><img src="{{ asset('images/down-arrow.svg') }}"> </i>
                                        </div>
                                        <div class="input-wrap">
                                            <div class="form-group">
                                                <input type="hidden" name="comunity_id" value="{{$forum->id}}" id="comunity_link_id">
                                                <input type="text" name="feedback"  id="feedback_{{$key}}" placeholder="Type question here..." class="form-control"/>
                                            </div>
                                            <div class="btn-wrap">
                                                <button type="button" class="btn btn-green com-edit" id="{{$key}}" forum="{{$forum->id}}">Answer</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <div id="question-modal" class="custom-modal question-modal" data-tab="question-modal">
      <div class="modal-backdrop"></div>
      <div class="modal-content">
        <div class="modal-content-inner">
          <div class="modal-body custom-form-section">
            <a href="#" title="Close" class="modal-close">
              <img src="{{ asset('images/close.svg') }}" alt="close-btn" />
            </a>
            <div class="form-wrapper">
              <div class="form-inner-wrapper">
                <p>Please Enter Question</p>
                  <div class="form-group">
                    <textarea id="question" name="question" class="form-control" cols="9" rows="30" placeholder="Enter your question" required></textarea>
                  </div>
                  <div class="form-group form-btn-wrapper">
                    <button type="button" class="btn btn-green" data-link="question-modal" id="com-link-save" title="Submit">
                        Submit
                    </button>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
@endsection
@push('js')
<script>

   
$(document).ready(function() {
    $('.com-edit').each(function() {
        var buttonId = $(this).attr('id');
        var forum = $(this).attr('forum');
        $(this).click(function(e) {
            e.preventDefault();
            handleButtonClick(buttonId, forum);
        });
    });
    function handleButtonClick(buttonId, forum) {
        const feedback = $('#feedback_'+buttonId).val();
        if(feedback){
            $.ajax({
                type: "POST",
                url: "{{route('frontend.community-forum.add-fourm')}}",
                data: { id: forum, answer: feedback },
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                beforeSend: function(){ $('.loading-block').show();},
                success: function(data) {
                    if(data.message === 'success'){
                        window.location.reload();
                    }
                }
            });
        }
    }
    
    $('.comunity-link').click(function(){
        const id = $(this).attr('data-comunity-id');
        $('#comunity_id').val(id);
    });

    $('#feedback').on('input', function() {
        $('.feedback_error').html('');
    });

  $('#com-link-save').click(function(){
    const question = $('#question').val();
    $.ajax({
        type: "POST",
        url: "{{route('frontend.community-forum.ask-question')}}",
        data: { question: question },
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        beforeSend: function(){ $('.loading-block').show();},
        success: function(data) {
            if(data.message === 'success'){
                window.location.reload();
            }
        }
    });
  });
});
</script>
@endpush