<script>
	window.rest_nonce = '<?php echo wp_create_nonce('wp_rest'); ?>';
</script>
<div class="api-settings">
	<div class="title">
		<h1><?php echo WPL_API_PLUGIN_NAME; ?>
			<span class="wpl-dashboard-ver"> v<?php echo WPL_API_VERSION; ?></span>
		</h1>
	</div>
	<div class="api-settings-content row">
		<div class="wplapi-sidebar">
			<ul class="wplapi-sidebar-menu">
				<li id="token-setting">
					<a href="#token-tab">
						<p>Generate Token</p>
					</a>
				</li>
				<li id="sms-setting">
					<a href="#sms-tab">
						<p>SMS Settings</p>
					</a>
				</li>
				<li id="map-setting">
					<a href="#map-tab">
						<p>Map Settings</p>
					</a>
				</li>
				<li id="about-setting">
					<a href="#about-tab">
						<p>About Settings</p>
					</a>
				</li>
				<li id="notification-setting">
					<a href="#notification-tab">
						<p>Notification Settings</p>
					</a>
				</li>
			</ul>
		</div>
		<div id="tab-contents" class="col-6">
			<div id="token-setting-content" class="content row justify-content-around d-none">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="settings-form generate-token-form">
						<h3 class="title">Generate Token</h3>
						<div class="token-wrapper">
							<div class="has-token-inputs w-100 d-none">
								<div>
									<input id="token" class="token" readonly=""/>
									<button class="btn btn-primary" onclick="WPL_API.copyToken()">Copy</button>
								</div>
								<button class="resetToken btn btn-primary" onclick='WPL_API.resetToken(this)'>
									Reset Token
								</button>
							</div>
							<div class="generate-token-inputs setting-inputs d-none">
								<div class="custom-text-input">
									<label>
										<span class="label">Token Email</span>
										<span class="label-info">Generate token by email</span>
									</label>
									<div class="input-field">
										<input id="token-email" type="text" name="token-email">
									</div>
								</div>
								<div class="custom-text-input">
									<label>
										<span class="label">Wordpress Username</span>
										<span class="label-info">Administrator Username</span>
									</label>
									<div class="input-field">
										<input id="token-username" type="text" name="token-username">
									</div>
								</div>
								<div class="custom-text-input">
									<label>
										<span class="label">Wordpress Password</span>
										<span class="label-info">Administrator Password</span>
									</label>
									<div class="input-field">
										<input id="token-password" type="password" name="token-password">
									</div>
								</div>
								<div class='settings-control'>
									<button class='btn btn-primary' onclick='WPL_API.generateToken(this)'>Generate
										Token
									</button>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
			<div id="sms-setting-content" class="content row justify-content-around d-none"
				 init-callback="WPL_API.checkSmsSetting()">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="settings-form sms-setting-form ">
						<h3 class="title">Sms Settings</h3>
						<div class="setting-inputs sms-setting-inputs">
							<div class="custom-text-input">
								<label>
									<span class="label">Account SID</span>
									<span class="label-info">Available from within your Twilio account</span>
								</label>
								<div class="input-field">
									<input id="sms-sid" autocomplete="off" type="text" value="">
								</div>
							</div>
							<div class="custom-text-input">
								<label>
									<span class="label">Auth Token</span>
									<span class="label-info">Available from within your Twilio account</span>
								</label>
								<div class="input-field">
									<input id="sms-token" autocomplete="off" type="text" value="">
								</div>
							</div>
							<div class="custom-text-input">
								<label>
									<span class="label">Twilio Number</span>
									<span class="label-info">Must be a valid number associated with your Twilio account</span>
								</label>
								<div class="input-field">
									<input id="sms-number" autocomplete="off" type="text" value="">
								</div>
							</div>
							<div class="settings-control">
								<button class="btn btn-primary" onclick="WPL_API.saveSmsSetting(this)">Save</button>
								<button class="btn btn-primary" onclick="WPL_API.resetSmsSetting(this)">Reset</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="map-setting-content" class="content map-content row d-none"
				 init-callback="WPL_API.checkMapSettings()">
				<div class="map-column col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="settings-form map-form">
						<h3 class="title">Map Settings</h3>
						<div class="setting-inputs map-form-inputs">
							<div class="custom-text-input">
								<label>
									<span class="label">Longitude</span>
									<span class="label-info">The angular distance of a place east or west</span>
								</label>
								<div class="input-field">
									<input id="map-longitude" autocomplete="off" type="text" disabled="" value=""/>
								</div>
							</div>
							<div class="custom-text-input">
								<label>
									<span class="label">Latitude</span>
									<span class="label-info">The angular distance of a place north or south</span>
								</label>
								<div class="input-field">
									<input id="map-latitude" autocomplete="off" type="text" disabled="" value="">
								</div>
							</div>
							<div class="custom-select-input">
								<label>
									<span class="label">Zoom</span>
									<span class="label-info">Map zoom level</span>
								</label>
								<div class="input-field">
									<select id="map-zoom" autocomplete="off">
										<?php for ($zoom = 1; $zoom <= 18; $zoom++): ?>
											<option value="<?php echo $zoom; ?>"><?php echo $zoom; ?></option>
										<?php endfor; ?>
									</select>
								</div>
							</div>
							<div class="map-point">
								<div class="custom-text-input">
									<label>
										<span class="label">Map Point</span>
										<span class="label-info">The place where your listings are available</span>
									</label>
									<div class="input-field">
										<input id="map-point" autocomplete="off" type="text" value="">
									</div>
								</div>
								<button class="btn btn-primary" onclick="WPL_API.findLocation(this)">Go</button>
							</div>
							<div class="settings-control">
								<button class="btn btn-primary" onclick="WPL_API.saveMapSetting(this)">Update</button>
							</div>
						</div>
						<div class="wpl-map-wrapper">
							<div id="wpl-map" class="wpl-map" style="position: relative; overflow: hidden;">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="about-setting-content" class="content row justify-content-around d-none"
				 init-callback="WPL_API.checkAbout()">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="settings-form about-setting-form ">
						<h3 class="title">About Settings</h3>
						<div class="setting-inputs about-setting-inputs">
							<div class="custom-text-input">
								<label>
									<span class="label">Company Name</span>
									<span class="label-info">Your Company Name</span>
								</label>
								<div class="input-field">
									<input id="about-name" autocomplete="off" type="text" value="">
								</div>
							</div>
							<div class="custom-text-input">
								<label>
									<span class="label">Company Address</span>
									<span class="label-info">Your Company Address</span>
								</label>
								<div class="input-field">
									<input id="about-address" autocomplete="off" type="text" value="">
								</div>
							</div>
							<div class="custom-text-input">
								<label>
									<span class="label">Company Phone</span>
									<span class="label-info">Your Company Phone</span>
								</label>
								<div class="input-field">
									<input id="about-phone" autocomplete="off" type="text" value="">
								</div>
							</div>
							<div class="about-company">
								<label>
									<span class="label">About Company</span>
									<span class="label-info">Short description about your company</span>
								</label>
								<textarea name="aboutCompany" id="about-description" autocomplete="off"></textarea>
							</div>
							<div class="settings-control">
								<button class="btn btn-primary" onclick="WPL_API.saveAbout(this)">Update</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="notification-setting-content" class="content row justify-content-around d-none"
				 init-callback="WPL_API.checkOneSignal()">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="settings-form notification-setting-form ">
						<h3 class="title">Notification Settings</h3>
						<div class="setting-inputs notification-setting-inputs">
							<div class="custom-text-input">
								<label>
									<span class="label">App ID</span>
									<span class="label-info">Available from within your Onesignal account</span>
								</label>
								<div class="input-field">
									<input id="one-signal-id" autocomplete="off" type="text" value="">
								</div>
							</div>
							<div class="custom-text-input">
								<label>
									<span class="label">Auth Key</span>
									<span class="label-info">Available from within your Onesignal account</span>
								</label>
								<div class="input-field">
									<input id="one-signal-key" autocomplete="off" type="text" value="">
								</div>
							</div>
							<div class="setting-control">
								<button class="btn btn-primary" onclick="WPL_API.saveOneSignal(this)">Update</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo wpl_global::get_setting('google_api_key'); ?>" async
		defer></script>