@extends('layout.layout')

@section('content')
    <div class="container">
        <input type="hidden" id="tester_id" value="{{ $tester_id }}">
        <input type="hidden" id="schedule_id" value="{{ $schedule_id }}">

        <table class="table table-bordered table-sm table bordered-table sm-table mb-0 mb-3">

            <thead>
                <tr>
                    <th>Question</th>
                    <th class="text-center">Score (0-5)</th>
                    <th>Comment</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($questions as $question)
                    @php
                        $score = $existingAnswers[$question->id]->score ?? 0;
                        $comment = $existingAnswers[$question->id]->comments ?? '';
                    @endphp

                    <tr data-question-id="{{ $question->id }}">
                        <td>{{ $question->question }}</td>
                        <td>
                            <input type="number" min="0" max="5" step="1"
                                class="form-control text-center score-input" value="{{ $score ?? 0 }}"
                                data-question-id="{{ $question->id }}" data-section="section-{{ $question->id }}">
                        </td>
                        <td>
                            <input class="form-control comment-input" value="{{ $comment ?? '' }}">
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <label for="main_comment">Additional Comments (if any):</label>
        <textarea class="form-control" name="comment" id="main_comment" cols="30" rows="3">{{ $existingComment ?? '' }}</textarea>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const testerId = document.getElementById('tester_id').value;
            const scheduleId = document.getElementById('schedule_id').value;
            const comment = document.getElementById('main_comment').value;

            //     function sendData(questionId = null, score = null, scoreComment = null, mainComment = null) {
            //         const data = {
            //             tester_id: testerId,
            //             schedule_id: scheduleId,
            //             comment: comment,
            //             scores: {
            //                 [questionId]: score
            //             },
            //             comments: {
            //                 [questionId]: scoreComment
            //             },
            //             _token: '{{ csrf_token() }}'
            //         };
            //         console.log(data);


            //         fetch("{{ route('scoreStoreDemo') }}", {
            //             method: 'POST',
            //             headers: {
            //                 'Accept': 'application/json',
            //                 'Content-Type': 'application/json',
            //             },
            //             body: JSON.stringify(data),
            //         })
            //         .then(response => response.json())
            //         .then(result => {
            //             if (!result.success) {
            //                 toastr.error(result.message);
            //                 console.error('Error:', result);
            //             } else {
            //                 toastr.success(result.message);
            //                 console.log(result.message);
            //             }
            //         })
            //         .catch(error => {
            //             toastr.error(error.message);
            //             console.error('Fetch error:', error);
            //         });
            // }


            function sendData(questionId = null, score = null, scoreComment = null, mainComment = null) {
                const data = {
                    tester_id: testerId,
                    schedule_id: scheduleId,
                    _token: '{{ csrf_token() }}'
                };

                if (questionId !== null && score !== null) {
                    data.scores = {
                        [questionId]: score
                    };
                    data.comments = {
                        [questionId]: scoreComment
                    };
                }

                if (mainComment !== null) {
                    data.comment = mainComment;
                }

                fetch("{{ route('scoreStoreDemo') }}", {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(data),
                    })
                    .then(response => response.json())
                    .then(result => {
                        if (!result.success) {
                            toastr.error(result.message);
                            console.error('Error:', result);
                        } else {
                            toastr.success(result.message);
                            console.log(result.message);
                        }
                    })
                    .catch(error => {
                        toastr.error(error.message);
                        console.error('Fetch error:', error);
                    });
            }



            document.querySelectorAll('tr[data-question-id]').forEach(row => {
                const questionId = row.dataset.questionId;
                const scoreInput = row.querySelector('.score-input');
                const commentInput = row.querySelector('.comment-input');

                function handleChange() {
                    const score = scoreInput.value;
                    const scoreComment = commentInput.value;
                    const mainComment = document.getElementById('main_comment').value;

                    if (score !== '') {
                        sendData(questionId, score, scoreComment, mainComment);
                    }
                }

                // scoreInput.addEventListener('change', handleChange);
                // commentInput.addEventListener('input', debounce(handleChange, 500));

                scoreInput.addEventListener('blur', handleChange);
                commentInput.addEventListener('blur', handleChange);

            });

            // document.getElementById('main_comment').addEventListener('input', debounce(function() {
            //     const mainComment = document.getElementById('main_comment').value;
            //     sendData(null, null, null, mainComment);
            // }, 500));
            document.getElementById('main_comment').addEventListener('blur', function() {
                const mainComment = document.getElementById('main_comment').value;
                sendData(null, null, null, mainComment);
            });


            function debounce(func, wait) {
                let timeout;
                return function() {
                    clearTimeout(timeout);
                    timeout = setTimeout(func, wait);
                };
            }
        });
    </script>
@endpush