@extends('layouts/layoutMaster')

@section('title', 'UAC — Default 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') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
@endsection

@section('page-style')
    <style>
        .filter-section {
            padding-left: 0;
        }
        .filter-toggle-group .btn {
            min-width: 80px;
            font-size: 0.75rem;
            padding: 0.35rem 0.75rem;
        }
        .filter-badge {
            font-size: 0.6875rem;
            letter-spacing: 0.02em;
        }
    </style>
@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>
    <script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
@endsection

@section('page-script')
    <script>
        var rulesDt = null;

        window.openRuleModal = async function(roleId) {
            resetRuleForm();
            var data = await pdwl('api/defaultRole/' + roleId, {});
            if (!data) return;

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

            $('#rule-role-display').text(role.name + ' (' + role.mode_name + ')');
            $('#rule-role-id').val(roleId);

            initEntitySelect2('#rule-be-sel', fd.businessEntities || [], 'Select business entities…');
            initEntitySelect2('#rule-branch-sel', fd.branches || [], 'Select branches…');
            initEntitySelect2('#rule-dept-sel', fd.departments || [], 'Select departments…');
            initEntitySelect2('#rule-div-sel', fd.divisions || [], 'Select divisions…');
            initEntitySelect2('#rule-pos-sel', fd.positionGroups || [], 'Select position groups…');
            initEntitySelect2('#rule-user-sel', fd.users || [], 'Select users…');

            if (data.data) {
                $('#rule-rank').val(data.data.rank_order);
                $('#rule-hod').val(data.data.hod ? '1' : '0');
                $('#rule-status').val(data.data.status);
                $('#rule-is-default').prop('checked', data.data.is_default == 1);
                setFilterState('be', data.data.business_entity_ids);
                setFilterState('branch', data.data.branch_ids);
                setFilterState('dept', data.data.department_ids);
                setFilterState('div', data.data.division_ids);
                setFilterState('pos', data.data.position_group_ids);
                setFilterState('user', data.data.users_provider_ids);
            }

            updateFilterVisibility();
            $('#rule-modal').modal('show');
        };

        function initEntitySelect2(sel, items, placeholder) {
            $(sel).empty().select2({
                data: items.map(function(i) {
                    return { id: String(i.id), text: i.text || i.name };
                }),
                placeholder: placeholder,
                allowClear: true,
                dropdownParent: $('#rule-modal'),
                width: '100%'
            }).val(null).trigger('change');
        }

        function setFilterState(key, value) {
            var selMap = { be: '#rule-be-sel', branch: '#rule-branch-sel', dept: '#rule-dept-sel', div: '#rule-div-sel', pos: '#rule-pos-sel', user: '#rule-user-sel' };
            if (value === null || value === undefined) {
                $('[data-filter="' + key + '"][data-value="ignore"]').addClass('active').siblings().removeClass('active');
            } else if (value === '0' || value === 0) {
                $('[data-filter="' + key + '"][data-value="all"]').addClass('active').siblings().removeClass('active');
            } else {
                $('[data-filter="' + key + '"][data-value="specific"]').addClass('active').siblings().removeClass('active');
                if (selMap[key]) $(selMap[key]).val(String(value).split(',')).trigger('change');
            }
        }

        function getFilterValue(key) {
            var active = $('[data-filter="' + key + '"].active');
            var mode = active.data('value');
            if (mode === 'ignore') return null;
            if (mode === 'all') return '0';
            var selMap = { be: '#rule-be-sel', branch: '#rule-branch-sel', dept: '#rule-dept-sel', div: '#rule-div-sel', pos: '#rule-pos-sel', user: '#rule-user-sel' };
            var vals = $(selMap[key]).val();
            return vals && vals.length ? vals.join(',') : null;
        }

        function resetRuleForm() {
            $('#rule-role-id').val('');
            $('#rule-role-display').text('');
            $('#rule-rank').val('');
            $('#rule-hod').val('0');
            $('#rule-status').val('1');
            $('#rule-is-default').prop('checked', false);
            $('.filter-toggle-group [data-value="ignore"]').each(function() {
                $(this).addClass('active').siblings().removeClass('active');
            });
            $('.filter-select-wrapper').addClass('d-none');
        }

        function updateFilterVisibility() {
            $('.filter-section').each(function() {
                var key = $(this).data('filter-section');
                var mode = $('[data-filter="' + key + '"].active').data('value');
                var wrap = $(this).find('.filter-select-wrapper');
                if (mode === 'specific') {
                    wrap.removeClass('d-none');
                    $(this).addClass('active');
                } else {
                    wrap.addClass('d-none');
                    $(this).toggleClass('active', mode === 'all');
                }
            });
        }

        window.saveRule = async function(e) {
            e.preventDefault();
            var payload = {
                roleId: $('#rule-role-id').val(),
                rankOrder: $('#rule-rank').val(),
                hod: $('#rule-hod').val(),
                isDefault: $('#rule-is-default').is(':checked') ? 1 : 0,
                status: $('#rule-status').val(),
                businessEntityIds: getFilterValue('be'),
                branchIds: getFilterValue('branch'),
                departmentIds: getFilterValue('dept'),
                divisionIds: getFilterValue('div'),
                positionGroupIds: getFilterValue('pos'),
                usersProviderIds: getFilterValue('user'),
            };
            var data = await pdwl('api/defaultRole/save', payload);
            if (data) {
                showResponse(data.message, data.success ? 'success' : 'error');
                if (data.success) {
                    $('#rule-modal').modal('hide');
                    rulesDt.ajax.reload();
                }
            }
        };


        var badgeLabels = {
            BE: 'Business Entities',
            BR: 'Branches',
            DE: 'Departments',
            DI: 'Divisions',
            PO: 'Position Groups',
            US: 'Specific Users'
        };

        function filterBadge(label, value) {
            if (value === null || value === undefined || value === '') return '';
            var display = (value === '0' || value === 0) ? 'All' : String(value).split(',').length;
            var title = badgeLabels[label] || label;
            if (display === 'All') {
                title += ': All matched';
            } else {
                title += ': ' + display + ' selected';
            }
            return '<span class="badge bg-label-secondary filter-badge" data-bs-toggle="tooltip" data-bs-placement="top" title="' + title + '">' + label + ': ' + display + '</span>';
        }

        $(function() {
            $(document).on('click', '.filter-toggle-group .btn', function(e) {
                e.preventDefault();
                $(this).addClass('active').siblings().removeClass('active');
                updateFilterVisibility();
            });

            rulesDt = $('#rules-dt').DataTable({
                processing: true,
                searching: true,
                order: [[0, 'asc'], [2, 'desc'], [1, 'asc']],
                ajax: {
                    url: baseUrl + 'api/defaultRoles',
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    dataSrc: function(json) { return json.defaults; }
                },
                columns: [
                    { data: 'mode_id' },
                    { data: 'role_id' },
                    { data: 'rank_order' },
                    { data: 'business_entity_ids' },
                    { data: 'hod' },
                    { data: 'is_default' },
                    { data: 'rule_status' },
                    { data: 'role_id' },
                ],
                columnDefs: [
                    {
                        targets: 0,
                        searchable: true,
                        orderable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return full['mode_name'];
                            return '<span class="text-uppercase small fw-medium">' + (full['mode_name'] || '') + '</span>';
                        }
                    },
                    {
                        targets: 1,
                        searchable: true,
                        orderable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return full['role_name'];
                            return '<span class="fw-medium">' + (full['role_name'] || '') + '</span>';
                        }
                    },
                    {
                        targets: 2,
                        className: 'text-center',
                        orderable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            if (!full['is_configured']) return '<span class="text-muted">—</span>';
                            return '<span>' + (full['rank_order'] || '0') + '</span>';
                        }
                    },
                    {
                        targets: 3,
                        searchable: false,
                        orderable: false,
                        render: function(data, type, full) {
                            if (type !== 'display') return '';
                            if (!full['is_configured']) return '<span class="text-muted fst-italic small">Not configured</span>';
                            var b = [];
                            b.push(filterBadge('BE', full['business_entity_ids']));
                            b.push(filterBadge('BR', full['branch_ids']));
                            b.push(filterBadge('DE', full['department_ids']));
                            b.push(filterBadge('DI', full['division_ids']));
                            b.push(filterBadge('PO', full['position_group_ids']));
                            b.push(filterBadge('US', full['users_provider_ids']));
                            var filtered = b.filter(Boolean);
                            return filtered.length
                                ? '<div class="d-flex flex-wrap gap-1">' + filtered.join('') + '</div>'
                                : '<span class="text-muted fst-italic small">No filters set</span>';
                        }
                    },
                    {
                        targets: 4,
                        className: 'text-center',
                        orderable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            if (!full['is_configured']) return '<span class="text-muted">—</span>';
                            return full['hod'] == 1
                                ? '<i class="ti ti-check"></i>'
                                : '<i class="ti ti-minus text-muted"></i>';
                        }
                    },
                    {
                        targets: 5,
                        className: 'text-center',
                        orderable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            return full['is_default'] == 1
                                ? '<i class="ti ti-check"></i>'
                                : '';
                        }
                    },
                    {
                        targets: 6,
                        className: 'text-center',
                        orderable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            if (!full['is_configured']) return '<span class="badge bg-label-secondary">Not set up</span>';
                            return full['rule_status'] == 1
                                ? '<span class="badge bg-label-success">Active</span>'
                                : '<span class="badge bg-label-warning">Inactive</span>';
                        }
                    },
                    {
                        targets: 7,
                        searchable: false,
                        orderable: false,
                        className: 'text-nowrap',
                        render: function(data, type, full) {
                            if (type !== 'display') return '';
                            var title = full['is_configured'] ? 'Edit configuration' : 'Set up rule';
                            var icon = full['is_configured'] ? 'ti-edit' : 'ti-settings';
                            return '<button onclick="openRuleModal(\'' + full['role_id'] + '\')" class="btn btn-sm btn-icon" title="' + title + '"><i class="ti ' + icon + '"></i></button>';
                        }
                    },
                ],
                drawCallback: function() {
                    $('[data-bs-toggle="tooltip"]').tooltip({ trigger: 'hover' });
                },
            });
        });
    </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">Default Roles</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

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

    <div class="card mb-4">
        <div class="card-body py-3">
            <div class="d-flex align-items-start gap-3">
                <div class="badge bg-label-info rounded p-2">
                    <i class="ti ti-info-circle ti-md"></i>
                </div>
                <div>
                    <h6 class="mb-1">How role assignment works</h6>
                    <p class="text-muted mb-0 small">
                        When a user logs in, the system evaluates rules from <strong>highest rank to lowest</strong>.
                        The first rule whose organisational filters (entity, branch, department, etc.) match the user assigns them that role.
                        A rule marked <span class="badge bg-label-success">Default</span> is the fallback when no other rule matches.
                        Filters set to <em>Ignore</em> are skipped; <em>All</em> matches everyone; <em>Specific</em> matches only selected values.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">Role Assignment Rules</h5>
            <small class="text-muted">Every internal role appears automatically. Click a role to configure its organisational filters.</small>
        </div>
        <div class="card-datatable table-responsive">
            <table id="rules-dt" class="table border-top">
                <thead>
                    <tr>
                        <th>Mode</th>
                        <th>Role</th>
                        <th class="text-center">Rank</th>
                        <th>Filters</th>
                        <th class="text-center" data-bs-toggle="tooltip" title="Head of Department">HOD</th>
                        <th class="text-center">Default</th>
                        <th class="text-center">Status</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="modal fade" id="rule-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header border-bottom">
                    <div>
                        <h5 class="modal-title mb-0">Role Assignment Rule</h5>
                        <small class="text-muted">Define which organisational filters map to this role.</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="rule-form" onsubmit="saveRule(event)" method="POST">
                        <input type="hidden" id="rule-role-id" />

                        <div class="row mb-4">
                            <div class="col-md-5">
                                <label class="form-label">Role</label>
                                <div class="form-control bg-light" id="rule-role-display" style="cursor: default;"></div>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label" for="rule-rank">Rank Order</label>
                                <input class="form-control" type="number" id="rule-rank" min="0" step="1" placeholder="0">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label" for="rule-hod">HOD Required</label>
                                <select class="form-select" id="rule-hod">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label" for="rule-status">Status</label>
                                <select class="form-select" id="rule-status">
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                            <div class="col-md-1 d-flex align-items-end pb-1">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="rule-is-default">
                                    <label class="form-check-label small" for="rule-is-default">Default</label>
                                </div>
                            </div>
                        </div>

                        <hr class="my-0 mb-4">

                        <h6 class="fw-semibold mb-3">Organisational Filters</h6>
                        <p class="text-muted small mb-3">
                            <strong>Ignore</strong> = filter not evaluated &nbsp;·&nbsp;
                            <strong>All</strong> = matches any value &nbsp;·&nbsp;
                            <strong>Specific</strong> = matches only selected items
                        </p>

                        <div class="filter-section mb-3 pb-3 border-bottom" data-filter-section="be">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <label class="form-label mb-0 fw-medium">Business Entities</label>
                                <div class="btn-group filter-toggle-group" role="group">
                                    <button type="button" class="btn btn-outline-secondary active" data-filter="be" data-value="ignore">Ignore</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="be" data-value="all">All</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="be" data-value="specific">Specific</button>
                                </div>
                            </div>
                            <div class="filter-select-wrapper d-none">
                                <select class="form-select" id="rule-be-sel" multiple="multiple"></select>
                            </div>
                        </div>

                        <div class="filter-section mb-3 pb-3 border-bottom" data-filter-section="branch">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <label class="form-label mb-0 fw-medium">Branches</label>
                                <div class="btn-group filter-toggle-group" role="group">
                                    <button type="button" class="btn btn-outline-secondary active" data-filter="branch" data-value="ignore">Ignore</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="branch" data-value="all">All</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="branch" data-value="specific">Specific</button>
                                </div>
                            </div>
                            <div class="filter-select-wrapper d-none">
                                <select class="form-select" id="rule-branch-sel" multiple="multiple"></select>
                            </div>
                        </div>

                        <div class="filter-section mb-3 pb-3 border-bottom" data-filter-section="dept">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <label class="form-label mb-0 fw-medium">Departments</label>
                                <div class="btn-group filter-toggle-group" role="group">
                                    <button type="button" class="btn btn-outline-secondary active" data-filter="dept" data-value="ignore">Ignore</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="dept" data-value="all">All</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="dept" data-value="specific">Specific</button>
                                </div>
                            </div>
                            <div class="filter-select-wrapper d-none">
                                <select class="form-select" id="rule-dept-sel" multiple="multiple"></select>
                            </div>
                        </div>

                        <div class="filter-section mb-3 pb-3 border-bottom" data-filter-section="div">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <label class="form-label mb-0 fw-medium">Divisions</label>
                                <div class="btn-group filter-toggle-group" role="group">
                                    <button type="button" class="btn btn-outline-secondary active" data-filter="div" data-value="ignore">Ignore</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="div" data-value="all">All</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="div" data-value="specific">Specific</button>
                                </div>
                            </div>
                            <div class="filter-select-wrapper d-none">
                                <select class="form-select" id="rule-div-sel" multiple="multiple"></select>
                            </div>
                        </div>

                        <div class="filter-section mb-3 pb-3 border-bottom" data-filter-section="pos">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <label class="form-label mb-0 fw-medium">Position Groups</label>
                                <div class="btn-group filter-toggle-group" role="group">
                                    <button type="button" class="btn btn-outline-secondary active" data-filter="pos" data-value="ignore">Ignore</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="pos" data-value="all">All</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="pos" data-value="specific">Specific</button>
                                </div>
                            </div>
                            <div class="filter-select-wrapper d-none">
                                <select class="form-select" id="rule-pos-sel" multiple="multiple"></select>
                            </div>
                        </div>

                        <div class="filter-section mb-1" data-filter-section="user">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <label class="form-label mb-0 fw-medium">Specific Users</label>
                                <div class="btn-group filter-toggle-group" role="group">
                                    <button type="button" class="btn btn-outline-secondary active" data-filter="user" data-value="ignore">Ignore</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="user" data-value="all">All</button>
                                    <button type="button" class="btn btn-outline-secondary" data-filter="user" data-value="specific">Specific</button>
                                </div>
                            </div>
                            <div class="filter-select-wrapper d-none">
                                <select class="form-select" id="rule-user-sel" multiple="multiple"></select>
                            </div>
                        </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="rule-form" type="submit">Save Rule</button>
                </div>
            </div>
        </div>
    </div>
@endsection