@extends('layouts.app')

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

@section('content')

<div class="page-header-bar">
    <div class="page-title-group">
        <div class="page-title-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </div>
        <div>
            <h1 class="page-title">All Users</h1>
            <p class="page-subtitle">Manage user accounts and permissions</p>
        </div>
    </div>

    <form action="{{ route('admin.users.index') }}" method="GET" class="users-search-form">
        <div class="users-search-inner">
            <label for="users-search-input" class="visually-hidden">Search users</label>
            <div class="search-input-wrap">
                <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                <input type="search" name="search" id="users-search-input" class="users-search-input" placeholder="Search by name or email…" value="{{ request('search', $search ?? '') }}" autocomplete="off">
            </div>
            <button type="submit" class="btn btn-search btn-sm">Search</button>
            @if(request()->filled('search'))
                <a href="{{ route('admin.users.index') }}" class="btn btn-outline btn-sm btn-clear">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    Clear
                </a>
            @endif
        </div>
    </form>
</div>

<div class="card users-card">
    <div class="table-wrapper">
        <table class="users-table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $i => $u)
                <tr class="user-row" style="--row-index: {{ $i }};">
                    <td>
                        <div class="user-cell">
                            <div class="avatar-wrap">
                                <img src="{{ $u->image_url }}" alt="" class="user-table-avatar" width="40" height="40">
                                <span class="avatar-status-dot {{ $u->is_active ? 'dot-active' : 'dot-inactive' }}"></span>
                            </div>
                            <span class="user-name-text">{{ $u->name }}</span>
                        </div>
                    </td>
                    <td>
                        <span class="email-text">{{ $u->email }}</span>
                    </td>
                    <td>
                        <span class="role-badge role-{{ strtolower($u->role) }}">{{ ucfirst($u->role) }}</span>
                    </td>
                    <td>
                        @if($u->is_active)
                        <span class="status-with-icon status-active" title="Active">
                            <i class="fas fa-circle-check"></i>
                            <span>Active</span>
                        </span>
                        @else
                        <span class="status-with-icon status-inactive" title="Inactive">
                            <i class="fas fa-circle-xmark"></i>
                            <span>Inactive</span>
                        </span>
                        @endif
                    </td>
                    <td>
                        <div class="actions-container">
                            <a href="{{ route('admin.users.show', $u) }}" class="action-btn action-view" title="View" aria-label="View user">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                <span class="action-tooltip">View</span>
                            </a>
                            <a href="{{ route('admin.users.edit', $u) }}" class="action-btn action-edit" title="Edit" aria-label="Edit user">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                <span class="action-tooltip">Edit</span>
                            </a>
                            <a href="{{ route('admin.users.billing', $u) }}" class="action-btn action-billing" title="Billing" aria-label="View billing">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
                                <span class="action-tooltip">Billing</span>
                            </a>
                            <a href="{{ route('admin.users.orders', $u) }}" class="action-btn action-orders" title="View orders">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
                                <span class="action-tooltip">Orders</span>
                            </a>
                            @if($u->id !== request()->session()->get('user_id'))
                            <form action="{{ route('admin.users.toggle-active', $u) }}" method="POST" class="js-toggle-active-form" data-user-name="{{ e($u->name) }}" data-action="{{ $u->is_active ? 'deactivate' : 'activate' }}">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="action-btn {{ $u->is_active ? 'action-deactivate' : 'action-activate' }}" title="{{ $u->is_active ? 'Set Inactive' : 'Set Active' }}" aria-label="{{ $u->is_active ? 'Set Inactive' : 'Set Active' }}">
                                    @if($u->is_active)
                                    <i class="fas fa-ban"></i>
                                    @else
                                    <i class="fas fa-circle-check"></i>
                                    @endif
                                    <span class="action-tooltip">{{ $u->is_active ? 'Deactivate' : 'Activate' }}</span>
                                </button>
                            </form>
                            @else
                            <span class="you-badge">(you)</span>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="pagination-wrap">
    {{ $users->links('vendor.pagination.default') }}
</div>

@endsection

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>

/* ─── VISUALLY HIDDEN ─────────────────────────────────── */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    animation: fadeSlideDown 0.45s ease both;
}

.page-title-group {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.page-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    flex-shrink: 0;
    transition: background 0.2s;
}

.page-title {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: var(--text, #111);
    letter-spacing: -0.3px;
}

.page-subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted, #888);
}

/* ─── SEARCH FORM ─────────────────────────────────────── */
.users-search-form {
    flex-shrink: 0;
}

.users-search-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 0.7rem;
    color: var(--text-muted, #aaa);
    pointer-events: none;
    z-index: 1;
}

.users-search-input {
    padding: 0.45rem 0.85rem 0.45rem 2.25rem;
    border: 1.5px solid var(--border, #e0e0e0);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--card-bg, #fff);
    color: var(--text, #111);
    width: 260px;
    min-width: 160px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.users-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.btn-sm { padding: 0.42rem 0.9rem; font-size: 0.875rem; border-radius: 8px; cursor: pointer; transition: all 0.18s; }

.btn-search {
    background: var(--accent);
    color: #fff;
    border: none;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.btn-search:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.btn-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1.5px solid var(--border, #e0e0e0);
    background: transparent;
    color: var(--text-muted, #888);
    text-decoration: none;
    font-weight: 500;
}
.btn-clear:hover {
    border-color: #dc3545;
    color: #dc3545;
    background: color-mix(in srgb, #dc3545 6%, transparent);
}

/* ─── CARD & TABLE ────────────────────────────────────── */
.users-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    animation: fadeSlideUp 0.5s ease 0.1s both;
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.users-table thead tr {
    background: color-mix(in srgb, var(--accent) 6%, var(--card-bg, #fff));
    border-bottom: 1.5px solid var(--border, #eee);
}

.users-table th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #888);
    white-space: nowrap;
}

/* staggered row entrance */
.user-row {
    border-bottom: 1px solid var(--border, #f0f0f0);
    animation: rowFadeIn 0.4s ease calc(0.15s + var(--row-index) * 0.05s) both;
    transition: background 0.15s;
}
.user-row:last-child { border-bottom: none; }
.user-row:hover { background: color-mix(in srgb, var(--accent) 4%, var(--card-bg, #fff)); }

.users-table td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    color: var(--text, #222);
}

/* ─── USER CELL ───────────────────────────────────────── */
.user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.user-table-avatar {
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--border, #eee);
    transition: transform 0.2s, box-shadow 0.2s;
}
.user-row:hover .user-table-avatar {
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.avatar-status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--card-bg, #fff);
}
.dot-active  { background: #28a745; }
.dot-inactive { background: #dc3545; }

.user-name-text {
    font-weight: 600;
    color: var(--text, #111);
    font-size: 0.9rem;
}

.email-text {
    color: var(--text-muted, #777);
    font-size: 0.865rem;
}

/* ─── ROLE BADGE ──────────────────────────────────────── */
.role-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.role-admin {
    background: color-mix(in srgb, #e31e52 12%, transparent);
    color: #e31e52;
    border-color: color-mix(in srgb, #e31e52 25%, transparent);
}

/* ─── STATUS ──────────────────────────────────────────── */
.status-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.855rem;
    font-weight: 600;
    background: none !important;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
}
.status-with-icon i { flex-shrink: 0; font-size: 0.9rem; }
.status-with-icon.status-active {
    color: #28a745;
    background: color-mix(in srgb, #28a745 10%, transparent) !important;
}
.status-with-icon.status-inactive {
    color: #dc3545;
    background: color-mix(in srgb, #dc3545 10%, transparent) !important;
}

/* ─── ACTIONS ─────────────────────────────────────────── */
.actions-container {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.actions-container form { display: inline-flex; margin: 0; }

/* unified action button */
.action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    color: var(--accent);
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    text-decoration: none;
}

/* tooltip */
.action-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(30,30,30,0.92);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    letter-spacing: 0.02em;
}
.action-btn:hover .action-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.action-view   { color: var(--accent); }
.action-view:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }

.action-edit { color: #0d6efd; }
.action-edit:hover { background: color-mix(in srgb, #0d6efd 12%, transparent); border-color: color-mix(in srgb, #0d6efd 25%, transparent); color: #0a58ca; }

.action-billing { color: #6c757d; }
.action-billing:hover { background: rgba(108,117,125,0.1); border-color: rgba(108,117,125,0.25); color: #495057; }

.action-orders { color: var(--accent); }
.action-orders:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }

.action-deactivate { color: #dc3545; }
.action-deactivate:hover { background: rgba(220,53,69,0.1); border-color: rgba(220,53,69,0.25); }

.action-activate { color: #28a745; }
.action-activate:hover { background: rgba(40,167,69,0.1); border-color: rgba(40,167,69,0.25); }

.you-badge {
    font-size: 0.78rem;
    color: var(--text-muted, #aaa);
    font-style: italic;
    padding: 0.15rem 0.5rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-radius: 20px;
}

/* ─── PAGINATION ──────────────────────────────────────── */
.pagination-wrap {
    margin-top: 1.4rem;
    animation: fadeSlideUp 0.5s ease 0.2s both;
}
.pagination-wrap nav[aria-label="Pagination"] ul {
    display: flex; gap: 0.4rem; list-style: none;
    padding: 0; margin: 0; flex-wrap: wrap;
}
.pagination-wrap nav[aria-label="Pagination"] ul li { display: inline-block; }
.pagination-wrap nav[aria-label="Pagination"] a,
.pagination-wrap nav[aria-label="Pagination"] span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px;
    padding: 0 0.5rem;
    border: 1.5px solid var(--border, #e0e0e0);
    border-radius: 9px;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.18s;
}
.pagination-wrap nav[aria-label="Pagination"] a:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.pagination-wrap nav[aria-label="Pagination"] span { color: var(--text-muted, #aaa); cursor: default; }
.pagination-wrap nav[aria-label="Pagination"] li.active span {
    font-weight: 700; color: var(--accent); border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.pagination-wrap nav[aria-label="Pagination"] li.disabled span { opacity: 0.5; }

/* ─── KEYFRAMES ───────────────────────────────────────── */
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rowFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
    .page-header-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .users-search-inner { width: 100%; }
    .users-search-input { width: 100%; min-width: 0; flex: 1; }
    .search-input-wrap { flex: 1; }

    .users-table th:nth-child(2),
    .users-table td:nth-child(2) { display: none; } /* hide email col */

    .users-table th,
    .users-table td { padding: 0.75rem 0.7rem; }

    .page-title { font-size: 1.3rem; }
}

@media (max-width: 480px) {
    .page-subtitle { display: none; }
    .page-title-icon { width: 38px; height: 38px; }
    .user-name-text { font-size: 0.85rem; }
    .action-btn { width: 28px; height: 28px; font-size: 0.85rem; }
    .users-table th,
    .users-table td { padding: 0.65rem 0.5rem; }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.querySelectorAll('.js-toggle-active-form').forEach(function(form) {
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        var name       = form.getAttribute('data-user-name') || 'this user';
        var action     = form.getAttribute('data-action') || 'change status';
        var isActivate = action === 'activate';
        Swal.fire({
            title: isActivate ? 'Activate user?' : 'Deactivate user?',
            text:  isActivate
                ? 'Are you sure you want to activate ' + name + '?'
                : 'Are you sure you want to deactivate ' + name + '?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#e31e52',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, ' + (isActivate ? 'activate' : 'deactivate')
        }).then(function(result) {
            if (result.isConfirmed) form.submit();
        });
    });
});
</script>
@endpush