<?php 
$usersData = [
    [
        'joinDate' => '25 Jan 2024',
        'userImage' => 'user-list1.png',
        'name' => 'Kathryn Murphy',
        'email' => 'osgoodwy@gmail.com',
        'department' => 'HR',
        'designation' => 'Manager',
        'status' => 'Active',
        'statusClass' => 'bg-success-focus text-success-600 border border-success-main'
    ],
    [
        'joinDate' => '25 Jan 2024',
        'userImage' => 'user-list2.png',
        'name' => 'Annette Black',
        'email' => 'redaniel@gmail.com',
        'department' => 'Design',
        'designation' => 'UI UX Designer',
        'status' => 'Inactive',
        'statusClass' => 'bg-neutral-200 text-neutral-600 border border-neutral-400'
    ],
    [
        'joinDate' => '10 Feb 2024',
        'userImage' => 'user-list3.png',
        'name' => 'Ronald Richards',
        'email' => 'seannand@mail.ru',
        'department' => 'Design',
        'designation' => 'UI UX Designer',
        'status' => 'Active',
        'statusClass' => 'bg-success-focus text-success-600 border border-success-main'
    ],
    [
        'joinDate' => '10 Feb 2024',
        'userImage' => 'user-list4.png',
        'name' => 'Eleanor Pena',
        'email' => 'miyokoto@mail.ru',
        'department' => 'Design',
        'designation' => 'UI UX Designer',
        'status' => 'Active',
        'statusClass' => 'bg-success-focus text-success-600 border border-success-main'
    ],
    [
        'joinDate' => '15 March 2024',
        'userImage' => 'user-list5.png',
        'name' => 'Leslie Alexander',
        'email' => 'icadahli@gmail.com',
        'department' => 'Design',
        'designation' => 'UI UX Designer',
        'status' => 'Inactive',
        'statusClass' => 'bg-neutral-200 text-neutral-600 border border-neutral-400'
    ],
    [
        'joinDate' => '15 March 2024',
        'userImage' => 'user-list6.png',
        'name' => 'Albert Flores',
        'email' => 'warn@mail.ru',
        'department' => 'Design',
        'designation' => 'UI UX Designer',
        'status' => 'Active',
        'statusClass' => 'bg-success-focus text-success-600 border border-success-main'
    ],
    [
        'joinDate' => '27 April 2024',
        'userImage' => 'user-list7.png',
        'name' => 'Jacob Jones',
        'email' => 'zitka@mail.ru',
        'department' => 'Development',
        'designation' => 'Frontend developer',
        'status' => 'Active',
        'statusClass' => 'bg-success-focus text-success-600 border border-success-main'
    ],
    [
        'joinDate' => '25 Jan 2024',
        'userImage' => 'user-list8.png',
        'name' => 'Jerome Bell',
        'email' => 'igerrin@gmail.com',
        'department' => 'Development',
        'designation' => 'Frontend developer',
        'status' => 'Inactive',
        'statusClass' => 'bg-neutral-200 text-neutral-600 border border-neutral-400'
    ],
    [
        'joinDate' => '30 April 2024',
        'userImage' => 'user-list2.png',
        'name' => 'Marvin McKinney',
        'email' => 'maka@yandex.ru',
        'department' => 'Development',
        'designation' => 'Frontend developer',
        'status' => 'Active',
        'statusClass' => 'bg-success-focus text-success-600 border border-success-main'
    ],
    [
        'joinDate' => '30 April 2024',
        'userImage' => 'user-list10.png',
        'name' => 'Cameron Williamson',
        'email' => 'danten@mail.ru',
        'department' => 'Development',
        'designation' => 'Frontend developer',
        'status' => 'Active',
        'statusClass' => 'bg-success-focus text-success-600 border border-success-main'
    ]
];

$script ='<script>
                        $(".remove-item-btn").on("click", function() {
                            $(this).closest("tr").addClass("d-none")
                        });
            </script>';?>

<?php include './partials/layouts/layoutTop.php' ?>

        <div class="dashboard-main-body">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
                <h6 class="fw-semibold mb-0">Users Grid</h6>
                <ul class="d-flex align-items-center gap-2">
                    <li class="fw-medium">
                        <a href="index.php" class="d-flex align-items-center gap-1 hover-text-primary">
                            <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
                            Dashboard
                        </a>
                    </li>
                    <li>-</li>
                    <li class="fw-medium">Users Grid</li>
                </ul>
            </div>

            <div class="card h-100 p-0 radius-12">
                <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center flex-wrap gap-3 justify-content-between">
                    <div class="d-flex align-items-center flex-wrap gap-3">
                        <span class="text-md fw-medium text-secondary-light mb-0">Show</span>
                        <select class="form-select form-select-sm w-auto ps-12 py-6 radius-12 h-40-px">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                        </select>
                        <form class="navbar-search">
                            <input type="text" class="bg-base h-40-px w-auto" name="search" placeholder="Search">
                            <iconify-icon icon="ion:search-outline" class="icon"></iconify-icon>
                        </form>
                        <select class="form-select form-select-sm w-auto ps-12 py-6 radius-12 h-40-px">
                            <option>Status</option>
                            <option>Active</option>
                            <option>Inactive</option>
                        </select>
                    </div>
                    <a href="add-user.php" class="btn btn-primary text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center gap-2">
                        <iconify-icon icon="ic:baseline-plus" class="icon text-xl line-height-1"></iconify-icon>
                        Add New User
                    </a>
                </div>
                <div class="card-body p-24">
                    <div class="table-responsive scroll-sm">
                        <table class="table bordered-table sm-table mb-0">
                            <thead>
                                <tr>
                                    <th scope="col">
                                        <div class="d-flex align-items-center gap-10">
                                            <div class="form-check style-check d-flex align-items-center">
                                                <input class="form-check-input radius-4 border input-form-dark" type="checkbox" name="checkbox" id="selectAll">
                                            </div>
                                            S.L
                                        </div>
                                    </th>
                                    <th scope="col">Join Date</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Department</th>
                                    <th scope="col">Designation</th>
                                    <th scope="col" class="text-center">Status</th>
                                    <th scope="col" class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($usersData as $index => $user): ?>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-10">
                                            <div class="form-check style-check d-flex align-items-center">
                                                <input class="form-check-input radius-4 border border-neutral-400" type="checkbox" name="checkbox">
                                            </div>
                                            <?php echo str_pad($index + 1, 2, '0', STR_PAD_LEFT); ?>
                                        </div>
                                    </td>
                                    <td><?php echo $user['joinDate']; ?></td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="assets/images/user-list/<?php echo $user['userImage']; ?>" alt="" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                                            <div class="flex-grow-1">
                                                <span class="text-md mb-0 fw-normal text-secondary-light"><?php echo $user['name']; ?></span>
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="text-md mb-0 fw-normal text-secondary-light"><?php echo $user['email']; ?></span></td>
                                    <td><?php echo $user['department']; ?></td>
                                    <td><?php echo $user['designation']; ?></td>
                                    <td class="text-center">
                                        <span class="<?php echo $user['statusClass']; ?> px-24 py-4 radius-4 fw-medium text-sm"><?php echo $user['status']; ?></span>
                                    </td>
                                    <td class="text-center">
                                        <div class="d-flex align-items-center gap-10 justify-content-center">
                                            <button type="button" class="bg-info-focus bg-hover-info-200 text-info-600 fw-medium w-40-px h-40-px d-flex justify-content-center align-items-center rounded-circle">
                                                <iconify-icon icon="majesticons:eye-line" class="icon text-xl"></iconify-icon>
                                            </button>
                                            <button type="button" class="bg-success-focus text-success-600 bg-hover-success-200 fw-medium w-40-px h-40-px d-flex justify-content-center align-items-center rounded-circle">
                                                <iconify-icon icon="lucide:edit" class="menu-icon"></iconify-icon>
                                            </button>
                                            <button type="button" class="remove-item-btn bg-danger-focus bg-hover-danger-200 text-danger-600 fw-medium w-40-px h-40-px d-flex justify-content-center align-items-center rounded-circle">
                                                <iconify-icon icon="fluent:delete-24-regular" class="menu-icon"></iconify-icon>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>

                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-24">
                        <span>Showing 1 to 10 of 12 entries</span>
                        <ul class="pagination d-flex flex-wrap align-items-center gap-2 justify-content-center">
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)">
                                    <iconify-icon icon="ep:d-arrow-left" class=""></iconify-icon>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md bg-primary-600 text-white" href="javascript:void(0)">1</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">2</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)">3</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)">4</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)">5</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)">
                                    <iconify-icon icon="ep:d-arrow-right" class=""></iconify-icon>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

<?php include './partials/layouts/layoutBottom.php' ?>