obanana_b2b_test/admin/vendor-card.php

1786 lines
126 KiB
PHP
Raw Normal View History

2024-02-12 10:35:09 +08:00
<?php
include "../functions.php";
2024-02-12 10:35:09 +08:00
$_SESSION["url"] = $_SERVER['REQUEST_URI'];
if ($_SESSION["userId"] <> "") {
$_SESSION["isLoggedIn"] = true;
//$customer_data = getCustomerbyLoginId($_SESSION["userId"]);
} else {
$_SESSION["isLoggedIn"] = false;
header("location: login.php");
exit();
}
if ($_SESSION["user_type"] != "admin") {
header("location: login.php?alert=Only admins allowed here!");
}
$products = productList();
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style>
.pagination {
display: flex;
list-style: none;
padding: 0;
margin: 0;
justify-content: center;
}
.pagination a {
color: #333;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #ccc;
margin: 0 5px;
border-radius: 4px;
}
.pagination a.active {
background-color: #007bff;
color: #fff;
}
</style>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="oBanana B2B - Admin Dashboard">
<title>oBanana B2B - Admin Dashboard</title>
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
<link href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css" rel="stylesheet" />
<!-- PLUGINS CSS STYLE -->
<link href="assets/plugins/simplebar/simplebar.css" rel="stylesheet" />
<!-- Ekka CSS -->
<link id="ekka-css" rel="stylesheet" href="assets/css/ekka.css" />
<!-- FAVICON -->
<link href="assets/img/favicon.png" rel="shortcut icon" />
</head>
<body class="ec-header-fixed ec-sidebar-fixed ec-sidebar-dark ec-header-light" id="body">
<!-- WRAPPER -->
<div class="wrapper">
<!-- LEFT MAIN SIDEBAR -->
<?php include 'left-main-sidebar.php' ?>
<!-- PAGE WRAPPER -->
<div class="ec-page-wrapper">
<!-- Header -->
<header class="ec-main-header" id="header">
<nav class="navbar navbar-static-top navbar-expand-lg">
<!-- Sidebar toggle button -->
<button id="sidebar-toggler" class="sidebar-toggle"></button>
<!-- search form -->
<div class="search-form d-lg-inline-block">
<div class="input-group">
<input type="text" name="query" id="search-input" class="form-control" placeholder="search.." autofocus autocomplete="off" />
<button type="button" name="search" id="search-btn" class="btn btn-flat">
<i class="mdi mdi-magnify"></i>
</button>
</div>
<div id="search-results-container">
<ul id="search-results"></ul>
</div>
</div>
<!-- navbar right -->
<div class="navbar-right">
<ul class="nav navbar-nav">
<!-- User Account -->
<li class="dropdown user-menu">
<button class="dropdown-toggle nav-link ec-drop" data-bs-toggle="dropdown" aria-expanded="false">
<img src="assets/img/user/user.png" class="user-image" alt="User Image" />
</button>
<ul class="dropdown-menu dropdown-menu-right ec-dropdown-menu">
<!-- User image -->
<li class="dropdown-header">
<img src="assets/img/user/user.png" class="img-circle" alt="User Image" />
<div class="d-inline-block">
John Deo <small class="pt-1">john.example@gmail.com</small>
</div>
</li>
<li>
<a href="user-profile.html">
<i class="mdi mdi-account"></i> My Profile
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-email"></i> Message
</a>
</li>
<li>
<a href="#"> <i class="mdi mdi-diamond-stone"></i> Projects </a>
</li>
<li class="right-sidebar-in">
<a href="javascript:0"> <i class="mdi mdi-settings-outline"></i> Setting </a>
</li>
<li class="dropdown-footer">
<a href="/logout.php"> <i class="mdi mdi-logout"></i> Log Out </a>
</li>
</ul>
</li>
<li class="dropdown notifications-menu custom-dropdown">
<button class="dropdown-toggle notify-toggler custom-dropdown-toggler">
<i class="mdi mdi-bell-outline"></i>
</button>
<div class="card card-default dropdown-notify dropdown-menu-right mb-0">
<div class="card-header card-header-border-bottom px-3">
<h2>Notifications</h2>
</div>
<div class="card-body px-0 py-0">
<ul class="nav nav-tabs nav-style-border p-0 justify-content-between" id="myTab" role="tablist">
<li class="nav-item mx-3 my-0 py-0">
<a href="#" class="nav-link active pb-3" id="home2-tab" data-bs-toggle="tab" data-bs-target="#home2" role="tab" aria-controls="home2" aria-selected="true">All (10)</a>
</li>
<li class="nav-item mx-3 my-0 py-0">
<a href="#" class="nav-link pb-3" id="profile2-tab" data-bs-toggle="tab" data-bs-target="#profile2" role="tab" aria-controls="profile2" aria-selected="false">Msgs (5)</a>
</li>
<li class="nav-item mx-3 my-0 py-0">
<a href="#" class="nav-link pb-3" id="contact2-tab" data-bs-toggle="tab" data-bs-target="#contact2" role="tab" aria-controls="contact2" aria-selected="false">Others (5)</a>
</li>
</ul>
<div class="tab-content" id="myTabContent3">
<div class="tab-pane fade show active" id="home2" role="tabpanel">
<ul class="list-unstyled" data-simplebar style="height: 360px">
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u2.jpg" alt="Image">
<span class="status away"></span>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Nitin</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Nam itaque
doloremque odio, eligendi delectus vitae.</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 30 min
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification media-active">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u1.jpg" alt="Image">
<span class="status active"></span>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Lovina</h4>
<p class="last-msg">Donec mattis augue a nisl
consequat, nec imperdiet ex rutrum. Fusce et
vehicula enim. Sed in enim eu odio vehic.</p>
<span class="font-size-12 font-weight-medium text-white">
<i class="mdi mdi-clock-outline"></i> Just
now...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u5.jpg" alt="Image">
<span class="status away"></span>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Crinali</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Nam itaque
doloremque odio, eligendi delectus vitae.</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 1 hrs
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification event-active">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white">
<i class="mdi mdi-calendar-check font-size-20"></i>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Upcomming event added</h4>
<p class="last-msg font-size-14">03/Jan/2020 (1pm -
2pm)</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 10 min
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
<i class="mdi mdi-chart-areaspline font-size-20"></i>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Yearly Sales report</h4>
<p class="last-msg font-size-14">Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Nam
itaque doloremque odio, eligendi delectus vitae.
</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 1 hrs
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
<i class="mdi mdi-account-multiple-check font-size-20"></i>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">New request</h4>
<p class="last-msg font-size-14">Add Dany Jones as
your contact consequat nec imperdiet ex rutrum.
Fusce et vehicula enim. Sed in enim.</p>
<span class="my-1 btn btn-sm btn-success">Accept</span>
<span class="my-1 btn btn-sm btn-secondary">Delete</span>
<span class="font-size-12 font-weight-medium text-secondary d-block">
<i class="mdi mdi-clock-outline"></i> 5 min
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-danger text-white">
<i class="mdi mdi-server-network-off font-size-20"></i>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Server overloaded</h4>
<p class="last-msg font-size-14">Donec mattis augue
a nisl consequat, nec imperdiet ex rutrum. Fusce
et vehicula enim. Sed in enim eu odio vehic.</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 30 min
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-purple text-white">
<i class="mdi mdi-playlist-check font-size-20"></i>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Task complete</h4>
<p class="last-msg font-size-14">Nam ut nisi erat.
Ut quis tortor varius, hendrerit arcu quis,
congue nisl. In scelerisque, sem ut ve.</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 2 hrs
ago...
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="profile2" role="tabpanel">
<ul class="list-unstyled" data-simplebar style="height: 360px">
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u6.jpg" alt="Image">
<span class="status away"></span>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Hardiko</h4>
<p class="last-msg">Donec mattis augue a nisl
consequat, nec imperdiet ex rutrum. Fusce et
vehicula enim. Sed in enim eu odio vehic.</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 1 hrs
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u7.jpg" alt="Image">
<span class="status away"></span>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Browin</h4>
<p class="last-msg">Nam ut nisi erat. Ut quis tortor
varius, hendrerit arcu quis, congue nisl. In
scelerisque, sem ut ve.</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 1 hrs
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification media-active">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u1.jpg" alt="Image">
<span class="status active"></span>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">jenelia</h4>
<p class="last-msg">Donec mattis augue a nisl
consequat, nec imperdiet ex rutrum. Fusce et
vehicula enim. Sed in enim eu odio vehic.</p>
<span class="font-size-12 font-weight-medium text-white">
<i class="mdi mdi-clock-outline"></i> Just
now...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u2.jpg" alt="Image">
<span class="status away"></span>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Bhavlio</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Nam itaque
doloremque odio, eligendi delectus vitae.</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 1 hrs
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u5.jpg" alt="Image">
<span class="status away"></span>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Browini</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Nam itaque
doloremque odio, eligendi delectus vitae.</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 1 hrs
ago...
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="contact2" role="tabpanel">
<ul class="list-unstyled" data-simplebar style="height: 360px">
<li>
<a href="javscript:void(0)" class="media media-message media-notification event-active">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white">
<i class="mdi mdi-calendar-check font-size-20"></i>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Upcomming event added</h4>
<p class="last-msg font-size-14">03/Jan/2020 (1pm -
2pm)</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 10 min
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
<i class="mdi mdi-chart-areaspline font-size-20"></i>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">New Sales report</h4>
<p class="last-msg font-size-14">Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Nam
itaque doloremque odio, eligendi delectus vitae.
</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 1 hrs
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
<i class="mdi mdi-account-multiple-check font-size-20"></i>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">New Request</h4>
<p class="last-msg font-size-14">Add Dany Jones as
your contact consequat nec imperdiet ex rutrum.
Fusce et vehicula enim. Sed in enim.</p>
<span class="my-1 btn btn-sm btn-success">Accept</span>
<span class="my-1 btn btn-sm btn-secondary">Delete</span>
<span class="font-size-12 font-weight-medium text-secondary d-block">
<i class="mdi mdi-clock-outline"></i> 5 min
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-danger text-white">
<i class="mdi mdi-server-network-off font-size-20"></i>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">Server overloaded</h4>
<p class="last-msg font-size-14">Donec mattis augue
a nisl consequat, nec imperdiet ex rutrum. Fusce
et vehicula enim. Sed in enim eu odio vehic.</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 30 min
ago...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="javscript:void(0)" class="media media-message media-notification">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-purple text-white">
<i class="mdi mdi-playlist-check font-size-20"></i>
</div>
<div class="media-body d-flex justify-content-between">
<div class="message-contents">
<h4 class="title">New Task complete</h4>
<p class="last-msg font-size-14">Nam ut nisi erat.
Ut quis tortor varius, hendrerit arcu quis,
congue nisl. In scelerisque, sem ut ve.</p>
<span class="font-size-12 font-weight-medium text-secondary">
<i class="mdi mdi-clock-outline"></i> 2 hrs
ago...
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<ul class="dropdown-menu dropdown-menu-right d-none">
<li class="dropdown-header">You have 5 notifications</li>
<li>
<a href="#">
<i class="mdi mdi-account-plus"></i> New user registered
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-account-remove"></i> User deleted
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 07 AM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-chart-areaspline"></i> Sales report is ready
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 12 PM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-account-supervisor"></i> New client
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-server-network-off"></i> Server overloaded
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 05 AM</span>
</a>
</li>
<li class="dropdown-footer">
<a class="text-center" href="#"> View All </a>
</li>
</ul>
</li>
<li class="right-sidebar-in right-sidebar-2-menu">
<i class="mdi mdi-settings-outline mdi-spin"></i>
</li>
</ul>
</div>
</nav>
</header>
<!-- CONTENT WRAPPER -->
<div class="ec-content-wrapper ec-vendor-wrapper">
<div class="content">
<div class="breadcrumb-wrapper d-flex align-items-center justify-content-between">
<div>
<h1>Vendor Cards</h1>
<p class="breadcrumbs"><span><a href="index.php">Home</a></span><span><i class="mdi mdi-chevron-right"></i></span> Vendors</p>
</div>
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-add-member">Add Vendor
</button>
</div>
</div>
<div class="card card-default p-4 ec-card-space">
<div class="ec-vendor-card mt-m-24px row">
<?php
$vendors = vendorList();
$totalVendors = count($vendors);
$vendorsPerPage = 20;
$totalPages = ceil($totalVendors / $vendorsPerPage);
$currentpage = isset($_GET['page']) ? $_GET['page'] : 1;
$start = ($currentpage - 1) * $vendorsPerPage;
$end = $start + $vendorsPerPage - 1;
// $vendors = vendorList();
for ($x = $start; $x <= $end && $x < $totalVendors; $x++) {
$vendor = $vendors[$x];
?>
<div class="col-lg-6 col-xl-4 col-xxl-3">
<div class="card card-default mt-24px">
<a href="javascript:0" data-bs-toggle="modal" data-bs-target="#modal-contact-<?php echo $vendor['_id']; ?>" class="view-detail me-auto">
<i class="mdi mdi-eye-plus-outline"></i>
</a>
<a onclick="deleteVendor('<?php echo $vendor['_id'] ?>')" style="margin-top:25px;" class="view-detail me-auto">
<i class="mdi mdi mdi-delete-outline"></i>
</a>
<div class="vendor-info card-body text-center p-4">
<a href="vendor-profile.php?id=<?php echo $vendor["_id"] ?>" class="text-secondary d-inline-block mb-3">
<div class="image mb-3">
<?php
if (isset($vendor['vendor_image']) && !empty($vendor['vendor_image'])) {
echo '<img src="' . $vendor['vendor_image'] . '" class="img-fluid rounded-circle" alt="Avatar Image" style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%;"> ';
} else {
echo '<img src="assets/img/vendor/u1.jpg" class="img-fluid rounded-circle" alt="Placeholder Image">';
}
?>
</div>
<h5 class="card-title text-dark"><?php echo $vendor['user_login']; ?></h5>
<ul class="list-unstyled">
<li class="d-flex mb-1">
<i class="mdi mdi-cellphone-basic mr-1"></i>
<span>
<?php
echo isset($vendor['phone']) && !empty($vendor['phone']) ? $vendor['phone'] : 'No Number yet';
?>
</span>
</li>
<li class="d-flex">
<i class="mdi mdi-email mr-1"></i>
<span>
<?php
echo isset($vendor['user_email']) && !empty($vendor['user_email']) ? $vendor['user_email'] : 'No Email yet';
?>
</span>
</li>
</ul>
</a>
<div class="row justify-content-center ec-vendor-detail">
<div class="col-4">
<h6 class="text-uppercase">Items</h6>
<?php
$vendorId = $vendor['_id'];
$product = array_filter($products, function ($var) use ($vendorId) {
return ($var['vendor_api_id'] == $vendorId);
});
?>
<h5><?php echo count($product); ?></h5>
</div>
<div class="col-4">
<h6 class="text-uppercase">Sell</h6>
<h5>1908</h5>
</div>
<div class="col-4">
<h6 class="text-uppercase">Payout</h6>
<h5>$2691</h5>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-contact-<?php echo $vendor['_id']; ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header justify-content-end border-bottom-0">
<!-- <button type="button" class="btn-edit-icon" data-bs-dismiss="modal" aria-label="Close">
<i class="mdi mdi-pencil"></i>
</button> -->
<button type="button" class="btn-close-icon" data-bs-dismiss="modal" aria-label="Close">
<i class="mdi mdi-close"></i>
</button>
</div>
<div class="modal-body pt-0">
<div style="text-align: center; display: flex; justify-content: center; align-items: center;" class="col-md-6">
<input type="file" id="fileInput<?php echo $vendor['_id']; ?>" />
</div>
<form>
<div class="row no-gutters">
<div class="col-md-6">
<div class="profile-content-left px-4">
<div class="text-center widget-profile px-0 border-0">
<div class="card-body">
<div class="form-group">
<label for="user_login-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Name</label>
<input type="text" class="form-control" id="user_login-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['user_login']; ?>">
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="firstName-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Contact First Name</label>
<input type="text" class="form-control" id="firstName-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['first_name']; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lasttName-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Contact Last Name</label>
<input type="text" class="form-control" id="lastName-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['last_name']; ?>">
</div>
</div>
</div>
<div class="form-group">
<label for="email-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Email address</label>
<div id="email-error-message-<?php echo $vendor['_id']; ?>" class="text-danger" style="color: red;"></div>
<input type="text" class="form-control" id="email-<?php echo $vendor['_id']; ?>" oninput="validateEmail('<?php echo $vendor['_id']; ?>')" value="<?php echo $vendor['user_email']; ?>">
</div>
<div class="form-group">
<label for="phone-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Phone</label>
<input type="text" class="form-control" id="phone-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['phone']; ?>">
</div>
<div class="form-group">
<label for="description-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Vendor Description</label>
<input type="text" class="form-control" id="description-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['vendor_description']; ?>">
</div>
<div class="form-group">
<label for="status-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Vendor Status</label>
<!-- <input type="text" class="form-control" id="status-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['status']; ?>"> -->
<select class="form-select" name="status" id="status-<?php echo $vendor['_id']; ?>">
<option value="">Select Product Status</option>
<option value="Active" <?php echo ($vendor['status'] === 'Active') ? 'selected' : ''; ?>>Active</option>
<option value="Inactive" <?php echo ($vendor['status'] === 'Inactive') ? 'selected' : ''; ?>>Inactive</option>
</select>
</div>
<!-- <p>john.example@gmail.com</p>
<a class="btn btn-primary btn-pill my-3" href="#">Follow</a> -->
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="contact-info px-4">
<h4 class="text-dark mb-1">Address</h4>
<div class="form-group">
<label for="address_1-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Building Name, Number</label>
<input type="text" class="form-control" id="address_1-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['address'][0]['address_1']; ?>">
</div>
<div class="form-group">
<label for="address_2-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Street</label>
<input type="text" class="form-control" id="address_2-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['address'][0]['address_2']; ?>">
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="barangay-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Barangay</label>
<input type="text" class="form-control" id="barangay-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['address'][0]['barangay']; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="city-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">City</label>
<input type="text" class="form-control" id="city-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['address'][0]['city']; ?>">
</div>
</div>
</div>
<div class="form-group">
<label for="province-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Province</label>
<input type="text" class="form-control" id="province-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['address'][0]['province']; ?>">
</div>
<div class="form-group">
<label for="country-<?php echo $vendor['_id']; ?>" class="text-dark font-weight-medium pt-3 mb-2">Country</label>
<input type="text" class="form-control" id="country-<?php echo $vendor['_id']; ?>" value="<?php echo $vendor['address'][0]['country']; ?>">
</div>
<!-- <button type="button" class="btn btn-primary btn-pill my-3" onclick="uploadImage('<?php echo $vendor['_id']; ?>')">Update</button> -->
<!-- <button type="button" class="btn btn-primary btn-pill my-3" onclick="updateVendor('<?php echo $vendor['_id']; ?>')">Update</button> -->
</div>
</div>
</div>
</form>
<button type="button" class="btn btn-primary btn-pill my-3" onclick="uploadFile('<?php echo $vendor['_id']; ?>')">Upload</button>
</div>
</div>
</div>
</div>
<script>
function deleteVendor(vendorId){
let text = "Please confirm delete action!\nClick OK or Cancel button.";
if (confirm(text) == true) {
window.open("vendor-delete-action.php?id=" + vendorId, "_self");
}
}
function uploadFile(vendorId) {
validateEmail(vendorId).then(isEmailAvailable => {
if (!isEmailAvailable) {
// Display an error message and prevent form submission
$('#email-error-message-' + vendorId).text('Email is already in use').show();
} else {
// Proceed with form submission
$('#email-error-message-' + vendorId).text('').hide();
// Rest of the code for file upload and API request
var fileInput = document.getElementById('fileInput' + vendorId);
var file = fileInput.files[0];
const updatedUser = document.getElementById('user_login-' + vendorId).value;
const firstName = document.getElementById('firstName-' + vendorId).value;
const lastName = document.getElementById('lastName-' + vendorId).value;
const updatedEmail = document.getElementById('email-' + vendorId).value;
const phone = document.getElementById('phone-' + vendorId).value;
const description = document.getElementById('description-' + vendorId).value;
const status = document.getElementById('status-' + vendorId).value;
const updatedAddress1 = document.getElementById('address_1-' + vendorId).value;
const updatedAddress2 = document.getElementById('address_2-' + vendorId).value;
const barangay = document.getElementById('barangay-' + vendorId).value;
const city = document.getElementById('city-' + vendorId).value;
const province = document.getElementById('province-' + vendorId).value;
const country = document.getElementById('country-' + vendorId).value;
// Check if a file is selected for upload
if (file) {
var formData = new FormData();
formData.append('image_id', vendorId);
formData.append('category', 'vendor');
formData.append('image', file);
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
2024-02-12 10:35:09 +08:00
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
return response.json();
} else {
console.error('File upload failed');
throw new Error('File upload failed');
}
})
.then(result => {
const filename = result.filename;
const payload = {
vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
2024-02-12 10:35:09 +08:00
user_login: updatedUser,
first_name: firstName,
last_name: lastName,
user_email: updatedEmail,
phone: phone,
vendor_description: description,
status: status,
address: [{
address_1: updatedAddress1,
address_2: updatedAddress2,
barangay: barangay,
city: city,
province: province,
country: country,
}]
};
// Make another API request using the extracted filename
return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
2024-02-12 10:35:09 +08:00
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
})
.then(secondResponse => {
if (secondResponse.ok) {
console.log('Second request successful');
location.reload();
} else {
console.error('Second request failed');
}
})
.catch(error => {
console.error('Error during fetch:', error);
});
} else {
// If no file selected, only update the email
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
2024-02-12 10:35:09 +08:00
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
user_login: updatedUser,
first_name: firstName,
last_name: lastName,
user_email: updatedEmail,
vendor_description: description,
status: status,
phone: phone,
address: [{
address_1: updatedAddress1,
address_2: updatedAddress2,
barangay: barangay,
city: city,
province: province,
country: country,
}]
})
})
.then(response => {
if (response.ok) {
console.log('Email update successful');
location.reload();
} else {
console.error('Email update failed');
}
})
.catch(error => {
console.error('Error during fetch:', error);
});
}
}
});
}
function validateEmail(vendorId) {
var emailInput = document.getElementById('email-' + vendorId);
var email = emailInput.value;
if (email.trim() !== '') {
return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/search?q=' + email)
2024-02-12 10:35:09 +08:00
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Failed to check email availability');
}
})
.then(data => {
const isEmailAvailable = parseInt(data.results.length) === 0;
$('#email-error-message-' + vendorId).text(isEmailAvailable ? '' : 'Email is already in use').show();
return isEmailAvailable;
})
.catch(error => {
console.error('Error during email validation:', error);
return false;
});
} else {
$('#email-error-message-' + vendorId).text('').hide();
return Promise.resolve(true);
}
}
</script>
<!-- <script>
function uploadImage(vendorId) {
// Get the file input element
const fileInput = document.getElementById('user-image-file');
// Add an event listener to the input element
fileInput.addEventListener('change', function () {
// Get the selected file
const selectedFile = fileInput.files[0];
// Display the file details (you can remove this part if not needed)
console.log('Selected File:', selectedFile);
console.log('File Name:', selectedFile.name);
console.log('File Size:', selectedFile.size);
console.log('File Type:', selectedFile.type);
// Store the file values in variables or use them as needed
const fileName = selectedFile.name;
const fileSize = selectedFile.size;
const fileType = selectedFile.type;
// You can do further processing with the file, such as uploading it to a server
// or displaying a preview on the client side.
});
// Create a FormData object to send the file as multipart/form-data
// var formData = new FormData();
// formData.append('image_Id', vendorId);
// formData.append('category', "vendor");
// formData.append('image', fileInput.files[0]);
// Make AJAX request to the API
// $.ajax({
// url: 'https://api.obanana.shop/api/v1/upload_image',
// type: 'POST',
// data: formData,
// processData: false,
// contentType: false,
// success: function(response) {
// // Handle the successful response from the API
// console.log('Image uploaded successfully:', response);
// // You can perform additional actions here, such as updating the UI or sending additional requests
// },
// error: function(error) {
// // Handle the error response from the API
// console.error('Error uploading image:', error);
// // You can display an error message or perform other error-handling actions
// }
// });
}
</script> -->
<!-- <script>
function uploadImage(vendorId) {
var formData = new FormData();
var fileInput = document.getElementById('user-image-file');
if (fileInput.files.length > 0) {
var file = fileInput.files[0];
console.log(fileInput.files);
}
// formData.append('image_id', '6527b593f79b5deac5ad6c68');
// formData.append('category', 'vendor');
// formData.append('image', file);
// Make an AJAX request to the API endpoint
// $.ajax({
// type: 'POST',
// url: 'https://api.obanana.shop/api/v1/upload_image',
// data: formData,
// contentType: false,
// processData: false,
// success: function(response) {
// // Handle the success response
// console.log('Image uploaded successfully:', response);
// // You can perform additional actions here if needed
// },
// error: function(error) {
// // Handle the error response
// console.error('Error uploading image:', error);
// // You can display an error message or perform other actions here
// }
// });
}
</script> -->
<!-- <script>
function updateVendor(vendorId) {
// Get values from the form elements
var email = document.getElementById('email-' + vendorId).value;
// var phone = document.getElementById('phone-' + vendorId).value;
// var birthday = document.getElementById('birthday-' + vendorId).value;
// var event = document.getElementById('event-' + vendorId).value;
// Construct the data object to be sent in the request
var data = {
user_email: email,
// phone: phone,
// birthday: birthday,
// event: event
};
// Make a PUT request to your API endpoint
fetch('https://api.obanana.shop/api/v1/vendors/' + vendorId, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
// You may need to include additional headers, such as authentication tokens
},
body: JSON.stringify(data),
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Handle the response data as needed
console.log('Vendor updated successfully', data);
// Close the modal after successful update
$('#modal-contact-' + vendorId).modal('hide');
})
.catch(error => {
// Handle errors here
console.error('Error updating vendor:', error);
});
}
</script> -->
<?php
}
?>
</div>
<!-- Ec Pagination Start -->
<div class="pagination mt-3">
<?php
for ($i = 1; $i <= $totalPages; $i++) {
echo "<a href='?page=$i' class='" . ($currentpage == $i ? 'active' : '') . "'>$i</a>";
}
?>
</div>
<!-- Ec Pagination End -->
</div>
<!-- Contact Modal -->
<div class="modal fade" id="modal-add-member" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<form action="add_vendor_action.php" method="post">
<div class="ec-vendor-block-img space-bottom-30">
<!-- <div class="ec-vendor-block-bg cover-upload">
<div class="thumb-upload">
<div class="thumb-edit">
<input type='file' id="thumbUpload01" class="ec-image-upload"
accept=".png, .jpg, .jpeg" />
<label><i class="fi-rr-edit"></i></label>
</div>
<div class="thumb-preview ec-preview">
<div class="image-thumb-preview">
<img class="image-thumb-preview ec-image-preview v-img"
src="assets/images/banner/7.jpg" alt="edit" />
</div>
</div>
</div>
</div> -->
<!-- <div class="ec-vendor-block-detail">
<div class="thumb-upload">
<div class="thumb-edit">
<input type='file' id="thumbUpload02" class="ec-image-upload"
accept=".png, .jpg, .jpeg" />
<label><i class="fi-rr-edit"></i></label>
</div>
<div class="thumb-preview ec-preview">
<div class="image-thumb-preview">
<img class="image-thumb-preview ec-image-preview v-img"
src="assets/images/vendor/5.jpg" alt="edit" />
</div>
</div>
</div>
</div> -->
<div class="ec-vendor-upload-detail">
<form class="row g-3">
<div class="col-md-12 space-t-15">
<label class="form-label">Company Name</label>
<input type="text" class="form-control" name="user_login">
</div>
<div class="row">
<div class="col-md-6 space-t-15">
<label class="form-label">First Name</label>
<input type="text" class="form-control" name="first_name">
</div>
<div class="col-md-6 space-t-15">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" name="last_name">
</div>
</div>
<div class="col-md-12 space-t-15">
<label class="form-label">About Vendor</label>
<textarea class="form-control" rows="3" name="vendor_description"></textarea>
</div>
<div class="col-md-12 space-t-15">
<label class="form-label">Building Name, Building Number</label>
<input type="text" class="form-control" name="address_1">
</div>
<div class="col-md-12 space-t-15">
<label class="form-label">Street</label>
<input type="text" class="form-control" name="address_2">
</div>
<div class="row">
<div class="col-md-6 space-t-15">
<label class="form-label">Barangay</label>
<input type="text" class="form-control" name="barangay">
</div>
<div class="col-md-6 space-t-15">
<label class="form-label">City</label>
<input type="text" class="form-control" name="city">
</div>
<div class="col-md-6 space-t-15">
<label class="form-label">Province</label>
<input type="text" class="form-control" name="province">
</div>
<div class="col-md-6 space-t-15">
<label class="form-label">Country</label>
<input type="text" class="form-control" name="country">
</div>
</div>
<div class="row">
<div class="col-md-6 space-t-15">
<label class="form-label">Email</label>
<div id="email-error-message" class="text-danger" style="color: red;"></div>
<input type="text" class="form-control" name="user_email">
</div>
<div class="col-md-6 space-t-15">
<label class="form-label">Phone</label>
<input type="text" class="form-control" name="phone">
</div>
</div>
<div class="row">
<div class="col-md-6 space-t-15">
<label class="form-label">Date Registered</label>
<input type="date" class="form-control" name="date_registered">
</div>
<div class="col-md-6 space-t-15">
<label class="form-label">Vendor Status</label>
<select class="form-select" name="status">
<option value="">Select Product Status</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Add Vendor</button>
<a href="#" class="btn btn-secondary qty_close" data-bs-dismiss="modal" aria-label="Close">Close</a>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
$('input[name="user_email"]').on('input', function() {
var email = $(this).val();
if (email.trim() !== '') {
var response;
$.ajax({
url: 'https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/search?q=' + email,
2024-02-12 10:35:09 +08:00
method: 'GET',
success: function(data) {
response = data;
if (parseInt(response.results.length) == 0) {
$('#email-error-message').text('').hide();
} else {
$('#email-error-message').text('Email is already in use').show();
}
},
error: function(xhr, status, error) {
console.error('Failed to check email availability. Status:', status, 'Error:', error);
$('#email-error-message').text('').hide();
}
});
} else {
$('#email-error-message').text('').hide();
}
});
// Prevent form submission if email is already in use
$('form').submit(function(event) {
var errorMessage = $('#email-error-message').text();
if (errorMessage !== '') {
// Email is already in use, prevent form submission
event.preventDefault();
// Display a message to the user
alert('Please input another email. The provided email is already in use.');
}
});
});
</script>
<!-- Add Contact Button -->
<div class="modal fade" id="" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm" role="document">
<div class="modal-content">
<!-- <form class="modal-header border-bottom-0">
<input type="text" class="form-control" placeholder="Search...">
</form> -->
<div class="modal-body p-0" data-simplebar style="height:320px">
<!-- <ul class="list-unstyled border-top mb-0">
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u1.jpg"
alt="Image">
<span class="status away"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Aaren</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox" checked="checked">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message ">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u2.jpg"
alt="Image">
<span class="status active"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Leon Battista</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox" checked="checked">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u3.jpg"
alt="Image">
<span class="status away"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Abriel</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u4.jpg"
alt="Image">
<span class="status active"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Emma</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u5.jpg"
alt="Image">
<span class="status away"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Emily</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u6.jpg"
alt="Image">
<span class="status"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">William</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u7.jpg"
alt="Image">
<span class="status away"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Sophia</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u8.jpg"
alt="Image">
<span class="status"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Sophia</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u1.jpg"
alt="Image">
<span class="status away"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Aaren</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u2.jpg"
alt="Image">
<span class="status"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Abby</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u3.jpg"
alt="Image">
<span class="status away"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Abriel</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u4.jpg"
alt="Image">
<span class="status active"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Emma</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u5.jpg"
alt="Image">
<span class="status"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Emily</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u6.jpg"
alt="Image">
<span class="status away"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">William</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
<li>
<div class="media media-message">
<div class="position-relative mr-3">
<img class="rounded-circle" src="assets/img/user/u7.jpg"
alt="Image">
<span class="status"></span>
</div>
<div
class="media-body d-flex justify-content-between align-items-center">
<div class="message-contents">
<h4 class="title">Sophia</h4>
<p class="last-msg">Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nam itaque doloremque
odio,
eligendi delectus vitae.</p>
</div>
<div class="control outlined control-checkbox checkbox-primary">
<input type="checkbox">
<div class="control-indicator"></div>
</div>
</div>
</div>
</li>
</ul> -->
</div>
<div class="modal-footer px-4">
<button type="button" class="btn btn-secondary btn-pill" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary btn-pill">Add new member</button>
</div>
</div>
</div>
</div>
</div> <!-- End Content -->
</div> <!-- End Content Wrapper -->
<!-- Footer -->
<footer class="footer mt-auto">
<div class="copyright bg-white">
<p>
Copyright &copy; <span id="ec-year"></span><a class="text-primary" href="https://themeforest.net/user/ashishmaraviya" target="_blank"> oBanana B2B Admin Dashboard</a>. All Rights Reserved.
</p>
</div>
</footer>
</div> <!-- End Page Wrapper -->
</div> <!-- End Wrapper -->
<!-- Common Javascript -->
<script src="assets/plugins/jquery/jquery-3.5.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/simplebar/simplebar.min.js"></script>
<script src="assets/plugins/jquery-zoom/jquery.zoom.min.js"></script>
<script src="assets/plugins/slick/slick.min.js"></script>
<!-- Option Switcher -->
<script src="assets/plugins/options-sidebar/optionswitcher.js"></script>
<!-- Ekka Custom -->
<script src="assets/js/ekka.js"></script>
</body>
</html>