{% 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>Manage User</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="">Add User</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 sorting_asc 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;">#</th>
                                            <th class="sorting text-center" tabindex="1" aria-controls="style-3"
                                                colspan="1"
                                                style="width: 44.2344px;">Name</th>
                                            <th class="sorting text-center" tabindex="2" aria-controls="style-3"
                                                colspan="1"
                                                style="width: 44.2344px;">Email</th>
                                            <th class="sorting text-center" tabindex="3" aria-controls="style-3"
                                                style="width: 79.7969px;">Phone No.</th>
                                            <th class="sorting text-center" tabindex="4" aria-controls="style-3"
                                                style="width: 79.7969px;">Date of Birth</th>
                                            <th class="sorting text-center" tabindex="5" aria-controls="style-3"
                                                style="width: 79.7969px;">Active</th>
                                            <th class="sorting text-center" tabindex="6" aria-controls="style-3"
                                                style="width: 79.7969px;">Action</th>
                                        </tr>
                                    </thead>
                                    <thead id="filterboxrow">
                                        <tr>
                                            <th class="text-center" rowspan="1" colspan="1">id</th>
                                            <th class="text-center" rowspan="1" colspan="1">id</th>
                                            <th rowspan="1" colspan="1">Email</th>
                                            <th rowspan="1" colspan="1">Name</th>
                                            <th rowspan="1" colspan="1">Phone No.</th>
                                            <th rowspan="1" colspan="1">Date of Birth</th>
                                            <th class="invisible" rowspan="1" colspan="1">Active</th>
                                            <th class="invisible" rowspan="1" colspan="1">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>
        var viewUrl = '{% url "module_auth:user_view" id=0 %}'
        {% comment %} var editUrl = 
        var deleteUrl = {% endcomment %}

        var table = $('#table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{% url 'module_auth:users_list'%}",
                type: "GET",
            },
            columns: [
                { 
                    data: null, 
                    className : "text-center",
                    render: function (data, type, row) {
                        // Generate checkbox HTML
                        var checkboxHTML = '<div class="form-check form-check-danger">';
                        checkboxHTML += '<input class="form-check-input archive-checkbox" type="checkbox" value="' + row.id + '" id="checkbox-' + row.id + '">';
                        checkboxHTML += '</div>';
                        
                        return checkboxHTML;
                    }
                },
                { 
                    data: "id", 
                    className : "text-center" 
                },
                { 
                    data: "first_name", 
                    className : "text-center" 
                },
                { 
                    data: "email", 
                    className : "text-center" 
                },
                { 
                    data: "phone_no", 
                    className : "text-center" 
                },
                { 
                    data: "date_of_birth", 
                    className : "text-center" 
                },
                { 
                    data: "is_active",
                    className : "text-center",
                    render: function (data, type, row) {
                        // Check if active is true or false and set checked attribute accordingly
                        var checkedAttribute = data ? 'checked' : '';
                        
                        // Generate switch HTML
                        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 + '" ' + checkedAttribute + '>';
                        switchHTML += '</div>';
                        
                        return switchHTML;
                    }
                },
                { 
                    data: null, 
                    className: "text-center", // Add class to action column
                    render: function (data, type, row) {
                        return `
                            <div class="dropdown">
                                <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink${row.id}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <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-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink${row.id}" style="">
                                    <a class="dropdown-item view" href="javascript:void(0);" data-id="${row.id}">View</a>
                                    <a class="dropdown-item edit" href="javascript:void(0);" data-id="${row.id}">Edit</a>
                                    <a class="dropdown-item delete" href="javascript:void(0);" data-id="${row.id}">Delete</a>
                                </div>
                            </div>`;
                    }
                }
            ],
            debug: true, // Enable debugging mode
            columnDefs: [
                {
                    targets: [1, 2, 3, 4, 5],
                    searchable: true,
                    orderable: true
                },
                {
                    targets: [0, -1], // Targeting the last column (action column)
                    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: function () {
                        // Add your action here, e.g., redirect to archive page
                        window.location.href = '/archive';
                    },
                    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 = '/archive';
                    }
                }
            ],
            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: function () {
                var api = this.api();
        
                // Add individual search inputs to the first row of the thead section
                $('thead#filterboxrow th').each(function (index) {
                    var title = $(this).text();
                    var input = $('<input type="text" class="form-control" placeholder="Search ' + title + '"/>')
                        .on('keyup change', function () {
                            if (api.column(index).search() !== this.value) {
                                api
                                    .column(index)
                                    .search(this.value)
                                    .draw();
                            }
                        });
    
                    $(this).empty().append(input);
                });

                // Add event listener for checkbox change
                $('body').on('change', 'input[type="checkbox"]', function(){
                    var checkedCount = $('#table tbody input.archive-checkbox:checked').length;
                    var archiveButton = $('.buttons-archive');
                    console.log("checked checkbox count", + checkedCount)
                    // Show or hide the archive button based on the number of checked checkboxes
                    if (checkedCount > 0) {
                        console.log("checked it")
                        archiveButton.show();
                    } else {
                        console.log("unchecked it")
                        archiveButton.hide();
                    }
                });
                
                // Bind click event for the "View" buttons
                $('body').on('click', '.view', function(){
                    var id =$(this).data('id')

                    window.location.href = viewUrl.replace('0', id);

                    console.log('Viewing user with Id:', id)
                });

                // Bind click event for the "View" buttons
                $('body').on('click', '.edit', function(){
                    var id =$(this).data('id')

                    console.log('Viewing user with Id:', id)
                });

                // Bind click event for the "Delete" buttons
                $('body').on('click', '.delete', function() {
                    var id = $(this).data('id');
                    // Perform action for deleting user with id userId
                    console.log('Deleting user with ID:', id);
                    Swal.fire({
                        title: 'Are you sure?',
                        text: 'Once deleted, you will not be able to recover this user!',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#3085d6',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            console.log("success")
                        }
                    })
                });
            }
        });

    </script>
{% endblock %}