@extends('layouts.app')

@section('title', 'Roles')

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <h4 class="mb-3 mb-md-0">Roles</h4>
        <a href="{{ route('roles.create') }}" class="btn btn-primary">
            <i class="icon-base ti tabler-plus me-1"></i>
            New Role
        </a>
    </div>

    @include('partials.alerts')

    <div class="card">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Members</th>
                    <th>Description</th>
                    <th class="text-end">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse($roles as $role)
                    <tr>
                        <td class="fw-medium">{{ $role->name }}</td>
                        <td>{{ $role->users_count }}</td>
                        <td>{{ $role->description ?? '—' }}</td>
                        <td class="text-end">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-primary" 
                                        data-bs-toggle="offcanvas" 
                                        data-bs-target="#offcanvasPermissions{{ $role->id }}" 
                                        aria-controls="offcanvasPermissions{{ $role->id }}"
                                        onclick="loadRolePermissions({{ $role->id }})">
                                    <i class="icon-base ti tabler-lock-code"></i>
                                </button>
                                <a href="{{ route('roles.edit', $role) }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="icon-base ti tabler-edit"></i>
                                </a>
                                <form action="{{ route('roles.destroy', $role) }}" method="post" class="d-inline"
                                      onsubmit="return confirm('Delete this role?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                        <i class="icon-base ti tabler-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center text-muted py-4">No roles configured.</td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($roles->hasPages())
            <div class="card-footer d-flex justify-content-end">
                {{ $roles->links() }}
            </div>
        @endif
    </div>

    <!-- Offcanvas to manage role permissions -->
    @foreach($roles as $role)
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasPermissions{{ $role->id }}" aria-labelledby="offcanvasPermissions{{ $role->id }}Label" style="width: 80%;">
            <div class="offcanvas-header border-bottom">
                <h5 id="offcanvasPermissions{{ $role->id }}Label" class="offcanvas-title">Manage Permissions</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
                <div id="permissionsContent{{ $role->id }}">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 text-muted">Loading permissions...</p>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endsection

@push('scripts')
<script>
    function loadRolePermissions(roleId) {
        const contentDiv = document.getElementById(`permissionsContent${roleId}`);
        contentDiv.innerHTML = `
            <div class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2 text-muted">Loading permissions...</p>
            </div>
        `;

        fetch(`{{ url('/roles') }}/${roleId}/permissions`)
            .then(response => response.json())
            .then(data => {
                let html = `
                    <form id="permissionsForm${roleId}" method="POST" action="{{ url('/roles') }}/${roleId}/permissions">
                        @csrf
                        <input type="hidden" name="_method" value="PUT">
                        <div class="mb-3">
                            <h6 class="mb-1">Role: <strong>${data.role.name}</strong></h6>
                            <p class="text-muted small mb-0">Select permissions to assign to this role</p>
                        </div>
                        <div class="table-responsive" style="max-height: 70vh; overflow-y: auto;">
                            <table class="table table-sm table-hover mb-0">
                                <thead class="sticky-top bg-body">
                                    <tr>
                                        <th style="width: 200px;">Page</th>
                                        <th class="text-center" style="width: 100px;">View</th>
                                        <th class="text-center" style="width: 100px;">Create</th>
                                        <th class="text-center" style="width: 100px;">Update</th>
                                        <th class="text-center" style="width: 100px;">Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                `;

                data.pages.forEach(page => {
                    html += `
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar me-2">
                                        <div class="avatar-initial bg-label-primary rounded">
                                            <i class="icon-base ti ${page.icon}"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 small">${page.name}</h6>
                                        <small class="text-muted">${page.description}</small>
                                    </div>
                                </div>
                            </td>
                    `;

                    ['view', 'create', 'update', 'delete'].forEach(action => {
                        if (page.actions.includes(action)) {
                            const permission = page.permissions[action];
                            const isChecked = permission && permission.assigned;
                            const isDisabled = !permission || !permission.exists;
                            
                            html += `
                                <td class="text-center">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" 
                                               type="checkbox" 
                                               name="permissions[]" 
                                               value="${permission?.id || ''}"
                                               id="perm-${roleId}-${page.slug}-${action}"
                                               ${isChecked ? 'checked' : ''}
                                               ${isDisabled ? 'disabled' : ''}>
                                        <label class="form-check-label" for="perm-${roleId}-${page.slug}-${action}"></label>
                                    </div>
                                    ${isDisabled ? '<small class="text-muted d-block">N/A</small>' : ''}
                                </td>
                            `;
                        } else {
                            html += `<td class="text-center"><span class="text-muted">—</span></td>`;
                        }
                    });

                    html += `</tr>`;
                });

                html += `
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4 d-flex flex-wrap gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="icon-base ti tabler-check me-1"></i> Update Permissions
                            </button>
                            <button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
                        </div>
                    </form>
                `;

                contentDiv.innerHTML = html;
            })
            .catch(error => {
                console.error('Error:', error);
                contentDiv.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="icon-base ti tabler-alert-circle me-1"></i>
                        Error loading permissions. Please try again.
                    </div>
                `;
            });
    }

    // Reset form when offcanvas is closed
    document.querySelectorAll('[id^="offcanvasPermissions"]').forEach(offcanvas => {
        offcanvas.addEventListener('hidden.bs.offcanvas', function () {
            const roleId = this.id.replace('offcanvasPermissions', '');
            const contentDiv = document.getElementById(`permissionsContent${roleId}`);
            contentDiv.innerHTML = `
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 text-muted">Loading permissions...</p>
                </div>
            `;
        });
    });
</script>
@endpush