@extends('source.layouts.app')

@section('content')

<div class="main-wrapper">

    @include('source.common.header')
    @include('source.common.sidebar')

    <div class="page-wrapper">
        <div class="content">

            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                <h6>Access Control</h6>
            </div>

            <div id="alert-area"></div>

            <div class="row">
                <div class="col-lg-6 mb-3">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">Create Role</h6>
                        </div>
                        <div class="card-body">
                            <form id="createRoleForm">
                                @csrf
                                <div class="mb-2">
                                    <label class="form-label">Role Name</label>
                                    <input type="text" class="form-control" name="name" placeholder="Author">
                                </div>
                                <div class="mb-2">
                                    <label class="form-label">Role Slug</label>
                                    <input type="text" class="form-control" name="slug" placeholder="author">
                                </div>
                                <div class="mb-2">
                                    <label class="form-label">Description</label>
                                    <textarea class="form-control" name="description" rows="3"></textarea>
                                </div>
                                <div class="text-end">
                                    <button type="submit" class="btn btn-primary btn-sm">Create Role</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 mb-3">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">Create Permission</h6>
                        </div>
                        <div class="card-body">
                            <form id="createPermissionForm">
                                @csrf
                                <div class="mb-2">
                                    <label class="form-label">Permission Name</label>
                                    <input type="text" class="form-control" name="name" placeholder="Submit Manuscript">
                                </div>
                                <div class="mb-2">
                                    <label class="form-label">Permission Slug</label>
                                    <input type="text" class="form-control" name="slug" placeholder="submit-manuscript">
                                </div>
                                <div class="mb-2">
                                    <label class="form-label">Description</label>
                                    <textarea class="form-control" name="description" rows="3"></textarea>
                                </div>
                                <div class="text-end">
                                    <button type="submit" class="btn btn-success btn-sm">Create Permission</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 mb-3">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">Map Permissions To Role</h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-2">
                                <label class="form-label">Role</label>
                                <select id="roleSelect" class="form-control"></select>
                            </div>
                            <div class="mb-2">
                                <div class="d-flex align-items-center justify-content-between mb-1">
                                    <label class="form-label mb-0">Permissions</label>
                                    <small class="text-muted" id="permissionSelectedCount">0 selected</small>
                                </div>
                                <input type="text" id="permissionSearch" class="form-control mb-2" placeholder="Search permissions by name or slug">
                                <div class="d-flex gap-2 mb-2">
                                    <button type="button" id="selectAllPermissions" class="btn btn-outline-primary btn-sm">Select Visible</button>
                                    <button type="button" id="clearAllPermissions" class="btn btn-outline-secondary btn-sm">Clear All</button>
                                </div>
                                <div id="rolePermissionsChecklist" class="checklist-box"></div>
                            </div>
                            <div class="text-end">
                                <button type="button" id="saveRolePermissions" class="btn btn-warning btn-sm">Save Mapping</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 mb-3">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">Assign Roles To Frontend User</h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-2">
                                <label class="form-label">User</label>
                                <select id="userSelect" class="form-control"></select>
                            </div>
                            <div class="mb-2">
                                <div class="d-flex align-items-center justify-content-between mb-1">
                                    <label class="form-label mb-0">Roles</label>
                                    <small class="text-muted" id="roleSelectedCount">0 selected</small>
                                </div>
                                <div class="d-flex gap-2 mb-2">
                                    <button type="button" id="selectAllRoles" class="btn btn-outline-info btn-sm">Select All</button>
                                    <button type="button" id="clearAllRoles" class="btn btn-outline-secondary btn-sm">Clear All</button>
                                </div>
                                <div id="userRolesChecklist" class="checklist-box"></div>
                            </div>
                            <div class="text-end">
                                <button type="button" id="saveUserRoles" class="btn btn-info btn-sm">Save Assignment</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="footer d-sm-flex align-items-center justify-content-between bg-white py-2 px-4 border-top">
            <p class="text-dark mb-0">
                &copy; {{ date('Y') }}
                <a href="javascript:void(0);" class="link-primary">C3S Publishers</a>,
                All Rights Reserved
            </p>
        </div>
    </div>

</div>

<style>
    .checklist-box {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        max-height: 260px;
        overflow-y: auto;
        padding: 10px;
        background: #fff;
    }

    .checklist-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 6px;
    }

    .checklist-item:hover {
        background: #f8f9fa;
    }

    .checklist-meta {
        font-size: 12px;
        color: #6c757d;
    }

    .permission-group {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .permission-group summary {
        list-style: none;
        cursor: pointer;
        background: #f8f9fa;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .permission-group summary::-webkit-details-marker {
        display: none;
    }

    .permission-group-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
    }

    .permission-group-body {
        padding: 8px;
    }

    .permission-group-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .permission-group-count {
        font-size: 12px;
        color: #6c757d;
    }
</style>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
$(function () {

    const csrfToken = $('meta[name="csrf-token"]').attr('content');

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    });

    let roles = [];
    let permissions = [];
    let users = [];

    function escapeHtml(value) {
        return String(value || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function showAlert(type, message) {
        $('#alert-area').html(`
            <div class="alert alert-${type} alert-dismissible fade show">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
    }

    function handleAjaxError(xhr, fallbackMessage) {
        if (xhr.status === 419) {
            showAlert('danger', 'Session expired. Please refresh the page and login again.');
            return;
        }

        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
            const messages = Object.values(xhr.responseJSON.errors).flat();
            showAlert('danger', messages.join('<br>'));
            return;
        }

        showAlert('danger', xhr.responseJSON?.message || fallbackMessage);
    }

    function loadData() {
        $.get("{{ route('admin.access-control.index') }}", function (response) {
            roles = response.roles || [];
            permissions = response.permissions || [];
            users = response.users || [];

            $('#roleSelect').empty();
            roles.forEach(function (role) {
                $('#roleSelect').append(`<option value="${role.id}">${role.name} (${role.slug})</option>`);
            });

            renderPermissionChecklist();

            $('#userSelect').empty();
            users.forEach(function (user) {
                $('#userSelect').append(`<option value="${user.id}">${user.name || user.email} (${user.email})</option>`);
            });

            syncRolePermissionSelection();
            renderUserRoleChecklist();
        });
    }

    function renderPermissionChecklist() {
        const container = $('#rolePermissionsChecklist');
        container.empty();

        const actionWords = ['manage', 'view', 'submit', 'create', 'update', 'delete'];
        const grouped = {};

        permissions.forEach(function (permission) {
            const slug = String(permission.slug || '');
            const parts = slug.split('-').filter(Boolean);
            let moduleParts = parts;

            if (parts.length > 1 && actionWords.includes(parts[0])) {
                moduleParts = parts.slice(1);
            }

            const moduleKey = moduleParts.join('-') || 'general';
            if (!grouped[moduleKey]) {
                grouped[moduleKey] = [];
            }
            grouped[moduleKey].push(permission);
        });

        Object.keys(grouped).sort().forEach(function (moduleKey) {
            const moduleLabel = moduleKey
                .split('-')
                .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
                .join(' ');

            let itemsHtml = '';
            grouped[moduleKey].forEach(function (permission) {
                itemsHtml += `
                    <label class="checklist-item permission-item" data-name="${escapeHtml(permission.name)}" data-slug="${escapeHtml(permission.slug)}" data-module="${escapeHtml(moduleKey)}">
                        <span>
                            <strong>${escapeHtml(permission.name)}</strong>
                            <div class="checklist-meta">${escapeHtml(permission.slug)}</div>
                        </span>
                        <input class="form-check-input permission-checkbox" type="checkbox" id="permission-${permission.id}" name="permission_ids[]" value="${permission.id}" data-module="${escapeHtml(moduleKey)}">
                    </label>
                `;
            });

            container.append(`
                <details class="permission-group" data-module="${escapeHtml(moduleKey)}" open>
                    <summary>
                        <span class="permission-group-title">
                            <i class="ti ti-chevron-down"></i>
                            ${escapeHtml(moduleLabel)}
                            <span class="permission-group-count" id="groupCount-${escapeHtml(moduleKey)}">0 / ${grouped[moduleKey].length}</span>
                        </span>
                        <span class="permission-group-actions">
                            <button type="button" class="btn btn-outline-primary btn-sm select-module" data-module="${escapeHtml(moduleKey)}">All</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm clear-module" data-module="${escapeHtml(moduleKey)}">Clear</button>
                        </span>
                    </summary>
                    <div class="permission-group-body">${itemsHtml}</div>
                </details>
            `);
        });

        updatePermissionCount();
    }

    function syncRolePermissionSelection() {
        let roleId = parseInt($('#roleSelect').val(), 10);
        let selectedRole = roles.find(function (r) { return r.id === roleId; });
        let rolePermissionIds = (selectedRole?.permissions || []).map(function (p) { return String(p.id); });

        $('.permission-checkbox').each(function () {
            $(this).prop('checked', rolePermissionIds.includes($(this).val()));
        });

        updatePermissionCount();
    }

    function renderUserRoleChecklist() {
        const container = $('#userRolesChecklist');
        container.empty();

        let userId = parseInt($('#userSelect').val(), 10);
        let selectedUser = users.find(function (u) { return u.id === userId; }) || { roles: [] };
        let userRoleIds = (selectedUser.roles || []).map(function (r) { return String(r.id); });

        roles.forEach(function (role) {
            const checked = userRoleIds.includes(String(role.id)) ? 'checked' : '';
            container.append(`
                <label class="checklist-item" data-name="${escapeHtml(role.name)}" data-slug="${escapeHtml(role.slug)}">
                    <span>
                        <strong>${escapeHtml(role.name)}</strong>
                        <div class="checklist-meta">${escapeHtml(role.slug)}</div>
                    </span>
                    <input class="form-check-input role-checkbox" type="checkbox" id="role-${role.id}" name="role_ids[]" value="${role.id}" ${checked}>
                </label>
            `);
        });

        updateRoleCount();
    }

    function updatePermissionCount() {
        const selected = $('.permission-checkbox:checked').length;
        $('#permissionSelectedCount').text(selected + ' selected');

        $('.permission-group').each(function () {
            const module = $(this).data('module');
            const total = $(this).find('.permission-checkbox').length;
            const checked = $(this).find('.permission-checkbox:checked').length;
            $('#groupCount-' + module).text(checked + ' / ' + total);
        });
    }

    function updateRoleCount() {
        const selected = $('.role-checkbox:checked').length;
        $('#roleSelectedCount').text(selected + ' selected');
    }

    $('#roleSelect').on('change', syncRolePermissionSelection);
    $('#userSelect').on('change', renderUserRoleChecklist);

    $(document).on('change', '.permission-checkbox', updatePermissionCount);
    $(document).on('change', '.role-checkbox', updateRoleCount);

    $('#permissionSearch').on('input', function () {
        const query = $(this).val().toLowerCase().trim();
        $('#rolePermissionsChecklist .permission-item').each(function () {
            const name = ($(this).data('name') || '').toString().toLowerCase();
            const slug = ($(this).data('slug') || '').toString().toLowerCase();
            const match = !query || name.includes(query) || slug.includes(query);
            $(this).toggle(match);
        });

        $('.permission-group').each(function () {
            const visibleCount = $(this).find('.permission-item:visible').length;
            $(this).toggle(visibleCount > 0);
        });
    });

    $('#selectAllPermissions').on('click', function () {
        $('#rolePermissionsChecklist .permission-item:visible .permission-checkbox').prop('checked', true);
        updatePermissionCount();
    });

    $('#clearAllPermissions').on('click', function () {
        $('.permission-checkbox').prop('checked', false);
        updatePermissionCount();
    });

    $(document).on('click', '.select-module', function (e) {
        e.preventDefault();
        e.stopPropagation();
        const module = $(this).data('module');
        $(`.permission-checkbox[data-module="${module}"]`).prop('checked', true);
        updatePermissionCount();
    });

    $(document).on('click', '.clear-module', function (e) {
        e.preventDefault();
        e.stopPropagation();
        const module = $(this).data('module');
        $(`.permission-checkbox[data-module="${module}"]`).prop('checked', false);
        updatePermissionCount();
    });

    $('#selectAllRoles').on('click', function () {
        $('.role-checkbox').prop('checked', true);
        updateRoleCount();
    });

    $('#clearAllRoles').on('click', function () {
        $('.role-checkbox').prop('checked', false);
        updateRoleCount();
    });

    $('#createRoleForm').on('submit', function (e) {
        e.preventDefault();
        $.post("{{ route('admin.access-control.roles.store') }}", $(this).serialize())
            .done(function (response) {
                showAlert('success', response.message);
                $('#createRoleForm')[0].reset();
                loadData();
            })
            .fail(function (xhr) {
                handleAjaxError(xhr, 'Failed to create role.');
            });
    });

    $('#createPermissionForm').on('submit', function (e) {
        e.preventDefault();
        $.post("{{ route('admin.access-control.permissions.store') }}", $(this).serialize())
            .done(function (response) {
                showAlert('success', response.message);
                $('#createPermissionForm')[0].reset();
                loadData();
            })
            .fail(function (xhr) {
                handleAjaxError(xhr, 'Failed to create permission.');
            });
    });

    $('#saveRolePermissions').on('click', function () {
        let roleId = $('#roleSelect').val();
        let permissionIds = $('.permission-checkbox:checked').map(function () {
            return $(this).val();
        }).get();

        $.ajax({
            url: "{{ route('admin.access-control.roles.permissions.sync', ':id') }}".replace(':id', roleId),
            type: 'POST',
            data: {
                permission_ids: permissionIds
            },
            success: function (response) {
                showAlert('success', response.message);
                loadData();
            },
            error: function (xhr) {
                handleAjaxError(xhr, 'Failed to update role permissions.');
            }
        });
    });

    $('#saveUserRoles').on('click', function () {
        let userId = $('#userSelect').val();
        let roleIds = $('.role-checkbox:checked').map(function () {
            return $(this).val();
        }).get();

        $.ajax({
            url: "{{ route('admin.access-control.users.roles.sync', ':id') }}".replace(':id', userId),
            type: 'POST',
            data: {
                role_ids: roleIds
            },
            success: function (response) {
                showAlert('success', response.message);
                loadData();
            },
            error: function (xhr) {
                handleAjaxError(xhr, 'Failed to update user roles.');
            }
        });
    });

    loadData();

});
</script>

@endsection