<?php
defined( 'ABSPATH' ) || exit;
/**
 * Variables available from Woocom_Pay_Gateway::render_payment_page():
 * $order, $merchant_name, $upi_id, $qr_image, $amount, $upi_url,
 * $is_mobile, $has_partial, $paid_amount, $balance, $order_id,
 * $enable_txn_id, $enable_screenshot
 */
$txn_required        = $enable_txn_id;
$screenshot_required = $enable_screenshot;
?>
<div class="wcp-payment-wrap">
	<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="<?php echo esc_attr( $merchant_name ); ?>" class="wcp-logo">
			<h2><?php esc_html_e( 'Complete Your Payment', '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 Summary -->
		<div class="wcp-amount-box">
			<?php if ( $has_partial ) : ?>
			<table class="wcp-summary-table">
				<tr>
					<td><?php esc_html_e( 'Product Total', 'woocom-pay' ); ?></td>
					<td><?php echo wc_price( (float) $order->get_meta( '_wcp_product_total' ) ); ?></td>
				</tr>
				<tr class="wcp-pay-now-row">
					<td><?php esc_html_e( 'Advance Paying Now', 'woocom-pay' ); ?></td>
					<td><?php echo wc_price( $paid_amount ); ?></td>
				</tr>
				<tr class="wcp-balance-row">
					<td><?php esc_html_e( 'Balance Due Later', 'woocom-pay' ); ?></td>
					<td><?php echo wc_price( $balance ); ?></td>
				</tr>
			</table>
			<?php else : ?>
			<p class="wcp-amount-label"><?php esc_html_e( 'Total Amount to Pay', 'woocom-pay' ); ?></p>
			<p class="wcp-amount-value"><?php echo wc_price( $amount ); ?></p>
			<?php endif; ?>
		</div>

		<!-- UPI Payment Destination — always visible, big and prominent -->
		<?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" id="wcp-upi-id-text"><?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 ) : ?>
		<!-- ================================================ -->
		<!-- MOBILE FLOW                                       -->
		<!-- ================================================ -->
		<div class="wcp-mobile-section">
			<p class="wcp-step-label"><?php esc_html_e( 'Step 1: Tap the button 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 Now via UPI', 'woocom-pay' ); ?>
			</button>
			<p class="wcp-hint">
				<?php esc_html_e( 'Opens Google Pay, PhonePe, Paytm, BHIM or any installed UPI app automatically.', '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 : ?>
		<!-- ================================================ -->
		<!-- DESKTOP FLOW                                      -->
		<!-- ================================================ -->
		<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="<?php esc_attr_e( 'UPI QR Code', 'woocom-pay' ); ?>" 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 Google Pay, PhonePe, Paytm, BHIM or 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 the exact amount: %s', 'woocom-pay' ), '<strong>' . strip_tags( wc_price( $amount ) ) . '</strong>' ); ?></li>
					<li><?php esc_html_e( 'Complete the payment.', 'woocom-pay' ); ?></li>
					<li><?php esc_html_e( 'Note the UTR / Reference / Transaction ID shown in your app after payment.', 'woocom-pay' ); ?></li>
					<li><?php esc_html_e( 'Fill the details below and click Submit.', 'woocom-pay' ); ?></li>
				</ol>
			</div>
		</div>
		<?php endif; ?>

		<!-- ================================================ -->
		<!-- PAYMENT CONFIRMATION FORM — always shown         -->
		<!-- ================================================ -->
		<div class="wcp-confirmation-section" id="wcp-confirmation-form">
			<h3><?php esc_html_e( 'Payment Confirmation', 'woocom-pay' ); ?></h3>

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

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

				<!-- Transaction ID — always visible -->
				<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 → Payment Success screen. It may be labelled UTR, Ref No., or Transaction ID.', 'woocom-pay' ); ?>
					</p>
				</div>

				<!-- Screenshot — always visible -->
				<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 of the payment success screen from your UPI app. Max 5MB (JPG, PNG, WEBP).', 'woocom-pay' ); ?></p>
				</div>

				<!-- Remarks -->
				<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 Payment Details', 'woocom-pay' ); ?>
				</button>
			</form>
		</div>

		<!-- 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( 'Payment Details Submitted!', 'woocom-pay' ); ?></h3>
			<p><?php esc_html_e( 'Thank you. We will verify your payment and update your order shortly.', 'woocom-pay' ); ?></p>
		</div>

	</div>
</div>

