@extends('admin.layouts.default')
@section('title', 'Roles')
@section('content')

<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <div class="d-flex align-items-center">
                <input type="text" id="roleSearchInput" class="form-control me-2" placeholder="Search roles" style="max-width: 250px;">

                <!-- Filter Button -->
                <button type="button" id="roleFilterButton" class="btn btn-primary">Filter</button>
                <button type="button" id="refreshFilterButton" class="btn btn-secondary ms-2">Reset</button>
            
            </div>
            <h1 class="page-title mb-0 text-primary"></h1>
            <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
                <div class="page-rightheader">
                    <div>
                        <button type="button" class="btn btn-outline-primary me-1 " id="add-mod" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable3">
                            <i class="fa fa-plus"></i>
                            Add Roles
                        </button>
                        @include('admin/permissions/roles/create-edit')

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

        <div class="card ">
            <div class="card-header justify-content-between">
                <h3 class="card-title">
                    Roles
                </h3>

            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="website_data_table" class="table text-nowrap table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">Role Name</th>
                                <th scope="col">Permissions</th>
                                <!-- <th scope="col">token</th>
                                <th scope="col">status</th>
                                <th scope="col">logo</th> -->
                                <th scope="col">action</th>
                                <!-- <th scope="col">created_at</th> -->
                                <!-- <th scope="col">Action</th>  -->
                            </tr>
                        </thead>
                        <tbody>

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



        </div>

    </div>
</div>

<script>
    $(document).ready(function() {
    var table = $('#website_data_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: base_url + '/roles-list',  // Your API endpoint
            data: function(d) {
                // Add the role_name parameter from the input field to the request payload
                d.role_name = $('#roleSearchInput').val();
            }
        },
        columns: [{
                data: 'name',
                name: 'name'
            },
            {
                data: null,
                name: 'permissions',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    var permissionsButton = '<a href="' + base_url + '/roles-permissions/' + row.id + '" class="btn btn-primary btn-sm permissions-link">' +
                        '<i class="ri-lock-line"></i>' + // Example icon
                        ' Permissions' +
                        '</a>';
                    return permissionsButton;
                }
            },
            {
                data: null,
                name: 'action',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    var editButton = '<button type="button" class="mx-2 btn btn-primary btn-sm edit-button" data-id="' + row.id + '">' +
                        '<i class="ri-edit-line""></i>' +
                        '</button>';
                    return editButton;
                }
            }
        ]
    });

    // Function to clear the form
    function clearForm() {
        $('#RoleForm')[0].reset(); // Clear the form
        $('#role-id').val(''); // Clear the ID field
        $('#name').val(''); // Clear other fields if needed
    }

    // Function to clear error messages
    function clearErrors() {
        $('#error-name').text(''); // Clear the error message for title
        $('#error-role_type').text('');
    }

    // Add new role modal functionality
    $('#add-mod').on('click', function() {
        clearErrors();
        clearForm();
        $('#role-id').val(''); 
        $('#submit-button').text('Save Changes'); 
        $('#RoleForm')[0].reset(); // Clear the form
    });

    // Edit role functionality
    $('#website_data_table').on('click', '.edit-button', function() {
        var id = $(this).data('id');

        $.ajax({
            url: base_url + '/roles-list-show/' + id, // Adjust the URL according to your route
            type: 'GET',
            success: function(response) {
                clearErrors();
                // Populate the modal with the fetched data
                $('#role-id').val(response.id);
                $('#name').val(response.name);
                $('#role_type').val(response.type); // Automatically select the role type
                $('#exampleModalScrollable3').modal('show');
                $('#submit-button').text('Update Changes'); // Change button text for editing
            },
            error: function(xhr) {
                toastr.error('Error fetching data.');
            }
        });
    });

    // Permissions button functionality
    $('#website_data_table').on('click', '.permissions-button', function() {
        var url = $(this).data('url'); // Get the URL from the button's data attribute
        window.location.href = url;    // Redirect to the URL
    });

    // Role filter functionality on Filter button click
    $('#roleFilterButton').on('click', function() {
        $('#website_data_table').DataTable().ajax.reload(); // Reload DataTable to reflect changes
    });

    // Reset button functionality
    $('#refreshFilterButton').on('click', function() {
        // Clear the search input and reset the dropdown
        $('#roleSearchInput').val(''); // Clear the search input

        // Reload the DataTable with the cleared filters
        $('#website_data_table').DataTable().ajax.reload(); // Reload DataTable to reflect changes
    });
});
</script>
@endsection