@extends('layouts.app')

{{-- Push custom styles to the 'styles' stack in your layout --}}
@push('styles')
    <style>
        .permissions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 0.5rem;
        }

        .permission-item {
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
@endpush

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">

        @include('partials.header')
        @include('partials.sidebar')
        <div id="content" class="content">
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Admin Panel</a></li>
                <li class="breadcrumb-item active">Role</li>
            </ol>
            <h1 class="page-header">Role</h1>
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('roles.create') }}" class="btn btn-custom"><i class="fa fa-plus"></i> Add Role</a>
                    </div>
                </div>
                <div class="panel-body">
                    <!-- begin success alert -->
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                    <!-- end success alert -->

                    <!-- begin error alert -->
                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                    <!-- end error alert -->
                    <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle">
                        <thead>
                            <tr>
                                <th width="20%">Name</th>
                                <th>Permission</th>
                                <th width="15%">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($roles as $role)
                                <tr>
                                    <td>{{ $role->name }}</td>
                                    <td>
                                        {{-- Show a count and a button to trigger the modal --}}
                                        <span class="badge badge-info">{{ $role->permissions->count() }} Permissions</span>
                                        <button type="button" class="btn btn-xs btn-primary view-permissions-btn"
                                            data-role-name="{{ $role->name }}"
                                            data-permissions='@json($role->permissions->sortBy('name')->pluck('name'))'>
                                            <i class="fa fa-eye"></i> View
                                        </button>
                                    </td>
                                    <td>
                                        <a href="{{ route('roles.edit', $role->id) }}" class="btn btn-custom"><i
                                                class="fa fa-edit"></i></a>
                                        <form action="{{ route('roles.destroy', $role->id) }}" method="POST"
                                            style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            {{-- Add a confirmation for delete action --}}
                                            <button type="submit" class="btn btn-custom"
                                                onclick="return confirm('Are you sure you want to delete this role?');">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center">No roles found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>

    <div class="modal fade" id="permissionsModal" tabindex="-1" role="dialog" aria-labelledby="permissionsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="permissionsModalLabel">Permissions for Role</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{-- This class is essential for the grid layout --}}
                    <div id="modalPermissionsGrid" class="permissions-grid">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* This is the main grid container style */
        .permissions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 0.5rem;
        }

        /* This styles each individual permission item */
        .permission-item {
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>

    <script>
        // Wait for the DOM to be fully loaded before running the script
        document.addEventListener('DOMContentLoaded', function() {

            // --- IMPORTANT NOTE ---
            // This script still requires Bootstrap's JavaScript library to be loaded on your page
            // to handle the modal functionality (e.g., bootstrap.bundle.min.js).
            // We are just removing the jQuery dependency from our custom code.

            // Get the modal element and create a reusable Bootstrap Modal instance
            const permissionsModalElement = document.getElementById('permissionsModal');
            const permissionsModal = new bootstrap.Modal(permissionsModalElement);

            // Get the elements inside the modal that we need to update
            const modalTitle = document.getElementById('permissionsModalLabel');
            const modalGrid = document.getElementById('modalPermissionsGrid');

            // Find all the 'View Permissions' buttons on the page
            const viewButtons = document.querySelectorAll('.view-permissions-btn');

            // Add a click event listener to each button
            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // Get data from the button's data-* attributes
                    const roleName = this.getAttribute('data-role-name');
                    const permissions = JSON.parse(this.getAttribute('data-permissions'));

                    // 1. Update the modal's title
                    modalTitle.textContent = `Permissions for: ${roleName}`;

                    // 2. Clear any previous permissions from the modal's body
                    modalGrid.innerHTML = '';

                    // 3. Populate the modal with the new permissions
                    if (permissions && permissions.length > 0) {
                        permissions.forEach(name => {
                            const item = document.createElement('div');
                            item.className = 'permission-item';
                            item.textContent = name;
                            modalGrid.appendChild(item);
                        });
                    } else {
                        const noPermsMessage = document.createElement('p');
                        noPermsMessage.textContent = 'This role has no permissions.';
                        modalGrid.appendChild(noPermsMessage);
                    }

                    // 4. Show the modal
                    permissionsModal.show();
                });
            });
        });
    </script>
@endsection