{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin_role' %}
{% set actions = [
    {
        'link': path('app_admin_role_new'),
        'title': 'Add New Role'|trans,
    }
] %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title': 'User Management',
    },
    {
        'title': 'Roles',
    }
]%}

{% block content %}
<div class="row">
        <!-- Left Section -->
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-secondary text-white border-bottom-0">
                    <h6 class="mb-0">Search</h6>
                </div>
                <div class="card-body">
                    <form action="{{ path('app_admin_role') }}" method="get">
                        <div class="form-row col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"style="float:right;"  >
                            <div class="form-group mb-2 col-12 col-sm-6 col-md-6 col-lg-8 col-xl-8 " style="float:left;margin-right: 5px;">
                                <input type="text" class="form-control" name="search_value" id="search_value" placeholder="Search by name / slug " value="{{ app.request.query.get('search_value') }}">
                            </div>
                            <button class="btn btn-primary col-4 col-sm-auto mb-2" name="is_filter" type="submit" value="true">Search</button>
                            <a class="btn btn-secondary col-4 col-sm-auto mb-2" href="{{ path('app_admin_role') }}">Reset</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
</div>
    <div class="card">
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>{{ knp_pagination_sortable(roles, 'Id', 'r.id') }}</th>
                    <th>{{ knp_pagination_sortable(roles, 'Name', 'r.name') }}</th>
                    <th>{{ knp_pagination_sortable(roles, 'Slug', 'r.slug') }}</th>
                    <th class="table-actions">Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for role in roles %}
                    {% include 'admin/roles/row.html.twig' %}
                {% else %}
                    <tr class="w-100 text-center">
                        <td class="border-none" colspan="4">No Records found</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': roles}) }}
    </div>
    <div id="delete_user_popup" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="" method="post" id="delete_user_form">
                    <div class="modal-header bg-danger">
                        <h6 class="modal-title text-white">Delete role</h6>
                        <button aria-label="Close" class="btn-close btn-close-white" data-bs-dismiss="modal"><span aria-hidden="true"></span></button></div>
                    <div class="modal-body">
                        <p>Are you sure you want to delete <strong id="user_delete_modal_user_email"></strong> role ?</p>
                        <hr>
                        <h6 class="font-weight-semibold">Please enter the slug of role, which You want to delete.</h6>
                        <input type="text" class="confirm-user-email form-control"/>
                        <span class="validation-invalid-label incorrect_code d-none text-danger">You entered the incorrect slug</span>
                        <span class="validation-invalid-label generic_error d-none text-danger">Something went wrong</span>
                        <input type="hidden" class="_csrf_token_user_delete" name="_csrf_token_user_delete" id="_csrf_token_user_delete" value="{{ csrf_token("usercsrf") }}">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn bg-danger approve-the-deletion-for-user text-white" data-style="zoom-in" data-spinner-size="16" data-spinner-color="#fff">Approve the Deletion</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        var selector_delete_button = document.querySelectorAll('.delete-user-email');
        var selector_delete_user_popup = new bootstrap.Modal(document.getElementById('delete_user_popup'), {});
        var selector_delete_form = document.getElementById("delete_user_form");

        selector_delete_button.forEach((a) => {
            a.addEventListener('click', function (e) {
                e.preventDefault();
                var role_slug = this.getAttribute('data-email');
                var role_id = this.getAttribute('data-id');
                var l = Ladda.create(document.querySelector('.approve-the-deletion-for-user'));
                document.getElementById('user_delete_modal_user_email').innerHTML = role_slug;
                document.querySelector('.ladda-label').classList.add('text-white');
                document.querySelector('.confirm-user-email').value = '';
                selector_delete_user_popup.show();
                selector_delete_form.addEventListener('submit', function (e) {
                    e.preventDefault();
                    var confirm_user_email = document.querySelector('.confirm-user-email').value;
                    var csrf_token = document.getElementById('_csrf_token_user_delete').value;
                    if (confirm_user_email !== role_slug) {
                        document.querySelector('.validation-invalid-label.incorrect_code').classList.remove('d-none');
                        setTimeout(function() {
                            document.querySelector('.validation-invalid-label.incorrect_code').classList.add('d-none')
                        }, 2500);
                    } else {
                        var delete_user_url = "{{path("app_admin_role_delete", {'id': "__user_ID__"})}}";
                        delete_user_url = delete_user_url.replace("__user_ID__", role_id);
                        var formData = new FormData();
                        formData.append('csrf', csrf_token);
                        l.start();
                        fetch(delete_user_url, {
                            method: 'POST',
                            body: formData
                        }).then(function (response) {
                            return response.json();
                        }).then(function (json) {
                            l.stop();
                            if (json.status) {
                                selector_delete_user_popup.hide();
                                window.location.reload();
                            } else {
                                document.querySelector('.generic_error').innerHTML = json.errorMessage;
                                document.querySelector('.generic_error').classList.remove('d-none');
                                setTimeout(function() {
                                    document.querySelector('.generic_error').classList.add('d-none');
                                }, 2500)
                            }
                        });
                    }
                });
            });
        });
    </script>
{% endblock  %}