@extends('layouts/layoutMaster')

@section('title', 'UAC — Roles')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/@form-validation/umd/styles/index.min.css') }}" />
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/bundle/popular.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-bootstrap5/index.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-auto-focus/index.min.js') }}"></script>
@endsection

@section('page-script')
    <script>
        var rolesDt = null;
        var filterState = { mode: '', status: '' };

        window.openRoleModal = async function(id) {
            resetRoleForm();
            var data = await pdwl('api/role' + (id ? '/' + id : ''), {});
            if (!data) return;

            var d = data.data;
            var fd = data.formData || {};

            $('#role-modal-title').text(d ? 'Edit Role' : 'Add Role');

            if (d && d.role) {
                $('#r-iuid').val(d.role.id);
                $('#r-name').val(d.role.name || '');
                $('#r-description').val(d.role.description || '');
                $('#r-rank').val(d.role.rank_order || '');
            }

            var modeStr = '<option value="">— Select mode —</option>';
            (fd.modesSel || []).forEach(function(m) {
                modeStr += '<option value="' + m.id + '"' + (d && d.role && d.role.mode_id == m.id ? ' selected' : '') + '>' + m.name + '</option>';
            });
            $('#r-mode').html(modeStr);

            var stStr = '<option value="">— Select status —</option>';
            (fd.statusSel || []).forEach(function(s) {
                stStr += '<option value="' + s.id + '"' + (d && d.role && d.role.status == s.id ? ' selected' : '') + '>' + s.name + '</option>';
            });
            $('#r-status').html(stStr);

            if (d && d.privileges) {
                var prStr = '<h6 class="fw-semibold mb-3">Module Privileges</h6>';
                prStr += '<div class="table-responsive"><table class="table table-sm table-bordered mb-0">';
                prStr += '<thead><tr><th>Module</th>';
                (fd.privilegesSel || []).forEach(function(pr) {
                    prStr += '<th class="text-center">' + pr.name + '</th>';
                });
                prStr += '</tr></thead><tbody>';
                d.privileges.forEach(function(pri) {
                    prStr += '<tr><td>' + pri.name + '</td>';
                    (fd.privilegesSel || []).forEach(function(ps) {
                        prStr += '<td class="text-center"><input type="radio" class="form-check-input r-privileges" name="' + pri.id + '" value="' + ps.id + '"' + (pri.privilege == ps.id ? ' checked' : '') + '></td>';
                    });
                    prStr += '</tr>';
                });
                prStr += '</tbody></table></div>';
                $('#r-privileges-container').html(prStr);
            } else {
                $('#r-privileges-container').html('');
            }

            $('#role-modal').modal('show');
        };

        function resetRoleForm() {
            $('#r-iuid').val('');
            $('#r-name').val('');
            $('#r-description').val('');
            $('#r-rank').val('');
            $('#r-mode').html('');
            $('#r-status').html('');
            $('#r-privileges-container').html('');
        }

        window.saveRole = async function(e) {
            e.preventDefault();
            var privileges = [];
            $('input.r-privileges:checked').each(function() {
                privileges.push({ name: $(this).attr('name'), value: $(this).val() });
            });

            var iuid = $('#r-iuid').val();
            var payload = {
                name: $('#r-name').val(),
                modeId: $('#r-mode').val(),
                description: $('#r-description').val(),
                rankOrder: $('#r-rank').val(),
                status: $('#r-status').val(),
                privileges: privileges
            };

            var url = iuid ? 'api/role/' + iuid + '/update' : 'api/role/create';
            var data = await pdwl(url, payload);
            if (data) {
                showResponse(data.message, data.success ? 'success' : 'error');
                if (data.success) {
                    $('#role-modal').modal('hide');
                    rolesDt.ajax.reload();
                }
            }
        };

        window.deleteRole = async function(id) {
            if (await showConfirmation()) {
                var data = await pdwl('api/role/' + id + '/delete', {});
                if (data) {
                    showResponse(data.message, data.success ? 'success' : 'error');
                    if (data.success) rolesDt.ajax.reload();
                }
            }
        };

        function getActiveFilterCount() {
            var count = 0;
            if (filterState.mode) count++;
            if (filterState.status) count++;
            return count;
        }

        function updateFilterBadge() {
            var count = getActiveFilterCount();
            var $badge = $('#filter-count-badge');
            if (count > 0) {
                $badge.text(count).removeClass('d-none');
            } else {
                $badge.addClass('d-none');
            }
        }

        function applyFilters() {
            filterState.mode = $('#filter-mode').val();
            filterState.status = $('input[name="filterStatus"]:checked').val();
            rolesDt.draw();
            updateFilterBadge();
            bootstrap.Offcanvas.getInstance(document.getElementById('roleFilters'))?.hide();
        }

        function resetFilters() {
            $('#filter-mode').val('');
            $('input[name="filterStatus"][value=""]').prop('checked', true);
            filterState = { mode: '', status: '' };
            rolesDt.draw();
            updateFilterBadge();
        }

        $(function() {

            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex, rowData) {
                if (settings.nTable.id !== 'roles-dt') return true;
                if (filterState.mode && String(rowData.mode_id) !== String(filterState.mode)) return false;
                if (filterState.status !== '' && filterState.status !== undefined && String(rowData.status) !== String(filterState.status)) return false;
                return true;
            });

            rolesDt = $('#roles-dt').DataTable({
                processing: true,
                searching: true,
                ordering: false,
                ajax: {
                    url: baseUrl + 'api/roles',
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    dataSrc: function(json) {
                        var modeOpts = '<option value="">All Modes</option>';
                        (json.filters?.modes || []).forEach(function(m) {
                            modeOpts += '<option value="' + m.id + '">' + m.name + '</option>';
                        });
                        $('#filter-mode').html(modeOpts);
                        return json.data;
                    }
                },
                columns: [
                    { data: 'mode_name' },
                    { data: 'name' },
                    { data: 'description' },
                    { data: 'rank_order' },
                    { data: 'privileges_count' },
                    { data: 'status' },
                    { data: 'id' },
                ],
                columnDefs: [
                    {
                        targets: 0,
                        searchable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return data || '';
                            return '<span class="text-uppercase small fw-medium">' + (data || '') + '</span>';
                        }
                    },
                    {
                        targets: 1,
                        searchable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            return '<span class="fw-medium">' + data + '</span>';
                        }
                    },
                    {
                        targets: 2,
                        searchable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return data || '';
                            return data ? '<span class="text-muted">' + data + '</span>' : '<span class="text-muted">—</span>';
                        }
                    },
                    {
                        targets: 3,
                        className: 'text-center',
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            return '<span>' + (data || 0) + '</span>';
                        }
                    },
                    {
                        targets: 4,
                        className: 'text-center',
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            return '<span>' + (data || 0) + '</span>';
                        }
                    },
                    {
                        targets: 5,
                        className: 'text-center',
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            return full['status'] == 1
                                ? '<span class="badge bg-label-success">Active</span>'
                                : '<span class="badge bg-label-warning">Inactive</span>';
                        }
                    },
                    {
                        targets: 6,
                        searchable: false,
                        className: 'text-nowrap',
                        render: function(data, type, full) {
                            if (type !== 'display') return '';
                            return '<button onclick="openRoleModal(\'' + full['id'] + '\')" class="btn btn-sm btn-icon me-1" title="Edit role"><i class="ti ti-edit"></i></button>' +
                                   '<button onclick="deleteRole(\'' + full['id'] + '\')" class="btn btn-sm btn-icon" title="Delete role"><i class="ti ti-trash"></i></button>';
                        }
                    },
                ],
            });
        });
    </script>
@endsection

@section('content')
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">User Access Control</h4>
                    <p class="text-muted mb-0">Manage default roles, custom roles, and system module access.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Settings</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Roles</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @include('uac._nav', ['activePage' => 'roles'])

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div>
                    <h5 class="card-title mb-0">System Roles</h5>
                    <small class="text-muted">Manage user roles, their mode assignments, rank ordering, and privilege levels.</small>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-icon btn-outline-secondary position-relative" style="overflow: visible;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Filters" onclick="new bootstrap.Offcanvas(document.getElementById('roleFilters')).show()">
                        <i class="ti ti-filter"></i>
                        <span id="filter-count-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none" style="font-size: 0.6rem; min-width: 18px; padding: 0.25em 0.4em; line-height: 1;">0</span>
                    </button>
                    <button onclick="openRoleModal()" type="button" class="btn btn-primary">
                        Add Role
                    </button>
                </div>
            </div>
        </div>
        <div class="card-datatable table-responsive">
            <table id="roles-dt" class="table border-top">
                <thead>
                    <tr>
                        <th>Mode</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th class="text-center">Rank</th>
                        <th class="text-center">Privileges</th>
                        <th class="text-center">Status</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="roleFilters" aria-labelledby="roleFiltersLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="roleFiltersLabel" class="offcanvas-title">Filter Roles</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">

            <div class="mb-4">
                <label class="form-label fw-semibold">Mode</label>
                <select class="form-select" id="filter-mode">
                    <option value="">All Modes</option>
                </select>
            </div>

            <hr class="my-3">

            <div class="mb-4">
                <label class="form-label fw-semibold">Status</label>
                <div class="d-flex flex-column gap-2">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterStatus" id="statusAll" value="" checked>
                        <label class="form-check-label" for="statusAll">All</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterStatus" id="statusActive" value="1">
                        <label class="form-check-label" for="statusActive">Active</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterStatus" id="statusInactive" value="0">
                        <label class="form-check-label" for="statusInactive">Inactive</label>
                    </div>
                </div>
            </div>

        </div>
        <div class="offcanvas-footer border-top p-3">
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-primary flex-grow-1" onclick="applyFilters()">
                    Apply Filters
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="resetFilters()">
                    Reset
                </button>
            </div>
        </div>
    </div>

    <div class="modal fade" id="role-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header border-bottom">
                    <div>
                        <h5 class="modal-title mb-0" id="role-modal-title">Add Role</h5>
                        <small class="text-muted">Configure role details and module privilege assignments.</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-3">
                    <form id="role-form" onsubmit="saveRole(event)" method="POST">
                        <input type="hidden" id="r-iuid" />

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label" for="r-name">Role Name <span class="text-danger">*</span></label>
                                <input class="form-control" type="text" id="r-name" placeholder="e.g. Manager" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="r-mode">Mode <span class="text-danger">*</span></label>
                                <select class="form-select" id="r-mode" required></select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label" for="r-description">Description</label>
                                <input class="form-control" type="text" id="r-description" placeholder="Short description of this role">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label" for="r-rank">Rank Order</label>
                                <input class="form-control" type="number" step="1" id="r-rank" min="0" placeholder="0">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="r-status">Status</label>
                                <select class="form-select" id="r-status"></select>
                            </div>
                        </div>

                        <hr class="my-3">

                        <div id="r-privileges-container"></div>
                    </form>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary" form="role-form" type="submit">Save Role</button>
                </div>
            </div>
        </div>
    </div>

@endsection