@extends('layouts.app')

@section('content')

<div class="container pt-5 mt-2">

    <div class="card">
        <div class="card-header">
            <h4 class="mb-0">Edit Role</h4>
        </div>

        <div class="card-body">
            <form id="edit-role-form">
                <input type="hidden" id="role-id">
                <!-- Role Name -->
                <div class="mb-3">
                    <label for="name" class="form-label">Role Name</label>
                    <input type="text"
                           name="name"
                           id="name"
                           class="form-control"
                           placeholder="Enter role name"
                           required>
                </div>

                <!-- Search -->
                <div class="mb-3">
                    <label for="permission-search" class="form-label">Search Permissions</label>
                    <input type="text"
                           id="permission-search"
                           class="form-control"
                           placeholder="Search module or action...">
                </div>

                <!-- Permissions -->
                <div class="mb-3">
                    <label class="form-label">Permissions</label>

                    <div id="permissions-checkboxes" class="border rounded p-3" style="max-height: 400px; overflow-y: auto;">
                        <!-- Dynamic content -->
                    </div>
                </div>

                <!-- Submit -->
                <div class="text-end">
                    <button type="submit" class="btn btn-success">
                        Create Role
                    </button>
                </div>

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

</div>

<script>

document.addEventListener('DOMContentLoaded', function () {

    const baseUrl = window.location.origin;
    const roleId = window.location.pathname.split('/')[3];

    const roleIdInput = document.getElementById('role-id');
    const nameInput = document.getElementById('name');
    const permissionsContainer = document.getElementById('permissions-checkboxes');
    const form = document.getElementById('edit-role-form');

    let allModules = [];
    let selectedPermissions = new Set();

    // 🔹 Render (same as ADD)
    function render(data) {

        let html = `
        <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width:30%">Module</th>
                    <th>Permissions</th>
                </tr>
            </thead>
            <tbody>
        `;

        if (!data.length) {
            html += `<tr><td colspan="2" class="text-center">No permissions found</td></tr>`;
        }

        data.forEach(({module, actions}) => {

            html += `
            <tr>
                <td><strong>Manage ${module}</strong></td>
                <td>
                    <div class="d-flex flex-wrap gap-2">
                        ${['list','add','edit','view','delete'].map(action => {
                            if (actions[action]) {

                                const id = actions[action].id;

                                return `
                                    <label class="d-flex align-items-center gap-2 border rounded px-2 py-1 mb-0">
                                        <input type="checkbox"
                                            name="permissions[]"
                                            value="${id}"
                                            ${selectedPermissions.has(id) ? 'checked' : ''}>
                                        <span>
                                            ${action.charAt(0).toUpperCase() + action.slice(1)} ${module}
                                        </span>
                                    </label>
                                `;
                            }
                            return '';
                        }).join('')}
                    </div>
                </td>
            </tr>`;
        });

        html += `</tbody></table></div>`;

        permissionsContainer.innerHTML = html;
    }

    // 🔹 Load Role + Permissions
    async function loadRole() {
        try {
            const res = await fetch(`${baseUrl}/admin/roles/${roleId}/data`);
            if (!res.ok) throw new Error('Failed to fetch role');

            const response = await res.json();

            // Set role info
            roleIdInput.value = response.role.id;
            nameInput.value = response.role.name;

            // ✅ Store selected permissions
            selectedPermissions = new Set(response.rolePermissions);

            // 🔹 Group permissions (same logic as ADD)
            const grouped = {};

            response.permissions.forEach(permission => {
                const parts = permission.name.split('-');
                const action = parts.pop();
                const module = parts.join('-');

                if (!grouped[module]) {
                    grouped[module] = {};
                }

                grouped[module][action] = permission;
            });

            allModules = Object.keys(grouped).map(module => ({
                module: module.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
                raw: module,
                actions: grouped[module]
            }));

            render(allModules);

        } catch (err) {
            console.error(err);
            alert('Failed to load role data');
        }
    }

    // 🔍 Search (same as ADD)
    document.getElementById('permission-search').addEventListener('input', function () {

        const keyword = this.value.toLowerCase();

        const filtered = allModules.filter(item => {
            const moduleName = item.module.toLowerCase();
            const manageText = `manage ${moduleName}`;

            return (
                moduleName.includes(keyword) ||
                manageText.includes(keyword) ||
                Object.keys(item.actions).some(a =>
                    (`${a} ${moduleName}`).toLowerCase().includes(keyword)
                )
            );
        });

        render(filtered);
    });

    // 🔹 Track checkbox changes
    document.addEventListener('change', function(e) {
        if (e.target.name === 'permissions[]') {

            const id = parseInt(e.target.value);

            if (e.target.checked) {
                selectedPermissions.add(id);
            } else {
                selectedPermissions.delete(id);
            }
        }
    });

    // 🔹 Submit (UPDATE)
    form.addEventListener('submit', async function(e) {
        e.preventDefault();

        const formData = new FormData(form);
        formData.append('_method', 'PUT'); // Laravel update

        try {
            const res = await fetch(`${baseUrl}/admin/roles/${roleId}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                },
                body: formData
            });

            const data = await res.json();

            if (!res.ok) throw data;

            alert(data.success);
            window.location.href = `${baseUrl}/admin/roles`;

        } catch (err) {
            console.error(err);

            if (err.errors) {
                alert(Object.values(err.errors).flat().join('\n'));
            } else {
                alert(err.message || 'Update failed');
            }
        }
    });

    // 🚀 Init
    if (roleId) {
        loadRole();
    } else {
        alert('Role ID missing in URL');
    }

});


</script>
@endsection