<!-- section 5 -->
<?php if($this->uri->segment(2) != 'mobile') : ?>
<section id="footerNavs" class="bg-[#ECEAE7] md:absolute w-full p-8 py-10">
				<p class="text-[#514A45]/80 font-tinosRegular text-lg">
					Don’t miss a thing by subscribing to our newsletter
				</p> 
				<div
					class="flex justify-start flex-col md:flex-row items-start md:items-center mt-4"
				>
					<div class="border-b-1 border-primary/90 w-56 mr-8">
						<input
							type="email"
							required
							placeholder="Email Address"
							id="emailInput"
							class="font-tinosRegular bg-transparent border-none text-primary p-1 text-lg focus:ring-0 active:ring-0 ml-[-12px] w-56"
						/>
					</div>
					<a href="#" id="subscribe">
						<div
							class="w-40 border-1 border-primary/90 flex justify-center items-center text-primary py-1 font-custom font-light mt-4 mf:mt-0"
						>
							SUBSCRIBE
						</div>
					</a>
				</div>
				<p id="subscribeMessage" class="text-[#514A45]/80 font-tinosRegular text-lg"></p>

				<!-- navigation -->
				<div
					class="mt-8 flex justify-between items-start md:items-center flex-col md:flex-row"
				>
					<ul
						class="flex items-center space-x-0 md:space-x-24 mb-10 md:mb-0 flex-wrap md:flex-nowrap"
					>
						<li class="w-1/2 md:w-auto pb-4 pxr-1">
							<a
								href="<?= base_url('about'); ?>"
								class="font-custom text-primary/80 mt-4 md:mt-0"
								>ABOUT</a
							>
						</li>
						<li class="w-1/2 md:w-auto pb-4 pxr-1">
							<a
								href="<?= base_url('category/show-all'); ?>"
								class="font-custom text-primary/80 mt-4 md:mt-0"
								>SHOP</a
							>
						</li>
						<li class="w-1/2 md:w-auto pb-4 pxr-1">
							<a
								href="<?= base_url('customize/show-all'); ?>"
								class="font-custom text-primary/80 mt-4 md:mt-0"
								>CUSTOMIZE</a
							>
						</li>
						<li class="w-1/2 md:w-auto pb-4 pxr-1">
							<a
								href="<?= base_url('contact'); ?>"
								class="font-custom text-primary/80 mt-4 md:mt-0"
								>CONTACT</a
							>
						</li>
						<li class="w-1/2 md:w-auto pb-4 pxr-1">
							<a
								href="<?= base_url('toc'); ?>"
								class="font-custom text-primary/80 mt-4 md:mt-0"
								>TERMS & CONDITION</a
							>
						</li>
						<li class="w-1/2 md:w-auto pb-4 pxr-1">
							<a
								href="<?= base_url('privacy_policy'); ?>"
								class="font-custom text-primary/80 mt-4 md:mt-0"
								>PRIVACY POLICY</a
							>
						</li>
					</ul>
					<div class="xs:text-left md:text-right">
						<ul class="flex items-center mb-4 md:mb-8">
							<li>
								<a href="<?= base_url('account/order_history'); ?>" class="font-custom text-primary/80"
									>MY ACCOUNT</a> 
							</li>
						</ul>
						<?php if ($this->session->userdata('customer') && $this->session->userdata('customer')['customer_name']) : ?>
							<a
							href="<?= base_url('account/order_history'); ?>"
							class="font-custom text-primary/80 xs:text-left md:text-right"
							>Purchase List</a>
						<?php else : ?>
							<a
							href="<?= base_url('login'); ?>"
							class="font-custom text-primary/80 xs:text-left md:text-right"
							>Sign In</a>
						<?php endif; ?>	

					
					</div>
				</div>
			</section>
			<?php endif; ?>

			<!-- footer -->
			<!-- bottom shet -->
			<div
				id="bottomSheet"
				class="fixed bottom-0 left-0 right-0 z-50 p-8 mb-16 bg-primaryTransparent hidden md:hidden" 
			>
				<!-- Bottom Sheet content goes here -->
				<div class="flex flex-col justify-center items-center">
					<?php
						//get parent categories
						$this->db->select('alias, category, id_categories')->from('categories') ->where('status', '1')->where('parent', NULL)->order_by('priority', 'ASC');
						$level1_categories = $this->db->get()->result();
					?>
					<?php foreach($level1_categories as $level1) : ?>	
						<a href="<?= base_url() . 'category/' . strtolower($level1->alias); ?>" class="px-4 py-2 text-secondary font-custom text-2xl"><?= ucwords($level1->category); ?></a>
						<?php
							//check if this level1 category have sub category
							$this->db->select('id_categories')->from('categories')->where('parent', $level1->id_categories)->where('status', '1');                                                               $count_level2category = $this->db->get()->num_rows();
						?>
						<?php if($count_level2category > 0) : ?>
							<?php
								//get level 2 category
								$this->db->select('id_categories, alias, category')->from('categories')->where('parent', $level1->id_categories)->where('status', '1')->order_by('priority', 'ASC');
								$level2categories = $this->db->get()->result();	
							?>
							<?php foreach($level2categories as $level2) : ?> 
								<a href="<?= base_url() . 'category/' . $level1->alias . '/' . $level2->alias; ?>" class="px-4 py-2 text-white font-tinosItalic italic"><?= ucwords($level2->category); ?></a>
							<?php endforeach; ?>	
						<?php endif; ?>	
					<?php endforeach; ?>	
					<a
						href="<?= base_url() . 'customize/show-all'; ?>"
						class="px-4 py-2 text-secondary font-custom border-y border-y-secondary text-2xl"
						>Customize</a>
				</div>
			</div>
			<!-- bottom tab -->
			<div
				id="bottomNavigationTabs"				
				class="fixed bottom-0 left-0 right-0 flex items-center bg-primary text-white md:hidden"
				style="z-index: 999"
			>
				<!-- Item 1 -->
				<div class="flex-1 p-4 text-center">
					<a href="<?= base_url(); ?>">
						<img
							src="<?= base_url() . 'uploads/home.svg'; ?>"
							alt=""
							class="mx-auto border-b border-b-secondary pb-4"
						/>
					</a>
				</div>

				<!-- Item 2 -->
				<div class="flex-1 p-4 text-center">
					<a href="<?= base_url() . 'search/mobile'; ?>">
						<img src="<?= base_url() . 'uploads/search2.svg'; ?>" alt="" class="mx-auto pb-4" />
					</a>
				</div>

				<!-- Item 3 -->
				<div class="flex-1 p-4 text-center">
					<button id="toggleBtn" style="position:relative; top: 5px;">
						<img src="<?= base_url() . 'uploads/shop.svg'; ?>" alt="" class="mx-auto pb-4" />
					</button>
				</div> 

				<!-- Item 3 -->
				<div class="flex-1 p-4 text-center">
					<a href="<?= base_url('cart'); ?>">
						<img src="<?= base_url() . 'uploads/chart.svg'; ?>" alt="" class="mx-auto pb-4" />
					</a>
				</div>

				<!-- Item 3 -->
				<div class="flex-1 p-4 text-center">
					<a href="<?= base_url('account/order_history'); ?>">
						<img src="<?= base_url() . 'uploads/user.svg'; ?>" alt="" class="mx-auto pb-4" />
					</a>
				</div>
			</div>
		</div>

		<!-- bact to top -->
		<a id="goTop" href="#"><div
			class="fixed bottom-40 right-10 bg-[transparent]"
			style="z-index: 99999; right: 30px; bottom: 11rem"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width="30"
				height="30"
				viewBox="0 0 50 50"
				fill="transparent"
			>
				<path d="M15 18L26 10L37 18" stroke="#514A45" />
				<path d="M26 10L26 40" stroke="#514A45" />
				<rect x="0.5" y="0.5" width="49" height="49" stroke="#514A45" />
			</svg>
		</div></a>

		<!-- <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script> -->
		<script src="<?= base_url() . 'theme/kamari/js/kamari.js'; ?>"></script>
		<script>
			document.addEventListener('DOMContentLoaded', function () {
				//menu for shop
				const button = document.querySelector('#dropdown button')
				const menu = document.querySelector('#dropdown .hidden')

				//menu for customize
				const button2 = document.querySelector('#dropdown button.customizedButton')
				const menu2 = document.querySelector('#dropdown .hidden2')

				button.addEventListener('click', function () {
					menu.classList.toggle('hidden') 
				})

				button2.addEventListener('click', function () {
					menu2.classList.toggle('hidden2')
				})

				// Hide dropdown menu when clicking outside
				document.addEventListener('click', function (event) { 
					if (!menu.contains(event.target) && !button.contains(event.target)) {
						menu.classList.add('hidden') 
					}
				})

					// Hide dropdown menu when clicking outside
					document.addEventListener('click', function (event) {
					if (!menu2.contains(event.target) && !button2.contains(event.target)) {
						menu2.classList.add('hidden2')
					} 
				}) 
			})

			//toggle greeting card button
			$('#toggleBtn').on('click', function() {
          $('#topLogo').toggle();
      });

			$('#goTop').on('click', function(e){
					$("html, body").animate({scrollTop: $("#top").offset().top}, 500);
					return false;
			});

			let email;

			$('#subscribe').on('click', function(e) {
				e.preventDefault();
				email = $('#emailInput').val();
				if (!email) {
					alert('Please add email');
					return;
				}
				if(!validateEmail(email)) {
					alert('Please add correct email');
					return;
				}
				ajaxSubscribe(email);
			});

			function ajaxSubscribe(email) {

        $.ajax({
          'url': '<?= base_url('ajax/ajax_subscribe'); ?>',
          'type': 'POST',
          'data': {
            '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
            'email': email,
          },
          'success': function(data) {
            $('#subscribeMessage').text(`${data.message}`);
						$('#emailInput').val('');
          },
          'error': function(data) {
            $('#subscribeMessage').text(data.message);
						//$('#subscribeMessage').text(data.responseJSON.error);
          }
        });
      }

			const validateEmail = (email) => {
				return String(email)
					.toLowerCase()
					.match(
						/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
					);
			};
		</script>
	</body>
</html>