@extends('layouts.app')
@section('title','Access Management')
@section('content')
<div class="pagetop"><div><div class="eyebrow">SETTINGS / SECURITY</div><h1>People & Access</h1><p class="desc">Employee accounts, teams, departments, roles and security activity in one workspace.</p></div></div>
@if(session('activation_url'))<div class="panel" style="padding:16px;margin-bottom:16px"><strong>One-time employee activation link (valid 24 hours)</strong><p class="quiet">Copy this link now. It will not be displayed again.</p><input readonly style="width:100%;padding:12px;border:1px solid var(--border);border-radius:8px" value="{{ session('activation_url') }}" onclick="this.select()"></div>@endif
@if(session('success'))<div class="panel" style="padding:14px;margin-bottom:16px;color:var(--blue)">{{ session('success') }}</div>@endif
@if(isset($errors) && $errors->any())<div class="panel" style="padding:14px;margin-bottom:16px;color:#b42318">{{ $errors->first() }}</div>@endif
@if(!$company)<div class="panel" style="padding:24px">Create your company profile first to configure departments and roles.</div>
@else
<style>.access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.access-card{padding:22px}.access-form{display:grid;gap:10px}.access-form input,.access-form select{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--paper);color:var(--text)}.access-permissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:230px;overflow:auto}.access-permissions label{font-size:12px;display:flex;gap:6px;align-items:center}.access-permissions input{width:auto}.access-item{border-top:1px solid var(--border);padding:12px 0}.access-card h2{font-size:17px;margin:0 0 16px}@media(max-width:850px){.access-grid{grid-template-columns:1fr}}@media(max-width:460px){.access-permissions{grid-template-columns:1fr}}</style>
<div class="access-tabs" role="tablist" aria-label="People and access sections"><button type="button" class="access-tab" data-tab="employees">Employees</button><button type="button" class="access-tab" data-tab="teams">Teams & Groups</button><button type="button" class="access-tab" data-tab="departments">Departments</button><button type="button" class="access-tab" data-tab="roles">Roles & Permissions</button><button type="button" class="access-tab" data-tab="activity">Activity Log</button></div>
<section class="access-pane" data-pane="employees"><div class="panel access-card"><h2>Employee Accounts</h2><p class="quiet">Create a company employee account and assign roles after activation. Existing users are listed below.</p><form class="access-form" method="POST" action="{{ route('access.employees.store') }}">@csrf<div class="access-fields"><label>Full name<input name="name" required maxlength="160" placeholder="Employee full name"></label><label>Work email<input name="email" type="email" required maxlength="190" placeholder="employee@company.com"></label></div><button class="btn primary">Create employee & generate activation link</button></form><div style="margin-top:20px" class="access-table-wrap"><table class="data"><thead><tr><th>Name</th><th>Email</th><th>Company membership</th></tr></thead><tbody>@forelse($users as $user)<tr><td>{{ $user->name }}</td><td>{{ $user->email }}</td><td>{{ $user->role }}</td></tr>@empty<tr><td colspan="3">No employees yet.</td></tr>@endforelse</tbody></table></div></div></section>
<section class="access-pane team-workspace" data-pane="teams">
<div class="team-head"><div><h2>Teams & Groups</h2><p>Organize employees by team, assign supervisors and manage membership.</p></div><div class="team-head-actions"><button type="button" class="btn primary" id="new-team-toggle">+ New team</button><form method="POST" action="{{ route('access.teams.templates') }}">@csrf<button class="btn" type="submit">Add optional templates</button></form></div></div>
<div class="panel team-new" id="new-team-form" hidden><h3>Create a team</h3><form method="POST" action="{{ route('access.teams.store') }}" class="team-create-fields">@csrf<label>Team name<input name="name" required maxlength="120" placeholder="e.g. Dubai Sales"></label><label>Team code<input name="code" required maxlength="80" placeholder="e.g. dubai-sales"></label><label>Supervisor (optional)<select name="supervisor_user_id"><option value="">Choose later</option>@foreach($users as $user)<option value="{{ $user->id }}">{{ $user->name }}</option>@endforeach</select></label><button type="submit" class="btn primary">Create team</button></form></div>
<div class="team-layout"><div class="panel team-directory"><div class="team-directory-head"><h3>All teams <span class="team-count">{{ $teams->count() }}</span></h3><label class="team-search-label"><span class="sr-only">Search teams</span><input id="team-search" type="search" placeholder="Search teams or supervisors…" autocomplete="off"></label></div><div class="team-table-scroll"><table class="team-table"><thead><tr><th>Team</th><th>Supervisor</th><th>Members</th><th></th></tr></thead><tbody>@forelse($teams as $team)@php $supervisor=$users->firstWhere('id',$team->supervisor_user_id); @endphp<tr class="team-row" data-team-row="{{ $team->id }}" data-search="{{ strtolower($team->name.' '.$team->code.' '.($supervisor?->name??'')) }}"><td><strong>{{ $team->name }}</strong><small>{{ $team->code }}</small></td><td>{{ $supervisor?->name??'Not assigned' }}</td><td><span class="team-count">{{ ($teamMembers[$team->id]??collect())->count() }}</span></td><td><button type="button" class="team-manage" data-open-team="{{ $team->id }}" aria-controls="team-detail-{{ $team->id }}">Manage →</button></td></tr>@empty<tr><td colspan="4" class="team-empty">No teams yet. Create your first team or add the optional templates.</td></tr>@endforelse</tbody></table></div><p id="team-no-results" hidden class="team-empty">No teams match your search.</p></div>
<div class="panel team-detail-shell" id="team-detail-shell"><div class="team-detail-placeholder" id="team-detail-placeholder"><span class="team-detail-icon">☷</span><h3>Select a team</h3><p>Choose <strong>Manage</strong> next to a team to edit its supervisor or members.</p></div>
@foreach($teams as $team)<section class="team-detail" id="team-detail-{{ $team->id }}" data-team-detail="{{ $team->id }}" hidden><div class="team-detail-heading"><div><span class="team-overline">TEAM DETAILS</span><h3>{{ $team->name }}</h3><p>{{ $team->code }} · {{ ($teamMembers[$team->id]??collect())->count() }} members</p></div><button type="button" class="team-close" aria-label="Close team details">×</button></div><div class="team-detail-section"><h4>Team supervisor</h4><p>Assign the employee responsible for coordinating this team.</p><form method="POST" action="{{ route('access.teams.supervisor',$team->id) }}" class="team-detail-form">@csrf @method('PUT')<label>Supervisor<select name="supervisor_user_id"><option value="">No supervisor</option>@foreach($users as $user)<option value="{{ $user->id }}" {{ $team->supervisor_user_id==$user->id?'selected':'' }}>{{ $user->name }}</option>@endforeach</select></label><button type="submit" class="btn primary">Save supervisor</button></form></div><div class="team-detail-section"><h4>Team members</h4><p>Add an existing company employee to this team.</p><form method="POST" action="{{ route('access.teams.members.store',$team->id) }}" class="team-detail-form">@csrf<label>Employee<select name="user_id" required><option value="">Choose employee</option>@foreach($users as $user)<option value="{{ $user->id }}">{{ $user->name }}</option>@endforeach</select></label><button type="submit" class="btn primary">Add member</button></form><div class="team-member-list">@forelse(($teamMembers[$team->id]??collect()) as $member)<div class="team-member"><span>{{ $users->firstWhere('id',$member->user_id)?->name??('User #'.$member->user_id) }}</span><form method="POST" action="{{ route('access.teams.members.destroy',[$team->id,$member->user_id]) }}">@csrf @method('DELETE')<button class="team-remove" type="submit">Remove</button></form></div>@empty<p class="team-member-empty">No members assigned yet.</p>@endforelse</div></div></section>@endforeach</div></div></section>
<div class="access-grid access-pane" data-pane="activity"><section class="panel access-card"><h2>Security Activity Log</h2><p class="quiet">Recent recorded team and access-management changes, attributed to the signed-in employee.</p>@forelse($auditLogs as $log)<div class="access-item"><strong>{{ $log->action }}</strong><div class="quiet">User #{{ $log->actor_user_id }} · {{ $log->created_at }} · {{ $log->subject_type }} #{{ $log->subject_id }}</div></div>@empty<p class="quiet">No recorded activity yet.</p>@endforelse</section></div>
<div class="access-grid access-pane" data-pane="departments"><section class="panel access-card"><h2>Departments</h2><form method="POST" action="{{ route('access.departments.store') }}" class="access-form">@csrf<input name="name" placeholder="Department name (e.g. Warehouse)" required maxlength="120"><input name="code" placeholder="Code (e.g. warehouse)" required maxlength="40"><button class="btn primary" type="submit">Add Department</button></form><div style="margin-top:14px">@forelse($departments as $department)<div class="access-item">{{ $department->name }} <span class="quiet">· {{ $department->code }}</span></div>@empty<p class="quiet">No departments yet.</p>@endforelse</div></section></div><div class="access-grid access-pane" data-pane="roles">
<section class="panel access-card"><h2>Create Role</h2><form method="POST" action="{{ route('access.roles.store') }}" class="access-form">@csrf<input name="name" placeholder="Role name (e.g. Warehouse Operator)" required maxlength="100"><input name="slug" placeholder="Role code (e.g. warehouse-operator)" required maxlength="100"><div class="quiet">Grant only the permissions this role needs:</div><div class="access-permissions">@foreach($permissions as $permission)<label><input type="checkbox" name="permissions[]" value="{{ $permission->id }}">{{ $permission->key }}</label>@endforeach</div><button class="btn primary" type="submit">Create Role</button></form></section>
<section class="panel access-card"><h2>Existing Roles</h2>@forelse($roles as $role)<form method="POST" action="{{ route('access.roles.update',$role->id) }}" class="access-form access-item">@csrf @method('PUT')<strong>{{ $role->name }}</strong><span class="quiet">{{ $role->slug }}</span><div class="access-permissions">@foreach($permissions as $permission)<label><input type="checkbox" name="permissions[]" value="{{ $permission->id }}" {{ ($grants[$role->id]??collect())->contains('permission_id',$permission->id)?'checked':'' }}>{{ $permission->key }}</label>@endforeach</div><button class="btn" type="submit">Save Role Permissions</button></form>@empty<p class="quiet">No roles created yet.</p>@endforelse</section>
<section class="panel access-card"><h2>Assign Employee Role</h2><form method="POST" action="{{ route('access.assignments.store') }}" class="access-form">@csrf<select name="user_id" required><option value="">Choose employee</option>@foreach($users as $user)<option value="{{ $user->id }}">{{ $user->name }} — {{ $user->email }}</option>@endforeach</select><select name="role_id" required><option value="">Choose role</option>@foreach($roles as $role)<option value="{{ $role->id }}">{{ $role->name }}</option>@endforeach</select><select name="branch_id"><option value="">All permitted branches</option>@foreach(\Illuminate\Support\Facades\DB::table('branches')->where('company_id',$company->id)->where('is_active',true)->get() as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach</select><select name="department_id"><option value="">No department restriction</option>@foreach($departments as $department)<option value="{{ $department->id }}">{{ $department->name }}</option>@endforeach</select><select name="data_scope"><option value="own">Own records</option><option value="team">Supervised team records</option><option value="department">Department</option><option value="branch">Branch</option><option value="company">Company</option></select><button type="submit" class="btn primary">Assign Role</button></form><h2 style="margin-top:24px">Current Assignments</h2>@forelse($assignments as $assignment)<div class="access-item" style="display:flex;justify-content:space-between;gap:10px;align-items:center"><span>User #{{ $assignment->user_id }} · {{ $roles->firstWhere('id',$assignment->role_id)?->name }} · {{ $assignment->data_scope }}</span><form method="POST" action="{{ route('access.assignments.destroy',$assignment->id) }}">@csrf @method('DELETE')<button class="btn" type="submit">Remove</button></form></div>@empty<p class="quiet">No assignments yet.</p>@endforelse</section>
</div>
<style>.team-workspace{width:100%;max-width:none}.team-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px;flex-wrap:wrap}.team-head h2{font-size:24px;letter-spacing:-.4px;margin:0 0 6px}.team-head p,.team-detail-section p{font-size:13px;line-height:1.6;color:var(--sub);margin:0}.team-head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.team-head-actions .btn,.team-create-fields .btn,.team-detail-form .btn{font-size:13px;padding:11px 16px;min-height:42px}.team-new{padding:22px;margin-bottom:20px}.team-new[hidden]{display:none}.team-new h3{margin:0 0 16px;font-size:17px}.team-create-fields{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end}.team-create-fields label,.team-detail-form label{display:grid;gap:8px;font-size:13px;font-weight:600;min-width:0}.team-create-fields input,.team-create-fields select,.team-detail-form select,.team-search-label input{min-height:42px;border:1px solid var(--border);border-radius:9px;background:var(--paper);color:var(--text);padding:10px 12px;font-size:13px;width:100%;min-width:0}.team-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:18px;align-items:start}.team-directory,.team-detail-shell{min-width:0;padding:0;overflow:hidden}.team-directory-head{padding:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.team-directory-head h3{font-size:17px;margin:0}.team-search-label{width:min(280px,100%)}.team-table-scroll{overflow-x:auto}.team-table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}.team-table th{background:#f5f8fd;color:var(--sub);font-size:12px;font-weight:700;padding:13px 16px;white-space:nowrap}.team-table td{padding:15px 16px;border-top:1px solid var(--border);vertical-align:middle}.team-table td strong{font-size:14px;display:block}.team-table td small{display:block;margin-top:5px;color:var(--sub);font-size:12px}.team-row[data-active=true]{background:#eef5ff}.team-count{display:inline-block;background:#eef3fa;border-radius:20px;padding:4px 9px;font-weight:700;color:#315174;font-size:12px}.team-manage{border:1px solid #cfddf2;border-radius:8px;background:#fff;color:#1457c5;font-size:13px;font-weight:700;padding:9px 12px;cursor:pointer;white-space:nowrap}.team-manage:hover{background:#edf4ff}.team-empty{padding:22px;color:var(--sub);font-size:13px}.team-detail-placeholder{text-align:center;padding:85px 24px}.team-detail-placeholder h3{font-size:18px;margin:14px 0 7px}.team-detail-placeholder p{color:var(--sub);font-size:13px;line-height:1.6}.team-detail-icon{font-size:34px;color:#9baec7}.team-detail[hidden]{display:none}.team-detail-heading{padding:23px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:10px}.team-overline{font-size:11px;letter-spacing:1px;color:#6481a4;font-weight:700}.team-detail-heading h3{font-size:21px;margin:7px 0}.team-detail-heading p{color:var(--sub);font-size:13px;margin:0}.team-close{align-self:start;background:#f0f4f9;border:0;border-radius:8px;font-size:24px;line-height:1;width:34px;height:34px;cursor:pointer}.team-detail-section{padding:22px;border-bottom:1px solid var(--border)}.team-detail-section h4{font-size:15px;margin:0 0 6px}.team-detail-form{display:grid;gap:12px;margin-top:17px}.team-member-list{margin-top:17px}.team-member{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--border);font-size:13px}.team-remove{background:transparent;border:0;color:#b42318;font-weight:700;cursor:pointer}.team-member-empty{padding:12px 0;color:var(--sub);font-size:13px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:1120px){.team-layout{grid-template-columns:1fr}.team-detail-placeholder{padding:32px}.team-create-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.team-create-fields{grid-template-columns:1fr}.team-directory-head{align-items:stretch}.team-search-label{width:100%}.team-table th,.team-table td{padding:12px 10px}.team-head h2{font-size:21px}.team-head-actions{width:100%}}</style>
<style>.access-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;border-bottom:1px solid var(--border);padding-bottom:10px}.access-tab{font:inherit;font-size:13px;font-weight:600;color:var(--sub);padding:11px 14px;background:transparent;border:0;border-radius:8px;cursor:pointer}.access-tab[aria-selected=true]{color:var(--blue);background:var(--tint)}.access-pane[hidden]{display:none!important}.access-pane .access-card{min-height:0}.access-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.access-fields label{display:grid;gap:6px;font-size:12px}.access-table-wrap{overflow-x:auto}@media(max-width:650px){.access-fields{grid-template-columns:1fr}.access-tabs{flex-wrap:nowrap;overflow-x:auto}.access-tab{white-space:nowrap}}</style>
<script>(function(){const search=document.getElementById('team-search'),rows=[...document.querySelectorAll('[data-team-row]')],details=[...document.querySelectorAll('[data-team-detail]')],placeholder=document.getElementById('team-detail-placeholder');function select(id){rows.forEach(r=>r.dataset.active=String(r.dataset.teamRow===id));details.forEach(d=>d.hidden=d.dataset.teamDetail!==id);placeholder.hidden=!!id;try{sessionStorage.setItem('snyt_access_team',id||'');}catch(e){}if(id&&matchMedia('(max-width:1120px)').matches)document.getElementById('team-detail-shell')?.scrollIntoView({behavior:'smooth',block:'start'});}document.querySelectorAll('[data-open-team]').forEach(b=>b.addEventListener('click',()=>select(b.dataset.openTeam)));document.querySelectorAll('.team-close').forEach(b=>b.addEventListener('click',()=>select('')));search?.addEventListener('input',()=>{const q=search.value.toLocaleLowerCase().trim();let count=0;rows.forEach(r=>{const show=r.dataset.search.includes(q);r.hidden=!show;if(show)count++});document.getElementById('team-no-results').hidden=count!==0});document.getElementById('new-team-toggle')?.addEventListener('click',()=>{const f=document.getElementById('new-team-form');f.hidden=!f.hidden;if(!f.hidden)f.querySelector('input')?.focus()});try{const saved=sessionStorage.getItem('snyt_access_team');if(saved&&details.some(d=>d.dataset.teamDetail===saved))select(saved)}catch(e){}})();</script>
<script>(function(){const tabs=[...document.querySelectorAll('[data-tab]')],panes=[...document.querySelectorAll('[data-pane]')];function activate(tab){tabs.forEach(b=>{const on=b.dataset.tab===tab;b.setAttribute('aria-selected',on?'true':'false');b.setAttribute('role','tab');});panes.forEach(p=>{p.hidden=p.dataset.pane!==tab;});try{history.replaceState(null,'','#'+tab);}catch(e){}}tabs.forEach(b=>b.addEventListener('click',()=>activate(b.dataset.tab)));activate(tabs.some(b=>b.dataset.tab===location.hash.slice(1))?location.hash.slice(1):'employees');})();</script>
@endif
@endsection