<?php include 'header.php'; ?>

<div class="bg-gray-100 px-0 py-4 md:p-2 lg:p-6">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">

        <div>
            <h1 class="text-2xl font-bold text-gray-800">
                Rights Management
            </h1>

            <p class="text-sm text-gray-500 mt-1">
                Manage admin roles and permissions
            </p>
        </div>

    </div>


    <!-- Main -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-6">

        <!-- Roles -->
        <div class="xl:col-span-3">

            <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">

                <!-- Header -->
                <div class="p-5 border-b border-gray-100 flex items-center justify-between">

                    <h2 class="text-lg font-bold text-gray-800">
                        Roles
                    </h2>

                    <button
                        onclick="openRoleModal()"
                        class="h-10 px-4 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white text-sm font-medium transition">

                        + Add Role

                    </button>

                </div>

                <!-- Search -->
                <div class="p-4 border-b border-gray-100">

                    <input
                        type="text"
                        placeholder="Search roles..."
                        class="w-full h-11 rounded-xl border border-gray-200 px-4 outline-none focus:ring-2 focus:ring-blue-500">

                </div>

                <!-- Roles List -->
                <div id="roleList" class="p-4 space-y-3 max-h-[700px] overflow-y-auto">

                    <!-- Default Role -->
                    <div
                        onclick="selectRole('Super Admin', this)"
                        class="role-item border-2 border-blue-500 bg-blue-50 rounded-2xl p-4 cursor-pointer transition">

                        <h3 class="font-semibold text-gray-800">
                            Super Admin
                        </h3>

                    </div>

                    <!-- Default Role -->
                    <div
                        onclick="selectRole('HR Manager', this)"
                        class="role-item border border-gray-200 rounded-2xl p-4 cursor-pointer transition">

                        <h3 class="font-semibold text-gray-800">
                            HR Manager
                        </h3>

                    </div>

                </div>

            </div>

        </div>



        <!-- Permissions -->
        <div class="xl:col-span-9">

            <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">

                <!-- Top -->
                <div class="p-5 border-b border-gray-100 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">

                    <h2 class="permission-title text-2xl font-bold text-gray-800">
                        Super Admin
                    </h2>

                    <input
                        type="text"
                        placeholder="Search permissions..."
                        class="w-full lg:w-72 h-11 rounded-xl border border-gray-200 px-4 outline-none focus:ring-2 focus:ring-blue-500">

                </div>



                <!-- Action Buttons -->
                <div class="p-4 border-b border-gray-100 flex flex-wrap justify-end gap-3">

                    <button
                        onclick="openModuleModal()"
                        class="h-11 px-5 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium transition">

                        + Add Module

                    </button>

                    <button
                        onclick="openPermissionModal()"
                        class="h-11 px-5 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium transition">

                        + Add Permission

                    </button>

                </div>



                <!-- Table -->
                <div class="overflow-x-auto">

                    <table class="w-full min-w-[900px]">

                        <!-- Header -->
                        <thead class="bg-gray-50 border-b border-gray-200">

                            <tr id="permissionHeader">

                                <th class="text-left px-6 py-4 text-sm font-semibold text-gray-700">
                                    Module
                                </th>

                                <th class="text-center px-4 py-4 text-sm font-semibold text-gray-700">
                                    View
                                </th>

                                <th class="text-center px-4 py-4 text-sm font-semibold text-gray-700">
                                    Add
                                </th>

                                <th class="text-center px-4 py-4 text-sm font-semibold text-gray-700">
                                    Edit
                                </th>

                                <th class="text-center px-4 py-4 text-sm font-semibold text-gray-700">
                                    Delete
                                </th>

                            </tr>

                        </thead>



                        <!-- Body -->
                        <tbody id="permissionTable" class="divide-y divide-gray-100">

                            <!-- Dashboard -->
                            <tr class="permission-row hover:bg-gray-50 transition">

                                <td class="px-6 py-5">

                                    <h4 class="font-semibold text-gray-800">
                                        Dashboard
                                    </h4>

                                </td>

                                <!-- View -->
                                <td class="text-center px-4 py-5">
                                    <input type="checkbox" class="permission-checkbox w-5 h-5" checked>
                                </td>

                                <!-- Add -->
                                <td class="text-center px-4 py-5">
                                    <input type="checkbox" class="permission-checkbox w-5 h-5" checked>
                                </td>

                                <!-- Edit -->
                                <td class="text-center px-4 py-5">
                                    <input type="checkbox" class="permission-checkbox w-5 h-5">
                                </td>

                                <!-- Delete -->
                                <td class="text-center px-4 py-5">
                                    <input type="checkbox" class="permission-checkbox w-5 h-5">
                                </td>

                            </tr>



                            <!-- Users -->
                            <tr class="permission-row hover:bg-gray-50 transition">

                                <td class="px-6 py-5">

                                    <h4 class="font-semibold text-gray-800">
                                        Users
                                    </h4>

                                </td>

                                <td class="text-center px-4 py-5">
                                    <input type="checkbox" class="permission-checkbox w-5 h-5" checked>
                                </td>

                                <td class="text-center px-4 py-5">
                                    <input type="checkbox" class="permission-checkbox w-5 h-5">
                                </td>

                                <td class="text-center px-4 py-5">
                                    <input type="checkbox" class="permission-checkbox w-5 h-5">
                                </td>

                                <td class="text-center px-4 py-5">
                                    <input type="checkbox" class="permission-checkbox w-5 h-5">
                                </td>

                            </tr>

                        </tbody>

                    </table>

                </div>



                <!-- Footer -->
<div class="p-4 sm:p-5 border-t border-gray-100 flex flex-col sm:flex-row sm:justify-end gap-3">

<button class="w-full sm:w-auto h-11 px-5 rounded-xl border border-gray-300 hover:bg-gray-100 transition">
    Reset Changes
</button>

<button
    onclick="savePermissions()"
    class="w-full sm:w-auto h-11 px-5 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white transition">

    Save Permissions

</button>

                </div>

            </div>

        </div>

    </div>

</div>



<!-- Add Role Modal -->
<div id="roleModal"
    class="fixed inset-0 bg-black/40 hidden items-center justify-center z-50 p-4">

    <div class="bg-white rounded-2xl w-full max-w-md p-6">

        <div class="flex items-center justify-between mb-5">

            <h2 class="text-2xl font-bold text-gray-800">
                Add New Role
            </h2>

            <button
                onclick="closeRoleModal()"
                class="text-2xl text-gray-500 hover:text-red-500">

                &times;

            </button>

        </div>

        <input
            type="text"
            name="role_name"
            placeholder="Enter role name"
            class="w-full h-12 rounded-xl border border-gray-300 px-4 mb-5">

        <div class="flex justify-end gap-3">

            <button
                onclick="closeRoleModal()"
                class="h-11 px-5 rounded-xl border border-gray-300 hover:bg-gray-100">

                Cancel

            </button>

            <button
                onclick="addRole()"
                class="h-11 px-5 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white">

                Save Role

            </button>

        </div>

    </div>

</div>



<!-- Add Module Modal -->
<div id="moduleModal"
    class="fixed inset-0 bg-black/40 hidden items-center justify-center z-50 p-4">

    <div class="bg-white rounded-2xl w-full max-w-md p-6">

        <div class="flex items-center justify-between mb-5">

            <h2 class="text-2xl font-bold text-gray-800">
                Add New Module
            </h2>

            <button
                onclick="closeModuleModal()"
                class="text-2xl text-gray-500 hover:text-red-500">

                &times;

            </button>

        </div>

        <input
            type="text"
            id="moduleName"
            placeholder="Enter module name"
            class="w-full h-12 rounded-xl border border-gray-300 px-4 mb-5">

        <div class="flex justify-end gap-3">

            <button
                onclick="closeModuleModal()"
                class="h-11 px-5 rounded-xl border border-gray-300 hover:bg-gray-100">

                Cancel

            </button>

            <button
                onclick="addModule()"
                class="h-11 px-5 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white">

                Save Module

            </button>

        </div>

    </div>

</div>



<!-- Add Permission Modal -->
<div id="permissionModal"
    class="fixed inset-0 bg-black/40 hidden items-center justify-center z-50 p-4">

    <div class="bg-white rounded-2xl w-full max-w-md p-6">

        <div class="flex items-center justify-between mb-5">

            <h2 class="text-2xl font-bold text-gray-800">
                Add Permission
            </h2>

            <button
                onclick="closePermissionModal()"
                class="text-2xl text-gray-500 hover:text-red-500">

                &times;

            </button>

        </div>

        <input
            type="text"
            id="permissionName"
            placeholder="Enter permission name"
            class="w-full h-12 rounded-xl border border-gray-300 px-4 mb-5">

        <div class="flex justify-end gap-3">

            <button
                onclick="closePermissionModal()"
                class="h-11 px-5 rounded-xl border border-gray-300 hover:bg-gray-100">

                Cancel

            </button>

            <button
                onclick="addPermission()"
                class="h-11 px-5 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white">

                Save Permission

            </button>

        </div>

    </div>

</div>


<script>

    // =========================
    // DATA STORAGE
    // =========================

    let rolesPermissions = {};

    let currentRole = 'Super Admin';



    // =========================
    // SAVE CURRENT ROLE DATA
    // =========================

    function savePermissions() {

        let permissions = [];

        document.querySelectorAll('#permissionTable tr').forEach(row => {

            let module =
                row.querySelector('td h4').innerText;

            let checks =
                row.querySelectorAll('input[type="checkbox"]');

            let values = [];

            checks.forEach(check => {

                values.push(check.checked);

            });

            permissions.push({

                module: module,
                values: values

            });

        });

        rolesPermissions[currentRole] = permissions;

        Swal.fire({
            icon: 'success',
            title: 'Success',
            text: currentRole + ' permissions saved successfully',
            confirmButtonColor: '#2563eb',
            width: "320px",
            padding: "1rem",
                    customClass: {

            popup: "rounded-2xl",
            title: "text-lg font-semibold",
            htmlContainer: "text-sm text-gray-500",
            confirmButton: "px-4 py-2 rounded-lg text-sm",
            cancelButton: "px-4 py-2 rounded-lg text-sm"

        }
        });

    }



    // =========================
    // LOAD ROLE DATA
    // =========================

    function loadPermissions(roleName) {

        if(!rolesPermissions[roleName]) return;

        let data = rolesPermissions[roleName];

        document.querySelectorAll('#permissionTable tr').forEach((row, index) => {

            let checks =
                row.querySelectorAll('input[type="checkbox"]');

            data[index].values.forEach((value, i) => {

                if(checks[i]) {

                    checks[i].checked = value;

                }

            });

        });

    }



    // =========================
    // ROLE MODAL
    // =========================

    function openRoleModal() {

        document.getElementById('roleModal')
            .classList.remove('hidden');

        document.getElementById('roleModal')
            .classList.add('flex');

    }

    function closeRoleModal() {

        document.getElementById('roleModal')
            .classList.add('hidden');

        document.getElementById('roleModal')
            .classList.remove('flex');

    }



    // =========================
    // ADD ROLE
    // =========================

    function addRole() {

        let roleName =
            document.querySelector('[name="role_name"]').value;

        if(roleName == '') {

            Swal.fire({
                icon: 'warning',
                title: 'Role Required',
                text: 'Please enter role name',
                confirmButtonColor: '#2563eb',
                 width: "320px",
            padding: "1rem",
                    customClass: {

            popup: "rounded-2xl",
            title: "text-lg font-semibold",
            htmlContainer: "text-sm text-gray-500",
            confirmButton: "px-4 py-2 rounded-lg text-sm",
            cancelButton: "px-4 py-2 rounded-lg text-sm"

        }
            });

            return;

        }

        let newRole = `

        <div
            onclick="selectRole('${roleName}', this)"
            class="role-item border border-gray-200 rounded-2xl p-4 cursor-pointer transition hover:border-blue-400">

            <h3 class="font-semibold text-gray-800">
                ${roleName}
            </h3>

        </div>

        `;

        document.getElementById('roleList').innerHTML += newRole;

        document.querySelector('[name="role_name"]').value = '';

        closeRoleModal();

        Swal.fire({
            icon: 'success',
            title: 'Role Added',
            text: roleName + ' added successfully',
            confirmButtonColor: '#2563eb',
             width: "320px",
            padding: "1rem",
                    customClass: {

            popup: "rounded-2xl",
            title: "text-lg font-semibold",
            htmlContainer: "text-sm text-gray-500",
            confirmButton: "px-4 py-2 rounded-lg text-sm",
            cancelButton: "px-4 py-2 rounded-lg text-sm"

        }
        });

    }



    // =========================
    // SELECT ROLE
    // =========================

    function selectRole(roleName, element) {

        savePermissions();

        currentRole = roleName;

        document.querySelector('.permission-title')
            .innerText = roleName;

        document.querySelectorAll('.role-item')
            .forEach(item => {

                item.classList.remove(
                    'border-2',
                    'border-blue-500',
                    'bg-blue-50'
                );

                item.classList.add(
                    'border',
                    'border-gray-200'
                );

            });

        element.classList.remove(
            'border',
            'border-gray-200'
        );

        element.classList.add(
            'border-2',
            'border-blue-500',
            'bg-blue-50'
        );

        loadPermissions(roleName);

    }



    // =========================
    // MODULE MODAL
    // =========================

    function openModuleModal() {

        document.getElementById('moduleModal')
            .classList.remove('hidden');

        document.getElementById('moduleModal')
            .classList.add('flex');

    }

    function closeModuleModal() {

        document.getElementById('moduleModal')
            .classList.add('hidden');

        document.getElementById('moduleModal')
            .classList.remove('flex');

    }



    // =========================
    // ADD MODULE
    // =========================

    function addModule() {

        let moduleName =
            document.getElementById('moduleName').value;

        if(moduleName == '') {

            Swal.fire({
                icon: 'warning',
                title: 'Module Required',
                text: 'Please enter module name',
                confirmButtonColor: '#2563eb',
                 width: "320px",
            padding: "1rem",
                    customClass: {

            popup: "rounded-2xl",
            title: "text-lg font-semibold",
            htmlContainer: "text-sm text-gray-500",
            confirmButton: "px-4 py-2 rounded-lg text-sm",
            cancelButton: "px-4 py-2 rounded-lg text-sm"

        }
            });

            return;

        }

        let columns =
            document.querySelectorAll('#permissionHeader th').length - 1;

        let row = `

        <tr class="permission-row hover:bg-gray-50 transition">

            <td class="px-6 py-5">

                <h4 class="font-semibold text-gray-800">
                    ${moduleName}
                </h4>

            </td>

        `;

        for(let i = 0; i < columns; i++) {

            row += `

            <td class="text-center px-4 py-5">

                <input
                    type="checkbox"
                    class="permission-checkbox w-5 h-5 rounded text-blue-600">

            </td>

            `;

        }

        row += `</tr>`;

        document.getElementById('permissionTable')
            .innerHTML += row;

        document.getElementById('moduleName').value = '';

        closeModuleModal();

        Swal.fire({
            icon: 'success',
            title: 'Module Added',
            text: moduleName + ' module added successfully',
            confirmButtonColor: '#2563eb',
             width: "320px",
            padding: "1rem",
                    customClass: {

            popup: "rounded-2xl",
            title: "text-lg font-semibold",
            htmlContainer: "text-sm text-gray-500",
            confirmButton: "px-4 py-2 rounded-lg text-sm",
            cancelButton: "px-4 py-2 rounded-lg text-sm"

        }
        });

    }



    // =========================
    // PERMISSION MODAL
    // =========================

    function openPermissionModal() {

        document.getElementById('permissionModal')
            .classList.remove('hidden');

        document.getElementById('permissionModal')
            .classList.add('flex');

    }

    function closePermissionModal() {

        document.getElementById('permissionModal')
            .classList.add('hidden');

        document.getElementById('permissionModal')
            .classList.remove('flex');

    }



    // =========================
    // ADD PERMISSION
    // =========================

    function addPermission() {

        let permission =
            document.getElementById('permissionName').value;

        if(permission == '') {

            Swal.fire({
                icon: 'warning',
                title: 'Permission Required',
                text: 'Please enter permission name',
                confirmButtonColor: '#16a34a',
                 width: "320px",
            padding: "1rem",
                    customClass: {

            popup: "rounded-2xl",
            title: "text-lg font-semibold",
            htmlContainer: "text-sm text-gray-500",
            confirmButton: "px-4 py-2 rounded-lg text-sm",
            cancelButton: "px-4 py-2 rounded-lg text-sm"

        }
            });

            return;

        }

        // ADD HEADER
        document.getElementById('permissionHeader')
            .innerHTML += `

            <th class="text-center px-4 py-4 text-sm font-semibold text-gray-700">
                ${permission}
            </th>

        `;

        // ADD COLUMN TO ALL ROWS
        document.querySelectorAll('.permission-row')
            .forEach(row => {

                row.innerHTML += `

                <td class="text-center px-4 py-5">

                    <input
                        type="checkbox"
                        class="permission-checkbox w-5 h-5 rounded text-blue-600">

                </td>

                `;

            });

        document.getElementById('permissionName').value = '';

        closePermissionModal();

        Swal.fire({
            icon: 'success',
            title: 'Permission Added',
            text: permission + ' permission added successfully',
            confirmButtonColor: '#16a34a',
             width: "320px",
            padding: "1rem",
                    customClass: {

            popup: "rounded-2xl",
            title: "text-lg font-semibold",
            htmlContainer: "text-sm text-gray-500",
            confirmButton: "px-4 py-2 rounded-lg text-sm",
            cancelButton: "px-4 py-2 rounded-lg text-sm"

        }
        });

    }

</script>

<?php include 'footer.php'; ?>