<!DOCTYPE html>
<html direction="rtl" dir="rtl" style="direction: rtl">
	<!--begin::Head-->
	<head>
<base href="../" />
		<title>home</title>
		<meta charset="utf-8" />
    <base href="<?php echo $_ENV["BASE_URL"] ?>" >
		<meta name="description" content="The most advanced Bootstrap 5 Admin Theme with 40 unique prebuilt layouts on Themeforest trusted by 100,000 beginners and professionals. Multi-demo, Dark Mode, RTL support and complete React, Angular, Vue, Asp.Net Core, Rails, Spring, Blazor, Django, Express.js, Node.js, Flask, Symfony & Laravel versions. Grab your copy now and get life-time updates for free." />
		<meta name="keywords" content="metronic, bootstrap, bootstrap 5, angular, VueJs, React, Asp.Net Core, Rails, Spring, Blazor, Django, Express.js, Node.js, Flask, Symfony & Laravel starter kits, admin themes, web design, figma, web development, free templates, free admin themes, bootstrap theme, bootstrap template, bootstrap dashboard, bootstrap dak mode, bootstrap button, bootstrap datepicker, bootstrap timepicker, fullcalendar, datatables, flaticon" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta property="og:locale" content="en_US" />
		<meta property="og:type" content="article" />
		<meta property="og:title" content="Metronic - The World's #1 Selling Bootstrap Admin Template by KeenThemes" />
		<link rel="stylesheet" href="assets/fonts/Vazirmatn-font-face.css">
		<!--end::Fonts-->
		<!--begin::Vendor Stylesheets(used for this page only)-->
		<link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
		<!--end::Vendor Stylesheets-->
		<!--begin::Global Stylesheets Bundle(mandatory for all pages)-->
		<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
		<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
		<!--end::Global Stylesheets Bundle-->
		<script>// Frame-busting to prevent site from being loaded within a frame without permission (click-jacking) if (window.top != window.self) { window.top.location.replace(window.self.location.href); }</script>
	</head>
	<style>
		body {
			 font-family: 'Vazirmatn', sans-serif;
		}
	</style>
	<style>
		.custom-carousel {
			cursor: grab;
			user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		}
		.custom-carousel.grabbing {
			cursor: grabbing;
		}
		.custom-carousel img {
			user-drag: none;
			-webkit-user-drag: none;
			pointer-events: auto;
		}

	</style>
	<!--end::Head-->
	<!--begin::Body-->
	<body id="kt_app_body" data-kt-app-layout="dark-header" data-kt-app-header-fixed="true" data-kt-app-toolbar-enabled="true" class="app-default">
		<!--begin::Theme mode setup on page load-->
		<script>var defaultThemeMode = "light"; var themeMode; if ( document.documentElement ) { if ( document.documentElement.hasAttribute("data-bs-theme-mode")) { themeMode = document.documentElement.getAttribute("data-bs-theme-mode"); } else { if ( localStorage.getItem("data-bs-theme") !== null ) { themeMode = localStorage.getItem("data-bs-theme"); } else { themeMode = defaultThemeMode; } } if (themeMode === "system") { themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } document.documentElement.setAttribute("data-bs-theme", themeMode); }</script>
		<!--end::Theme mode setup on page load-->
		<!--begin::App-->
		<div class="d-flex flex-column flex-root app-root" id="kt_app_root">
			<!--begin::Page-->
			<div class="app-page flex-column flex-column-fluid" id="kt_app_page">
                <!--begin::Header-->
                <div id="kt_app_header" class="app-header" data-kt-sticky="true" data-kt-sticky-activate="{default: true, lg: true}" data-kt-sticky-name="app-header-minimize" data-kt-sticky-offset="{default: '200px', lg: '0'}" data-kt-sticky-animation="false">
                    <!--begin::Header container-->
                    <div class="app-container  container-xxl d-flex align-items-stretch justify-content-between " id="kt_app_header_container">
                        <!--begin::Header mobile toggle-->
                        <div class="d-flex align-items-center d-lg-none ms-n2 me-2" title="Show sidebar menu">
                            <div class="btn btn-icon btn-active-color-primary w-35px h-35px" id="kt_app_header_menu_toggle">
                                <i class="ki-outline ki-abstract-14 fs-2"></i>	</div>
                        </div>
                        <!--end::Header mobile toggle-->
                        <!--begin::Logo-->
                        <div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0 me-lg-15">
                            <a href="index.html">
                                <img alt="Logo" src="assets/media/my_media/logo.png" class="h-50px h-lg-80px app-sidebar-logo-default" />
                            </a>
                        </div>
                        <!--end::Logo-->
                        <!--begin::Header wrapper-->
                        <div class="d-flex align-items-stretch justify-content-between flex-lg-grow-1" id="kt_app_header_wrapper">
                            <!--begin::Menu wrapper-->
                            <div class="app-header-menu app-header-mobile-drawer align-items-stretch" data-kt-drawer="true" data-kt-drawer-name="app-header-menu" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="250px" data-kt-drawer-direction="end" data-kt-drawer-toggle="#kt_app_header_menu_toggle" data-kt-swapper="true" data-kt-swapper-mode="{default: 'append', lg: 'prepend'}" data-kt-swapper-parent="{default: '#kt_app_body', lg: '#kt_app_header_wrapper'}">
                                <!--begin::Menu-->
                                <div class="menu menu-rounded menu-column menu-lg-row my-5 my-lg-0 align-items-stretch fw-semibold px-2 px-lg-0" id="kt_app_header_menu" data-kt-menu="true">
                                    <!--begin:Menu item-->
                                    <a href="/"  class="menu-item menu-here-bg menu-lg-down-accordion me-0 me-lg-2">
                                        <!--begin:Menu link-->
                                        <span class="menu-link">
											<span class="menu-title">خانه</span>
											<span class="menu-arrow d-lg-none"></span>
										</span>
                                        <!--end:Menu link-->
                                    </a>
                                    <!--end:Menu item-->
                                    <!--begin:Menu item-->
                                    <a href="/shop"  class="menu-item menu-lg-down-accordion me-0 me-lg-2">
                                        <!--begin:Menu link-->
                                        <span class="menu-link">
											<span class="menu-title">محصولات</span>
											<span class="menu-arrow d-lg-none"></span>
										</span>
                                        <!--end:Menu link-->
                                    </a>
                                    <!--end:Menu item-->
                                    <!--begin:Menu item-->
                                    <div data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="bottom-start" class="menu-item menu-lg-down-accordion menu-sub-lg-down-indention me-0 me-lg-2">
                                        <!--begin:Menu link-->
                                        <span class="menu-link">
											<span class="menu-title">خدمات</span>
											<span class="menu-arrow d-lg-none"></span>
										</span>
                                        <!--end:Menu link-->
                                    </div>
                                    <!--end:Menu item-->
                                    <!--begin:Menu item-->
                                    <a href="/roles"  class="menu-item menu-lg-down-accordion me-0 me-lg-2">
                                        <!--begin:Menu link-->
                                        <span class="menu-link">
											<span class="menu-title">قوانین و مقررات</span>
											<span class="menu-arrow d-lg-none"></span>
										</span>
                                        <!--end:Menu link-->
                                    </a>
                                    <!--end:Menu item-->
                                    <!--begin:Menu item-->
                                    <a href="/about_us" class="menu-item menu-lg-down-accordion menu-sub-lg-down-indention me-0 me-lg-2">
                                        <!--begin:Menu link-->
                                        <span class="menu-link">
											<span class="menu-title">درباره ما</span>
											<span class="menu-arrow d-lg-none"></span>
										</span>
                                        <!--end:Menu link-->
                                    </a>
                                    <!--end:Menu item-->
                                </div>
                                <!--end::Menu-->
                            </div>
                            <!--end::Menu wrapper-->
                            <!--begin::Navbar-->
                            <div class="app-navbar flex-shrink-0">

                                <!--begin::Quick links-->
                                <div class="app-navbar-item ms-1 ms-lg-5">
                                    <!--begin::Menu wrapper-->
                                    <div class="btn btn-icon btn-custom btn-active-color-primary w-35px h-35px w-md-40px h-md-40px"
                                         data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                                         data-kt-menu-attach="parent"
                                         data-kt-menu-placement="bottom">
                                        <i class="ki-duotone ki-purchase fs-1">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </div>

                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column w-250px w-lg-325px" data-kt-menu="true">
                                        <!--begin::Heading-->
                                        <div class="d-flex flex-column flex-center bgi-no-repeat rounded-top px-9 py-10"
                                             style="background-image:url('assets/media/misc/menu-header-bg.jpg')">
                                            <h3 class="text-white fw-semibold mb-3">
                                                سبد خرید
                                            </h3>
                                            <span class="badge bg-primary text-inverse-primary py-2 px-3"><?php if ($cards){echo count($cards);}else{ echo "0";} ?> محصولات</span>
                                        </div>
                                        <!--end::Heading-->

                                        <!--begin::Cart Items-->
                                        <div class="menu-item  p-4  ">

                                            <?php
                                            if ($cards == false){
                                                echo '<span class="fs-6 text-gray-800">سبد خرید شما خالی است</span>';
                                            }else{
                                                foreach ($cards as $card) :?>
                                                    <div class="d-flex align-items-center mb-4">
                                                        <div class="symbol symbol-40px me-3">
                                                            <img src="<?php echo  $card["mData"]["image_url"] ?>" alt="<?php echo  $card["mData"]["name"] ?>" />
                                                        </div>
                                                        <div class="d-flex flex-column">
                                                            <span class="fs-6 text-gray-800"><?php echo  $card["mData"]["name"] ?></span>
                                                            <span class="fs-7 text-muted"><?php echo  $card["cardData"]["count"] ?></span>
                                                        </div>
                                                        <div class="ms-auto fs-6 text-gray-800"><?php echo number_format($card["cardData"]["price"]) ?> تومان</div>
                                                    </div>
                                                    <div class="separator separator-dashed mb-4"></div>
                                                <?php endforeach; }?>
                                        </div>
                                        <!--end::Cart Items-->

                                        <!--begin::Footer-->
                                        <div class="py-2 text-center border-top">
                                            <a href="/carts" class="btn btn-color-gray-600 btn-active-color-primary w-100">
                                                رفتن به سبد خرید
                                                <i class="ki-outline ki-arrow-left fs-5 ms-2"></i>
                                            </a>
                                        </div>
                                        <!--end::Footer-->
                                    </div>
                                    <!--end::Menu-->
                                </div>
                                <!--end::Quick links-->

                                <!--begin::User menu-->
                                <div class="app-navbar-item ms-5" id="kt_header_user_menu_toggle">
                                    <!--begin::Menu wrapper-->
                                    <div class="cursor-pointer symbol symbol-35px symbol-md-40px"
                                         data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-attach="parent"
                                         data-kt-menu-placement="bottom-end">
                                    <?php if(isset($_SESSION["user"]) and !empty($_SESSION["user"])): ?>
                                        <img class="symbol symbol-circle symbol-35px symbol-md-40px"
                                             src="<?php echo $_SESSION["user"]["pic_url"] ?>" alt="user">
                                    </div>

                                        <!--begin::User account menu-->
                                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg menu-state-color fw-semibold py-4 fs-6 w-275px"
                                             data-kt-menu="true" style="">
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <div class="menu-content d-flex align-items-center px-3">
                                                    <!--begin::Avatar-->
                                                    <div class="symbol symbol-50px me-5">
                                                        <img alt="Logo" src="<?php echo $_SESSION["user"]["pic_url"] ?>">
                                                    </div>
                                                    <!--end::Avatar-->

                                                    <!--begin::Username-->
                                                    <div class="d-flex flex-column">
                                                        <div class="fw-bold d-flex align-items-center fs-5"><?php echo $_SESSION["user"]["name"] ?>
                                                        </div>
                                                    </div>
                                                    <!--end::Username-->
                                                </div>
                                            </div>
                                            <!--end::Menu item-->

                                            <!--begin::Menu separator-->
                                            <div class="separator my-2"></div>
                                            <!--end::Menu separator-->

                                            <!--begin::Menu item-->
                                            <div class="menu-item px-5">
                                                <a href="" class="menu-link px-5">
                                                    پروفایل من
                                                </a>
                                            </div>
                                            <!--end::Menu item-->

                                            <!--begin::Menu item-->
                                            <div class="menu-item px-5">
                                                <a href="" class="menu-link px-5">
                                                    <span class="menu-text">سفارش های من</span>
                                                </a>
                                            </div>
                                            <!--end::Menu item-->
                                            <!--begin::Menu separator-->
                                            <div class="separator my-2"></div>
                                            <!--end::Menu separator-->
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                                                 data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
                                                <a href="#" class="menu-link px-5">
                <span class="menu-title position-relative">
                    مود سایت

                    <span class="ms-5 position-absolute translate-middle-y top-50 end-0">
                        <i class="ki-outline ki-night-day theme-light-show fs-2"></i>                        <i
                                class="ki-outline ki-moon theme-dark-show fs-2"></i>                    </span>
                </span>
                                                </a>

                                                <!--begin::Menu-->
                                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-150px"
                                                     data-kt-menu="true" data-kt-element="theme-mode-menu">
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3 my-0">
                                                        <a href="#" class="menu-link px-3 py-2 active" data-kt-element="mode"
                                                           data-kt-value="light">
            <span class="menu-icon" data-kt-element="icon">
                <i class="ki-outline ki-night-day fs-2"></i>            </span>
                                                            <span class="menu-title">
                روشن
            </span>
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3 my-0">
                                                        <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
            <span class="menu-icon" data-kt-element="icon">
                <i class="ki-outline ki-moon fs-2"></i>            </span>
                                                            <span class="menu-title">
                تاریک
            </span>
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3 my-0">
                                                        <a href="#" class="menu-link px-3 py-2" data-kt-element="mode"
                                                           data-kt-value="system">
            <span class="menu-icon" data-kt-element="icon">
                <i class="ki-outline ki-screen fs-2"></i>            </span>
                                                            <span class="menu-title">
                سیستم
            </span>
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->
                                                </div>
                                                <!--end::Menu-->
                                            </div>
                                            <!--end::Menu item-->
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-5">
                                                <a onclick="logout()"
                                                   class="menu-link px-5">
                                                    خروج
                                                </a>
                                            </div>
                                            <!--end::Menu item-->
                                        </div>
                                        <!--end::User account menu-->
                                    <?php else: ?>
                                        <img class="symbol symbol-circle symbol-35px symbol-md-40px"
                                         src="assets/media/avatars/blank.png" alt="user">
                                    </div>
                                        <!--begin::User account menu-->
                                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg menu-state-color fw-semibold py-4 fs-6 w-275px"
                                             data-kt-menu="true" style="">
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <div class="menu-content d-flex align-items-center px-3">
                                                    <!--begin::Avatar-->
                                                    <div class="symbol symbol-50px me-5">
                                                        <img alt="Logo" src="assets/media/avatars/blank.png">
                                                    </div>
                                                    <!--end::Avatar-->

                                                    <!--begin::Username-->
                                                    <div class="d-flex flex-column">
                                                        <div class="fw-bold d-flex align-items-center fs-5">وارد شوید
                                                        </div>
                                                    </div>
                                                    <!--end::Username-->
                                                </div>
                                            </div>
                                            <!--end::Menu item-->

                                            <!--begin::Menu separator-->
                                            <div class="separator my-2"></div>
                                            <!--end::Menu separator-->

                                            <!--begin::Menu item-->
                                            <div class="menu-item px-5">
                                                <a data-bs-toggle="modal" data-bs-target="#kt_modal_login_user" class="menu-link px-5">
                                                    ورود
                                                </a>
                                            </div>
                                            <!--end::Menu item-->

                                            <!--begin::Menu item-->
                                            <div class="menu-item px-5">
                                                <a data-bs-toggle="modal" data-bs-target="#kt_modal_new_user" class="menu-link px-5">
                                                    <span class="menu-text">ثبت نام</span>
                                                </a>
                                            </div>
                                            <!--end::Menu item-->
                                            <!--begin::Menu separator-->
                                            <div class="separator my-2"></div>
                                            <!--end::Menu separator-->
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                                                 data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
                                                <a href="#" class="menu-link px-5">
                <span class="menu-title position-relative">
                    مود سایت

                    <span class="ms-5 position-absolute translate-middle-y top-50 end-0">
                        <i class="ki-outline ki-night-day theme-light-show fs-2"></i>                        <i
                                class="ki-outline ki-moon theme-dark-show fs-2"></i>                    </span>
                </span>
                                                </a>

                                                <!--begin::Menu-->
                                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-150px"
                                                     data-kt-menu="true" data-kt-element="theme-mode-menu">
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3 my-0">
                                                        <a href="#" class="menu-link px-3 py-2 active" data-kt-element="mode"
                                                           data-kt-value="light">
            <span class="menu-icon" data-kt-element="icon">
                <i class="ki-outline ki-night-day fs-2"></i>            </span>
                                                            <span class="menu-title">
                روشن
            </span>
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3 my-0">
                                                        <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
            <span class="menu-icon" data-kt-element="icon">
                <i class="ki-outline ki-moon fs-2"></i>            </span>
                                                            <span class="menu-title">
                تاریک
            </span>
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3 my-0">
                                                        <a href="#" class="menu-link px-3 py-2" data-kt-element="mode"
                                                           data-kt-value="system">
            <span class="menu-icon" data-kt-element="icon">
                <i class="ki-outline ki-screen fs-2"></i>            </span>
                                                            <span class="menu-title">
                سیستم
            </span>
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->
                                                </div>
                                                <!--end::Menu-->
                                            </div>
                                            <!--end::Menu item-->
                                        </div>
                                        <!--end::User account menu-->
                                    <?php endif; ?>

                                    <!--end::Menu wrapper-->
                                </div>
                                <!--end::User menu-->
                            </div>
                            <!--end::Navbar-->
                        </div>
                        <!--end::Header wrapper-->
                    </div>
                    <!--end::Header container-->
                </div>
                <!--end::Header-->
				<!--begin::Wrapper-->
				<div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
					<!--begin::Main-->
					<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
						<!--begin::Content wrapper-->
						<div class="d-flex flex-column flex-column-fluid">
							<!--begin::Content-->
							<div id="kt_app_content" class="app-content flex-column-fluid">
								<!--begin::Content container-->
								<div id="kt_app_content_container" class="app-container container-xxl">
									<!--begin::Row-->
									<div class="row g-5 gx-xl-10 mb-5 mb-xl-10">
										<!--begin::Col-->
										<div class="col-xl-8">
											<!--begin::Engage widget 6-->
											<div class="card flex-grow-1 bgi-no-repeat bgi-size-contain bgi-position-x-end h-xl-100" style="background-color:#020202;background-image:url('assets/media/my_media/iphone-16-pro-black-titanium-ubile.webp')">
												<!--begin::Body-->
												<div class="card-body d-flex justify-content-between flex-column ps-xl-18">
													<!--begin::Heading-->
													<div class="mb-20 pt-xl-13">
														<!--begin::Title-->
														<h3 class="fw-bold text-white fs-3x mb-10 ms-n1">بهترین موبایل برای شما</h3>
														<!--end::Title-->
														<!--begin::Description-->
														<span class="fw-bold text-white fs-6 mb-12 d-block lh-0">با استفاده از هوش مصنوعی آک مناسب ترین موبایل برای خود را پیدا کنید</span>
														<!--end::Description-->
														<!--begin::Items-->
														<div class="d-flex align-items-center">
															<!--begin::Item-->
															<div class="d-flex align-items-center me-6">
																<!--begin::Icon-->
																<a href="#" class="me-2">
																	<i class="bi bi-play-fill text-primary fs-3"></i>
																</a>
																<!--end::Icon-->
																<!--begin::Info-->
																<span class="fw-semibold text-white fs-6">70,000+ استفاده</span>
																<!--end::Info-->
															</div>
															<!--end::Item-->
															<!--begin::Item-->
															<div class="d-flex align-items-center">
																<!--begin::Icon-->
																<a href="#" class="me-2">
																	<i class="ki-duotone ki-double-check text-primary fs-3">
																		<span class="path1"></span>
																		<span class="path2"></span>
																	</i>
																</a>
																<!--end::Icon-->
																<!--begin::Info-->
																<span class="fw-semibold text-white fs-6">68,000 تلاش موفق</span>
																<!--end::Info-->
															</div>
															<!--end::Item-->
														</div>
														<!--end::Items-->
													</div>
													<!--end::Heading-->
													<!--begin::Action-->
													<div class="mb-xl-10 mb-3">
														<a href='#' class="btn btn-primary fw-semibold me-2" data-bs-toggle="modal" data-bs-target="#kt_modal_upgrade_plan">الان شروع کنید</a>
													</div>
													<!--begin::Action-->
												</div>
												<!--end::Body-->
											</div>
											<!--end::Engage widget 6-->
										</div>
										<!--end::Col-->
										<!--begin::Col-->
										<div class="col-xl-4">
											<!--begin::Card-->
											<!--begin::Product Search Card-->
											<div class="card card-flush mt-2 shadow-sm text-white ">
												<div class="card-header">
													<h3 class="card-title fw-bold">جستجوی محصول</h3>
												</div>
												<div class="card-body">
														<div class="row mb-5">
															<!-- Product name -->
															<div class="col-md-6 mb-3 ">
																<label class="form-label fw-bold ">نام محصول</label>
																<input type="text" name="product_name" class="form-control form-control-solid" placeholder="مثلاً لپ‌تاپ دل">
															</div>

															<!-- Category -->
															<div class="col-md-6 mb-3">
																<label class="form-label  fw-bold">دسته‌بندی</label>
																<select name="category" class="form-select form-select-solid">
																	<option value="">همه دسته‌ها</option>
																	<option value="electronics">الکترونیک</option>
																	<option value="clothes">پوشاک</option>
																	<option value="home">خانه و آشپزخانه</option>
																</select>
															</div>
														</div>

														<div class="row mb-5">
															<!-- Price range -->
															<div class="col-md-12 mb-3 text-white">
																<label class="form-label fw-bold">محدوده قیمت ( میلیون تومان)</label>
																<div class="input-group">
																	<input type="number" name="price_min" class="form-control form-control-solid" placeholder="از">
																	<span class="input-group-text">-</span>
																	<input type="number" name="price_max" class="form-control form-control-solid" placeholder="تا">
																</div>
															</div>
														</div>

														<!-- Submit -->
														<div class="text-end">
															<button type="submit" class="btn btn-primary">
																جستجو کن
															</button>
														</div>
												</div>
											</div>
											<!--end::Product Search Card-->
											<!--end::Card-->
										</div>
										<!--end::Col-->
									</div>
									<!--end::Row-->
									<!--begin::Row-->
									<div class="row g-5 g-xl-10 mb-5 mb-xl-10">
										<!--begin::Col-->
										<div class="col-xl-8">
											<!--begin::New Products widget-->
											<div class="card card-flush h-xl-100">
												<!--begin::Header-->
												<div class="card-header pt-7">
													<!--begin::Title-->
													<h3 class="card-title align-items-start flex-column">
														<span class="card-label fw-bold text-gray-900">جدیدترین محصولات</span>
														<span class="text-gray-500 mt-1 fw-semibold fs-6">آخرین به‌روز رسانی: امروز</span>
													</h3>
													<!--end::Title-->
												</div>
												<!--end::Header-->

												<!--begin::Card body-->
												<div class="card-body pt-7">
													<style>
														/* افکت هاور برای کارت‌های محصول */
														.product-card {
															height: 100%;
															display: flex;
															flex-direction: column;
															transition: transform 0.3s ease, box-shadow 0.3s ease;
														}
														.product-card:hover {
															transform: translateY(-8px);
															box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
														}
														.discount-badge {
															width: 50px;
															height: 50px;
															font-size: 1.2rem;
														}
													</style>

													<!--begin::Row-->
													<div class="row g-4 mb-5">

                                                        <?php foreach ($mobiles1 as $mobile ) : ?>
                                                        <?php if ($mobile["is_off"]==1) : ?>

                                                                <!-- Galaxy S24 FE (40٪ تخفیف) -->
                                                                <div class="col-md-6 col-xxl-4">
                                                                    <div class="card position-relative product-card">
																  <span class="badge badge-danger rounded-circle position-absolute top-3 end-3 d-flex align-items-center justify-content-center discount-badge fw-bolder">
																	<?php echo $mobile["off_persent"]; ?>٪
																  </span>
                                                                        <div class="card-body d-flex flex-center flex-column pt-6 p-6">
                                                                            <div class="mb-2 w-100">
                                                                                <img src="<?php echo $mobile["image_url"] ?>"
                                                                                     alt="<?php echo $mobile["name"] ?>"
                                                                                     class="w-100 card-rounded" />
                                                                            </div>
                                                                            <a href="/product?id=<?php echo $mobile["id"] ?>" class="fs-6 text-center text-gray-800 text-hover-primary fw-bold mb-2 product-name">
                                                                                <?php echo $mobile["name"] ?>
                                                                            </a>
                                                                            <div class="fs-6 fw-semibold text-primary text-center mb-4 info-group">
                                                                                <del class="text-gray-500 me-2"><?php echo $mobile["price"] ?> تومان</del>
                                                                                <?php echo $mobile["active_price"] ?> تومان
                                                                            </div>
                                                                            <div class="d-flex align-items-center fs-6 mb-4 info-group">
                                                                                <i class="bi bi-star-fill text-warning me-1"></i>
                                                                                <i class="bi bi-star-fill text-warning me-1"></i>
                                                                                <i class="bi bi-star-fill text-warning me-1"></i>
                                                                                <i class="bi bi-star-half text-warning me-1"></i>
                                                                                <i class="bi bi-star text-warning"></i>
                                                                                <span class="text-gray-500 fw-semibold ms-2">(4.2)</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                        <?php else: ?>

                                                                <!-- Galaxy S25 Ultra -->
                                                                <div class="col-md-6 col-xxl-4">
                                                                    <div class="card product-card">
                                                                        <div class="card-body d-flex flex-center flex-column pt-6 p-6">
                                                                            <div class="mb-2 w-100">
                                                                                <img src="<?php echo $mobile["image_url"] ?>"
                                                                                     alt="<?php echo $mobile["name"] ?>"
                                                                                     class="w-100 card-rounded" />
                                                                            </div>
                                                                            <a href="/product?id=<?php echo $mobile["id"] ?>" class="fs-6 text-center text-gray-800 text-hover-primary fw-bold mb-2 product-name">
                                                                                <?php echo $mobile["name"] ?>
                                                                            </a>
                                                                            <div class="fs-6 fw-semibold text-primary text-center mb-4 info-group">
                                                                                <?php echo $mobile["price"] ?> تومان
                                                                            </div>
                                                                            <div class="d-flex align-items-center fs-6 mb-4 info-group">
                                                                                <i class="bi bi-star-fill text-warning me-1"></i>
                                                                                <i class="bi bi-star-fill text-warning me-1"></i>
                                                                                <i class="bi bi-star-fill text-warning me-1"></i>
                                                                                <i class="bi bi-star-fill text-warning me-1"></i>
                                                                                <i class="bi bi-star-fill text-warning"></i>
                                                                                <span class="text-gray-500 fw-semibold ms-2">(4.8)</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                        <?php endif; ?>
                                                        <?php endforeach; ?>
													</div>
													<!--end::Row-->
												</div>
												<!--end::Card body-->
											</div>
											<!--end::New Products widget-->
										</div>
										<!--end::Col-->
										<!--begin::Col-->
										<div class="col-xl-4">
											<!--begin::List widget 24-->
											<div class="card h-xl-100" id="kt_list_widget_24">
												<!--begin::Header-->
												<div class="card-header border-0 pt-5">
													<h3 class="card-title align-items-start flex-column">
														<span class="card-label fw-bold text-gray-800">بهترین فروشندگان</span>
														<span class="text-gray-500 mt-1 fw-bold fs-7"></span>
													</h3>
													<!--begin::Toolbar-->
													<div class="card-toolbar">
														<a href="#" class="btn btn-sm btn-light">نمایش همه</a>
													</div>
													<!--end::Toolbar-->
												</div>
												<!--end::Header-->
												<!--begin::Body-->
												<div class="card-body pt-6">
													<!--begin::Item-->
													<div class="d-flex flex-stack">
														<!--begin::Symbol-->
														<div class="symbol symbol-circle symbol-60px me-4">
															<img src="assets/media/avatars/300-28.jpg" class="" alt="" />
														</div>
														<!--end::Symbol-->
														<!--begin::Section-->
														<div class="d-flex align-items-center flex-row-fluid flex-wrap">
															<!--begin:Author-->
															<div class="flex-grow-1 me-2">
																<a href="pages/user-profile/overview.html" class="text-gray-800 text-hover-primary fs-5 fw-bolder">خانوم فلانی</a>
																<span class="text-gray-500 fw-semibold d-block fs-6">فروشنده</span>
															</div>
															<!--end:Author-->
														</div>
														<!--end::Section-->
													</div>
													<!--end::Item-->
													<!--begin::Separator-->
													<div class="separator separator-dashed my-5"></div>
													<!--end::Separator-->
													<!--begin::Item-->
													<div class="d-flex flex-stack">
														<!--begin::Symbol-->
														<div class="symbol symbol-circle symbol-60px me-4">
															<img src="assets/media/avatars/300-29.jpg" class="" alt="" />
														</div>
														<!--end::Symbol-->
														<!--begin::Section-->
														<div class="d-flex align-items-center flex-row-fluid flex-wrap">
															<!--begin:Author-->
															<div class="flex-grow-1 me-2">
																<a href="pages/user-profile/overview.html" class="text-gray-800 text-hover-primary fs-5 fw-bolder">آقای فلانی</a>
																<span class="text-gray-500 fw-semibold d-block fs-6">فروشنده</span>
															</div>
															<!--end:Author-->
															<!--begin::Follow-->

															<!--end::Follow-->
														</div>
														<!--end::Section-->
													</div>
													<!--end::Item-->
													<!--begin::Separator-->
													<div class="separator separator-dashed my-5"></div>
													<!--end::Separator-->
													<!--begin::Item-->
													<div class="d-flex flex-stack">
														<!--begin::Symbol-->
														<div class="symbol symbol-circle symbol-60px me-4">
															<img src="assets/media/avatars/300-28.jpg" class="" alt="" />
														</div>
														<!--end::Symbol-->
														<!--begin::Section-->
														<div class="d-flex align-items-center flex-row-fluid flex-wrap">
															<!--begin:Author-->
															<div class="flex-grow-1 me-2">
																<a href="pages/user-profile/overview.html" class="text-gray-800 text-hover-primary fs-5 fw-bolder">خانوم فلانی</a>
																<span class="text-gray-500 fw-semibold d-block fs-6">فروشنده</span>
															</div>
															<!--end:Author-->
														</div>
														<!--end::Section-->
													</div>
													<!--end::Item-->
													<!--begin::Separator-->
													<div class="separator separator-dashed my-5"></div>
													<!--end::Separator-->
													<!--begin::Item-->
													<div class="d-flex flex-stack">
														<!--begin::Symbol-->
														<div class="symbol symbol-circle symbol-60px me-4">
															<img src="assets/media/avatars/300-29.jpg" class="" alt="" />
														</div>
														<!--end::Symbol-->
														<!--begin::Section-->
														<div class="d-flex align-items-center flex-row-fluid flex-wrap">
															<!--begin:Author-->
															<div class="flex-grow-1 me-2">
																<a href="pages/user-profile/overview.html" class="text-gray-800 text-hover-primary fs-5 fw-bolder">آقای فلانی</a>
																<span class="text-gray-500 fw-semibold d-block fs-6">فروشنده</span>
															</div>
															<!--end:Author-->
															<!--begin::Follow-->

															<!--end::Follow-->
														</div>
														<!--end::Section-->
													</div>
													<!--end::Item-->
													<!--begin::Separator-->
													<div class="separator separator-dashed my-5"></div>
													<!--end::Separator-->
													<!--begin::Item-->
													<div class="d-flex flex-stack">
														<!--begin::Symbol-->
														<div class="symbol symbol-circle symbol-60px me-4">
															<img src="assets/media/avatars/300-28.jpg" class="" alt="" />
														</div>
														<!--end::Symbol-->
														<!--begin::Section-->
														<div class="d-flex align-items-center flex-row-fluid flex-wrap">
															<!--begin:Author-->
															<div class="flex-grow-1 me-2">
																<a href="pages/user-profile/overview.html" class="text-gray-800 text-hover-primary fs-5 fw-bolder">خانوم فلانی</a>
																<span class="text-gray-500 fw-semibold d-block fs-6">فروشنده</span>
															</div>
															<!--end:Author-->
														</div>
														<!--end::Section-->
													</div>
													<!--end::Item-->
													<!--begin::Separator-->
													<div class="separator separator-dashed my-5"></div>
													<!--end::Separator-->
													<!--begin::Item-->
													<div class="d-flex flex-stack">
														<!--begin::Symbol-->
														<div class="symbol symbol-circle symbol-60px me-4">
															<img src="assets/media/avatars/300-29.jpg" class="" alt="" />
														</div>
														<!--end::Symbol-->
														<!--begin::Section-->
														<div class="d-flex align-items-center flex-row-fluid flex-wrap">
															<!--begin:Author-->
															<div class="flex-grow-1 me-2">
																<a href="pages/user-profile/overview.html" class="text-gray-800 text-hover-primary fs-5 fw-bolder">آقای فلانی</a>
																<span class="text-gray-500 fw-semibold d-block fs-6">فروشنده</span>
															</div>
															<!--end:Author-->
															<!--begin::Follow-->

															<!--end::Follow-->
														</div>
														<!--end::Section-->
													</div>
													<!--end::Item-->
													<!--begin::Separator-->
													<div class="separator separator-dashed my-5"></div>
													<!--end::Separator-->
													<!--begin::Item-->
													<div class="d-flex flex-stack">
														<!--begin::Symbol-->
														<div class="symbol symbol-circle symbol-60px me-4">
															<img src="assets/media/avatars/300-28.jpg" class="" alt="" />
														</div>
														<!--end::Symbol-->
														<!--begin::Section-->
														<div class="d-flex align-items-center flex-row-fluid flex-wrap">
															<!--begin:Author-->
															<div class="flex-grow-1 me-2">
																<a href="pages/user-profile/overview.html" class="text-gray-800 text-hover-primary fs-5 fw-bolder">خانوم فلانی</a>
																<span class="text-gray-500 fw-semibold d-block fs-6">فروشنده</span>
															</div>
															<!--end:Author-->
														</div>
														<!--end::Section-->
													</div>
													<!--end::Item-->
													<!--begin::Separator-->
													<div class="separator separator-dashed my-5"></div>
													<!--end::Separator-->
													<!--begin::Item-->
													<div class="d-flex flex-stack">
														<!--begin::Symbol-->
														<div class="symbol symbol-circle symbol-60px me-4">
															<img src="assets/media/avatars/300-29.jpg" class="" alt="" />
														</div>
														<!--end::Symbol-->
														<!--begin::Section-->
														<div class="d-flex align-items-center flex-row-fluid flex-wrap">
															<!--begin:Author-->
															<div class="flex-grow-1 me-2">
																<a href="pages/user-profile/overview.html" class="text-gray-800 text-hover-primary fs-5 fw-bolder">آقای فلانی</a>
																<span class="text-gray-500 fw-semibold d-block fs-6">فروشنده</span>
															</div>
															<!--end:Author-->
															<!--begin::Follow-->

															<!--end::Follow-->
														</div>
														<!--end::Section-->
													</div>
													<!--end::Item-->

												</div>
												<!--end::Body-->
											</div>
											<!--end::List widget 24-->
										</div>
										<!--end::Col-->
									</div>
									<!--end::Row-->
									<!--begin::Row-->
									<!-- 2) سربرگ بخش -->
									<div class="d-flex align-items-center justify-content-between mb-6">
										<h3 class="fs-3 fw-bold"> شگفت انگیز های امروز</h3>
										<a href="/all-products" class="fs-6 fw-semibold text-primary d-flex align-items-center">
											مشاهده همه
											<i class="bi bi-arrow-left ms-2"></i>
										</a>
									</div>
									<!-- 3) کاروسل فقط با کشیدن موس -->
									<div class="position-relative mb-10">
										<div
												class="custom-carousel d-flex align-items-center overflow-auto gap-4 pe-2"
												style="cursor: grab;">

                                            <?php foreach ($mobiles2 as $mobile ) : ?>
                                                <?php if ($mobile["is_off"]==1) : ?>

                                                    <div class="card product-card position-relative card-hoverable shadow-sm rounded-4 flex-shrink-0" style="width:240px;">
                                                          <span class="badge badge-danger rounded-circle position-absolute top-3 end-3 d-flex align-items-center justify-content-center"
                                                                style="width:50px;height:50px;font-size:1.2rem;font-weight:900;"><?php echo $mobile["off_persent"] ?>٪</span>
                                                        <div class="card-body d-flex flex-column p-6 h-100">
                                                            <img src="<?php echo $mobile["image_url"] ?>"
                                                                 class="w-100 card-rounded mb-4"
                                                                 alt="<?php echo $mobile["name"] ?>"
                                                                 draggable="false" />
                                                            <a href="/product?id=<?php echo $mobile["id"] ?>" class="fs-6 text-gray-800 text-hover-primary fw-bold mb-2 text-center product-name">
                                                                <?php echo $mobile["name"] ?>
                                                            </a>
                                                            <div class="mt-auto text-center">
                                                                <div class="fs-6 fw-semibold text-primary mb-2">
                                                                    <del class="text-gray-500 me-2"><?php echo $mobile["active_price"] ?></del><?php echo $mobile["price"] ?>تومان
                                                                </div>
                                                                <div class="d-flex justify-content-center fs-6">
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-half text-warning me-1"></i>
                                                                    <i class="bi bi-star text-warning"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>


                                                <?php else: ?>

                                                    <div class="card product-card card-hoverable shadow-sm rounded-4 flex-shrink-0" style="width:240px;">
                                                        <div class="card-body d-flex flex-column p-6 h-100">
                                                            <img src="<?php echo $mobile["image_url"] ?>"
                                                                 class="w-100 card-rounded mb-4"
                                                                 alt="<?php echo $mobile["name"] ?>"
                                                                 draggable="false" />
                                                            <a href="/product?id=<?php echo $mobile["id"] ?>" class="fs-6 text-gray-800 text-hover-primary fw-bold mb-2 text-center product-name">
                                                                <?php echo $mobile["name"] ?>
                                                            </a>
                                                            <div class="mt-auto text-center">
                                                                <div class="fs-6 fw-semibold text-primary mb-2"><?php echo $mobile["price"] ?> تومان </div>
                                                                <div class="d-flex justify-content-center fs-6">
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                <?php endif; ?>
                                            <?php endforeach; ?>

											<!-- 4) دکمه دایره‌ای کوچک «مشاهده همه» -->
											<div class="flex-shrink-0 d-flex align-items-center justify-content-center" style="width:50px; height:50px;">
												<a href="/all-products"
												   class="bg-light rounded-circle d-flex align-items-center justify-content-center shadow-sm text-primary"
												   style="width:100%; height:100%;">
													<i class="ki-outline text-primary ki-arrow-left fs-2 fw-bold"></i>
												</a>
											</div>

										</div>
									</div>
									<!--end::Row-->
									<!--begin::Row-->
									<!-- بخش برندها با کارت‌های بزرگ‌تر، شعاع بیشتر و لوگوهای متناسب -->
									<div class="row gx-4 gy-4 justify-content-center mb-10">
										<!-- Xiaomi -->
										<div class="col-3">
											<div class="card product-card bg-light shadow-sm rounded-4 card-hoverable h-100 min-h-250px">
												<div class="card-body p-6 d-flex align-items-center justify-content-center">
													<img src="assets/media/my_media/xiaomi-33317.png"
														 alt="Xiaomi"
														 class="img-fluid w-150px" />
												</div>
											</div>
										</div>

										<!-- Samsung -->
										<div class="col-3">
											<div class="card product-card bg-light shadow-sm rounded-4 card-hoverable h-100 min-h-250px">
												<div class="card-body p-6 d-flex align-items-center justify-content-center">
													<img src="assets/media/my_media/0b9772adeb7c3fbf5e7e56e0af14fe34.png"
														 alt="Samsung"
														 class="img-fluid w-150px" />
												</div>
											</div>
										</div>

										<!-- Apple -->
										<div class="col-3">
											<div class="card product-card bg-light shadow-sm rounded-4 card-hoverable h-100 min-h-250px min-w-200px">
												<div class="card-body p-6 d-flex align-items-center justify-content-center">
													<img src="assets/media/my_media/vecteezy_apple_1199813.png"
														 alt="Apple"
														 class="img-fluid w-100px" />
												</div>
											</div>
										</div>
										<!-- Other Brands -->
										<div class="col-3">
											<div class="card product-card bg-light shadow-sm rounded-4 card-hoverable h-100 min-h-250px">
												<div class="card-body p-6 d-flex align-items-center justify-content-center">
													<span class="fs-2 fw-semibold text-gray-600 text-center">
													   Other Brands<br>...
													</span>
												</div>
											</div>
										</div>
									</div>
									<!--end::Row-->
									<!--begin::Row-->
									<!-- 2) سربرگ بخش -->
									<div class="d-flex align-items-center justify-content-between mb-6">
										<h3 class="fs-3 fw-bold">همه محصولات</h3>
										<a href="/all-products" class="fs-6 fw-semibold text-primary d-flex align-items-center">
											مشاهده همه
											<i class="bi bi-arrow-left ms-2"></i>
										</a>
									</div>
									<!-- 3) کاروسل فقط با کشیدن موس -->
									<div class="position-relative mb-4">
										<div
											 class=" custom-carousel d-flex align-items-center overflow-auto gap-4 pe-2"
											 style="cursor: grab;">

                                            <?php foreach ($mobiles2 as $mobile ) : ?>
                                                <?php if ($mobile["is_off"]==1) : ?>

                                                    <div class="card product-card position-relative card-hoverable shadow-sm rounded-4 flex-shrink-0" style="width:240px;">
                                                          <span class="badge badge-danger rounded-circle position-absolute top-3 end-3 d-flex align-items-center justify-content-center"
                                                                style="width:50px;height:50px;font-size:1.2rem;font-weight:900;"><?php echo $mobile["off_persent"] ?>٪</span>
                                                        <div class="card-body d-flex flex-column p-6 h-100">
                                                            <img src="<?php echo $mobile["image_url"] ?>"
                                                                 class="w-100 card-rounded mb-4"
                                                                 alt="<?php echo $mobile["name"] ?>"
                                                                 draggable="false" />
                                                            <a href="/product?id=<?php echo $mobile["id"] ?>" class="fs-6 text-gray-800 text-hover-primary fw-bold mb-2 text-center product-name">
                                                                <?php echo $mobile["name"] ?>
                                                            </a>
                                                            <div class="mt-auto text-center">
                                                                <div class="fs-6 fw-semibold text-primary mb-2">
                                                                    <del class="text-gray-500 me-2"><?php echo $mobile["active_price"] ?></del><?php echo $mobile["price"] ?>تومان
                                                                </div>
                                                                <div class="d-flex justify-content-center fs-6">
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-half text-warning me-1"></i>
                                                                    <i class="bi bi-star text-warning"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>


                                                <?php else: ?>

                                                    <div class="card product-card card-hoverable shadow-sm rounded-4 flex-shrink-0" style="width:240px;">
                                                        <div class="card-body d-flex flex-column p-6 h-100">
                                                            <img src="<?php echo $mobile["image_url"] ?>"
                                                                 class="w-100 card-rounded mb-4"
                                                                 alt="<?php echo $mobile["name"] ?>"
                                                                 draggable="false" />
                                                            <a href="/product?id=<?php echo $mobile["id"] ?>" class="fs-6 text-gray-800 text-hover-primary fw-bold mb-2 text-center product-name">
                                                                <?php echo $mobile["name"] ?>
                                                            </a>
                                                            <div class="mt-auto text-center">
                                                                <div class="fs-6 fw-semibold text-primary mb-2"><?php echo $mobile["price"] ?> تومان </div>
                                                                <div class="d-flex justify-content-center fs-6">
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning me-1"></i>
                                                                    <i class="bi bi-star-fill text-warning"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                <?php endif; ?>
                                            <?php endforeach; ?>
											<!-- 4) دکمه دایره‌ای کوچک «مشاهده همه» -->
											<div class="flex-shrink-0 d-flex align-items-center justify-content-center" style="width:50px; height:50px;">
												<a href="/all-products"
												   class="bg-light rounded-circle d-flex align-items-center justify-content-center shadow-sm text-primary"
												   style="width:100%; height:100%;">
													<i class="ki-outline text-primary ki-arrow-left fs-2 fw-bold"></i>
												</a>
											</div>

										</div>
									</div>
									<!--end::Row-->
								</div>
								<!--end::Content container-->
							</div>
							<!--end::Content-->
						</div>
						<!--end::Content wrapper-->
						<!--begin::Footer-->
						<footer class="card bg-dark shadow-lg mt-10 mb-0">
							<div class="card-body py-8 px-6 px-lg-10">
								<div class="container-xxl">
									<div class="row gx-5">
										<!-- ستون اول -->
										<div class="col-6 col-md-3 mb-6">
											<h5 class="fw-bold text-white fs-5 mb-4">درباره آک شاپ</h5>
											<ul class="list-unstyled">
												<li class="mb-3"><a href="#" class="text-gray-300 text-hover-primary fs-6 fw-semibold">اتاق خبر آک شاپ</a></li>
												<li class="mb-3"><a href="#" class="text-gray-300 text-hover-primary fs-6 fw-semibold">فروش در آک شاپ</a></li>
												<li class="mb-3"><a href="#" class="text-gray-300 text-hover-primary fs-6 fw-semibold">فرصت‌های شغلی</a></li>
											</ul>
										</div>
										<!-- ستون دوم -->
										<div class="col-6 col-md-3 mb-6">
											<h5 class="fw-bold text-white fs-5 mb-4">راهنمای مشتری</h5>
											<ul class="list-unstyled">
												<li class="mb-3"><a href="#" class="text-gray-300 text-hover-primary fs-6 fw-semibold">روش‌های ارسال</a></li>
												<li class="mb-3"><a href="#" class="text-gray-300 text-hover-primary fs-6 fw-semibold">پیگیری سفارش</a></li>
												<li class="mb-3"><a href="#" class="text-gray-300 text-hover-primary fs-6 fw-semibold">روش‌های پرداخت</a></li>
											</ul>
										</div>
										<!-- ستون سوم -->
										<div class="col-6 col-md-3 mb-6">
											<h5 class="fw-bold text-white fs-5 mb-4">خدمات مشتریان</h5>
											<ul class="list-unstyled">
												<li class="mb-3"><a href="#" class="text-gray-300 text-hover-primary fs-6 fw-semibold">پشتیبانی آنلاین</a></li>
												<li class="mb-3"><a href="#" class="text-gray-300 text-hover-primary fs-6 fw-semibold">مرجوعی کالا</a></li>
												<li class="mb-3"><a href="#" class="text-gray-300 text-hover-primary fs-6 fw-semibold">سوالات متداول</a></li>
											</ul>
										</div>
										<!-- ستون چهارم -->
										<div class="col-6 col-md-3 mb-6">
											<h5 class="fw-bold text-white fs-5 mb-4">ما را دنبال کنید</h5>
											<div class="d-flex align-items-center mb-6">
												<a href="#" class="me-4"><i class="bi bi-facebook fs-4 text-gray-300 text-hover-primary"></i></a>
												<a href="#" class="me-4"><i class="bi bi-instagram fs-4 text-gray-300 text-hover-primary"></i></a>
												<a href="#" class="me-4"><i class="bi bi-twitter fs-4 text-gray-300 text-hover-primary"></i></a>
												<a href="#"><i class="bi bi-youtube fs-4 text-gray-300 text-hover-primary"></i></a>
											</div>
											<div class="fs-6 text-gray-400">
												<p class="mb-1">آدرس: تهران، خیابان مثال، پلاک ۱۲۳</p>
												<p class="mb-0">تلفن: ۰۲۱-۱۲۳۴۵۶۷۸</p>
											</div>
											<!-- نمادها درون ستون چهارم زیر متون -->
											<div class="d-flex align-items-center mt-6">
												<div class="border rounded bg-light-dark p-3 me-4">
													<img src="assets/media/my_media/logo (1).png" alt="نماد اعتماد" class="h-80px">
												</div>
												<div class="border rounded bg-light-dark p-3">
													<img src="assets/media/my_media/rezi.webp" alt="نشان ملی ثبت" class="h-80px">
												</div>
											</div>
										</div>
									</div>

									<!-- خط جداساز -->
									<div class="separator separator-dashed border-gray-600 my-4"></div>

									<!-- کپی‌رایت -->
									<div class="text-center text-gray-500 fs-6">
										© 2025 آک. تمامی حقوق محفوظ است.
									</div>
								</div>
							</div>
						</footer>
						<!--end::Footer-->
					</div>
					<!--end:::Main-->
				</div>
				<!--end::Wrapper-->
			</div>
			<!--end::Page-->
		</div>
		<!--end::App-->
		<!--begin::Scrolltop-->
		<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
			<i class="ki-duotone ki-arrow-up">
				<span class="path1"></span>
				<span class="path2"></span>
			</i>
		</div>
		<!--end::Scrolltop-->
        <!--begin::Modal - create user-->
        <a id="create_user" class=" fade hidden" data-bs-toggle="modal" data-bs-target="#kt_modal_new_user">Add New Target</a>
        <div class="modal fade" id="kt_modal_new_user" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-550px">
                <!--begin::Modal content-->
                <div class="modal-content rounded">
                    <!--begin::Modal header-->
                    <div class="modal-header pb-0 border-0 justify-content-end">
                        <!--begin::Close-->
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <i class="ki-duotone ki-cross fs-1">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--begin::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y px-30 px-lg-15 pt-0 pb-15">
                        <!--begin:Form-->
                        <!--begin::Heading-->
                        <div class="mb-13 text-center">
                            <!--begin::Title-->
                            <h1 class="mb-3">ثبت نام</h1>
                            <!--end::Title-->
                            <!--begin::Description-->
                            <!--end::Description-->
                        </div>
                        <!--end::Heading-->

                        <!--begin::Input group-->
                        <div class="row mb-5">
                            <!--begin::Col-->
                            <div class="col-md-12 fv-row">
                                <!--begin::Email-->
                                <input type="text" placeholder="نام و نام خانوادگی" id="fullName2" name="fullName" autocomplete="off" class="form-control bg-transparent" />
                                <!--end::Email-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="row mb-5">
                            <!--begin::Col-->
                            <div class="col-md-6 fv-row">
                                <!--begin::Email-->
                                <input type="text" placeholder="شماره موبایل" id="phone2" autocomplete="off" class="form-control bg-transparent" />
                                <!--end::Email-->
                            </div>
                            <!--end::Col-->
                            <!--begin::Col-->
                            <div class="col-md-6 fv-row">
                                <!--begin::Email-->
                                <input type="text" placeholder="ایمیل" id="email2" autocomplete="off" class="form-control bg-transparent" />
                                <!--end::Email-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="fv-row mb-8" data-kt-password-meter="true">
                            <!--begin::Wrapper-->
                            <div class="mb-1">
                                <!--begin::Input wrapper-->
                                <div class="position-relative mb-3">
                                    <input class="form-control bg-transparent" type="password" placeholder="رمز" id="password2" autocomplete="off" />
                                    <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
												<i class="ki-duotone ki-eye-slash fs-2"></i>
												<i class="ki-duotone ki-eye fs-2 d-none"></i>
											</span>
                                </div>
                                <!--end::Input wrapper-->
                                <!--begin::Meter-->
                                <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
                                </div>
                                <!--end::Meter-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Hint-->
                            <div class="text-muted">حداقل از هشت کارکتر استفاده کنید شامل عدد ،سمبل و حروف باشد</div>
                            <!--end::Hint-->
                        </div>
                        <!--end::Input group=-->
                        <!--begin::Actions-->
                        <div class="text-center">
                            <button onclick="sign_up()" type="submit" id="kt_sign_up_submit" class="btn btn-primary">
                                <!--begin::Indicator label-->
                                <span class="indicator-label">ثبت نام</span>
                                <!--end::Indicator label-->
                            </button>
                        </div>
                        <!--end::Actions-->
                        <!--end:Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - create user-->
        <!--begin::Modal - create user-->
        <a id="login_user" class=" fade hidden" data-bs-toggle="modal" data-bs-target="#kt_modal_login_user">Add New Target</a>
        <div class="modal fade" id="kt_modal_login_user" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-550px">
                <!--begin::Modal content-->
                <div class="modal-content rounded">
                    <!--begin::Modal header-->
                    <div class="modal-header pb-0 border-0 justify-content-end">
                        <!--begin::Close-->
                        <div id="close_model2" class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <i class="ki-duotone ki-cross fs-1">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--begin::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
                        <!--begin:Form-->
                        <!--begin::Heading-->
                        <div class="mb-13 text-center">
                            <!--begin::Title-->
                            <h1 class="mb-3">ورود کاربر</h1>
                            <!--end::Title-->
                            <!--begin::Description-->
                            <!--end::Description-->
                        </div>
                        <!--end::Heading-->

                        <!--begin::Input group-->
                        <div class="row mb-5">
                            <!--begin::Col-->
                            <div class="col-md-12 fv-row">
                                <!--begin::Email-->
                                <input type="text" placeholder="شماره موبایل" id="phone" autocomplete="off" class="form-control bg-transparent" />
                                <!--end::Email-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="fv-row mb-8" data-kt-password-meter="true">
                            <!--begin::Wrapper-->
                            <div class="mb-1">
                                <!--begin::Input wrapper-->
                                <div class="position-relative mb-3">
                                    <input class="form-control bg-transparent" type="password" placeholder="رمز" id="password" autocomplete="off" />
                                    <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
												<i class="ki-duotone ki-eye-slash fs-2"></i>
												<i class="ki-duotone ki-eye fs-2 d-none"></i>
											</span>
                                </div>
                                <!--end::Input wrapper-->
                                <div>
                                    <a onclick="document.querySelector('#create_user').click();" class="text-primary " type="submit" id="kt_sign_up_submit">
                                        اکانت ندارید ؟ ثبت نام کنید!
                                    </a>
                                </div>
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Input group=-->
                        <!--begin::Actions-->
                        <div class="text-center">
                            <button onclick="login()" type="submit" id="kt_sign_up_submit" class="btn btn-primary">
                                <!--begin::Indicator label-->
                                <span class="indicator-label">ورود</span>
                                <!--end::Indicator label-->
                            </button>
                        </div>
                        <!--end::Actions-->
                        <!--end:Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - create user-->
        <!--begin::Modal - submit user-->
        <a id="submit_user" class=" fade hidden" data-bs-toggle="modal" data-bs-target="#kt_modal_submit_user">Add New Target</a>
        <div class="modal fade" id="kt_modal_submit_user" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-550px">
                <!--begin::Modal content-->
                <div class="modal-content rounded">
                    <!--begin::Modal header-->
                    <div class="modal-header pb-0 border-0 justify-content-end">
                        <!--begin::Close-->
                        <div id="close_submit" class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <i class="ki-duotone ki-cross fs-1">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--begin::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y px-30 px-lg-15 pt-0 pb-15">
                        <!--begin:Form-->
                        <!--begin::Heading-->
                        <div class="mb-13 text-center">
                            <!--begin::Title-->
                            <h1 class="mb-3">تایید شماره موبایل</h1>
                            <!--end::Title-->
                            <!--begin::Description-->
                            <!--end::Description-->
                        </div>
                        <!--end::Heading-->

                        <!--begin::Input group-->
                        <div class="row mb-5">
                            <!--begin::Col-->
                            <div class="col-md-12 fv-row">
                                <!--begin::Email-->
                                <input type="text" placeholder="کد تایید ارسال شده" id="submitcode" name="fullName" autocomplete="off" class="form-control bg-transparent" />
                                <!--end::Email-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Actions-->
                        <div class="text-center">
                            <button onclick="submit_code()" type="submit" id="kt_sign_up_submit" class="btn btn-primary">
                                <!--begin::Indicator label-->
                                <span class="indicator-label">تایید</span>
                                <!--end::Indicator label-->
                            </button>
                        </div>
                        <!--end::Actions-->
                        <!--end:Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - submit user-->
		<!--begin::Javascript-->
		<script>var hostUrl = "assets/";</script>
		<!--begin::Global Javascript Bundle(mandatory for all pages)-->
		<script src="assets/plugins/global/plugins.bundle.js"></script>
		<script src="assets/js/scripts.bundle.js"></script>
		<!--end::Global Javascript Bundle-->
		<!--begin::Vendors Javascript(used for this page only)-->
		<script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/geodata/continentsLow.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/geodata/usaLow.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/geodata/worldTimeZonesLow.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/geodata/worldTimeZoneAreasLow.js"></script>
		<script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
		<!--end::Vendors Javascript-->
		<!--begin::Custom Javascript(used for this page only)-->
		<script src="assets/js/widgets.bundle.js"></script>
		<script src="assets/js/custom/widgets.js"></script>
		<script src="assets/js/custom/apps/chat/chat.js"></script>
		<script src="assets/js/custom/utilities/modals/upgrade-plan.js"></script>
		<script src="assets/js/custom/utilities/modals/create-app.js"></script>
		<script src="assets/js/custom/utilities/modals/users-search.js"></script>
        <script src="assets/js/myjs/ApiClient.js"></script>
		<script>
			document.querySelectorAll('.custom-carousel').forEach(carousel => {
				let isDown = false;
				let startX;
				let scrollLeft;

				carousel.addEventListener('mousedown', (e) => {
					isDown = true;
					carousel.classList.add('grabbing');
					startX = e.pageX - carousel.offsetLeft;
					scrollLeft = carousel.scrollLeft;
				});

				carousel.addEventListener('mouseleave', () => {
					isDown = false;
					carousel.classList.remove('grabbing');
				});

				carousel.addEventListener('mouseup', () => {
					isDown = false;
					carousel.classList.remove('grabbing');
				});

				carousel.addEventListener('mousemove', (e) => {
					if (!isDown) return;
					e.preventDefault(); // برای جلوگیری از انتخاب متن
					const x = e.pageX - carousel.offsetLeft;
					const walk = x - startX;
					carousel.scrollLeft = scrollLeft - walk;
				});
			});
		</script>
        <script>
            const api = new ApiClient() ;
            function sign_up(){
                fullName = document.querySelector("#fullName2").value ;
                password = document.querySelector("#password2").value ;
                email = document.querySelector("#email2").value ;
                phone = document.querySelector("#phone2").value ;

                data ={
                    "name" : fullName,
                    "email" : email ,
                    "phone" : phone ,
                    "password" : password
                }
                api.post("/api/signup", data).then(response =>{

                    if ( response.message === "Success"){
                        Swal.fire({
                            text:"کد تایید پیامک شد",
                            icon: "success",
                            confirmButtonText: "ادامه"
                        }).then(
                            () => {
                                document.querySelector("#close_model2").click();
                                document.querySelector("#submit_user").click();
                            }
                        )
                    }else{
                        Swal.fire({
                            text:response.message,
                            icon: "error",
                            confirmButtonText: "ادامه"
                        });
                    }
                }).catch(error =>{
                    console.log(error);
                    Swal.fire({
                        text: "مشکلی در ارتباط با سرور وجود دارد لطفا بعدا تلاش کنید",
                        icon: "error",
                        confirmButtonText: "ادامه"
                    });
                })
            }
            function submit_code(){
                submitcode = document.querySelector("#submitcode").value ;

                data ={
                    "code" : submitcode,
                }
                api.post("/api/check-code", data).then(response =>{

                    if ( response.message === "created"){
                        Swal.fire({
                            text:"اکانت شما ساخته شد",
                            icon: "success",
                            confirmButtonText: "ادامه"
                        }).then(
                            () => {
                                document.querySelector("#close_submit").click();
                                window.location.reload();
                            }
                        )
                    }else{
                        console.log(response);
                        Swal.fire({
                            text:response.message,
                            icon: "error",
                            confirmButtonText: "ادامه"
                        });
                    }
                }).catch(error =>{
                    console.log(error);
                    Swal.fire({
                        text: "مشکلی در ارتباط با سرور وجود دارد لطفا بعدا تلاش کنید",
                        icon: "error",
                        confirmButtonText: "ادامه"
                    });
                })
            }
            function login(){
                password = document.querySelector("#password").value ;
                phone = document.querySelector("#phone").value ;

                data ={
                    "phone" : phone,
                    "password" : password
                }
                api.post("/api/login", data).then(response =>{

                    if ( response.message === "login"){
                        Swal.fire({
                            text:"وارد شدید",
                            icon: "success",
                            confirmButtonText: "ادامه"
                        }).then(
                            () => {
                                document.querySelector("#close_model2").click();
                                window.location.reload();
                            }
                        )
                    }else{
                        console.log(response);
                        Swal.fire({
                            text:response.message,
                            icon: "error",
                            confirmButtonText: "ادامه"
                        });
                    }
                }).catch(error =>{
                    console.log(error);
                    Swal.fire({
                        text: "مشکلی در ارتباط با سرور وجود دارد لطفا بعدا تلاش کنید",
                        icon: "error",
                        confirmButtonText: "ادامه"
                    });
                })
            }
            function logout(){
                api.post("/api/logout").then(response =>{

                    if ( response.message === "Success"){
                        Swal.fire({
                            text:"با موفقیت خارج شدید",
                            icon: "success",
                            confirmButtonText: "ادامه"
                        }).then(
                            () => {
                                window.location.reload();
                            }
                        )
                    }else{
                        console.log(response);
                        Swal.fire({
                            text:response.message,
                            icon: "error",
                            confirmButtonText: "ادامه"
                        });
                    }
                }).catch(error =>{
                    console.log(error);
                    Swal.fire({
                        text: "مشکلی در ارتباط با سرور وجود دارد لطفا بعدا تلاش کنید",
                        icon: "error",
                        confirmButtonText: "ادامه"
                    });
                })
            }

        </script>
		<!--end::Custom Javascript-->
		<!--end::Javascript-->
	</body>
	<!--end::Body-->
</html>