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

@section('title','Aatrral Industries || Forum')

@section('content')

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

    /* Responsive table container */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .forum-table {
        width: 100%;
        min-width: 600px; /* Ensures table doesn't shrink too much */
        border-collapse: collapse;
    }

    .forum-table th,
    .forum-table td {
        vertical-align: middle;
        padding: 12px;
        white-space: nowrap; /* Prevents text wrapping in cells */
    }

    /* Allow topic text to wrap on mobile */
    @media (max-width: 768px) {
        .forum-table td:first-child {
            white-space: normal; /* Allows topic text to wrap */
            min-width: 200px;
        }
    }

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

    /* Mobile-specific styles */
    @media (max-width: 768px) {
        .container.cont-mob {
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .ask-btn {
            float: none;
            width: 100%;
            text-align: center;
            margin-bottom: 15px;
        }
        
        /* Add scroll indicator for mobile */
        .table-responsive::after {
            content: '← Scroll horizontally →';
            display: block;
            text-align: center;
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
    }

    /* Optional: Custom scrollbar styling */
    .table-responsive::-webkit-scrollbar {
        height: 5px;
    }
    
    .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb {
        background: #1e5cb3;
        border-radius: 10px;
    }
</style>

<div class="container cont-mob mt-4 mb-4">

    @auth
        <a href="#" class="ask-btn" data-bs-toggle="modal" data-bs-target="#askQuestionModal">
            Ask a Question
        </a>
    @else
        <a href="#" class="ask-btn" id="loginneed">
            Ask a Question
        </a>

        <span id="loginerr" style="display:none">
            Only logged-in users can ask questions.
            <a href="{{ route('login') }}">Login here</a>
        </span>
    @endauth

    <!-- Responsive table wrapper -->
    <div class="table-responsive">
        <table class="table table-bordered forum-table">
            <thead>
                <tr class="form_table_">
                    <th style="width:40%;">Topic</th>
                    <th style="width:10%;">Views</th>
                    <th style="width:10%;">Replies</th>
                    <th style="width:20%;">Last reply</th>
                    <th style="width:20%;">Reply by</th>
                </tr>
            </thead>

            <tbody>
                @foreach($forums as $forum) 
                    <tr class="topic-row">
                        <td>
                            <a href="{{ route('forum.show', $forum->slug) }}">
                                {{ $forum->title }}
                            </a>
                        </td>

                        <td>{{ $forum->views }}</td>

                        <td>{{ $forum->replies_count }}</td> 

                        <td>
                            @if($forum->last_question_reply_at)
                                {{ \Carbon\Carbon::parse($forum->last_question_reply_at)->diffForHumans() }}
                            @else
                                No replies
                            @endif
                        </td>

                        <td>
                            @if($forum->last_question_reply_by)
                                {{ $forum->last_question_reply_by ?? 'User' }}
                            @else
                                —
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</div>

{{-- ===================== --}}
{{--     Ask Question Modal --}}
{{-- ===================== --}}

<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>

                            @foreach ($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->title }}</option>
                            @endforeach
                            
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Describe your question</label>
                        <textarea name="body" id="description" 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>

@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

<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.getElementById("loginneed").onclick = function (e) {
            e.preventDefault();
            document.getElementById("loginerr").style.display = "inline";
        };
    });

    document.addEventListener("DOMContentLoaded", function () {
        const selects = document.querySelectorAll(".no-nice-select");

        selects.forEach(function (select) {
            // Remove the .nice-select wrapper if it exists
            const niceSelect = select.nextElementSibling;
            if (niceSelect && niceSelect.classList.contains("nice-select")) {
                niceSelect.remove();
            }

            // Ensure the real select is visible
            select.style.display = "block";
        });
    });
</script>

@endsection