{{ $program := .Page.Params.programCode }}
{{ $gtmEventName := default "data-req-form" .gtmEventName }}
{{ $formType := default "website_rfi" .formType }}

<div class="mt-[5rem]"></div>
<div
  class="bg-no-repeat bg-cover bg-[position:70%] min-h-[35rem] md:min-h-[30rem] md:pr-0 flex justify-center items-center {{.imageMobile}} {{.imageTablet}} {{.imageDesktop}}">
  <div class="w-[1200px] mx-auto h-full flex flex-col lg:flex-row items-center px-6 sm:p-6 text-left">
    <div class="lg:w-1/2 flex flex-col mx-auto items-start">
      <div class="max-w-[25rem]">
        <h1 class="text-7xl font-normal text-white text-left mx-auto uppercase">
          {{.heading | markdownify}}
        </h1>
      </div>
      <div class="mt-4 max-w-[21rem] mx-0">
        <p class="text-2xl font-bold text-yellow text-left tracking-[0.15rem] uppercase">
          {{.subheading | markdownify}}
        </p>
      </div>
    </div>
    <div class="w-full lg:w-1/2 relative hidden md:flex justify-center lg:self-start">
      <div class="bg-light rounded-xl absolute drop-shadow-2xl mt-20 lg:mt-0 max-w-[26rem]">
        <dxp-form redirect-url="#" class="text-center" wait-time="2000">
          <div class="px-6" id="scroll-to">
            <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">
              Once you’ve completed the form below, an admission counselor will reach out to you with more information.
              You’ll also be redirected to the online application page for The University, where you’ll be able
              to create an account and begin your application for admission.
            </p>
          </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">
              APPLY NOW
            </button>

          </div>

          <p class="text-center font-base">or call <a class="text-brand-blue" href="tel:+19186125036">+1 (918)
              612-5036</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>
      </div>
    </div>
  </div>
</div>
<div class="max-w-[1200px] mx-auto">
  <div class="relative md:hidden bg-light rounded-xl drop-shadow-2xl -mt-20 max-w-[80vw] mx-auto lg:mt-0">
    <div class="px-6" id="scroll-to" slot="waiting">
      <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">
        Once you’ve completed the form below, an admission counselor will reach out to you with more information. You’ll
        also be redirected to the online application page for The University, where you’ll be able to create an
        account and begin your application for admission.
      </p>
    </div>
    <dxp-form redirect-url="#" class="text-center" wait-time="2000">
      <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">
          APPLY NOW
        </button>

      </div>

      <p class="text-center font-base">or call <a class="text-brand-blue" href="tel:+19186125036">+1 (918) 612-5036</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">
        <h2 id="form-h2-thankyou" class="text-primary">Thank you for your interest!</h2>
      </div>

    </dxp-form>
  </div>
</div>

<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>