<!-- Modal 1: Leaving too soon? -->
<div class="mowcps-feedback-overlay" id="mowcps-feedback-leaving-modal">
	<div class="mowcps-feedback-modal">
		<div class="mowcps-feedback-modal-content">
			<span class="mowcps-feedback-close" id="mowcps-modal-close">&times;</span>

			<!-- Loading State -->
			<div id="mowcps-loading-state" class="mowcps-loading-state" style="display:none;">
				<div class="mowcps-loading-spinner">
					<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation: spinnerRotate 1s linear infinite;"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg>
				</div>
				<p class="mowcps-loading-text">Sending your message...</p>
			</div>

			<!-- Success State -->
			<div id="mowcps-success-state" class="mowcps-success-state" style="display:none;margin: 0;padding: 0;">
				<div class="mowcps-success-icon">
					<div class="mowcps-success-circle">
						<span class="mowcps-success-tick">✓</span>
					</div>
				</div>
				<h3>Thank you for your feedback!</h3>
			</div>

			<!-- Error State -->
			<div id="mowcps-error-state" class="mowcps-error-state" style="display:none;">
				<div class="mowcps-error-icon">
					<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#f44336" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
				</div>
				<h3>Something went wrong</h3>
				<p id="mowcps-error-message">Please try again or contact us directly.</p>
				<button type="button" class="mowcps-retry-btn" onclick="moWcpsShowFormState()">Try Again</button>
			</div>

			<!-- Main Form State -->
			<div id="mowcps-form-state" class="mowcps-form-state">
				<h2>Leaving too soon?</h2>
				<p>Contact our high skilled engineers to help you out</p>

			<form id="mowcps-contact-form" method="POST">
				<div class="mowcps-form-group">
						<input type="email" placeholder="Your Contact E-mail" name="email" id="mowcps_person_email" dir="auto" required="true" title="Enter a valid email address." value="{{USER_EMAIL}}">
					</div>
					<div class="mowcps-form-group">
						<textarea 
							placeholder="Ask Anything..." 
							rows="5" 
							id="mowcps-issue-description"
							name="mowcps-issue-description"
						></textarea>
					</div>
					<div class="mowcps-checkbox-container">
						<label class="mowcps-checkbox-label">
							<input type="checkbox" id="contact-checkbox-modal1" name="request-contact" checked> 
							miniOrange representative should reach out to me along with plugin details
						</label>
					</div>
					<div class="mowcps-modal-buttons mowcps-vertical-buttons">
						<button type="submit" class="mowcps-send-query-btn">Send Query</button>
						<button type="button" class="mowcps-continue-deactivating-btn" onclick="moWcpsShowDeactivationModal()">
							Continue with deactivation
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>


<!-- Modal 2: Why are you deactivating? -->
<div class="mowcps-feedback-overlay" id="mowcps-feedback-deactivation-modal">
	<div class="mowcps-feedback-modal">
		<div class="mowcps-feedback-modal-content">
			<span class="mowcps-feedback-close" onclick="moWcpsCloseModal('mowcps-feedback-deactivation-modal')">&times;</span>
			
			<h2>Why are you deactivating?</h2>
			
			<form id="mowcps-deactivation-form" method="POST">
				<div class="mowcps-form-group">
					<select name="mowcps-feedback-deactivation-reason" id="mowcps-feedback-deactivation-reason" required>
						<option value="" disabled selected>Select your reason for deactivation *</option>
						<option value="[missing features]">Missing key features</option>
						<option value="[not working]">Plugin not working as expected</option>
						<option value="[found alternative]">Found a better alternative</option>
						<option value="[temporary]">Temporary deactivation</option>
						<option value="[performance]">Performance issues</option>
						<option value="[pricing]">Pricing concerns</option>
						<option value="[other]">Other</option>
					</select>
					<div class="mowcps-error-message" id="mowcps-reason-error" style="display: none;">
						Please select a reason for deactivation before continuing.
					</div>
				</div>
				
				<!-- Helpful Resources - Shows based on selected reason -->
				<div class="mowcps-helpful-resources" id="mowcps-helpful-resources" style="display: none;">
					<div class="mowcps-resources-content" id="mowcps-resources-content">
						<!-- Dynamic content will be loaded here -->
					</div>
				</div>
				
				<div class="mowcps-form-group">
					<label>Any comments?</label>
					<textarea 
						placeholder="Ask Anything..." 
						rows="4"
						name="mowcps-feedback-reason"
					></textarea>
				</div>
				
				<!-- Contact Request Checkbox - Shows for all reasons -->
				<div class="mowcps-checkbox-container">
					<label class="mowcps-checkbox-label">
						<input type="checkbox" id="contact-checkbox-modal2" name="request-contact" checked> 
						miniOrange representative should reach out to me along with plugin details
					</label>
				</div>
				
				<!-- Expert Contact Info -->
				<div class="mowcps-expert-contact">
					<p>In case of any query, directly reach out to us <a href="mailto:apisupport@xecurify.com">apisupport@xecurify.com</a></p>
				</div>
				
				<div class="mowcps-modal-buttons mowcps-buttons-horizontal">
					<a href="#" class="mowcps-skip-link" onclick="moWcpsSkipAndDeactivate(); return false;">Skip</a>
					<button type="submit" class="mowcps-submit-btn mowcps-btn-small">Reach Out To Our Expert</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Success Modal -->
<div class="mowcps-feedback-overlay" id="mowcps-feedback-success-modal">
	<div class="mowcps-feedback-modal">
		<div class="mowcps-feedback-modal-content mowcps-success-content">
			<span class="mowcps-feedback-close" onclick="moWcpsCloseModal('mowcps-feedback-success-modal')">&times;</span>
			<div class="mowcps-success-icon">
				<div class="mowcps-success-circle">
					<span class="mowcps-success-tick">✓</span>
				</div>
			</div>
			<h2 id="mowcps-success-message">Thank you for your feedback!</h2>
		</div>
	</div>
</div>

