@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</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</h3>
                            </div>
                            <div class="card-body">
                                <table id="community-forum" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>SR No</th>
                                            <th>Question</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                                                                @foreach ($questions as $que)
                                        <tr>
                                            <td>{{++$i}}</td>
                                            <td style="width: 70%">{{ $que->question }}</td>
                                            @if($que->is_active == 1)
                                                <td class="status-change"  data-forum-id="{{ $que->id }}"><span class="badge badge-success">Active</span></td>
                                            @else
                                                <td class="status-change"  data-forum-id="{{ $que->id }}"><span class="badge badge-warning">Inactive</span></td>
                                            @endif
                                            <td>
                                                <button type="button" class="btn {{$que->is_active === 1 ? 'btn-warning' : 'btn-success'}} btn-sm forum_id"
                                                    id="change-status-btn"
                                                    title="{{ $que->is_active === 1 ? 'Inactive' : 'Active' }}"
                                                    data-forum-id="{{ $que->id }}"
                                                    data-active="{{ $que->is_active == 1 ? 'true' : 'false' }}">
                                                    @if($que->is_active == 1)
                                                        <i class="fas fa-thumbs-down"></i>
                                                    @else
                                                        <i class="fas fa-thumbs-up"></i>
                                                    @endif
                                                </button>
                                                <a href="{{route('admin.comunity-forum.answer',$que->id)}}" class="btn btn-warning btn-sm" title="Reply"><i class="fas fa-reply"></i> 
                                                </a>
                                                <a onclick="return confirm('Are you sure you want to delete this entry?')" href="{{route('admin.comunity-forum.delete-change-forum',$que->id)}}" class="btn btn-danger btn-sm" title="Delete"><i class="fas fa-trash-alt"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('js')
<script>
$(function() {
    $("#community-forum").DataTable({
        "responsive": true,
        "autoWidth": false,
        "columnDefs": [
        { "orderable": false, "targets": [3] }
        ]
    });
});
$(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 },
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            beforeSend: function(){ $('.loading-block').show();},
            success: function(data) {
                if(data.message === 'success'){
                    $('.loading-block').hide();
                    var newBadge = data.active ? '<span class="badge badge-info">Inactive</span>' : '<span class="badge badge-success">Active</span>';
                    $('.status-change[data-forum-id="' + forum_id + '"]').html(newBadge);
                    $(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 + '"]').addClass('btn-success');
                        $('#change-status-btn[data-forum-id="' + forum_id + '"]').removeClass('btn-warning');
                    }

                    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');
                }
            }
        });
    });
});
</script>
@endpush