<?php
/**
 * Mobile App admin view (free preview — pairing disabled).
 *
 * @package APBGF.
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$staff_members = get_posts(
	array(
		'post_type'   => 'apbgf-staff',
		'numberposts' => -1,
		'post_status' => 'publish',
	)
);

$apbgf_mobile_app_landing_url = 'https://gravitybooking.com/mobile-app/';
$apbgf_mobile_app_docs_url    = 'https://gravitybooking.com/docs/gravity-forms-booking/gravitybooking-mobile-app/';
?>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
	.apbgf-mobile-app-setup-container {
		max-width: 1000px;
		margin: 20px auto;
		font-family: 'Poppins', sans-serif;
		background: #fff;
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
	}

	.apbgf-mobile-app-hero {
		background: linear-gradient(135deg, #57B0EE 0%, #3da5e6 100%);
		padding: 50px;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.apbgf-mobile-app-hero-content {
		flex: 1;
	}

	.apbgf-mobile-app-hero h1 {
		font-size: 36px;
		font-weight: 800;
		margin: 0 0 10px 0;
		color: #fff;
		letter-spacing: -0.02em;
	}

	.apbgf-mobile-app-hero p {
		font-size: 18px;
		opacity: 0.9;
		margin: 0 0 30px 0;
		max-width: 500px;
	}

	.apbgf-mobile-app-badges {
		display: flex;
		gap: 15px;
	}

	.apbgf-mobile-app-badge {
		height: 44px;
		transition: 0.3s;
	}

	.apbgf-mobile-app-badge img {
		height: 100%;
		width: auto;
	}

	.apbgf-mobile-app-badge:hover {
		transform: translateY(-2px);
		filter: brightness(1.1);
	}

	.apbgf-mobile-app-main {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: 50px;
		padding: 50px;
		background: #fff;
	}

	@media (max-width: 900px) {
		.apbgf-mobile-app-main {
			grid-template-columns: 1fr;
			padding: 30px;
		}
	}

	.apbgf-mobile-setup-steps h2 {
		font-size: 24px;
		font-weight: 700;
		margin: 0 0 30px 0;
		color: #1e293b;
	}

	.apbgf-mobile-step {
		display: flex;
		margin-bottom: 30px;
	}

	.apbgf-mobile-step-number {
		width: 36px;
		height: 36px;
		background: #f1f5f9;
		color: #57B0EE;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 800;
		flex-shrink: 0;
		margin-right: 20px;
	}

	.apbgf-mobile-step-text h4 {
		margin: 0 0 5px 0;
		font-size: 17px;
		font-weight: 700;
		color: #0f172a;
	}

	.apbgf-mobile-step-text p {
		margin: 0;
		color: #64748b;
		font-size: 15px;
		line-height: 1.6;
	}

	.apbgf-mobile-qr-panel {
		background: #f8fafc;
		border-radius: 20px;
		padding: 40px;
		text-align: center;
		border: 1px solid #e2e8f0;
		position: relative;
	}

	.apbgf-mobile-qr-card {
		background: #fff;
		padding: 25px;
		border-radius: 16px;
		display: inline-block;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
		margin-bottom: 25px;
		border: 1px solid #f1f5f9;
	}

	.apbgf-mobile-qr-placeholder {
		width: 220px;
		height: 220px;
		background: #f1f5f9;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #94a3b8;
		font-size: 48px;
	}

	.apbgf-mobile-disabled-overlay {
		position: absolute;
		inset: 0;
		background: rgba(248, 250, 252, 0.55);
		border-radius: 20px;
		pointer-events: none;
	}

	.apbgf-mobile-qr-refresh-btn {
		background: #57B0EE;
		color: #fff;
		border: none;
		padding: 14px 28px;
		border-radius: 12px;
		font-weight: 700;
		font-size: 14px;
		cursor: pointer;
		opacity: 0.65;
		display: inline-flex;
		align-items: center;
		gap: 10px;
		box-shadow: 0 4px 12px rgba(87, 176, 238, 0.2);
	}

	.apbgf-mobile-qr-expiry {
		font-size: 13px;
		color: #94a3b8;
		margin-top: 15px;
		font-weight: 500;
	}

	.apbgf-mobile-qr-expiry-timer {
		color: #f43f5e;
		font-weight: 700;
	}

	select#apbgf-mobile-qr-role-select {
		margin-top: 12px;
		width: 100%;
		max-width: 320px;
		padding: 12px 16px;
		border-radius: 10px;
		border: 1px solid #e2e8f0;
		background: #f8fafc;
		font-family: inherit;
		font-weight: 500;
		color: #94a3b8;
		cursor: not-allowed;
	}

	.apbgf-mobile-license-badge {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 4px 12px;
		border-radius: 20px;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		margin-top: 10px;
		background: #FEF3C7;
		color: #92400E;
	}

	.apbgf-mobile-management-footer {
		padding: 20px 50px;
		background: #F8FAFC;
		border-top: 1px solid #E2E8F0;
		display: flex;
		justify-content: flex-end;
	}

	.apbgf-mobile-reset-sessions-btn {
		background: transparent;
		color: #94A3B8;
		border: 1px solid #E2E8F0;
		padding: 8px 16px;
		border-radius: 8px;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		opacity: 0.65;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.apbgf-mobile-connected-devices-section {
		margin-top: 40px;
		padding: 0 50px 50px;
	}

	.apbgf-mobile-devices-empty {
		padding: 40px;
		text-align: center;
		color: #94a3b8;
		background: #f8fafc;
		border-radius: 12px;
		border: 1px dashed #e2e8f0;
		font-size: 14px;
		line-height: 1.6;
	}

	.apbgf-mobile-role-select-wrap {
		display: inline-block;
		width: 100%;
		max-width: 320px;
		cursor: pointer;
	}

	.apbgf-mobile-refresh-devices-btn {
		background: none;
		border: none;
		color: #57B0EE;
		cursor: pointer;
		font-weight: 600;
		font-size: 13px;
		display: flex;
		align-items: center;
		gap: 5px;
		opacity: 0.65;
	}

	.apbgf-mobile-resource-links {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		padding: 16px 50px 0;
	}

	.apbgf-mobile-resource-links-label {
		font-size: 13px;
		font-weight: 600;
		color: #64748b;
		margin-right: 4px;
	}

	.apbgf-mobile-resource-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 18px;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
		transition: 0.2s;
		border: 2px solid transparent;
	}

	.apbgf-mobile-resource-link--landing {
		background: #E0F2FE;
		color: #0369a1;
		border-color: #7dd3fc;
	}

	.apbgf-mobile-resource-link--landing:hover {
		background: #bae6fd;
		color: #0c4a6e;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(3, 105, 161, 0.15);
	}

	.apbgf-mobile-resource-link--docs {
		background: #f0fdf4;
		color: #166534;
		border-color: #86efac;
	}

	.apbgf-mobile-resource-link--docs:hover {
		background: #dcfce7;
		color: #14532d;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(22, 101, 52, 0.12);
	}

	.apbgf-mobile-resource-link i {
		font-size: 15px;
	}
</style>

<div class="wrap">
	<div class="apbgf-mobile-app-setup-container">
		<div class="apbgf-mobile-app-hero">
			<div class="apbgf-mobile-app-hero-content">
				<h1><?php esc_html_e( 'Gravity Forms Booking', 'appointment-and-booking-for-gravity-forms' ); ?></h1>
				<p><?php esc_html_e( 'Track your calendar, manage staff, and confirm appointments on the go with our premium mobile experience.', 'appointment-and-booking-for-gravity-forms' ); ?></p>
				<div class="apbgf-mobile-app-badges">
					<a href="https://apps.apple.com/us/app/gravity-forms-booking/id6758208609" target="_blank" rel="noopener noreferrer" class="apbgf-mobile-app-badge">
						<img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" alt="<?php esc_attr_e( 'App Store', 'appointment-and-booking-for-gravity-forms' ); ?>">
					</a>
					<a href="https://play.google.com/store/apps/details?id=com.gravitybooking" target="_blank" rel="noopener noreferrer" class="apbgf-mobile-app-badge">
						<img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" alt="<?php esc_attr_e( 'Google Play', 'appointment-and-booking-for-gravity-forms' ); ?>">
					</a>
				</div>
			</div>
			<div style="font-size: 140px; opacity: 0.2; transform: rotate(15deg)">
				<i class="fas fa-qrcode" aria-hidden="true"></i>
			</div>
		</div>

		<div style="padding: 0 50px; margin-top: 20px;">
			<div class="apbgf-mobile-license-badge">
				<i class="fas fa-lock" aria-hidden="true"></i>
				<?php esc_html_e( 'Pro Plan Required', 'appointment-and-booking-for-gravity-forms' ); ?>
			</div>
		</div>

		<div class="apbgf-mobile-resource-links">
			<span class="apbgf-mobile-resource-links-label"><?php esc_html_e( 'Learn more:', 'appointment-and-booking-for-gravity-forms' ); ?></span>
			<a href="<?php echo esc_url( $apbgf_mobile_app_landing_url ); ?>" target="_blank" rel="noopener noreferrer" class="apbgf-mobile-resource-link apbgf-mobile-resource-link--landing">
				<i class="fas fa-mobile-screen-button" aria-hidden="true"></i>
				<?php esc_html_e( 'Mobile App Overview', 'appointment-and-booking-for-gravity-forms' ); ?>
				<i class="fas fa-arrow-up-right-from-square" aria-hidden="true" style="font-size:11px;opacity:0.75;"></i>
			</a>
			<a href="<?php echo esc_url( $apbgf_mobile_app_docs_url ); ?>" target="_blank" rel="noopener noreferrer" class="apbgf-mobile-resource-link apbgf-mobile-resource-link--docs">
				<i class="fas fa-book" aria-hidden="true"></i>
				<?php esc_html_e( 'Setup Documentation', 'appointment-and-booking-for-gravity-forms' ); ?>
				<i class="fas fa-arrow-up-right-from-square" aria-hidden="true" style="font-size:11px;opacity:0.75;"></i>
			</a>
		</div>

		<div class="apbgf-mobile-app-main">
			<div class="apbgf-mobile-setup-steps">
				<h2><?php esc_html_e( 'Easy Setup Guide', 'appointment-and-booking-for-gravity-forms' ); ?></h2>

				<div class="apbgf-mobile-step">
					<div class="apbgf-mobile-step-number">01</div>
					<div class="apbgf-mobile-step-text">
						<h4><?php esc_html_e( 'Identity Check', 'appointment-and-booking-for-gravity-forms' ); ?></h4>
						<p><?php esc_html_e( 'Select your role below. Staff accounts will only see their own assigned bookings for privacy.', 'appointment-and-booking-for-gravity-forms' ); ?></p>
						<div class="apbgf-mobile-role-select-wrap apbgf-pro-trigger" data-apbgf-pro-modal="apbgf-pro-modal" role="button" tabindex="0">
							<select id="apbgf-mobile-qr-role-select" disabled>
								<option value="admin"><?php esc_html_e( 'Administrator (Full Primary Access)', 'appointment-and-booking-for-gravity-forms' ); ?></option>
								<?php foreach ( $staff_members as $staff ) : ?>
									<option value="staff" data-staff-id="<?php echo esc_attr( $staff->ID ); ?>">
										<?php
										/* translators: %s: staff member name */
										echo esc_html( sprintf( __( 'Staff: %s', 'appointment-and-booking-for-gravity-forms' ), $staff->post_title ) );
										?>
									</option>
								<?php endforeach; ?>
							</select>
						</div>
					</div>
				</div>

				<div class="apbgf-mobile-step">
					<div class="apbgf-mobile-step-number">02</div>
					<div class="apbgf-mobile-step-text">
						<h4><?php esc_html_e( 'Open Scanner', 'appointment-and-booking-for-gravity-forms' ); ?></h4>
						<p><?php esc_html_e( 'Launch the Gravity Bookings app and tap the Scan QR Code button on the welcome screen.', 'appointment-and-booking-for-gravity-forms' ); ?></p>
					</div>
				</div>

				<div class="apbgf-mobile-step">
					<div class="apbgf-mobile-step-number">03</div>
					<div class="apbgf-mobile-step-text">
						<h4><?php esc_html_e( 'Connect & Sync', 'appointment-and-booking-for-gravity-forms' ); ?></h4>
						<p><?php esc_html_e( 'The app will securely authorize your device and immediately start syncing your live calendar data.', 'appointment-and-booking-for-gravity-forms' ); ?></p>
					</div>
				</div>
			</div>

			<div class="apbgf-mobile-qr-panel apbgf-pro-trigger" data-apbgf-pro-modal="apbgf-pro-modal" role="button" tabindex="0">
				<div class="apbgf-mobile-disabled-overlay" aria-hidden="true"></div>
				<div class="apbgf-mobile-qr-card">
					<div class="apbgf-mobile-qr-placeholder" aria-hidden="true">
						<i class="fas fa-lock"></i>
					</div>
				</div>

				<button type="button" class="apbgf-mobile-qr-refresh-btn apbgf-pro-trigger" data-apbgf-pro-modal="apbgf-pro-modal">
					<i class="fas fa-sync-alt" aria-hidden="true"></i>
					<?php esc_html_e( 'Refresh Pairing Code', 'appointment-and-booking-for-gravity-forms' ); ?>
				</button>

				<div class="apbgf-mobile-qr-expiry">
					<?php esc_html_e( 'Secure link expires in', 'appointment-and-booking-for-gravity-forms' ); ?>
					<span class="apbgf-mobile-qr-expiry-timer">05:00</span>
				</div>
			</div>
		</div>

		<div class="apbgf-mobile-management-footer">
			<button type="button" class="apbgf-mobile-reset-sessions-btn apbgf-pro-trigger" data-apbgf-pro-modal="apbgf-pro-modal"
				title="<?php esc_attr_e( 'Upgrade to Pro to manage mobile sessions', 'appointment-and-booking-for-gravity-forms' ); ?>">
				<i class="fas fa-trash-alt" aria-hidden="true"></i>
				<?php esc_html_e( 'Reset All Mobile Sessions', 'appointment-and-booking-for-gravity-forms' ); ?>
			</button>
		</div>

		<div class="apbgf-mobile-connected-devices-section">
			<div style="display:flex; justify-content:space-between; align-items:center;">
				<h2 style="font-size: 22px; font-weight: 700; color: #1e293b; margin:0;"><?php esc_html_e( 'Connected Devices', 'appointment-and-booking-for-gravity-forms' ); ?></h2>
				<button type="button" class="apbgf-mobile-refresh-devices-btn apbgf-pro-trigger" data-apbgf-pro-modal="apbgf-pro-modal">
					<i class="fas fa-sync-alt" aria-hidden="true"></i>
					<?php esc_html_e( 'Refresh List', 'appointment-and-booking-for-gravity-forms' ); ?>
				</button>
			</div>
			<p style="color:#64748b; font-size:14px; margin:5px 0 20px;"><?php esc_html_e( 'These are the devices currently registered to receive notifications for this site.', 'appointment-and-booking-for-gravity-forms' ); ?></p>

			<div class="apbgf-mobile-devices-empty">
				<?php esc_html_e( 'No devices connected. Upgrade to Pro to pair the mobile app.', 'appointment-and-booking-for-gravity-forms' ); ?>
			</div>
		</div>
	</div>
</div>

<?php
$apbgf_pro_popup_img = APBGF_IMAGE_URL . 'ProPopup.svg';
$apbgf_pricing_url   = 'https://gravitybooking.com/pricing/?utm_source=plugin&utm_medium=mobile-app';
if ( $apbgf_pro_popup_img ) :
	?>
	<div id="apbgf-pro-modal" class="apbgf-pro-modal" style="display:none;">
		<div class="apbgf-pro-modal-backdrop" style="position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100000;"></div>
		<div class="apbgf-pro-modal-inner" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100001;max-width:640px;width:100%;overflow:hidden;border-radius:8px;">
			<div class="apbgf-pro-modal-content" style="position:relative;">
				<img src="<?php echo esc_url( $apbgf_pro_popup_img ); ?>" alt="<?php esc_attr_e( 'Upgrade to Pro', 'appointment-and-booking-for-gravity-forms' ); ?>" style="display:block;width:100%;height:auto;" />
				<a href="<?php echo esc_url( $apbgf_pricing_url ); ?>" target="_blank" rel="noopener noreferrer"
					aria-label="<?php esc_attr_e( 'Buy Gravity Bookings', 'appointment-and-booking-for-gravity-forms' ); ?>"
					style="position:absolute;left:31%;top:69%;width:38%;height:15%;background:transparent;border:none;outline:none;box-shadow:none;cursor:pointer;text-indent:-9999px;overflow:hidden;">
					<?php esc_html_e( 'Buy Gravity Bookings', 'appointment-and-booking-for-gravity-forms' ); ?>
				</a>
				<button type="button" class="apbgf-pro-modal-close-area" aria-label="<?php esc_attr_e( 'Close', 'appointment-and-booking-for-gravity-forms' ); ?>" style="position:absolute;top:0;right:0;width:15%;height:12%;background:transparent;border:none;outline:none;box-shadow:none;cursor:pointer;z-index:2;"></button>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		(function() {
			function apbgfReady(fn) {
				if (document.readyState === 'loading') {
					document.addEventListener('DOMContentLoaded', fn);
				} else {
					fn();
				}
			}
			apbgfReady(function() {
				var modal = document.getElementById('apbgf-pro-modal');
				if (!modal) {
					return;
				}
				var closeArea = modal.querySelector('.apbgf-pro-modal-close-area');
				var backdrop  = modal.querySelector('.apbgf-pro-modal-backdrop');

				function closeModal(e) {
					if (e) {
						e.preventDefault();
					}
					modal.style.display = 'none';
					document.body.classList.remove('apbgf-modal-open');
				}

				if (closeArea) {
					closeArea.addEventListener('click', closeModal);
				}
				if (backdrop) {
					backdrop.addEventListener('click', closeModal);
				}
			});
		})();
	</script>
	<?php
endif;
