@extends('app')

@section('title', 'Role Management')

@section('content')
    <!-- Page Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Pengurusan Peranan</h1>
            <p class="mt-1 text-sm text-gray-600">Urus peranan dan kebenaran</p>
        </div>
        <button onclick="openCreateModal()" class="btn btn-primary">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Tambah Peranan
        </button>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow mb-6 p-4">
        <div class="flex gap-4">
            <div class="space-y-2 flex-1">
                <label class="label">Cari</label>
                <input type="text" id="search" class="input w-full" placeholder="Search by role name...">
            </div>
            <div class="flex items-end">
                <button onclick="loadRoles()" class="btn btn-secondary">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    Search
                </button>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table w-full">
                <thead>
                    <tr>
                        <th>Nama Peranan</th>
                        <th>Guard</th>
                        <th>Permissions Count</th>
                        <th>Created At</th>
                        <th>Tindakan</th>
                    </tr>
                </thead>
                <tbody id="roles-table">
                    <tr>
                        <td colspan="5" class="text-center py-8">
                            <span class="loading loading-spinner loading-lg"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="p-4 border-t border-gray-200">
            <div id="pagination" class="flex items-center justify-between"></div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <dialog id="role-modal" class="modal">
        <div class="modal-box max-w-2xl">
            <h3 class="font-bold text-lg mb-4" id="modal-title">Tambah Peranan</h3>
            <form id="role-form">
                <input type="hidden" id="role-id">

                <div class="mb-4 space-y-2">
                    <label for="name" class="label">Nama Peranan <span class="text-red-500">*</span></label>
                    <input type="text" id="name" class="input w-full" required>
                    <span id="error-name" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="guard_name" class="label">Guard Name</label>
                    <input type="text" id="guard_name" class="input w-full" value="web">
                    <span id="error-guard_name" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="mb-4 space-y-2">
                    <label class="label">Kebenaran</label>
                    <div id="permissions-list" class="border rounded-lg p-4 max-h-60 overflow-y-auto">
                        <span class="loading loading-spinner"></span>
                    </div>
                    <span id="error-permissions" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="modal-action">
                    <button type="button" onclick="closeModal()" class="btn">Batal</button>
                    <button type="submit" id="btn-submit" class="btn btn-primary">
                        <span id="btn-text">Simpan</span>
                        <span id="btn-loading" class="loading loading-spinner hidden"></span>
                    </button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>

    <!-- View Details Modal -->
    <dialog id="view-modal" class="modal">
        <div class="modal-box max-w-3xl">
            <h3 class="font-bold text-lg mb-4">Role Details</h3>
            <div id="role-details">
                <div class="flex justify-center py-8">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            </div>
            <div class="modal-action">
                <button onclick="closeViewModal()" class="btn">Tutup</button>
            </div>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;
        let currentRoleId = null;
        let allPermissions = [];

        function initRolesPage() {
            loadPermissions();
            loadRoles();

            // Search on enter
            $('#search').on('keypress', function(e) {
                if (e.which === 13) {
                    loadRoles();
                }
            });

            // Form submit
            $('#role-form').on('submit', function(e) {
                e.preventDefault();
                saveRole();
            });

            // Refresh icons when modals close
            $('#role-modal, #view-modal').on('close', function() {
                setTimeout(function() {
                    if (window.lucide && typeof window.lucide.createIcons === 'function') {
                        window.lucide.createIcons();
                    }
                }, 100);
            });
        }

        $(document).ready(function() {
            // Wait for currentUser to be loaded
            function waitForUser(attempts = 0) {
                if (window.currentUser) {
                    console.log('Current user:', window.currentUser);
                    // Check if user is admin
                    if (window.currentUser.id_role != 1 && window.currentUser.id_role != "1") {
                        alert('Access denied. Admin only.');
                        window.location.href = '/dashboard';
                        return;
                    }
                    // User data is ready and is admin, initialize page
                    initRolesPage();
                } else if (attempts < 50) {
                    // Wait 100ms and try again (max 5 seconds)
                    setTimeout(function() {
                        waitForUser(attempts + 1);
                    }, 100);
                } else {
                    // Timeout after 5 seconds
                    alert('Failed to load user data. Please refresh the page.');
                }
            }

            waitForUser();
        });

        function loadPermissions() {
            apiRequest('/api/permissions?per_page=100', {
                    method: 'GET'
                })
                .then(function(response) {
                    allPermissions = response.data.data || response.data;
                })
                .catch(function(error) {
                    console.error('Error loading permissions:', error);
                });
        }

        function loadRoles(page = 1) {
            currentPage = page;
            const search = $('#search').val();

            let url = `/api/roles?page=${page}&per_page=10`;
            if (search) url += `&search=${search}`;

            $('#roles-table').html(`
                <tr>
                    <td colspan="5" class="text-center py-8">
                        <span class="loading loading-spinner loading-lg"></span>
                    </td>
                </tr>
            `);

            apiRequest(url, {
                    method: 'GET'
                })
                .then(function(response) {
                    renderRoles(response.data);
                    renderPagination(response.data);
                })
                .catch(function(error) {
                    console.error('Error:', error);
                    $('#roles-table').html(`
                        <tr>
                            <td colspan="5" class="text-center py-8 text-red-500">
                                Failed to load roles
                            </td>
                        </tr>
                    `);
                });
        }

        function renderRoles(data) {
            if (data.data.length === 0) {
                $('#roles-table').html(`
                    <tr>
                        <td colspan="5" class="text-center py-8 text-gray-500">
                            Tiada peranan dijumpai
                        </td>
                    </tr>
                `);
                return;
            }

            let html = '';
            data.data.forEach(function(role) {
                const permissionsCount = role.permissions ? role.permissions.length : 0;
                const createdAt = new Date(role.created_at).toLocaleDateString();

                html += `
                    <tr>
                        <td class="font-medium">${role.name}</td>
                        <td>${role.guard_name}</td>
                        <td>
                            <span class="badge badge-primary">${permissionsCount} permissions</span>
                        </td>
                        <td>${createdAt}</td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="viewRole(${role.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>
                                <button onclick="editRole(${role.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deleteRole(${role.id}, '${role.name}')" class="btn btn-sm btn-ghost text-red-500">
                                    <i data-lucide="trash" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            $('#roles-table').html(html);

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

        function renderPagination(data) {
            if (data.last_page <= 1) {
                $('#pagination').html('');
                return;
            }

            let html = `
                <div class="text-sm text-gray-600">
                    Showing ${data.from} to ${data.to} daripada ${data.total} rekod
                </div>
                <div class="btn-group">
            `;

            html += `
                <button onclick="loadRoles(${data.current_page - 1})"
                    class="btn btn-sm" ${data.current_page === 1 ? 'disabled' : ''}>
                    Sebelum
                </button>
            `;

            for (let i = 1; i <= data.last_page; i++) {
                if (i === data.current_page) {
                    html += `<button class="btn btn-sm btn-active">${i}</button>`;
                } else {
                    html += `<button onclick="loadRoles(${i})" class="btn btn-sm">${i}</button>`;
                }
            }

            html += `
                <button onclick="loadRoles(${data.current_page + 1})"
                    class="btn btn-sm" ${data.current_page === data.last_page ? 'disabled' : ''}>
                    Seterusnya
                </button>
            `;

            html += '</div>';
            $('#pagination').html(html);
        }

        function renderPermissionsList(selectedPermissions = []) {
            let html = '';

            if (allPermissions.length === 0) {
                html = '<p class="text-gray-500 text-center">No permissions available</p>';
            } else {
                allPermissions.forEach(function(perm) {
                    const isChecked = selectedPermissions.includes(perm.id);
                    html += `
                        <div class="form-control">
                            <label class="label cursor-pointer justify-start">
                                <input type="checkbox" name="permissions[]" value="${perm.id}" class="checkbox checkbox-sm" ${isChecked ? 'checked' : ''}>
                                <span class="label-text ml-2">${perm.name}</span>
                            </label>
                        </div>
                    `;
                });
            }

            $('#permissions-list').html(html);
        }

        function openCreateModal() {
            currentRoleId = null;
            $('#modal-title').text('Tambah Peranan');
            $('#role-form')[0].reset();
            $('#role-id').val('');
            $('.text-red-500').addClass('hidden').text('');
            renderPermissionsList();
            document.getElementById('role-modal').showModal();
        }

        function viewRole(id) {
            $('#role-details').html(`
                <div class="flex justify-center py-8">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            `);
            document.getElementById('view-modal').showModal();

            apiRequest(`/api/roles/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const role = response.data;
                    let permissionsHtml = '';

                    if (role.permissions && role.permissions.length > 0) {
                        role.permissions.forEach(function(perm) {
                            permissionsHtml += `<span class="badge badge-sm badge-primary mr-2 mb-2">${perm.name}</span>`;
                        });
                    } else {
                        permissionsHtml = '<span class="text-gray-500">No permissions assigned</span>';
                    }

                    let html = `
                        <div class="space-y-4">
                            <div>
                                <p class="text-sm text-gray-600">Nama Peranan</p>
                                <p class="font-medium text-lg">${role.name}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Guard Name</p>
                                <p class="font-medium">${role.guard_name}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 mb-2">Permissions (${role.permissions ? role.permissions.length : 0})</p>
                                <div class="flex flex-wrap">${permissionsHtml}</div>
                            </div>
                        </div>
                    `;

                    $('#role-details').html(html);
                })
                .catch(function(error) {
                    $('#role-details').html(
                        '<p class="text-center text-red-500">Failed to load role details</p>');
                });
        }

        function editRole(id) {
            currentRoleId = id;
            $('#modal-title').text('Edit Role');
            $('.text-red-500').addClass('hidden').text('');

            apiRequest(`/api/roles/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const role = response.data;
                    $('#role-id').val(role.id);
                    $('#name').val(role.name);
                    $('#guard_name').val(role.guard_name);

                    const selectedPermissions = role.permissions ? role.permissions.map(p => p.id) : [];
                    renderPermissionsList(selectedPermissions);

                    document.getElementById('role-modal').showModal();
                })
                .catch(function(error) {
                    alert('Failed to load role data');
                });
        }

        function saveRole() {
            $('.text-red-500').addClass('hidden').text('');
            $('#btn-submit').prop('disabled', true);
            $('#btn-text').text('Saving...');
            $('#btn-loading').removeClass('hidden');

            const selectedPermissions = [];
            $('input[name="permissions[]"]:checked').each(function() {
                selectedPermissions.push(parseInt($(this).val()));
            });

            const data = {
                name: $('#name').val(),
                guard_name: $('#guard_name').val(),
                permissions: selectedPermissions
            };

            const url = currentRoleId ?
                `/api/roles/${currentRoleId}` :
                '/api/roles';

            const method = currentRoleId ? 'PUT' : 'POST';

            apiRequest(url, {
                    method: method,
                    data: JSON.stringify(data)
                })
                .then(function(response) {
                    closeModal();
                    loadRoles(currentPage);
                    alert(response.message || 'Role saved successfully');
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        const errors = error.xhr.responseJSON.data;
                        Object.keys(errors).forEach(function(key) {
                            $(`#error-${key}`).removeClass('hidden').text(errors[key][0]);
                        });
                    } else {
                        alert('Failed to save role');
                    }
                })
                .finally(function() {
                    $('#btn-submit').prop('disabled', false);
                    $('#btn-text').text('Save');
                    $('#btn-loading').addClass('hidden');
                });
        }

        function deleteRole(id, name) {
            if (!confirm(`Are you sure you want to delete "${name}"?`)) {
                return;
            }

            apiRequest(`/api/roles/${id}`, {
                    method: 'DELETE'
                })
                .then(function(response) {
                    loadRoles(currentPage);
                    alert(response.message || 'Role deleted successfully');
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        alert(error.xhr.responseJSON.message);
                    } else {
                        alert('Failed to delete role');
                    }
                });
        }

        function closeModal() {
            document.getElementById('role-modal').close();
        }

        function closeViewModal() {
            document.getElementById('view-modal').close();
        }
    </script>
@endpush