@extends('front::layouts.master')

@section('title', $forum->title)

 

@section('content')

<style>
    .ask-btn {
        background: #1e5cb3;
        color: white !important;
        padding: 10px 20px;
        text-decoration: none;
        float: right;
        margin-top:10px;
        margin-bottom: 20px;
        display: inline-block;
    }

    .forum-table th,
    .forum-table td {
        vertical-align: middle;
        padding: 12px;
    }

    .topic-row {
        border-bottom: 1px solid #3465A4;
    }

     .login-link {
        color: #ff6b00; /* orange highlight */
        font-weight: 600;
        text-decoration: none;
        border-bottom: 2px solid #ff6b00;
        transition: all 0.3s ease;
    }
    
    .login-link:hover {
        color: #000;
        border-bottom: 2px solid #000;
    }
</style>

<!--POPUP-->
<div class="modal fade" id="askQuestionModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Ask a New Question</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal">x</button>
            </div>

            <form action="{{ route('forum.store') }}" method="POST">
                @csrf

                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label">Topic</label>
                        <input type="text" name="title" class="form-control" placeholder="Enter topic title" required>
                    </div>

                    <div class="mb-3 popup_select">
                        <label class="form-label">Question Category</label>
                        <select name="category_id" id="categorySelect" class="form-select no-nice-select" required>
                            <option value="">-- Select Category --</option>

                            
                                <option value=""></option>
                           
                            
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Describe your question</label>
                        <textarea name="body" class="form-control" rows="5" placeholder="Type your question here..." required></textarea>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Post Question</button>
                </div>

            </form>

        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!--POPUP END-->

<div class="container mt-4 mb-5">

    <h2>{{ $forum->title }}</h2>

    <small>
        Posted by {{ $forum->user->name ?? 'User' }}
        • {{ $forum->created_at->diffForHumans() }}
    </small>

    @if($forum->modified_by_admin)
        <small>
            , Edited by {{ $forum->modified_by_admin }}
            • {{ $forum->updated_at->diffForHumans() }}
        </small>
    @endif

    <hr>

    <!-- ✅ NO <p> HERE -->
    <div class="forum-body">
        {!! $forum->body !!}
    </div>

    <hr>

    <h4>Replies ({{ $forum->replies->count() }})</h4>

    @foreach($forum->replies as $reply)
        <div class="mb-3 p-3 border rounded">

            <strong>{{ $reply->user->name ?? 'User' }}</strong>
            <small class="text-muted">
                • {{ $reply->created_at->diffForHumans() }}
            </small>

            <!-- ✅ NO <p> HERE -->
            <div class="mt-2 reply-body">
             {!! $reply->reply !!}  
            </div>

        </div>
    @endforeach

    <hr>

    @auth
        <h5>Add a Reply</h5>
 
        <form action="{{ route('forum.reply', $forum->id) }}" method="POST">
            @csrf

            <textarea id="description" name="body" class="form-control"></textarea>

            <button type="submit" class="btn btn-primary mt-2">
                Submit Reply
            </button>
            
        </form>
    @else
        <p class="text-muted login-message">
            You must be <a href="{{ route('login') }}" class="login-link">logged in</a> to reply.
        </p>
    @endauth
 
</div>


@push('styles')
    <link rel="stylesheet" href="{{ asset('backend/summernote/summernote.min.css') }}">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css">

@endpush
@push('scripts')
    <script src="{{ asset('backend/summernote/summernote.min.js') }}"></script>

    <script>
        $('#description').summernote({
            tabsize: 4,
            height: 100
        });
    </script>
@endpush
@endsection