<?php
/**
 * Country selector shortcode output template.
 *
 * Variables in scope (passed by Country_Selector::render_wrapper()):
 *
 * @var string                                                         $instance_id
 * @var string                                                         $trigger         "auto"|"button"
 * @var string                                                         $default_country  ISO code or empty.
 * @var string|null                                                    $geo_hint
 * @var string                                                         $heading
 * @var \DonationRouter\Country_Routing[]            $routings
 * @var array<int,array<string,mixed>>                                 $routing_data
 *
 * @since   1.0.0
 * @package DonationRouter
 */

declare( strict_types=1 );

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

?>
<div
	class="ador-country-selector-wrap"
	id="<?php echo esc_attr( $instance_id ); ?>"
	data-trigger="<?php echo esc_attr( $trigger ); ?>"
	data-default-country="<?php echo esc_attr( $default_country ); ?>"
	data-geo-hint="<?php echo esc_attr( (string) $geo_hint ); ?>"
	data-instance="<?php echo esc_attr( $instance_id ); ?>"
>
	<?php // Routing data consumed by country-selector.js. ?>
	<script type="application/json" class="ador-routing-data">
		<?php echo wp_json_encode( $routing_data, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ); ?>
	</script>

	<?php // Hidden donation form containers — JS reveals the selected one. ?>
	<?php foreach ( $routings as $ador_routing ) : ?>
		<div
			class="ador-country-selector-form"
			data-routing-country="<?php echo esc_attr( $ador_routing->country_code ); ?>"
			data-form-id="<?php echo absint( $ador_routing->form_id ); ?>"
			data-account-id="<?php echo absint( $ador_routing->account_id ); // Server-resolved — not relied on by client. ?>"
			style="display:none;"
			aria-hidden="true"
		>
			<?php echo do_shortcode( '[give_form id="' . absint( $ador_routing->form_id ) . '"]' ); ?>
		</div>
	<?php endforeach; ?>

	<?php // Country selection modal. ?>
	<div
		class="ador-country-selector-modal"
		id="<?php echo esc_attr( $instance_id ); ?>-modal"
		role="dialog"
		aria-modal="true"
		aria-labelledby="<?php echo esc_attr( $instance_id ); ?>-heading"
		aria-describedby="<?php echo esc_attr( $instance_id ); ?>-desc"
		hidden
	>
		<div class="ador-country-selector-modal__backdrop" aria-hidden="true" data-ador-close="backdrop"></div>

		<div class="ador-country-selector-modal__dialog">
			<div class="ador-country-selector-modal__header">
				<h2
					class="ador-country-selector-modal__heading"
					id="<?php echo esc_attr( $instance_id ); ?>-heading"
				>
					<?php echo wp_kses_post( $heading ); ?>
				</h2>
			</div>

			<div
				class="ador-country-selector-modal__body"
				id="<?php echo esc_attr( $instance_id ); ?>-desc"
			>
				<ul
					class="ador-country-selector-modal__list"
					role="listbox"
					aria-label="<?php esc_attr_e( 'Select your country', 'alamin-donation-router' ); ?>"
				>
					<?php foreach ( $routing_data as $ador_item ) : ?>
						<li
							class="ador-country-selector-modal__option<?php echo esc_attr( $geo_hint === $ador_item['countryCode'] ? ' ador-country-selector-modal__option--suggested' : '' ); ?>"
							role="option"
							aria-selected="false"
							data-country="<?php echo esc_attr( $ador_item['countryCode'] ); ?>"
							data-form-id="<?php echo absint( $ador_item['formId'] ); ?>"
							tabindex="0"
							aria-label="<?php echo esc_attr( wp_strip_all_tags( $ador_item['label'] ) ); ?>"
						>
							<span class="ador-country-selector-modal__option-label">
								<?php echo wp_kses_post( $ador_item['label'] ); ?>
							</span>
							<?php if ( isset( $ador_item['description'] ) ) : ?>
								<span class="ador-country-selector-modal__option-description">
									<?php echo wp_kses_post( $ador_item['description'] ); ?>
								</span>
							<?php endif; ?>
							<?php if ( $geo_hint === $ador_item['countryCode'] ) : ?>
								<span class="ador-country-selector-modal__suggested-badge" aria-hidden="true">
									<?php esc_html_e( 'Suggested', 'alamin-donation-router' ); ?>
								</span>
							<?php endif; ?>
						</li>
					<?php endforeach; ?>
				</ul>
			</div>
		</div>
	</div>

	<?php if ( 'button' === $trigger ) : ?>
		<button
			type="button"
			class="ador-country-selector-trigger button"
			data-ador-country-selector-trigger="true"
			aria-controls="<?php echo esc_attr( $instance_id ); ?>-modal"
			aria-expanded="false"
			aria-haspopup="dialog"
		>
			<?php esc_html_e( 'Select Country', 'alamin-donation-router' ); ?>
		</button>
	<?php endif; ?>
</div>
