<?php
defined( 'ABSPATH' ) || exit;
/**
 * Variables from Woocom_Pay_Balance::handle_balance_page():
 * $order, $merchant_name, $upi_id, $qr_image, $balance, $upi_url,
 * $is_mobile, $order_id, $available_gateways, $default_method
 */
$settings            = get_option( 'woocom_pay_settings', [] );
$txn_required        = ! empty( $settings['enable_txn_id'] );
$screenshot_required = ! empty( $settings['enable_screenshot'] );
$multi_gateway       = count( $available_gateways ) > 1;
?>
<div class="wcp-payment-wrap" style="max-width:700px;margin:40px auto;padding:20px;">
	<div class="wcp-payment-card">

		<!-- Header -->
		<div class="wcp-payment-header">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="wcp-header-home-btn" title="<?php esc_attr_e( 'Back to Home', 'woocom-pay' ); ?>">
				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
				<?php esc_html_e( 'Home', 'woocom-pay' ); ?>
			</a>
			<img src="<?php echo esc_url( WOOCOM_PAY_PLUGIN_URL . 'assets/logo.PNG' ); ?>" alt="Woocom-Pay" class="wcp-logo">
			<h2><?php esc_html_e( 'Pay Your Balance', 'woocom-pay' ); ?></h2>
			<p class="wcp-header-sub"><?php esc_html_e( 'Order', 'woocom-pay' ); ?> #<?php echo esc_html( $order->get_order_number() ); ?></p>
		</div>

		<!-- Amount -->
		<div class="wcp-amount-box">
			<p class="wcp-amount-label"><?php esc_html_e( 'Outstanding Balance Due', 'woocom-pay' ); ?></p>
			<p class="wcp-amount-value"><?php echo wc_price( $balance ); ?></p>
		</div>

		<!-- Gateway selector (shown only when multiple methods are available) -->
		<?php if ( $multi_gateway ) : ?>
		<div class="wcp-pm-selector">
			<p class="wcp-pm-label"><?php esc_html_e( 'Select payment method:', 'woocom-pay' ); ?></p>
			<?php foreach ( $available_gateways as $gid => $gw ) : ?>
			<label class="wcp-pm-option<?php echo $gid === $default_method ? ' wcp-pm-active' : ''; ?>">
				<input type="radio" name="wcp_balance_method" value="<?php echo esc_attr( $gid ); ?>"
					<?php checked( $gid, $default_method ); ?>>
				<span class="wcp-pm-name"><?php echo esc_html( $gw->get_label() ); ?></span>
			</label>
			<?php endforeach; ?>
		</div>
		<?php else : ?>
		<input type="hidden" id="wcp-balance-method" value="<?php echo esc_attr( $default_method ); ?>">
		<?php endif; ?>

		<!-- UPI Payment section -->
		<div class="wcp-balance-section-upi"<?php echo $default_method !== 'upi' ? ' style="display:none;"' : ''; ?>>

			<?php if ( $upi_id || $merchant_name ) : ?>
			<div class="wcp-upi-dest-box">
				<p class="wcp-upi-dest-label"><?php esc_html_e( 'Send Payment To', 'woocom-pay' ); ?></p>
				<?php if ( $merchant_name ) : ?>
				<p class="wcp-merchant-name"><?php echo esc_html( $merchant_name ); ?></p>
				<?php endif; ?>
				<?php if ( $upi_id ) : ?>
				<div class="wcp-upi-id-block">
					<span class="wcp-upi-id-value"><?php echo esc_html( $upi_id ); ?></span>
					<button type="button" class="wcp-copy-btn" data-copy="<?php echo esc_attr( $upi_id ); ?>">
						&#10063; <?php esc_html_e( 'Copy UPI ID', 'woocom-pay' ); ?>
					</button>
				</div>
				<?php endif; ?>
			</div>
			<?php endif; ?>

			<?php if ( $is_mobile ) : ?>
			<div class="wcp-mobile-section">
				<p class="wcp-step-label"><?php esc_html_e( 'Step 1: Tap to open your UPI app', 'woocom-pay' ); ?></p>
				<button type="button" class="wcp-pay-btn" id="wcp-mobile-pay-btn"
					data-upi-url="<?php echo esc_attr( $upi_url ); ?>">
					<span class="wcp-pay-icon">&#9654;</span>
					<?php esc_html_e( 'Pay Balance via UPI', 'woocom-pay' ); ?>
				</button>
				<p class="wcp-hint"><?php esc_html_e( 'Opens Google Pay, PhonePe, Paytm, BHIM or any installed UPI app.', 'woocom-pay' ); ?></p>
				<div class="wcp-return-notice" id="wcp-return-notice" style="display:none;">
					<p>&#9989; <?php esc_html_e( 'Done paying? Scroll down and fill in your payment details below.', 'woocom-pay' ); ?></p>
				</div>
			</div>
			<?php else : ?>
			<div class="wcp-desktop-section">
				<?php if ( $qr_image ) : ?>
				<div class="wcp-qr-wrap">
					<p class="wcp-qr-label"><?php esc_html_e( 'Scan with any UPI App', 'woocom-pay' ); ?></p>
					<img src="<?php echo esc_url( $qr_image ); ?>" alt="QR Code" class="wcp-qr-img">
					<p class="wcp-qr-apps"><?php esc_html_e( 'Google Pay · PhonePe · Paytm · BHIM · Any UPI App', 'woocom-pay' ); ?></p>
				</div>
				<div class="wcp-divider-or"><span><?php esc_html_e( 'OR', 'woocom-pay' ); ?></span></div>
				<?php endif; ?>
				<div class="wcp-desktop-manual">
					<p class="wcp-step-label"><?php esc_html_e( 'Pay using UPI ID manually:', 'woocom-pay' ); ?></p>
					<ol class="wcp-instructions">
						<li><?php esc_html_e( 'Open any UPI app on your mobile.', 'woocom-pay' ); ?></li>
						<li><?php esc_html_e( 'Go to "Send Money" → "Pay by UPI ID / VPA".', 'woocom-pay' ); ?></li>
						<?php if ( $upi_id ) : ?>
						<li><?php printf( esc_html__( 'Enter UPI ID: %s and verify the merchant name.', 'woocom-pay' ), '<strong>' . esc_html( $upi_id ) . '</strong>' ); ?></li>
						<?php endif; ?>
						<li><?php printf( esc_html__( 'Enter exact amount: %s', 'woocom-pay' ), '<strong>' . strip_tags( wc_price( $balance ) ) . '</strong>' ); ?></li>
						<li><?php esc_html_e( 'Complete the payment and note your UTR / Reference ID.', 'woocom-pay' ); ?></li>
						<li><?php esc_html_e( 'Fill the form below and click Submit.', 'woocom-pay' ); ?></li>
					</ol>
				</div>
			</div>
			<?php endif; ?>

			<!-- UPI Confirmation Form -->
			<div class="wcp-confirmation-section">
				<h3><?php esc_html_e( 'Payment Confirmation', 'woocom-pay' ); ?></h3>

				<div class="wcp-info-banner">
					&#8505; <?php esc_html_e( 'After paying, your UPI app will show a UTR number / Reference ID / Transaction ID on the success screen. Paste that number in the field below.', 'woocom-pay' ); ?>
				</div>

				<form id="wcp-submit-form" enctype="multipart/form-data">

					<div class="wcp-field">
						<label for="wcp-txn-id">
							<?php esc_html_e( 'UPI Transaction / UTR / Reference ID', 'woocom-pay' ); ?>
							<?php if ( $txn_required ) : ?>
							<span class="required">*</span>
							<?php else : ?>
							<span class="optional">(<?php esc_html_e( 'Recommended', 'woocom-pay' ); ?>)</span>
							<?php endif; ?>
						</label>
						<input type="text" id="wcp-txn-id" name="transaction_id"
							placeholder="<?php esc_attr_e( 'e.g. 425612345678 — paste it from your UPI app', 'woocom-pay' ); ?>"
							<?php echo $txn_required ? 'required' : ''; ?>>
						<p class="wcp-field-hint">
							<?php esc_html_e( 'Find this in your UPI app under transaction history or the Payment Success screen. It may be labelled UTR, Ref No., or Transaction ID.', 'woocom-pay' ); ?>
						</p>
					</div>

					<div class="wcp-field">
						<label for="wcp-screenshot">
							<?php esc_html_e( 'Payment Screenshot', 'woocom-pay' ); ?>
							<?php if ( $screenshot_required ) : ?>
							<span class="required">*</span>
							<?php else : ?>
							<span class="optional">(<?php esc_html_e( 'Recommended', 'woocom-pay' ); ?>)</span>
							<?php endif; ?>
						</label>
						<input type="file" id="wcp-screenshot" name="screenshot" accept="image/*"
							<?php echo $screenshot_required ? 'required' : ''; ?>>
						<p class="wcp-field-hint"><?php esc_html_e( 'Upload a screenshot from your UPI app showing the payment success. Max 5MB.', 'woocom-pay' ); ?></p>
					</div>

					<div class="wcp-field">
						<label for="wcp-remarks">
							<?php esc_html_e( 'Remarks', 'woocom-pay' ); ?>
							<span class="optional">(<?php esc_html_e( 'Optional', 'woocom-pay' ); ?>)</span>
						</label>
						<textarea id="wcp-remarks" name="remarks" rows="3"
							placeholder="<?php esc_attr_e( 'Any additional notes about your payment...', 'woocom-pay' ); ?>"></textarea>
					</div>

					<div id="wcp-form-message" class="wcp-message" style="display:none;"></div>

					<button type="submit" class="wcp-submit-btn" id="wcp-submit-btn">
						<?php esc_html_e( 'Submit Balance Payment', 'woocom-pay' ); ?>
					</button>
				</form>
			</div>

		</div><!-- .wcp-balance-section-upi -->

		<!-- API gateway section (Razorpay / Cashfree / Custom) -->
		<?php foreach ( $available_gateways as $gid => $gw ) :
			if ( $gid === 'upi' ) {
				continue;
			}
		?>
		<div class="wcp-balance-section-api"
			data-gateway="<?php echo esc_attr( $gid ); ?>"
			<?php echo $default_method !== $gid ? 'style="display:none;"' : ''; ?>>
			<p class="wcp-checkout-vpa-hint">
				<?php esc_html_e( 'You will be redirected to a secure hosted payment page to pay your balance.', 'woocom-pay' ); ?>
			</p>
			<button type="button" class="wcp-pay-btn wcp-api-pay-btn"
				data-gateway="<?php echo esc_attr( $gid ); ?>"
				data-order="<?php echo esc_attr( $order_id ); ?>"
				data-nonce="<?php echo esc_attr( wp_create_nonce( 'wcp_create_balance_link' ) ); ?>">
				<span class="wcp-pay-icon">&#9654;</span>
				<?php echo esc_html( sprintf( __( 'Pay Balance via %s', 'woocom-pay' ), $gw->get_label() ) ); ?>
			</button>
			<p class="wcp-hint" id="wcp-api-msg-<?php echo esc_attr( $gid ); ?>"></p>
		</div>
		<?php endforeach; ?>

		<!-- Success state -->
		<div id="wcp-success-state" style="display:none;" class="wcp-success-box">
			<div class="wcp-success-icon">&#10003;</div>
			<h3><?php esc_html_e( 'Balance Payment Submitted!', 'woocom-pay' ); ?></h3>
			<p><?php esc_html_e( 'Thank you. We will verify your payment and mark your order as completed shortly.', 'woocom-pay' ); ?></p>
		</div>

	</div>
</div>
