@extends('layouts.app')
@section('title', $user->name)
@section('content')
<div class="page-header">
    <div style="display:flex;align-items:center;gap:14px">
        <div style="width:48px;height:48px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:18px">{{ strtoupper(substr($user->name,0,2)) }}</div>
        <div>
            <div class="page-title">{{ $user->name }}</div>
            <div class="page-subtitle">{{ $user->email }} · {{ $user->designation ?? ucfirst($user->role) }}</div>
        </div>
    </div>
    <div class="page-actions">
        <a href="{{ route('settings.users.edit', $user) }}" class="btn btn-primary"><i class="fas fa-edit"></i> Edit User</a>
        <a href="{{ route('settings.users.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Back</a>
    </div>
</div>

{{-- META CARDS --}}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px">
    <div class="card" style="padding:16px">
        <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px">Role</div>
        @php $rc=['admin'=>'danger','manager'=>'primary','accountant'=>'info','hr'=>'purple','sales'=>'success','purchase'=>'warning','warehouse'=>'secondary','readonly'=>'secondary']; @endphp
        <span class="badge badge-{{ $rc[$user->role]??'secondary' }}" style="font-size:13px;padding:5px 12px">{{ ucfirst($user->role) }}</span>
    </div>
    <div class="card" style="padding:16px">
        <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px">Status</div>
        <span class="badge badge-{{ $user->is_active?'success':'secondary' }}" style="font-size:13px;padding:5px 12px">{{ $user->is_active?'Active':'Inactive' }}</span>
    </div>
    <div class="card" style="padding:16px">
        <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px">Last Login</div>
        <div style="font-weight:600;font-size:13px">{{ $user->last_login_at ? $user->last_login_at->format('d M Y H:i') : 'Never' }}</div>
        @if($user->last_login_at)<div style="font-size:11px;color:var(--text-muted)">{{ $user->last_login_at->diffForHumans() }}</div>@endif
    </div>
    <div class="card" style="padding:16px">
        <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px">Member Since</div>
        <div style="font-weight:600;font-size:13px">{{ $user->created_at->format('d M Y') }}</div>
        <div style="font-size:11px;color:var(--text-muted)">{{ $user->created_at->diffForHumans() }}</div>
    </div>
</div>

<div class="grid-2">
    {{-- RECENT ACTIVITY --}}
    <div class="card">
        <div class="card-header"><span class="card-title">Recent Activity</span><span style="font-size:12px;color:var(--text-muted)">Last 30 actions</span></div>
        <div style="max-height:400px;overflow-y:auto">
            @forelse($recentActivity as $log)
            <div style="display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border)">
                <div style="width:28px;height:28px;border-radius:7px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                    <i class="fas {{ $log->action_icon }}" style="font-size:11px;color:var(--text-muted)"></i>
                </div>
                <div style="flex:1;min-width:0">
                    <div style="font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $log->description }}</div>
                    <div style="font-size:11px;color:var(--text-muted)">{{ $log->created_at->format('d M Y H:i') }} · {{ $log->ip_address }}</div>
                </div>
                <span class="badge badge-{{ $log->action_color }}" style="align-self:flex-start;flex-shrink:0">{{ ucfirst($log->action) }}</span>
            </div>
            @empty
            <div style="padding:30px;text-align:center;color:var(--text-muted)">No activity recorded yet</div>
            @endforelse
        </div>
    </div>

    {{-- LOGIN HISTORY --}}
    <div>
        {{-- RESET PASSWORD --}}
        <div class="card mb-4">
            <div class="card-header"><span class="card-title">Reset Password</span></div>
            <form method="POST" action="{{ route('settings.users.reset-password', $user) }}">
                @csrf @method('PATCH')
                <div class="card-body">
                    <div class="form-group"><label class="form-label">New Password</label><input type="password" name="password" class="form-control" placeholder="Min 8 chars, mixed case + number"></div>
                    <div class="form-group"><label class="form-label">Confirm Password</label><input type="password" name="password_confirmation" class="form-control"></div>
                </div>
                <div class="card-footer" style="display:flex;justify-content:flex-end">
                    <button type="submit" class="btn btn-warning" onclick="return confirm('Reset password for {{ $user->name }}?')"><i class="fas fa-key"></i> Reset Password</button>
                </div>
            </form>
        </div>

        {{-- LOGIN SESSIONS --}}
        <div class="card">
            <div class="card-header"><span class="card-title">Login History</span></div>
            <div style="max-height:280px;overflow-y:auto">
                @forelse($loginHistory as $h)
                <div style="padding:10px 16px;border-bottom:1px solid var(--border);font-size:12px">
                    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2px">
                        <div style="font-weight:500;display:flex;align-items:center;gap:6px">
                            <i class="fas {{ $h->device_icon }}" style="color:var(--text-muted)"></i>
                            {{ $h->browser ?? 'Unknown' }} · {{ ucfirst($h->device_type ?? 'desktop') }}
                        </div>
                        @if($h->is_active)<span class="badge badge-success" style="font-size:10px">Active</span>
                        @else<span style="color:var(--text-muted);font-size:11px">{{ $h->session_duration }}</span>@endif
                    </div>
                    <div style="color:var(--text-muted)">{{ $h->ip_address }} · {{ $h->logged_in_at->format('d M Y H:i') }}</div>
                </div>
                @empty
                <div style="padding:20px;text-align:center;color:var(--text-muted)">No login records</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- PERMISSIONS --}}
<div class="card mt-6">
    <div class="card-header"><span class="card-title">Module Permissions — {{ ucfirst($user->role) }} Role</span><span style="font-size:12px;color:var(--text-muted)">Changes apply to all {{ $user->role }} users</span></div>
    <form method="POST" action="{{ route('settings.users.permissions', $user) }}">
        @csrf @method('PATCH')
        <div class="table-wrapper">
            <table>
                <thead><tr><th>Module</th><th class="text-center">View</th><th class="text-center">Create</th><th class="text-center">Edit</th><th class="text-center">Delete</th><th class="text-center">Submit/Approve</th></tr></thead>
                <tbody>
                    @php $mods=['accounting'=>'Accounting','sales'=>'Sales','purchase'=>'Purchase','inventory'=>'Inventory','hr'=>'HR & Payroll','pos'=>'Point of Sale','crm'=>'CRM','banking'=>'Banking','tax'=>'Tax Compliance','manufacturing'=>'Manufacturing','reports'=>'Reports','settings'=>'Settings']; @endphp
                    @foreach($mods as $key => $label)
                    @php $perm = $permissions[$key] ?? null; @endphp
                    <tr>
                        <td style="font-weight:500">{{ $label }}</td>
                        @foreach(['view','create','edit','delete','submit'] as $ability)
                        <td class="text-center">
                            <input type="checkbox" name="perms[{{ $key }}][{{ $ability }}]" value="1"
                                {{ ($perm && $perm->{'can_'.$ability}) || $user->role==='admin' ? 'checked' : '' }}
                                {{ $user->role==='admin' ? 'disabled' : '' }}
                                style="width:16px;height:16px;accent-color:var(--primary)">
                        </td>
                        @endforeach
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($user->role !== 'admin')
        <div class="card-footer" style="display:flex;justify-content:flex-end">
            <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Permissions</button>
        </div>
        @else
        <div class="card-footer"><div style="font-size:13px;color:var(--text-muted)"><i class="fas fa-info-circle"></i> Admins always have full access and cannot be restricted.</div></div>
        @endif
    </form>
</div>
@endsection