@extends('client.layouts.dashboard')

@section('title', 'Users')

@section('styles')
<style>
    .user-hero{border-radius:14px;padding:1.15rem;position:relative;overflow:hidden;color:#fff}
    .user-hero::before{content:'';position:absolute;top:-30%;right:-20%;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.06)}
    .user-hero .rh-val{font-size:1.4rem;font-weight:800;line-height:1}
    .user-hero .rh-lbl{font-size:.7rem;opacity:.8;margin-top:2px}
    .uh-total{background:linear-gradient(135deg,#667eea,#764ba2)}
    .uh-pending{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
    .uh-approved{background:linear-gradient(135deg,#10b981,#34d399)}
    .uh-rejected{background:linear-gradient(135deg,#ef4444,#f87171)}
    .filter-card{background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,.05);box-shadow:0 1px 4px rgba(0,0,0,.04)}
    .filter-card .card-body{padding:.85rem 1rem}
    .user-chip{display:inline-flex;align-items:center;gap:8px}
    .user-chip .uc-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}
    .svc-badge{font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:600;display:inline-flex;align-items:center;gap:2px}
    .svc-on{background:#d1fae5;color:#065f46}
    .svc-off{background:#f3f4f6;color:#9ca3af}
    .svc-wa-on{background:#d1fae5;color:#128C7E}
</style>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <div>
        <h5 class="mb-1 fw-bold" style="color:#1f2937"><i class="bi bi-people-fill me-2" style="color:#667eea"></i>User Management</h5>
        <p class="text-muted mb-0" style="font-size:.82rem">Manage your organization's AutoPromix app users</p>
    </div>
    <div class="d-flex gap-2">
        <!-- Share App Button -->
        <button type="button" class="btn btn-sm btn-outline-success" style="border-radius:8px;font-size:.78rem" onclick="openApkShareModal()">
            <i class="bi bi-share-fill me-1"></i>Share App
        </button>
        @if($client->canAddMoreUsers())
        <a href="{{ route('client.users.create') }}" class="btn btn-sm text-white" style="background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;font-size:.78rem;font-weight:600">
            <i class="bi bi-person-plus me-1"></i>Add User
        </a>
        @else
        <button class="btn btn-sm btn-secondary" disabled style="border-radius:8px;font-size:.78rem"><i class="bi bi-person-plus me-1"></i>Limit Reached</button>
        @endif
    </div>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="user-hero uh-total">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-people-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ $users->total() }}</div><div class="rh-lbl">Total Users</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="user-hero uh-pending">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-clock-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ $stats['pending'] }}</div><div class="rh-lbl">Pending Approval</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="user-hero uh-approved">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-check-circle-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ $stats['approved'] }}</div><div class="rh-lbl">Approved</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="user-hero uh-rejected">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-x-circle-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ $stats['rejected'] }}</div><div class="rh-lbl">Rejected</div></div>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="filter-card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('client.users') }}" class="row g-2 align-items-end">
            <div class="col-md-5">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">SEARCH</label>
                <input type="text" class="form-control form-control-sm" name="search" placeholder="Search by name, phone or email..." value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">STATUS</label>
                <select class="form-select form-select-sm" 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-primary btn-sm 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 btn-sm 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="card-header d-flex justify-content-between align-items-center">
        <h5><i class="bi bi-people me-2" style="color:#667eea"></i>User Records</h5>
        <small class="text-muted">{{ $users->total() }} users · Limit {{ $client->max_users }}</small>
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead><tr><th>User</th><th>Phone</th><th>Approval</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="user-chip">
                            <div class="uc-avatar" style="background:{{ ['#667eea','#10b981','#f5576c','#4facfe','#f59e0b','#764ba2','#00b09b','#ff6a88','#a18cd1','#fccb90'][$loop->index % 10] }}">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            <div>
                                <div class="fw-semibold" style="font-size:.82rem">{{ $user->name }}</div>
                                <small class="text-muted" style="font-size:.72rem">{{ $user->email }}</small>
                            </div>
                        </div>
                    </td>
                    <td style="font-size:.82rem">{{ $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 bg-opacity-10 text-success">Active</span>
                        @else<span class="badge bg-secondary bg-opacity-10 text-secondary">Inactive</span>@endif
                    </td>
                    <td>
                        <div class="d-flex flex-wrap gap-1">
                            <span class="svc-badge {{ $user->sms_service_enabled ? 'svc-on' : 'svc-off' }}"><i class="bi bi-chat-dots"></i> SMS</span>
                            <span class="svc-badge {{ ($user->settings && $user->settings->whatsapp_enabled) ? 'svc-wa-on' : 'svc-off' }}"><i class="bi bi-whatsapp"></i> WA</span>
                        </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" style="border-radius:6px;font-size:.72rem" 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</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-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 WA' : 'Enable WA' }}</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 }}?" data-confirm-title="Force Logout" data-confirm-btn="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="Reset password for {{ $user->name }}?" 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">
                        <i class="bi bi-people text-muted" style="font-size:2.5rem"></i>
                        <p class="text-muted mt-2 mb-1">No users found</p>
                        @if($client->canAddMoreUsers())
                        <a href="{{ route('client.users.create') }}" class="btn btn-sm btn-primary mt-1"><i class="bi bi-person-plus me-1"></i>Add First User</a>
                        @endif
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($users->hasPages())
    <div class="card-footer bg-transparent p-3">{{ $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 use the app.">
        <i class="bi bi-info-circle"></i>
    </button>
    <span class="ms-1">Users require SuperAdmin approval before they can log in</span>
</div>
@endsection