@extends('layouts.admin')
@section('title', 'Role Permissions')
@section('page-title', 'Role & Permission Management')
@section('page-subtitle', 'Control what each staff role can access and do')

@section('content')
@php
$roleLabels = [
    'admin'        => ['label'=>'Administrator', 'color'=>'red'],
    'manager'      => ['label'=>'Manager',        'color'=>'purple'],
    'cashier'      => ['label'=>'Cashier',         'color'=>'blue'],
    'agent'        => ['label'=>'Field Agent',     'color'=>'green'],
    'loan_officer' => ['label'=>'Loan Officer',    'color'=>'yellow'],
    'pos'          => ['label'=>'POS Operator',    'color'=>'indigo'],
    'auditor'      => ['label'=>'Auditor',         'color'=>'pink'],
];
$actions = ['can_view'=>'View', 'can_create'=>'Create', 'can_edit'=>'Edit', 'can_delete'=>'Delete', 'can_approve'=>'Approve'];
@endphp

<!-- Role Cards Overview -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    @foreach($roleLabels as $roleKey => $info)
    <a href="{{ route('admin.settings.role-details', $roleKey) }}"
       class="card p-4 hover:shadow-md transition-shadow cursor-pointer border-l-4 border-{{ $info['color'] }}-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="font-bold text-gray-800 text-sm">{{ $info['label'] }}</p>
                @php
                $count = isset($permissions[$roleKey]) ? $permissions[$roleKey]->where('can_view', true)->count() : 0;
                @endphp
                <p class="text-xs text-gray-500">{{ $count }} modules accessible</p>
            </div>
            <span class="px-2 py-0.5 rounded text-xs bg-{{ $info['color'] }}-100 text-{{ $info['color'] }}-800 font-medium">
                {{ strtoupper($roleKey) }}
            </span>
        </div>
    </a>
    @endforeach
    <a href="{{ route('admin.settings.index') }}?tab=branding" class="card p-4 flex items-center justify-center text-gray-500 hover:bg-gray-50 text-sm">
        <i class="fas fa-arrow-left mr-2"></i>Back to Settings
    </a>
</div>

<!-- Permission Matrix Table -->
<div class="card overflow-hidden">
    <div class="px-6 py-4 bg-gray-50 border-b flex items-center justify-between">
        <h3 class="font-bold text-gray-800"><i class="fas fa-table mr-2 text-blue-600"></i>Full Permission Matrix</h3>
        <span class="text-xs text-gray-500 bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full">
            <i class="fas fa-lock mr-1"></i>Admin permissions are always full access and locked
        </span>
    </div>
    <form action="{{ route('admin.settings.permissions.update') }}" method="POST">
        @csrf @method('PUT')
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead class="bg-gray-50 border-b">
                    <tr>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600 sticky left-0 bg-gray-50 z-10 min-w-36">Module</th>
                        @foreach(array_filter($roleLabels, fn($r) => $r !== 'admin', ARRAY_FILTER_USE_KEY) as $roleKey => $info)
                        <th class="px-2 py-3 text-center" colspan="5">
                            <span class="px-2 py-1 rounded text-xs bg-{{ $info['color'] }}-100 text-{{ $info['color'] }}-800 font-bold">
                                {{ $info['label'] }}
                            </span>
                        </th>
                        @endforeach
                    </tr>
                    <tr class="bg-gray-100">
                        <th class="px-4 py-2 text-left text-gray-500 sticky left-0 bg-gray-100"></th>
                        @foreach(array_filter($roleLabels, fn($r) => $r !== 'admin', ARRAY_FILTER_USE_KEY) as $roleKey => $info)
                            @foreach($actions as $action => $label)
                            <th class="px-1 py-2 text-center text-gray-500 font-normal" style="min-width:52px">
                                <span class="text-xs">{{ $label }}</span>
                            </th>
                            @endforeach
                        @endforeach
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($modules as $moduleKey => $moduleLabel)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 font-medium text-gray-700 sticky left-0 bg-white border-r">
                            {{ $moduleLabel }}
                        </td>
                        @foreach(array_filter($roleLabels, fn($r) => $r !== 'admin', ARRAY_FILTER_USE_KEY) as $roleKey => $info)
                            @foreach($actions as $action => $label)
                            @php
                                $perm = $permissions[$roleKey]->firstWhere('module', $moduleKey) ?? null;
                                $checked = $perm ? $perm->$action : false;
                                $inputName = "{$roleKey}_{$moduleKey}_{$action}";
                            @endphp
                            <td class="px-1 py-3 text-center">
                                <input type="checkbox" name="{{ $inputName }}" value="1"
                                    {{ $checked ? 'checked' : '' }}
                                    class="w-4 h-4 text-blue-600 rounded cursor-pointer"
                                    title="{{ $info['label'] }}: {{ $label }} {{ $moduleLabel }}">
                            </td>
                            @endforeach
                        @endforeach
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="px-6 py-4 border-t bg-gray-50 flex justify-between items-center">
            <p class="text-xs text-gray-500"><i class="fas fa-info-circle mr-1"></i>Changes take effect immediately for all subsequent logins.</p>
            <button type="submit" class="px-6 py-2 bg-blue-700 text-white rounded-lg hover:bg-blue-800 font-medium">
                <i class="fas fa-save mr-2"></i>Save All Permissions
            </button>
        </div>
    </form>
</div>
@endsection