@extends('layouts.app')

@section('style')
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css" rel="stylesheet">
@endsection

@section('content')
<main class="py-4" style="flex: 1;">
    <div class="container">
        <div class="d-grid gap-2 d-md-flex justify-content-md-end mb-4">
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addModal">เพิ่มข้อมูล</button>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">{{ __('คำถาม') }}</div>
                    <div class="card-body bg-white">
                        <div style="overflow-x: auto;">
                            <table id="questionsTable" class="table table-striped table-bordered" style="width:100%">
                                <thead>
                                    <tr>
                                        <th style="width: 5%;">ลำดับ</th>
                                        <th style="width: 30%;">วิดิโอ</th>
                                        <th style="width: 25%;">คำถาม</th>
                                        <th style="width: 25%;">เวลาจำกัด</th>
                                        <th style="width: 15%;">จัดการ</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@include('modals.add_questions')
@include('modals.edit_questions')
@include('modals.answers_questions')

@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.js"></script>
<script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
<script>
    const routePrefix = "{{ url('filemanager') }}";

    document.addEventListener('DOMContentLoaded', function() {
        initializeFileManagers();
        initializeDataTable();
        setupFormSubmissions();
        setupModalReset();
    });

    function setupSummernote() {
        $('#summernote, #edit_summernote').summernote({
            height: 300,
            callbacks: {
                onChange: function(contents) {
                    $(this).siblings('textarea').val(contents);
                }
            }
        });
    }

    function initializeFileManagers() {
        $('#lfm, #edit_lfm').filemanager('video', {
            prefix: routePrefix
        });

        $('#videoInput').on('change', function() {
            const videoPreview = document.getElementById('videoPreview');
            videoPreview.src = this.value;
            videoPreview.load();
        });

        $('#edit_video_url').on('change', function() {
            const edit_video = document.getElementById('edit_video');
            edit_video.src = this.value;
            edit_video.load();
        });
    }

    function initializeDataTable() {
        $('#questionsTable').DataTable({
            ajax: {
                url: '{{ route("questions_get_data") }}',
                method: 'GET',
                dataSrc: '',
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', status, error);
                }
            },
            columns: [{
                    data: null,
                    render: (data, type, row, meta) => meta.row + 1
                },
                {
                    data: 'video_url',
                    render: (data) => `<video width="100%" controls><source src="${data}" type="video/mp4"></video>`
                },
                {
                    data: 'question_text'
                },
                {
                    data: 'time_limit'
                },
                {
                    data: 'id',
                    render: (data) => generateActionButtons(data)
                }
            ]
        });
    }

    function setupFormSubmissions() {
        $('#addForm').submit(handleAddFormSubmit);
        $('#editForm').submit(handleEditFormSubmit);
        $('#answersForm').submit(handleAnswerFormSubmit);
    }

    function handleAddFormSubmit(event) {
        event.preventDefault();
        $.ajax({
            url: '{{ route("questions_store") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function() {
                $('#addModal').modal('hide');
                reloadDataTable();
                showSuccessAlert('เพิ่มคำถามสำเร็จแล้ว');
                resetAddForm();
            },
            error: function() {
                showErrorAlert('เกิดข้อผิดพลาดขณะเพิ่มคำถาม');
            }
        });
    }

    function handleEditFormSubmit(event) {
        event.preventDefault();
        $.ajax({
            url: '{{ route("questions_update") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function() {
                $('#editModal').modal('hide');
                reloadDataTable();
                showSuccessAlert('อัปเดตคำถามสำเร็จแล้ว');
                resetEditForm();
            },
            error: function() {
                showErrorAlert('เกิดข้อผิดพลาดขณะอัพเดตคำถาม');
            }
        });
    }

    function handleAnswerFormSubmit(event) {
        event.preventDefault();
        $.ajax({
            url: '{{ route("answers_store") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function() {
                $('#answersModal').modal('hide');
                reloadDataTable();
                showSuccessAlert('คำตอบถูกบันทึกสำเร็จ');
                resetAnswerForm();
            },
            error: function() {
                showErrorAlert('เกิดข้อผิดพลาดขณะเพิ่มคำตอบ');
            }
        });
    }

    function resetAddForm() {
        $('#addForm').trigger('reset');
    }

    function resetEditForm() {
        $('#editForm').trigger('reset');
    }

    function resetAnswerForm() {
        $('#answersForm').trigger('reset');
        $('#answers-container').empty();
    }

    function setupModalReset() {
        $('#addModal, #editModal').on('hidden.bs.modal', function() {
            $(this).find('form').trigger('reset');
        });
    }

    function editQuestions(id) {
        $.ajax({
            url: '{{ route("questions_get_edit") }}',
            method: 'GET',
            data: {
                id
            },
            success: function(data) {
                populateEditModal(data);
                $('#editModal').modal('show');
            },
            error: function() {
                showErrorAlert('เกิดข้อผิดพลาดขณะดึงข้อมูลคำถาม');
            }
        });
    }

    function answersQuestions(id) {
        $.ajax({
            url: '{{ route("answers_get_data") }}',
            method: 'GET',
            data: {
                id
            },
            success: function(data) {
                populateAnswersModal(data);
                $('#answersModal').modal('show');
            },
            error: function() {
                showErrorAlert('เกิดข้อผิดพลาดขณะดึงข้อมูลคำถาม');
            }
        });
    }

    function deleteQuestions(id) {
        Swal.fire({
            title: 'คุณแน่ใจว่าต้องการลบคำถามนี้หรือไม่',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'ยืนยัน',
            cancelButtonText: 'ยกเลิก'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("questions_delete") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id
                    },
                    success: function() {
                        Swal.fire('ลบคำถามสำเร็จแล้ว', '', 'success').then(reloadDataTable);
                    },
                    error: function() {
                        showErrorAlert('เกิดข้อผิดพลาดขณะลบคำถาม');
                    }
                });
            }
        });
    }

    function deleteAnswer(index) {
        const answerId = $(`#answer_id_${index}`).val();

        if (!answerId) {
            alert('ไม่พบข้อมูลคำตอบที่จะลบ');
            return;
        }

        Swal.fire({
            title: 'คุณแน่ใจว่าต้องการลบคำตอบนี้หรือไม่',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'ยืนยัน',
            cancelButtonText: 'ยกเลิก'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("answers_delete") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: answerId
                    },
                    success: function() {
                        Swal.fire('ลบคำตอบสำเร็จแล้ว', '', 'success');
                        $(`#container_id_${index}`).remove();
                    },
                    error: function() {
                        Swal.fire('เกิดข้อผิดพลาดขณะลบคำตอบ', '', 'error');
                    }
                });
            }
        });
    }

    function populateEditModal(data) {
        $('#edit_question_text').val(data.question_text);
        $('#edit_time_limit').val(data.time_limit);
        $('#edit_video').attr('src', data.video_url);
        $('#edit_video_url').val(data.video_url);
        $('#edit_id').val(data.id);
    }

    function populateAnswersModal(data) {
        $('#answers-container').empty();

        data.answers.forEach((answer, index) => {
            const options = data.questions_all.map(question => {
                const selected = question.id === answer.next_question_id ? 'selected' : '';
                return `<option value="${question.id}" ${selected}>${question.question_text}</option>`;
            }).join('');

            const answerHtml = `
                <div id="container_id_${index}">
                    <input type="hidden" id="answer_id_${index}" name="answer_id[]" value="${answer.id}">
                    <div class="answer-item mt-3">
                        <label class="form-label">คำตอบ</label>
                        <input type="text" class="form-control" id="answer_text_${index}" name="answer_text[]" value="${answer.answer_text}" placeholder="คำตอบ">
                    </div>
                    <div class="answer-item mt-3">
                        <label class="form-label">รหัสคำถามถัดไป</label>
                        <select class="form-select" id="next_question_id_${index}" name="next_question_id[]">
                            <option value="">เลือกรหัสคำถามถัดไป</option>
                            ${options}
                        </select>
                    </div>
                    <div class="answer-item mt-3">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="is_correct[${index}]" value="1" ${answer.is_correct === 1 ? 'checked' : ''}>
                            <label class="form-check-label">คำถามสุดท้าย</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="is_correct[${index}]" value="0" ${answer.is_correct === 0 ? 'checked' : ''}>
                            <label class="form-check-label">มีคำถามถัดไป</label>
                        </div>
                    </div>
                    <div class="answer-item mt-3">
                        <button type="button" class="btn btn-danger btn-sm" onclick="deleteAnswer(${index})">
                            <i class="fa-solid fa-trash"></i> ลบ
                        </button>
                    </div>
                </div>
            `;
            $('#answers-container').append(answerHtml);
        });

        const hintText = data.hints ? data.hints.hint_text : '';
        $('#hint_text').val(hintText);

        $('#questions_id').val(data.questions ? data.questions.id : '');
    }

    function generateActionButtons(id) {
        return `
            <button type="button" class="btn btn-secondary btn-sm" onclick="answersQuestions(${id})">
                <i class="fa-solid fa-gear"></i>
            </button>
            <button type="button" class="btn btn-warning btn-sm" onclick="editQuestions(${id})">
                <i class="fa-solid fa-pen-to-square"></i>
            </button>
            <button type="button" class="btn btn-danger btn-sm" onclick="deleteQuestions(${id})">
                <i class="fa-solid fa-trash"></i>
            </button>
        `;
    }

    function reloadDataTable() {
        $('#questionsTable').DataTable().ajax.reload();
    }

    function showSuccessAlert(message) {
        Swal.fire(message, '', 'success');
    }

    function showErrorAlert(message) {
        Swal.fire(message, '', 'error');
    }

    document.getElementById('add-answer-btn').addEventListener('click', function() {
        const container = document.getElementById('answers-container');
        const answerCount = container.querySelectorAll('input[name="answer_text[]"]').length;

        $.ajax({
            url: '{{ route("questions_get_data") }}',
            method: 'GET',
            success: function(data) {
                const options = data.map(question => {
                    return `<option value="${question.id}">${question.question_text}</option>`;
                }).join('');

                const answerHtml = `
                    <div id="container_id_${answerCount}">
                        <div class="answer-item mt-3">
                            <label class="form-label">คำตอบ</label>
                            <input type="text" class="form-control" name="answer_text[]" placeholder="คำตอบ">
                        </div>
                        <div class="answer-item mt-3">
                            <label class="form-label">รหัสคำถามถัดไป</label>
                            <select class="form-select" name="next_question_id[]">
                                <option value="">เลือกรหัสคำถามถัดไป</option>
                                ${options}
                            </select>
                        </div>
                        <div class="answer-item mt-3">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="is_correct[${answerCount}]" value="1">
                                <label class="form-check-label">คำถามสุดท้าย</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="is_correct[${answerCount}]" value="0" checked>
                                <label class="form-check-label">มีคำถามถัดไป</label>
                            </div>
                        </div>
                        <div class="answer-item mt-3">
                            <button type="button" class="btn btn-danger btn-sm" onclick="removeAnswer(${answerCount})">
                                <i class="fa-solid fa-trash"></i> ลบ
                            </button>
                        </div>
                    </div>
                `;

                const div = document.createElement('div');
                div.innerHTML = answerHtml;
                container.appendChild(div);
            },
            error: function() {
                showErrorAlert('เกิดข้อผิดพลาดขณะดึงข้อมูลคำถาม');
            }
        });
    });

    function removeAnswer(answerCount) {
        const itemToRemove = document.getElementById(`container_id_${answerCount}`);
        if (itemToRemove) {
            itemToRemove.remove();
        }
    }
</script>
@endsection