<?php $__env->startSection('title', 'All Users'); ?>
<?php $__env->startSection('page-title', 'Users'); ?>
<?php $__env->startSection('breadcrumb', 'Banknote / Users'); ?>

<?php $__env->startSection('styles'); ?>
<style>
    :root {
        /* 🎨 الهوية الجديدة 🎨 */
        --brand-blue: #0071BC;
        --brand-blue-dk: #005A96;
        --brand-green: #39B54A;
        --brand-blue-lt: rgba(0, 113, 188, 0.08);
        --brand-green-lt: rgba(57, 181, 74, 0.1);
        --brand-blue-glow: rgba(0, 113, 188, 0.15);
        
        --white: #ffffff;
        --bg: #f8fafc;
        --border: #e2e8f0;
        --text: #1e293b;
        --text-mid: #475569;
        --muted: #94a3b8;
        --red: #ef4444;
        --red-lt: rgba(239, 68, 68, 0.1);
        
        --sh: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    html, body { background: var(--bg); color: var(--text); direction: ltr; font-family: 'Inter', sans-serif; }

    /* Page Header */
    .pg-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
    .pg-hdr h1 { font-size: 22px; font-weight: 900; color: var(--text); margin: 0; }
    .pg-hdr .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }

    .breadcrumb-bar { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 15px; }
    .breadcrumb-bar a { color: var(--brand-blue); text-decoration: none; font-weight: 600; }

    /* Action Buttons */
    .btn-p { 
        display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; 
        background: var(--brand-blue); color: #fff; border: none; border-radius: 10px; 
        font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; 
        box-shadow: 0 4px 12px rgba(0, 113, 188, 0.2); transition: all .2s;
    }
    .btn-p:hover { background: var(--brand-blue-dk); transform: translateY(-1px); }

    /* Stats Cards */
    .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 25px; }
    .mini-stat { 
        background: var(--white); border: 1px solid var(--border); border-radius: 16px; 
        padding: 18px; display: flex; align-items: center; gap: 15px; box-shadow: var(--sh);
    }
    .ms-icon { 
        width: 48px; height: 48px; border-radius: 12px; display: flex; 
        align-items: center; justify-content: center; font-size: 22px; 
    }
    .ms-val { font-size: 24px; font-weight: 900; color: var(--text); }
    .ms-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }

    /* Table Card */
    .tbl-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--sh); }
    .tbl-toolbar { padding: 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
    .tbl-title { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
    .tbl-count { background: var(--brand-blue-lt); color: var(--brand-blue); font-size: 11px; padding: 3px 10px; border-radius: 20px; }

    /* Search Input */
    .search-w { position: relative; }
    .search-w input { 
        background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; 
        padding: 10px 15px 10px 40px; width: 260px; font-size: 13px; transition: all .2s;
    }
    .search-w input:focus { border-color: var(--brand-blue); background: #fff; outline: none; box-shadow: 0 0 0 3px var(--brand-blue-glow); }
    .search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; }

    /* Data Table */
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table thead tr { background: #fcfdfe; }
    .data-table th { padding: 15px 20px; text-align: left; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border); }
    .data-table td { padding: 15px 20px; font-size: 13.5px; border-bottom: 1px solid #f8fafc; color: var(--text-mid); }
    .data-table tr:hover td { background: #fbfdff; }

    /* Status Badges */
    .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; text-transform: capitalize; }
    .st-active { background: var(--brand-green-lt); color: #22543d; }
    .st-active::before { content:''; width:6px; height:6px; background:var(--brand-green); border-radius:50%; }
    .st-inactive { background: var(--red-lt); color: #742a2a; }
    .st-inactive::before { content:''; width:6px; height:6px; background:var(--red); border-radius:50%; }

  /* أزرار العمليات في الجدول */
.act-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* أزرار العمليات - نمط الألوان الكاملة */
.act-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.act-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    color: #ffffff !important; /* تأكيد أن لون الأيقونة أبيض */
}

/* زر التعديل - Primary (الأزرق البراند) */
.act-edit {
    background-color: var(--brand-blue); 
    box-shadow: 0 4px 10px rgba(0, 113, 188, 0.25);
}

.act-edit:hover {
    background-color: var(--brand-blue-dk);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 113, 188, 0.35);
}

/* زر الحذف - Danger (الأحمر) */
.act-del {
    background-color: var(--red);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
}

.act-del:hover {
    background-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.35);
}

    /* Pagination */
    .pagination .page-link { border-radius: 8px !important; margin: 0 3px; border-color: var(--border); color: var(--text-mid); font-weight: 600; }
    .pagination .page-item.active .page-link { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

    @media (max-width: 768px) { .stats-row { grid-template-columns: 1fr; } .search-w input { width: 100%; } }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>

<div class="breadcrumb-bar">
    <a href="<?php echo e(route('admin.dashboard')); ?>"><i class="las la-home"></i> Dashboard</a>
    <i class="las la-angle-right" style="font-size:10px"></i>
    <span>All Users</span>
</div>

<div class="pg-hdr">
    <div>
        <h1>All Users</h1>
        <div class="sub">Monitor and manage all system user accounts</div>
    </div>
    <a href="<?php echo e(route('users.create')); ?>" class="btn-p">
        <i class="las la-user-plus"></i> Add New User
    </a>
</div>
<!-- Stats Row -->
<div class="stats-row">
    <div class="mini-stat">
        <div class="ms-icon" style="background:var(--brand-blue-lt); color:var(--brand-blue)"><i class="las la-users"></i></div>
        <div>
            <div class="ms-val"><?php echo e($index->total()); ?></div>
            <div class="ms-lbl">Total Users</div>
        </div>
    </div>
    <div class="mini-stat">
        <div class="ms-icon" style="background:var(--brand-green-lt); color:var(--brand-green)"><i class="las la-user-check"></i></div>
        <div>
            <div class="ms-val"><?php echo e($activeCount); ?></div>
            <div class="ms-lbl">Active Users</div>
        </div>
    </div>
    <div class="mini-stat">
        <div class="ms-icon" style="background:var(--red-lt); color:var(--red)"><i class="las la-user-slash"></i></div>
        <div>
            <div class="ms-val"><?php echo e($inactiveCount); ?></div>
            <div class="ms-lbl">Inactive Users</div>
        </div>
    </div>
</div>

<!-- Table Card -->
<div class="tbl-card">
    <div class="tbl-toolbar">
        <div class="tbl-title">
            <i class="las la-list" style="color:var(--brand-blue)"></i>
            User Database
            <span class="tbl-count"><?php echo e($index->count()); ?> on this page</span>
        </div>
        <div class="search-w">
            <i class="las la-search search-ico"></i>
            <input type="text" placeholder="Search by name or ID..." oninput="filterTable(this.value)">
        </div>
    </div>

    <div style="overflow-x:auto">
        <table class="data-table" id="usersTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>User Detail</th>
                    <th>Terminal ID</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php $__empty_1 = true; $__currentLoopData = $index; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <tr>
                    <td style="font-weight: 700; color: var(--muted);"><?php echo e($loop->iteration); ?></td>
                    <td>
                        <div style="display:flex; align-items:center; gap:10px">
                            <div style="width:36px; height:36px; background:var(--brand-blue-lt); color:var(--brand-blue); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px">
                                <?php echo e(strtoupper(substr($user->name, 0, 2))); ?>

                            </div>
                            <div>
                                <div style="font-weight:700; color:var(--text)"><?php echo e($user->name); ?></div>
                                <div style="font-size:11px; color:var(--muted)"><?php echo e($user->phone); ?></div>
                            </div>
                        </div>
                    </td>
                    <td><code style="background:var(--bg); padding:4px 8px; border-radius:5px; color:var(--brand-blue)"><?php echo e($user->terminal_id); ?></code></td>
                    <td><span style="font-weight:600"><?php echo e($user->role->name ?? 'N/A'); ?></span></td>
                    <td>
                        <span class="status-badge <?php echo e($user->status == 'active' ? 'st-active' : 'st-inactive'); ?>">
                            <?php echo e($user->status); ?>

                        </span>
                    </td>
                    <td>
                     <div class="act-btns">
    <!-- زر التعديل -->
    <a href="<?php echo e(route('users.edit', $user->id)); ?>" class="act-btn act-edit" title="Edit">
        <i class="las la-edit"></i>
    </a>
    
    <!-- زر الحذف -->
    <button onclick="DeleteRow(event, <?php echo e($user->id); ?>)" class="act-btn act-del" title="Delete">
        <i class="las la-trash"></i>
    </button>
</div>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <tr>
                    <td colspan="6" style="text-align:center; padding:50px 0;">
                        <img src="https://cdn-icons-png.flaticon.com/512/5089/5089714.png" width="80" style="opacity:0.2">
                        <p style="margin-top:15px; color:var(--muted)">No users found in the database.</p>
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div style="padding:20px; border-top:1px solid var(--border)">
        <?php echo e($index->links('pagination::bootstrap-4')); ?>

    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/sweetalert/dist/sweetalert.min.js"></script>
<script>
    function DeleteRow(event, id) {
        event.preventDefault();
        swal({
            title: "Are you sure?",
            text: "This action will permanently delete this user account.",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                fetch('<?php echo e(url("users")); ?>/' + id, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
                    },
                    body: '_method=DELETE&_token=<?php echo e(csrf_token()); ?>'
                })
                .then(res => res.json())
                .then(data => {
                    swal("Deleted!", data.message, "success")
                        .then(() => location.reload());
                })
                .catch(() => {
                    swal("Error!", "Something went wrong", "error");
                });
            }
        });
    }

    function filterTable(val) {
        let q = val.toLowerCase();
        document.querySelectorAll("#usersTable tbody tr").forEach(row => {
            row.style.display = row.innerText.toLowerCase().includes(q) ? '' : 'none';
        });
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/erppanel/public_html/banknote.roayapay.com/resources/views/admin/users/index.blade.php ENDPATH**/ ?>