{% extends "./wrapper.html" %}
{% block content %}

<!-- Load JavaScript libraries -->
<script src="step-sequence.js"></script>
<script src="call-tracker.js"></script>
<script src="actionkit-call-page.js"></script>

<style>
@media (max-width: 64.0525em) {
  div#call-form {
    padding-inline: var(--wp--custom--spacing--m);
  }
}
</style>

<script>
window.actionkitFormReady = function() {
  ActionKitCallPage.initialize({
    actionId: {{ action.id }},
    pageId: {{ page.id }},
    pageName: "{{ page.name }}",
    akid: {{ args.akid|json }},
    callApiUrl: "https://click-to-call.mute-cloud-e25d.workers.dev/start-call",
    {% if page.custom_fields.call_page_target_order %}
    targetOrder: {{ page.custom_fields.call_page_target_order|load_json|json }},
    {% endif %}
  });
}
</script>

<style>

@media (max-width: 900px) {
  #what_to_say {
    /*padding-inline: 2rem;*/
  }
}
.ak-call .oneorg-ak__wrapper {
    margin-inline: auto;
    max-width: var(--content-width-xl);
}

.ak-call .oneorg-ak__call .oneorg-ak__call-message>*+* {
    margin-block-start:var(--wp--custom--spacing--s-m)}

@media (min-width: 64.0625em) {
    .ak-call .oneorg-ak__call .oneorg-ak__call-message {
        margin-inline-start:6rem
    }
    .ak-call .oneorg-ak__call .ak-form__fieldset {
        display: grid;
        gap: var(--wp--custom--spacing--2);
        grid-template-columns: 1fr 1fr;
        margin-block-start: 1rem;
    }
    .ak-call .oneorg-ak__call .ak-form__fieldset>*+* {
        margin-block-start: 0;
    }
}

.ak-letter .oneorg-ak__letter .oneorg-ak__letter-message .ak-userfield-label {
    font-size: var(--wp--preset--font-size--3);
    font-weight: var(--bold)
}
</style>

<div class="ak-{{ page.type|lower }} oneorg-ak">


<div class="oneorg-ak__wrapper">

  <div class="oneorg-ak__about">

    {% if page.title %}
    <h1 class="oneorg-ak__title">
      <span>
        {% filter striptags %}
        {{ page.title }}
        {% endfilter %}
      </span>
    </h1>
    {% endif %}

    {% if page.custom_fields.main_petition_page_image %}
    <figure class="oneorg-ak__image">
      <picture>
        <img src="{{ page.custom_fields.main_petition_page_image }}" alt="{{ page.title }}" />
      </picture>
      {% if page.custom_fields.image_credit %}
      <figcaption>{{ page.custom_fields.image_credit }}</figcaption>
      {% endif %}
    </figure>
    {% endif %}

  </div>

  <div id="ak-sign" class="oneorg-ak__form">

<form id="ak-form" class="ak-form"  name="act" method="POST" action="/act/" accept-charset="utf-8">
  <input type="hidden" name="page" value="{{ page.name }}">

            <div id="call-form" class="ak-styled-fields {{templateset.custom_fields.field_labels_class|default:"ak-labels-overlaid"}} {{templateset.custom_fields.field_errors_class|default:"ak-errs-below"}}">
              <div class="oneorg-ak__call">
                <div id="ak-need-contact-info"></div>
                <script type="text/ak-template" for="ak-need-contact-info">
                    [% if (incomplete) { %]
                        <div class="ak-instructions ak-faded-text">
                            {% if form.introduction_text %}
                                    {% autoescape off %}
                                      {% include_tmpl form.introduction_text %}
                                    {% endautoescape %}
                            {% else %}
                                    {% filter ak_text:"call_needs_contact_info" %}
                                      Fill out the form below so we can find the number for you to call.
                                    {% endfilter %}
                            {% endif %}
                        </div>
                    [% } %]
                </script>

                {% include "./user_form_wrapper.html" %}




              <div id="what_to_say"></div>
              <script type="text/ak-template" for="what_to_say">

                [% if (!incomplete) { %]

                {% if context.targets.targets|length %}
                <div class="what_to_say--prep">
                  {% if page.custom_fields.call_page_prep_info_preparing_call %}
                  {% include_tmpl page.custom_fields.call_page_prep_info_preparing_call %}
                  {% else %}
                  <p>Before you get started, please read over the talking points below. 
                  <p>We will call you directly to connect you to your elected officials. When you make your call, a staff member will answer – it is their job to take calls from constituents like you! They won’t be quizzing you on the nitty gritty, so don’t be nervous. 
                  <p>We have prepared suggested scripts for each office, but you can make it personal and share why foreign assistance is important to you!
                </div>
                  {% endif %}
                {% endif %}

                {% for target in context.targets.targets %}
                  <div class="what_to_say--target" data-target-id="{{ target.id }}" id="call-step-{{ target.id }}">  
                    <h2 class="oneorg-hero-list-title" data-number="{{ forloop.counter }}">
                            Call {{ target.title_last }}
                    </h2>

                    <div class="oneorg-ak__call-message">
                      <button data-target="{{ target.id }}" role="button" type="button" class="oneorg-button make-call-button">Call &amp; Connect Me</button>

                      <div class="ak-field-box ak-field-box-borderless">
                        <h5 onclick="$(this).closest('.ak-field-box').find('.script-text').slideToggle()" style="cursor:pointer">Your Message:</h5>
                        <div class="script-text">{% include_tmpl form.script_text %}</div>
                      </div>

                    {% if form.survey_question_text %}
                      <div class="ak-labels-overlaid ak-margin-top-1">
                        <label style="font-weight: bold" for="id_action_survey_{{ target.id }}">{% include_tmpl form.survey_question_text %}</label>
                        <textarea id="id_action_survey" name="action_survey_{{ target.id }}" class="ak-large-message"></textarea>
                        <button data-target="{{ target.id }}" role="button" type="submit" class="ak-call-survey-submit ak-userfield-submit ak-has-overlay">Save report</button>
                      </div>
                    {% endif %}
                    </div>
                  </div>
                {% endfor %}
                [% } %]

                <style>
                [% if (incomplete) { %]
                    #what_to_say { display: none; }
                [% } else { %]
                    #akSubmitButton { display: none; }
                    .ak-steps-area { clear: both; }
                [% } %]
                </style>

              </script>

          </div>

                  {% if page.custom_fields.app_custom_button %}
                  <button role="button" type="submit" id="akSubmitButton" class="oneorg-button ak-userfield-submit">{{ page.custom_fields.app_custom_button }}</button>
                  {% else %}
                  <button role="button" type="submit" id="akSubmitButton" class="oneorg-button ak-userfield-submit">{% filter ak_text:"call:connect_me" %}Connect me{% endfilter %}</button>
                  {% endif %}
        </div>
    </div>
  </form>
</div>
</div>

{% endblock %}

{% block script_additions %}
<script type="text/javascript">
$(window).load(function() {
    $('#target_checkboxes').appendTo('div#who_called');

    var $window = $(window);
    function call_page_steps_mobile() {
        var windowSize = $window.width();
        if (windowSize < 480) {
               $('.ak-steps-area h3').addClass('clickable');
        } else {
            $('.ak-steps-area h3').removeClass('clickable');
            $('.ak-steps-area h3').each( function () {
              $(this).siblings('div').show();
            });
        }

    }
       $('.ak-steps-area').on('click', 'h3.clickable', function(e) {
        e.stopPropagation();
        $(this).toggleClass('active');
        $(this).siblings('div').stop().slideToggle('fast');
    });

    $(window).on('resize', call_page_steps_mobile);
    call_page_steps_mobile();

});
</script>
{% endblock %}