<?php
	/**
	 * Footer Template
	 */

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

?>
<footer class="g-98a0e429" data-bs-unit="585a73" data-test-wrap="73a7a137cb">
	<div class="g-b24e2866" id="elem-a430e054adf751d8">
		<div class="g-9e93b633" data-mui-source="2b7654f8" data-widget-trigger="66967c6" data-widget-group="d3c8759f6" data-test-e2e="b30e52037d">
			<div class="g-991189f3" id="subscribe-toast" id="elem-844bfeb3ec0b3344"></div>
			<div class="g-e5c7d560" data-component-handler="f66236307d" data-mui-selected="2d39f4" data-component-animation="none">
				<h2 class="g-3cd489c1 g-5e158376" id="elem-84ac4f65bcd82cdd">
					Get the latest sports news and training insights
				</h2>
				<p class="g-8da625a0 g-bf1581e5" data-block-target="85ccd5b5" data-module-animation="bounce" data-section-target="3ceae9bcde" data-bs-variant="filled">
					Subscribe to receive weekly updates on match results, expert analysis, and practical training advice to support your athletic journey.
				</p>
			</div>
			<form
				class="g-fe96770b"
				id="subscribe-form"
				novalidate
				id="elem-643d6df8d5ba80b8"
			>
				<div class="g-341ee715 g-bf1581e5" data-mui-interval="4692405de2" data-mui-qa="b760ad500" data-mui-color="primary" data-bs-checked="cf759cc22fe" data-analytics-color="secondary">
					Stay up to date with the latest news
				</div>
				<div class="g-498bf68d" id="elem-1e20850269888af2">
					<input
						type="email"
						name="email"
						class="g-78efba7b"
						placeholder="E-mail"
						required
						data-module-status="draft" data-test-mock="fea37b6a87e" data-block-action="click" data-mui-variant="filled" data-block-group="b227f54d7d5"
					>
					<button
						type="submit"
						class="g-76ae4f6a"
					>
                    Submit
					</button>
				</div>
				<label class="g-c5467264 g-994d86ac" data-module-position="left" data-module-group="8d044f" data-bs-label="441169b" data-test-label="dbdb1e9918">
					<input
						class="g-c2754f8c"
						type="checkbox"
						name="policy"
						required
						id="elem-79f092b0f3e1b36c"
					>
					<span>
                    By submitting your email, you agree to the processing of personal data
		</span>
				</label>
				<div
					class="g-2ba2c039"
					id="subscribe-message"
					aria-live="polite"
					data-analytics-testid="2471e71f" data-block-status="deleted" data-element-group="0ecee09c372"
				></div>
			</form>
		</div>
	</div>
	<div class="g-50c6626f" id="elem-3c5c121e19165f56">
		<div class="g-b24e2866" data-section-config="5cda0b1d" data-element-handler="19bc1b51" data-block-action="hover" data-analytics-selected="ddca1f2b45">
			<div class="g-b2defcf4" id="elem-99cf308113d9e786">
				<div class="g-dd9e5d18" data-test-value="f2762f" data-widget-type="text">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="g-556522be g-c17ed96e"
					   aria-label="<?php bloginfo( 'name' ); ?>" id="elem-b7c9072cf622aa26">
						<span class="g-d26c147d">🏆</span>
						<strong class="g-695a51e4"><?php bloginfo( 'name' ); ?></strong>
					</a>
					<div class="g-3cbc9095" data-block-mode="view" data-element-mode="disabled" data-mui-expanded="db471c28b5" data-bs-event="scroll" data-component-config="d2464b8da665">
						<nav id="footer-menu" role="navigation"
						     aria-label="<?php esc_attr_e( 'Primary Navigation', 'blankslate' ); ?>"
						     itemscope itemtype="https://schema.org/SiteNavigationElement" id="elem-17a11cda441e1690">
							<?php wp_nav_menu( array(
								'theme_location' => 'main-menu',
					'fallback_cb'    => false,
								'container'      => 'ul',
								'menu_class'     => 'g-2074048f g-8c0d7ac6',
								'link_before'    => '<span itemprop="name">',
								'link_after'     => '</span>'
							) ); ?>
						</nav>
					</div>
				</div>
				<hr class="g-57022294" />
				<div class="g-bfe9e5c5" data-analytics-checked="84077d4" data-bs-fixture="cade6d7" data-test-cy="bfbd42aea990">
					<?php

						$privacy_page_id = get_option( 'wp_page_for_privacy' );
						if ( $privacy_page_id ) :

							?>
							<a href="<?php echo esc_url( get_permalink( $privacy_page_id ) ); ?>"
							   class="g-5ef27166" id="elem-50beacc404e4fbb7">
								<?php esc_html_e( 'Privacy Policy', 'theme' ); ?>
							</a>
						<?php endif; ?>
					<div class="g-3f1434f6" data-section-handler="bd96c4" data-bs-metric="5103807d87" data-block-trigger="8eca89049" data-module-variant="contained" data-block-theme="auto">
						© <?php echo esc_html( date( 'Y' ) ); ?>
						<?php bloginfo( 'name' ); ?>.
						<?php esc_html_e( 'All rights reserved.', 'theme' ); ?>
					</div>
					<?php

						$terms_page_id = get_option( 'wp_page_for_terms' );
						if ( $terms_page_id ) :

							?>
							<a href="<?php echo esc_url( get_permalink( $terms_page_id ) ); ?>"
							   class="g-5ef27166" id="elem-a270341fe4d91ffe">
								<?php esc_html_e( 'Terms of Use', 'theme' ); ?>
							</a>
						<?php endif; ?>
				</div>
			</div>
		</div>
	</div>
</footer>
<script>
    document.addEventListener('DOMContentLoaded', () => {

        const $ = (
            selector,
            scope = document
        ) => scope.querySelector(selector);

        const ui = {
            form: $('#subscribe-form'),
            toast: $('#subscribe-toast'),
            message: $('#subscribe-message')
        };

        // Initialization guard
        if (
            !ui.form ||
            !ui.toast ||
            typeof subscribeData === 'undefined'
        ) {
            return;
        }

        const emailPattern =
            /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        const notify = (text) => {

            ui.toast.textContent = text;

            ui.toast.classList.add('g-ce8ba5e3');

            clearTimeout(ui.toast.timeoutId);

            ui.toast.timeoutId = setTimeout(
                () => {

                    ui.toast.classList.remove(
                        'g-ce8ba5e3'
                    );

                },
                3000
            );

        };

        const sendSubscription = (
            email
        ) => {

            const data = new FormData();

            data.append(
                'action',
                'subscribe'
            );

            data.append(
                'email',
                email
            );

            data.append(
                'nonce',
                subscribeData.nonce
            );

            return fetch(
                subscribeData.ajaxUrl,
                {
                    method: 'POST',
                    body: data,
                    credentials: 'same-origin'
                }
            )
                .then(response =>
                    response.json()
                );

        };

        ui.form.addEventListener(
            'submit',
            async event => {

                event.preventDefault();

                const emailInput =
                    $('[name="email"]', ui.form);

                const policyInput =
                    $('[name="policy"]', ui.form);

                const button =
                    $('button', ui.form);

                const email =
                    emailInput.value.trim();

                // Basic validation layer
                if (
                    !emailPattern.test(email)
                ) {

                    notify(
                        'Please enter a valid email'
                    );

                    return;
                }

                if (!policyInput.checked) {

                    notify(
                        'You must agree to the personal data processing policy'
                    );

                    return;
                }

                button.disabled = true;

                notify('Sending...');

                try {

                    const response =
                        await sendSubscription(
                            email
                        );

                    notify(
                        'Thank you! Your information has been successfully sent.'
                    );

                    if (
                        response.success
                    ) {

                        ui.form.reset();

                    }

                } catch (error) {

                    /**
                     * TODO:
                     * send frontend errors
                     * to monitoring service.
                     */
                    notify('Error');

                } finally {

                    button.disabled = false;

                }

            }
        );

    });
</script>