<?php
/**
 * Create Fundraiser Form — personal join step (second step of team flow).
 *
 * Shown after the team has been successfully created. Lets the creator
 * optionally add their own personal fundraiser under the new team.
 * Skipping is always allowed — the user can join later.
 *
 * Data attributes on the wrapper element supply the user's display name
 * (data-user-display-name) and, once the team is created, the team ID
 * (data-created-team-id) and team URL (data-created-team-url) via JS.
 *
 * @package AmbassadorHub\Fundraisers\Blocks\CreateFundraiserForm
 */

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

use AmbassadorHub\Fundraisers\Admin\Settings\SettingsManager as FundraiserSettingsManager;
?>

<div class="ambh-cff-team-created-banner" role="status" data-join-banner>
	<span class="ambh-cff-team-created-banner__icon" aria-hidden="true">✓</span>
	<span class="ambh-cff-team-created-banner__text">
		<?php esc_html_e( 'Your team has been created!', 'ambassadorhub' ); ?>
		<strong class="ambh-cff-team-created-banner__name" data-created-team-name></strong>
	</span>
</div>

<h3 class="ambh-cff-step-title"><?php esc_html_e( 'Add your personal fundraiser', 'ambassadorhub' ); ?></h3>
<p class="ambh-cff-step-intro">
	<?php esc_html_e( 'Would you like to create your own fundraising page under this team? Donors will be able to find you personally and see your motivation.', 'ambassadorhub' ); ?>
</p>

<form class="ambh-cff-personal-form" novalidate>

	<div class="ambh-cff-field">
		<label for="ambh-cff-personal-title">
			<?php esc_html_e( 'Your name', 'ambassadorhub' ); ?> <span aria-hidden="true">*</span>
		</label>
		<p class="ambh-cff-field__hint"><?php esc_html_e( 'This is how you will appear to donors.', 'ambassadorhub' ); ?></p>
		<input
			type="text"
			id="ambh-cff-personal-title"
			name="title"
			required
			maxlength="200"
			autocomplete="off">
		<span class="ambh-cff-field__error" aria-live="polite"></span>
	</div>

	<div class="ambh-cff-field">
		<label for="ambh-cff-personal-content">
			<?php esc_html_e( 'Your personal motivation', 'ambassadorhub' ); ?> <span aria-hidden="true">*</span>
		</label>
		<p class="ambh-cff-field__hint"><?php esc_html_e( 'Share your story and why this cause matters to you.', 'ambassadorhub' ); ?></p>
		<textarea
			id="ambh-cff-personal-content"
			name="content"
			required
			rows="5"></textarea>
		<span class="ambh-cff-field__error" aria-live="polite"></span>
	</div>

	<div class="ambh-cff-field ambh-cff-field--optional">
		<label for="ambh-cff-personal-target">
			<?php
			/* translators: %s: currency symbol */
			printf( esc_html__( 'Your personal goal (%s)', 'ambassadorhub' ), esc_html( FundraiserSettingsManager::get_currency_symbol() ) );
			?>
			<span class="ambh-cff-field__optional"><?php esc_html_e( 'optional', 'ambassadorhub' ); ?></span>
		</label>
		<input
			type="text"
			inputmode="decimal"
			id="ambh-cff-personal-target"
			name="target_amount"
			class="ambh-currency-input"
			value="">
		<span class="ambh-cff-field__error" aria-live="polite"></span>
	</div>

	<div class="ambh-cff-actions">
		<button type="submit" class="ambh-cff-submit-personal ambh-button ambh-button--primary" data-join-submit>
			<?php esc_html_e( 'Join the team', 'ambassadorhub' ); ?>
		</button>
		<button type="button" class="ambh-cff-skip-personal ambh-button ambh-button--secondary" data-join-skip>
			<?php esc_html_e( 'Skip — go to team page', 'ambassadorhub' ); ?>
		</button>
	</div>

	<p class="ambh-cff-status" role="status" aria-live="polite"></p>

</form>
