@extends('layouts.app')

@section('title', 'Manage Role Permissions')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-white">
            Role Permissions
        </h1>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
            Assign permissions to roles. Portal Managers have access to all routes by default.
        </p>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700">
        <form method="POST" action="{{ route('admin.permissions.store') }}">
            @csrf
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
                    <thead
                        class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-300 sticky top-0 z-10">
                        <tr>
                            <th scope="col" class="py-3 px-6">
                                Permission / Route
                            </th>
                            @foreach ($roles as $roleKey => $roleName)
                                <th scope="col" class="py-3 px-6 text-center">
                                    {{ $roleName }}
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($groupedRoutes as $groupName => $routes)
                            <tr class="bg-gray-100 dark:bg-gray-700/50 border-t border-b border-gray-200 dark:border-gray-700"
                                x-data="{ open: true }">
                                <td class="py-3 px-6 font-semibold text-gray-900 dark:text-white"
                                    colspan="{{ count($roles) + 1 }}">
                                    <button type="button" @click="open = !open" class="flex items-center w-full">
                                        <span
                                            class="text-base">{{ \Illuminate\Support\Str::of($groupName)->replace('.', ' ')->title() }}</span>
                                        <svg class="w-4 h-4 ml-2 transition-transform" :class="{ 'rotate-180': !open }"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 9l-7 7-7-7"></path>
                                        </svg>
                                    </button>
                                </td>
                            </tr>
                            @foreach ($routes as $routeName => $route)
                                <tr class="bg-white dark:bg-gray-800 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/60"
                                    x-show="open" x-transition>
                                    <th scope="row"
                                        class="py-3 px-8 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                        {{ $routeName }}
                                    </th>
                                    @foreach ($roles as $roleKey => $roleName)
                                        <td class="py-3 px-6 text-center">
                                            @if ($roleKey === 'portal_manager')
                                                <svg class="w-5 h-5 text-green-500 mx-auto" fill="none"
                                                    stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M5 13l4 4L19 7"></path>
                                                </svg>
                                            @else
                                                <input type="checkbox"
                                                    name="permissions[{{ $roleKey }}][{{ $routeName }}]"
                                                    value="1" @checked(isset($permissions[$roleKey . '.' . $routeName]))
                                                    class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                            @endif
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="flex justify-end p-6 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700">
                <button type="submit"
                    class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
                    Save Permissions
                </button>
            </div>
        </form>
    </div>
@endsection