@php
    $policy = $accessPolicyConfig ?? [];
    $baseRoles = $policy['base_roles'] ?? ['admin', 'manager', 'accountant', 'officer', 'applicant', 'user'];
    $dayLabels = $policy['day_labels'] ?? [1 => 'Mon', 2 => 'Tue', 3 => 'Wed', 4 => 'Thu', 5 => 'Fri', 6 => 'Sat', 7 => 'Sun'];
    $globalIps = $policy['global_ips'] ?? [];
    if ($globalIps === []) {
        $globalIps = [''];
    }
    $roleIps = $policy['role_ips'] ?? [];
    foreach ($baseRoles as $roleKey) {
        if (! isset($roleIps[$roleKey])) {
            $roleIps[$roleKey] = [];
        }
    }
    $roleWindows = $policy['role_login_windows'] ?? [];
    $sensitiveRoutes = $policy['sensitive_routes'] ?? [];
    if ($sensitiveRoutes === []) {
        $sensitiveRoutes = [''];
    }
    $policyTurboAttr = \App\Support\Navigation\WorkspaceEmbed::isEmbedded()
        ? ['data-turbo-frame' => $accessRolesTurboFrame ?? '_top']
        : [];
@endphp

<div class="mt-4 space-y-4" x-show="activeTab === 'access_policies'">
    <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-5">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <h2 class="text-base font-semibold text-slate-900">Access Policies</h2>
                <p class="mt-1 text-sm text-slate-600">
                    Control login windows, trusted devices, and IP restrictions for sensitive loan modules.
                    These rules apply on top of role permissions.
                </p>
            </div>
            <div class="flex flex-wrap gap-2 text-xs">
                <span class="rounded-lg border px-2.5 py-1.5 {{ ($policy['device_governance_enabled'] ?? false) ? 'border-emerald-200 bg-emerald-50 text-emerald-800' : 'border-slate-200 bg-slate-50 text-slate-600' }}">Device governance {{ ($policy['device_governance_enabled'] ?? false) ? 'ON' : 'OFF' }}</span>
                <span class="rounded-lg border px-2.5 py-1.5 {{ ($policy['role_login_windows_enabled'] ?? false) ? 'border-emerald-200 bg-emerald-50 text-emerald-800' : 'border-slate-200 bg-slate-50 text-slate-600' }}">Login windows {{ ($policy['role_login_windows_enabled'] ?? false) ? 'ON' : 'OFF' }}</span>
                <span class="rounded-lg border px-2.5 py-1.5 {{ ($policy['ip_restrictions_enabled'] ?? false) ? 'border-emerald-200 bg-emerald-50 text-emerald-800' : 'border-slate-200 bg-slate-50 text-slate-600' }}">IP restrictions {{ ($policy['ip_restrictions_enabled'] ?? false) ? 'ON' : 'OFF' }}</span>
            </div>
        </div>
        <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-5">
            <div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><p class="text-xs font-semibold text-slate-800">Session timeout</p><p class="mt-1 text-xs text-slate-500">10 min inactivity · auto logout</p></div>
            <div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><p class="text-xs font-semibold text-slate-800">High-risk pages</p><p class="mt-1 text-xs text-slate-500">Setup, accounting, financial</p></div>
            <div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><p class="text-xs font-semibold text-slate-800">IP restriction</p><p class="mt-1 text-xs text-slate-500">Sensitive routes when enabled</p></div>
            <div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><p class="text-xs font-semibold text-slate-800">Login windows</p><p class="mt-1 text-xs text-slate-500">Per base role below</p></div>
            <div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><p class="text-xs font-semibold text-slate-800">Unique credentials</p><p class="mt-1 text-xs text-slate-500">No shared staff logins</p></div>
        </div>
    </div>

    <form method="post" action="{{ route('loan.system.setup.access_roles.security_policies.update') }}" class="space-y-4" @foreach($policyTurboAttr as $attr => $val) {{ $attr }}="{{ $val }}" @endforeach x-data="{
        globalIps: @js($globalIps),
        roleIps: @js($roleIps),
        sensitiveRoutes: @js($sensitiveRoutes),
        selectedRole: @js($baseRoles[0] ?? 'admin'),
        addGlobalIp() { this.globalIps.push(''); },
        removeGlobalIp(i) { this.globalIps.splice(i, 1); if (!this.globalIps.length) this.globalIps.push(''); },
        addRoleIp(role) { if (!this.roleIps[role]) this.roleIps[role] = []; this.roleIps[role].push(''); },
        removeRoleIp(role, i) { if (this.roleIps[role]) this.roleIps[role].splice(i, 1); },
        addSensitiveRoute() { this.sensitiveRoutes.push(''); },
        removeSensitiveRoute(i) { this.sensitiveRoutes.splice(i, 1); if (!this.sensitiveRoutes.length) this.sensitiveRoutes.push(''); }
    }">
        @csrf
        <input type="hidden" name="policy_form" value="structured">

        <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-5">
            <h3 class="text-sm font-semibold text-slate-800">Policy switches</h3>
            <p class="mt-1 text-xs text-slate-500">Super admins and device master-key holders bypass login-window and IP checks.</p>
            <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3">
                <label class="flex items-start gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs"><input type="hidden" name="device_governance_enabled" value="0"><input type="checkbox" name="device_governance_enabled" value="1" class="mt-0.5 rounded border-slate-300" @checked($policy['device_governance_enabled'] ?? false)><span><span class="font-semibold">Device governance</span><span class="block text-slate-500">Trusted device binding at login</span></span></label>
                <label class="flex items-start gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs"><input type="hidden" name="role_login_windows_enabled" value="0"><input type="checkbox" name="role_login_windows_enabled" value="1" class="mt-0.5 rounded border-slate-300" @checked($policy['role_login_windows_enabled'] ?? false)><span><span class="font-semibold">Login windows</span><span class="block text-slate-500">Allowed days and hours per role</span></span></label>
                <label class="flex items-start gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs"><input type="hidden" name="ip_restrictions_enabled" value="0"><input type="checkbox" name="ip_restrictions_enabled" value="1" class="mt-0.5 rounded border-slate-300" @checked($policy['ip_restrictions_enabled'] ?? false)><span><span class="font-semibold">IP restrictions</span><span class="block text-slate-500">Allowlist on sensitive routes</span></span></label>
            </div>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-5">
            <div class="flex flex-wrap items-center justify-between gap-2">
                <div><h3 class="text-sm font-semibold text-slate-800">Global IP allowlist</h3><p class="text-xs text-slate-500">IPs or CIDR (e.g. 192.168.1.0/24). Empty = no global list.</p></div>
                <button type="button" @click="addGlobalIp()" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700">Add IP</button>
            </div>
            <div class="mt-3 space-y-2">
                <template x-for="(ip, index) in globalIps" :key="'gip-' + index">
                    <div class="flex items-center gap-2">
                        <input type="text" :name="'global_ips[' + index + ']'" x-model="globalIps[index]" class="flex-1 rounded-lg border-slate-200 text-sm" placeholder="203.0.113.0/24">
                        <button type="button" @click="removeGlobalIp(index)" class="rounded-lg border border-rose-200 bg-rose-50 px-2 py-1.5 text-xs font-semibold text-rose-700">Remove</button>
                    </div>
                </template>
            </div>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-5">
            <h3 class="text-sm font-semibold text-slate-800">Role login windows</h3>
            <p class="mt-1 text-xs text-slate-500">Uses each user&apos;s effective base role.</p>
            <div class="mt-4 space-y-4">
                @foreach ($baseRoles as $role)
                    @php $window = $roleWindows[$role] ?? ['enabled' => true, 'days' => [1,2,3,4,5], 'start' => '06:00', 'end' => '20:00']; $enabledDays = $window['days'] ?? []; @endphp
                    <div class="rounded-lg border border-slate-100 bg-slate-50 p-3">
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <p class="text-sm font-semibold capitalize text-slate-800">{{ $role }}</p>
                            <label class="inline-flex items-center gap-2 text-xs"><input type="hidden" name="role_login[{{ $role }}][enabled]" value="0"><input type="checkbox" name="role_login[{{ $role }}][enabled]" value="1" class="rounded border-slate-300" @checked($window['enabled'] ?? true)> Enabled</label>
                        </div>
                        <div class="mt-2 flex flex-wrap gap-2">
                            @foreach ($dayLabels as $dayNum => $dayLabel)
                                <label class="inline-flex items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-1 text-xs"><input type="checkbox" name="role_login[{{ $role }}][days][]" value="{{ $dayNum }}" class="rounded border-slate-300" @checked(in_array($dayNum, $enabledDays, true))> {{ $dayLabel }}</label>
                            @endforeach
                        </div>
                        <div class="mt-2 grid max-w-md grid-cols-2 gap-3">
                            <div><label class="text-[11px] font-semibold uppercase text-slate-500">Start</label><input type="time" name="role_login[{{ $role }}][start]" value="{{ $window['start'] ?? '06:00' }}" class="mt-1 w-full rounded-lg border-slate-200 text-sm"></div>
                            <div><label class="text-[11px] font-semibold uppercase text-slate-500">End</label><input type="time" name="role_login[{{ $role }}][end]" value="{{ $window['end'] ?? '20:00' }}" class="mt-1 w-full rounded-lg border-slate-200 text-sm"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-5">
            <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                <div><h3 class="text-sm font-semibold text-slate-800">Per-role IP overrides</h3><p class="text-xs text-slate-500">Merged with global allowlist.</p></div>
                <select x-model="selectedRole" class="rounded-lg border-slate-200 text-xs">@foreach ($baseRoles as $role)<option value="{{ $role }}">{{ ucfirst($role) }}</option>@endforeach</select>
            </div>
            @foreach ($baseRoles as $role)
                <div x-show="selectedRole === @js($role)" class="space-y-2">
                    <template x-for="(ip, index) in (roleIps[@js($role)] || [])" :key="'rip-{{ $role }}-' + index">
                        <div class="flex items-center gap-2">
                            <input type="text" :name="'role_ips[{{ $role }}][' + index + ']'" x-model="roleIps[@js($role)][index]" class="flex-1 rounded-lg border-slate-200 text-sm">
                            <button type="button" @click="removeRoleIp(@js($role), index)" class="rounded-lg border border-rose-200 bg-rose-50 px-2 py-1.5 text-xs font-semibold text-rose-700">Remove</button>
                        </div>
                    </template>
                    <p x-show="!(roleIps[@js($role)] || []).length" class="text-xs text-slate-500">No extra IPs for this role.</p>
                    <button type="button" @click="addRoleIp(@js($role))" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700">Add IP</button>
                </div>
            @endforeach
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-5">
            <div class="flex flex-wrap items-center justify-between gap-2">
                <div><h3 class="text-sm font-semibold text-slate-800">Sensitive route patterns</h3><p class="text-xs text-slate-500">Wildcards supported (loan.accounting*).</p></div>
                <button type="button" @click="addSensitiveRoute()" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700">Add pattern</button>
            </div>
            <div class="mt-3 space-y-2">
                <template x-for="(route, index) in sensitiveRoutes" :key="'sr-' + index">
                    <div class="flex items-center gap-2">
                        <input type="text" :name="'sensitive_routes[' + index + ']'" x-model="sensitiveRoutes[index]" class="flex-1 rounded-lg border-slate-200 text-sm" placeholder="loan.system.setup*">
                        <button type="button" @click="removeSensitiveRoute(index)" class="rounded-lg border border-rose-200 bg-rose-50 px-2 py-1.5 text-xs font-semibold text-rose-700">Remove</button>
                    </div>
                </template>
            </div>
        </div>

        <div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white p-4">
            <button type="button" @click="setAccessTab('permissions')" class="rounded-lg border border-slate-300 bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-700">Back to Roles</button>
            <button type="submit" class="rounded-lg bg-teal-700 px-4 py-2 text-sm font-semibold text-white hover:bg-teal-800">Save access policies</button>
        </div>
    </form>

    @php
        $moduleRoleGateConfig = $moduleRoleGateConfig ?? ['modules' => [], 'base_roles' => []];
        $moduleGateModules = $moduleRoleGateConfig['modules'] ?? [];
        $moduleGateBaseRoles = $moduleRoleGateConfig['base_roles'] ?? [];
    @endphp
    @if ($moduleGateModules !== [] && $moduleGateBaseRoles !== [])
        <form method="post" action="{{ route('loan.system.setup.access_roles.module_role_gates.update') }}" class="space-y-4" @foreach($policyTurboAttr as $attr => $val) {{ $attr }}="{{ $val }}" @endforeach>
            @csrf
            <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-5">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <h3 class="text-sm font-semibold text-slate-800">Module visibility by base role</h3>
                        <p class="mt-1 text-xs text-slate-500">
                            This organization only. Add or remove a base tier (for example Officer) without changing the person&apos;s access role.
                            They still need the matching permission (for Accounting: <span class="font-semibold">accounting.view</span> to see it, <span class="font-semibold">accounting.create</span> to raise a requisition).
                            Other organizations keep their own list.
                        </p>
                    </div>
                </div>
                <div class="mt-4 overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead>
                            <tr class="border-b border-slate-200 text-left text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                                <th class="py-2 pr-3">Module</th>
                                @foreach ($moduleGateBaseRoles as $baseRole)
                                    <th class="px-2 py-2 text-center">{{ $baseRole['name'] }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach ($moduleGateModules as $module)
                                <tr>
                                    <td class="py-3 pr-3 align-top">
                                        <p class="font-semibold text-slate-800">{{ $module['label'] }}</p>
                                        <p class="mt-0.5 text-xs text-slate-500">{{ $module['description'] }}</p>
                                        @if ($module['is_custom'])
                                            <p class="mt-1 text-[11px] font-semibold text-teal-700">Custom for this organization</p>
                                        @else
                                            <p class="mt-1 text-[11px] text-slate-400">Using system default</p>
                                        @endif
                                    </td>
                                    @foreach ($moduleGateBaseRoles as $baseRole)
                                        @php $slug = $baseRole['slug']; @endphp
                                        <td class="px-2 py-3 text-center align-top">
                                            <input type="checkbox" name="module_roles[{{ $module['key'] }}][]" value="{{ $slug }}" class="rounded border-slate-300" @checked(in_array($slug, $module['roles'], true))>
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <p class="mt-3 text-xs text-slate-500">Clearing every box for a module restores the system default. Directors still follow Admin/Manager when those tiers are checked.</p>
            </div>
            <div class="flex flex-wrap items-center justify-end gap-3 rounded-xl border border-slate-200 bg-white p-4">
                <button type="submit" class="rounded-lg bg-teal-700 px-4 py-2 text-sm font-semibold text-white hover:bg-teal-800">Save module visibility</button>
            </div>
        </form>
    @endif
</div>