@extends('admin/course-management/course-details/index', ['withoutCard' => true])

@section('main-content-tab')
    <div class="card mb-6">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h1 class="fs-18px fw-500 mb-0">Question Answer List</h1>
        </div>
        <div class="card-body faculty-table-card">
            <div class="table-responsive">
                <table class="table table-row-bordered data-table">
                    <thead>
                        <tr>
                            <th class="text-center">SL.</th>
                            <th class="text-center">Name</th>
                            <th class="text-center">Questions</th>
                            <th class="text-center">Description</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600 fw-bold">

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" tabindex="-1" id="kt_modal_QA_edit">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h3 class="modal-title">Update Answer</h3>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="edit-form" action="{{ route('course-answer.update') }}" method="POST">
                        @method('PUT')
                        @csrf
                        <input type="hidden" id="edit-id" name="id">
                        <div class="row g-2 mb-4">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="edit-answer" class="form-label">Answer</label>
                                    <textarea class="form-control" id="edit-answer" name="answer" placeholder="Description"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary rounded-btn">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade custom-modal" tabindex="-1" id="kt_modal_Answer">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h3 class="modal-title">Answers</h3>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-bordered table-row-dashed data-table-answer">
                                <thead>
                                    <tr>
                                        <th class="text-center">SL.</th>
                                        <th class="text-center">Name</th>
                                        <th class="text-center">Answer</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="text-gray-600 fw-bold">

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <form id="add-answer-form" action="{{ route('course-answer.add') }}" method="POST">
                        @method('POST')
                        @csrf
                        <input type="hidden" id="add-question_id" name="question_id">
                        <div class="row g-2 mb-4">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="add-answer" class="form-label">Add Answer</label>
                                    <textarea class="form-control" id="add-answer" name="answer" placeholder="Description"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary rounded-btn">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" tabindex="-1" id="kt_modal_QA_view">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h3 class="modal-title">View</h3>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row g-2 mb-4">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="view-title" class="form-label">Title</label>
                                <input class="form-control form-control-solid" id="view-title" name="title"
                                    placeholder="Title" readonly>
                            </div>

                            <div class="form-group">
                                <label for="view-name" class="form-label">Name</label>
                                <input class="form-control form-control-solid" id="view-name" name="name"
                                    placeholder="Name" readonly>
                            </div>

                            <div class="form-group">
                                <label for="view-description" class="form-label">Description</label>
                                <textarea class="form-control form-control-solid" id="view-description" name="description" placeholder="Description"
                                    disabled></textarea>
                            </div>

                            <div class="form-group">
                                <label for="view-answer" class="form-label">Answer</label>
                                <textarea class="form-control form-control-solid" id="view-answer" name="answer" placeholder="Description"
                                    disabled></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <button type="button" class="btn btn-primary rounded-btn">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('extra-extra-css')
    <link href="{{ asset('css/toastr.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{{ asset('css/dropify.min.css') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel='stylesheet' type='text/css'>
@endsection

@section('extra-extra-script')
<script src="{{ asset('js/jquery.js') }}"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('js/jszip.min.js') }}"></script>
<script src="{{ asset('js/pdfmake.min.js') }}"></script>
<script src="{{ asset('js/vfs_fonts.js') }}"></script>
<script src="{{ asset('js/buttons.html5.min.js') }}"></script>
<script type="text/javascript">
    $(function() {
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            aaSorting: [],
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],
            ajax: "{{ route('course-question-answer.index', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug]) }}",
            dom: 'Blfrtip',
            buttons: [{
                    extend: 'pdf',
                    exportOptions: {
                        columns: [0, 1, 2, 3] // Column index which needs to export
                    }
                },
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0, 1, 2, 3] // Column index which needs to export
                    }
                },
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [0, 1, 2, 3] // Column index which needs to export
                    }
                }
            ],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'action',
                    name: 'action'
                },
            ],
        });
        var answerTable = $('.data-table-answer').DataTable({
            processing: true,
            serverSide: true,
            aaSorting: [],
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],
            ajax: {
                url: "{{ route('course-question-answer-answers-list.index', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug]) }}",
                data: function(d) {
                    // Additional parameters can be passed here
                    // For example, filter value from form
                    d.question_id = $('#add-question_id').val();
                }
            },
            dom: 'Blfrtip',
            buttons: [{
                    extend: 'pdf',
                    exportOptions: {
                        columns: [0, 1, 2] // Column index which needs to export
                    }
                },
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0, 1, 2] // Column index which needs to export
                    }
                },
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [0, 1, 2] // Column index which needs to export
                    }
                }
            ],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'answer',
                    name: 'answer'
                },
                {
                    data: 'action',
                    name: 'action'
                },
            ],
        });
    });

    function loadCourseAnswers(id) {
        $.ajax({
            url: '{{ url('/api/course/question-answer') }}/' + id,
            method: 'GET',
            success: function(returnData) {
                var data = returnData.data;
                $('#add-question_id').val(data.id);
                $('#kt_modal_Answer').modal('show');
                $('.data-table-answer').DataTable().ajax.reload();
            },
            error: function(xhr, status, error) {
                // Handle error
                console.error(xhr.responseText);
            }
        });
    }

    function loadCourseAnswerEdit(id) {
        $.ajax({
            url: '{{ url('/api/course/question-answer/answer') }}/' + id,
            method: 'GET',
            success: function(returnData) {
                var data = returnData.data;
                $('#edit-id').val(data.id);
                $('#edit-answer').val(data.answer);
                $('#kt_modal_Answer').modal('hide');
                $('#kt_modal_QA_edit').modal('show');
            },
            error: function(xhr, status, error) {
                // Handle error
                console.error(xhr.responseText);
            }
        });
    }
    $(document).ready(function() {
        $('#edit-form').submit(function(event) {
            event.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: formData,
                success: function(response) {
                    $('#kt_modal_QA_edit').modal('hide');
                    toastr.success('Course Question Answer Updated!');
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                    toastr.error('Failed to update answer. Please try again later.');
                }
            });
        });

        $('#add-answer-form').submit(function(event) {
            event.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: formData,
                success: function(response) {
                    $('#kt_modal_Answer').modal('hide');
                    $('.data-table').DataTable().ajax.reload(null, false);
                    toastr.success('Course Question Answer Updated!');
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                    toastr.error('Failed to update answer. Please try again later.');
                }
            });
        });
    });

    function loadCourseQAview(id) {
        $.ajax({
            url: '{{ url('/api/course/question-answer') }}/' + id,
            method: 'GET',
            success: function(returnData) {
                var data = returnData.data;
                $('#view-id').val(data.id);
                $('#view-title').val(data.title);
                $('#view-name').val(data.name);
                $('#view-description').val(data.description);
                $('#view-answer').val(data.answer);
                $('#kt_modal_QA_view').modal('show');
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    }
</script>
<script>
    $(document).ready(function() {
        $('.menu.menu-column .menu-item-first:nth-child(11)').addClass('here');
        $('.menu.menu-column .menu-item-first:nth-child(11)').addClass('show');
        $('.menu.menu-column .menu-item-first:nth-child(11) .menu-sub.menu-sub-accordion .menu-item:nth-child(1) .menu-link')
            .addClass('active');
    });
</script>
<script src="{{ asset('js/toastr.min.js') }}"></script>
<script type="text/javascript">
    @if (Session::has('message'))
        var type = "{{ Session::get('alert-type', 'info') }}"
        switch (type) {
            case 'info':
                toastr.info("{{ Session::get('message') }}");
                break;
            case 'success':
                toastr.success("{{ Session::get('message') }}");
                break;
            case 'warning':
                toastr.warning("{{ Session::get('message') }}");
                break;
            case 'error':
                toastr.error("{{ Session::get('message') }}");
                break;
        }
    @endif

    @if (count($errors) > 0)
        @foreach ($errors->all() as $error)
            toastr.error("{{ $error }}");
        @endforeach
    @endif
</script>
@endsection