{{ $program := .Page.Params.programCode }}
{{ $storyUrl := $.Site.Params.urls.story }}
{{ $gtmEventName := default "data-req-form" .Page.Params.gtmEventName }}
{{ $formType := default "website_rfi" .Page.Params.formType }}
{{ $phoneNumber := $.Site.Data.global.phoneNumber }}
{{ $isApplyNowPage := .Page.Params.noApply }}

<dxp-form append-data redirect-url="{{$storyUrl}}" class="text-center" wait-time="2000">
  <div class="px-6" id="scroll-to">
    {{ if eq .Page.Params.slug "apply-now" }}
    <h2 class="font-normal mb-4 text-center text-4xl mx-auto pb-2 px-6">
      Ready to apply?
    </h2>
    <p class="max-w-[33rem] mx-auto pb-2 text-center text-sm">
      Fill out the form below, and an admission counselor will reach out to you via email or phone with more
      information. After you’ve completed the form, you’ll be automatically redirected to learn more about TU and your
      chosen program.
    </p>
    {{ else }}
    <h2 class="font-normal mb-4 text-center text-4xl mx-auto pb-2 px-6">
      Want to hear more about online programs at The University?
    </h2>
    <p class="max-w-[33rem] mx-auto pb-2 text-center text-sm">
      Fill out the form below, and an admission counselor will reach out to you via email or phone with more
      information. After you’ve completed the form, you’ll be automatically redirected to learn more about TU and your
      chosen program.
    </p>
    {{ end }}
  </div>
  <dxp-action command="set-event" data-key="sent-lead"></dxp-action>
  <n-action topic="analytics" command="send-event" {{$gtmEventName | safeHTMLAttr }}>
  </n-action>
  <div class="px-4 hide-labels max-w-[30rem] mx-auto mt-4 flex flex-col gap-2 text-left">

    <dxp-input input-key="program" placeholder="Select a Program..." set-value="{{$program}}" required>
    </dxp-input>

    <dxp-input input-key="firstname" placeholder="First Name" required></dxp-input>
    <dxp-input input-key="lastname" placeholder="Last Name" required></dxp-input>
    <dxp-input input-key="email" placeholder="Email Address" required></dxp-input>
    <dxp-input input-key="phone" placeholder="Phone Number"
      validation-message="Required and please use the following format: 000-000-0000"
      pattern="^[0-9]{3}[-.\s]{0,1}[0-9]{3}[-.\s]{0,1}[0-9]{4}$" required></dxp-input>
    <dxp-input input-key="zip" placeholder="Zip Code" required></dxp-input>

    <dxp-input hidden input-key="form_type" set-value="{{$formType}}"></dxp-input>

  </div>

  <div class="text-center p-6">
    <button type="submit" class="secondary-button px-8 md:px-16 max-w-fit">
      {{ if $isApplyNowPage }}
      APPLY NOW
      {{ else }}
      REQUEST INFO
      {{ end }}
    </button>

  </div>

  <p class="text-center font-base">or call <a class="text-brand-blue" href="tel:{{$phoneNumber}}">{{$phoneNumber}}</a>
  </p>

  <p class="px-6 max-w-[500px] mx-auto text-gray-800 text-xs italics text-justify pb-6">
    By submitting this form, I am providing my digital signature that The University may email me or contact
    me
    regarding educational services by telephone and/or text message utilizing automated technology at the telephone
    number provided above. I understand this consent is not a condition to attend The University or to
    purchase
    any other goods or services.
  </p>

  <div slot="result" class="text-center p-8">
    <h2 id="form-h2-thankyou" class="text-primary">Thank you for your interest!</h2>
    <svg class="mx-auto py-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      style="margin: auto; background: rgba(255, 255, 255, 0); display: block; shape-rendering: auto;" width="200px"
      height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
      <path d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#d3d3d3" stroke="none">
        <animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1"
          values="0 50 51;360 50 51"></animateTransform>
      </path>
    </svg>
    <h3 class="text-center">Redirecting you now...</h3>
  </div>

</dxp-form>

<script>
  document.body.addEventListener('dxp:initialized', e => {
    window.experience = e.detail
  })

  let count = 0
  const funcAttach = () => {
    var program = document.querySelector('dxp-input[input-key=program]')
    setTimeout(() => {
      count++
      if (program == null) {
        if (count < 20) funcAttach()
        return
      }
      program.shadowRoot.addEventListener('change', async () => {
        let selectValue = program.shadowRoot.getElementById("program").value
        await experience.setData('ocid', selectValue.toLowerCase())
      })
    }, 500)
  }
  funcAttach()
</script>