<x-app-layout>
    <x-slot name="header">
        <h1 class="mb-0 uppercase text-3xl">
            {{ __('Edit Role Permissions') }}
        </h1>
    </x-slot>

    <div class="py-12">
        <div class="grid grid-cols-1">
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h3 class="card-title uppercase">
                        <i class="fas fa-user-shield"></i>
                        {{ $role->name }}
                    </h3>
                    <a href="{{ route('roles.index') }}" class="btn btn-primary w-max uppercase">Back to Roles</a>
                </div>

                @if(session()->has('message'))
                    <div class="alert alert-success">
                        {{ session()->get('message') }}
                    </div>
                @endif

                <div class="card-body">
                    <form action="{{ route('roles.update', $role->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="p-5">
                            <div class="mb-6">
                                <h2 class="text-lg font-semibold mb-2">Permissions</h2>
                                <p class="text-sm text-gray-500 mb-4">
                                    Check which permissions this role should have in this tenant.
                                </p>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    @foreach($permissions as $permission)
                                        <label class="inline-flex items-center space-x-2">
                                            <input
                                                type="checkbox"
                                                name="permissions[]"
                                                value="{{ $permission->name }}"
                                                @checked(in_array($permission->name, $assigned))
                                            >
                                            <span class="text-sm">
                                                @switch($permission->name)
                                                    @case('manage_customers')
                                                        Manage Customer
                                                        @break
                                                    @case('manage_users')
                                                        Manage Users
                                                        @break
                                                    @case('manage_printers')
                                                        Manage Printers
                                                        @break
                                                    @case('monitoring_settings')
                                                        Monitoring Settings
                                                        @break
                                                    @case('notification_settings')
                                                        Notification Settings
                                                        @break
                                                    @default
                                                        {{ $permission->name }}
                                                @endswitch
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>

                            <div class="mt-8">
                                <button type="submit" class="btn-primary inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                                    Save
                                </button>
                                <a href="{{ route('roles.index') }}" class="ml-4 inline-flex items-center px-4 py-2 bg-red-800 dark:bg-red-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-red-800 uppercase tracking-widest hover:bg-red-700 dark:hover:bg-white focus:bg-red-700 dark:focus:bg-white active:bg-red-900 dark:active:bg-red-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-red-800 transition ease-in-out duration-150">
                                    Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>