@extends('admin.layouts.app')
@section('title', 'Users')
@section('breadcrumb')
    <span>/</span> Users
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>Users</h1>
        <p class="page-subtitle">Manage system users and their access</p>
    </div>
    @if(auth()->user()->hasPermission('users.create'))
    <a href="{{ route('admin.users.create') }}" class="btn btn-primary">
        <i class="fas fa-user-plus me-2"></i>Register User
    </a>
    @endif
</div>

<!-- Stats Bar -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card text-center p-3" style="border-left:4px solid #2563eb;">
            <div style="font-size:22px;font-weight:700;">{{ \App\Models\User::count() }}</div>
            <div style="font-size:12px;color:#64748b;">Total Users</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-center p-3" style="border-left:4px solid #22c55e;">
            <div style="font-size:22px;font-weight:700;">{{ \App\Models\User::where('status','active')->count() }}</div>
            <div style="font-size:12px;color:#64748b;">Active Users</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-center p-3" style="border-left:4px solid #f59e0b;">
            <div style="font-size:22px;font-weight:700;">{{ \App\Models\Department::count() }}</div>
            <div style="font-size:12px;color:#64748b;">Departments</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-center p-3" style="border-left:4px solid #8b5cf6;">
            <div style="font-size:22px;font-weight:700;">{{ \App\Models\Role::count() }}</div>
            <div style="font-size:12px;color:#64748b;">Roles</div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <input type="text" name="search" class="form-control" placeholder="Name, email, ID..."
                    value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <select name="department_id" class="form-select">
                    <option value="">All Departments</option>
                    @foreach($departments as $id => $name)
                        <option value="{{ $id }}" {{ request('department_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="role_id" class="form-select">
                    <option value="">All Roles</option>
                    @foreach($roles as $id => $name)
                        <option value="{{ $id }}" {{ request('role_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">All Status</option>
                    <option value="active"   {{ request('status')=='active'   ? 'selected':'' }}>Active</option>
                    <option value="inactive" {{ request('status')=='inactive' ? 'selected':'' }}>Inactive</option>
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button class="btn btn-primary flex-grow-1"><i class="fas fa-search me-1"></i>Search</button>
                <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">Reset</a>
            </div>
        </form>
    </div>
</div>

<!-- Users Table -->
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-700"><i class="fas fa-users text-primary me-2"></i>All Users</h6>
        <span class="badge bg-primary">{{ $users->total() }} found</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead style="background:#f8fafc;">
                    <tr>
                        <th class="ps-3" width="50">S.N.</th>
                        <th>User ID</th>
                        <th>Name</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        <th>Designation</th>
                        <th>Department</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th>Last Login</th>
                        <th class="text-center" width="160">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $i => $user)
                    <tr>
                        <td class="ps-3 text-muted">{{ ($users->currentPage()-1)*$users->perPage() + $i + 1 }}</td>
                        <td>
                            <code style="font-size:12px;background:#f1f5f9;padding:2px 6px;border-radius:4px;">
                                {{ $user->user_id }}
                            </code>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <img src="{{ $user->profile_image_url }}" alt="" width="30" height="30"
                                    style="border-radius:50%;object-fit:cover;border:1.5px solid #e2e8f0;">
                                <div>
                                    <div style="font-weight:600;font-size:13px;">{{ $user->name }}</div>
                                </div>
                            </div>
                        </td>
                        <td style="font-size:13px;">{{ $user->mobile }}</td>
                        <td style="font-size:12px;color:#64748b;">{{ $user->email }}</td>
                        <td style="font-size:12px;">{{ $user->designation ?? '—' }}</td>
                        <td>
                            <span style="font-size:12px;">{{ $user->department->name ?? '—' }}</span>
                        </td>
                        <td>
                            @php
                            $roleColors=['super_admin'=>'danger','admin'=>'primary','manager'=>'info','csr_manager'=>'warning','accountant'=>'success','volunteer'=>'secondary','staff'=>'light'];
                            @endphp
                            <span class="badge bg-{{ $roleColors[$user->user_type] ?? 'secondary' }}">
                                {{ $user->role->name ?? ucfirst($user->user_type) }}
                            </span>
                        </td>
                        <td>
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input status-toggle" type="checkbox"
                                    {{ $user->status === 'active' ? 'checked' : '' }}
                                    data-id="{{ $user->id }}"
                                    data-url="{{ route('admin.users.toggle-status', $user) }}"
                                    {{ $user->id === auth()->id() || !auth()->user()->hasPermission('users.edit') ? 'disabled' : '' }}>
                            </div>
                        </td>
                        <td>
                            <span style="font-size:11px;color:#94a3b8;">
                                {{ $user->last_login_at ? $user->last_login_at->diffForHumans() : 'Never' }}
                            </span>
                        </td>
                        <td>
                            <div class="d-flex gap-1 justify-content-center">
                                <a href="{{ route('admin.users.show', $user) }}"
                                    class="btn btn-sm btn-outline-info" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @if(auth()->user()->hasPermission('users.edit'))
                                <a href="{{ route('admin.users.edit', $user) }}"
                                    class="btn btn-sm btn-outline-primary" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @endif
                                @if(auth()->user()->hasPermission('users.manage_permissions'))
                                <a href="{{ route('admin.users.access-control') }}?user_id={{ $user->id }}"
                                    class="btn btn-sm btn-outline-warning" title="Permissions">
                                    <i class="fas fa-key"></i>
                                </a>
                                @endif
                                @if(auth()->user()->hasPermission('users.edit') && $user->id !== auth()->id())
                                <button class="btn btn-sm btn-outline-secondary"
                                    title="Reset Password"
                                    onclick="showResetPassword({{ $user->id }}, '{{ $user->name }}')">
                                    <i class="fas fa-lock"></i>
                                </button>
                                @endif
                                @if(auth()->user()->hasPermission('users.delete') && $user->id !== auth()->id())
                                <button class="btn btn-sm btn-outline-danger" title="Delete"
                                    onclick="confirmDelete('{{ route('admin.users.destroy', $user) }}', '{{ $user->name }}')">
                                    <i class="fas fa-trash"></i>
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="11" class="text-center py-5">
                            <i class="fas fa-users d-block mb-2" style="font-size:32px;color:#cbd5e1;"></i>
                            <p class="text-muted mb-2">No users found</p>
                            @if(auth()->user()->hasPermission('users.create'))
                            <a href="{{ route('admin.users.create') }}" class="btn btn-sm btn-primary">
                                <i class="fas fa-user-plus me-1"></i>Register First User
                            </a>
                            @endif
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($users->hasPages())
    <div class="card-footer bg-white py-3">{{ $users->links() }}</div>
    @endif
</div>

<!-- Reset Password Modal -->
<div class="modal fade" id="resetPasswordModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="border-radius:16px;border:none;">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-700">Reset Password</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted" style="font-size:13px;">Reset password for <strong id="resetUserName"></strong></p>
                <div class="mb-3">
                    <label class="form-label">New Password <span class="text-danger">*</span></label>
                    <input type="password" id="newPassword" class="form-control" placeholder="Min 8 chars, upper+lower+number">
                </div>
                <div class="mb-0">
                    <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                    <input type="password" id="confirmPassword" class="form-control" placeholder="Repeat password">
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-primary btn-sm" onclick="submitResetPassword()">
                    <i class="fas fa-lock me-1"></i>Reset
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Status toggles
document.querySelectorAll('.status-toggle').forEach(toggle => {
    toggle.addEventListener('change', function() {
        const url = this.dataset.url, el = this;
        fetch(url, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' }
        })
        .then(r => r.json())
        .then(d => {
            if (d.success) toastr.success(d.message);
            else { el.checked = !el.checked; toastr.error(d.message || 'Failed'); }
        })
        .catch(() => { el.checked = !el.checked; toastr.error('Network error'); });
    });
});

// Reset Password
let resetUserId = null;
function showResetPassword(id, name) {
    resetUserId = id;
    document.getElementById('resetUserName').textContent = name;
    document.getElementById('newPassword').value = '';
    document.getElementById('confirmPassword').value = '';
    new bootstrap.Modal(document.getElementById('resetPasswordModal')).show();
}

function submitResetPassword() {
    const pwd  = document.getElementById('newPassword').value;
    const conf = document.getElementById('confirmPassword').value;
    if (!pwd || pwd.length < 8) { toastr.error('Password must be at least 8 characters.'); return; }
    if (pwd !== conf) { toastr.error('Passwords do not match.'); return; }

    fetch(`/admin/users/${resetUserId}/reset-password`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
        body: JSON.stringify({ new_password: pwd, new_password_confirmation: conf })
    })
    .then(r => r.json())
    .then(d => {
        if (d.success) {
            bootstrap.Modal.getInstance(document.getElementById('resetPasswordModal')).hide();
            toastr.success(d.message);
        } else {
            toastr.error(d.message || 'Failed to reset password.');
        }
    });
}
</script>
@endpush