{% extends 'base_structure/layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
    <!-- include required css cdn link through html here -->

    {% include "cdn_through_html/datatable_cdn_css.html" %}
    {% include "cdn_through_html/animate_cdn_css.html" %}
    {% include "cdn_through_html/modal_cdn_css.html" %}
    {% include "cdn_through_html/switches_cdn_css.html" %}
    {% include "cdn_through_html/sweetalert2_cdn_css.html" %}

{% endblock %}

{% block content %}

<div class="row layout-top-spacing">
    <div class="col-lg-12">
        <div class="row mb-2">
            <div class="col">
                <h3>Manage Feedback</h3>
            </div>
            <div class="col text-end">
                {% comment %} <button class="btn btn-dark mb-2 me-4" onclick="history.back()">
                    <i class="fa fa-arrow-left"></i>
                    Back
                </button> {% endcomment %}
                {% comment %} <a class="btn btn-success  mb-2 me-4" href="{% url 'module_cms:faq_category_add' %}">Add Category</a> {% endcomment %}
                {% comment %} <a class="btn btn-primary mb-2 me-4" href="{% url 'module_cms:faq_add' %}">Add FAQ</a> {% endcomment %}
            </div>
        </div>
    
        <div class="row layout-spacing">
            <div class="col-lg-12">
                <div class="statbox widget box box-shadow">
                    <div class="widget-content widget-content-area">
                        <div id="table_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                            
                            <div class="table-responsive">
                                <table id="table" class="table style-3 dt-table-hover dataTable" role="grid"
                                    aria-describedby="style-3_info">
                                    
                                    <thead>
                                        <tr role="row">
                                            <th class="checkbox-column sorting_asc text-center" tabindex="0"
                                                aria-controls="style-3" aria-sort="ascending"
                                                style="width: 50.2656px;">Record Id</th>
                                            <th class="sorting text-center" tabindex="1" aria-controls="style-3"
                                                colspan="1"
                                                style="width: 44.2344px;">Email Address</th>
                                            <th class="sorting text-center" tabindex="2" aria-controls="style-3"
                                                colspan="1"
                                                style="width: 44.2344px;">Reaction</th>
                                                <th class="sorting text-center" tabindex="3" aria-controls="style-3"
                                                colspan="1"
                                                style="width: 44.2344px;">Message</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                       
                                    </tbody>
                                </table>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

 <!-- modal for View Feedback Question Answer  -->

<div class="modal fade" id="feedbackmodal" tabindex="-1" role="dialog" aria-labelledby="feedbackmodalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
      <div class="modal-content" >
        <div class="modal-header">
          <h5 class="modal-title" id="feedbackmodalLabel">Feedback</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          </button>
        </div>
        <div class="modal-body">
            <p class="mb-0" id="messageText"></p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-dark" data-bs-dismiss="modal">Discard</button>
        </div>
      </div>
    </div>
</div>
{% endblock content %}

{% block javascript %}

    <!-- include required css cdn link through html here -->

    {% include "cdn_through_html/datatable_cdn_js.html" %}
    {% include "cdn_through_html/datatable_button_cdn_js.html" %}
    {% include "cdn_through_html/sweetalert2_cdn_js.html" %}
    
    <script>
        
    
// Define DataTable instance
var dataTableInstance;
var mainUrl = "{% url 'module_support:feedback_list' %}?deleted_flag=False"

// Entry point
$(document).ready(function() {
    
    tableName = $('#table');
    dataTableInstance = initializeDataTable(tableName, mainUrl);
    
});

// Function to initialize DataTable
function initializeDataTable(tableName, mainUrl) {
    return tableName.DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: mainUrl,
            type: "GET",
        },
        columns: [
            { data: "id", className: "text-center" },
            { data: "principal" },
            { data: "feedback_reaction" },
            {
                data: "comment",
                render: function (data, type, row) {
                    return `<button class="btn btn-primary view-comment" data-comment="${data}">View</button>`; 
                }
            }
        ],
        debug: true,
        columnDefs: [
            {
                targets: [3],
                render: function (data, type, row) {
                    // Adjust the length of text you want to show before truncating
                    var maxLength = 40;
                    // Truncate the text if it exceeds the maxLength
                    var truncatedText = data.length > maxLength ? data.substr(0, maxLength) + '...' : data;
                    // Return the truncated text
                    return truncatedText;
                }
            },
            {
                targets: [0, 1, 2, 3],
                searchable: true,
                orderable: true
            },
        ],
        dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'Bf>>>" +
            "<'table-responsive'tr>" +
            "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
        buttons: [
            
        ],
        oLanguage: {
            oPaginate: { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
            sInfo: "Showing page _PAGE_ of _PAGES_",
            sSearch: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
            sSearchPlaceholder: "Search...",
            sLengthMenu: " _MENU_",
        },
        stripeClasses: [],
        lengthMenu: [5, 10, 20, 50],
        pageLength: 10
    });
}

// Function to reload the DataTable
function reloadDataTable() {
    dataTableInstance.ajax.reload();
}

$(document).on("click", ".view-comment", function() {
    var comment = $(this).data("comment");
    $('#messageText').text(comment);
    $('#feedbackmodal').modal('show');
});




</script>
{% endblock %}