@extends('admin.layout')
@section('title', 'Manage Users')
@section('content')

<div style="display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap">
    <form method="GET" style="display:flex;gap:8px;flex:1;flex-wrap:wrap">
        <input type="text" name="search" class="input" placeholder="Search..." value="{{ request('search') }}" style="max-width:250px">
        <select name="status" class="input" style="max-width:150px;width:auto">
            <option value="">All</option>
            <option value="active" {{ request('status')=='active'?'selected':'' }}>Active</option>
            <option value="suspended" {{ request('status')=='suspended'?'selected':'' }}>Suspended</option>
            <option value="deactivated" {{ request('status')=='deactivated'?'selected':'' }}>Deactivated</option>
        </select>
        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
        <a href="{{ route('admin.users') }}" class="btn btn-secondary btn-sm">Reset</a>
    </form>
</div>

<div class="table-card">
    <div class="table-header"><h3 style="font-size:14px;font-weight:600">Users ({{ $users->total() }})</h3></div>
    <table>
        <thead><tr><th>Name</th><th>Email</th><th>Tenant</th><th>Status</th><th>Admin</th><th>Edit</th></tr></thead>
        <tbody>
            @foreach($users as $u)
            <tr>
                <td style="font-weight:600">{{ $u->full_name }}</td>
                <td>{{ $u->email }}</td>
                <td>{{ $u->tenant->name ?? '—' }}</td>
                <td><span class="badge badge-{{ $u->status === 'active' ? 'success' : 'danger' }}">{{ ucfirst($u->status) }}</span></td>
                <td>@if($u->is_admin)<span class="badge badge-admin">Admin</span>@else<span style="color:var(--text-muted);font-size:11px">—</span>@endif</td>
                <td><button onclick="openUserModal({{ $u->id }}, '{{ addslashes($u->full_name) }}', '{{ $u->status }}', {{ $u->is_admin ? 'true' : 'false' }})" class="btn btn-secondary btn-sm">Edit</button></td>
            </tr>
            @endforeach
        </tbody>
    </table>
    <div style="padding:10px 14px;border-top:1px solid var(--border)">{{ $users->links() }}</div>
</div>

<div id="userModal" class="modal-overlay" style="display:none">
    <div class="modal" style="max-width:400px">
        <div class="modal-header">
            <h3 style="font-size:15px;font-weight:600">Edit User</h3>
            <button onclick="closeUserModal()" style="background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-muted)">&times;</button>
        </div>
        <form method="POST" id="userForm" class="modal-body">
            @csrf
            <div><label class="stat-card-label" style="margin-bottom:3px">Full Name</label><input type="text" name="full_name" id="uName" class="input" required></div>
            <div><label class="stat-card-label" style="margin-bottom:3px">Status</label><select name="status" id="uStatus" class="input"><option value="active">Active</option><option value="suspended">Suspended</option><option value="deactivated">Deactivated</option></select></div>
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--text-primary);padding:8px 0">
                <input type="checkbox" name="is_admin" id="uAdmin" value="1" style="width:16px;height:16px;accent-color:var(--brand)">
                <span style="font-weight:600">Make Admin</span>
                <span style="font-size:10px;color:var(--text-muted)">Full system access, no subscription required</span>
            </label>
            <div class="modal-footer" style="padding:0;border:none;margin-top:4px">
                <button type="button" onclick="closeUserModal()" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>

<script>
function openUserModal(id, name, status, isAdmin) {
    document.getElementById('userForm').action = '/admin/users/' + id;
    document.getElementById('uName').value = name;
    document.getElementById('uStatus').value = status;
    document.getElementById('uAdmin').checked = isAdmin;
    document.getElementById('userModal').style.display = 'flex';
}
function closeUserModal() { document.getElementById('userModal').style.display = 'none'; }
</script>
@endsection