<?php
session_start();

// Cek apakah admin sudah login
if (!isset($_SESSION['admin_id'])) {
    // Jika belum login, arahkan ke halaman login
    header("Location: login.php");
    exit;
}

// Sertakan file config untuk koneksi database
include 'config.php';

// Ambil admin_id dari session
$admin_id = $_SESSION['admin_id'];

// Query untuk mengambil email admin berdasarkan admin_id
$query = "SELECT email FROM admin_master WHERE id = :admin_id";
$stmt = $db->prepare($query);
$stmt->bindParam(':admin_id', $admin_id, PDO::PARAM_INT);
$stmt->execute();

// Ambil hasil query
$admin = $stmt->fetch(PDO::FETCH_ASSOC);

// Cek apakah email ditemukan
if ($admin) {
    $email = $admin['email'];
} else {
    echo "Admin data not found.";
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">

	<head>
		<!-- PAGE TITLE HERE -->
		<title>WorldNIC - Admin Dashboard Bootstrap HTML Template</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="author" content="DexignLab">
		<meta name="robots" content="index, follow">
		<!-- MOBILE SPECIFIC -->
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- FAVICONS ICON -->
		<link rel="shortcut icon" href="images/favicon.png">
		<link href="vendor/swiper/css/swiper-bundle.min.css" rel="stylesheet">
		<link href="vendor/datatables/css/jquery.dataTables.min.css" rel="stylesheet">
		<link href="vendor/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet">
		<link href="vendor/jqvmap/css/jqvmap.min.css" rel="stylesheet">

		<!-- STYLE CSS -->
		<link class="main-css" href="css/style.css" rel="stylesheet">

	</head>

	<body>

		<!--*******************
        Preloader start
    ********************-->
		<div id="preloader">
			<div class="loading-wave">
				<div class="loading-bar"></div>
				<div class="loading-bar"></div>
				<div class="loading-bar"></div>
				<div class="loading-bar"></div>
			</div>
		</div>

		<!--*******************
        Preloader end
    ********************-->

		<!--**********************************
        Main wrapper start
    ***********************************-->
		<div id="main-wrapper" class="show">

			<!--**********************************
            Nav header start
        ***********************************-->
			<div class="nav-header">
				<a href="index.html" class="brand-logo">
					<svg class="logo-abbr" width="35" height="35" viewBox="0 0 35 35" fill="none"
						xmlns="http://www.w3.org/2000/svg">
						<rect width="35" height="35" rx="6" fill="#0074FF" />
						<mask id="dzLogoMask" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="35"
							height="35">
							<rect width="35" height="35" rx="6" fill="#AAEEC4" />
						</mask>
						<g mask="url(#dzLogoMask)">
							<path
								d="M17.7488 30.9983L5.56445 12.5421L11.7055 10.6646L18.2944 22.2969L18.4529 22.2484L17.9258 8.76287L22.7594 7.2851L29.8755 18.7995L30.034 18.7511L28.9797 5.38336L35.1207 3.50586L35.34 25.6202L30.0706 27.2312L23.1593 16.9538L23.0009 17.0022L23.0183 29.3873L17.7488 30.9983Z"
								fill="white" />
						</g>
					</svg>
					<div class="brand-title">
						<svg width="108" height="16" viewBox="0 0 108 16" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path
								d="M4.49574 15.5L0.390625 0.954545H3.22443L5.84517 11.6435H5.98011L8.77841 0.954545H11.3565L14.1619 11.6506H14.2898L16.9105 0.954545H19.7443L15.6392 15.5H13.0398L10.1278 5.29403H10.0142L7.09517 15.5H4.49574ZM33.7873 8.22727C33.7873 9.79451 33.4937 11.1368 32.9066 12.2543C32.3242 13.367 31.5288 14.2192 30.5202 14.8111C29.5165 15.4029 28.3777 15.6989 27.104 15.6989C25.8304 15.6989 24.6893 15.4029 23.6808 14.8111C22.677 14.2145 21.8815 13.3598 21.2944 12.2472C20.712 11.1297 20.4208 9.78977 20.4208 8.22727C20.4208 6.66004 20.712 5.32008 21.2944 4.20739C21.8815 3.08996 22.677 2.23532 23.6808 1.64347C24.6893 1.05161 25.8304 0.755681 27.104 0.755681C28.3777 0.755681 29.5165 1.05161 30.5202 1.64347C31.5288 2.23532 32.3242 3.08996 32.9066 4.20739C33.4937 5.32008 33.7873 6.66004 33.7873 8.22727ZM31.1381 8.22727C31.1381 7.12405 30.9653 6.19366 30.6197 5.43608C30.2788 4.67377 29.8053 4.09848 29.1992 3.71023C28.5932 3.31723 27.8948 3.12074 27.104 3.12074C26.3133 3.12074 25.6149 3.31723 25.0089 3.71023C24.4028 4.09848 23.927 4.67377 23.5813 5.43608C23.2404 6.19366 23.07 7.12405 23.07 8.22727C23.07 9.33049 23.2404 10.2633 23.5813 11.0256C23.927 11.7831 24.4028 12.3584 25.0089 12.7514C25.6149 13.1397 26.3133 13.3338 27.104 13.3338C27.8948 13.3338 28.5932 13.1397 29.1992 12.7514C29.8053 12.3584 30.2788 11.7831 30.6197 11.0256C30.9653 10.2633 31.1381 9.33049 31.1381 8.22727ZM36.2784 15.5V0.954545H41.733C42.8504 0.954545 43.7879 1.14867 44.5455 1.53693C45.3078 1.92519 45.883 2.4697 46.2713 3.17045C46.6643 3.86648 46.8608 4.6785 46.8608 5.60653C46.8608 6.5393 46.6619 7.34896 46.2642 8.03551C45.8712 8.71733 45.2912 9.24526 44.5241 9.61932C43.7571 9.98864 42.8149 10.1733 41.6974 10.1733H37.8125V7.9858H41.3423C41.9957 7.9858 42.5308 7.89583 42.9474 7.71591C43.3641 7.53125 43.6719 7.26373 43.8707 6.91335C44.0743 6.55824 44.1761 6.12263 44.1761 5.60653C44.1761 5.09044 44.0743 4.65009 43.8707 4.28551C43.6671 3.91619 43.357 3.63684 42.9403 3.44744C42.5237 3.25331 41.9863 3.15625 41.3281 3.15625H38.9134V15.5H36.2784ZM43.7926 8.90909L47.3935 15.5H44.4531L40.9162 8.90909H43.7926ZM49.2862 15.5V0.954545H51.9212V13.2912H58.3274V15.5H49.2862ZM65.5433 15.5H60.6143V0.954545H65.6428C67.0869 0.954545 68.3274 1.24574 69.3643 1.82812C70.406 2.40578 71.2062 3.23674 71.7649 4.32102C72.3236 5.4053 72.603 6.70265 72.603 8.21307C72.603 9.72822 72.3213 11.0303 71.7578 12.1193C71.1991 13.2083 70.3918 14.044 69.3359 14.6264C68.2848 15.2088 67.0206 15.5 65.5433 15.5ZM63.2493 13.2202H65.4155C66.4287 13.2202 67.2739 13.0355 67.951 12.6662C68.6281 12.2921 69.1371 11.7358 69.478 10.9972C69.8189 10.2538 69.9893 9.32576 69.9893 8.21307C69.9893 7.10038 69.8189 6.17708 69.478 5.44318C69.1371 4.70455 68.6328 4.15294 67.9652 3.78835C67.3023 3.41903 66.4785 3.23438 65.4936 3.23438H63.2493V13.2202ZM86.9318 0.954545V15.5H85.6392L77.0455 3.3196H76.9318V15.5H75.6037V0.954545H76.8892L85.5114 13.1491H85.625V0.954545H86.9318ZM92.1271 0.954545V15.5H90.799V0.954545H92.1271ZM107.386 5.5H106.051C105.952 5.00284 105.772 4.54356 105.511 4.12216C105.256 3.69602 104.934 3.32434 104.545 3.0071C104.157 2.68987 103.717 2.44366 103.224 2.26847C102.732 2.09328 102.199 2.00568 101.626 2.00568C100.708 2.00568 99.8698 2.24479 99.1122 2.72301C98.3594 3.20123 97.7557 3.90436 97.3011 4.83239C96.8513 5.75568 96.6264 6.88731 96.6264 8.22727C96.6264 9.5767 96.8513 10.7131 97.3011 11.6364C97.7557 12.5597 98.3594 13.2604 99.1122 13.7386C99.8698 14.2121 100.708 14.4489 101.626 14.4489C102.199 14.4489 102.732 14.3613 103.224 14.1861C103.717 14.0109 104.157 13.767 104.545 13.4545C104.934 13.1373 105.256 12.7656 105.511 12.3395C105.772 11.9134 105.952 11.4517 106.051 10.9545H107.386C107.268 11.6222 107.045 12.2448 106.719 12.8224C106.397 13.3954 105.985 13.8973 105.483 14.3281C104.986 14.759 104.413 15.0952 103.764 15.3366C103.116 15.5781 102.403 15.6989 101.626 15.6989C100.405 15.6989 99.3205 15.3935 98.3736 14.7827C97.4266 14.1671 96.6832 13.3007 96.1435 12.1832C95.6084 11.0658 95.3409 9.74716 95.3409 8.22727C95.3409 6.70739 95.6084 5.38873 96.1435 4.27131C96.6832 3.15388 97.4266 2.28977 98.3736 1.67898C99.3205 1.06345 100.405 0.755681 101.626 0.755681C102.403 0.755681 103.116 0.87642 103.764 1.1179C104.413 1.35464 104.986 1.69081 105.483 2.12642C105.985 2.55729 106.397 3.05919 106.719 3.6321C107.045 4.20502 107.268 4.82765 107.386 5.5Z"
								fill="white" />
						</svg>
					</div>
				</a>
				<div class="nav-control">
					<div class="hamburger">
						<span class="line"></span><span class="line"></span><span class="line"></span>
					</div>
				</div>
			</div>
			<!--**********************************
            Nav header end
        ***********************************-->
        <?php include './page/navbar.php'; ?>
        <?php include './page/sidebar.php'; ?>
			<!--**********************************
            Content body start
        ***********************************-->
			<div class="content-body">
				<div class="container-fluid">
					<!-- Page Head -->
					<div class="page-head">
						<div class="row">
							<div class="col-sm-6 mb-sm-4 mb-3">
								<h3 class="mb-0">Good Morning, Hanuman</h3>
								<p class="mb-0">Here’s what’s happening with your store today</p>
							</div>
							<div class="col-sm-6 mb-4 text-sm-end">
								<a href="javascript:voit(0);" class="btn btn-outline-secondary">Add Task</a>
								<a href="javascript:voit(0);" class="btn btn-primary ms-2">New Project</a>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-xl-9">
							<div class="row">
								<div class="col-xl-3 col-lg-6">
									<div class="card ic-chart-card">
										<div class="card-header d-block border-0 pb-0">
											<div class="d-flex justify-content-between">
												<h6 class="mb-0">Weekly Sales</h6>
												<span class="badge badge-sm badge-success light">+2.7%</span>
											</div>
											<span class="data-value">$92k</span>
										</div>
										<div class="card-body p-0">
											<div id="handleWeeklySales" class="chart-offset"></div>
										</div>
									</div>
								</div>
								<div class="col-xl-3 col-lg-6">
									<div class="card ic-chart-card">
										<div class="card-header d-block border-0">
											<div class="d-flex justify-content-between">
												<h6 class="mb-0">Total Order</h6>
												<span class="badge badge-sm badge-info light">+7.2%</span>
											</div>
											<span class="data-value">$34.2k</span>
										</div>
										<div class="card-body p-0 pb-3">
											<div id="handleOrderChart"></div>
										</div>
									</div>
								</div>
								<div class="col-xl-3 col-lg-6">
									<div class="card ic-chart-card">
										<div class="card-header d-block border-0 pb-0">
											<div class="d-flex justify-content-between">
												<h6 class="mb-0">Market Share</h6>
												<span class="badge badge-sm badge-success light">80%</span>
											</div>
											<span class="data-value">20M</span>
										</div>
										<div class="card-body d-flex align-items-center justify-content-between py-2 pe-1">
											<div class="clearfix">
												<div class="d-flex align-items-center mb-2">
													<svg class="me-2" width="13" height="12" viewBox="0 0 13 12" fill="none"
														xmlns="http://www.w3.org/2000/svg">
														<path
															d="M6.5 0L12.6819 4.49139L10.3206 11.7586H2.6794L0.318133 4.49139L6.5 0Z"
															fill="#0074FF" />
													</svg>
													<span class="text-dark fs-13">Mobile</span>
												</div>
												<div class="d-flex align-items-center mb-2">
													<svg class="me-2" width="13" height="12" viewBox="0 0 13 12" fill="none"
														xmlns="http://www.w3.org/2000/svg">
														<path
															d="M6.5 0L12.6819 4.49139L10.3206 11.7586H2.6794L0.318133 4.49139L6.5 0Z"
															fill="#01BD9B" />
													</svg>
													<span class="text-dark fs-13">Laptop</span>
												</div>
												<div class="d-flex align-items-center mb-2">
													<svg class="me-2" width="13" height="12" viewBox="0 0 13 12" fill="none"
														xmlns="http://www.w3.org/2000/svg">
														<path
															d="M6.5 0L12.6819 4.49139L10.3206 11.7586H2.6794L0.318133 4.49139L6.5 0Z"
															fill="#738293" />
													</svg>
													<span class="text-dark fs-13">Cloths</span>
												</div>
											</div>
											<div id="handleMarketShare"></div>
										</div>
									</div>
								</div>
								<div class="col-xl-3 col-lg-6">
									<div class="card ic-chart-card">
										<div class="card-header d-block border-0 pb-0">
											<div class="d-flex justify-content-between">
												<h6 class="mb-0">New Customer</h6>
												<span class="badge badge-sm badge-success light">15%</span>
											</div>
											<span class="data-value">1.2K</span>
										</div>
										<div class="card-footer border-0 mt-auto">
											<h6>Today Customer</h6>
											<ul class="avtar-list">
												<li><img class="avatar avatar-circle borderd"
														src="images/avatar/avatar1.jpg" alt></li>
												<li><img class="avatar avatar-circle borderd"
														src="images/avatar/avatar2.jpg" alt></li>
												<li><img class="avatar avatar-circle borderd"
														src="images/avatar/avatar3.jpg" alt></li>
												<li><img class="avatar avatar-circle borderd"
														src="images/avatar/avatar4.jpg" alt></li>
												<li><img class="avatar avatar-circle borderd"
														src="images/avatar/avatar5.jpg" alt></li>
												<li><img class="avatar avatar-circle borderd"
														src="images/avatar/avatar6.jpg" alt></li>
												<li>
													<div class="avatar-label avatar-light avatar-circle">+4K</div>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="col-xl-5">
									<div class="card">
										<div class="card-header border-0 pb-0">
											<h5>People Contact</h5>
											<!-- <form action="#">
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search">
												<span class="input-group-text">
													<button type="button"><i class="flaticon-search-interface-symbol"></i></button>
												</span>
											</div>
										</form> -->
										</div>
										<div class="card-body">
											<div class="row g-2">
												<div class="col-xl-4 col-sm-4 col-6">
													<div class="avatar-card text-center border-dashed rounded px-2 py-3">
														<img class="avatar avatar-lg avatar-circle mb-2"
															src="images/avatar/avatar1.jpg" alt>
														<h6 class="mb-0">Jordana Niclany</h5>
														<span class="fs-12">jordan@mail.com</span>
													</div>
												</div>
												<div class="col-xl-4 col-sm-4 col-6">
													<div class="avatar-card text-center border-dashed rounded px-2 py-3">
														<div
															class="avatar avatar-label avatar-lg bg-success-light text-success avatar-circle mb-2 mx-auto">
															KD</div>
														<h6 class="mb-0">Jacob Jack</h5>
														<span class="fs-12">jordan@mail.com</span>
													</div>
												</div>
												<div class="col-xl-4 col-sm-4 col-6">
													<div
														class="avatar-card text-center border-dashed rounded px-2 py-3 bg-purple-light">
														<img class="avatar avatar-lg avatar-circle mb-2"
															src="images/avatar/avatar3.jpg" alt>
														<h6 class="mb-0">Sammy Nico</h5>
														<span class="fs-12">jordan@mail.com</span>
													</div>
												</div>
												<div class="col-xl-4 col-sm-4 col-6">
													<div
														class="avatar-card text-center border-dashed rounded px-2 py-3 bg-cream-light">
														<img class="avatar avatar-lg avatar-circle mb-2"
															src="images/avatar/avatar4.jpg" alt>
														<h6 class="mb-0">Gibs Gibsy</h5>
														<span class="fs-12">jordan@mail.com</span>
													</div>
												</div>
												<div class="col-xl-4 col-sm-4 col-6">
													<div class="avatar-card text-center border-dashed rounded px-2 py-3">
														<img class="avatar avatar-lg avatar-circle mb-2"
															src="images/avatar/avatar5.jpg" alt>
														<h6 class="mb-0">Sam Sammy</h5>
														<span class="fs-12">jordan@mail.com</span>
													</div>
												</div>
												<div class="col-xl-4 col-sm-4 col-6">
													<div class="avatar-card text-center border-dashed rounded px-2 py-3">
														<img class="avatar avatar-lg avatar-circle mb-2"
															src="images/avatar/avatar6.jpg" alt>
														<h6 class="mb-0">Corey Core</h5>
														<span class="fs-12">jordan@mail.com</span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-xl-3 col-md-6">
									<div class="card">
										<div class="card-body mb-0">
											<div id="redial"></div>
											<div class="redia-date text-center">
												<h4>My Progress</h4>
												<p class="mb-0">Lorem ipsum dolor sit amet, consectetur</p>
											</div>
										</div>
										<div class="card-footer text-center border-0 pt-0">
											<a href class="btn btn-primary">More Details</a>
										</div>
									</div>

								</div>
								<div class="col-xl-4 col-md-6">
									<div class="card blance">
										<div class="card-header align-items-baseline border-0 pb-0">
											<div>
												<h5 class="mb-0">Your Balance</h5>
												<h4 class="mb-0">$25,217k</h4>
											</div>
											<p class="mb-0 fs-14 ms-auto"><span class="text-success">+2.7% </span>than last
												week
												<p>
												</div>
												<div class="card-body pt-0">
													<div id="blanceChart"></div>
												</div>
											</div>

										</div>
									</div>
								</div>
								<div class="col-xl-3">
									<div class="card saller">
										<div class="card-header border-0 d-block text-white pb-0">
											<h4 class="text-white mb-0">Top Sellers</h4>
											<span>Users from all channels</span>
										</div>
										<div class="card-body">
											<div class="seller-slider">
												<div class="swiper mySwiper swiper-lr">
													<div class="swiper-wrapper">
														<div class="swiper-slide">
															<div class="card">
																<div class="card-body product">
																	<img src="images/swiper/shirt1.jpg">
																	<div class="product-imfo">
																		<div class="d-flex justify-content-between">
																			<span class="text-danger">up to 79% off</span>
																			<h6 class="font-w600">$80</h6>
																		</div>
																		<div class="d-flex justify-content-between">
																			<h6 class="font-w600">Block Tiered Dress.</h6>
																			<span><del>$95</del></span>
																		</div>
																	</div>
																</div>
															</div>
														</div>
														<div class="swiper-slide">
															<div class="card">
																<div class="card-body product">
																	<img src="images/swiper/shirt1.jpg">
																	<div class="product-imfo">
																		<div class="d-flex justify-content-between">
																			<span class="text-danger">up to 79% off</span>
																			<h6 class="font-w600">$80</h6>
																		</div>
																		<div class="d-flex justify-content-between">
																			<h6 class="font-w600">Block Tiered Dress.</h6>
																			<span><del>$95</del></span>
																		</div>
																	</div>
																</div>
															</div>
														</div>
														<div class="swiper-slide">
															<div class="card">
																<div class="card-body product">
																	<img src="images/swiper/shirt1.jpg">
																	<div class="product-imfo">
																		<div class="d-flex justify-content-between">
																			<span class="text-danger">up to 79% off</span>
																			<h6 class="font-w600">$80</h6>
																		</div>
																		<div class="d-flex justify-content-between">
																			<h6 class="font-w600">Block Tiered Dress.</h6>
																			<span><del>$95</del></span>
																		</div>
																	</div>
																</div>
															</div>
														</div>
														<div class="swiper-slide">
															<div class="card">
																<div class="card-body product">
																	<img src="images/swiper/shirt1.jpg">
																	<div class="product-imfo">
																		<div class="d-flex justify-content-between">
																			<span class="text-danger">up to 79% off</span>
																			<h6 class="font-w600">$80</h6>
																		</div>
																		<div class="d-flex justify-content-between">
																			<h6 class="font-w600">Block Tiered Dress.</h6>
																			<span><del>$95</del></span>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="product-details">
												<h4>Your Finances, safe and Secure</h4>
												<p>
													It is a long established fact that a reader will be distracted by the readable
													content of a page when looking at its layout.
												</p>
												<div class="d-flex align-items-center">
													<ul class="avtar-list">
														<li><img class="avatar avatar-circle borderd"
																src="images/avatar/avatar1.jpg" alt></li>
														<li><img class="avatar avatar-circle borderd"
																src="images/avatar/avatar2.jpg" alt></li>
														<li><img class="avatar avatar-circle borderd"
																src="images/avatar/avatar3.jpg" alt></li>
														<li><img class="avatar avatar-circle borderd"
																src="images/avatar/avatar4.jpg" alt></li>
														<li><img class="avatar avatar-circle borderd"
																src="images/avatar/avatar5.jpg" alt></li>
														<li><img class="avatar avatar-circle borderd"
																src="images/avatar/avatar6.jpg" alt></li>
														<li>
															<div class="avatar-label avatar-light avatar-circle">+4K</div>
														</li>
													</ul>
													<div class="ms-3">
														<h4 class="mb-0 ">15k+</h4>
														<span>Happy Clients</span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-xl-6">
									<div class="card overflow-hidden">
										<div class="card-header border-0 pb-0 flex-wrap">
											<div class="blance-media">
												<h5 class="mb-0">Your Balance</h5>
												<h4 class="mb-0">$25,217k <span
														class="badge badge-sm badge-success light">+2.7%</span></h4>
											</div>
											<ul class="nav nav-pills mix-chart-tab" id="pills-tab" role="tablist">
												<li class="nav-item" role="presentation">
													<button class="nav-link active" data-series="week" id="pills-week-tab"
														data-bs-toggle="pill" data-bs-target="#pills-week" type="button" role="tab"
														aria-selected="true">Week</button>
												</li>
												<li class="nav-item" role="presentation">
													<button class="nav-link" data-series="month" id="pills-month-tab"
														data-bs-toggle="pill" data-bs-target="#pills-month" type="button" role="tab"
														aria-selected="false">Month</button>
												</li>
												<li class="nav-item" role="presentation">
													<button class="nav-link" data-series="year" id="pills-year-tab"
														data-bs-toggle="pill" data-bs-target="#pills-year" type="button" role="tab"
														aria-selected="false">Year</button>
												</li>
												<li class="nav-item" role="presentation">
													<button class="nav-link" data-series="all" id="pills-all-tab"
														data-bs-toggle="pill" data-bs-target="#pills-all" type="button" role="tab"
														aria-selected="false">All</button>
												</li>
											</ul>
										</div>
										<div class="card-body p-0">
											<div id="chartBarRunning" class="pt-0"></div>
											<div class="ttl-project">
												<div class="pr-data">
													<h5>12,721</h5>
													<span>Number of Projects</span>
												</div>
												<div class="pr-data">
													<h5 class="text-primary">721</h5>
													<span>Active Projects</span>
												</div>
												<div class="pr-data">
													<h5>$2,50,523</h5>
													<span>Revenue</span>
												</div>
												<div class="pr-data">
													<h5 class="text-success">12,275h</h5>
													<span>Working Hours</span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-xl-6">
									<div class="card">
										<div class="card-header flex-wrap">
											<h4 class="mb-0">Transaction Details</h4>
											<div class="d-flex align-items-center justify-content-between transaction flex-wrap">
												<div class="input-group search-area style-1">
													<span class="input-group-text"><a href="javascript:void(0)"><i
																class="flaticon-search-interface-symbol"></i></a></span>
													<input type="text" class="form-control" placeholder="Search">
												</div>
												<a href="javascript:void(0);" class="btn">
													<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
														xmlns="http://www.w3.org/2000/svg">
														<path d="M2.66699 4.66699H13.3337" stroke="black" stroke-linecap="round"
															stroke-linejoin="round" />
														<path d="M2.66699 8L9.33366 8" stroke="black" stroke-linecap="round"
															stroke-linejoin="round" />
														<path d="M2.66699 11.333H4.00033" stroke="black" stroke-linecap="round"
															stroke-linejoin="round" />
													</svg>
													Sort By
												</a>
												<a href="javascript:void(0);" class="btn">
													<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
														xmlns="http://www.w3.org/2000/svg">
														<path
															d="M11.1594 3.33301H4.84121C3.98686 3.33301 3.52595 4.33513 4.08196 4.9838L6.42625 7.71881C6.5816 7.90005 6.66699 8.13089 6.66699 8.3696V11.3816C6.66699 11.7604 6.881 12.1067 7.21978 12.2761L7.88645 12.6094C8.55135 12.9419 9.33366 12.4584 9.33366 11.715V8.3696C9.33366 8.13089 9.41905 7.90005 9.5744 7.71881L11.9187 4.9838C12.4747 4.33513 12.0138 3.33301 11.1594 3.33301Z"
															stroke="#1C2430" stroke-linecap="round" stroke-linejoin="round" />
													</svg>
													Filter
												</a>
											</div>
										</div>
										<div class="card-body pb-2">
											<div class="table-responsive">
												<table id="transaction-tbl" class="table transaction-tbl ItemsCheckboxSec">
													<thead class="border-self">
														<tr>
															<th>
																<div class="form-check custom-checkbox ms-0">
																	<input type="checkbox" class="form-check-input checkAllInput"
																		id="checkAll" required>
																	<label class="form-check-label" for="checkAll"></label>
																</div>
																<span>ID</span>
															</th>
															<th>Date</th>
															<th>Client</th>
															<th>Payment</th>
															<th>Status</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td>
																<div class="form-check custom-checkbox">
																	<input type="checkbox" class="form-check-input"
																		id="customCheckBox33" required>
																	<label class="form-check-label" for="customCheckBox33"></label>
																</div>
																<span>129361171</span>
															</td>
															<td>
																<p class="mb-0 ms-2">18 Feb 2024</p>
															</td>
															<td class>
																<span>Rolex leo</span>
															</td>
															<td>
																<span class="text-success">$376.24</span>
															</td>
															<td class="pe-0">
																<span class="badge badge-primary light border-0">Completed</span>
															</td>
															<td>
																<div class="dropdown ms-2">
																	<div class="btn-link custome-d" data-bs-toggle="dropdown">
																		<svg width="9" height="9" viewBox="0 0 9 9" fill="none"
																			xmlns="http://www.w3.org/2000/svg">
																			<rect y="7" width="2" height="2" fill="black" />
																			<rect width="2" height="2" fill="black" />
																			<rect x="7" y="7" width="2" height="2" fill="black" />
																			<rect x="7" width="2" height="2" fill="black" />
																		</svg>
																	</div>
																	<div class="dropdown-menu dropdown-menu-right">
																		<a class="dropdown-item"
																			href="javascript:void(0)">Delete</a>
																		<a class="dropdown-item" href="javascript:void(0)">Edit</a>
																	</div>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<div class="form-check custom-checkbox">
																	<input type="checkbox" class="form-check-input"
																		id="customCheckBox33" required>
																	<label class="form-check-label" for="customCheckBox2"></label>
																</div>
																<span>129361178</span>
															</td>
															<td>
																<p class="mb-0 ms-2">18 Feb 2024</p>
															</td>
															<td class>
																<span>Jaction leo</span>
															</td>
															<td>
																<span class="text-success">$376.24</span>
															</td>
															<td class="pe-0">
																<span class="badge badge-primary light border-0">Completed</span>
															</td>
															<td>
																<div class="dropdown ms-2">
																	<div class="btn-link custome-d" data-bs-toggle="dropdown">
																		<svg width="9" height="9" viewBox="0 0 9 9" fill="none"
																			xmlns="http://www.w3.org/2000/svg">
																			<rect y="7" width="2" height="2" fill="black" />
																			<rect width="2" height="2" fill="black" />
																			<rect x="7" y="7" width="2" height="2" fill="black" />
																			<rect x="7" width="2" height="2" fill="black" />
																		</svg>
																	</div>
																	<div class="dropdown-menu dropdown-menu-right">
																		<a class="dropdown-item"
																			href="javascript:void(0)">Delete</a>
																		<a class="dropdown-item" href="javascript:void(0)">Edit</a>
																	</div>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<div class="form-check custom-checkbox">
																	<input type="checkbox" class="form-check-input"
																		id="customCheckBox33" required>
																	<label class="form-check-label" for="customCheckBox3"></label>
																</div>
																<span>129361179</span>
															</td>
															<td>
																<p class="mb-0 ms-2">18 Feb 2024</p>
															</td>
															<td class>
																<span>Rolex leo</span>
															</td>
															<td>
																<span class="text-warning">$254.24</span>
															</td>
															<td class="pe-0">
																<span class="badge badge-warning light border-0">Inprogress</span>
															</td>
															<td>
																<div class="dropdown ms-2">
																	<div class="btn-link custome-d" data-bs-toggle="dropdown">
																		<svg width="9" height="9" viewBox="0 0 9 9" fill="none"
																			xmlns="http://www.w3.org/2000/svg">
																			<rect y="7" width="2" height="2" fill="black" />
																			<rect width="2" height="2" fill="black" />
																			<rect x="7" y="7" width="2" height="2" fill="black" />
																			<rect x="7" width="2" height="2" fill="black" />
																		</svg>
																	</div>
																	<div class="dropdown-menu dropdown-menu-right">
																		<a class="dropdown-item"
																			href="javascript:void(0)">Delete</a>
																		<a class="dropdown-item" href="javascript:void(0)">Edit</a>
																	</div>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<div class="form-check custom-checkbox">
																	<input type="checkbox" class="form-check-input"
																		id="customCheckBox33" required>
																	<label class="form-check-label" for="customCheckBox3"></label>
																</div>
																<span>129361179</span>
															</td>
															<td>
																<p class="mb-0 ms-2">18 Feb 2024</p>
															</td>
															<td class>
																<span>Meview Otis</span>
															</td>
															<td>
																<span class="text-danger">$254.24</span>
															</td>
															<td class="pe-0">
																<span class="badge badge-danger light border-0">Pending</span>
															</td>
															<td>
																<div class="dropdown ms-2">
																	<div class="btn-link custome-d" data-bs-toggle="dropdown">
																		<svg width="9" height="9" viewBox="0 0 9 9" fill="none"
																			xmlns="http://www.w3.org/2000/svg">
																			<rect y="7" width="2" height="2" fill="black" />
																			<rect width="2" height="2" fill="black" />
																			<rect x="7" y="7" width="2" height="2" fill="black" />
																			<rect x="7" width="2" height="2" fill="black" />
																		</svg>
																	</div>
																	<div class="dropdown-menu dropdown-menu-right">
																		<a class="dropdown-item"
																			href="javascript:void(0)">Delete</a>
																		<a class="dropdown-item" href="javascript:void(0)">Edit</a>
																	</div>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<div class="form-check custom-checkbox">
																	<input type="checkbox" class="form-check-input"
																		id="customCheckBox33" required>
																	<label class="form-check-label" for="customCheckBox33"></label>
																</div>
																<span>129361171</span>
															</td>
															<td>
																<p class="mb-0 ms-2">18 Feb 2024</p>
															</td>
															<td class>
																<span>Rolex leo</span>
															</td>
															<td>
																<span class="text-success">$376.24</span>
															</td>
															<td class="pe-0">
																<span class="badge badge-primary light border-0">Completed</span>
															</td>
															<td>
																<div class="dropdown ms-2">
																	<div class="btn-link custome-d" data-bs-toggle="dropdown">
																		<svg width="9" height="9" viewBox="0 0 9 9" fill="none"
																			xmlns="http://www.w3.org/2000/svg">
																			<rect y="7" width="2" height="2" fill="black" />
																			<rect width="2" height="2" fill="black" />
																			<rect x="7" y="7" width="2" height="2" fill="black" />
																			<rect x="7" width="2" height="2" fill="black" />
																		</svg>
																	</div>
																	<div class="dropdown-menu dropdown-menu-right">
																		<a class="dropdown-item"
																			href="javascript:void(0)">Delete</a>
																		<a class="dropdown-item" href="javascript:void(0)">Edit</a>
																	</div>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<div class="form-check custom-checkbox">
																	<input type="checkbox" class="form-check-input"
																		id="customCheckBox33" required>
																	<label class="form-check-label" for="customCheckBox2"></label>
																</div>
																<span>129361178</span>
															</td>
															<td>
																<p class="mb-0 ms-2">18 Feb 2024</p>
															</td>
															<td class>
																<span>Jaction leo</span>
															</td>
															<td>
																<span class="text-success">$376.24</span>
															</td>
															<td class="pe-0">
																<span class="badge badge-primary light border-0">Completed</span>
															</td>
															<td>
																<div class="dropdown ms-2">
																	<div class="btn-link custome-d" data-bs-toggle="dropdown">
																		<svg width="9" height="9" viewBox="0 0 9 9" fill="none"
																			xmlns="http://www.w3.org/2000/svg">
																			<rect y="7" width="2" height="2" fill="black" />
																			<rect width="2" height="2" fill="black" />
																			<rect x="7" y="7" width="2" height="2" fill="black" />
																			<rect x="7" width="2" height="2" fill="black" />
																		</svg>
																	</div>
																	<div class="dropdown-menu dropdown-menu-right">
																		<a class="dropdown-item"
																			href="javascript:void(0)">Delete</a>
																		<a class="dropdown-item" href="javascript:void(0)">Edit</a>
																	</div>
																</div>
															</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
								<div class="col-xl-6">
									<div class="card">
										<div class="card-header border-dashed border-top-0 border-end-0 border-start-0 flex-wrap">
											<h4 class="mb-0">Best Selling Products</h4>
											<div class="d-flex align-items-center justify-content-between transaction">
												<a href="javascript:void(0);" class="btn">
													<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
														xmlns="http://www.w3.org/2000/svg">
														<path d="M2.66699 4.66699H13.3337" stroke="black" stroke-linecap="round"
															stroke-linejoin="round"></path>
														<path d="M2.66699 8L9.33366 8" stroke="black" stroke-linecap="round"
															stroke-linejoin="round"></path>
														<path d="M2.66699 11.333H4.00033" stroke="black" stroke-linecap="round"
															stroke-linejoin="round"></path>
													</svg>
													Sort By
												</a>
												<a href="javascript:void(0);" class="btn">
													<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
														xmlns="http://www.w3.org/2000/svg">
														<path
															d="M11.1594 3.33301H4.84121C3.98686 3.33301 3.52595 4.33513 4.08196 4.9838L6.42625 7.71881C6.5816 7.90005 6.66699 8.13089 6.66699 8.3696V11.3816C6.66699 11.7604 6.881 12.1067 7.21978 12.2761L7.88645 12.6094C8.55135 12.9419 9.33366 12.4584 9.33366 11.715V8.3696C9.33366 8.13089 9.41905 7.90005 9.5744 7.71881L11.9187 4.9838C12.4747 4.33513 12.0138 3.33301 11.1594 3.33301Z"
															stroke="#1C2430" stroke-linecap="round" stroke-linejoin="round"></path>
													</svg>
													Filter
												</a>
											</div>
										</div>
										<div class="card-body">
											<div class="best-selling-slider">
												<div class="swiper mySwiper1 swiper-lr">
													<div class="swiper-wrapper">
														<div class="swiper-slide">
															<div class="card">
																<div class="card-body product">
																	<img src="images/swiper/shirt2.jpg">
																	<div class="product-imfo">
																		<div class="d-flex justify-content-between">
																			<span class="text-danger">up to 79% off</span>
																			<h6 class="font-w600">$80</h6>
																		</div>
																		<div class="d-flex justify-content-between">
																			<h6 class="font-w600">Block Tiered Dress.</h6>
																			<span><del>$95</del></span>
																		</div>
																	</div>
																</div>
															</div>
														</div>
														<div class="swiper-slide">
															<div class="card">
																<div class="card-body product">
																	<img src="images/swiper/shirt1.jpg">
																	<div class="product-imfo">
																		<div class="d-flex justify-content-between">
																			<span class="text-danger">up to 79% off</span>
																			<h6 class="font-w600">$80</h6>
																		</div>
																		<div class="d-flex justify-content-between">
																			<h6 class="font-w600">Block Tiered Dress.</h6>
																			<span><del>$95</del></span>
																		</div>
																	</div>
																</div>

															</div>
														</div>
														<div class="swiper-slide">
															<div class="card">
																<div class="card-body product">
																	<img src="images/swiper/shirt2.jpg">
																	<div class="product-imfo">
																		<div class="d-flex justify-content-between">
																			<span class="text-danger">up to 79% off</span>
																			<h6 class="font-w600">$80</h6>
																		</div>
																		<div class="d-flex justify-content-between">
																			<h6 class="font-w600">Block Tiered Dress.</h6>
																			<span><del>$95</del></span>
																		</div>
																	</div>
																</div>

															</div>
														</div>
														<div class="swiper-slide">
															<div class="card">
																<div class="card-body product">
																	<img src="images/swiper/shirt1.jpg">
																	<div class="product-imfo">
																		<div class="d-flex justify-content-between">
																			<span class="text-danger">up to 79% off</span>
																			<h6 class="font-w600">$80</h6>
																		</div>
																		<div class="d-flex justify-content-between">
																			<h6 class="font-w600">Block Tiered Dress.</h6>
																			<span><del>$95</del></span>
																		</div>
																	</div>
																</div>

															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-xl-6 flag">
									<div class="card overflow-hidden">
										<div class="card-header border-0">
											<h4 class="mb-0">Active users</h4>
										</div>
										<div class="card-body pe-0">
											<div class="row">
												<div class="col-xl-8 active-map-main">
													<div id="world-map" class="active-map"></div>
												</div>
												<div class="col-xl-4 active-country dz-scroll">
													<div class>
														<div class="country-list">
															<img src="images/country/india.png" alt>
															<div class="progress-box mt-0">
																<div class="d-flex justify-content-between">
																	<p class="mb-0 c-name">India</p>
																	<p class="mb-0">50%</p>
																</div>
																<div class="progress">
																	<div class="progress-bar bg-primary"
																		style="width:60%; height:5px; border-radius:4px;"
																		role="progressbar"></div>
																</div>
															</div>
														</div>
														<div class="country-list">
															<img src="images/country/canada.png" alt>
															<div class="progress-box mt-0">
																<div class="d-flex justify-content-between">
																	<p class="mb-0 c-name">Canada</p>
																	<p class="mb-0">30%</p>
																</div>
																<div class="progress">
																	<div class="progress-bar bg-primary"
																		style="width:30%; height:5px; border-radius:4px;"
																		role="progressbar"></div>
																</div>
															</div>
														</div>
														<div class="country-list">
															<img src="images/country/russia.png" alt>
															<div class="progress-box mt-0">
																<div class="d-flex justify-content-between">
																	<p class="mb-0 c-name">Russia</p>
																	<p class="mb-0">20%</p>
																</div>
																<div class="progress">
																	<div class="progress-bar bg-primary"
																		style="width:20%; height:5px; border-radius:4px;"
																		role="progressbar"></div>
																</div>
															</div>
														</div>
														<div class="country-list">
															<img src="images/country/uk.png" alt>
															<div class="progress-box mt-0">
																<div class="d-flex justify-content-between">
																	<p class="mb-0 c-name">United Kingdom</p>
																	<p class="mb-0">40%</p>
																</div>
																<div class="progress">
																	<div class="progress-bar bg-primary"
																		style="width:40%; height:5px; border-radius:4px;"
																		role="progressbar"></div>
																</div>
															</div>
														</div>
														<div class="country-list">
															<img src="images/country/aus.png" alt>
															<div class="progress-box mt-0">
																<div class="d-flex justify-content-between">
																	<p class="mb-0 c-name">Australia</p>
																	<p class="mb-0">60%</p>
																</div>
																<div class="progress">
																	<div class="progress-bar bg-primary"
																		style="width:70%; height:5px; border-radius:4px;"
																		role="progressbar"></div>
																</div>
															</div>
														</div>
														<div class="country-list">
															<img src="images/country/usa.png" alt>
															<div class="progress-box mt-0">
																<div class="d-flex justify-content-between">
																	<p class="mb-0 c-name">United States</p>
																	<p class="mb-0">20%</p>
																</div>
																<div class="progress">
																	<div class="progress-bar bg-primary"
																		style="width:80%; height:5px; border-radius:4px;"
																		role="progressbar"></div>
																</div>
															</div>
														</div>
														<div class="country-list">
															<img src="images/country/pak.png" alt>
															<div class="progress-box mt-0">
																<div class="d-flex justify-content-between">
																	<p class="mb-0 c-name">Pakistan</p>
																	<p class="mb-0">20%</p>
																</div>
																<div class="progress">
																	<div class="progress-bar bg-primary"
																		style="width:20%; height:5px; border-radius:4px;"
																		role="progressbar"></div>
																</div>
															</div>
														</div>
														<div class="country-list">
															<img src="images/country/germany.png" alt>
															<div class="progress-box mt-0">
																<div class="d-flex justify-content-between">
																	<p class="mb-0 c-name">Germany</p>
																	<p class="mb-0">80%</p>
																</div>
																<div class="progress">
																	<div class="progress-bar bg-primary"
																		style="width:80%; height:5px; border-radius:4px;"
																		role="progressbar"></div>
																</div>
															</div>
														</div>
														<div class="country-list">
															<img src="images/country/uae.png" alt>
															<div class="progress-box mt-0">
																<div class="d-flex justify-content-between">
																	<p class="mb-0 c-name">UAE</p>
																	<p class="mb-0">30%</p>
																</div>
																<div class="progress">
																	<div class="progress-bar bg-primary"
																		style="width:30%; height:5px; border-radius:4px;"
																		role="progressbar"></div>
																</div>
															</div>
														</div>
														<div class="country-list">
															<img src="images/country/china.png" alt>
															<div class="progress-box mt-0">
																<div class="d-flex justify-content-between">
																	<p class="mb-0 c-name">China</p>
																	<p class="mb-0">40%</p>
																</div>
																<div class="progress">
																	<div class="progress-bar bg-primary"
																		style="width:40%; height:5px; border-radius:4px;"
																		role="progressbar"></div>
																</div>
															</div>
														</div>

													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!--**********************************
            Footer start
        ***********************************-->
						<div class="footer">
							<div class="copyright">
								<p>Copyright © Designed &amp; Developed by <a href="https://themeforest.net/user/dexignlabs/portfolio"
										target="_blank">DexignLab</a> <span class="current-year">2024</span></p>
							</div>
						</div>
						<!--**********************************
            Footer end
        ***********************************-->

					</div>
					<!--**********************************
        Main wrapper end
    ***********************************-->

					<!--**********************************
        Scripts
    ***********************************-->
					<!-- Required vendors -->
					<script src="vendor/global/global.min.js"></script>
					<script src="vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
					<!-- Apex Chart -->
					<script src="vendor/apexchart/apexchart.js"></script>
					<script src="vendor/chart-js/chart.bundle.min.js"></script>
					<!-- Chart piety plugin files -->
					<script src="vendor/peity/jquery.peity.min.js"></script>
					<script src="vendor/datatables/js/jquery.dataTables.min.js"></script>
					<script src="js/plugins-init/datatables.init.js"></script>
					<script src="vendor/jqvmap/js/jquery.vmap.min.js"></script>
					<script src="vendor/jqvmap/js/jquery.vmap.world.js"></script>
					<script src="vendor/jqvmap/js/jquery.vmap.usa.js"></script>
					<!-- Dashboard 1 -->
					<script src="js/dashboard/dashboard-1.js"></script>
					<script src="./vendor/swiper/js/swiper-bundle.min.js"></script>
					<script src="js/custom.js"></script>
					<script src="js/ic-sidenav-init.js"></script>
		
		

					<!-- Initialize Swiper -->
					<script>
			var swiper = new Swiper(".mySwiper", {
				slidesPerView: 1.5,
				spaceBetween: 15,
				navigation: {
					nextEl: "",
					prevEl: "",
				},
				breakpoints: {
					360: {
						slidesPerView: 1.5,
						spaceBetween: 20,
					},
					768: {
						slidesPerView: 2.5,
						spaceBetween: 40,
					},
					1200: {
						slidesPerView: 1.5,
						spaceBetween: 20,
					},
				},
			});
			var swiper = new Swiper(".mySwiper1", {
				slidesPerView: 3.5,
				spaceBetween: 15,
				navigation: {
					nextEl: "",
					prevEl: "",
				},
				breakpoints: {
					360: {
						slidesPerView: 1.5,
						spaceBetween: 20,
					},
					768: {
						slidesPerView: 2.5,
						spaceBetween: 20,
					},
				},
			});
		</script>
				</body>

			</html>