@extends('layouts.admin')

@section('title', 'Manage Users')

@section('admin-content')
<style>
    /* User Specific Styles */
    .users-page .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }
    
    .users-page .role-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: capitalize;
    }
    .users-page .role-badge.seller { background: #e3f2fd; color: #1565c0; }
    .users-page .role-badge.buyer { background: #f3e5f5; color: #7b1fa2; }
    .users-page .role-badge.admin { background: #ffebee; color: #b71c1c; }
    
    .users-page .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .users-page .status-badge.active { background: #e8f5e9; color: #2e7d32; }
    .users-page .status-badge.banned { background: #ffebee; color: #c62828; }
</style>

<div class="users-page">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">User Management</h4>
            <p class="text-muted mb-0 small">Manage registered users, roles, and access</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-light border shadow-sm btn-lg d-flex align-items-center gap-2" style="border-radius: 12px; font-size: 0.95rem;">
                <i class="bi bi-download"></i> Export
            </button>
            <button class="btn btn-primary shadow-sm btn-lg d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#addUserModal" style="border-radius: 12px; font-size: 0.95rem;">
                <i class="bi bi-plus-lg"></i> Add New User
            </button>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row g-4 mb-4">
        <div class="col-lg-3 col-md-6">
            <div class="stat-card stat-card-primary d-flex align-items-center gap-3">
                <div class="stat-icon primary">
                    <i class="bi bi-people"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $totalUsers }}</div>
                    <div class="stat-label">Total Users</div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card stat-card-success d-flex align-items-center gap-3">
                <div class="stat-icon success">
                    <i class="bi bi-person-check-fill"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $activeUsers }}</div>
                    <div class="stat-label">Active Users</div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card stat-card-warning d-flex align-items-center gap-3">
                <div class="stat-icon warning">
                    <i class="bi bi-person-x-fill"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $bannedUsers }}</div>
                    <div class="stat-label">Banned Users</div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card stat-card-info d-flex align-items-center gap-3">
                <div class="stat-icon info">
                    <i class="bi bi-person-plus-fill"></i>
                </div>
                <div>
                    <div class="stat-value">{{ $newUsersToday }}</div>
                    <div class="stat-label">New Today</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters & Actions -->
    <div class="filter-card mb-4">
        <form action="{{ route('admin.users') }}" method="GET" class="row g-3 align-items-end">
            <div class="col-lg-4 col-md-6">
                <label class="form-label small fw-bold text-muted mb-1">
                    <i class="bi bi-search me-1"></i> Search Users
                </label>
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0 ps-3" style="border-radius: 10px 0 0 10px;">
                        <i class="bi bi-search text-muted"></i>
                    </span>
                    <input type="text" name="q" class="form-control form-control-lg border-start-0" 
                           placeholder="Name, email, phone..." 
                           value="{{ request('q') }}"
                           style="border-radius: 0 10px 10px 0;">
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <label class="form-label small fw-bold text-muted mb-1">
                    <i class="bi bi-shield-lock me-1"></i> Role
                </label>
                <select name="role" class="form-select form-select-lg" style="border-radius: 10px;">
                    <option value="all">All Roles</option>
                    <option value="seller" {{ request('role') == 'seller' ? 'selected' : '' }}>Seller</option>
                    <option value="buyer" {{ request('role') == 'buyer' ? 'selected' : '' }}>Buyer</option>
                </select>
            </div>
            <div class="col-lg-3 col-md-6">
                <label class="form-label small fw-bold text-muted mb-1">
                    <i class="bi bi-toggle-on me-1"></i> Status
                </label>
                <select name="status" class="form-select form-select-lg" style="border-radius: 10px;">
                    <option value="all">All Status</option>
                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                    <option value="banned" {{ request('status') == 'banned' ? 'selected' : '' }}>Banned</option>
                </select>
            </div>
            <div class="col-lg-2 col-md-12">
                <button type="submit" class="btn btn-primary btn-lg w-100" style="border-radius: 10px;">
                    <i class="bi bi-funnel me-1"></i> Filter
                </button>
            </div>
        </form>
    </div>

    <!-- Users Table -->
    <div class="data-table">
        <form action="{{ route('admin.users.bulk-action') }}" method="POST" id="bulkActionForm">
            @csrf
            <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
                <div class="d-flex align-items-center gap-2">
                    <select name="action" class="form-select form-select-sm" style="width: 170px; border-radius: 8px;" required>
                        <option value="">Bulk Actions</option>
                        <option value="activate">Activate Selected</option>
                        <option value="ban">Ban Selected</option>
                        <option value="delete">Delete Selected</option>
                    </select>
                    <button type="submit" class="btn btn-sm btn-secondary rounded-2" onclick="return confirm('Are you sure you want to perform this action?')">Apply</button>
                    <span class="text-muted small ms-2" id="selectedCount">0 selected</span>
                </div>
                <div>
                     <small class="text-muted">
                        Showing {{ $users->firstItem() ?? 0 }}-{{ $users->lastItem() ?? 0 }} of {{ $users->total() }}
                    </small>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table mb-0">
                    <thead>
                        <tr>
                            <th class="ps-4" style="width: 40px;">
                                <input type="checkbox" class="form-check-input" id="selectAll">
                            </th>
                            <th>User Details</th>
                            <th>Role</th>
                            <th class="text-center">Status</th>
                            <th>Joined</th>
                            <th class="text-end pe-4">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $user)
                            <tr>
                                <td class="ps-4">
                                    <input type="checkbox" name="selected_users[]" value="{{ $user->id }}" class="form-check-input user-checkbox">
                                </td>
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="user-avatar">
                                            {{ strtoupper(substr($user->name, 0, 1)) }}
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-bold text-dark">{{ $user->name }}</h6>
                                            <small class="text-muted">{{ $user->email }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @php
                                        $role = $user->getRoleNames()->first() ?? 'Buyer';
                                        $roleClass = match(strtolower($role)) {
                                            'seller' => 'seller',
                                            'admin', 'super-admin' => 'admin',
                                            default => 'buyer'
                                        };
                                    @endphp
                                    <span class="role-badge {{ $roleClass }}">
                                        @if($roleClass == 'seller') <i class="bi bi-shop me-1"></i>
                                        @elseif($roleClass == 'admin') <i class="bi bi-shield-lock me-1"></i>
                                        @else <i class="bi bi-person me-1"></i>
                                        @endif
                                        {{ ucfirst($role) }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    @if($user->is_active)
                                        <span class="status-badge active">
                                            <i class="bi bi-check-circle-fill"></i> Active
                                        </span>
                                    @else
                                        <span class="status-badge banned">
                                            <i class="bi bi-slash-circle-fill"></i> Banned
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="text-dark small fw-medium">{{ $user->created_at->format('d M Y') }}</div>
                                    <small class="text-muted">{{ $user->created_at->diffForHumans() }}</small>
                                </td>
                                <td class="text-end pe-4">
                                    <div class="d-flex gap-1 justify-content-end">
                                        <form action="{{ route('admin.users.toggle-status', $user->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="action-btn {{ $user->is_active ? 'danger' : 'success' }}" 
                                                    title="{{ $user->is_active ? 'Ban User' : 'Activate User' }}" 
                                                    data-bs-toggle="tooltip">
                                                <i class="bi {{ $user->is_active ? 'bi-slash-circle' : 'bi-check-circle' }}"></i>
                                            </button>
                                        </form>
                                        
                                        <a href="{{ route('admin.users.impersonate', $user->id) }}" class="action-btn warning" 
                                           title="Impersonate" data-bs-toggle="tooltip">
                                            <i class="bi bi-incognito"></i>
                                        </a>

                                        <a href="{{ route('admin.users.edit', $user->id) }}" class="action-btn primary" title="Edit" data-bs-toggle="tooltip">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <div class="py-4">
                                        <i class="bi bi-people fs-1 text-muted opacity-50 d-block mb-3"></i>
                                        <h5 class="fw-bold text-muted">No Users Found</h5>
                                        <p class="text-muted small mb-0">Try different search criteria</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($users->hasPages())
                <div class="p-3 border-top bg-light" style="border-radius: 0 0 16px 16px;">
                    {{ $users->appends(request()->query())->links() }}
                </div>
            @endif
        </form>
    </div>
</div>

<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
            <div class="modal-header border-0 pb-0">
                <div>
                    <h5 class="modal-title fw-bold">Add New User</h5>
                    <p class="text-muted small mb-0">Create a new account manually</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <form action="{{ route('admin.users.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-bold small text-muted">Full Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control form-control-lg rounded-3" placeholder="John Doe" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small text-muted">Email Address <span class="text-danger">*</span></label>
                        <input type="email" name="email" class="form-control form-control-lg rounded-3" placeholder="john@example.com" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small text-muted">Password <span class="text-danger">*</span></label>
                        <input type="password" name="password" class="form-control form-control-lg rounded-3" placeholder="Min. 8 characters" required minlength="8">
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-6">
                            <label class="form-label fw-bold small text-muted">Role <span class="text-danger">*</span></label>
                            <select name="role" class="form-select form-select-lg rounded-3" required>
                                <option value="" selected disabled>Select</option>
                                <option value="seller">Seller</option>
                                <option value="buyer">Buyer</option>
                                <option value="admin">Admin</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-bold small text-muted">Status</label>
                            <select name="is_active" class="form-select form-select-lg rounded-3">
                                <option value="1">Active</option>
                                <option value="0">Banned</option>
                            </select>
                        </div>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg rounded-3 fw-bold">
                            <i class="bi bi-check-lg me-2"></i> Create User
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Select All functionality
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.user-checkbox');
        const selectedCount = document.getElementById('selectedCount');
        
        function updateCount() {
            const checked = document.querySelectorAll('.user-checkbox:checked').length;
            if(selectedCount) selectedCount.textContent = checked + ' selected';
        }
        
        if(selectAll) {
            selectAll.addEventListener('change', function() {
                checkboxes.forEach(cb => cb.checked = this.checked);
                updateCount();
            });
        }
        
        checkboxes.forEach(cb => {
            cb.addEventListener('change', updateCount);
        });
        
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (el) {
            return new bootstrap.Tooltip(el);
        });
    });
</script>
@endsection