@extends('admin::layouts.admin')

@section('title', 'Manajemen Pengguna')

@section('content')
<div class="users-page">
    {{-- Page Title --}}
    <h1 class="page-title-setting">Manajemen Pengguna</h1>

    {{-- Data Card --}}
    <div class="setting-card">
        {{-- Card Header with Gradient --}}
        <div class="setting-card-header">
            <div class="header-icon">
                <i class="fas fa-users"></i>
            </div>
            <span class="header-title">Data Tabel Pengguna</span>
        </div>

        {{-- Search and Add Section --}}
        <div class="setting-toolbar">
            <div class="search-section">
                <label class="search-label">Cari Data</label>
                <div class="search-input-wrapper">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="Cari data" class="search-input">
                </div>
            </div>
            <button class="btn-add-data">
                <i class="fas fa-plus"></i>
                Tambah Data
            </button>
        </div>

        {{-- Data Table --}}
        <div class="setting-table-wrapper">
            <table class="setting-table">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Email</th>
                        <th>Wallet Terconnect</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="name-cell">
                            <span class="user-name">Reza Subagio</span>
                        </td>
                        <td class="email-cell">
                            <span class="user-email">reza@gmail.com</span>
                        </td>
                        <td class="wallet-cell">
                            <div class="wallet-logo">
                                <span class="wallet-text indodax">INDODAX</span>
                            </div>
                        </td>
                        <td class="action-cell">
                            <div class="action-buttons">
                                <button class="btn-action edit" title="Edit"><i class="fas fa-edit"></i></button>
                                <button class="btn-action delete" title="Hapus"><i class="fas fa-trash"></i></button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="name-cell">
                            <span class="user-name">Lestari</span>
                        </td>
                        <td class="email-cell">
                            <span class="user-email">lestari@gmail.com</span>
                        </td>
                        <td class="wallet-cell">
                            <div class="wallet-logo">
                                <span class="wallet-text indodax">INDODAX</span>
                            </div>
                        </td>
                        <td class="action-cell">
                            <div class="action-buttons">
                                <button class="btn-action edit" title="Edit"><i class="fas fa-edit"></i></button>
                                <button class="btn-action delete" title="Hapus"><i class="fas fa-trash"></i></button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="name-cell">
                            <span class="user-name">Siti Saraswati</span>
                        </td>
                        <td class="email-cell">
                            <span class="user-email">saraswati.siti@gmail.com</span>
                        </td>
                        <td class="wallet-cell">
                            <div class="wallet-logo">
                                <span class="wallet-text metamask">🦊 Meta<b>Mask</b></span>
                            </div>
                        </td>
                        <td class="action-cell">
                            <div class="action-buttons">
                                <button class="btn-action edit" title="Edit"><i class="fas fa-edit"></i></button>
                                <button class="btn-action delete" title="Hapus"><i class="fas fa-trash"></i></button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="name-cell">
                            <span class="user-name">Bagas Raga Kurniawan</span>
                        </td>
                        <td class="email-cell">
                            <span class="user-email">bagasragak123@gmail.com</span>
                        </td>
                        <td class="wallet-cell">
                            <div class="wallet-logo">
                                <span class="wallet-text trustwallet">🛡️ <b>TRUST</b>WALLET</span>
                            </div>
                        </td>
                        <td class="action-cell">
                            <div class="action-buttons">
                                <button class="btn-action edit" title="Edit"><i class="fas fa-edit"></i></button>
                                <button class="btn-action delete" title="Hapus"><i class="fas fa-trash"></i></button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="name-cell">
                            <span class="user-name">Young Win Cha</span>
                        </td>
                        <td class="email-cell">
                            <span class="user-email">wincha99@gmail.com</span>
                        </td>
                        <td class="wallet-cell">
                            <div class="wallet-logo">
                                <span class="wallet-text phantom">👻 phantom</span>
                            </div>
                        </td>
                        <td class="action-cell">
                            <div class="action-buttons">
                                <button class="btn-action edit" title="Edit"><i class="fas fa-edit"></i></button>
                                <button class="btn-action delete" title="Hapus"><i class="fas fa-trash"></i></button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="name-cell">
                            <span class="user-name">Sintia Annisa</span>
                        </td>
                        <td class="email-cell">
                            <span class="user-email">sintia.annisa@gmail.com</span>
                        </td>
                        <td class="wallet-cell">
                            <div class="wallet-logo">
                                <span class="wallet-text coinbase">◉ coinbase</span>
                            </div>
                        </td>
                        <td class="action-cell">
                            <div class="action-buttons">
                                <button class="btn-action edit" title="Edit"><i class="fas fa-edit"></i></button>
                                <button class="btn-action delete" title="Hapus"><i class="fas fa-trash"></i></button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="name-cell">
                            <span class="user-name">Kusuma Wardani</span>
                        </td>
                        <td class="email-cell">
                            <span class="user-email">kusumawarnadi@gmail.com</span>
                        </td>
                        <td class="wallet-cell">
                            <div class="wallet-logo">
                                <span class="wallet-text trustwallet">🛡️ <b>TRUST</b>WALLET</span>
                            </div>
                        </td>
                        <td class="action-cell">
                            <div class="action-buttons">
                                <button class="btn-action edit" title="Edit"><i class="fas fa-edit"></i></button>
                                <button class="btn-action delete" title="Hapus"><i class="fas fa-trash"></i></button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        {{-- Table Footer --}}
        <div class="setting-table-footer">
            <div class="showing-info">Showing 1-10 from 05</div>
            <div class="pagination-section">
                <span class="rows-label">Rows per page:</span>
                <select class="rows-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
                <div class="pagination-buttons">
                    <button class="page-nav-btn disabled"><i class="fas fa-chevron-left"></i></button>
                    <button class="page-nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Users Page Styles */
.users-page {
    max-width: 1400px;
}

.page-title-setting {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--purple-primary);
    margin-bottom: 24px;
}

/* Setting Card */
.setting-card {
    background: rgba(26, 23, 48, 0.6);
    border-radius: 16px;
    overflow: hidden;
}

/* Card Header with Gradient */
.setting-card-header {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.header-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

/* Toolbar Section */
.setting-toolbar {
    padding: 20px 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.search-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.search-input-wrapper {
    position: relative;
    width: 400px;
}

.search-input-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: var(--cyan-primary);
    font-size: 0.9rem;
}

.search-input::placeholder {
    color: var(--cyan-primary);
}

.search-input:focus {
    outline: none;
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.btn-add-data {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-add-data:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
}

/* Setting Table */
.setting-table-wrapper {
    overflow-x: auto;
}

.setting-table {
    width: 100%;
    border-collapse: collapse;
}

.setting-table th {
    padding: 16px 24px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(139, 92, 246, 0.15);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.setting-table th:first-child,
.setting-table th:nth-child(2) {
    text-align: left;
}

.setting-table td {
    padding: 16px 24px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05);
}

/* Name Cell */
.name-cell {
    width: 200px;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Email Cell */
.email-cell {
    width: 250px;
}

.user-email {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Wallet Cell */
.wallet-cell {
    width: 200px;
    text-align: center;
}

.wallet-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wallet-text {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.wallet-text.indodax {
    color: #f5a623;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 900;
    letter-spacing: 2px;
}

.wallet-text.metamask {
    color: #9a9a9a;
}

.wallet-text.metamask b {
    color: #e17726;
}

.wallet-text.trustwallet {
    color: #9a9a9a;
}

.wallet-text.trustwallet b {
    color: #3375bb;
}

.wallet-text.phantom {
    color: #ab9ff2;
    font-weight: 500;
}

.wallet-text.coinbase {
    color: #0052ff;
    font-weight: 500;
}

/* Action Cell */
.action-cell {
    width: 120px;
}

.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-action {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    background: transparent;
    border-radius: 8px;
    color: var(--purple-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-action:hover {
    transform: translateY(-2px);
}

.btn-action.view {
    border-color: rgba(59, 130, 246, 0.5);
    color: #3b82f6;
}

.btn-action.view:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.btn-action.edit {
    border-color: rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

.btn-action.edit:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

.btn-action.delete {
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.btn-action.delete:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

/* Table Footer */
.setting-table-footer {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.showing-info {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pagination-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rows-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rows-select {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.pagination-buttons {
    display: flex;
    gap: 6px;
}

.page-nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    background: transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-nav-btn:hover:not(.disabled) {
    background: var(--purple-light);
    border-color: var(--purple-primary);
    color: var(--purple-secondary);
}

.page-nav-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 992px) {
    .setting-table th:nth-child(3),
    .setting-table td.wallet-cell {
        display: none;
    }
}

@media (max-width: 768px) {
    .setting-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-wrapper {
        width: 100%;
    }

    .btn-add-data {
        width: 100%;
        justify-content: center;
    }

    .setting-table-footer {
        flex-direction: column;
        gap: 16px;
    }
}
</style>
@endsection