@extends('app')

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

@section('content')
    <!-- Page Header -->
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Permissions Management</h1>
                <p class="mt-1 text-sm text-gray-600">Manage system permissions and access control</p>
            </div>
            <button onclick="showCreateModal()" class="btn btn-primary">
                <i data-lucide="plus" class="w-4 h-4"></i>
                Tambah Kebenaran
            </button>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="bg-white rounded-lg shadow mb-6 p-6">
        <div class="flex items-center gap-4">
            <div class="flex-1">
                <input type="text" id="searchInput" class="input w-full" placeholder="Search permissions...">
            </div>
            <button onclick="loadPermissions()" class="btn btn-secondary">
                <i data-lucide="search" class="w-4 h-4"></i>
                Search
            </button>
        </div>
    </div>

    <!-- Permissions Table -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="table w-full">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nama Kebenaran</th>
                            <th>Guard</th>
                            <th>Created At</th>
                            <th>Tindakan</th>
                        </tr>
                    </thead>
                    <tbody id="permissionsTableBody">
                        <tr>
                            <td colspan="5" class="text-center">
                                <span class="loading loading-spinner loading-lg"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="flex items-center justify-between mt-6">
                <div class="text-sm text-gray-600" id="paginationInfo">
                    Showing 0 daripada 0 permissions
                </div>
                <div class="flex gap-2" id="paginationControls">
                    <!-- Pagination buttons will be added dynamically -->
                </div>
            </div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <dialog id="permissionModal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg" id="modalTajuk">Add New Permission</h3>
            <form id="permissionForm" class="mt-4">
                <input type="hidden" id="permissionId">

                <div class="mb-4">
                    <label for="permissionName" class="label font-semibold">
                        Nama Kebenaran <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="permissionName" class="input w-full"
                        placeholder="e.g., view-reports, edit-users" required>
                    <span id="error-name" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="mb-4">
                    <label for="guardName" class="label font-semibold">Guard Name</label>
                    <select id="guardName" class="select w-full">
                        <option value="web">Web</option>
                        <option value="api">API</option>
                    </select>
                    <span id="error-guard_name" 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="submitBtn" class="btn btn-primary">
                        <span id="submitBtnText">Create Permission</span>
                        <span id="submitBtnLoading" class="loading loading-spinner hidden"></span>
                    </button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>

    <!-- View Permission Modal -->
    <dialog id="viewPermissionModal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg">Permission Details</h3>
            <div class="mt-4">
                <div class="mb-4">
                    <label class="label font-semibold">Nama Kebenaran</label>
                    <p id="viewPermissionName" class="text-gray-700"></p>
                </div>
                <div class="mb-4">
                    <label class="label font-semibold">Guard Name</label>
                    <p id="viewGuardName" class="text-gray-700"></p>
                </div>
                <div class="mb-4">
                    <label class="label font-semibold">Assigned to Roles</label>
                    <div id="viewRolesList" class="flex flex-wrap gap-2 mt-2">
                        <!-- Roles will be added dynamically -->
                    </div>
                </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')
    <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 currentPage = 1;
        let perPage = 10;

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

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

            loadPermissions();

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

            // Form submit
            $('#permissionForm').on('submit', function(e) {
                e.preventDefault();
                savePermission();
            });
        });

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

            const params = new URLSearchParams({
                page: currentPage,
                per_page: perPage,
                ...(search && {
                    search
                })
            });

            window.apiRequest(`/api/permissions?${params}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    console.log('Permissions response:', response.data); // Debug log

                    // Laravel pagination wraps data in 'data' property
                    const paginationData = response.data;
                    const permissionsArray = paginationData.data || [];

                    renderPermissions(permissionsArray);
                    renderPagination(paginationData);

                    // Refresh icons
                    setTimeout(function() {
                        if (window.lucide && typeof window.lucide.createIcons === 'function') {
                            window.lucide.createIcons();
                        }
                    }, 50);
                })
                .catch(function(error) {
                    console.error('Error loading permissions:', error);
                    toastr.error('Failed to load permissions');
                    $('#permissionsTableBody').html(
                        '<tr><td colspan="5" class="text-center text-red-500">Failed to load permissions</td></tr>'
                    );
                });
        }

        function renderPermissions(permissions) {
            if (!permissions || permissions.length === 0) {
                $('#permissionsTableBody').html(
                    '<tr><td colspan="5" class="text-center text-gray-500">Tiada kebenaran dijumpai</td></tr>'
                );
                return;
            }

            let html = '';
            permissions.forEach(function(permission) {
                const createdAt = new Date(permission.created_at).toLocaleDateString();
                html += `
                    <tr>
                        <td>${permission.id}</td>
                        <td><span class="badge badge-primary">${permission.name}</span></td>
                        <td><span class="badge badge-secondary">${permission.guard_name}</span></td>
                        <td>${createdAt}</td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="viewPermission(${permission.id})" class="btn btn-sm btn-info" title="View">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>
                                <button onclick="editPermission(${permission.id})" class="btn btn-sm btn-warning" title="Edit">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deletePermission(${permission.id}, '${permission.name}')" class="btn btn-sm btn-error" title="Delete">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            $('#permissionsTableBody').html(html);
        }

        function renderPagination(response) {
            const {
                current_page,
                last_page,
                from,
                to,
                total
            } = response;

            $('#paginationInfo').text(`Showing ${from || 0} to ${to || 0} daripada ${total} permissions`);

            let paginationHtml = '';
            if (last_page > 1) {
                // Sebelum button
                paginationHtml += `
                    <button onclick="loadPermissions(${current_page - 1})"
                        class="btn btn-sm" ${current_page === 1 ? 'disabled' : ''}>
                        Sebelum
                    </button>
                `;

                // Page numbers
                for (let i = 1; i <= last_page; i++) {
                    if (i === 1 || i === last_page || (i >= current_page - 1 && i <= current_page + 1)) {
                        paginationHtml += `
                            <button onclick="loadPermissions(${i})"
                                class="btn btn-sm ${i === current_page ? 'btn-primary' : ''}">
                                ${i}
                            </button>
                        `;
                    } else if (i === current_page - 2 || i === current_page + 2) {
                        paginationHtml += `<span class="px-2">...</span>`;
                    }
                }

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

            $('#paginationControls').html(paginationHtml);
        }

        function showCreateModal() {
            $('#modalTajuk').text('Add New Permission');
            $('#permissionId').val('');
            $('#permissionName').val('');
            $('#guardName').val('web');
            $('#submitBtnText').text('Create Permission');
            clearErrors();
            document.getElementById('permissionModal').showModal();
        }

        function editPermission(id) {
            window.apiRequest(`/api/permissions/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const permission = response.data.permission;
                    $('#modalTajuk').text('Edit Permission');
                    $('#permissionId').val(permission.id);
                    $('#permissionName').val(permission.name);
                    $('#guardName').val(permission.guard_name);
                    $('#submitBtnText').text('Update Permission');
                    clearErrors();
                    document.getElementById('permissionModal').showModal();
                })
                .catch(function(error) {
                    toastr.error('Failed to load permission details');
                });
        }

        function viewPermission(id) {
            window.apiRequest(`/api/permissions/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const data = response.data;
                    $('#viewPermissionName').text(data.permission.name);
                    $('#viewGuardName').text(data.permission.guard_name);

                    let rolesHtml = '';
                    if (data.roles && data.roles.length > 0) {
                        data.roles.forEach(function(role) {
                            rolesHtml += `<span class="badge badge-primary">${role.name}</span>`;
                        });
                    } else {
                        rolesHtml = '<span class="text-gray-500">Not assigned to any role</span>';
                    }
                    $('#viewRolesList').html(rolesHtml);

                    document.getElementById('viewPermissionModal').showModal();
                })
                .catch(function(error) {
                    toastr.error('Failed to load permission details');
                });
        }

        function savePermission() {
            const id = $('#permissionId').val();
            const data = {
                name: $('#permissionName').val(),
                guard_name: $('#guardName').val()
            };

            const url = id ? `/api/permissions/${id}` : '/api/permissions';
            const method = id ? 'PUT' : 'POST';

            // Show loading
            $('#submitBtn').prop('disabled', true);
            $('#submitBtnText').addClass('hidden');
            $('#submitBtnLoading').removeClass('hidden');

            window.apiRequest(url, {
                    method: method,
                    data: JSON.stringify(data),
                    contentType: 'application/json'
                })
                .then(function(response) {
                    toastr.success(response.data.message);
                    closeModal();
                    loadPermissions(currentPage);
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        const errors = error.xhr.responseJSON.data;
                        displayErrors(errors);
                    } else if (error.xhr && error.xhr.status === 403) {
                        toastr.error('You do not have permission to perform this action');
                    } else {
                        toastr.error('Failed to save permission');
                    }
                })
                .finally(function() {
                    $('#submitBtn').prop('disabled', false);
                    $('#submitBtnText').removeClass('hidden');
                    $('#submitBtnLoading').addClass('hidden');
                });
        }

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

            window.apiRequest(`/api/permissions/${id}`, {
                    method: 'DELETE'
                })
                .then(function(response) {
                    toastr.success('Permission deleted successfully');
                    loadPermissions(currentPage);
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        toastr.error(error.xhr.responseJSON.message);
                    } else if (error.xhr && error.xhr.status === 403) {
                        toastr.error('You do not have permission to perform this action');
                    } else {
                        toastr.error('Failed to delete permission');
                    }
                });
        }

        function closeModal() {
            document.getElementById('permissionModal').close();
            clearErrors();
        }

        function closeViewModal() {
            document.getElementById('viewPermissionModal').close();
        }

        function displayErrors(errors) {
            clearErrors();
            for (const [field, messages] of Object.entries(errors)) {
                const errorElement = $(`#error-${field}`);
                if (errorElement.length) {
                    errorElement.text(messages[0]).removeClass('hidden');
                }
            }
        }

        function clearErrors() {
            $('[id^="error-"]').addClass('hidden').text('');
        }
    </script>
@endpush