@extends('app')

@section('title', 'Kawalan Akses Halaman')

@section('content')
    <!-- Page Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Kawalan Akses Halaman</h1>
        <p class="mt-1 text-sm text-gray-600">Control which pages each role can access</p>
    </div>

    <!-- Role Tabs -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div role="tablist" class="tabs tabs-boxed bg-transparent p-4">
            <a role="tab" class="tab" id="tab-all" onclick="selectRole('all')">All Roles</a>
            <a role="tab" class="tab" id="tab-2" onclick="selectRole(2)">Staff</a>
            <a role="tab" class="tab" id="tab-3" onclick="selectRole(3)">User</a>
            <a role="tab" class="tab" id="tab-4" onclick="selectRole(4)">Syarikat</a>
        </div>
    </div>

    <!-- All Roles View -->
    <div id="view-all" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Will be filled dynamically -->
    </div>

    <!-- Single Role View -->
    <div id="view-single" class="hidden">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-900" id="role-name">Memuatkan...</h2>
                <p class="text-sm text-gray-600">Select pages this role can access</p>
            </div>

            <!-- Main Pages -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
                    <i data-lucide="layout" class="w-5 h-5 mr-2"></i>
                    Main Pages
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3" id="main-permissions">
                    <!-- Will be filled dynamically -->
                </div>
            </div>

            <!-- Reports -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
                    <i data-lucide="file-bar-chart" class="w-5 h-5 mr-2"></i>
                    Reports
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3" id="reports-permissions">
                    <!-- Will be filled dynamically -->
                </div>
            </div>

            <!-- Settings -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
                    <i data-lucide="settings" class="w-5 h-5 mr-2"></i>
                    Settings
                </h3>
                <div class="alert alert-warning mb-3">
                    <i data-lucide="alert-circle" class="w-5 h-5"></i>
                    <span>Settings pages are admin-only and cannot be modified</span>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3" id="settings-permissions">
                    <!-- Will be filled dynamically -->
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex gap-3">
                <button onclick="savePermissions()" class="btn btn-primary">
                    <i data-lucide="save" class="w-4 h-4"></i>
                    Save Tukars
                </button>
                <button onclick="selectRole('all')" class="btn btn-secondary">
                    <i data-lucide="x" class="w-4 h-4"></i>
                    Cancel
                </button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        let currentRoleId = null;
        let currentRoleData = null;

        // Toastr configuration
        toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "timeOut": "3000"
        };

        function initPageAccess() {
            // Check if user is NOT admin (id_role should be 1)
            if (window.currentUser.id_role != 1 && window.currentUser.id_role != "1") {
                toastr.error('Access denied. Admin only.');
                setTimeout(function() {
                    window.location.href = '/dashboard';
                }, 2000);
                return;
            }

            // Load all roles view by default
            selectRole('all');
        }

        $(document).ready(function() {
            // Wait for currentUser to be loaded
            function waitForUser(attempts = 0) {
                if (window.currentUser) {
                    // User data is ready, initialize page
                    initPageAccess();
                } else if (attempts < 50) {
                    // Wait 100ms and try again (max 5 seconds)
                    setTimeout(function() {
                        waitForUser(attempts + 1);
                    }, 100);
                } else {
                    // Timeout after 5 seconds
                    toastr.error('Failed to load user data. Please refresh the page.');
                }
            }

            waitForUser();
        });

        function selectRole(roleId) {
            // Update active tab
            $('.tab').removeClass('tab-active');
            $(`#tab-${roleId}`).addClass('tab-active');

            if (roleId === 'all') {
                // Show all roles view
                $('#view-all').removeClass('hidden');
                $('#view-single').addClass('hidden');
                loadAllRoles();
            } else {
                // Show single role view
                $('#view-all').addClass('hidden');
                $('#view-single').removeClass('hidden');
                loadRolePermissions(roleId);
            }

            currentRoleId = roleId;
        }

        function loadAllRoles() {
            // Load all non-admin roles
            const roles = [{
                    id: 2,
                    name: 'Staff',
                    color: 'info'
                },
                {
                    id: 3,
                    name: 'User',
                    color: 'success'
                },
                {
                    id: 4,
                    name: 'Company',
                    color: 'warning'
                }
            ];

            let html = '';
            roles.forEach(function(role) {
                html += `
                    <div class="card bg-white shadow hover:shadow-lg transition-shadow cursor-pointer"
                         onclick="selectRole(${role.id})">
                        <div class="card-body">
                            <h2 class="card-title">
                                <span class="badge badge-${role.color}">${role.name}</span>
                            </h2>
                            <p class="text-sm text-gray-600">Click to manage page access</p>
                            <div class="card-actions justify-end mt-4">
                                <button class="btn btn-sm btn-primary">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                    Manage Access
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            });

            $('#view-all').html(html);

            // Refresh icons
            setTimeout(function() {
                if (window.lucide && typeof window.lucide.createIcons === 'function') {
                    window.lucide.createIcons();
                }
            }, 50);
        }

        function loadRolePermissions(roleId) {
            window.apiRequest(`/api/roles/${roleId}/page-permissions`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const data = response.data;
                    currentRoleData = data;

                    $('#role-name').text(`${data.role.name} Role - Page Access`);

                    // Render permissions by category
                    renderPermissions('Main', data.permissions.Main, '#main-permissions');
                    renderPermissions('Reports', data.permissions.Reports, '#reports-permissions');
                    renderPermissions('Settings', data.permissions.Settings, '#settings-permissions', true);

                    // Refresh icons
                    setTimeout(function() {
                        if (window.lucide && typeof window.lucide.createIcons === 'function') {
                            window.lucide.createIcons();
                        }
                    }, 50);
                })
                .catch(function(error) {
                    console.error('Error loading role permissions:', error);
                    toastr.error('Failed to load role permissions');
                });
        }

        function renderPermissions(category, permissions, containerId, disabled = false) {
            if (!permissions || permissions.length === 0) {
                $(containerId).html('<p class="text-gray-500">No permissions in this category</p>');
                return;
            }

            let html = '';
            permissions.forEach(function(perm) {
                const checked = perm.has_permission ? 'checked' : '';
                const disabledAttr = disabled ? 'disabled' : '';
                const disabledClass = disabled ? 'opacity-50 cursor-not-allowed' : '';

                html += `
                    <div class="form-control ${disabledClass}">
                        <label class="label cursor-pointer justify-start gap-3">
                            <input type="checkbox"
                                   class="checkbox checkbox-primary"
                                   data-permission="${perm.name}"
                                   ${checked}
                                   ${disabledAttr}>
                            <span class="label-text font-medium">${perm.display_name}</span>
                        </label>
                    </div>
                `;
            });

            $(containerId).html(html);
        }

        function savePermissions() {
            if (!currentRoleId || currentRoleId === 'all') {
                toastr.error('Please select a role first');
                return;
            }

            // Collect all checked permissions
            const permissions = [];
            $('#main-permissions input:checked, #reports-permissions input:checked').each(function() {
                permissions.push($(this).data('permission'));
            });

            // Show loading
            toastr.info('Saving permissions...');

            window.apiRequest(`/api/roles/${currentRoleId}/page-permissions`, {
                    method: 'POST',
                    data: JSON.stringify({
                        permissions: permissions
                    }),
                    contentType: 'application/json'
                })
                .then(function(response) {
                    toastr.success('Page permissions updated successfully!');
                    // Reload to show updated data
                    loadRolePermissions(currentRoleId);
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 403) {
                        toastr.error('You do not have permission to perform this action');
                    } else if (error.xhr && error.xhr.status === 400) {
                        const errors = error.xhr.responseJSON;
                        toastr.error(errors.message || 'Validation failed');
                    } else {
                        toastr.error('Failed to save permissions');
                    }
                });
        }
    </script>
@endpush