{% 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/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>Push Notification</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 %}
                <a class="btn btn-primary mb-2 me-4" href="{% url 'module_notification:notification_add' %}">Add</a>
            </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 dt-no-sorting text-center" tabindex="0"
                                                aria-controls="style-3" aria-sort="ascending" style="width: 50.2656px;">
                                                #</th>
                                            <th class="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;">Title</th>
                                            <th class="sorting text-center" tabindex="2" aria-controls="style-3"
                                                colspan="1" style="width: 44.2344px;">Message</th>
                                            <th class="sorting text-center" tabindex="2" aria-controls="style-3"
                                                colspan="1" style="width: 44.2344px;">Created on</th>
                                            <th class="sorting text-center" tabindex="5" aria-controls="style-3"
                                                style="width: 79.7969px;">Active</th>
                                            <th class="text-center dt-no-sorting" tabindex="6" aria-controls="style-3"
                                                style="width: 79.7969px;">Action</th>
                                        </tr>
                                    </thead>
                                    
                                    <tbody>

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

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}

{% block javascript %}
<!-- include required js 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 actionUrl = '{% url "module_notification:notification_action" %}'
var mainUrl = '{% url "module_notification:notification_list" %}?deleted_flag=False';
var editUrl = "{% url 'module_notification:notification_edit' pk=0 %}"
var viewArchiveUrl = "{% url 'module_notification:notification_archive' %}"
var notifyUrl = "{% url 'module_notification:notification_send' %}"

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

// Function to initialize DataTable
function initializeDataTable(tableName, mainUrl) {
    return  tableName.DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: mainUrl,
            type: "GET",
        },
        columns: [
            { data: null, className: "text-center", render: renderCheckbox },
            { data: "id", className: "text-center" },
            { data: "title", className: "text-center" },
            { data: "message", className: "text-center" },
            { data: "timestamp", className: "text-center" },
            { data: "active", className: "text-center", render: renderSwitch },
            { data: null, className: "text-center", render: renderActions }
        ],
        debug: true,
        columnDefs: [
            { targets: [1, 2, 3], searchable: true, orderable: true },
            { targets: [0, -1], searchable: false, orderable: false }
        ],
        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: [
            { 
                text: 'Archive', 
                className: "btn btn-dark buttons-archive", 
                action: archiveAction, 
                init: function(api, node, config){
                    $(node).hide();
                } 
            },
            { 
                text: 'View Archive List', 
                className: "btn btn-dark ", 
                action: function () {
                    // Add your action here, e.g., redirect to archive page
                    window.location.href = viewArchiveUrl;
                }
            }
        ],
        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,
        initComplete: initCompleteCallback
    });
}

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

// Render checkbox
function renderCheckbox(data, type, row) {
    var checkboxHTML = '<div class="form-check form-check-danger">';
    checkboxHTML += '<input class="form-check-input archive-checkbox" type="checkbox" value="' + row.id + '" data-id="'+ row.id +'" id="checkbox-' + row.id + '">';
    checkboxHTML += '</div>';
    return checkboxHTML;
}

// Render switch
function renderSwitch(data, type, row) {
    var checkedAttribute = data.toLowerCase() === 'true' ? 'checked' : '';
    var switchHTML = '<div class="switch form-switch-custom switch-inline form-switch-primary">';
        switchHTML += '<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-checked' + row.id + '" data-id="' + row.id + '" ' + checkedAttribute + '>';
        switchHTML += '</div>';
    return switchHTML;
}

// Render actions
function renderActions(data, type, row) {
    return `
    <a href="${ editUrl.replace('0',row.id)}" class="bs-tooltip edit" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-original-title="Edit" data-bs-original-title="Edit" aria-label="Edit">
        <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-edit-2 p-1 br-8 mb-1"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
    </a>
    <a href="javascript:void(0);" data-id="${row.id}" class="bs-tooltip send" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-original-title="Reply" data-bs-original-title="Reply" aria-label="Reply">
        <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-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
    </a>
    
    `;
}

// Callback function for DataTable initialization complete event
function initCompleteCallback() {
    var api = this.api();

    // Add event listener for checkbox change
    $('body').on('change', 'input[type="checkbox"]', function () {
        var checkedCount = $('tbody input.archive-checkbox:checked').length;
        var archiveButton = $('.buttons-archive');
        archiveButton.toggle(checkedCount > 0);
    });

}

function HideButton(className) {
    // Hide archive button
$(`.${className}`).hide();
}

// Function to handle archive action
function archiveAction() {
    // Get all the checked checkboxes
    var checkedCheckboxes = $('.archive-checkbox:checked');
    // If no checkboxes are checked, show an error message
    if (checkedCheckboxes.length === 0) {
        Swal.fire({
            title: 'No record selected',
            text: 'Please select at least one record to archive.',
            icon: 'error',
            showConfirmButton: true
        });
        return;
    }
    // Get the IDs of the checked checkboxes
    var ids = checkedCheckboxes.map(function() {
        return $(this).val();
    }).get();
    // Perform archive action with the collected user IDs
    Swal.fire({
        title: 'Are you sure?',
        text: 'Once archived, you will recover it from archive list!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, archive it!'
    }).then((result) => {
        if (result.isConfirmed) {
            // Perform archive action
            $.ajax({
                url: actionUrl, // Replace with your archive endpoint
                type: 'POST',
                data: { 
                    action: "archive",
                    ids: ids,
                    csrfmiddlewaretoken: '{{csrf_token}}'
                 },
                success: function(response) {
                    // Show success message
                    Swal.fire({
                        title: 'Done!',
                        text: response.msg,
                        icon: 'success',
                        showConfirmButton: true
                    });
                    HideButton("buttons-archive");
                    // Optionally, you can reload the DataTable after successful archive
                    reloadDataTable();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    var response = JSON.parse(jqXHR.responseText);
                    Swal.fire({
                      title: 'Error!',
                      text: response.message,
                      icon: 'error',
                      showConfirmButton: true
                    });
                }
            });
        }
    });
}

// Function to add event listener for switch
function activeSwitchEventListener() {
    // Add event listener for switch change event
    $('body').on('change', '.switch-input', function() {
        var rowId = $(this).closest('tr').find('.switch-input').data('id');
        var isActive = $(this).prop('checked');
        console.log(rowId, isActive)
        // Perform active toggle action for the current user
        $.ajax({
            url: actionUrl, // Replace with your active toggle endpoint
            type: 'POST',
            data: { 
                action: "active",
                ids: [rowId],
                active: isActive,
                csrfmiddlewaretoken: '{{csrf_token}}'
             },
            success: function(response) {
                // Show success message
                Swal.fire({
                    title: 'Done!',
                    text: response.msg,
                    icon: 'success',
                    showConfirmButton: true
                });
                // Reload the DataTable after successful toggle
                reloadDataTable();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                var response = JSON.parse(jqXHR.responseText);
                Swal.fire({
                  title: 'Error!',
                  text: response.message,
                  icon: 'error',
                  showConfirmButton: true
                });
            }
        });
    });
}

function sendNotificationAction() {
    $('body').on('click', '.send', function() {
        var id = $(this).closest('tr').find('.send').data('id');

        Swal.fire({
            title: 'Send Notification?',
            text: 'Once sent, the notification will be delivered to the user.',
            icon: 'info',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, send it!'
        }).then((result) => {
            if (result.isConfirmed) {
                // Perform notification sending action
                $.ajax({
                    url: notifyUrl, // Replace with your notification sending endpoint
                    type: 'POST',
                    data: { 
                        id: id,
                        csrfmiddlewaretoken: '{{csrf_token}}'
                     },
                    success: function(response) {
                        // Show success message
                        Swal.fire({
                            title: 'Notification Sent!',
                            text: response.msg,
                            icon: 'success',
                            showConfirmButton: true
                        });
                        // Optionally, you can perform any other actions after sending the notification
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        var response = JSON.parse(jqXHR.responseText);
                        Swal.fire({
                          title: 'Error!',
                          text: response.message,
                          icon: 'error',
                          showConfirmButton: true
                        });
                    }
                });
            }
        });
    });
}



</script>
{% endblock %}