@extends('admin.layout.app')
@section('content')
    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-sm-12 col-xl-12">
                <div class="bg-light rounded h-100 p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h6>Questions</h6>
                        <a href="#deleteModal" class="btn btn-success" data-bs-toggle="modal" id="generalAnswerBtn"
                            disabled>General Answer</a>
                    </div>
                    <a>Select multiple questions for multiple answer</a>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Title</th>
                                <th scope="col">Content</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($questions as $question)
                                <tr>
                                    <th scope="row">
                                        <input type="checkbox" class="question-checkbox" value="{{ $question->id }}"
                                            />
                                        {{ $question->id ?? '' }}
                                    </th>
                                    <td>{{ $question->title ?? '' }}</td>
                                    <td>{!! \Illuminate\Support\Str::words($question->content ?? '', 4, '...') !!}</td>
                                    <td>
                                        @if (in_array($question->id, $answeredQuestionIds))
                                            <span class="badge bg-success">Answered</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex" style="gap: 3px;">
                                        <a href="{{ route('admin.questions.view', $question->id) }}"
                                            class="btn btn-primary btn-sm">View</a>

                                        <a href="{{ route('admin.questions.delete', $question->id) }}"
                                           class="btn btn-danger btn-sm">Delete</a>
                                        </div>
                                    </td>

                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade @if ($errors->any()) show @endif" id="deleteModal" tabindex="-1"
        aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="answerForm" action="{{ route('admin.questions.submitAnswer') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">Submit General Answer</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="answer" class="form-label @error('answer') is-invalid @enderror">Answer</label>
                            <textarea class="form-control" name="answer"></textarea>
                            @error('answer')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <input type="hidden" id="selectedQuestionIds" name="question_ids">
                            @error('question_ids')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Submit Answer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {

            $('#generalAnswerBtn').prop('disabled', true);

            $('.question-checkbox').on('change', function() {
                let selectedIds = [];
                $('.question-checkbox:checked').each(function() {
                    selectedIds.push($(this).val());
                });

                if (selectedIds.length > 0) {
                    $('#generalAnswerBtn').prop('disabled', false);
                } else {
                    $('#generalAnswerBtn').prop('disabled', true);
                }

                $('#selectedQuestionIds').val(selectedIds.join(','));
            });


            @if ($errors->any())
                $('#deleteModal').modal('show');
            @endif

            $('#answerForm').on('submit', function(event) {
                let selectedQuestionIds = $('#selectedQuestionIds').val();
                let answerText = $('textarea[name="answer"]').val().trim();

                if (!selectedQuestionIds) {
                    toastr.error('Please select at least one question.')
                    event.preventDefault();
                } else if (!answerText) {
                    toastr.error('Answer cannot be empty.')
                    event.preventDefault();
                }
            });
        });
    </script>
@endpush