{% load humanize i18n static %}

{% block head %}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
<!-- Add FontAwesome CDN link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-rHyoN1iiz4BywXFF6z9vxCpIH1a5zXYjRTm86aK5r5Pm5Pd1PfFqW1uSjJlWtJf6" crossorigin="anonymous">

{% endblock %}

{% block content %}
{% language 'id' %}
    {% include "header.html" %}
    <!-- main page content -->
        <div class="accordion-body">
            <div style="display: flex; justify-content: space-between;">
                <h5 class="h5">Semua Akses</h5>
                <div style="display:flex">

                </div>
            </div>
            <p style="border-bottom: 1px solid grey;" class="mt-2 mb-3 h5"></p>
            <div class="row gy-3" id="table-laporan">
                <table width="100%" style="width:100% !important; cursor: pointer;" id="item-akses" class="table dataTable table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Nama</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div> 
        </div>

        <div class="modal fade" id="mdAkses" tabindex="-1" role="dialog" aria-labelledby="mdAksesLabel" aria-hidden="true">
            <div class="modal-dialog" style="max-width: 80%" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="mdAksesLabel">Form Edit Akses</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        <form id="formTambahAkses">
                            {% csrf_token %}
                            <div class="row gy-3" id="table-laporan">
                                <table width="100%" style="width:100% !important; cursor: pointer;" id="table-akses" class="table dataTable table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th class="text-center">#</th>
                                            <th class="text-center">Nama Menu</th>
                                            <th class="text-center">Akses</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div> 
                        </form>
                        <!-- <div class="modal-footer">
                            <button class="btn btn-primary" data-action="tambah" data-id="" type="button" id="submitFormAkses">Submit</button>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <style>
    .dataTables_filter{
        float: right;
    }
</style>
    {% include "footer.html" %}
    <script src="https://cdn.jsdelivr.net/npm/alert2@10"></script>
<script>
    function updateValue(inputElement) {
        inputElement.setAttribute('value', inputElement.value);
    }
    var myForm = document.getElementById('formTambahAkses');
    var submitButton = document.getElementById('submitFormAkses');
    submitButton.addEventListener('click', function() {
        checkAction = $('#submitFormAkses').attr('data-action');
        console.log(checkAction)
        var formData = new FormData(myForm);

        Swal.fire({
            title: 'Loading',
            html: '<div class="lds-dual-ring"></div>', // You can use a custom loading spinner here
            icon: 'warning',
            allowOutsideClick: false,
            showCancelButton: false,
            showConfirmButton: false,
        });

        // Perform Ajax request
        var xhr = new XMLHttpRequest();
        if(checkAction == 'update'){
            id = $('#submitFormAkses').attr('data-id');
            xhr.open('POST', '/changemenu/', true);
        }

        // Send the form data as the request payload
        xhr.send(formData);

        // Set up the callback
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                Swal.fire({
                    title: 'Akses telah ditambahkan.',
                    text: 'Terimakasih.',
                    customClass: {
                        icon: 'custom-swal-icon', // Add a custom class for the icon
                    },
                    timer: 3000,
                    imageUrl: 'https://wavahusada.com/pendaftaran/public/images/Puas.png', // Your custom image URL
                    imageWidth: 135, // Set the width of the image
                    imageHeight: 100, // Set the height of the image
                })
                location.reload()
            } else {
                console.error('Request failed with status:', xhr.status);
            }
        };
    });

</script>

<script>
    $('#item-akses').DataTable({
        "responsive":true,
        "ajax": {
            "url": "{% url 'get_group' %}",
            "dataSrc": ""  // Specify that the data source is at the root level
        },
        "language": {
            "search": "", // Remove the search label
            "searchPlaceholder": "Search..." // Set the placeholder text
        },
        "columns": [
            {
            "data": null,
            "width" : "5%",
            "render": function (data, type, row, meta) {
                // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                return meta.row + 1;
            }
            },
            { "data": "name", "width" : "20%" },
            {
                "data": null,
                "render": function (data, type, row) {
                    // Create a custom button within the cell
                    return `
                        <div style="" class="button-container">
                            <button type="button" data-toggle="modal" data-target="#mdAkses" class="btn btn-warning btn-sm text-light" onclick="editakses(${row.id})">Edit Akses</button>
                        </div>
                    `;
                },
                "width" : "30%",
                "class": "text-center",
            },
        ],
    });
    $('.dataTable').parent('div').addClass('scrollX');

    function editakses(id){
        $('#table-akses').DataTable().clear().destroy();
        $('#table-akses').DataTable({
            // "responsive":true,
            "lengthChange": false, // Disable the Show entries dropdown
            "info": false, 
            "ajax": {
                "url": "/getmenuaccessbygroupid/" + id,
                "dataSrc": ""  // Specify that the data source is at the root level
            },
            "language": {
                "search": "", // Remove the search label
                "searchPlaceholder": "Search..." // Set the placeholder text
            },
            "columns": [
                {
                "data": null,
                "render": function (data, type, row, meta) {
                    // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                    return meta.row + 1;
                }
            },
            { "data": "name", },
            {
                "data": null,
                "render": function (data, type, row, meta) {
                    // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                    if (row.access_status == true) {
                        var value = '✔'; // Checkmark symbol
                    } else {
                        var value = '✘'; // Cross symbol
                    } 
                    return `<div style="width: 100%;text-align: -webkit-center;"><div style="width: 450px;text-align:center;"><div style="width: 100%"><input id="checkSehat" readonly="" style="margin: 10px 10px;cursor:pointer;border: 1px solid; width:25px;margin-bottom: 5px;height: 25px;outline:none;text-align: center;font-size: 15px;" type="text" onclick="changeStatus('${id}','${row.id}','${row.access_status}')" value="${value}">CREATE
                            <input id="checkSehat" readonly="" style="margin: 10px 10px;cursor:pointer;border: 1px solid; width:25px;margin-bottom: 5px;height: 25px;outline:none;text-align: center;font-size: 15px;" type="text" value="${value}">READ
                            <input id="checkSehat" readonly="" style="margin: 10px 10px;cursor:pointer;border: 1px solid; width:25px;margin-bottom: 5px;height: 25px;outline:none;text-align: center;font-size: 15px;" type="text" value="${value}">UPDATE
                            <input id="checkSehat" readonly="" style="margin: 10px 10px;cursor:pointer;border: 1px solid; width:25px;margin-bottom: 5px;height: 25px;outline:none;text-align: center;font-size: 15px;" type="text" value="${value}">DELETE </div></div>
                    `;
                },
            },
            
            
            ],
        });
    }
</script>
<script>
function changeStatus(group_id, menu_id, status) {
    var csrftoken = $("[name=csrfmiddlewaretoken]").val();
    if(status == true){
        var change_status = false
    } else {
        var change_status = true
    }
    $.ajax({
        type: 'POST',
        url: '/changemenu',  // Update with your actual URL
        data: {
            'group_id': group_id,
            'menu_id': menu_id,
            'status': status
        },
        headers: {
            'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
        },
        success: function(response) {
            // Remove the menu item from the DOM
            location.reload()
        },
        error: function(xhr, errmsg, err) {
            alert('Error: ' + xhr.status + ': ' + xhr.responseText);
        }
    });
}

  // Initial setup to set the appropriate content based on the initial value
  window.onload = function () {
    var checkSehatInput = document.getElementById('checkSehat');
    if (checkSehatInput.value === 'true') {
      checkSehatInput.value = '✔'; // Checkmark symbol
    } else {
      checkSehatInput.value = '✘'; // Cross symbol
    }
  };
</script>
{% endlanguage %}
{% endblock %}
<!-- checkSehatInput.value = '✓';
} else {
  checkSehatInput.value = '✗'; -->