<?php
if (!defined('ABSPATH'))
	exit; // Exit if accessed directly

global $post;

$Event_Monster_Free_settings = get_post_meta($post->ID, 'awl_em_settings_' . $post->ID, true);
if (!is_array($Event_Monster_Free_settings)) {
	$Event_Monster_Free_settings = array();
}

// Free version limits
define('EM_STARTER_GALLERY_LIMIT', 3);
define('EM_STARTER_SPEAKERS_LIMIT', 1);
define('EM_STARTER_SPONSORS_LIMIT', 3);
define('EM_STARTER_SCHEDULE_LIMIT', 3);

?>
<style>
	.em-flex ul li button {
		transition: background-color 0.2s ease;
	}

	.em-peer:checked+div {
		background-color: #58bbee;
	}

	.em-peer:checked+div+div {
		transform: translateX(100%);
	}

	/* WordPress Color Picker Custom Styles */
	.em-color-field {
		max-width: 200px;
	}
</style>
<div id="Event_Monster_Free_settings" class="em-min-h-screen em-bg-gray-100">
	<div class="em-mx-auto em-rounded-lg">
		<div class="em-shadow-lg">
			<div class="em-flex em-items-center em-justify-between em-border-b em-bg-white em-p-4">
				<h1 class="em-text-xl em-font-bold em-flex-1">
					<?php _e('Event Monster Premium', 'event-monster'); ?>
					<span class="em-text-gray-500 em-text-sm">Version <?php echo EM_FREE_VERSION; ?></span>
				</h1>
			
				<?php // V-- ADD THIS BUTTON --V ?>
				<button type="button" id="em-get-shortcode-btn"
					class="em-bg-green-500 hover:em-bg-green-600 em-text-white em-font-semibold em-px-4 em-py-2 em-rounded-md em-shadow-lg em-transition em-duration-200">
					[ Generate Shortcode ]
				</button>
				<?php // ^-- ADD THIS BUTTON --^ ?>
			</div>

			<div class="em-flex em-bg-gray-100">
				<div class="em-tabs em-w-1/4 em-border-r em-border-gray-200 em-bg-white">
					<ul class="em-flex em-flex-col">
						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] active-tab    em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-general')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
									<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
									</g>
									<g id="SVGRepo_iconCarrier">
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M12 8.25C9.92894 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92894 15.75 12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25ZM9.75 12C9.75 10.7574 10.7574 9.75 12 9.75C13.2426 9.75 14.25 10.7574 14.25 12C14.25 13.2426 13.2426 14.25 12 14.25C10.7574 14.25 9.75 13.2426 9.75 12Z"
											fill="#000000"></path>
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M11.9747 1.25C11.5303 1.24999 11.1592 1.24999 10.8546 1.27077C10.5375 1.29241 10.238 1.33905 9.94761 1.45933C9.27379 1.73844 8.73843 2.27379 8.45932 2.94762C8.31402 3.29842 8.27467 3.66812 8.25964 4.06996C8.24756 4.39299 8.08454 4.66251 7.84395 4.80141C7.60337 4.94031 7.28845 4.94673 7.00266 4.79568C6.64714 4.60777 6.30729 4.45699 5.93083 4.40743C5.20773 4.31223 4.47642 4.50819 3.89779 4.95219C3.64843 5.14353 3.45827 5.3796 3.28099 5.6434C3.11068 5.89681 2.92517 6.21815 2.70294 6.60307L2.67769 6.64681C2.45545 7.03172 2.26993 7.35304 2.13562 7.62723C1.99581 7.91267 1.88644 8.19539 1.84541 8.50701C1.75021 9.23012 1.94617 9.96142 2.39016 10.5401C2.62128 10.8412 2.92173 11.0602 3.26217 11.2741C3.53595 11.4461 3.68788 11.7221 3.68786 12C3.68785 12.2778 3.53592 12.5538 3.26217 12.7258C2.92169 12.9397 2.62121 13.1587 2.39007 13.4599C1.94607 14.0385 1.75012 14.7698 1.84531 15.4929C1.88634 15.8045 1.99571 16.0873 2.13552 16.3727C2.26983 16.6469 2.45535 16.9682 2.67758 17.3531L2.70284 17.3969C2.92507 17.7818 3.11058 18.1031 3.28089 18.3565C3.45817 18.6203 3.64833 18.8564 3.89769 19.0477C4.47632 19.4917 5.20763 19.6877 5.93073 19.5925C6.30717 19.5429 6.647 19.3922 7.0025 19.2043C7.28833 19.0532 7.60329 19.0596 7.8439 19.1986C8.08452 19.3375 8.24756 19.607 8.25964 19.9301C8.27467 20.3319 8.31403 20.7016 8.45932 21.0524C8.73843 21.7262 9.27379 22.2616 9.94761 22.5407C10.238 22.661 10.5375 22.7076 10.8546 22.7292C11.1592 22.75 11.5303 22.75 11.9747 22.75H12.0252C12.4697 22.75 12.8407 22.75 13.1454 22.7292C13.4625 22.7076 13.762 22.661 14.0524 22.5407C14.7262 22.2616 15.2616 21.7262 15.5407 21.0524C15.686 20.7016 15.7253 20.3319 15.7403 19.93C15.7524 19.607 15.9154 19.3375 16.156 19.1985C16.3966 19.0596 16.7116 19.0532 16.9974 19.2042C17.3529 19.3921 17.6927 19.5429 18.0692 19.5924C18.7923 19.6876 19.5236 19.4917 20.1022 19.0477C20.3516 18.8563 20.5417 18.6203 20.719 18.3565C20.8893 18.1031 21.0748 17.7818 21.297 17.3969L21.3223 17.3531C21.5445 16.9682 21.7301 16.6468 21.8644 16.3726C22.0042 16.0872 22.1135 15.8045 22.1546 15.4929C22.2498 14.7697 22.0538 14.0384 21.6098 13.4598C21.3787 13.1586 21.0782 12.9397 20.7378 12.7258C20.464 12.5538 20.3121 12.2778 20.3121 11.9999C20.3121 11.7221 20.464 11.4462 20.7377 11.2742C21.0783 11.0603 21.3788 10.8414 21.6099 10.5401C22.0539 9.96149 22.2499 9.23019 22.1547 8.50708C22.1136 8.19546 22.0043 7.91274 21.8645 7.6273C21.7302 7.35313 21.5447 7.03183 21.3224 6.64695L21.2972 6.60318C21.0749 6.21825 20.8894 5.89688 20.7191 5.64347C20.5418 5.37967 20.3517 5.1436 20.1023 4.95225C19.5237 4.50826 18.7924 4.3123 18.0692 4.4075C17.6928 4.45706 17.353 4.60782 16.9975 4.79572C16.7117 4.94679 16.3967 4.94036 16.1561 4.80144C15.9155 4.66253 15.7524 4.39297 15.7403 4.06991C15.7253 3.66808 15.686 3.2984 15.5407 2.94762C15.2616 2.27379 14.7262 1.73844 14.0524 1.45933C13.762 1.33905 13.4625 1.29241 13.1454 1.27077C12.8407 1.24999 12.4697 1.24999 12.0252 1.25H11.9747ZM10.5216 2.84515C10.5988 2.81319 10.716 2.78372 10.9567 2.76729C11.2042 2.75041 11.5238 2.75 12 2.75C12.4762 2.75 12.7958 2.75041 13.0432 2.76729C13.284 2.78372 13.4012 2.81319 13.4783 2.84515C13.7846 2.97202 14.028 3.21536 14.1548 3.52165C14.1949 3.61826 14.228 3.76887 14.2414 4.12597C14.271 4.91835 14.68 5.68129 15.4061 6.10048C16.1321 6.51968 16.9974 6.4924 17.6984 6.12188C18.0143 5.9549 18.1614 5.90832 18.265 5.89467C18.5937 5.8514 18.9261 5.94047 19.1891 6.14228C19.2554 6.19312 19.3395 6.27989 19.4741 6.48016C19.6125 6.68603 19.7726 6.9626 20.0107 7.375C20.2488 7.78741 20.4083 8.06438 20.5174 8.28713C20.6235 8.50382 20.6566 8.62007 20.6675 8.70287C20.7108 9.03155 20.6217 9.36397 20.4199 9.62698C20.3562 9.70995 20.2424 9.81399 19.9397 10.0041C19.2684 10.426 18.8122 11.1616 18.8121 11.9999C18.8121 12.8383 19.2683 13.574 19.9397 13.9959C20.2423 14.186 20.3561 14.29 20.4198 14.373C20.6216 14.636 20.7107 14.9684 20.6674 15.2971C20.6565 15.3799 20.6234 15.4961 20.5173 15.7128C20.4082 15.9355 20.2487 16.2125 20.0106 16.6249C19.7725 17.0373 19.6124 17.3139 19.474 17.5198C19.3394 17.72 19.2553 17.8068 19.189 17.8576C18.926 18.0595 18.5936 18.1485 18.2649 18.1053C18.1613 18.0916 18.0142 18.045 17.6983 17.8781C16.9973 17.5075 16.132 17.4803 15.4059 17.8995C14.68 18.3187 14.271 19.0816 14.2414 19.874C14.228 20.2311 14.1949 20.3817 14.1548 20.4784C14.028 20.7846 13.7846 21.028 13.4783 21.1549C13.4012 21.1868 13.284 21.2163 13.0432 21.2327C12.7958 21.2496 12.4762 21.25 12 21.25C11.5238 21.25 11.2042 21.2496 10.9567 21.2327C10.716 21.2163 10.5988 21.1868 10.5216 21.1549C10.2154 21.028 9.97201 20.7846 9.84514 20.4784C9.80512 20.3817 9.77195 20.2311 9.75859 19.874C9.72896 19.0817 9.31997 18.3187 8.5939 17.8995C7.86784 17.4803 7.00262 17.5076 6.30158 17.8781C5.98565 18.0451 5.83863 18.0917 5.73495 18.1053C5.40626 18.1486 5.07385 18.0595 4.81084 17.8577C4.74458 17.8069 4.66045 17.7201 4.52586 17.5198C4.38751 17.314 4.22736 17.0374 3.98926 16.625C3.75115 16.2126 3.59171 15.9356 3.4826 15.7129C3.37646 15.4962 3.34338 15.3799 3.33248 15.2971C3.28921 14.9684 3.37828 14.636 3.5801 14.373C3.64376 14.2901 3.75761 14.186 4.0602 13.9959C4.73158 13.5741 5.18782 12.8384 5.18786 12.0001C5.18791 11.1616 4.73165 10.4259 4.06021 10.004C3.75769 9.81389 3.64385 9.70987 3.58019 9.62691C3.37838 9.3639 3.28931 9.03149 3.33258 8.7028C3.34348 8.62001 3.37656 8.50375 3.4827 8.28707C3.59181 8.06431 3.75125 7.78734 3.98935 7.37493C4.22746 6.96253 4.3876 6.68596 4.52596 6.48009C4.66055 6.27983 4.74468 6.19305 4.81093 6.14222C5.07395 5.9404 5.40636 5.85133 5.73504 5.8946C5.83873 5.90825 5.98576 5.95483 6.30173 6.12184C7.00273 6.49235 7.86791 6.51962 8.59394 6.10045C9.31998 5.68128 9.72896 4.91837 9.75859 4.12602C9.77195 3.76889 9.80512 3.61827 9.84514 3.52165C9.97201 3.21536 10.2154 2.97202 10.5216 2.84515Z"
											fill="#000000"></path>
									</g>
								</svg> General Settings
							</button>
						</li>

						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-layout')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="#000000" stroke-width="1.5"></path> <path d="M7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6Z" fill="#000000"></path> <path d="M10 6C10 6.55228 9.55228 7 9 7C8.44772 7 8 6.55228 8 6C8 5.44772 8.44772 5 9 5C9.55228 5 10 5.44772 10 6Z" fill="#000000"></path> <path d="M13 6C13 6.55228 12.5523 7 12 7C11.4477 7 11 6.55228 11 6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6Z" fill="#000000"></path> <path d="M2 9.5H22" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> <path d="M9 21L9 10" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> </g></svg> Layout Configuration
							</button>
						</li>

						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] active-tab    em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-tickets')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
									<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
									</g>
									<g id="SVGRepo_iconCarrier">
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M10.9436 1.25H13.0564C14.8942 1.24998 16.3498 1.24997 17.489 1.40314C18.6614 1.56076 19.6104 1.89288 20.3588 2.64124C21.1071 3.38961 21.4392 4.33856 21.5969 5.51098C21.75 6.65019 21.75 8.10583 21.75 9.94359V14.0564C21.75 15.8942 21.75 17.3498 21.5969 18.489C21.4392 19.6614 21.1071 20.6104 20.3588 21.3588C19.6104 22.1071 18.6614 22.4392 17.489 22.5969C16.3498 22.75 14.8942 22.75 13.0564 22.75H10.9436C9.10583 22.75 7.65019 22.75 6.51098 22.5969C5.33856 22.4392 4.38961 22.1071 3.64124 21.3588C2.89288 20.6104 2.56076 19.6614 2.40314 18.489C2.24997 17.3498 2.24998 15.8942 2.25 14.0564V9.94358C2.24998 8.10582 2.24997 6.65019 2.40314 5.51098C2.56076 4.33856 2.89288 3.38961 3.64124 2.64124C4.38961 1.89288 5.33856 1.56076 6.51098 1.40314C7.65019 1.24997 9.10582 1.24998 10.9436 1.25ZM6.71085 2.88976C5.70476 3.02502 5.12511 3.27869 4.7019 3.7019C4.27869 4.12511 4.02502 4.70476 3.88976 5.71085C3.75159 6.73851 3.75 8.09318 3.75 10V14C3.75 15.9068 3.75159 17.2615 3.88976 18.2892C4.02502 19.2952 4.27869 19.8749 4.7019 20.2981C5.12511 20.7213 5.70476 20.975 6.71085 21.1102C7.73851 21.2484 9.09318 21.25 11 21.25H13C14.9068 21.25 16.2615 21.2484 17.2892 21.1102C18.2952 20.975 18.8749 20.7213 19.2981 20.2981C19.7213 19.8749 19.975 19.2952 20.1102 18.2892C20.2484 17.2615 20.25 15.9068 20.25 14V10C20.25 8.09318 20.2484 6.73851 20.1102 5.71085C19.975 4.70476 19.7213 4.12511 19.2981 3.7019C18.8749 3.27869 18.2952 3.02502 17.2892 2.88976C16.2615 2.75159 14.9068 2.75 13 2.75H11C9.09318 2.75 7.73851 2.75159 6.71085 2.88976ZM7.25 10C7.25 9.58579 7.58579 9.25 8 9.25H16C16.4142 9.25 16.75 9.58579 16.75 10C16.75 10.4142 16.4142 10.75 16 10.75H8C7.58579 10.75 7.25 10.4142 7.25 10ZM7.25 14C7.25 13.5858 7.58579 13.25 8 13.25H13C13.4142 13.25 13.75 13.5858 13.75 14C13.75 14.4142 13.4142 14.75 13 14.75H8C7.58579 14.75 7.25 14.4142 7.25 14Z"
											fill="#000000"></path>
									</g>
								</svg>Accept Event Registration
							</button>
						</li>

						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] active-tab    em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-gallery')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
									<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
									</g>
									<g id="SVGRepo_iconCarrier">
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M11.9426 1.25H12.0574C14.3658 1.24999 16.1748 1.24998 17.5863 1.43975C19.031 1.63399 20.1711 2.03933 21.0659 2.93414C21.9607 3.82895 22.366 4.96897 22.5603 6.41371C22.75 7.82519 22.75 9.63423 22.75 11.9426V12.0574C22.75 14.3658 22.75 16.1748 22.5603 17.5863C22.366 19.031 21.9607 20.1711 21.0659 21.0659C20.1711 21.9607 19.031 22.366 17.5863 22.5603C16.1748 22.75 14.3658 22.75 12.0574 22.75H11.9426C9.63423 22.75 7.82519 22.75 6.41371 22.5603C4.96897 22.366 3.82895 21.9607 2.93414 21.0659C2.03933 20.1711 1.63399 19.031 1.43975 17.5863C1.24998 16.1748 1.24999 14.3658 1.25 12.0574V11.9426C1.24999 9.63423 1.24998 7.82519 1.43975 6.41371C1.63399 4.96897 2.03933 3.82895 2.93414 2.93414C3.82895 2.03933 4.96897 1.63399 6.41371 1.43975C7.82519 1.24998 9.63423 1.24999 11.9426 1.25ZM6.61358 2.92637C5.33517 3.09825 4.56445 3.42514 3.9948 3.9948C3.42514 4.56445 3.09825 5.33517 2.92637 6.61358C2.75159 7.91356 2.75 9.62178 2.75 12C2.75 14.3782 2.75159 16.0864 2.92637 17.3864C3.09825 18.6648 3.42514 19.4355 3.9948 20.0052C4.56445 20.5749 5.33517 20.9018 6.61358 21.0736C7.91356 21.2484 9.62178 21.25 12 21.25C14.3782 21.25 16.0864 21.2484 17.3864 21.0736C18.6648 20.9018 19.4355 20.5749 20.0052 20.0052C20.5749 19.4355 20.9018 18.6648 21.0736 17.3864C21.2484 16.0864 21.25 14.3782 21.25 12C21.25 9.62178 21.2484 7.91356 21.0736 6.61358C20.9018 5.33517 20.5749 4.56445 20.0052 3.9948C19.4355 3.42514 18.6648 3.09825 17.3864 2.92637C16.0864 2.75159 14.3782 2.75 12 2.75C9.62178 2.75 7.91356 2.75159 6.61358 2.92637ZM16 6.75C15.3096 6.75 14.75 7.30964 14.75 8C14.75 8.69036 15.3096 9.25 16 9.25C16.6904 9.25 17.25 8.69036 17.25 8C17.25 7.30964 16.6904 6.75 16 6.75ZM13.25 8C13.25 6.48122 14.4812 5.25 16 5.25C17.5188 5.25 18.75 6.48122 18.75 8C18.75 9.51878 17.5188 10.75 16 10.75C14.4812 10.75 13.25 9.51878 13.25 8ZM8.50397 13.1766C7.91991 12.5566 6.94501 12.5241 6.32092 13.1038L5.51041 13.8566C5.20691 14.1385 4.73236 14.1209 4.45047 13.8174C4.16858 13.5139 4.1861 13.0394 4.48959 12.7575L5.3001 12.0047C6.52816 10.8641 8.44651 10.9281 9.59579 12.1481L12.2433 14.9584C12.5202 15.2523 12.9735 15.2919 13.2972 15.0504C14.4971 14.1553 16.1679 14.257 17.2503 15.2911L19.5181 17.4577C19.8176 17.7438 19.8284 18.2186 19.5423 18.5181C19.2562 18.8176 18.7814 18.8284 18.4819 18.5423L16.2141 16.3757C15.661 15.8473 14.8073 15.7953 14.1941 16.2527C13.2596 16.9499 11.9509 16.8356 11.1515 15.9869L8.50397 13.1766Z"
											fill="#000000"></path>
									</g>
								</svg>Event Gallery
							</button>
						</li>

						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] active-tab    em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-schedule')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z" stroke="#000000" stroke-width="1.5"></path> <path d="M7 4V2.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> <path d="M17 4V2.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> <path d="M2.5 9H21.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> <path d="M18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17Z" fill="#000000"></path> <path d="M18 13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13Z" fill="#000000"></path> <path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="#000000"></path> <path d="M13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13Z" fill="#000000"></path> <path d="M8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17Z" fill="#000000"></path> <path d="M8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13Z" fill="#000000"></path> </g></svg>Event Schedule
							</button>
						</li>
						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] active-tab    em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-people')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg" stroke="#000000">
									<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
									<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
									<g id="SVGRepo_iconCarrier">
										<circle cx="12" cy="9" r="3" stroke="#000000" stroke-width="1.5"></circle>
										<circle cx="12" cy="12" r="10" stroke="#000000" stroke-width="1.5"></circle>
										<path
											d="M17.9691 20C17.81 17.1085 16.9247 15 11.9999 15C7.07521 15 6.18991 17.1085 6.03076 20"
											stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path>
									</g>
								</svg>Organizer & People
							</button>
						</li>
						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] active-tab    em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-sponsors')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
									<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
									<g id="SVGRepo_iconCarrier">
										<path
											d="M2 14C2 10.2288 2 8.34315 3.17157 7.17157C4.34315 6 6.22876 6 10 6H14C17.7712 6 19.6569 6 20.8284 7.17157C22 8.34315 22 10.2288 22 14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14Z"
											stroke="#000000" stroke-width="1.5"></path>
										<path
											d="M16 6C16 4.11438 16 3.17157 15.4142 2.58579C14.8284 2 13.8856 2 12 2C10.1144 2 9.17157 2 8.58579 2.58579C8 3.17157 8 4.11438 8 6"
											stroke="#000000" stroke-width="1.5"></path>
										<path
											d="M12 17.3333C13.1046 17.3333 14 16.5871 14 15.6667C14 14.7462 13.1046 14 12 14C10.8954 14 10 13.2538 10 12.3333C10 11.4129 10.8954 10.6667 12 10.6667M12 17.3333C10.8954 17.3333 10 16.5871 10 15.6667M12 17.3333V18M12 10V10.6667M12 10.6667C13.1046 10.6667 14 11.4129 14 12.3333"
											stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path>
									</g>
								</svg>Sponsors
							</button>
						</li>

						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] active-tab    em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-social')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M13.0867 21.3877L13.7321 21.7697L13.0867 21.3877ZM13.6288 20.4718L12.9833 20.0898L13.6288 20.4718ZM10.3712 20.4718L9.72579 20.8539H9.72579L10.3712 20.4718ZM10.9133 21.3877L11.5587 21.0057L10.9133 21.3877ZM2.3806 15.9134L3.07351 15.6264V15.6264L2.3806 15.9134ZM7.78958 18.9915L7.77666 19.7413L7.78958 18.9915ZM5.08658 18.6194L4.79957 19.3123H4.79957L5.08658 18.6194ZM21.6194 15.9134L22.3123 16.2004V16.2004L21.6194 15.9134ZM16.2104 18.9915L16.1975 18.2416L16.2104 18.9915ZM18.9134 18.6194L19.2004 19.3123H19.2004L18.9134 18.6194ZM19.6125 2.7368L19.2206 3.37628L19.6125 2.7368ZM21.2632 4.38751L21.9027 3.99563V3.99563L21.2632 4.38751ZM4.38751 2.7368L3.99563 2.09732V2.09732L4.38751 2.7368ZM2.7368 4.38751L2.09732 3.99563H2.09732L2.7368 4.38751ZM9.40279 19.2098L9.77986 18.5615L9.77986 18.5615L9.40279 19.2098ZM13.7321 21.7697L14.2742 20.8539L12.9833 20.0898L12.4412 21.0057L13.7321 21.7697ZM9.72579 20.8539L10.2679 21.7697L11.5587 21.0057L11.0166 20.0898L9.72579 20.8539ZM12.4412 21.0057C12.2485 21.3313 11.7515 21.3313 11.5587 21.0057L10.2679 21.7697C11.0415 23.0767 12.9585 23.0767 13.7321 21.7697L12.4412 21.0057ZM10.5 2.75H13.5V1.25H10.5V2.75ZM21.25 10.5V11.5H22.75V10.5H21.25ZM2.75 11.5V10.5H1.25V11.5H2.75ZM1.25 11.5C1.25 12.6546 1.24959 13.5581 1.29931 14.2868C1.3495 15.0223 1.45323 15.6344 1.68769 16.2004L3.07351 15.6264C2.92737 15.2736 2.84081 14.8438 2.79584 14.1847C2.75041 13.5189 2.75 12.6751 2.75 11.5H1.25ZM7.8025 18.2416C6.54706 18.2199 5.88923 18.1401 5.37359 17.9265L4.79957 19.3123C5.60454 19.6457 6.52138 19.7197 7.77666 19.7413L7.8025 18.2416ZM1.68769 16.2004C2.27128 17.6093 3.39066 18.7287 4.79957 19.3123L5.3736 17.9265C4.33223 17.4951 3.50486 16.6678 3.07351 15.6264L1.68769 16.2004ZM21.25 11.5C21.25 12.6751 21.2496 13.5189 21.2042 14.1847C21.1592 14.8438 21.0726 15.2736 20.9265 15.6264L22.3123 16.2004C22.5468 15.6344 22.6505 15.0223 22.7007 14.2868C22.7504 13.5581 22.75 12.6546 22.75 11.5H21.25ZM16.2233 19.7413C17.4786 19.7197 18.3955 19.6457 19.2004 19.3123L18.6264 17.9265C18.1108 18.1401 17.4529 18.2199 16.1975 18.2416L16.2233 19.7413ZM20.9265 15.6264C20.4951 16.6678 19.6678 17.4951 18.6264 17.9265L19.2004 19.3123C20.6093 18.7287 21.7287 17.6093 22.3123 16.2004L20.9265 15.6264ZM13.5 2.75C15.1512 2.75 16.337 2.75079 17.2619 2.83873C18.1757 2.92561 18.7571 3.09223 19.2206 3.37628L20.0044 2.09732C19.2655 1.64457 18.4274 1.44279 17.4039 1.34547C16.3915 1.24921 15.1222 1.25 13.5 1.25V2.75ZM22.75 10.5C22.75 8.87781 22.7508 7.6085 22.6545 6.59611C22.5572 5.57256 22.3554 4.73445 21.9027 3.99563L20.6237 4.77938C20.9078 5.24291 21.0744 5.82434 21.1613 6.73809C21.2492 7.663 21.25 8.84876 21.25 10.5H22.75ZM19.2206 3.37628C19.7925 3.72672 20.2733 4.20752 20.6237 4.77938L21.9027 3.99563C21.4286 3.22194 20.7781 2.57144 20.0044 2.09732L19.2206 3.37628ZM10.5 1.25C8.87781 1.25 7.6085 1.24921 6.59611 1.34547C5.57256 1.44279 4.73445 1.64457 3.99563 2.09732L4.77938 3.37628C5.24291 3.09223 5.82434 2.92561 6.73809 2.83873C7.663 2.75079 8.84876 2.75 10.5 2.75V1.25ZM2.75 10.5C2.75 8.84876 2.75079 7.663 2.83873 6.73809C2.92561 5.82434 3.09223 5.24291 3.37628 4.77938L2.09732 3.99563C1.64457 4.73445 1.44279 5.57256 1.34547 6.59611C1.24921 7.6085 1.25 8.87781 1.25 10.5H2.75ZM3.99563 2.09732C3.22194 2.57144 2.57144 3.22194 2.09732 3.99563L3.37628 4.77938C3.72672 4.20752 4.20752 3.72672 4.77938 3.37628L3.99563 2.09732ZM11.0166 20.0898C10.8136 19.7468 10.6354 19.4441 10.4621 19.2063C10.2795 18.9559 10.0702 18.7304 9.77986 18.5615L9.02572 19.8582C9.07313 19.8857 9.13772 19.936 9.24985 20.0898C9.37122 20.2564 9.50835 20.4865 9.72579 20.8539L11.0166 20.0898ZM7.77666 19.7413C8.21575 19.7489 8.49387 19.7545 8.70588 19.7779C8.90399 19.7999 8.98078 19.832 9.02572 19.8582L9.77986 18.5615C9.4871 18.3912 9.18246 18.3215 8.87097 18.287C8.57339 18.2541 8.21375 18.2487 7.8025 18.2416L7.77666 19.7413ZM14.2742 20.8539C14.4916 20.4865 14.6287 20.2564 14.7501 20.0898C14.8622 19.936 14.9268 19.8857 14.9742 19.8582L14.2201 18.5615C13.9298 18.7304 13.7204 18.9559 13.5379 19.2063C13.3646 19.4441 13.1864 19.7468 12.9833 20.0898L14.2742 20.8539ZM16.1975 18.2416C15.7862 18.2487 15.4266 18.2541 15.129 18.287C14.8175 18.3215 14.5129 18.3912 14.2201 18.5615L14.9742 19.8582C15.0192 19.832 15.096 19.7999 15.2941 19.7779C15.5061 19.7545 15.7842 19.7489 16.2233 19.7413L16.1975 18.2416Z" fill="#000000"></path> <path d="M8 11H8.009M11.991 11H12M15.991 11H16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>Social Icons
							</button>
						</li>
						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] active-tab    em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-styling')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
									<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
									<g id="SVGRepo_iconCarrier">
										<path
											d="M22 10.5V12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2H13.5"
											stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path>
										<circle cx="19" cy="5" r="3" stroke="#000000" stroke-width="1.5"></circle>
										<path d="M7 14H16" stroke="#000000" stroke-width="1.5" stroke-linecap="round">
										</path>
										<path d="M7 17.5H13" stroke="#000000" stroke-width="1.5" stroke-linecap="round">
										</path>
									</g>
								</svg>Styling & Message
							</button>
						</li>
						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-cancellation')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
									<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
									<g id="SVGRepo_iconCarrier">
										<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#000000" stroke-width="1.5"/>
										<path d="M8 8L16 16M16 8L8 16" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
									</g>
								</svg>Event Cancellation
							</button>
						</li>
						<li class="em-mb-0">
							<button type="button"
								class="em-w-full em-text-left em-py-3 em-px-4 em-font-medium em-border-gray-200 hover:em-bg-[aliceblue] active-tab    em-flex em-gap-2 em-items-center"
								onclick="showTab(event, 'em-tab-custom-css')">
								<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
									<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
									<g id="SVGRepo_iconCarrier">
										<path
											d="M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296"
											stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path>
										<path d="M13.9868 5L12 12.4149L10.0132 19.8297" stroke="#000000"
											stroke-width="1.5" stroke-linecap="round"></path>
										<path
											d="M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296"
											stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path>
									</g>
								</svg>coustom CSS
						</li>
					</ul>
				</div>

				<div class="em-w-3/4 em-bg-white">

					<div id="em-tab-general" class="settings-tab">
						<div class="em-bg-gradient-to-r em-from-blue-50 em-to-indigo-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-blue-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M12 2C13.1046 2 14 2.89543 14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2Z"
											fill="#3B82F6" />
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M12 8C13.1046 8 14 8.89543 14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8Z"
											fill="#3B82F6" />
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M12 14C13.1046 14 14 14.8954 14 16C14 17.1046 13.1046 18 12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14Z"
											fill="#3B82F6" />
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">General Settings</h2>
									<p class="em-text-sm em-text-gray-600 em-mt-1">Configure basic event information and
										styling</p>
								</div>
							</div>
						</div>

						<div class="em-p-6 em-space-y-8">
							<!-- Event Title Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-purple-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M4 7H20" stroke="#8B5CF6" stroke-width="2"
													stroke-linecap="round" />
												<path d="M4 12H20" stroke="#8B5CF6" stroke-width="2"
													stroke-linecap="round" />
												<path d="M4 17H12" stroke="#8B5CF6" stroke-width="2"
													stroke-linecap="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Event Name / Title', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Customize the appearance of your
												event title</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Font Size (px)', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Adjust the title font size</p>
										</div>
										<div class="range-slider em-w-1/2">
											<?php $em_title_size = isset($Event_Monster_Free_settings['em_title_size']) ? $Event_Monster_Free_settings['em_title_size'] : "28"; ?>
											<input id="em_title_size" name="em_title_size" class="range-slider__range"
												type="range" value="<?php echo esc_attr($em_title_size); ?>" min="12"
												max="60">
											<span
												class="range-slider__value"><?php echo esc_attr($em_title_size); ?></span>
										</div>
									</div>

									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Title Color', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Choose the title text color</p>
										</div>
										<div class="em-flex em-items-center em-gap-3">
											<?php $em_title_color = isset($Event_Monster_Free_settings['em_title_color']) ? $Event_Monster_Free_settings['em_title_color'] : "#40babd"; ?>
											<input type="text" id="em_title_color" name="em_title_color"
												value="<?php echo esc_attr($em_title_color); ?>"
												class="em-color-field" />
										</div>
									</div>

									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Title Alignment', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Set the title text alignment</p>
										</div>
										<div class="em-flex em-p-1 em-bg-gray-200 em-rounded-lg js-segmented-control">
											<?php $em_title_align = isset($Event_Monster_Free_settings['em_title_align']) ? $Event_Monster_Free_settings['em_title_align'] : 'center'; ?>
											<label
												class="em-px-4 em-py-1 em-text-sm em-font-medium em-rounded-md em-cursor-pointer">
												<input type="radio" name="em_title_align" value="left"
													class="em-sr-only" <?php checked($em_title_align, 'left'); ?>>
												<?php _e('Left', 'event-monster'); ?>
											</label>
											<label
												class="em-px-4 em-py-1 em-text-sm em-font-medium em-rounded-md em-cursor-pointer">
												<input type="radio" name="em_title_align" value="center"
													class="em-sr-only" <?php checked($em_title_align, 'center'); ?>>
												<?php _e('Center', 'event-monster'); ?>
											</label>
											<label
												class="em-px-4 em-py-1 em-text-sm em-font-medium em-rounded-md em-cursor-pointer">
												<input type="radio" name="em_title_align" value="right"
													class="em-sr-only" <?php checked($em_title_align, 'right'); ?>>
												<?php _e('Right', 'event-monster'); ?>
											</label>
										</div>
									</div>
								</div>
							</div>

							<!-- Event Details & Venue Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-green-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M8 2V5" stroke="#10B981" stroke-width="2"
													stroke-linecap="round" />
												<path d="M16 2V5" stroke="#10B981" stroke-width="2"
													stroke-linecap="round" />
												<rect x="3" y="4" width="18" height="18" rx="2" stroke="#10B981"
													stroke-width="2" />
												<path d="M3 10H21" stroke="#10B981" stroke-width="2" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Event Details & Venue', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Set event dates, times, and location
												information</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
									<div class="em-grid em-grid-cols-1 lg:em-grid-cols-2 em-gap-6">
										<div class="em-space-y-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700"><?php _e('Start Date', 'event-monster'); ?></label>
											<?php $em_start_date = isset($Event_Monster_Free_settings['em_start_date']) ? $Event_Monster_Free_settings['em_start_date'] : date("Y-m-d"); ?>
											<input type="date" name="em_start_date"
												value="<?php echo esc_attr($em_start_date); ?>"
												class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors">
										</div>
										<div class="em-space-y-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700"><?php _e('End Date', 'event-monster'); ?></label>
											<?php $em_end_date = isset($Event_Monster_Free_settings['em_end_date']) ? $Event_Monster_Free_settings['em_end_date'] : date("Y-m-d", strtotime("+2 day")); ?>
											<input type="date" name="em_end_date"
												value="<?php echo esc_attr($em_end_date); ?>"
												class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors">
										</div>
									</div>

									<div class="em-grid em-grid-cols-1 lg:em-grid-cols-2 em-gap-6">
										<div class="em-space-y-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700"><?php _e('Start Time', 'event-monster'); ?></label>
											<?php $em_start_time = isset($Event_Monster_Free_settings['em_start_time']) ? $Event_Monster_Free_settings['em_start_time'] : '12:00'; ?>
											<input type="time" name="em_start_time"
												value="<?php echo esc_attr($em_start_time); ?>"
												class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors">
										</div>
										<div class="em-space-y-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700"><?php _e('End Time', 'event-monster'); ?></label>
											<?php $em_end_time = isset($Event_Monster_Free_settings['em_end_time']) ? $Event_Monster_Free_settings['em_end_time'] : '17:00'; ?>
											<input type="time" name="em_end_time"
												value="<?php echo esc_attr($em_end_time); ?>"
												class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors">
										</div>
									</div>

									<div class="em-space-y-1">
										<label
											class="em-block em-text-sm em-font-medium em-text-gray-700"><?php _e('Venue / Address', 'event-monster'); ?></label>
										<p class="em-text-xs em-text-gray-500 em-mb-2">Enter the event location or venue
											address</p>
										<?php $em_venue = isset($Event_Monster_Free_settings['em_venue']) ? $Event_Monster_Free_settings['em_venue'] : ''; ?>
										<textarea name="em_venue" rows="3"
											class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors"
											placeholder="Enter Event Address"><?php echo esc_textarea($em_venue); ?></textarea>
									</div>
								</div>
							</div>

							<!-- Map Control Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-green-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2Z" stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
												<circle cx="12" cy="9" r="2.5" stroke="#10B981" stroke-width="2"/>
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Map Control', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Enable or disable interactive map display</p>
										</div>
									</div>
								</div>

								<div class="em-p-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Display Map', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Show interactive map on event page</p>
										</div>
										<label class="em-relative em-inline-flex em-items-center em-cursor-pointer">
											<?php $em_map_enabled = isset($Event_Monster_Free_settings['em_map_enabled']) ? $Event_Monster_Free_settings['em_map_enabled'] : 'yes'; ?>
											<input type="checkbox" id="em_map_enabled" name="em_map_enabled"
												value="yes" class="em-sr-only em-peer" <?php checked($em_map_enabled, 'yes'); ?>
												onchange="toggleSwitch(this)">
											<div
												class="em-relative em-w-11 em-h-6 em-bg-gray-200 peer-focus:em-outline-none peer-focus:em-ring-4 peer-focus:em-ring-green-300 em-rounded-full peer peer-checked:after:em-translate-x-full peer-checked:after:em-border-white after:em-content-[''] after:em-absolute after:em-top-[2px] after:em-left-[2px] after:em-bg-white after:em-border-gray-300 after:em-border after:em-rounded-full after:em-h-5 after:em-w-5 after:em-transition-all peer-checked:em-bg-green-600">
											</div>
										</label>
									</div>
								</div>
							</div>

							<!-- Map Configuration Section -->
							<div id="em-map-settings-wrapper" class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-green-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#10B981" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 17L12 22L22 17" stroke="#10B981" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 12L12 17L22 12" stroke="#10B981" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Map Configuration', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Configure map display settings and coordinates</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">

									<!-- Manual Coordinates (Optional) -->
									<div class="em-bg-blue-50 em-border em-border-blue-200 em-rounded-lg em-p-4">
										<div class="em-flex em-items-start em-gap-3 em-mb-3">
											<svg class="em-w-5 em-h-5 em-text-blue-600 em-mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
											</svg>
											<div class="em-flex-1">
												<h4 class="em-text-sm em-font-semibold em-text-blue-900 em-mb-1">
													<?php _e('Manual Coordinates (Optional)', 'event-monster'); ?>
												</h4>
												<p class="em-text-xs em-text-blue-700">
													<?php _e('If automatic geocoding fails, you can manually enter latitude and longitude. Leave empty to use automatic geocoding from the venue address.', 'event-monster'); ?>
												</p>
											</div>
										</div>

										<div class="em-grid em-grid-cols-1 md:em-grid-cols-2 em-gap-4">
											<!-- Latitude -->
											<div>
												<label for="em_map_latitude" class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">
													<?php _e('Latitude', 'event-monster'); ?>
												</label>
												<?php $em_map_latitude = isset($Event_Monster_Free_settings['em_map_latitude']) ? $Event_Monster_Free_settings['em_map_latitude'] : ''; ?>
												<input type="text" id="em_map_latitude" name="em_map_latitude"
													value="<?php echo esc_attr($em_map_latitude); ?>"
													placeholder="e.g., 26.9124"
													class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-text-sm">
												<p class="em-text-xs em-text-gray-500 em-mt-1"><?php _e('Example: 26.9124', 'event-monster'); ?></p>
											</div>

											<!-- Longitude -->
											<div>
												<label for="em_map_longitude" class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">
													<?php _e('Longitude', 'event-monster'); ?>
												</label>
												<?php $em_map_longitude = isset($Event_Monster_Free_settings['em_map_longitude']) ? $Event_Monster_Free_settings['em_map_longitude'] : ''; ?>
												<input type="text" id="em_map_longitude" name="em_map_longitude"
													value="<?php echo esc_attr($em_map_longitude); ?>"
													placeholder="e.g., 75.7873"
													class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-text-sm">
												<p class="em-text-xs em-text-gray-500 em-mt-1"><?php _e('Example: 75.7873', 'event-monster'); ?></p>
											</div>
										</div>

										<div class="em-mt-3 em-text-xs em-text-blue-600">
											<strong><?php _e('Tip:', 'event-monster'); ?></strong>
											<?php _e('You can find coordinates by searching your location on', 'event-monster'); ?>
											<a href="https://www.google.com/maps" target="_blank" class="em-underline em-font-medium">Google Maps</a>
											<?php _e('and right-clicking on the location.', 'event-monster'); ?>
										</div>
									</div>

									<!-- Map Settings Grid -->
									<div class="em-grid em-grid-cols-1 lg:em-grid-cols-2 em-gap-6">
										<!-- Map Zoom Level -->
										<div class="em-space-y-2">
											<label for="em_map_zoom"
												class="em-block em-text-sm em-font-medium em-text-gray-700">
												<?php _e('Zoom Level', 'event-monster'); ?>
											</label>
											<p class="em-text-xs em-text-gray-500 em-mb-2">Adjust map zoom (1-20)</p>
											<?php $em_map_zoom = isset($Event_Monster_Free_settings['em_map_zoom']) ? $Event_Monster_Free_settings['em_map_zoom'] : '15'; ?>
											<div class="em-flex em-items-center em-gap-3">
												<input type="range" id="em_map_zoom" name="em_map_zoom"
													min="1" max="20" value="<?php echo esc_attr($em_map_zoom); ?>"
													class="em-flex-1 em-h-2 em-bg-gray-200 em-rounded-lg em-appearance-none em-cursor-pointer"
													oninput="document.getElementById('em_map_zoom_value').value = this.value">
												<input type="number" id="em_map_zoom_value"
													value="<?php echo esc_attr($em_map_zoom); ?>"
													min="1" max="20"
													class="em-w-16 em-px-2 em-py-1 em-border em-border-gray-300 em-rounded-md em-text-center em-text-sm"
													oninput="document.getElementById('em_map_zoom').value = this.value"
													readonly>
											</div>
										</div>

										<!-- Map Height -->
										<div class="em-space-y-2">
											<label for="em_map_height"
												class="em-block em-text-sm em-font-medium em-text-gray-700">
												<?php _e('Map Height', 'event-monster'); ?>
											</label>
											<p class="em-text-xs em-text-gray-500 em-mb-2">Height in pixels</p>
											<?php $em_map_height = isset($Event_Monster_Free_settings['em_map_height']) ? $Event_Monster_Free_settings['em_map_height'] : '300'; ?>
											<div class="em-flex em-items-center em-gap-2">
												<input type="number" id="em_map_height" name="em_map_height"
													value="<?php echo esc_attr($em_map_height); ?>"
													min="200" max="800" step="50"
													class="em-flex-1 em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-green-500 focus:em-border-green-500">
												<span class="em-text-sm em-text-gray-500">px</span>
											</div>
										</div>
									</div>

									<!-- Map Type Selection -->
									<div class="em-space-y-2">
										<label class="em-block em-text-sm em-font-medium em-text-gray-700">
											<?php _e('Map Type', 'event-monster'); ?>
										</label>
										<p class="em-text-xs em-text-gray-500 em-mb-3">Choose the map display style</p>
										<?php $em_map_type = isset($Event_Monster_Free_settings['em_map_type']) ? $Event_Monster_Free_settings['em_map_type'] : 'roadmap'; ?>
										<div class="em-grid em-grid-cols-2 lg:em-grid-cols-4 em-gap-3">
											<label class="em-relative em-cursor-pointer">
												<input type="radio" name="em_map_type" value="roadmap" class="em-sr-only em-peer" <?php checked($em_map_type, 'roadmap'); ?>>
												<div class="em-p-3 em-border em-rounded-md em-text-center em-transition-all <?php echo ($em_map_type === 'roadmap') ? 'em-border-gray-900 em-bg-gray-50' : 'em-border-gray-300 hover:em-border-gray-400'; ?>">
													<span class="em-text-sm em-font-medium em-text-gray-700"><?php _e('Roadmap', 'event-monster'); ?></span>
												</div>
											</label>
											<label class="em-relative em-cursor-pointer">
												<input type="radio" name="em_map_type" value="satellite" class="em-sr-only em-peer" <?php checked($em_map_type, 'satellite'); ?>>
												<div class="em-p-3 em-border em-rounded-md em-text-center em-transition-all <?php echo ($em_map_type === 'satellite') ? 'em-border-gray-900 em-bg-gray-50' : 'em-border-gray-300 hover:em-border-gray-400'; ?>">
													<span class="em-text-sm em-font-medium em-text-gray-700"><?php _e('Satellite', 'event-monster'); ?></span>
												</div>
											</label>
											<label class="em-relative em-cursor-pointer">
												<input type="radio" name="em_map_type" value="hybrid" class="em-sr-only em-peer" <?php checked($em_map_type, 'hybrid'); ?>>
												<div class="em-p-3 em-border em-rounded-md em-text-center em-transition-all <?php echo ($em_map_type === 'hybrid') ? 'em-border-gray-900 em-bg-gray-50' : 'em-border-gray-300 hover:em-border-gray-400'; ?>">
													<span class="em-text-sm em-font-medium em-text-gray-700"><?php _e('Hybrid', 'event-monster'); ?></span>
												</div>
											</label>
											<label class="em-relative em-cursor-pointer">
												<input type="radio" name="em_map_type" value="terrain" class="em-sr-only em-peer" <?php checked($em_map_type, 'terrain'); ?>>
												<div class="em-p-3 em-border em-rounded-md em-text-center em-transition-all <?php echo ($em_map_type === 'terrain') ? 'em-border-gray-900 em-bg-gray-50' : 'em-border-gray-300 hover:em-border-gray-400'; ?>">
													<span class="em-text-sm em-font-medium em-text-gray-700"><?php _e('Terrain', 'event-monster'); ?></span>
												</div>
											</label>
										</div>
									</div>

									<!-- Map Info Notice -->
									<div class="em-bg-gray-50 em-border em-border-gray-200 em-rounded-md em-p-3">
										<div class="em-flex em-gap-2">
											<svg class="em-h-4 em-w-4 em-text-gray-400 em-flex-shrink-0 em-mt-0.5" viewBox="0 0 20 20" fill="currentColor">
												<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
											</svg>
											<p class="em-text-xs em-text-gray-600"><?php _e('Map Display Information', 'event-monster'); ?></p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Layout Configuration Tab -->
					<div id="em-tab-layout" class="settings-tab em-hidden">
						<div class="em-bg-gradient-to-r em-from-purple-50 em-to-indigo-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-purple-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path
											d="M3 7C3 5.11438 3 4.17157 3.58579 3.58579C4.17157 3 5.11438 3 7 3H17C18.8856 3 19.8284 3 20.4142 3.58579C21 4.17157 21 5.11438 21 7V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V7Z"
											stroke="#8B5CF6" stroke-width="2" />
										<path d="M3 12H21" stroke="#8B5CF6" stroke-width="2" />
										<path d="M12 3V12" stroke="#8B5CF6" stroke-width="2" />
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">Layout Configuration</h2>
									<p class="em-text-sm em-text-gray-600 em-mt-1">Customize how your event components
										are arranged and displayed</p>
								</div>
							</div>
						</div>

						<div class="em-p-6">
							<?php
							// Include the layout builder
							$event_id = get_the_ID();
							$event_settings = get_post_meta($event_id, 'awl_em_settings_' . $event_id, true);
							if (!is_array($event_settings)) {
								$event_settings = array();
							}

							// Include layout builder component
							include EM_FREE_PLUGIN_DIR . 'templates/admin/layout-builder.php';
							?>

							<!-- Color Scheme Settings -->
							<div class="em-mt-8 em-p-6 em-bg-gray-50 em-rounded-lg em-border em-border-gray-200">
								<h3 class="em-text-lg em-font-semibold em-text-gray-800 em-mb-4">
									<?php _e('Color Scheme Settings', 'event-monster'); ?>
								</h3>

								<div class="em-space-y-4">
									<!-- Color Scheme Selection -->
									<div>
										<label class="em-text-sm em-font-medium em-text-gray-700 em-block em-mb-2">
											<?php _e('Color Scheme', 'event-monster'); ?>
										</label>
										<?php $em_color_scheme = isset($Event_Monster_Free_settings['em_color_scheme']) ? $Event_Monster_Free_settings['em_color_scheme'] : 'light'; ?>
										<div class="em-grid em-grid-cols-3 em-gap-3">
											<label class="em-relative em-cursor-pointer">
												<input type="radio" name="em_color_scheme" value="light" class="em-sr-only em-peer" <?php checked($em_color_scheme, 'light'); ?>>
												<div class="em-p-4 em-border-2 em-rounded-lg em-text-center em-transition-all em-duration-200 <?php echo ($em_color_scheme === 'light') ? 'em-border-indigo-500 em-bg-indigo-50' : 'em-border-gray-200 hover:em-border-indigo-300'; ?>">
													<div class="em-w-8 em-h-8 em-bg-white em-border em-border-gray-300 em-rounded em-mx-auto em-mb-2"></div>
													<span class="em-text-sm em-font-medium"><?php _e('Light', 'event-monster'); ?></span>
												</div>
											</label>
											<label class="em-relative em-cursor-pointer">
												<input type="radio" name="em_color_scheme" value="dark" class="em-sr-only em-peer" <?php checked($em_color_scheme, 'dark'); ?>>
												<div class="em-p-4 em-border-2 em-rounded-lg em-text-center em-transition-all em-duration-200 <?php echo ($em_color_scheme === 'dark') ? 'em-border-indigo-500 em-bg-indigo-50' : 'em-border-gray-200 hover:em-border-indigo-300'; ?>">
													<div class="em-w-8 em-h-8 em-bg-gray-800 em-border em-border-gray-600 em-rounded em-mx-auto em-mb-2"></div>
													<span class="em-text-sm em-font-medium"><?php _e('Dark', 'event-monster'); ?></span>
												</div>
											</label>
											<label class="em-relative em-cursor-pointer">
												<input type="radio" name="em_color_scheme" value="auto" class="em-sr-only em-peer" <?php checked($em_color_scheme, 'auto'); ?>>
												<div class="em-p-4 em-border-2 em-rounded-lg em-text-center em-transition-all em-duration-200 <?php echo ($em_color_scheme === 'auto') ? 'em-border-indigo-500 em-bg-indigo-50' : 'em-border-gray-200 hover:em-border-indigo-300'; ?>">
													<div class="em-w-8 em-h-8 em-bg-gradient-to-r em-from-white em-to-gray-800 em-border em-border-gray-300 em-rounded em-mx-auto em-mb-2"></div>
													<span class="em-text-sm em-font-medium"><?php _e('Auto', 'event-monster'); ?></span>
												</div>
											</label>
										</div>
										<p class="em-text-xs em-text-gray-500 em-mt-2">
											<?php _e('Auto will follow the user\'s system preference', 'event-monster'); ?>
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div id="em-tab-tickets" class="settings-tab em-hidden">
						<div class="em-bg-gradient-to-r em-from-green-50 em-to-emerald-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-green-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M12 2C13.1046 2 14 2.89543 14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2Z"
											fill="#10B981" />
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M12 8C13.1046 8 14 8.89543 14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8Z"
											fill="#10B981" />
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M12 14C13.1046 14 14 14.8954 14 16C14 17.1046 13.1046 18 12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14Z"
											fill="#10B981" />
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">Ticket & Registration Settings
									</h2>
									<p class="em-text-sm em-text-gray-600 em-mt-1">Configure event registration and
										ticket options</p>
								</div>
							</div>
						</div>

						<div class="em-p-6 em-space-y-8">
							<!-- Registration Toggle Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-blue-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M9 12L11 14L15 10" stroke="#3B82F6" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<circle cx="12" cy="12" r="9" stroke="#3B82F6" stroke-width="2" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Registration Control', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Enable or disable event registration
											</p>
										</div>
									</div>
								</div>

								<div class="em-p-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Accept Event Registration', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Allow users to register for this
												event</p>
										</div>
										<label class="em-relative em-inline-flex em-items-center em-cursor-pointer">
											<?php $em_accept_registration = isset($Event_Monster_Free_settings['em_accept_registration']) ? $Event_Monster_Free_settings['em_accept_registration'] : 'no'; ?>
											<input type="checkbox" id="em_accept_registration"
												name="em_accept_registration" value="yes" class="em-sr-only em-peer"
												<?php checked($em_accept_registration, 'yes'); ?>
												onchange="toggleSwitch(this)">
											<div
												class="em-relative em-w-11 em-h-6 em-bg-gray-200 peer-focus:em-outline-none peer-focus:em-ring-4 peer-focus:em-ring-blue-300 em-rounded-full peer peer-checked:after:em-translate-x-full peer-checked:after:em-border-white after:em-content-[''] after:em-absolute after:em-top-[2px] after:em-left-[2px] after:em-bg-white after:em-border-gray-300 after:em-border after:em-rounded-full after:em-h-5 after:em-w-5 after:em-transition-all peer-checked:em-bg-blue-600">
											</div>
										</label>
									</div>
								</div>
							</div>

							<!-- Registration Type Section -->
							<div id="em-ticket-options-wrapper"
								class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-purple-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#8B5CF6" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 17L12 22L22 17" stroke="#8B5CF6" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 12L12 17L22 12" stroke="#8B5CF6" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Registration Configuration', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Choose how users will register for
												your event</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Registration Type', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Select internal ticketing or external
												registration</p>
										</div>
										<div class="em-flex em-p-1 em-bg-gray-200 em-rounded-lg js-segmented-control">
											<?php $em_registration_type = isset($Event_Monster_Free_settings['em_registration_type']) ? $Event_Monster_Free_settings['em_registration_type'] : 'internal'; ?>
											<label
												class="em-px-4 em-py-2 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors">
												<input type="radio" name="em_registration_type" value="internal"
													class="em-sr-only" <?php checked($em_registration_type, 'internal'); ?>>
												<?php _e('Internal', 'event-monster'); ?>
											</label>
											<label
												class="em-px-4 em-py-2 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors">
												<input type="radio" name="em_registration_type" value="external"
													class="em-sr-only" <?php checked($em_registration_type, 'external'); ?>>
												<?php _e('External', 'event-monster'); ?>
											</label>
										</div>
									</div>

									<!-- Registration Display Mode -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Registration Display', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Choose how the registration form is displayed</p>
										</div>
										<div class="em-flex em-p-1 em-bg-gray-200 em-rounded-lg js-segmented-control">
											<?php $em_registration_modal = isset($Event_Monster_Free_settings['em_registration_modal']) ? $Event_Monster_Free_settings['em_registration_modal'] : 'inline'; ?>
											<label
												class="em-px-4 em-py-2 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors">
												<input type="radio" name="em_registration_modal" value="inline"
													class="em-sr-only" <?php checked($em_registration_modal, 'inline'); ?>>
												<?php _e('Inline', 'event-monster'); ?>
											</label>
											<label
												class="em-px-4 em-py-2 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors">
												<input type="radio" name="em_registration_modal" value="modal"
													class="em-sr-only" <?php checked($em_registration_modal, 'modal'); ?>>
												<?php _e('Modal Popup', 'event-monster'); ?>
											</label>
										</div>
									</div>



									<div id="em-external-link-option"
										class="em-p-4 em-bg-blue-50 em-border em-border-blue-200 em-rounded-lg">
										<div class="em-flex em-items-center em-gap-3 em-mb-3">
											<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path
													d="M10 13A5 5 0 0 0 7.54 7.54L4.93 4.93A10 10 0 0 0 4.93 19.07A10 10 0 0 0 19.07 4.93L16.46 7.54A5 5 0 0 0 13 10"
													stroke="#3B82F6" stroke-width="2" stroke-linecap="round"
													stroke-linejoin="round" />
												<path
													d="M14 11A5 5 0 0 0 16.46 16.46L19.07 19.07A10 10 0 0 0 19.07 4.93A10 10 0 0 0 4.93 19.07L7.54 16.46A5 5 0 0 0 11 14"
													stroke="#3B82F6" stroke-width="2" stroke-linecap="round"
													stroke-linejoin="round" />
											</svg>
											<h4 class="em-text-sm em-font-semibold em-text-blue-800">
												<?php _e('External Registration URL', 'event-monster'); ?>
											</h4>
										</div>
										<p class="em-text-xs em-text-blue-600 em-mb-3">Redirect users to an external
											registration platform</p>
										<?php $em_external_link = isset($Event_Monster_Free_settings['em_external_link']) ? $Event_Monster_Free_settings['em_external_link'] : ''; ?>
										<input type="text" name="em_external_link"
											value="<?php echo esc_attr($em_external_link); ?>"
											class="em-w-full em-border em-border-blue-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors"
											placeholder="https://example.com/register">
									</div>
								</div>
							</div>

							<!-- Internal Tickets Section -->
							<div id="em-internal-options"
								class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-orange-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M9 12L11 14L15 10" stroke="#F97316" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path
													d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
													stroke="#F97316" stroke-width="2" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Event Tickets', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Select and configure available
												tickets for this event</p>
										</div>
									</div>
								</div>

								<div class="em-p-6">
									<div class="em-overflow-hidden em-border em-border-gray-200 em-rounded-lg">
										<table class="em-w-full em-divide-y em-divide-gray-200">
											<thead class="em-bg-gray-50">
												<tr>
													<th
														class="em-px-4 em-py-3 em-text-left em-text-xs em-font-medium em-text-gray-500 em-uppercase em-tracking-wider">
														Select</th>
													<th
														class="em-px-4 em-py-3 em-text-left em-text-xs em-font-medium em-text-gray-500 em-uppercase em-tracking-wider">
														Ticket Name</th>
													<th
														class="em-px-4 em-py-3 em-text-left em-text-xs em-font-medium em-text-gray-500 em-uppercase em-tracking-wider">
														Qty</th>
													<th
														class="em-px-4 em-py-3 em-text-left em-text-xs em-font-medium em-text-gray-500 em-uppercase em-tracking-wider">
														Per User</th>
												</tr>
											</thead>
											<tbody class="em-bg-white em-divide-y em-divide-gray-200">
												<?php
												if (isset($Event_Monster_Free_settings['em_tkt_select'])) {
													$em_tkt_selected = $Event_Monster_Free_settings['em_tkt_select'];
												} else {
													$em_tkt_selected = array();
												}

												//payment icon--
												$em_common_settings = get_option('awl_em_common_settings');
												if (isset($em_common_settings['em_currency_code'])) {
													$em_currency = $em_common_settings['em_currency_code'];
												} else {
													$em_currency = 'USD';
												}
												//get currency symbol
												global $wpdb;
												$em_currency_table = $wpdb->prefix . "em_currency";
												$em_currency_symbol = $wpdb->get_row($wpdb->prepare("SELECT `symbol` FROM `$em_currency_table` WHERE `code` LIKE %s", $em_currency));
												if ($em_currency_symbol) {
													$event_currency_symbol = $em_currency_symbol->symbol;
												}
												//get post status
												$post_status = get_post_status($post->ID);
												$em_tickets_table = $wpdb->prefix . 'em_tickets';
												$em_tickets_sett_result = $wpdb->get_results("SELECT * FROM `$em_tickets_table` WHERE `status` LIKE 'available' AND `price` = 0");
												if (count($em_tickets_sett_result)) {
													$i = 1;
													foreach ($em_tickets_sett_result as $single_row) {
														$ticket_id = $single_row->id;
														$tkt_name = $single_row->name;
														$tkt_price = $single_row->price;
														$tkt_status = $single_row->status;
														?>
														<tr class="hover:em-bg-gray-50 em-transition-colors">
															<td class="em-px-4 em-py-4 em-whitespace-nowrap">
																<div class="em-flex em-items-center">
																	<input type="checkbox" id="em_tkt_select[]"
																		name="em_tkt_select[]" value="<?php echo $ticket_id; ?>"
																		class="em-h-4 em-w-4 em-text-blue-600 em-border-gray-300 em-rounded focus:em-ring-blue-500"
																		<?php if ($post_status == 'auto-draft' || empty($em_tkt_selected)) {
																			echo "checked";
																		} else {
																			if (in_array($ticket_id, $em_tkt_selected)) {
																				echo "checked";
																			}
																		} ?>>
																</div>
															</td>
															<td class="em-px-4 em-py-4 em-whitespace-nowrap">
																<div class="em-flex em-items-center">
																	<div class="em-flex-shrink-0 em-h-8 em-w-8">
																		<div
																			class="em-h-8 em-w-8 em-rounded-full em-bg-blue-100 em-flex em-items-center em-justify-center">
																			<svg class="em-h-4 em-w-4 em-text-blue-600"
																				fill="none" stroke="currentColor"
																				viewBox="0 0 24 24">
																				<path stroke-linecap="round"
																					stroke-linejoin="round" stroke-width="2"
																					d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z">
																				</path>
																			</svg>
																		</div>
																	</div>
																	<div class="em-ml-4">
																		<div class="em-text-sm em-font-medium em-text-gray-900">
																			<?php echo ucwords($tkt_name); ?>
																		</div>
																		<div class="em-text-sm em-text-gray-500">
																			<?php echo $event_currency_symbol . $tkt_price; ?>
																		</div>
																	</div>
																</div>
															</td>
															<td class="em-px-4 em-py-4 em-whitespace-nowrap">
																<?php
																$em_tkt_qty_name = 'em_tkt_qty_' . $ticket_id;
																$em_tkt_qty = isset($Event_Monster_Free_settings[$em_tkt_qty_name]) ? $Event_Monster_Free_settings[$em_tkt_qty_name] : '100';
																?>
																<input type="number" name="<?php echo $em_tkt_qty_name; ?>"
																	value="<?php echo esc_attr($em_tkt_qty); ?>"
																	class="em-w-20 em-border em-border-gray-300 em-rounded-md em-px-2 em-py-1 em-text-sm focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500"
																	min="1" max="9999">
															</td>
															<td class="em-px-4 em-py-4 em-whitespace-nowrap">
																<?php
																$em_tkt_per_user_name = 'em_tkt_per_user_' . $ticket_id;
																$em_tkt_per_user = isset($Event_Monster_Free_settings[$em_tkt_per_user_name]) ? $Event_Monster_Free_settings[$em_tkt_per_user_name] : '10';
																?>
																<input type="number" name="<?php echo $em_tkt_per_user_name; ?>"
																	value="<?php echo esc_attr($em_tkt_per_user); ?>"
																	class="em-w-20 em-border em-border-gray-300 em-rounded-md em-px-2 em-py-1 em-text-sm focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500"
																	min="1" max="100">
															</td>
														</tr>
														<?php
														$i++;
													}
												} else {
													?>
													<tr>
														<td colspan="4"
															class="em-px-4 em-py-8 em-text-center em-text-gray-500">
															<div class="em-flex em-flex-col em-items-center em-gap-2">
																<svg class="em-h-12 em-w-12 em-text-gray-300" fill="none"
																	stroke="currentColor" viewBox="0 0 24 24">
																	<path stroke-linecap="round" stroke-linejoin="round"
																		stroke-width="2"
																		d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z">
																	</path>
																</svg>
																<p class="em-text-sm">
																	<?php _e('No tickets available. Please create tickets first.', 'event-monster'); ?>
																</p>
															</div>
														</td>
													</tr>
													<?php
												}
												?>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							
							<div class="em-mt-6 em-p-6 em-bg-gradient-to-r em-from-indigo-50 em-to-purple-50 em-rounded-xl em-border em-border-indigo-100 em-shadow-sm em-text-center">
								<h3 class="em-font-bold em-text-lg em-mb-2 em-text-indigo-900">
									🚀 Advanced Ticket Settings - Pro Feature
								</h3>
								<p class="em-text-indigo-700 em-mb-4">
									Unlock ticket capacities, varying pricing options, and seating plans with Event Monster Pro.
								</p>
								<a href="https://developer.suspended.dev/event-monster-pro" target="_blank" class="em-inline-block em-bg-indigo-600 hover:em-bg-indigo-700 em-text-white em-font-medium em-py-2 em-px-6 em-rounded-lg em-transition-colors">
									Upgrade to Pro
								</a>
							</div>

						</div>
					</div>

					<div id="em-tab-gallery" class="settings-tab em-hidden">
						<div class="em-bg-gradient-to-r em-from-purple-50 em-to-pink-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-purple-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M4 3C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3H4ZM19 19H5V5H19V19Z"
											fill="#8B5CF6" />
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M8.5 10C9.32843 10 10 9.32843 10 8.5C10 7.67157 9.32843 7 8.5 7C7.67157 7 7 7.67157 7 8.5C7 9.32843 7.67157 10 8.5 10Z"
											fill="#8B5CF6" />
										<path fill-rule="evenodd" clip-rule="evenodd"
											d="M5 16L8 13L11 16L15 12L19 16V19H5V16Z" fill="#8B5CF6" />
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">Gallery Settings</h2>
									<p class="em-text-sm em-text-gray-600 em-mt-1">Configure event media, gallery, and
										visual content</p>
								</div>
							</div>
						</div>

						<div class="em-p-6 em-space-y-8">
							<!-- Event Media Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-blue-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M4 16L10 10L16 16" stroke="#3B82F6" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M14 14L16 12L20 16" stroke="#3B82F6" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<rect x="3" y="3" width="18" height="18" rx="2" stroke="#3B82F6"
													stroke-width="2" />
												<circle cx="8.5" cy="8.5" r="1.5" stroke="#3B82F6" stroke-width="2" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Event Logo, Banner & Gallery', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Choose media type and upload content
												for your event</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="logo_upd"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Media Type', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Select the type of media to display
											</p>
										</div>
										<select id="logo_upd" name="logo_upd"
											class="em-w-2/3 em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors">
											<?php $saved_media_type = isset($Event_Monster_Free_settings['logo_upd']) ? $Event_Monster_Free_settings['logo_upd'] : 'image'; ?>
											<option value="image" <?php selected($saved_media_type, 'image'); ?>>
												<?php _e('Image', 'event-monster'); ?>
											</option>
											<option value="video" <?php selected($saved_media_type, 'video'); ?>>
												<?php _e('Video', 'event-monster'); ?>
											</option>
											<option value="logo" <?php selected($saved_media_type, 'logo'); ?>>
												<?php _e('Icon', 'event-monster'); ?>
											</option>
										</select>
									</div>

									<!-- Image Upload Option -->
									<div id="em-media-type-image"
										class="em-media-type-option em-p-4 em-bg-blue-50 em-border em-border-blue-200 em-rounded-lg">
										<div class="em-flex em-justify-between em-items-start em-gap-6">
											<div class="em-flex-1">
												<div class="em-flex em-items-center em-gap-2 em-mb-2">
													<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
														xmlns="http://www.w3.org/2000/svg">
														<path d="M4 16L10 10L16 16" stroke="#3B82F6" stroke-width="2"
															stroke-linecap="round" stroke-linejoin="round" />
														<rect x="3" y="3" width="18" height="18" rx="2" stroke="#3B82F6"
															stroke-width="2" />
													</svg>
													<h4 class="em-text-sm em-font-semibold em-text-blue-800">
														<?php _e('Upload Image', 'event-monster'); ?>
													</h4>
												</div>
												<p class="em-text-xs em-text-blue-600 em-mb-3">Upload a banner image for
													your event</p>
												<button id="upload_image_button" type="button"
													class="em-inline-flex em-items-center em-px-4 em-py-2 em-border em-border-blue-300 em-rounded-md em-shadow-sm em-text-sm em-font-medium em-text-blue-700 em-bg-white hover:em-bg-blue-50 focus:em-outline-none focus:em-ring-2 focus:em-ring-blue-500 em-transition-colors">
													<svg class="em-w-4 em-h-4 em-mr-2" fill="none" stroke="currentColor"
														viewBox="0 0 24 24">
														<path stroke-linecap="round" stroke-linejoin="round"
															stroke-width="2"
															d="M7 16A7 7 0 1 0 1.05 10.05L7 16zm0 0l8.5-8.5M15 7a2 2 0 1 1-4 0 2 2 0 0 1 4 0z">
														</path>
													</svg>
													<?php _e('Upload Image', 'event-monster'); ?>
												</button>
											</div>
											<div class="em-flex-shrink-0">
												<?php $em_upload_image = isset($Event_Monster_Free_settings['em_upload_image']) ? esc_url($Event_Monster_Free_settings['em_upload_image']) : ''; ?>
												<div class="em-relative em-group">
													<img id="upload_single_image_preview"
														src="<?php echo $em_upload_image ?: EM_FREE_PLUGIN_URL . 'images/placeholder-840x630.png'; ?>"
														data-placeholder="<?php echo EM_FREE_PLUGIN_URL . 'images/placeholder-840x630.png'; ?>"
														class="em-w-48 em-h-32 em-object-cover em-border-2 em-border-blue-200 em-rounded-lg em-shadow-sm">
													<input id="em_upload_image" type="hidden" name="em_upload_image"
														value="<?php echo $em_upload_image; ?>" />
												</div>
											</div>
										</div>
									</div>

									<!-- Video Upload Option -->
									<div id="em-media-type-video"
										class="em-media-type-option em-p-4 em-bg-red-50 em-border em-border-red-200 em-rounded-lg">
										<div class="em-flex em-items-center em-gap-2 em-mb-4">
											<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M23 7L16 12L23 17V7Z" stroke="#EF4444" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<rect x="1" y="5" width="15" height="14" rx="2" stroke="#EF4444"
													stroke-width="2" />
											</svg>
											<h4 class="em-text-sm em-font-semibold em-text-red-800">
												<?php _e('Video Configuration', 'event-monster'); ?>
											</h4>
										</div>

										<div class="em-space-y-4">
											<div class="em-flex em-justify-between em-items-center">
												<label
													class="em-block em-text-sm em-font-medium em-text-red-700"><?php _e('Video Provider', 'event-monster'); ?></label>
												<div class="em-flex em-p-1 em-bg-red-100 em-rounded-lg">
													<?php $saved_video_provider = isset($Event_Monster_Free_settings['em_video_option']) ? $Event_Monster_Free_settings['em_video_option'] : 'youtube'; ?>
													<label
														class="em-px-4 em-py-1 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors <?php echo $saved_video_provider === 'youtube' ? 'em-bg-white em-shadow em-text-red-800' : 'em-text-red-600'; ?>">
														<input type="radio" name="em_video_option" value="youtube"
															class="em-sr-only" <?php checked($saved_video_provider, 'youtube'); ?>>
														<?php _e('YouTube', 'event-monster'); ?>
													</label>
													<label
														class="em-px-4 em-py-1 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors <?php echo $saved_video_provider === 'vimeo' ? 'em-bg-white em-shadow em-text-red-800' : 'em-text-red-600'; ?>">
														<input type="radio" name="em_video_option" value="vimeo"
															class="em-sr-only" <?php checked($saved_video_provider, 'vimeo'); ?>>
														<?php _e('Vimeo', 'event-monster'); ?>
													</label>
												</div>
											</div>

											<div class="em-flex em-justify-between em-items-center">
												<div class="em-flex-1">
													<label for="em_upload_video"
														class="em-block em-text-sm em-font-medium em-text-red-700 em-mb-1"><?php _e('Video ID', 'event-monster'); ?></label>
													<p class="em-text-xs em-text-red-600">Enter the video ID from your
														chosen platform</p>
												</div>
												<div class="em-w-2/3">
													<input type="text" id="em_upload_video" name="em_upload_video"
														value="<?php echo isset($Event_Monster_Free_settings['em_upload_video']) ? esc_attr($Event_Monster_Free_settings['em_upload_video']) : ''; ?>"
														class="em-w-full em-border em-border-red-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-red-500 focus:em-border-red-500 em-transition-colors"
														placeholder="e.g., l-pjESIcs10">
													<p class="em-text-xs em-text-red-500 em-mt-1">
														<a href="http://awplife.com/how-to-get-youtube-or-vimeo-video-id/"
															target="_blank"
															class="em-text-red-600 hover:em-underline"><?php _e('How to find the Video ID?', 'event-monster'); ?></a>
													</p>
												</div>
											</div>
										</div>
									</div>

									<!-- Icon Selection Option -->
									<div id="em-media-type-logo"
										class="em-media-type-option em-p-4 em-bg-green-50 em-border em-border-green-200 em-rounded-lg">
										<div class="em-flex em-flex-col em-gap-3">
											<div class="em-flex-1">
												<div class="em-flex em-items-center em-gap-2 em-mb-2">
													<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
														xmlns="http://www.w3.org/2000/svg">
														<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#10B981"
															stroke-width="2" stroke-linecap="round"
															stroke-linejoin="round" />
														<path d="M2 17L12 22L22 17" stroke="#10B981" stroke-width="2"
															stroke-linecap="round" stroke-linejoin="round" />
														<path d="M2 12L12 17L22 12" stroke="#10B981" stroke-width="2"
															stroke-linecap="round" stroke-linejoin="round" />
													</svg>
													<h4 class="em-text-sm em-font-semibold em-text-green-800">
														<?php _e('Select Icon', 'event-monster'); ?>
													</h4>
												</div>
												<p class="em-text-xs em-text-green-600">Choose an icon to represent your
													event</p>
											</div>
											<div class="em-flex em-items-center em-gap-3">
												<input type="text"
													class="em-hidden"
													id="em_upload_icon"
													name="em_upload_icon"
													value="<?php echo isset($Event_Monster_Free_settings['em_upload_icon']) ? esc_attr($Event_Monster_Free_settings['em_upload_icon']) : 'fa-calendar'; ?>"
													data-iconset="fontawesome"
													data-icon="<?php echo isset($Event_Monster_Free_settings['em_upload_icon']) ? esc_attr($Event_Monster_Free_settings['em_upload_icon']) : 'fa-calendar'; ?>" />
												<button type="button"
													class="btn btn-default em-icon-picker-button em-inline-flex em-items-center em-px-4 em-py-2 em-border em-border-green-300 em-rounded-md em-shadow-sm em-text-sm em-font-medium em-text-green-700 em-bg-white hover:em-bg-green-50 focus:em-outline-none focus:em-ring-2 focus:em-ring-green-500 em-transition-colors"
													id="em_icon_picker_btn">
													<i class="fa <?php echo isset($Event_Monster_Free_settings['em_upload_icon']) ? esc_attr($Event_Monster_Free_settings['em_upload_icon']) : 'fa-calendar'; ?> em-mr-2" id="em_selected_icon_display"></i>
													<?php _e('Choose Icon', 'event-monster'); ?>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- Gallery Control Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-indigo-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<rect x="3" y="3" width="7" height="7" rx="1" stroke="#6366F1"
													stroke-width="2" />
												<rect x="14" y="3" width="7" height="7" rx="1" stroke="#6366F1"
													stroke-width="2" />
												<rect x="14" y="14" width="7" height="7" rx="1" stroke="#6366F1"
													stroke-width="2" />
												<rect x="3" y="14" width="7" height="7" rx="1" stroke="#6366F1"
													stroke-width="2" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Gallery Control', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Enable or disable event image gallery</p>
										</div>
									</div>
								</div>

								<div class="em-p-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Enable Gallery', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Show image gallery on event page</p>
										</div>
										<label class="em-relative em-inline-flex em-items-center em-cursor-pointer">
											<?php $em_show_event_gallery = isset($Event_Monster_Free_settings['em_show_event_gallery']) ? $Event_Monster_Free_settings['em_show_event_gallery'] : 'yes'; ?>
											<input type="checkbox" id="em_show_event_gallery"
												name="em_show_event_gallery" value="yes" class="em-sr-only em-peer"
												<?php checked($em_show_event_gallery, 'yes'); ?>
												onchange="toggleSwitch(this)">
											<div
												class="em-relative em-w-11 em-h-6 em-bg-gray-200 peer-focus:em-outline-none peer-focus:em-ring-4 peer-focus:em-ring-indigo-300 em-rounded-full peer peer-checked:after:em-translate-x-full peer-checked:after:em-border-white after:em-content-[''] after:em-absolute after:em-top-[2px] after:em-left-[2px] after:em-bg-white after:em-border-gray-300 after:em-border after:em-rounded-full after:em-h-5 after:em-w-5 after:em-transition-all peer-checked:em-bg-indigo-600">
											</div>
										</label>
									</div>
								</div>
							</div>

							<!-- Gallery Configuration Section -->
							<div id="em-gallery-settings-wrapper" class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-indigo-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#6366F1" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 17L12 22L22 17" stroke="#6366F1" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 12L12 17L22 12" stroke="#6366F1" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Gallery Configuration', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Manage your event photo gallery images</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
										<!-- Starter Version Limit Notice -->
										<div class="em-bg-amber-50 em-border em-border-amber-200 em-rounded-lg em-p-3 em-mb-4">
											<div class="em-flex em-items-center em-gap-2">
												<svg class="em-w-5 em-h-5 em-text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
												</svg>
												<span class="em-text-sm em-text-amber-800">
													<strong>Starter Limit:</strong> <?php echo EM_STARTER_GALLERY_LIMIT; ?> images max.
													<a href="https://awplife.com/account/shop/" target="_blank" class="em-text-amber-700 em-underline hover:em-text-amber-900">Upgrade to Pro</a> for unlimited.
												</span>
											</div>
										</div>
										<div class="em-flex em-justify-between em-items-start">
											<div class="em-flex-1">
												<label for="em_event_gallery"
													class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Upload Images', 'event-monster'); ?></label>
												<p class="em-text-xs em-text-gray-500 em-mb-3">Add multiple images to
													your event gallery <span id="gallery-count" class="em-font-semibold"></span></p>
												<div class="em-flex em-gap-2">
													<button id="upload_gallery_button" type="button"
														class="em-inline-flex em-items-center em-px-4 em-py-2 em-border em-border-indigo-300 em-rounded-md em-shadow-sm em-text-sm em-font-medium em-text-indigo-700 em-bg-white hover:em-bg-indigo-50 focus:em-outline-none focus:em-ring-2 focus:em-ring-indigo-500 em-transition-colors">
														<svg class="em-w-4 em-h-4 em-mr-2" fill="none"
															stroke="currentColor" viewBox="0 0 24 24">
															<path stroke-linecap="round" stroke-linejoin="round"
																stroke-width="2" d="M12 6V4M12 6V8M12 6H10M12 6H14">
															</path>
														</svg>
														<?php _e('Add/Select Images', 'event-monster'); ?>
													</button>
													<button id="remove_gallery_button" type="button"
														class="em-inline-flex em-items-center em-px-4 em-py-2 em-border em-border-red-300 em-rounded-md em-shadow-sm em-text-sm em-font-medium em-text-red-700 em-bg-white hover:em-bg-red-50 focus:em-outline-none focus:em-ring-2 focus:em-ring-red-500 em-transition-colors">
														<svg class="em-w-4 em-h-4 em-mr-2" fill="none"
															stroke="currentColor" viewBox="0 0 24 24">
															<path stroke-linecap="round" stroke-linejoin="round"
																stroke-width="2"
																d="M19 7L5 7M10 11V17M14 11V17M6 7L8 21H16L18 7"></path>
														</svg>
														<?php _e('Remove All Images', 'event-monster'); ?>
													</button>

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

										<div id="gallery-preview-container" class="em-grid em-gap-3" style="grid-template-columns: repeat(10, minmax(0, 1fr));">
											<?php
											$gallery_images = isset($Event_Monster_Free_settings['em_event_gallery']) ? $Event_Monster_Free_settings['em_event_gallery'] : array();
											// Limit gallery images to starter limit
											if (!empty($gallery_images)) {
												$gallery_images = array_slice($gallery_images, 0, EM_STARTER_GALLERY_LIMIT);
												foreach ($gallery_images as $image_id) {
													$image_url = wp_get_attachment_thumb_url($image_id);
													if ($image_url) {
														echo '<div class="gallery-item em-relative em-group em-bg-white em-border-2 em-border-gray-200 em-rounded-lg em-overflow-hidden em-shadow-sm hover:em-shadow-md em-transition-shadow em-aspect-square">
															<img src="' . esc_url($image_url) . '" class="em-w-full em-h-full em-object-cover">
															<input type="hidden" name="em_event_gallery[]" value="' . esc_attr($image_id) . '">
															<button type="button" class="remove-gallery-item em-absolute em-top-1 em-right-1 em-bg-red-500 em-text-white em-rounded-full em-w-6 em-h-6 em-flex em-items-center em-justify-center em-text-xs em-opacity-0 group-hover:em-opacity-100 em-transition-opacity hover:em-bg-red-600">&times;</button>
														</div>';
													}
												}
											}
											?>
										</div>
									</div>

							<!-- Gallery Display Settings -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200 em-mt-6">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-yellow-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#F59E0B" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 17L12 22L22 17" stroke="#F59E0B" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 12L12 17L22 12" stroke="#F59E0B" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Gallery Display Settings', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Configure how your gallery appears on
												the frontend</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="em_gal_thumb_size"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Thumbnail Size', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Choose the size for gallery
												thumbnails</p>
										</div>
										<select id="em_gal_thumb_size" name="em_gal_thumb_size"
											class="em-w-2/3 em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-yellow-500 focus:em-border-yellow-500 em-transition-colors">
											<?php $em_gal_thumb_size = isset($Event_Monster_Free_settings['em_gal_thumb_size']) ? $Event_Monster_Free_settings['em_gal_thumb_size'] : 'full'; ?>
											<option value="thumbnail" <?php selected($em_gal_thumb_size, 'thumbnail'); ?>>Thumbnail (150x150)</option>
											<option value="medium" <?php selected($em_gal_thumb_size, 'medium'); ?>>
												Medium (300x169)</option>
											<option value="large" <?php selected($em_gal_thumb_size, 'large'); ?>>Large
												(840x473)</option>
											<option value="full" <?php selected($em_gal_thumb_size, 'full'); ?>>Full
												Size (1280x720)</option>
										</select>
									</div>

									<!-- Pro Settings Banner -->
									<div class="em-bg-gradient-to-r em-from-indigo-50 em-to-blue-50 em-border em-border-indigo-100 em-rounded-lg em-p-4 em-mt-6 em-flex em-justify-between em-items-center">
										<div>
											<h4 class="em-text-sm em-font-bold em-text-indigo-800 em-mb-1">
												<?php _e('Advanced Gallery Options', 'event-monster'); ?>
												<span style="background: linear-gradient(to right, #facc15, #f97316); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: bold; vertical-align: middle; margin-left: 5px;">PRO</span>
											</h4>
											<p class="em-text-xs em-text-indigo-600">
												Unlock advanced grid layouts, thumbnail spacing, customizable lightboxes, and modern hover effects with Event Monster Pro.
											</p>
										</div>
										<a href="<?php echo esc_url(admin_url('edit.php?post_type=awl_event_monster&page=em-upgrade-page')); ?>" class="em-shrink-0 em-bg-indigo-600 hover:em-bg-indigo-700 em-text-white em-text-xs em-font-semibold em-px-4 em-py-2 em-rounded-md em-transition-colors">
											<?php _e('Upgrade Now', 'event-monster'); ?>
										</a>
									</div>
								</div>
							</div>

						</div>
						<!-- End of em-gallery-settings-wrapper -->
						
							<div class="em-mt-6 em-p-6 em-bg-gradient-to-r em-from-indigo-50 em-to-purple-50 em-rounded-xl em-border em-border-indigo-100 em-shadow-sm em-text-center">
								<h3 class="em-font-bold em-text-lg em-mb-2 em-text-indigo-900">
									🚀 Event Gallery - Pro Feature
								</h3>
								<p class="em-text-indigo-700 em-mb-4">
									Add multiple images to your event gallery with Event Monster Pro.
								</p>
								<a href="https://developer.suspended.dev/event-monster-pro" target="_blank" class="em-inline-block em-bg-indigo-600 hover:em-bg-indigo-700 em-text-white em-font-medium em-py-2 em-px-6 em-rounded-lg em-transition-colors">
									Upgrade to Pro
								</a>
							</div>

						</div>
					</div>

					<!-- Schedule Tab -->
					<div id="em-tab-schedule" class="settings-tab em-hidden">
						<div class="em-bg-gradient-to-r em-from-indigo-50 em-to-purple-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-indigo-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path
											d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z"
											stroke="#6366F1" stroke-width="2" stroke-linecap="round"
											stroke-linejoin="round" />
										<path d="M11 13H16M8 13H8.01M11 17H16M8 17H8.01" stroke="#6366F1"
											stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">Event Schedule</h2>
									<p class="em-text-sm em-text-gray-600 em-mt-1">Create a detailed timeline for your
										event</p>
								</div>
							</div>
						</div>

						<div class="em-p-6 em-space-y-6">
							<!-- Schedule Control Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-indigo-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 6V12L16 14" stroke="#6366F1" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<circle cx="12" cy="12" r="10" stroke="#6366F1" stroke-width="2" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Schedule Control', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Enable or disable event schedule display</p>
										</div>
									</div>
								</div>

								<div class="em-p-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Show Event Schedule', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Display a timeline of event activities</p>
										</div>
										<label class="em-relative em-inline-flex em-items-center em-cursor-pointer">
											<?php $em_show_schedule = isset($Event_Monster_Free_settings['em_show_schedule']) ? $Event_Monster_Free_settings['em_show_schedule'] : 'no'; ?>
											<input type="checkbox" id="em_show_schedule" name="em_show_schedule"
												value="yes" class="em-sr-only em-peer" <?php checked($em_show_schedule, 'yes'); ?>
												onchange="toggleSwitch(this)">
											<div
												class="em-relative em-w-11 em-h-6 em-bg-gray-200 peer-focus:em-outline-none peer-focus:em-ring-4 peer-focus:em-ring-indigo-300 em-rounded-full peer peer-checked:after:em-translate-x-full peer-checked:after:em-border-white after:em-content-[''] after:em-absolute after:em-top-[2px] after:em-left-[2px] after:em-bg-white after:em-border-gray-300 after:em-border after:em-rounded-full after:em-h-5 after:em-w-5 after:em-transition-all peer-checked:em-bg-indigo-600">
											</div>
										</label>
									</div>
								</div>
							</div>

							<!-- Schedule Configuration Section -->
							<div id="em-schedule-settings-wrapper" class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-indigo-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#6366F1" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 17L12 22L22 17" stroke="#6366F1" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 12L12 17L22 12" stroke="#6366F1" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Schedule Configuration', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Configure schedule heading and timeline items</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
								<!-- Schedule Heading -->
								<div class="em-bg-white em-p-6 em-rounded-xl em-shadow-sm em-border em-border-gray-200">
									<div class="em-flex em-items-center em-gap-3 em-mb-4">
									<div class="em-p-2 em-bg-indigo-100 em-rounded-lg">
										<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
											xmlns="http://www.w3.org/2000/svg">
											<path d="M4 7H20M10 11H20M4 15H20" stroke="#6366F1" stroke-width="2"
												stroke-linecap="round" stroke-linejoin="round" />
										</svg>
									</div>
									<div>
										<h3 class="em-text-lg em-font-semibold em-text-gray-800">Schedule Section
											Heading</h3>
										<p class="em-text-sm em-text-gray-500">Customize the schedule section title</p>
									</div>
								</div>
								<div>
									<?php $em_schedule_heading = isset($Event_Monster_Free_settings['em_schedule_heading']) ? $Event_Monster_Free_settings['em_schedule_heading'] : 'Event Schedule'; ?>
									<input type="text" name="em_schedule_heading"
										value="<?php echo esc_attr($em_schedule_heading); ?>"
										class="em-w-full em-px-4 em-py-3 em-border em-border-gray-300 em-rounded-lg focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500"
										placeholder="Event Schedule">
								</div>
							</div>

							<!-- Schedule Items -->
							<div class="em-bg-white em-p-6 em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-flex em-items-center em-justify-between em-mb-6">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-indigo-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path
													d="M12 2L15.09 8.26L22 9L17 14L18.18 21L12 17.77L5.82 21L7 14L2 9L8.91 8.26L12 2Z"
													stroke="#6366F1" stroke-width="2" stroke-linecap="round"
													stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">Schedule Items</h3>
											<p class="em-text-sm em-text-gray-500">Add timeline items for your event <span id="schedule-count" class="em-font-semibold"></span></p>
										</div>
									</div>
									<button type="button" id="add-schedule-item"
										class="em-inline-flex em-items-center em-gap-2 em-px-4 em-py-2 em-bg-indigo-600 em-text-white em-rounded-lg hover:em-bg-indigo-700 em-transition-colors">
										<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
											xmlns="http://www.w3.org/2000/svg">
											<path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2"
												stroke-linecap="round" stroke-linejoin="round" />
										</svg>
										Add Schedule Item
									</button>
								</div>

								<!-- Starter Version Limit Notice -->
								<div class="em-bg-amber-50 em-border em-border-amber-200 em-rounded-lg em-p-3 em-mb-4">
									<div class="em-flex em-items-center em-gap-2">
										<svg class="em-w-5 em-h-5 em-text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
										</svg>
										<span class="em-text-sm em-text-amber-800">
											<strong>Starter Limit:</strong> <?php echo EM_STARTER_SCHEDULE_LIMIT; ?> schedule items max.
											<a href="https://awplife.com/account/shop/" target="_blank" class="em-text-amber-700 em-underline hover:em-text-amber-900">Upgrade to Pro</a> for unlimited.
										</span>
									</div>
								</div>

								<div id="schedule-items-container" class="em-space-y-4">
									<?php
									$em_schedule_items = isset($Event_Monster_Free_settings['em_schedule_items']) ? $Event_Monster_Free_settings['em_schedule_items'] : array();
									if (empty($em_schedule_items)) {
										$em_schedule_items = array(array('date' => '', 'time' => '', 'title' => '', 'description' => '', 'speaker' => '', 'location' => ''));
									}
									// Limit schedule items to starter limit
									$em_schedule_items = array_slice($em_schedule_items, 0, EM_STARTER_SCHEDULE_LIMIT);

									// Get event dates for schedule date options
									$em_start_date = isset($Event_Monster_Free_settings['em_start_date']) ? $Event_Monster_Free_settings['em_start_date'] : date("Y-m-d");
									$em_end_date = isset($Event_Monster_Free_settings['em_end_date']) ? $Event_Monster_Free_settings['em_end_date'] : date("Y-m-d", strtotime("+2 day"));
									$is_multi_day_event = ($em_start_date !== $em_end_date);

									// Generate date options for multi-day events
									$date_options = array();
									if ($is_multi_day_event) {
										$current_date = strtotime($em_start_date);
										$end_timestamp = strtotime($em_end_date);
										$day_count = 1;
										while ($current_date <= $end_timestamp) {
											$date_options[] = array(
												'value' => date('Y-m-d', $current_date),
												'label' => 'Day ' . $day_count . ' - ' . date_i18n(get_option('date_format'), $current_date)
											);
											$current_date = strtotime('+1 day', $current_date);
											$day_count++;
										}
									}

									foreach ($em_schedule_items as $index => $item) {
										$date = isset($item['date']) ? $item['date'] : '';
										$time = isset($item['time']) ? $item['time'] : '';
										$title = isset($item['title']) ? $item['title'] : '';
										$description = isset($item['description']) ? $item['description'] : '';
										$speaker = isset($item['speaker']) ? $item['speaker'] : '';
										$location = isset($item['location']) ? $item['location'] : '';
										?>
										<div
											class="schedule-item em-p-4 em-border em-border-gray-200 em-rounded-lg em-bg-gray-50">
											<div class="em-flex em-items-center em-justify-between em-mb-4">
												<h4 class="em-text-md em-font-semibold em-text-gray-700">Schedule Item
													#<?php echo ($index + 1); ?></h4>
												<button type="button"
													class="remove-schedule-item em-text-red-600 hover:em-text-red-800 em-transition-colors">
													<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
														xmlns="http://www.w3.org/2000/svg">
														<path d="M18 6L6 18M6 6L18 18" stroke="currentColor"
															stroke-width="2" stroke-linecap="round"
															stroke-linejoin="round" />
													</svg>
												</button>
											</div>

											<div class="em-grid em-grid-cols-1 md:em-grid-cols-3 em-gap-4">
												<div>
													<label
														class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Date
														<?php if (!$is_multi_day_event): ?>
															<span class="em-text-xs em-text-gray-500">(single day)</span>
														<?php endif; ?>
													</label>
													<?php if ($is_multi_day_event): ?>
														<select name="em_schedule_items[<?php echo $index; ?>][date]"
															class="schedule-date-field em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500">
															<option value="">Select Day</option>
															<?php foreach ($date_options as $option): ?>
																<option value="<?php echo esc_attr($option['value']); ?>" <?php selected($date, $option['value']); ?>>
																	<?php echo esc_html($option['label']); ?>
																</option>
															<?php endforeach; ?>
														</select>
													<?php else: ?>
														<input type="text"
															value="<?php echo esc_attr(date_i18n(get_option('date_format'), strtotime($em_start_date))); ?>"
															disabled
															class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md em-bg-gray-100 em-text-gray-500 em-cursor-not-allowed">
														<input type="hidden" name="em_schedule_items[<?php echo $index; ?>][date]" value="<?php echo esc_attr($em_start_date); ?>">
													<?php endif; ?>
												</div>
												<div>
													<label
														class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Time</label>
													<input type="time" name="em_schedule_items[<?php echo $index; ?>][time]"
														value="<?php echo esc_attr($time); ?>"
														class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500">
												</div>
												<div>
													<label
														class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Title</label>
													<input type="text"
														name="em_schedule_items[<?php echo $index; ?>][title]"
														value="<?php echo esc_attr($title); ?>"
														class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500"
														placeholder="Activity title">
												</div>
												<div class="md:em-col-span-3">
													<label
														class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Description</label>
													<textarea name="em_schedule_items[<?php echo $index; ?>][description]"
														rows="2"
														class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500"
														placeholder="Brief description of the activity"><?php echo esc_textarea($description); ?></textarea>
												</div>
												<div>
													<label
														class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Speaker/Presenter</label>
													<input type="text"
														name="em_schedule_items[<?php echo $index; ?>][speaker]"
														value="<?php echo esc_attr($speaker); ?>"
														class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500"
														placeholder="Speaker name">
												</div>
												<div>
													<label
														class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Location</label>
													<input type="text"
														name="em_schedule_items[<?php echo $index; ?>][location]"
														value="<?php echo esc_attr($location); ?>"
														class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500"
														placeholder="Room/venue location">
												</div>
											</div>
										</div>
									<?php } ?>
								</div>

							</div>

								</div>
							</div>
							<!-- End of em-schedule-settings-wrapper -->
							
							<div class="em-mt-6 em-p-6 em-bg-gradient-to-r em-from-indigo-50 em-to-purple-50 em-rounded-xl em-border em-border-indigo-100 em-shadow-sm em-text-center">
								<h3 class="em-font-bold em-text-lg em-mb-2 em-text-indigo-900">
									🚀 Event Schedule - Pro Feature
								</h3>
								<p class="em-text-indigo-700 em-mb-4">
									Add unlimited schedule items to your event schedule with Event Monster Pro.
								</p>
								<a href="https://developer.suspended.dev/event-monster-pro" target="_blank" class="em-inline-block em-bg-indigo-600 hover:em-bg-indigo-700 em-text-white em-font-medium em-py-2 em-px-6 em-rounded-lg em-transition-colors">
									Upgrade to Pro
								</a>
							</div>

						</div>
					</div>

					<div id="em-tab-people" class="settings-tab em-hidden">
						<div class="em-bg-gradient-to-r em-from-blue-50 em-to-indigo-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-blue-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path
											d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
											stroke="#3B82F6" stroke-width="2" />
										<path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z"
											stroke="#3B82F6" stroke-width="2" />
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">Organizers & People</h2>
									<p class="em-text-sm em-text-gray-600 em-mt-1">Manage event organizers and
										speakers/artists</p>
								</div>
							</div>
						</div>

						<div class="em-p-6 em-space-y-8">
							<!-- Organizers Control Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-green-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path
													d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"
													stroke="#10B981" stroke-width="2" stroke-linecap="round"
													stroke-linejoin="round" />
												<circle cx="12" cy="7" r="4" stroke="#10B981" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Organizers Control', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Enable or disable event organizers display</p>
										</div>
									</div>
								</div>

								<div class="em-p-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Enable Organizers', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Show Organizers on event page</p>
										</div>
										<label class="em-relative em-inline-flex em-items-center em-cursor-pointer">
											<?php $em_show_organizer = isset($Event_Monster_Free_settings['em_show_organizer']) ? $Event_Monster_Free_settings['em_show_organizer'] : 'yes'; ?>
											<input type="checkbox" id="em_show_organizer" name="em_show_organizer"
												value="yes" class="em-sr-only em-peer" <?php checked($em_show_organizer, 'yes'); ?>
												onchange="toggleSwitch(this)">
											<div
												class="em-relative em-w-11 em-h-6 em-bg-gray-200 peer-focus:em-outline-none peer-focus:em-ring-4 peer-focus:em-ring-green-300 em-rounded-full peer peer-checked:after:em-translate-x-full peer-checked:after:em-border-white after:em-content-[''] after:em-absolute after:em-top-[2px] after:em-left-[2px] after:em-bg-white after:em-border-gray-300 after:em-border after:em-rounded-full after:em-h-5 after:em-w-5 after:em-transition-all peer-checked:em-bg-green-600">
											</div>
										</label>
									</div>
								</div>
							</div>

							<!-- Organizers Configuration Section -->
							<div id="em-organizers-settings-wrapper" class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-green-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#10B981" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 17L12 22L22 17" stroke="#10B981" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 12L12 17L22 12" stroke="#10B981" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Organizers Configuration', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Add contact information for event organizers</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
									<!-- Section Heading -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="em_organizer_heading"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Section
												Heading</label>
											<p class="em-text-xs em-text-gray-500">Title displayed above organizers</p>
										</div>
										<input type="text" id="em_organizer_heading" name="em_organizer_heading"
											value="<?php echo isset($Event_Monster_Free_settings['em_organizer_heading']) ? esc_attr($Event_Monster_Free_settings['em_organizer_heading']) : 'Organized By'; ?>"
											class="em-w-2/3 em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-green-500 focus:em-border-green-500 em-transition-colors"
											placeholder="Organized By">
									</div>

									<div id="em-organizers-repeater">
										<div class="em-space-y-4" id="em-organizers-wrapper">
											<?php
											$organizers = isset($Event_Monster_Free_settings['em_organizer_name']) ? $Event_Monster_Free_settings['em_organizer_name'] : array('');
											$name = is_array($organizers) ? $organizers[0] : $organizers;
											$phone = isset($Event_Monster_Free_settings['em_organizer_phone'][0]) ? $Event_Monster_Free_settings['em_organizer_phone'][0] : '';
											$email = isset($Event_Monster_Free_settings['em_organizer_email'][0]) ? $Event_Monster_Free_settings['em_organizer_email'][0] : '';
											$website = isset($Event_Monster_Free_settings['em_organizer_website'][0]) ? $Event_Monster_Free_settings['em_organizer_website'][0] : '';
											?>
											<div class="em-p-5 em-border em-border-gray-200 em-rounded-lg em-bg-gray-50 em-transition-colors em-duration-200">
												<div class="em-grid em-grid-cols-1 md:em-grid-cols-2 em-gap-4">
													<div class="em-space-y-1">
														<label class="em-text-sm em-font-medium em-text-gray-700">Organizer Name</label>
														<input type="text" name="em_organizer_name[]" value="<?php echo esc_attr($name); ?>" class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors" placeholder="Enter organizer name">
													</div>
													<div class="em-space-y-1">
														<label class="em-text-sm em-font-medium em-text-gray-700">Phone Number</label>
														<input type="text" name="em_organizer_phone[]" value="<?php echo esc_attr($phone); ?>" class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors" placeholder="Enter phone number">
													</div>
													<div class="em-space-y-1">
														<label class="em-text-sm em-font-medium em-text-gray-700">Email Address</label>
														<input type="email" name="em_organizer_email[]" value="<?php echo esc_attr($email); ?>" class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors" placeholder="Enter email address">
													</div>
													<div class="em-space-y-1">
														<label class="em-text-sm em-font-medium em-text-gray-700">Website URL</label>
														<input type="url" name="em_organizer_website[]" value="<?php echo esc_attr($website); ?>" class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors" placeholder="https://example.com">
													</div>
												</div>
											</div>
										</div>
									</div>

								</div>
							</div>
							<!-- End of em-organizers-settings-wrapper -->

							<!-- Artists/Speakers Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-purple-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2L3.09 8.26L12 14L20.91 8.26L12 2Z" stroke="#8B5CF6"
													stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
												<path d="M3.09 15.74L12 22L20.91 15.74" stroke="#8B5CF6"
													stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
												<path d="M3.09 8.26L12 14.52L20.91 8.26" stroke="#8B5CF6"
													stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">Artists / Speakers
											</h3>
											<p class="em-text-sm em-text-gray-500">Add performers, speakers, or featured
												guests</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
									<!-- Starter Version Limit Notice -->
									<div class="em-bg-amber-50 em-border em-border-amber-200 em-rounded-lg em-p-3 em-mb-4">
										<div class="em-flex em-items-center em-gap-2">
											<svg class="em-w-5 em-h-5 em-text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
											</svg>
											<span class="em-text-sm em-text-amber-800">
												<strong>Starter Limit:</strong> <?php echo EM_STARTER_SPEAKERS_LIMIT; ?> speakers max.
												<a href="https://awplife.com/account/shop/" target="_blank" class="em-text-amber-700 em-underline hover:em-text-amber-900">Upgrade to Pro</a> for unlimited.
											</span>
										</div>
									</div>

									<!-- Section Heading -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="em_speaker_heading"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Section
												Heading</label>
											<p class="em-text-xs em-text-gray-500">Title displayed above speakers <span id="speakers-count" class="em-font-semibold"></span></p>
										</div>
										<input type="text" id="em_speaker_heading" name="em_speaker_heading"
											value="<?php echo isset($Event_Monster_Free_settings['em_speaker_heading']) ? esc_attr($Event_Monster_Free_settings['em_speaker_heading']) : 'Keynote Speakers'; ?>"
											class="em-w-2/3 em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-purple-500 focus:em-border-purple-500 em-transition-colors"
											placeholder="Keynote Speakers">
									</div>

									<div id="em-speakers-repeater">
										<div class="em-space-y-4" id="em-speakers-wrapper">
											<?php
											$speakers = isset($Event_Monster_Free_settings['em_speaker_name']) ? $Event_Monster_Free_settings['em_speaker_name'] : array('');
											$name = is_array($speakers) ? $speakers[0] : $speakers;
											$speciality = isset($Event_Monster_Free_settings['em_speaker_speciality'][0]) ? $Event_Monster_Free_settings['em_speaker_speciality'][0] : '';
											$avatar = isset($Event_Monster_Free_settings['em_speaker_avatar'][0]) ? $Event_Monster_Free_settings['em_speaker_avatar'][0] : '';
											?>
											<div class="em-p-5 em-border em-border-gray-200 em-rounded-lg em-bg-gray-50 em-transition-colors em-duration-200">
												<div class="em-grid em-grid-cols-1 md:em-grid-cols-3 em-gap-4">
													<div class="em-space-y-1">
														<label class="em-text-sm em-font-medium em-text-gray-700">Artist/Speaker Name</label>
														<input type="text" name="em_speaker_name[]" value="<?php echo esc_attr($name); ?>" class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-purple-500 focus:em-border-purple-500 em-transition-colors" placeholder="Enter artist or speaker name">
													</div>
													<div class="em-space-y-1">
														<label class="em-text-sm em-font-medium em-text-gray-700">Speciality/Role</label>
														<input type="text" name="em_speaker_speciality[]" value="<?php echo esc_attr($speciality); ?>" class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-purple-500 focus:em-border-purple-500 em-transition-colors" placeholder="e.g., Singer, Keynote Speaker, DJ">
													</div>
													<div class="em-space-y-1">
														<label class="em-text-sm em-font-medium em-text-gray-700">Avatar Image</label>
														<div class="em-flex em-items-center em-gap-3">
															<div class="em-speaker-avatar-preview em-w-12 em-h-12 em-rounded-full em-bg-purple-100 em-flex em-items-center em-justify-center em-text-purple-600 em-font-bold em-text-lg">
																<?php if (!empty($avatar)): ?>
																	<img src="<?php echo esc_url($avatar); ?>" alt="Speaker Avatar" class="em-w-full em-h-full em-rounded-full em-object-cover">
																<?php else: ?>
																	<?php echo esc_html(strtoupper(substr($name ? $name : '?', 0, 1))); ?>
																<?php endif; ?>
															</div>
															<div class="em-flex-1">
																<input type="hidden" name="em_speaker_avatar[]" value="<?php echo esc_attr($avatar); ?>" class="em-speaker-avatar-input">
																<button type="button" class="em-upload-speaker-avatar em-px-3 em-py-1 em-text-sm em-bg-purple-100 hover:em-bg-purple-200 em-text-purple-700 em-rounded-md em-transition-colors">
																	<?php echo !empty($avatar) ? __('Change Avatar', 'event-monster') : __('Upload Avatar', 'event-monster'); ?>
																</button>
																<?php if (!empty($avatar)): ?>
																	<button type="button" class="em-remove-speaker-avatar em-ml-2 em-px-3 em-py-1 em-text-sm em-bg-red-100 hover:em-bg-red-200 em-text-red-700 em-rounded-md em-transition-colors">
																		<?php _e('Remove', 'event-monster'); ?>
																	</button>
																<?php endif; ?>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							
							<div class="em-mt-6 em-p-6 em-bg-gradient-to-r em-from-indigo-50 em-to-purple-50 em-rounded-xl em-border em-border-indigo-100 em-shadow-sm em-text-center">
								<h3 class="em-font-bold em-text-lg em-mb-2 em-text-indigo-900">
									🚀 Organizers & Artists - Pro Feature
								</h3>
								<p class="em-text-indigo-700 em-mb-4">
									Add unlimited organizers, artists, and speakers with Event Monster Pro.
								</p>
								<a href="https://developer.suspended.dev/event-monster-pro" target="_blank" class="em-inline-block em-bg-indigo-600 hover:em-bg-indigo-700 em-text-white em-font-medium em-py-2 em-px-6 em-rounded-lg em-transition-colors">
									Upgrade to Pro
								</a>
							</div>

						</div>
					</div>

					<div id="em-tab-sponsors" class="settings-tab em-hidden">
						<div class="em-bg-gradient-to-r em-from-yellow-50 em-to-amber-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-yellow-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path d="M12 2L3.09 8.26L12 14L20.91 8.26L12 2Z" stroke="#F59E0B"
											stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M3.09 15.74L12 22L20.91 15.74" stroke="#F59E0B" stroke-width="2"
											stroke-linecap="round" stroke-linejoin="round" />
										<path d="M3.09 8.26L12 14.52L20.91 8.26" stroke="#F59E0B" stroke-width="2"
											stroke-linecap="round" stroke-linejoin="round" />
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">Event Sponsors</h2>
									<p class="em-text-sm em-text-gray-600">Manage sponsor logos and settings</p>
								</div>
							</div>
						</div>

						<div class="em-p-6 em-space-y-6">
							<!-- Sponsors Control Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-yellow-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2L3.09 8.26L12 14L20.91 8.26L12 2Z" stroke="#F59E0B"
													stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
												<path d="M3.09 15.74L12 22L20.91 15.74" stroke="#F59E0B" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M3.09 8.26L12 14.52L20.91 8.26" stroke="#F59E0B" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Sponsors Control', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Enable or disable sponsors display</p>
										</div>
									</div>
								</div>

								<div class="em-p-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Enable Sponsors', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Show sponsors section on the event page</p>
										</div>
										<label class="em-relative em-inline-flex em-items-center em-cursor-pointer">
											<?php $em_show_event_sponsor = isset($Event_Monster_Free_settings['em_show_event_sponsor']) ? $Event_Monster_Free_settings['em_show_event_sponsor'] : 'yes'; ?>
											<input type="checkbox" id="em_show_event_sponsor" name="em_show_event_sponsor"
												value="yes" class="em-sr-only em-peer" <?php checked($em_show_event_sponsor, 'yes'); ?>
												onchange="toggleSwitch(this)">
											<div
												class="em-relative em-w-11 em-h-6 em-bg-gray-200 peer-focus:em-outline-none peer-focus:em-ring-4 peer-focus:em-ring-yellow-300 em-rounded-full peer peer-checked:after:em-translate-x-full peer-checked:after:em-border-white after:em-content-[''] after:em-absolute after:em-top-[2px] after:em-left-[2px] after:em-bg-white after:em-border-gray-300 after:em-border after:em-rounded-full after:em-h-5 after:em-w-5 after:em-transition-all peer-checked:em-bg-yellow-600">
											</div>
										</label>
									</div>
								</div>
							</div>

							<!-- Sponsors Configuration Section -->
							<div id="em-sponsors-settings-wrapper" class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-yellow-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#F59E0B" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 17L12 22L22 17" stroke="#F59E0B" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 12L12 17L22 12" stroke="#F59E0B" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Sponsors Configuration', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Configure sponsor display settings and logos</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
								<!-- Sponsor Settings -->
								<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
									<div class="em-p-6 em-border-b em-border-gray-100">
										<h3 class="em-text-lg em-font-semibold em-text-gray-800">Display Settings</h3>
										<p class="em-text-sm em-text-gray-500">Configure how sponsors appear</p>
									</div>

									<div class="em-p-6 em-space-y-6">
									<!-- Section Heading -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="em_sponsor_heading"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Section
												Heading</label>
											<p class="em-text-xs em-text-gray-500">Title displayed above sponsors</p>
										</div>
										<input type="text" id="em_sponsor_heading" name="em_sponsor_heading"
											value="<?php echo isset($Event_Monster_Free_settings['em_sponsor_heading']) ? esc_attr($Event_Monster_Free_settings['em_sponsor_heading']) : 'Sponsors'; ?>"
											class="em-w-2/3 em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-yellow-500 focus:em-border-yellow-500 em-transition-colors"
											placeholder="Sponsors">
									</div>

									<!-- Link Target -->
									<div class="em-flex em-justify-between em-items-center">
										<label class="em-font-medium">Open Sponsor Links In</label>
										<div class="em-flex em-p-1 em-bg-gray-200 em-rounded-lg js-segmented-control">
											<?php $em_spr_link_tab = isset($Event_Monster_Free_settings['em_spr_link_tab']) ? $Event_Monster_Free_settings['em_spr_link_tab'] : '_blank'; ?>
											<label
												class="em-px-4 em-py-1 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors">
												<input type="radio" name="em_spr_link_tab" value="_blank"
													class="em-sr-only" <?php checked($em_spr_link_tab, '_blank'); ?>>
												New Tab
											</label>
											<label
												class="em-px-4 em-py-1 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors">
												<input type="radio" name="em_spr_link_tab" value="_self"
													class="em-sr-only" <?php checked($em_spr_link_tab, '_self'); ?>>
												Same Tab
											</label>
										</div>
									</div>
								</div>
							</div>

							<!-- Sponsor Logos -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<h3 class="em-text-lg em-font-semibold em-text-gray-800">Sponsor Logos</h3>
									<p class="em-text-sm em-text-gray-500">Add sponsor logos, names, and website links <span id="sponsors-count" class="em-font-semibold"></span>
									</p>
								</div>

								<div class="em-p-6">
									<!-- Starter Version Limit Notice -->
									<div class="em-bg-amber-50 em-border em-border-amber-200 em-rounded-lg em-p-3 em-mb-4">
										<div class="em-flex em-items-center em-gap-2">
											<svg class="em-w-5 em-h-5 em-text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
											</svg>
											<span class="em-text-sm em-text-amber-800">
												<strong>Starter Limit:</strong> <?php echo EM_STARTER_SPONSORS_LIMIT; ?> sponsors max.
												<a href="https://awplife.com/account/shop/" target="_blank" class="em-text-amber-700 em-underline hover:em-text-amber-900">Upgrade to Pro</a> for unlimited.
											</span>
										</div>
									</div>
									<div id="em-sponsors-repeater">
										<div class="em-space-y-4" id="em-sponsors-wrapper">
											<?php
											$sponsor_ids = isset($Event_Monster_Free_settings['em-slide-spr-ids']) ? $Event_Monster_Free_settings['em-slide-spr-ids'] : array('');
											if (empty($sponsor_ids)) {
												$sponsor_ids = array('');
											}
											if (!is_array($sponsor_ids)) {
												$sponsor_ids = array($sponsor_ids);
											}
											// Guarantee exactly 3 sponsor slots
											$sponsor_ids = array_slice(array_pad($sponsor_ids, EM_STARTER_SPONSORS_LIMIT, ''), 0, EM_STARTER_SPONSORS_LIMIT);

											foreach ($sponsor_ids as $key => $image_id) {
												$image_data = !empty($image_id) ? wp_get_attachment_image_src($image_id, 'thumbnail') : null;
												$image_url = $image_data ? $image_data[0] : '';
												$sponsor_name = isset($Event_Monster_Free_settings['em-slide-spr-names'][$key]) ? $Event_Monster_Free_settings['em-slide-spr-names'][$key] : '';
												$sponsor_link = isset($Event_Monster_Free_settings['em-slide-spr-links'][$key]) ? $Event_Monster_Free_settings['em-slide-spr-links'][$key] : '';
												?>
												<div class="em-p-5 em-border em-border-gray-200 em-rounded-lg em-bg-gray-50 em-transition-colors em-duration-200">
													<div class="em-sponsor-logo-uploader em-flex em-items-center em-gap-4 em-mb-4">
														<div class="em-w-24 em-h-16 em-flex em-items-center em-justify-center em-border em-border-gray-300 em-bg-white em-rounded-lg em-overflow-hidden">
															<img src="<?php echo esc_url($image_url); ?>"
																class="em-max-w-full em-max-h-full em-sponsor-logo-preview"
																style="<?php echo empty($image_url) ? 'display:none;' : '' ?>">
															<span class="em-text-gray-400 em-text-sm em-sponsor-logo-placeholder"
																style="<?php echo !empty($image_url) ? 'display:none;' : '' ?>">Logo</span>
														</div>
														<div class="em-flex em-gap-2">
															<input type="hidden" name="em-slide-spr-ids[]" class="em-sponsor-logo-id-input" value="<?php echo esc_attr($image_id); ?>">
															<button type="button" class="em-px-4 em-py-2 em-bg-yellow-600 hover:em-bg-yellow-700 em-text-white em-text-sm em-font-medium em-rounded-md em-transition-colors em-upload-sponsor-logo">Upload Logo</button>
															<button type="button" class="em-px-4 em-py-2 em-bg-red-600 hover:em-bg-red-700 em-text-white em-text-sm em-font-medium em-rounded-md em-transition-colors em-remove-sponsor-logo" style="<?php echo empty($image_url) ? 'display:none;' : '' ?>">Remove</button>
														</div>
													</div>

													<div class="em-grid em-grid-cols-1 md:em-grid-cols-2 em-gap-4">
														<div class="em-space-y-1">
															<label class="em-text-sm em-font-medium em-text-gray-700">Sponsor Name</label>
															<input type="text" name="em-slide-spr-names[]" value="<?php echo esc_attr($sponsor_name); ?>" class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-yellow-500 focus:em-border-yellow-500 em-transition-colors" placeholder="Enter sponsor name">
														</div>
														<div class="em-space-y-1">
															<label class="em-text-sm em-font-medium em-text-gray-700">Website URL</label>
															<input type="url" name="em-slide-spr-links[]" value="<?php echo esc_url($sponsor_link); ?>" class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-yellow-500 focus:em-border-yellow-500 em-transition-colors" placeholder="https://sponsor-website.com">
														</div>
													</div>
												</div>
											<?php } ?>
										</div>
									</div>

									</div>
								</div>
								</div>
							</div>
							<!-- End of em-sponsors-settings-wrapper -->
							
							<div class="em-mt-6 em-p-6 em-bg-gradient-to-r em-from-indigo-50 em-to-purple-50 em-rounded-xl em-border em-border-indigo-100 em-shadow-sm em-text-center">
								<h3 class="em-font-bold em-text-lg em-mb-2 em-text-indigo-900">
									🚀 Sponsors - Pro Feature
								</h3>
								<p class="em-text-indigo-700 em-mb-4">
									Add unlimited sponsors to your event with Event Monster Pro.
								</p>
								<a href="https://developer.suspended.dev/event-monster-pro" target="_blank" class="em-inline-block em-bg-indigo-600 hover:em-bg-indigo-700 em-text-white em-font-medium em-py-2 em-px-6 em-rounded-lg em-transition-colors">
									Upgrade to Pro
								</a>
							</div>

						</div>
					</div>

						<div id="em-tab-social" class="settings-tab em-hidden">
						<div class="em-bg-gradient-to-r em-from-blue-50 em-to-indigo-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-blue-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path
											d="M18 2H15C13.6739 2 12.4021 2.52678 11.4645 3.46447C10.5268 4.40215 10 5.67392 10 7V10H7V14H10V22H14V14H17L18 10H14V7C14 6.73478 14.1054 6.48043 14.2929 6.29289C14.4804 6.10536 14.7348 6 15 6H18V2Z"
											stroke="#3B82F6" stroke-width="2" stroke-linecap="round"
											stroke-linejoin="round" />
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">Social Media</h2>
									<p class="em-text-sm em-text-gray-600">Configure social profiles and share buttons
									</p>
								</div>
							</div>
						</div>

						<div class="em-p-6 em-space-y-6">
							<!-- Social Media Control Section -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-blue-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path
													d="M18 2H15C13.6739 2 12.4021 2.52678 11.4645 3.46447C10.5268 4.40215 10 5.67392 10 7V10H7V14H10V22H14V14H17L18 10H14V7C14 6.73478 14.1054 6.48043 14.2929 6.29289C14.4804 6.10536 14.7348 6 15 6H18V2Z"
													stroke="#3B82F6" stroke-width="2" stroke-linecap="round"
													stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Social Media Control', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Enable or disable social media display</p>
										</div>
									</div>
								</div>

								<div class="em-p-6">
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Enable Social Section', 'event-monster'); ?></label>
											<p class="em-text-xs em-text-gray-500">Show social media section on event page</p>
										</div>
										<label class="em-relative em-inline-flex em-items-center em-cursor-pointer">
											<input type="checkbox" id="em_social_links_enabled"
												name="em_social_links_enabled" value="yes" class="em-sr-only em-peer" <?php checked(isset($Event_Monster_Free_settings['em_social_links_enabled']), true); ?>
												onchange="toggleSwitch(this)">
											<div
												class="em-relative em-w-11 em-h-6 em-bg-gray-200 peer-focus:em-outline-none peer-focus:em-ring-4 peer-focus:em-ring-blue-300 em-rounded-full peer peer-checked:after:em-translate-x-full peer-checked:after:em-border-white after:em-content-[''] after:em-absolute after:em-top-[2px] after:em-left-[2px] after:em-bg-white after:em-border-gray-300 after:em-border after:em-rounded-full after:em-h-5 after:em-w-5 after:em-transition-all peer-checked:em-bg-blue-600">
											</div>
										</label>
									</div>
								</div>
							</div>

							<!-- Social Media Configuration Section -->
							<div id="em-social-settings-wrapper" class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-gap-3">
										<div class="em-p-2 em-bg-blue-100 em-rounded-lg">
											<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#3B82F6" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 17L12 22L22 17" stroke="#3B82F6" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
												<path d="M2 12L12 17L22 12" stroke="#3B82F6" stroke-width="2"
													stroke-linecap="round" stroke-linejoin="round" />
											</svg>
										</div>
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">
												<?php _e('Social Media Configuration', 'event-monster'); ?>
											</h3>
											<p class="em-text-sm em-text-gray-500">Configure social profiles and share buttons</p>
										</div>
									</div>
								</div>

								<div class="em-p-6 em-space-y-6">
								<!-- Display Type Selection -->
								<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
									<div class="em-p-6 em-border-b em-border-gray-100">
										<h3 class="em-text-lg em-font-semibold em-text-gray-800">Display Type</h3>
										<p class="em-text-sm em-text-gray-500">Choose how to display social media content
										</p>
									</div>

									<div class="em-p-6">
									<div class="em-flex em-p-1 em-bg-gray-200 em-rounded-lg js-segmented-control"
										id="em-social-display-type-control">
										<?php $em_social_display_type = isset($Event_Monster_Free_settings['em_social_display_type']) ? $Event_Monster_Free_settings['em_social_display_type'] : 'profile_links'; ?>
										<label
											class="em-px-4 em-py-2 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors">
											<input type="radio" name="em_social_display_type" value="profile_links"
												class="em-sr-only" <?php checked($em_social_display_type, 'profile_links'); ?>>
											<?php _e('Profile Links', 'event-monster'); ?>
										</label>
										<label
											class="em-px-4 em-py-2 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors">
											<input type="radio" name="em_social_display_type" value="share_buttons"
												class="em-sr-only" <?php checked($em_social_display_type, 'share_buttons'); ?>>
											<?php _e('Share Buttons', 'event-monster'); ?>
										</label>
									</div>
								</div>
							</div>

							<!-- Profile Links Container -->
							<div id="em-profile-links-container" data-social-type="profile_links"
								class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<h3 class="em-text-lg em-font-semibold em-text-gray-800">Social Profile Links</h3>
									<p class="em-text-sm em-text-gray-500">Add links to your social media profiles</p>
								</div>

								<div class="em-p-6 em-space-y-6">
									<!-- Link Target Setting -->
									<div class="em-flex em-justify-between em-items-center">
										<label
											class="em-font-medium em-text-gray-900"><?php _e('Open Profile Links In', 'event-monster'); ?></label>
										<div class="em-flex em-p-1 em-bg-gray-200 em-rounded-lg js-segmented-control">
											<?php $em_social_link_target = isset($Event_Monster_Free_settings['em_social_link_target']) ? $Event_Monster_Free_settings['em_social_link_target'] : '_blank'; ?>
											<label
												class="em-px-4 em-py-1 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors">
												<input type="radio" name="em_social_link_target" value="_blank"
													class="em-sr-only" <?php checked($em_social_link_target, '_blank'); ?>>
												<?php _e('New Tab', 'event-monster'); ?>
											</label>
											<label
												class="em-px-4 em-py-1 em-text-sm em-font-medium em-rounded-md em-cursor-pointer em-transition-colors">
												<input type="radio" name="em_social_link_target" value="_self"
													class="em-sr-only" <?php checked($em_social_link_target, '_self'); ?>>
												<?php _e('Same Tab', 'event-monster'); ?>
											</label>
										</div>
									</div>

									<!-- Social Links Repeater -->
									<div id="em-social-repeater">
										<h4 class="em-text-md em-font-semibold em-text-gray-700 em-mb-4">
											<?php _e('Social Profiles', 'event-monster'); ?>
										</h4>
										<div class="em-space-y-4" id="em-social-wrapper">
											<?php
											$social_links = isset($Event_Monster_Free_settings['em_social_links']) && is_array($Event_Monster_Free_settings['em_social_links']) ? $Event_Monster_Free_settings['em_social_links'] : array(array('network' => '', 'url' => ''));
											$social_links = array_slice(array_pad($social_links, 3, array('network' => '', 'url' => '')), 0, 3);
											foreach ($social_links as $key => $link_data) {
												$network = isset($link_data['network']) ? $link_data['network'] : '';
												$url = isset($link_data['url']) ? $link_data['url'] : '';
												?>
												<div class="em-p-4 em-border em-border-gray-200 em-rounded-lg em-bg-gray-50 em-transition-colors em-duration-200">
													<div class="em-grid em-grid-cols-1 md:em-grid-cols-3 em-gap-4">
														<div class="md:em-col-span-1">
															<label class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Network', 'event-monster'); ?></label>
															<select name="em_social_links[<?php echo $key; ?>][network]" class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors">
																<option value="" <?php selected($network, ''); ?>><?php _e('-- Select --', 'event-monster'); ?></option>
																<option value="facebook" <?php selected($network, 'facebook'); ?>><?php _e('Facebook', 'event-monster'); ?></option>
																<option value="x-twitter" <?php selected($network, 'x-twitter'); ?>><?php _e('X (Twitter)', 'event-monster'); ?></option>
																<option value="instagram" <?php selected($network, 'instagram'); ?>><?php _e('Instagram', 'event-monster'); ?></option>
																<option value="linkedin" <?php selected($network, 'linkedin'); ?>><?php _e('LinkedIn', 'event-monster'); ?></option>
																<option value="youtube" <?php selected($network, 'youtube'); ?>><?php _e('YouTube', 'event-monster'); ?></option>
																<option value="tiktok" <?php selected($network, 'tiktok'); ?>><?php _e('TikTok', 'event-monster'); ?></option>
																<option value="pinterest" <?php selected($network, 'pinterest'); ?>><?php _e('Pinterest', 'event-monster'); ?></option>
															</select>
														</div>
														<div class="md:em-col-span-2">
															<label class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1"><?php _e('Profile URL', 'event-monster'); ?></label>
															<input type="url" name="em_social_links[<?php echo $key; ?>][url]" value="<?php echo esc_url($url); ?>" class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors" placeholder="https://facebook.com/your-page">
														</div>
													</div>
												</div>
											<?php } ?>
										</div>
									</div>
								</div>
							</div>

							<!-- Share Buttons Container -->
							<div id="em-share-buttons-container" data-social-type="share_buttons"
								class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<h3 class="em-text-lg em-font-semibold em-text-gray-800">Social Share Buttons</h3>
									<p class="em-text-sm em-text-gray-500">Add share button code for social sharing</p>
								</div>

								<div class="em-p-6">
									<div class="em-space-y-4">
										<div>
											<label for="em_share_btn"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-2"><?php _e('Share Button Code', 'event-monster'); ?></label>
											<?php
											$default_share_code = '<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=58a429fae4acd1001475a29b&product=inline-share-buttons"></script>' . "\n" . '<div class="sharethis-inline-share-buttons"></div>';
											$em_share_btn = isset($Event_Monster_Free_settings['em_share_btn']) ? $Event_Monster_Free_settings['em_share_btn'] : $default_share_code;
											?>
											<textarea id="em_share_btn" name="em_share_btn" rows="6"
												class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-blue-500 focus:em-border-blue-500 em-transition-colors em-font-mono em-text-sm"
												placeholder="Paste your share button code here..."><?php echo esc_textarea(stripslashes($em_share_btn)); ?></textarea>
										</div>
										<div class="em-bg-blue-50 em-border em-border-blue-200 em-rounded-md em-p-4">
											<div class="em-flex">
												<div class="em-flex-shrink-0">
													<svg class="em-h-5 em-w-5 em-text-blue-400" viewBox="0 0 20 20"
														fill="currentColor">
														<path fill-rule="evenodd"
															d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
															clip-rule="evenodd" />
													</svg>
												</div>
												<div class="em-ml-3">
													<h4 class="em-text-sm em-font-medium em-text-blue-800">How to get
														share buttons:</h4>
													<div class="em-mt-2 em-text-sm em-text-blue-700">
														<p>1. Visit <a href="https://sharethis.com" target="_blank"
																class="em-underline">ShareThis.com</a> or similar
															service</p>
														<p>2. Create an account and configure your share buttons</p>
														<p>3. Copy the provided HTML/JavaScript code</p>
														<p>4. Paste it in the textarea above</p>
													</div>
												</div>
											</div>
										</div>
									</div>

									</div>
								</div>
								</div>
							</div>
							<!-- End of em-social-settings-wrapper -->
							
							<div class="em-mt-6 em-p-6 em-bg-gradient-to-r em-from-indigo-50 em-to-purple-50 em-rounded-xl em-border em-border-indigo-100 em-shadow-sm em-text-center">
								<h3 class="em-font-bold em-text-lg em-mb-2 em-text-indigo-900">
									🚀 Social Icons - Pro Feature
								</h3>
								<p class="em-text-indigo-700 em-mb-4">
									Add unlimited social icons for your event with Event Monster Pro.
								</p>
								<a href="https://developer.suspended.dev/event-monster-pro" target="_blank" class="em-inline-block em-bg-indigo-600 hover:em-bg-indigo-700 em-text-white em-font-medium em-py-2 em-px-6 em-rounded-lg em-transition-colors">
									Upgrade to Pro
								</a>
							</div>

						</div>
					</div>

						<div id="em-tab-styling" class="settings-tab em-hidden">
						<div class="em-bg-gradient-to-r em-from-purple-50 em-to-violet-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-purple-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#8B5CF6" stroke-width="2"
											stroke-linecap="round" stroke-linejoin="round" />
										<path d="M2 17L12 22L22 17" stroke="#8B5CF6" stroke-width="2"
											stroke-linecap="round" stroke-linejoin="round" />
										<path d="M2 12L12 17L22 12" stroke="#8B5CF6" stroke-width="2"
											stroke-linecap="round" stroke-linejoin="round" />
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">Styling & Messages</h2>
									<p class="em-text-sm em-text-gray-600">Customize appearance and event messages</p>
								</div>
							</div>
						</div>

						<div class="em-grid em-grid-cols-1 em-gap-6 em-p-6">
							<!-- Event Countdown Timer -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<h3 class="em-text-lg em-font-semibold em-text-gray-800">Event Countdown Timer</h3>
									<p class="em-text-sm em-text-gray-500">Configure countdown display and styling</p>
								</div>

								<div class="em-p-6 em-space-y-6">
									<!-- Enable Countdown -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="em_countdown_enabled"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Enable
												Countdown</label>
											<p class="em-text-xs em-text-gray-500">Show countdown timer on event page
											</p>
										</div>
										<label class="em-relative em-inline-flex em-items-center em-cursor-pointer">
											<input type="checkbox" id="em_countdown_enabled" name="em_countdown_enabled"
												value="yes" class="em-sr-only em-peer" <?php checked(isset($Event_Monster_Free_settings['em_countdown_enabled']), true); ?>>
											<div
												class="em-relative em-w-11 em-h-6 em-bg-gray-200 peer-focus:em-outline-none peer-focus:em-ring-4 peer-focus:em-ring-blue-300 em-rounded-full peer peer-checked:after:em-translate-x-full peer-checked:after:em-border-white after:em-content-[''] after:em-absolute after:em-top-[2px] after:em-left-[2px] after:em-bg-white after:em-border-gray-300 after:em-border after:em-rounded-full after:em-h-5 after:em-w-5 after:em-transition-all peer-checked:em-bg-blue-600">
											</div>
										</label>
									</div>

									<!-- Progress Bar Thickness -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="em_countdown_progress_thickness"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Progress
												Bar Thickness</label>
											<p class="em-text-xs em-text-gray-500">Thickness of the countdown progress
												bar</p>
										</div>
										<div class="em-flex em-items-center em-gap-2">
											<input type="number" id="em_countdown_progress_thickness"
												name="em_countdown_progress_thickness" min="1" max="20" step="1"
												value="<?php echo isset($Event_Monster_Free_settings['em_countdown_progress_thickness']) ? esc_attr($Event_Monster_Free_settings['em_countdown_progress_thickness']) : '8'; ?>"
												class="em-w-20 em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-purple-500 focus:em-border-purple-500 em-transition-colors">
											<span class="em-text-sm em-text-gray-500">px</span>
										</div>
									</div>

									<!-- Colors -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Countdown
												Colors</label>
											<p class="em-text-xs em-text-gray-500">Progress and background colors</p>
										</div>
										<div class="em-flex em-gap-4">
											<div class="em-text-center">
												<label for="em_countdown_progress_color"
													class="em-block em-text-xs em-text-gray-600 em-mb-1">Progress</label>
												<?php $em_countdown_progress_color = isset($Event_Monster_Free_settings['em_countdown_progress_color']) ? $Event_Monster_Free_settings['em_countdown_progress_color'] : '#8B5CF6'; ?>
												<input type="text" id="em_countdown_progress_color"
													name="em_countdown_progress_color"
													value="<?php echo esc_attr($em_countdown_progress_color); ?>"
													class="em-color-field" />
											</div>
											<div class="em-text-center">
												<label for="em_countdown_bg_color"
													class="em-block em-text-xs em-text-gray-600 em-mb-1">Background</label>
												<?php $em_countdown_bg_color = isset($Event_Monster_Free_settings['em_countdown_bg_color']) ? $Event_Monster_Free_settings['em_countdown_bg_color'] : '#E5E7EB'; ?>
												<input type="text" id="em_countdown_bg_color"
													name="em_countdown_bg_color"
													value="<?php echo esc_attr($em_countdown_bg_color); ?>"
													class="em-color-field" />
											</div>
										</div>
									</div>

									<!-- Time Labels -->
									<div class="em-flex em-justify-between em-items-start">
										<div class="em-flex-1">
											<label
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Time
												Labels</label>
											<p class="em-text-xs em-text-gray-500">Custom labels for time units</p>
										</div>
										<div class="em-w-2/3 em-grid em-grid-cols-2 em-gap-3">
											<input type="text" name="em_countdown_label_days"
												value="<?php echo isset($Event_Monster_Free_settings['em_countdown_label_days']) ? esc_attr($Event_Monster_Free_settings['em_countdown_label_days']) : 'Days'; ?>"
												placeholder="Days"
												class="em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-purple-500 focus:em-border-purple-500 em-transition-colors em-text-sm">
											<input type="text" name="em_countdown_label_hours"
												value="<?php echo isset($Event_Monster_Free_settings['em_countdown_label_hours']) ? esc_attr($Event_Monster_Free_settings['em_countdown_label_hours']) : 'Hours'; ?>"
												placeholder="Hours"
												class="em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-purple-500 focus:em-border-purple-500 em-transition-colors em-text-sm">
											<input type="text" name="em_countdown_label_minutes"
												value="<?php echo isset($Event_Monster_Free_settings['em_countdown_label_minutes']) ? esc_attr($Event_Monster_Free_settings['em_countdown_label_minutes']) : 'Minutes'; ?>"
												placeholder="Minutes"
												class="em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-purple-500 focus:em-border-purple-500 em-transition-colors em-text-sm">
											<input type="text" name="em_countdown_label_seconds"
												value="<?php echo isset($Event_Monster_Free_settings['em_countdown_label_seconds']) ? esc_attr($Event_Monster_Free_settings['em_countdown_label_seconds']) : 'Seconds'; ?>"
												placeholder="Seconds"
												class="em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-purple-500 focus:em-border-purple-500 em-transition-colors em-text-sm">
										</div>
									</div>
								</div>
							</div>

							<!-- General Message Settings -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<h3 class="em-text-lg em-font-semibold em-text-gray-800">General Message</h3>
									<p class="em-text-sm em-text-gray-500">Display informational messages on event page
									</p>
								</div>

								<div class="em-p-6 em-space-y-6">
									<!-- General Message Toggle -->
									<div class="em-flex em-justify-between em-items-center em-pt-6 em-border-t em-border-gray-200">
										<div class="em-flex-1">
											<label for="em_show_general_message"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Show General Message</label>
											<p class="em-text-xs em-text-gray-500">Display a general information message on event page</p>
										</div>
										<label class="em-relative em-inline-flex em-items-center em-cursor-pointer">
											<input type="checkbox" id="em_show_general_message" name="em_show_general_message"
												value="yes" class="em-sr-only em-peer" <?php checked(isset($Event_Monster_Free_settings['em_show_general_message']), true); ?>>
											<div
												class="em-w-11 em-h-6 em-bg-gray-200 peer-focus:em-outline-none peer-focus:em-ring-4 peer-focus:em-ring-blue-300 em-rounded-full em-peer peer-checked:after:em-translate-x-full peer-checked:after:em-border-white after:em-content-[''] after:em-absolute after:em-top-[2px] after:em-left-[2px] after:em-bg-white after:em-border-gray-300 after:em-border after:em-rounded-full after:em-h-5 after:em-w-5 after:em-transition-all peer-checked:em-bg-blue-600">
											</div>
										</label>
									</div>

									<!-- General Message Content -->
									<div>
										<label for="em_general_message"
											class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-2">General Message</label>
										<textarea id="em_general_message" name="em_general_message" rows="3"
											class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-purple-500 focus:em-border-purple-500 em-transition-colors"
											placeholder="Important information about this event..."><?php echo isset($Event_Monster_Free_settings['em_general_message']) ? esc_textarea($Event_Monster_Free_settings['em_general_message']) : ''; ?></textarea>
										<p class="em-text-xs em-text-gray-500 em-mt-2">This message will be displayed at the top of the event page.</p>
									</div>

									<!-- General Message Style -->
									<div class="em-grid em-grid-cols-3 em-gap-4">
										<div>
											<label for="em_general_message_bg_color"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-2">Background Color</label>
											<?php $em_general_message_bg_color = isset($Event_Monster_Free_settings['em_general_message_bg_color']) ? $Event_Monster_Free_settings['em_general_message_bg_color'] : '#EBF8FF'; ?>
											<input type="text" id="em_general_message_bg_color" name="em_general_message_bg_color"
												value="<?php echo esc_attr($em_general_message_bg_color); ?>"
												class="em-color-field" />
										</div>
										<div>
											<label for="em_general_message_text_color"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-2">Text Color</label>
											<?php $em_general_message_text_color = isset($Event_Monster_Free_settings['em_general_message_text_color']) ? $Event_Monster_Free_settings['em_general_message_text_color'] : '#1E40AF'; ?>
											<input type="text" id="em_general_message_text_color" name="em_general_message_text_color"
												value="<?php echo esc_attr($em_general_message_text_color); ?>"
												class="em-color-field" />
										</div>
										<div>
											<label for="em_general_message_border_color"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-2">Border Color</label>
											<?php $em_general_message_border_color = isset($Event_Monster_Free_settings['em_general_message_border_color']) ? $Event_Monster_Free_settings['em_general_message_border_color'] : '#BFDBFE'; ?>
											<input type="text" id="em_general_message_border_color" name="em_general_message_border_color"
												value="<?php echo esc_attr($em_general_message_border_color); ?>"
												class="em-color-field" />
										</div>
									</div>
								</div>
							</div>



							<!-- Color Scheme -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<h3 class="em-text-lg em-font-semibold em-text-gray-800">Event Color Scheme</h3>
									<p class="em-text-sm em-text-gray-500">Customize colors for this event</p>
								</div>

								<div class="em-p-6 em-space-y-6">
									<!-- Primary Color -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="em_primary_color"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Primary
												Color</label>
											<p class="em-text-xs em-text-gray-500">Main theme color for buttons and
												accents</p>
										</div>
										<div class="em-flex em-items-center em-gap-3">
											<?php $em_primary_color = isset($Event_Monster_Free_settings['em_primary_color']) ? $Event_Monster_Free_settings['em_primary_color'] : '#8B5CF6'; ?>
											<input type="text" id="em_primary_color" name="em_primary_color"
												value="<?php echo esc_attr($em_primary_color); ?>"
												class="em-color-field" />
										</div>
									</div>

									<!-- Secondary Color -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="em_secondary_color"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Secondary
												Color</label>
											<p class="em-text-xs em-text-gray-500">Secondary color for highlights</p>
										</div>
										<div class="em-flex em-items-center em-gap-3">
											<?php $em_secondary_color = isset($Event_Monster_Free_settings['em_secondary_color']) ? $Event_Monster_Free_settings['em_secondary_color'] : '#10B981'; ?>
											<input type="text" id="em_secondary_color" name="em_secondary_color"
												value="<?php echo esc_attr($em_secondary_color); ?>"
												class="em-color-field" />
										</div>
									</div>

									<!-- Text Color -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="em_text_color"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Text
												Color</label>
											<p class="em-text-xs em-text-gray-500">Main text color for content</p>
										</div>
										<div class="em-flex em-items-center em-gap-3">
											<?php $em_text_color = isset($Event_Monster_Free_settings['em_text_color']) ? $Event_Monster_Free_settings['em_text_color'] : '#374151'; ?>
											<input type="text" id="em_text_color" name="em_text_color"
												value="<?php echo esc_attr($em_text_color); ?>"
												class="em-color-field" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div id="em-tab-cancellation" class="settings-tab em-hidden">
						<div class="em-bg-gradient-to-r em-from-red-50 em-to-orange-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-red-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#DC2626" stroke-width="2"/>
										<path d="M8 8L16 16M16 8L8 16" stroke="#DC2626" stroke-width="2" stroke-linecap="round"/>
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">Event Cancellation</h2>
									<p class="em-text-sm em-text-gray-600">Manage event cancellation settings and notifications</p>
								</div>
							</div>
						</div>

						<div class="em-grid em-grid-cols-1 em-gap-6 em-p-6">
							<!-- Event Cancellation Settings -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<h3 class="em-text-lg em-font-semibold em-text-gray-800">Cancellation Status</h3>
									<p class="em-text-sm em-text-gray-500">Mark this event as cancelled and configure the cancellation message
									</p>
								</div>

								<div class="em-p-6 em-space-y-6">
									<!-- Event Cancelled Toggle -->
									<div class="em-flex em-justify-between em-items-center">
										<div class="em-flex-1">
											<label for="em_event_cancelled"
												class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Mark
												Event as Cancelled</label>
											<p class="em-text-xs em-text-gray-500">Display cancellation notice on event
												page</p>
										</div>
										<label class="em-relative em-inline-flex em-items-center em-cursor-pointer">
											<input type="checkbox" id="em_event_cancelled" name="em_event_cancelled"
												value="yes" class="em-sr-only em-peer" <?php checked(isset($Event_Monster_Free_settings['em_event_cancelled']), true); ?>>
											<div
												class="em-relative em-w-11 em-h-6 em-bg-gray-200 peer-focus:em-outline-none peer-focus:em-ring-4 peer-focus:em-ring-red-300 em-rounded-full peer peer-checked:after:em-translate-x-full peer-checked:after:em-border-white after:em-content-[''] after:em-absolute after:em-top-[2px] after:em-left-[2px] after:em-bg-white after:em-border-gray-300 after:em-border after:em-rounded-full after:em-h-5 after:em-w-5 after:em-transition-all peer-checked:em-bg-red-600">
											</div>
										</label>
									</div>

									<!-- Cancellation Message -->
									<div>
										<label for="em_cancellation_message"
											class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-2">Cancellation
											Message</label>
										<textarea id="em_cancellation_message" name="em_cancellation_message" rows="4"
											class="em-w-full em-border em-border-gray-300 em-rounded-md em-px-3 em-py-2 focus:em-ring-2 focus:em-ring-red-500 focus:em-border-red-500 em-transition-colors"
											placeholder="This event has been cancelled. We apologize for any inconvenience."><?php echo isset($Event_Monster_Free_settings['em_cancellation_message']) ? esc_textarea($Event_Monster_Free_settings['em_cancellation_message']) : 'This event has been cancelled. We apologize for any inconvenience.'; ?></textarea>
										<p class="em-text-xs em-text-gray-500 em-mt-2">This message will be displayed on
											the event page if you mark it as cancelled.</p>
									</div>

									<!-- Cancellation Notice -->
									<div class="em-bg-red-50 em-border em-border-red-200 em-rounded-md em-p-4">
										<div class="em-flex">
											<div class="em-flex-shrink-0">
												<svg class="em-h-5 em-w-5 em-text-red-400" viewBox="0 0 20 20"
													fill="currentColor">
													<path fill-rule="evenodd"
														d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
														clip-rule="evenodd" />
												</svg>
											</div>
											<div class="em-ml-3">
												<h4 class="em-text-sm em-font-medium em-text-red-800">Important:</h4>
												<div class="em-mt-2 em-text-sm em-text-red-700">
													<p>When you mark an event as cancelled:</p>
													<ul class="em-list-disc em-list-inside em-mt-1 em-space-y-1">
														<li>A prominent cancellation notice will be displayed at the top of the event page</li>
														<li>The event will still be visible but marked as cancelled</li>
														<li>Consider notifying registered attendees separately via email</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div id="em-tab-custom-css" class="settings-tab em-hidden">
						<div class="em-bg-gradient-to-r em-from-indigo-50 em-to-blue-50 em-border-b em-p-6">
							<div class="em-flex em-items-center em-gap-3">
								<div class="em-p-2 em-bg-indigo-100 em-rounded-lg">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path
											d="M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296"
											stroke="#4F46E5" stroke-width="2" stroke-linecap="round" />
										<path d="M13.9868 5L12 12.4149L10.0132 19.8297" stroke="#4F46E5"
											stroke-width="2" stroke-linecap="round" />
										<path
											d="M7 7.82959L5.30347 9.35641C3.76103 10.7447 2.98969 11.4389 2.98969 12.3296C2.98969 13.2203 3.76103 13.9145 5.30347 15.3028L7 16.8296"
											stroke="#4F46E5" stroke-width="2" stroke-linecap="round" />
									</svg>
								</div>
								<div>
									<h2 class="em-text-2xl em-font-bold em-text-gray-800">Custom CSS</h2>
									<p class="em-text-sm em-text-gray-600">Add custom styles for this specific event</p>
								</div>
							</div>
						</div>

						<div class="em-grid em-grid-cols-1 em-gap-6 em-p-6">
							<!-- CSS Editor -->
							<div class="em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200">
								<div class="em-p-6 em-border-b em-border-gray-100">
									<div class="em-flex em-items-center em-justify-between">
										<div>
											<h3 class="em-text-lg em-font-semibold em-text-gray-800">Per-Event Custom
												CSS</h3>
											<p class="em-text-sm em-text-gray-500">CSS added here will only apply to
												this specific event</p>
										</div>
										<div class="em-flex em-items-center em-gap-2">
											<button type="button" id="em-css-format-btn"
												class="em-px-3 em-py-1 em-text-xs em-font-medium em-text-indigo-600 em-bg-indigo-50 hover:em-bg-indigo-100 em-border em-border-indigo-200 em-rounded-md em-transition-colors">
												Format CSS
											</button>
											<button type="button" id="em-css-clear-btn"
												class="em-px-3 em-py-1 em-text-xs em-font-medium em-text-red-600 em-bg-red-50 hover:em-bg-red-100 em-border em-border-red-200 em-rounded-md em-transition-colors">
												Clear All
											</button>
										</div>
									</div>
								</div>

								<div class="em-p-6">
									<div class="em-relative">
										<?php $custom_css = isset($Event_Monster_Free_settings['em_custom_css']) ? $Event_Monster_Free_settings['em_custom_css'] : ''; ?>
										<textarea id="em_custom_css" name="em_custom_css" rows="20"
											class="em-block em-w-full em-rounded-md em-border-gray-300 em-shadow-sm focus:em-border-indigo-500 focus:em-ring-indigo-500 em-font-mono em-text-sm em-leading-relaxed em-resize-y"
											placeholder="/* Add your custom CSS here */&#10;&#10;.event-container {&#10;    background-color: #f8f9fa;&#10;    border-radius: 8px;&#10;    padding: 20px;&#10;}&#10;&#10;.event-title {&#10;    color: #333;&#10;    font-size: 24px;&#10;    margin-bottom: 15px;&#10;}&#10;&#10;.event-description {&#10;    line-height: 1.6;&#10;    color: #666;&#10;}"><?php echo esc_textarea($custom_css); ?></textarea>

										<!-- Line numbers (optional enhancement) -->
										<div class="em-absolute em-top-0 em-left-0 em-w-12 em-h-full em-bg-gray-50 em-border-r em-border-gray-200 em-text-xs em-text-gray-400 em-font-mono em-leading-relaxed em-pt-3 em-pl-2 em-pointer-events-none em-select-none"
											id="em-css-line-numbers" style="display: none;">
											<!-- Line numbers will be generated by JavaScript -->
										</div>
									</div>

									<div class="em-mt-4 em-flex em-items-start em-gap-4">
										<div
											class="em-bg-blue-50 em-border em-border-blue-200 em-rounded-md em-p-4 em-flex-1">
											<div class="em-flex">
												<div class="em-flex-shrink-0">
													<svg class="em-h-5 em-w-5 em-text-blue-400" viewBox="0 0 20 20"
														fill="currentColor">
														<path fill-rule="evenodd"
															d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
															clip-rule="evenodd" />
													</svg>
												</div>
												<div class="em-ml-3">
													<h4 class="em-text-sm em-font-medium em-text-blue-800">CSS Tips:
													</h4>
													<div class="em-mt-2 em-text-sm em-text-blue-700">
														<ul class="em-list-disc em-list-inside em-space-y-1">
															<li>Use standard CSS syntax</li>
															<li>Target event-specific classes like <code
																	class="em-bg-blue-100 em-px-1 em-rounded">.event-container</code>
															</li>
															<li>Changes apply only to this event</li>
															<li>Use browser dev tools to inspect elements</li>
														</ul>
													</div>
												</div>
											</div>
										</div>

										<div
											class="em-bg-amber-50 em-border em-border-amber-200 em-rounded-md em-p-4 em-flex-1">
											<div class="em-flex">
												<div class="em-flex-shrink-0">
													<svg class="em-h-5 em-w-5 em-text-amber-400" viewBox="0 0 20 20"
														fill="currentColor">
														<path fill-rule="evenodd"
															d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
															clip-rule="evenodd" />
													</svg>
												</div>
												<div class="em-ml-3">
													<h4 class="em-text-sm em-font-medium em-text-amber-800">Important:
													</h4>
													<div class="em-mt-2 em-text-sm em-text-amber-700">
														<p>This is for advanced users. Invalid CSS may break the event
															display. Always test your changes.</p>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>


						</div>
					</div>

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


<script>
	const EM_STARTER_LIMITS = {
		gallery: <?php echo EM_STARTER_GALLERY_LIMIT; ?>,
		speakers: <?php echo EM_STARTER_SPEAKERS_LIMIT; ?>,
		sponsors: <?php echo EM_STARTER_SPONSORS_LIMIT; ?>,
		schedule: <?php echo EM_STARTER_SCHEDULE_LIMIT; ?>
	};

	function showTab(event, tabId) {

		//event.preventDefault();
		// Hide all settings tab content
		document.querySelectorAll('.settings-tab').forEach(tab => tab.classList.add('em-hidden'));

		// Show the selected tab content
		const targetTab = document.getElementById(tabId);
		if (targetTab) {
			targetTab.classList.remove('em-hidden');
		} else {
			console.error('Tab not found:', tabId);
			return;
		}

		// Remove active styles from all buttons
		document.querySelectorAll('.em-flex ul li button').forEach(button => {
			button.classList.remove('em-border-l-4', 'em-border-skyCustom', 'em-bg-[aliceblue]');
		});

		// Add active styles to the clicked button
		event.currentTarget.classList.add('em-border-l-4', 'em-border-skyCustom', 'em-bg-[aliceblue]');

		// Initialize visibility for configuration wrappers in the newly shown tab
		initializeTabVisibility(tabId);
	}

	function initializeTabVisibility(tabId) {
		// Map of tab IDs to their toggle configurations
		const tabToggles = {
			'em-tab-schedule': [
				{ checkboxId: 'em_show_schedule', wrapperId: 'em-schedule-settings-wrapper' }
			],
			'em-tab-people': [
				{ checkboxId: 'em_show_organizer', wrapperId: 'em-organizers-settings-wrapper' }
			],
			'em-tab-sponsors': [
				{ checkboxId: 'em_show_event_sponsor', wrapperId: 'em-sponsors-settings-wrapper' }
			],
			'em-tab-social': [
				{ checkboxId: 'em_social_links_enabled', wrapperId: 'em-social-settings-wrapper' }
			]
		};

		const toggles = tabToggles[tabId];
		if (toggles) {
			toggles.forEach(function(toggle) {
				const checkbox = document.getElementById(toggle.checkboxId);
				const wrapper = document.getElementById(toggle.wrapperId);

				if (checkbox && wrapper) {
					wrapper.style.display = checkbox.checked ? 'block' : 'none';
				} else if (wrapper) {
					// If checkbox doesn't exist but wrapper does, show by default
					wrapper.style.display = 'block';
				}
			});
		}
	}

	function toggleSwitch(checkbox) {
		if (checkbox.checked) {
			//console.log(`${checkbox.id} switched ON`);
		} else {
			//console.log(`${checkbox.id} switched OFF`);
		}

		// Handle show/hide for configuration sections
		const wrapperMap = {
			'em_show_schedule': 'em-schedule-settings-wrapper',
			'em_show_organizer': 'em-organizers-settings-wrapper',
			'em_show_event_sponsor': 'em-sponsors-settings-wrapper',
			'em_social_links_enabled': 'em-social-settings-wrapper'
		};

		const wrapperId = wrapperMap[checkbox.id];
		if (wrapperId) {
			const wrapper = document.getElementById(wrapperId);
			if (wrapper) {
				if (checkbox.checked) {
					wrapper.style.display = 'block';
				} else {
					wrapper.style.display = 'none';
				}
			}
		}
	}

	// Initialize when DOM is loaded
	document.addEventListener('DOMContentLoaded', function () {
		// Initialize default tab
		const defaultTab = document.querySelector('.active-tab');
		if (defaultTab) {
			showTab({
				currentTarget: defaultTab
			}, 'em-tab-general');
		}

		// Initialize visibility for all tabs on page load
		setTimeout(function() {
			['em-tab-schedule', 'em-tab-people', 'em-tab-sponsors', 'em-tab-social'].forEach(function(tabId) {
				initializeTabVisibility(tabId);
			});
		}, 100);
		const allSwitches = document.querySelectorAll('.js-segmented-control');
		allSwitches.forEach(switchContainer => {
			const radios = switchContainer.querySelectorAll('input[type="radio"]');
			const updateStyles = () => {
				radios.forEach(radio => {
					const label = radio.parentElement;
					if (radio.checked) {
						label.classList.add('em-bg-white', 'em-shadow');
						label.classList.remove('em-text-gray-500');
					} else {
						label.classList.remove('em-bg-white', 'em-shadow');
						label.classList.add('em-text-gray-500');
					}
				});
			};
			radios.forEach(radio => {
				radio.addEventListener('change', updateStyles);
			});
			updateStyles();
		});

		// --- LOGIC FOR GALLERY TAB ---

		// 1. Media Type Dropdown (Image/Video/Icon)
		const logoUpdSelect = document.getElementById('logo_upd');
		if (logoUpdSelect) {
			function toggleMediaOptions() {
				const selectedType = logoUpdSelect.value;
				document.querySelectorAll('.em-media-type-option').forEach(el => {
					el.style.display = 'none';
				});
				const selectedOption = document.getElementById('em-media-type-' + selectedType);
				if (selectedOption) {
					selectedOption.style.display = 'block';
				}
			}
			logoUpdSelect.addEventListener('change', toggleMediaOptions);
			toggleMediaOptions(); // Run on page load
		}

		// 2. Single Image Uploader
		// NOTE: Event listeners for #upload_image_button and #remove-single-img
		// are handled in em-admin-metabox.js to avoid duplicate event listeners.
		// Do NOT add inline event listeners here as it will cause the media library
		// modal to open twice.

		// 3. Multiple Image (Gallery) Uploader with Starter version limit
		const uploadGalleryButton = document.getElementById('upload_gallery_button');
		if (uploadGalleryButton) {
			let galleryFrame;
			uploadGalleryButton.addEventListener('click', function (e) {
				e.preventDefault();

				const previewContainer = document.getElementById('gallery-preview-container');
				const currentCount = previewContainer.querySelectorAll('.gallery-item').length;

				// Check Starter version limit before opening media library
				if (currentCount >= EM_STARTER_LIMITS.gallery) {
					alert(`Starter version limit reached (${EM_STARTER_LIMITS.gallery} images max). Upgrade to Pro for unlimited gallery images!`);
					return;
				}

				if (galleryFrame) { galleryFrame.open(); return; }
				galleryFrame = wp.media({
					title: 'Select or Upload Gallery Images',
					button: { text: 'Use these images' },
					multiple: 'add'
				});
				galleryFrame.on('select', function () {
					const selection = galleryFrame.state().get('selection');
					const previewContainer = document.getElementById('gallery-preview-container');
					let currentCount = previewContainer.querySelectorAll('.gallery-item').length;
					let addedCount = 0;
					let limitReached = false;

					// To ADD images instead of replacing, remove or comment out this line:
					// previewContainer.innerHTML = '';

					selection.forEach(function (attachment) {
						// Check limit before adding each image
						if (currentCount + addedCount >= EM_STARTER_LIMITS.gallery) {
							limitReached = true;
							return;
						}

						const img = attachment.toJSON();

						// Make sure we have a thumbnail to display
						if (img.sizes && img.sizes.thumbnail) {

							// This is the full HTML structure for one image, including the delete button
							previewContainer.innerHTML += `
								<div class="gallery-item em-relative em-group em-bg-white em-border-2 em-border-gray-200 em-rounded-lg em-overflow-hidden em-shadow-sm hover:em-shadow-md em-transition-shadow em-aspect-square">
									<img src="${img.sizes.thumbnail.url}" class="em-w-full em-h-full em-object-cover">
									<input type="hidden" name="em_event_gallery[]" value="${img.id}">
									<button type="button" class="remove-gallery-item em-absolute em-top-1 em-right-1 em-bg-red-500 em-text-white em-rounded-full em-w-6 em-h-6 em-flex em-items-center em-justify-center em-text-xs em-opacity-0 group-hover:em-opacity-100 em-transition-opacity hover:em-bg-red-600">&times;</button>
								</div>
							`;
							addedCount++;
						}
					});

					// Show alert if limit was reached during selection
					if (limitReached) {
						alert(`Starter version limit reached (${EM_STARTER_LIMITS.gallery} images max). Some images were not added. Upgrade to Pro for unlimited gallery images!`);
					}
				});
				galleryFrame.open();
			});
		}


		// --- LOGIC FOR TICKET SETTINGS VISIBILITY ---

		// 1. Get the elements we need to control
		const registrationToggle = document.getElementById('em_accept_registration');
		const allTicketOptions = document.getElementById('em-ticket-options-wrapper');
		const regTypeRadios = document.querySelectorAll('input[name="em_registration_type"]');
		console.log(registrationToggle);
		// 2. This is the main function that handles all the logic
		function manageTicketSettingsVisibility() {
			// Make sure the elements exist before we do anything
			if (!registrationToggle || !allTicketOptions) {
				return;
			}

			// A. Show or hide EVERYTHING based on the main toggle
			const isRegistrationOn = registrationToggle.checked;
			allTicketOptions.style.display = isRegistrationOn ? 'block' : 'none';

			// B. If the main toggle is ON, then also manage the internal/external sections
			if (isRegistrationOn) {
				const selectedRegType = document.querySelector('input[name="em_registration_type"]:checked').value;
				const externalLink = document.getElementById('em-external-link-option');
				const internalOptions = document.getElementById('em-internal-options');

				if (externalLink && internalOptions) {
					externalLink.style.display = (selectedRegType === 'external') ? 'flex' : 'none';
					internalOptions.style.display = (selectedRegType === 'internal') ? 'block' : 'none';
				}
			}
		}

		// 3. Attach the event listeners

		// When the main toggle changes, run our function
		if (registrationToggle) {
			registrationToggle.addEventListener('change', manageTicketSettingsVisibility);
		}

		// When the internal/external radio buttons change, also run our function
		regTypeRadios.forEach(radio => {
			radio.addEventListener('change', manageTicketSettingsVisibility);
		});

		// 4. IMPORTANT: Run the function once on page load
		// This sets the correct visibility based on your saved settings
		manageTicketSettingsVisibility();


		// --- LOGIC FOR MAP SETTINGS VISIBILITY ---

		const mapToggle = document.getElementById('em_map_enabled');
		const mapSettingsWrapper = document.getElementById('em-map-settings-wrapper');

		function manageMapSettingsVisibility() {
			if (!mapToggle || !mapSettingsWrapper) {
				return;
			}

			if (mapToggle.checked) {
				// Show map settings
				mapSettingsWrapper.style.display = 'block';
			} else {
				// Hide map settings
				mapSettingsWrapper.style.display = 'none';
			}
		}

		// Attach event listener
		if (mapToggle) {
			mapToggle.addEventListener('change', manageMapSettingsVisibility);
		}

		// Run on page load
		manageMapSettingsVisibility();


		// --- LOGIC FOR GALLERY SETTINGS VISIBILITY ---

		const galleryToggle = document.getElementById('em_show_event_gallery');
		const gallerySettingsWrapper = document.getElementById('em-gallery-settings-wrapper');

		function manageGallerySettingsVisibility() {
			if (!galleryToggle || !gallerySettingsWrapper) {
				return;
			}

			if (galleryToggle.checked) {
				// Show gallery settings
				gallerySettingsWrapper.style.display = 'block';
			} else {
				// Hide gallery settings
				gallerySettingsWrapper.style.display = 'none';
			}
		}

		// Attach event listener
		if (galleryToggle) {
			galleryToggle.addEventListener('change', manageGallerySettingsVisibility);
		}

		// Run on page load
		manageGallerySettingsVisibility();


		// --- LOGIC FOR GALLERY DELETE FUNCTIONALITY ---

		// 1. Delete All Gallery Images
		const removeGalleryButton = document.getElementById('remove_gallery_button');
		const galleryPreviewContainer = document.getElementById('gallery-preview-container');

		if (removeGalleryButton && galleryPreviewContainer) {
			removeGalleryButton.addEventListener('click', function () {
				// Simply clear the entire preview container
				galleryPreviewContainer.innerHTML = '';
			});
		}

		// 2. Delete Individual Gallery Images
		if (galleryPreviewContainer) {
			// We use event delegation on the container to handle clicks on buttons that may not exist on page load
			galleryPreviewContainer.addEventListener('click', function (e) {
				// Check if the clicked element is a remove button
				if (e.target && e.target.classList.contains('remove-gallery-item')) {
					e.preventDefault();
					// Find the parent .gallery-item and remove it from the DOM
					e.target.closest('.gallery-item').remove();
				}
			});
		}

		// --- LOGIC FOR REPEATER FIELDS ---

		/**
		 * A generic function to handle adding and removing repeater fields with limits.
		 * @param {string} wrapperId The ID of the container for the repeater items.
		 * @param {string} addButtonId The ID of the "Add New" button.
		 * @param {number} limit Maximum number of items allowed (Starter version limit).
		 */
		function initializeRepeater(wrapperId, addButtonId, limit = null) {
			const wrapper = document.getElementById(wrapperId);
			const addButton = document.getElementById(addButtonId);

			if (!wrapper || !addButton) return;

			// Handle adding new items
			addButton.addEventListener('click', function () {
				const currentCount = wrapper.querySelectorAll('.em-repeater-item').length;

				// Check limit for Starter version
				if (limit && currentCount >= limit) {
					alert(`Starter version limit reached (${limit} items max). Upgrade to Pro for unlimited items!`);
					return;
				}

				const firstItem = wrapper.querySelector('.em-repeater-item');
				if (firstItem) {
					const newItem = firstItem.cloneNode(true);
					// Clear the values from the cloned inputs
					newItem.querySelectorAll('input').forEach(input => input.value = '');
					wrapper.appendChild(newItem);
				}
			});

			// Handle removing items using event delegation
			wrapper.addEventListener('click', function (e) {
				if (e.target && e.target.classList.contains('em-remove-repeater-item')) {
					// Only remove if it's not the last one
					if (wrapper.querySelectorAll('.em-repeater-item').length > 1) {
						e.target.closest('.em-repeater-item').remove();
					} else {
						// If it's the last one, just clear its inputs
						e.target.closest('.em-repeater-item').querySelectorAll('input').forEach(input => input.value = '');
						alert('This is the last item. It cannot be removed, but its values have been cleared.');
					}
				}
			});
		}

		// Initialize repeater fields with Starter version limits
		initializeRepeater('em-organizers-wrapper', 'em-add-organizer');
		initializeRepeater('em-speakers-wrapper', 'em-add-speaker', EM_STARTER_LIMITS.speakers);

		// Speaker Avatar Upload
		jQuery(document).on('click', '.em-upload-speaker-avatar', function(e) {
			e.preventDefault();

			const button = jQuery(this);
			const container = button.closest('.em-repeater-item');
			const input = container.find('.em-speaker-avatar-input');
			const preview = container.find('.em-speaker-avatar-preview');

			const mediaUploader = wp.media({
				title: 'Select Speaker Avatar',
				button: {
					text: 'Use this image'
				},
				multiple: false,
				library: {
					type: 'image'
				}
			});

			mediaUploader.on('select', function() {
				const attachment = mediaUploader.state().get('selection').first().toJSON();
				input.val(attachment.url);
				preview.html('<img src="' + attachment.url + '" alt="Speaker Avatar" class="em-w-full em-h-full em-rounded-full em-object-cover">');
				button.text('Change Avatar');

				// Add remove button if not exists
				if (!button.siblings('.em-remove-speaker-avatar').length) {
					button.after('<button type="button" class="em-remove-speaker-avatar em-ml-2 em-px-3 em-py-1 em-text-sm em-bg-red-100 hover:em-bg-red-200 em-text-red-700 em-rounded-md em-transition-colors">Remove</button>');
				}
			});

			mediaUploader.open();
		});

		// Remove Speaker Avatar
		jQuery(document).on('click', '.em-remove-speaker-avatar', function(e) {
			e.preventDefault();

			const button = jQuery(this);
			const container = button.closest('.em-repeater-item');
			const input = container.find('.em-speaker-avatar-input');
			const preview = container.find('.em-speaker-avatar-preview');
			const nameInput = container.find('input[name="em_speaker_name[]"]');
			const uploadButton = container.find('.em-upload-speaker-avatar');

			input.val('');
			const firstLetter = nameInput.val().charAt(0).toUpperCase() || '?';
			preview.html(firstLetter);
			uploadButton.text('Upload Avatar');
			button.remove();
		});

		// Color Scheme Selection
		jQuery('input[name="em_color_scheme"]').on('change', function() {
			const selectedValue = jQuery(this).val();

			// Update visual selection
			jQuery('input[name="em_color_scheme"]').each(function() {
				const container = jQuery(this).closest('label').find('div');
				if (jQuery(this).val() === selectedValue) {
					container.removeClass('em-border-gray-200 hover:em-border-indigo-300')
							 .addClass('em-border-indigo-500 em-bg-indigo-50');
				} else {
					container.removeClass('em-border-indigo-500 em-bg-indigo-50')
							 .addClass('em-border-gray-200 hover:em-border-indigo-300');
				}
			});
		});



		const sponsorsTab = document.querySelector('#em-tab-sponsors');

		// Exit if the sponsors tab container isn't on the page
		if (!sponsorsTab) {
			return;
		}

		const sponsorsWrapper = sponsorsTab.querySelector('#em-sponsors-wrapper');

		// Main event listener for all clicks within the sponsors tab
		sponsorsTab.addEventListener('click', function (event) {
			const target = event.target;

			/**
			 * 1. ADD NEW SPONSOR
			 */
			if (target.matches('#em-add-sponsor')) {
				event.preventDefault();

				// Check Starter version limit
				const currentCount = sponsorsWrapper.querySelectorAll('.em-repeater-item').length;
				if (currentCount >= EM_STARTER_LIMITS.sponsors) {
					alert(`Starter version limit reached (${EM_STARTER_LIMITS.sponsors} sponsors max). Upgrade to Pro for unlimited sponsors!`);
					return;
				}

				const template = sponsorsTab.querySelector('.em-repeater-item');
				if (!template) return; // Can't add if there's no template

				const newItem = template.cloneNode(true);

				// Clear all input values in the new item
				newItem.querySelectorAll('input').forEach(input => input.value = '');

				// Reset the logo uploader elements
				const logoPreview = newItem.querySelector('.em-sponsor-logo-preview');
				const logoPlaceholder = newItem.querySelector('.em-sponsor-logo-placeholder');
				const removeLogoBtn = newItem.querySelector('.em-remove-sponsor-logo');

				if (logoPreview) {
					logoPreview.setAttribute('src', '');
					logoPreview.style.display = 'none';
				}
				if (logoPlaceholder) {
					logoPlaceholder.style.display = '';
				}
				if (removeLogoBtn) {
					removeLogoBtn.style.display = 'none';
				}

				sponsorsWrapper.appendChild(newItem);
			}

			/**
			 * 2. REMOVE SPONSOR
			 */
			if (target.matches('.em-remove-repeater-item')) {
				event.preventDefault();

				const itemToRemove = target.closest('.em-repeater-item');
				const totalItems = sponsorsTab.querySelectorAll('.em-repeater-item').length;

				if (totalItems > 1) {
					itemToRemove.remove();
				} else {
					// If it's the last one, just clear its fields
					itemToRemove.querySelectorAll('input').forEach(input => input.value = '');
					const logoPreview = itemToRemove.querySelector('.em-sponsor-logo-preview');
					const logoPlaceholder = itemToRemove.querySelector('.em-sponsor-logo-placeholder');
					const removeLogoBtn = itemToRemove.querySelector('.em-remove-sponsor-logo');

					if (logoPreview) {
						logoPreview.setAttribute('src', '');
						logoPreview.style.display = 'none';
					}
					if (logoPlaceholder) {
						logoPlaceholder.style.display = '';
					}
					if (removeLogoBtn) {
						removeLogoBtn.style.display = 'none';
					}
				}
			}

			/**
			 * 3. LOGO UPLOAD (WP Media Frame)
			 */
			if (target.matches('.em-upload-sponsor-logo')) {
				event.preventDefault();

				// Check if wp.media exists
				if (typeof wp === 'undefined' || typeof wp.media === 'undefined') {
					alert('WordPress media scripts are not loaded. Please contact support.');
					return;
				}

				const repeaterItem = target.closest('.em-repeater-item');

				const mediaFrame = wp.media({
					title: 'Select or Upload Sponsor Logo',
					button: {
						text: 'Use this logo'
					},
					multiple: false
				});

				mediaFrame.on('select', function () {
					const attachment = mediaFrame.state().get('selection').first().toJSON();

					// Update elements within the specific repeater item
					const idInput = repeaterItem.querySelector('.em-sponsor-logo-id-input');
					const previewImg = repeaterItem.querySelector('.em-sponsor-logo-preview');
					const placeholder = repeaterItem.querySelector('.em-sponsor-logo-placeholder');
					const removeBtn = repeaterItem.querySelector('.em-remove-sponsor-logo');

					if (idInput) idInput.value = attachment.id;
					if (previewImg) {
						previewImg.src = attachment.sizes.thumbnail.url;
						previewImg.style.display = '';
					}
					if (placeholder) placeholder.style.display = 'none';
					if (removeBtn) removeBtn.style.display = '';
				});

				mediaFrame.open();
			}

			/**
			 * 4. REMOVE LOGO
			 */
			if (target.matches('.em-remove-sponsor-logo')) {
				event.preventDefault();

				const repeaterItem = target.closest('.em-repeater-item');

				const idInput = repeaterItem.querySelector('.em-sponsor-logo-id-input');
				const previewImg = repeaterItem.querySelector('.em-sponsor-logo-preview');
				const placeholder = repeaterItem.querySelector('.em-sponsor-logo-placeholder');

				if (idInput) idInput.value = '';
				if (previewImg) {
					previewImg.src = '';
					previewImg.style.display = 'none';
				}
				if (placeholder) placeholder.style.display = '';

				target.style.display = 'none'; // Hide the remove button itself
			}
		});


		const socialTab = document.querySelector('#em-tab-social');
		if (!socialTab) {
			return; // Exit if the social tab isn't on the page
		}

		// --- LOGIC FOR MASTER SWITCH (Profile Links vs Share Buttons) ---
		const displayTypeControl = socialTab.querySelector('#em-social-display-type-control');
		const profileLinksContainer = socialTab.querySelector('#em-profile-links-container');
		const shareButtonsContainer = socialTab.querySelector('#em-share-buttons-container');

		function toggleSocialSections() {
			const selectedType = socialTab.querySelector('input[name="em_social_display_type"]:checked').value;

			if (selectedType === 'profile_links') {
				profileLinksContainer.style.display = 'block';
				shareButtonsContainer.style.display = 'none';
			} else {
				profileLinksContainer.style.display = 'none';
				shareButtonsContainer.style.display = 'block';
			}
		}

		// Set initial state on page load
		toggleSocialSections();

		// Add listener for changes
		displayTypeControl.addEventListener('change', toggleSocialSections);


		// --- LOGIC FOR REPEATER (Add/Remove Profile Links) ---
		const socialWrapper = socialTab.querySelector('#em-social-wrapper');

		socialTab.addEventListener('click', function (event) {
			const target = event.target;

			// Add new repeater item
			if (target.matches('#em-add-social-link') || target.closest('#em-add-social-link')) {
				event.preventDefault();
				const template = socialTab.querySelector('.em-repeater-item');
				if (!template) return;

				// Get the current highest index
				const allItems = socialWrapper.querySelectorAll('.em-repeater-item');
				let maxIndex = -1;
				allItems.forEach(item => {
					const select = item.querySelector('select[name*="em_social_links"]');
					if (select) {
						const match = select.name.match(/em_social_links\[(\d+)\]/);
						if (match) {
							maxIndex = Math.max(maxIndex, parseInt(match[1]));
						}
					}
				});
				const newIndex = maxIndex + 1;

				// Clone the template
				const newItem = template.cloneNode(true);

				// Update the indices in the name attributes
				newItem.querySelectorAll('input, select').forEach(field => {
					if (field.name) {
						field.name = field.name.replace(/em_social_links\[\d+\]/, `em_social_links[${newIndex}]`);
					}
					field.value = '';
				});

				socialWrapper.appendChild(newItem);
			}

			// Remove repeater item
			if (target.matches('.em-remove-repeater-item') || target.closest('.em-remove-repeater-item')) {
				event.preventDefault();
				const itemToRemove = target.closest('.em-repeater-item');
				if (socialTab.querySelectorAll('.em-repeater-item').length > 1) {
					itemToRemove.remove();
				} else {
					itemToRemove.querySelectorAll('input, select').forEach(field => field.value = '');
				}
			}
		});

	});

	// --- Form Validation: Handle invalid fields in hidden tabs ---
	// This ensures that if there are validation errors in hidden tabs,
	// the user is automatically taken to that tab
	const postForm = document.getElementById('post');
	if (postForm) {
		postForm.addEventListener('invalid', function(e) {
			const invalidField = e.target;

			// Check if the invalid field is in a hidden tab
			const hiddenTab = invalidField.closest('.settings-tab.em-hidden');

			if (hiddenTab) {
				// Get the tab ID
				const tabId = hiddenTab.id;

				// Find and click the corresponding tab button
				const tabButtons = document.querySelectorAll('.em-flex ul li button');
				tabButtons.forEach(button => {
					const onclickAttr = button.getAttribute('onclick');
					if (onclickAttr && onclickAttr.includes(tabId)) {
						button.click();
					}
				});

				// Wait a moment for the tab to show, then focus the field
				setTimeout(function() {
					invalidField.focus();
					invalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
				}, 100);
			}
		}, true); // Use capture phase
	}

	// --- Schedule Management ---
	const scheduleTab = document.querySelector('#em-tab-schedule');
	if (scheduleTab) {
		<?php
		$em_schedule_items = isset($Event_Monster_Free_settings['em_schedule_items']) ? $Event_Monster_Free_settings['em_schedule_items'] : array();

		// Generate date field HTML for JavaScript
		$date_field_html = '';
		if ($is_multi_day_event) {
			$date_field_html = '<select name="em_schedule_items[INDEX][date]" class="schedule-date-field em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500">';
			$date_field_html .= '<option value="">Select Day</option>';
			foreach ($date_options as $option) {
				$date_field_html .= '<option value="' . esc_attr($option['value']) . '">' . esc_html($option['label']) . '</option>';
			}
			$date_field_html .= '</select>';
		} else {
			$date_field_html = '<input type="text" value="' . esc_attr(date_i18n(get_option('date_format'), strtotime($em_start_date))) . '" disabled class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md em-bg-gray-100 em-text-gray-500 em-cursor-not-allowed">';
			$date_field_html .= '<input type="hidden" name="em_schedule_items[INDEX][date]" value="' . esc_attr($em_start_date) . '">';
		}
		?>
		let scheduleItemIndex = <?php echo count($em_schedule_items); ?>;

		// Add new schedule item
		document.getElementById('add-schedule-item').addEventListener('click', function () {
			const container = document.getElementById('schedule-items-container');

			// Check Starter version limit
			const currentCount = container.querySelectorAll('.schedule-item').length;
			if (currentCount >= EM_STARTER_LIMITS.schedule) {
				alert(`Starter version limit reached (${EM_STARTER_LIMITS.schedule} schedule items max). Upgrade to Pro for unlimited schedule items!`);
				return;
			}

			const newItem = document.createElement('div');
			newItem.className = 'schedule-item em-p-4 em-border em-border-gray-200 em-rounded-lg em-bg-gray-50';

			// Generate date field HTML with proper index
			const dateFieldHtml = `<?php echo str_replace("'", "\\'", $date_field_html); ?>`.replace(/INDEX/g, scheduleItemIndex);

			newItem.innerHTML = `
				<div class="em-flex em-items-center em-justify-between em-mb-4">
					<h4 class="em-text-md em-font-semibold em-text-gray-700">Schedule Item #${scheduleItemIndex + 1}</h4>
					<button type="button" class="remove-schedule-item em-text-red-600 hover:em-text-red-800 em-transition-colors">
						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
					</button>
				</div>

				<div class="em-grid em-grid-cols-1 md:em-grid-cols-3 em-gap-4">
					<div>
						<label class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Date <?php if (!$is_multi_day_event): ?><span class="em-text-xs em-text-gray-500">(single day)</span><?php endif; ?></label>
						${dateFieldHtml}
					</div>
					<div>
						<label class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Time</label>
						<input type="time" name="em_schedule_items[${scheduleItemIndex}][time]" value=""
							   class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500">
					</div>
					<div>
						<label class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Title</label>
						<input type="text" name="em_schedule_items[${scheduleItemIndex}][title]" value=""
							   class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500"
							   placeholder="Activity title">
					</div>
					<div class="md:em-col-span-3">
						<label class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Description</label>
						<textarea name="em_schedule_items[${scheduleItemIndex}][description]" rows="2"
								  class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500"
								  placeholder="Brief description of the activity"></textarea>
					</div>
					<div>
						<label class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Speaker/Presenter</label>
						<input type="text" name="em_schedule_items[${scheduleItemIndex}][speaker]" value=""
							   class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500"
							   placeholder="Speaker name">
					</div>
					<div>
						<label class="em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1">Location</label>
						<input type="text" name="em_schedule_items[${scheduleItemIndex}][location]" value=""
							   class="em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-md focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500"
							   placeholder="Room/venue location">
					</div>
				</div>
			`;

			container.appendChild(newItem);
			scheduleItemIndex++;
		});

		// Remove schedule item
		scheduleTab.addEventListener('click', function (e) {
			if (e.target.closest('.remove-schedule-item')) {
				e.preventDefault();
				const itemToRemove = e.target.closest('.schedule-item');
				const totalItems = scheduleTab.querySelectorAll('.schedule-item').length;

				if (totalItems > 1) {
					itemToRemove.remove();
					// Update item numbers
					scheduleTab.querySelectorAll('.schedule-item').forEach((item, index) => {
						const header = item.querySelector('h4');
						if (header) {
							header.textContent = `Schedule Item #${index + 1}`;
						}
					});
				} else {
					// Clear all fields if it's the last item
					itemToRemove.querySelectorAll('input, textarea').forEach(field => field.value = '');
				}
			}
		});
	}

	// --- Dynamic Date Field Update ---
	// Update schedule date fields when event dates change
	const startDateField = document.querySelector('input[name="em_start_date"]');
	const endDateField = document.querySelector('input[name="em_end_date"]');

	if (startDateField && endDateField) {
		function updateScheduleDateFields() {
			const startDate = startDateField.value;
			const endDate = endDateField.value;
			const isMultiDay = startDate !== endDate;

			// Show a notice that the page needs to be saved to update schedule date fields
			const scheduleContainer = document.getElementById('schedule-items-container');
			if (scheduleContainer) {
				let notice = document.getElementById('schedule-date-update-notice');
				if (!notice) {
					notice = document.createElement('div');
					notice.id = 'schedule-date-update-notice';
					notice.className = 'em-p-3 em-mb-4 em-bg-yellow-50 em-border em-border-yellow-200 em-rounded-md em-text-sm em-text-yellow-800';
					notice.innerHTML = '⚠️ Event dates changed. Please <strong>save the event</strong> to update schedule date options.';
					scheduleContainer.parentNode.insertBefore(notice, scheduleContainer);
				}
			}
		}

		startDateField.addEventListener('change', updateScheduleDateFields);
		endDateField.addEventListener('change', updateScheduleDateFields);
	}

	// --- WordPress Color Picker Initialization ---
	jQuery(document).ready(function($) {
		// Initialize all color pickers
		$('.em-color-field').wpColorPicker();
	});

</script>