<?php
/**
 * Signup form template
 *
 * This template can be overridden by copying it to yourtheme/radius-booking/global/form-signup.php.
 *
 * @package RadiusBooking\Templates
 * @version 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

// Don't show signup form if user is already logged in.
if ( is_user_logged_in() ) {
    return;
}

?>
<form class="radius-booking-form radius-booking-form-signup" method="post" style="display:none;">

    <?php
    /**
     * Fires at the start of the signup form.
     *
     * @since 1.0.0
     */
    do_action( 'radius_booking_signup_form_start' );
    ?>

    <?php if ( ! empty( $message ) ) : ?>
        <div class="radius-booking-form-message">
            <?php echo wp_kses_post( wpautop( wptexturize( $message ) ) ); ?>
        </div>
    <?php endif; ?>

    <div class="radius-booking-form-row radius-booking-form-row--name">
        <label for="radius-booking-signup-name" class="radius-booking-form-label">
            <?php esc_html_e( 'Full Name', 'radius-booking' ); ?>
            <span class="radius-booking-required" aria-hidden="true">*</span>
            <span class="screen-reader-text"><?php esc_html_e( 'Required', 'radius-booking' ); ?></span>
        </label>

        <div class="radius-booking-input-wrapper">
            <input
                    type="text"
                    class="radius-booking-input radius-booking-input--text"
                    name="full_name"
                    id="radius-booking-signup-name"
                    autocomplete="name"
                    required
                    aria-required="true"
            />
        </div>
    </div>

    <div class="radius-booking-form-row radius-booking-form-row--email">
        <label for="radius-booking-signup-email" class="radius-booking-form-label">
            <?php esc_html_e( 'Email Address', 'radius-booking' ); ?>
            <span class="radius-booking-required" aria-hidden="true">*</span>
            <span class="screen-reader-text"><?php esc_html_e( 'Required', 'radius-booking' ); ?></span>
        </label>

        <div class="radius-booking-input-wrapper">
            <input
                    type="email"
                    class="radius-booking-input radius-booking-input--email"
                    name="email"
                    id="radius-booking-signup-email"
                    autocomplete="email"
                    required
                    aria-required="true"
                    pattern="^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$"
            />
        </div>
    </div>

    <div class="radius-booking-form-row radius-booking-form-row--password">
        <label for="radius-booking-signup-password" class="radius-booking-form-label">
            <?php esc_html_e( 'Password', 'radius-booking' ); ?>
            <span class="radius-booking-required" aria-hidden="true">*</span>
            <span class="screen-reader-text"><?php esc_html_e( 'Required', 'radius-booking' ); ?></span>
        </label>

        <div class="radius-booking-input-wrapper radius-booking-password-wrapper">
            <input
                    type="password"
                    class="radius-booking-input radius-booking-input--password"
                    name="password"
                    id="radius-booking-signup-password"
                    autocomplete="new-password"
                    required
                    aria-required="true"
                    minlength="8"
            />

            <button type="button" class="radius-booking-password-toggle" aria-label="<?php esc_attr_e( 'Toggle password visibility', 'radius-booking' ); ?>">
				<span class="radius-booking-icon radius-booking-icon--eye-open" aria-hidden="true">
					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
						<circle cx="12" cy="12" r="3"></circle>
					</svg>
				</span>
                <span class="radius-booking-icon radius-booking-icon--eye-closed" aria-hidden="true" style="display:none;">
					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
						<line x1="1" y1="1" x2="23" y2="23"></line>
					</svg>
				</span>
            </button>
        </div>

        <p class="radius-booking-field-hint">
            <?php esc_html_e( 'Password must be at least 8 characters long.', 'radius-booking' ); ?>
        </p>
    </div>

    <div class="radius-booking-form-row radius-booking-form-row--confirm-password">
        <label for="radius-booking-signup-confirm-password" class="radius-booking-form-label">
            <?php esc_html_e( 'Confirm Password', 'radius-booking' ); ?>
            <span class="radius-booking-required" aria-hidden="true">*</span>
            <span class="screen-reader-text"><?php esc_html_e( 'Required', 'radius-booking' ); ?></span>
        </label>

        <div class="radius-booking-input-wrapper radius-booking-password-wrapper">
            <input
                    type="password"
                    class="radius-booking-input radius-booking-input--password"
                    name="confirm_password"
                    id="radius-booking-signup-confirm-password"
                    autocomplete="new-password"
                    required
                    aria-required="true"
            />

            <button type="button" class="radius-booking-password-toggle" aria-label="<?php esc_attr_e( 'Toggle password visibility', 'radius-booking' ); ?>">
				<span class="radius-booking-icon radius-booking-icon--eye-open" aria-hidden="true">
					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
						<circle cx="12" cy="12" r="3"></circle>
					</svg>
				</span>
                <span class="radius-booking-icon radius-booking-icon--eye-closed" aria-hidden="true" style="display:none;">
					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
						<line x1="1" y1="1" x2="23" y2="23"></line>
					</svg>
				</span>
            </button>
        </div>
    </div>

    <?php
    /**
     * Fires within the signup form, after the password fields.
     *
     * @since 1.0.0
     */
    do_action( 'radius_booking_signup_form' );
    ?>

    <div class="radius-booking-form-row radius-booking-form-row--terms">
        <label for="radius-booking-terms" class="radius-booking-checkbox-label">
            <input
                    type="checkbox"
                    class="radius-booking-input radius-booking-input--checkbox"
                    name="terms_accepted"
                    id="radius-booking-terms"
                    required
                    aria-required="true"
            />
            <span class="radius-booking-checkbox-mark">
				<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M1 5L4.5 8.5L11 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
			</span>
            <span class="radius-booking-checkbox-text">
				<?php
                printf(
                        wp_kses(
                        /* translators: %1$s: Terms and Conditions URL, %2$s: Privacy Policy URL */
                                __( 'I agree to the <a href="%1$s" target="_blank">Terms and Conditions</a> and <a href="%2$s" target="_blank">Privacy Policy</a>.', 'radius-booking' ),
                                array(
                                        'a' => array(
                                                'href'   => array(),
                                                'target' => array(),
                                        ),
                                )
                        ),
                        esc_url( radius_booking_get_terms_page_url() ),
                        esc_url( get_permalink( get_option( 'wp_page_for_privacy_policy' ) ) )
                );
                ?>
			</span>
        </label>
    </div>

    <?php if ( radius_booking_is_marketing_consent_enabled() ) : ?>
        <div class="radius-booking-form-row radius-booking-form-row--marketing">
            <label for="radius-booking-marketing" class="radius-booking-checkbox-label">
                <input
                        type="checkbox"
                        class="radius-booking-input radius-booking-input--checkbox"
                        name="marketing_consent"
                        id="radius-booking-marketing"
                />
                <span class="radius-booking-checkbox-mark">
					<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M1 5L4.5 8.5L11 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
				</span>
                <span class="radius-booking-checkbox-text">
					<?php esc_html_e( 'I would like to receive promotional emails and updates.', 'radius-booking' ); ?>
				</span>
            </label>
        </div>
    <?php endif; ?>

    <div class="radius-booking-form-row radius-booking-form-row--submit">
        <?php wp_nonce_field( 'radius-booking-signup', 'radius_booking_signup_nonce' ); ?>
        <input type="hidden" name="action" value="radius_booking_signup" />
        <input type="hidden" name="redirect_to" value="<?php echo esc_url( $redirect_to ); ?>" />

        <button type="submit" class="radius-booking-button radius-booking-button--primary radius-booking-button--signup" name="signup" disabled>
            <span class="radius-booking-button-text"><?php esc_html_e( 'Create Account', 'radius-booking' ); ?></span>
            <span class="radius-booking-button-loader" aria-hidden="true"></span>
        </button>
    </div>

    <div class="radius-booking-form-row radius-booking-form-row--switch">
        <p class="radius-booking-form-switch">
            <?php esc_html_e( 'Already have an account?', 'radius-booking' ); ?>
            <a href="#" class="radius-booking-show-login-form">
                <?php esc_html_e( 'Log In', 'radius-booking' ); ?>
            </a>
        </p>
    </div>

    <?php
    /**
     * Fires at the end of the signup form.
     *
     * @since 1.0.0
     */
    do_action( 'radius_booking_signup_form_end' );
    ?>

</form>