@extends('layouts.main_dashboard.app')
@php($routePrefix = auth()->user()?->usesStaffPortal() ? 'teacher' : 'admin')

@section('title', __('dashboard.Student Answers'))
@section('page_heading', __('dashboard.Student Answers'))

@section('breadcrumb')
<li class="breadcrumb-item text-muted">
    <a href="{{ route($routePrefix . '.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
</li>
<li class="breadcrumb-item">
    <span class="bullet bg-gray-500 w-5px h-2px"></span>
</li>
<li class="breadcrumb-item text-muted">
    <a href="{{ route($routePrefix . '.quiz-answers.index', $quizAnswer->quiz_id) }}" class="text-muted text-hover-primary">{{ __('dashboard.Student Answers') }}</a>
</li>
<li class="breadcrumb-item">
    <span class="bullet bg-gray-500 w-5px h-2px"></span>
</li>
<li class="breadcrumb-item text-muted">
    {{ __('dashboard.View Student Answer') }}
</li>
@endsection

@section('content')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-fluid">
        <div class="row g-7">
            <div class="col-xl-12">
                <div class="card card-flush h-lg-100" id="kt_contacts_main">
                    <div class="card-header pt-7">
                        <div class="text-lg font-black text-zinc-900 dark:text-white">
                            <i class="ki-outline ki-element-6 fs-1 me-2"></i>
                            <h2>{{ __('dashboard.Student Answers') }}</h2>
                        </div>
                    </div>
                    <div class="card-body pt-5">
                        <!-- Table of answers -->
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ __('dashboard.Question') }}</th>
                                    <th>{{ __('dashboard.Answer') }}</th>
                                    <th>{{ __('dashboard.Score') }}</th>
                                    <th>{{ __('dashboard.Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($quizAnswer->quizAnswerDetails as $answerDetail)
                                    <tr>
                                        <td>{{ $answerDetail->quiz_question->question->question_text ?? __('dashboard.Question not found') }}</td>
                                        <td>{{ $answerDetail->answer }}</td>
                                        <td>{{ $answerDetail->student_score }}</td>
                                        <td>
                                            <button class="btn btn-primary edit-answer" data-answer-id="{{ $answerDetail->id }}">{{ __('dashboard.Edit') }}</button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <!-- Modal for editing answer -->
                        <div class="modal fade" id="editAnswerModal" tabindex="-1" role="dialog" aria-labelledby="editAnswerModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="editAnswerModalLabel">{{ __('dashboard.Edit Answer') }}</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form id="editAnswerForm">
                                            @csrf
                                            <div class="form-group">
                                                <label for="answer">{{ __('dashboard.Student Answer') }}</label>
                                                <textarea class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" id="answer" name="answer"></textarea>
                                            </div>
                                            <div class="form-group">
                                                <label for="answer_type">{{ __('dashboard.Answer Type') }}</label>
                                                <select class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" id="answer_type" name="answer_type">
                                                    <option value="complete">{{ __('dashboard.Complete') }}</option>
                                                    <option value="partial">{{ __('dashboard.Partial') }}</option>
                                                    <option value="mistake">{{ __('dashboard.Mistake') }}</option>
                                                    <option value="not-solved">{{ __('dashboard.Not Solved') }}</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="student_score">{{ __('dashboard.Score') }}</label>
                                                <input type="number" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" id="student_score" name="student_score">
                                            </div>
                                            <div class="form-group">
                                                <label for="teacher_notes">{{ __('dashboard.Teacher Notes') }}</label>
                                                <textarea class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" id="teacher_notes" name="teacher_notes"></textarea>
                                            </div>
                                            <button type="button" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700" id="saveAnswer">{{ __('dashboard.Save Changes') }}</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End of modal -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Open modal to edit answer
        $('.edit-answer').on('click', function() {
            var answerDetailId = $(this).data('answer-id');
            // Fetch current data and populate the modal form
            $.ajax({
                url: '{{ route("admin.quiz-answers.edit", ":id") }}'.replace(':id', answerDetailId),
                type: 'GET',
                success: function(data) {
                    $('#answer').val(data.answer);
                    $('#answer_type').val(data.answer_type);
                    $('#student_score').val(data.student_score);
                    $('#teacher_notes').val(data.teacher_notes);
                    $('#editAnswerModal').modal('show');
                    $('#editAnswerModal').data('answer-id', answerDetailId); // Store answer ID in modal for later use
                }
            });
        });

        // Save changes via AJAX
        $('#saveAnswer').on('click', function() {
            var answerDetailId = $('#editAnswerModal').data('answer-id'); // Get answer ID from modal data
            var formData = {
                answer: $('#answer').val(),
                answer_type: $('#answer_type').val(),
                student_score: $('#student_score').val(),
                teacher_notes: $('#teacher_notes').val(),
                _token: '{{ csrf_token() }}'
            };

            $.ajax({
                url: '{{ route("admin.quiz-answers.update", ":id") }}'.replace(':id', answerDetailId),
                type: 'PUT',
                data: formData,
                success: function(response) {
                    alert(response.message);
                    $('#editAnswerModal').modal('hide'); // Close modal on success
                    location.reload(); // Reload page to reflect changes
                },
                error: function(response) {
                    alert('An error occurred. Please try again.');
                }
            });
        });
    });
</script>
@endsection