<?php
namespace ONLINE_ADAv4;

use ONLINE_ADAv4\Helper;

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

function wcag_self_assessment_checklist_form()
{
    $scan = get_queried_scan();
    if (!$scan) {
        return;
    }
    $articles = Helper::getWcagArticlesModel();
    $completed_items = get_post_meta($scan->ID, '_oadaas_checklist_completed_items', true);
    if ($completed_items === "") {
        $completed_items = [];
    }


    ?>
    <p>You have finished analyzing your images and other elements that relate to specific WCAG 2.1 compliance requirements. Now you must assess your website as a whole, and ensure that it meets each requirement.</p>

    <p>Tick the checkboxes once you have reviewed each item to mark that item as complete. You can save your changes at any time, even if you have not finished the checklist. This is a vital step to ensuring your website meets accessibility compliance requirements.</p>

    <div class="wcag-checklist-intro">
        <span>My website adheres to the following WCAG 2.1 checklist:</span><span><button id="check-all-button" name="check-all" >Check all</button></span>
    </div>

    <div class="wcag-checklist">
        <?php foreach ($articles as $article) { ?>
        <div class="principle-heading"><?php echo wp_kses($article["principle_heading"],wp_kses_allowed_html()); ?></div>
        <div class="principle-subheading"><?php echo wp_kses($article["principle_sub_heading"],wp_kses_allowed_html()); ?></div>
            <?php foreach ($article["principle_guidelines"] as $guideline) { ?>
                <div class="guideline-wrap">
                    <div class="guideline-heading"><?php echo wp_kses($guideline["heading"],wp_kses_allowed_html()); ?></div>
                    <div class="guideline-sub-heading"><?php echo wp_kses($guideline["subheading"],wp_kses_allowed_html()); ?></div>
                    <?php foreach ($guideline["level"] as $level => $value) { ?>
                        <?php if (!empty($value)) : ?>
                            <?php foreach ($value as $index => $data) { ?>
                                <div class="wcag-checklist-item">
                                    <div class="checklist-article-number">
                                        <a href="<?php echo esc_url($data['url']); ?>" target="_blank" rel="external" ><?php echo wp_kses($index . " " . $data['title'],wp_kses_allowed_html()) . " <span class='checklist-level'>Level " . wp_kses($level,wp_kses_allowed_html()) . "</span>"; ?></a>
                                    </div>

                                    <blockquote class="checklist-title">
                                        <div class="quotes" ><?php echo wp_kses($data['message'],wp_kses_allowed_html()); ?></div>
                                    </blockquote>

                                    <?php if (!empty($data["tip"])) : ?>
                                        <div class="checklist-description">
                                            <?php echo "Tip: " . wp_kses($data['tip'],wp_kses_allowed_html()); ?>
                                        </div>
                                    <?php endif ?>
                                    <div class="checklist-checkbox">
                                        <label>
                                            <input type="checkbox" name="wcag[checklist][<?php echo esc_attr($index); ?>]" <?php checked(in_array($index, $completed_items, true)); ?>>
                                            I agree, this website meets this requirement.
                                        </label>
                                    </div>
                                </div>
                            <?php
                        } ?>
                        <?php endif ?>
                    <?php
                } ?>
                </div>
            <?php
        } ?>
        <?php
    } ?>
    </div>

    <div class="wcag-checklist-disclaimer">
        <p class="description"><strong>Disclaimer:</strong> Each requirement is based on the <a href="https://www.w3.org/WAI/WCAG20/quickref/" target="_blank" rel="external">WCAG 2.1 Quick Reference Guide</a>.
        While every article title is quoted verbatim, the description below is written in our own words. Refer to w3.org/WAI for the official and legal requirements and additional examples.</p>
    </div>

    <div class="wcag-continue">

        <div class="button-row">
            <input type="hidden" name="wcag_checklist_action" value="save-responses">
            <input type="button" class="button button-primary wcag-save-and-continue-button" value="Save and continue">
        </div>

    </div>

<?php

}