@extends('client.layouts.dashboard')

@section('title', 'Users')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">User Management</h4>
        <p class="text-muted mb-0">Manage your organization's app users</p>
    </div>
    <div>
        @if($client->canAddMoreUsers())
        <a href="{{ route('client.users.create') }}" class="btn btn-primary">
            <i class="bi bi-person-plus me-2"></i>Add User
        </a>
        @else
        <button class="btn btn-secondary" disabled title="User limit reached">
            <i class="bi bi-person-plus me-2"></i>Limit Reached
        </button>
        @endif
    </div>
</div>

<!-- Stats Row -->
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="stat-card text-center">
            <div class="stat-value text-primary">{{ $users->total() }}</div>
            <div class="stat-label">Total Users</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card text-center">
            <div class="stat-value text-warning">{{ $stats['pending'] }}</div>
            <div class="stat-label">Pending</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card text-center">
            <div class="stat-value text-success">{{ $stats['approved'] }}</div>
            <div class="stat-label">Approved</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card text-center">
            <div class="stat-value text-danger">{{ $stats['rejected'] }}</div>
            <div class="stat-label">Rejected</div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="table-card mb-4">
    <div class="card-body p-3">
        <form method="GET" action="{{ route('client.users') }}" class="row g-3">
            <div class="col-md-4">
                <input type="text" class="form-control" name="search" placeholder="Search by name or email..." value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <select class="form-select" name="status">
                    <option value="">All Status</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                    <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-outline-primary w-100">
                    <i class="bi bi-funnel me-1"></i>Filter
                </button>
            </div>
            @if(request()->hasAny(['search', 'status']))
            <div class="col-md-2">
                <a href="{{ route('client.users') }}" class="btn btn-outline-secondary w-100">
                    <i class="bi bi-x-circle me-1"></i>Clear
                </a>
            </div>
            @endif
        </form>
    </div>
</div>

<!-- Users Table -->
<div class="table-card">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Phone</th>
                    <th>Approval Status</th>
                    <th>Active</th>
                    <th>Services</th>
                    <th>Last Activity</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 36px; height: 36px;">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            <div>
                                <div class="fw-medium">{{ $user->name }}</div>
                                <small class="text-muted">{{ $user->email }}</small>
                            </div>
                        </div>
                    </td>
                    <td>{{ $user->phone ?? '-' }}</td>
                    <td>
                        @if($user->approval_status === 'pending')
                        <span class="badge badge-pending px-2">
                            <i class="bi bi-clock me-1"></i>Pending
                        </span>
                        @elseif($user->approval_status === 'approved')
                        <span class="badge badge-approved px-2">
                            <i class="bi bi-check-circle me-1"></i>Approved
                        </span>
                        @else
                        <span class="badge badge-rejected px-2">
                            <i class="bi bi-x-circle me-1"></i>Rejected
                        </span>
                        @endif
                    </td>
                    <td>
                        @if($user->is_active)
                        <span class="badge bg-success">Active</span>
                        @else
                        <span class="badge bg-secondary">Inactive</span>
                        @endif
                    </td>
                    <td>
                        <div class="d-flex flex-column gap-1">
                            @if($user->sms_service_enabled)
                            <span class="badge bg-success" style="font-size:.7rem"><i class="bi bi-chat-dots me-1"></i>SMS</span>
                            @else
                            <span class="badge bg-secondary" style="font-size:.7rem"><i class="bi bi-chat-dots me-1"></i>SMS Off</span>
                            @endif
                            @if($user->settings && $user->settings->whatsapp_enabled)
                            <span class="badge" style="font-size:.7rem;background:#128C7E;color:#fff"><i class="bi bi-whatsapp me-1"></i>WhatsApp</span>
                            @else
                            <span class="badge bg-secondary" style="font-size:.7rem"><i class="bi bi-whatsapp me-1"></i>WA Off</span>
                            @endif
                        </div>
                    </td>
                    <td>
                        <small class="text-muted">
                            {{ $user->last_active_at ? $user->last_active_at->diffForHumans() : 'Never' }}
                        </small>
                    </td>
                    <td>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                Actions
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="{{ route('client.users.details', $user->id) }}">
                                        <i class="bi bi-eye me-2"></i>View Details
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="{{ route('client.users.edit', $user->id) }}">
                                        <i class="bi bi-pencil-square me-2"></i>Edit User
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <form method="POST" action="{{ route('client.users.toggle-status', $user->id) }}">
                                        @csrf
                                        <button type="submit" class="dropdown-item">
                                            <i class="bi bi-{{ $user->is_active ? 'pause' : 'play' }} me-2"></i>
                                            {{ $user->is_active ? 'Deactivate' : 'Activate' }}
                                        </button>
                                    </form>
                                </li>
                                <li>
                                    <form method="POST" action="{{ route('client.users.toggle-sms', $user->id) }}">
                                        @csrf
                                        <button type="submit" class="dropdown-item">
                                            <i class="bi bi-{{ $user->sms_service_enabled ? 'chat-left-dots-fill' : 'chat-left-dots' }} me-2"></i>
                                            {{ $user->sms_service_enabled ? 'Disable SMS' : 'Enable SMS' }}
                                        </button>
                                    </form>
                                </li>
                                <li>
                                    <form method="POST" action="{{ route('client.users.toggle-whatsapp', $user->id) }}">
                                        @csrf
                                        <button type="submit" class="dropdown-item">
                                            <i class="bi bi-whatsapp me-2"></i>
                                            {{ ($user->settings && $user->settings->whatsapp_enabled) ? 'Disable WhatsApp' : 'Enable WhatsApp' }}
                                        </button>
                                    </form>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <form method="POST" action="{{ route('client.users.force-logout', $user->id) }}">
                                        @csrf
                                        <button type="submit" class="dropdown-item text-danger"
                                            data-confirm="Force logout {{ $user->name }} from their device?"
                                            data-confirm-title="Force Logout"
                                            data-confirm-btn="Force Logout"
                                            data-confirm-class="btn-danger">
                                            <i class="bi bi-box-arrow-right me-2"></i>Force Logout
                                        </button>
                                    </form>
                                </li>
                                <li>
                                    <form method="POST" action="{{ route('client.users.reset-password', $user->id) }}">
                                        @csrf
                                        <button type="submit" class="dropdown-item text-warning"
                                            data-confirm="Send password reset to {{ $user->email }}?"
                                            data-confirm-title="Reset Password"
                                            data-confirm-btn="Reset"
                                            data-confirm-class="btn-warning">
                                            <i class="bi bi-key me-2"></i>Reset Password
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <div class="text-muted mb-3">
                            <i class="bi bi-people" style="font-size: 3rem;"></i>
                        </div>
                        <p class="mb-2">No users found</p>
                        @if($client->canAddMoreUsers())
                        <a href="{{ route('client.users.create') }}" class="btn btn-sm btn-primary">
                            <i class="bi bi-person-plus me-2"></i>Add First User
                        </a>
                        @endif
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($users->hasPages())
    <div class="card-footer bg-transparent">
        {{ $users->withQueryString()->links() }}
    </div>
    @endif
</div>

<div class="mt-3 text-muted small">
    <button type="button" class="info-hint" data-bs-toggle="popover" data-bs-content="Users with <strong>Pending</strong> status are waiting for SuperAdmin approval before they can log in to the app.">
        <i class="bi bi-info-circle"></i>
    </button>
    <span class="ms-1">Approval info</span>
</div>
@endsection