<!-- Get Header -->
<?php get_header(); ?>

<!-- Contact Us Page Template -->

<!-- Padder Section -->
<div id="padder" class="hidden lg:flex h-24 w-full z-20 lg:h-28">
</div>

<!-- Page Header -->
<div class="bg-yellow-400 mx-auto page-header pb-8 px-4 md:px-8">
  <div class="max-w-7xl mb-8 mx-auto pt-40 px-4 md:px-8">
    <div>
      <h1 class="font-bold text-4xl text-white tracking-tight"><?php the_title(); ?></h1>
    </div>
  </div>
</div>

<!-- Contact section -->
<section class="py-4" aria-labelledby="contact-heading">
  <!-- Decorative dot pattern -->
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="relative bg-white shadow-xl">
      <h2 id="contact-heading" class="sr-only"><?php _e('Contact us', 'themeStarter'); ?></h2>
      <div class="grid grid-cols-1 lg:grid-cols-3">
        <!-- Contact information -->
        <div class="bg-gradient-to-b  from-blue-400 overflow-hidden px-6 py-10 relative to-blue-700 sm:px-10 xl:p-12">

          <!-- Decorative angle backgrounds -->
          <div class="pointer-events-none absolute inset-0 sm:hidden" aria-hidden="true">
            <svg class="absolute inset-0 h-full w-full" width="343" height="388" viewBox="0 0 343 388" fill="none" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
              <path d="M-99 461.107L608.107-246l707.103 707.107-707.103 707.103L-99 461.107z" fill="url(#linear1)" fill-opacity=".1" />
              <defs>
                <linearGradient id="linear1" x1="254.553" y1="107.554" x2="961.66" y2="814.66" gradientUnits="userSpaceOnUse">
                  <stop stop-color="#fff"></stop>
                  <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
                </linearGradient>
              </defs>
            </svg>
          </div>

          <div class="pointer-events-none absolute top-0 right-0 bottom-0 hidden w-1/2 sm:block lg:hidden" aria-hidden="true">
            <svg class="absolute inset-0 h-full w-full" width="359" height="339" viewBox="0 0 359 339" fill="none" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
              <path d="M-161 382.107L546.107-325l707.103 707.107-707.103 707.103L-161 382.107z" fill="url(#linear2)" fill-opacity=".1" />
              <defs>
                <linearGradient id="linear2" x1="192.553" y1="28.553" x2="899.66" y2="735.66" gradientUnits="userSpaceOnUse">
                  <stop stop-color="#fff"></stop>
                  <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
                </linearGradient>
              </defs>
            </svg>
          </div>

          <div class="pointer-events-none absolute top-0 right-0 bottom-0 hidden w-1/2 lg:block" aria-hidden="true">
            <svg class="absolute inset-0 h-full w-full" width="160" height="678" viewBox="0 0 160 678" fill="none" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
              <path d="M-161 679.107L546.107-28l707.103 707.107-707.103 707.103L-161 679.107z" fill="url(#linear3)" fill-opacity=".1" />
              <defs>
                <linearGradient id="linear3" x1="192.553" y1="325.553" x2="899.66" y2="1032.66" gradientUnits="userSpaceOnUse">
                  <stop stop-color="#fff"></stop>
                  <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
                </linearGradient>
              </defs>
            </svg>
          </div>

          <h3 class="font-medium text-white text-lg"><?php _e('Contact Us', 'themeStarter'); ?></h3>
          <dl class="mt-8 space-y-6">

            <dt><span class="sr-only"><?php _e('Phone number', 'themeStarter'); ?></span></dt>
            <dd class="flex text-base text-white">
              <a href="tel:226-996-9246" class="flex">
                <svg class="flex-shrink-0 h-6 text-white w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                </svg><span class="ml-3"><?php _e('226-996-9246', 'themeStarter'); ?></span>
              </a>
            </dd>

            <dt><span class="sr-only"><?php _e('Email', 'themeStarter'); ?></span></dt>
            <dd class="flex text-base text-white">
              <a href="mailto:info@medicalplacehealthsolutions.com" class="flex">
                <svg class="flex-shrink-0 h-6 text-white w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                </svg><span class="ml-3"><?php _e('info@medicalplacehealthsolutions.com', 'themeStarter'); ?></span>
              </a>
            </dd>

            <dt><span class="sr-only"><?php _e('Email', 'themeStarter'); ?></span></dt>
            <dd class="flex text-base text-white">
              <a href="https://goo.gl/maps/Y8BXswrisc22" class="flex">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                </svg>
                <span class="ml-3"><?php _e('735 St. Clair St. Chatham, Ontario N7L 0E9 Canada', 'themeStarter'); ?></span>
              </a>
            </dd>

          </dl>
        </div>
        <!-- Contact form -->
        <div class="py-10 px-6 sm:px-10 lg:col-span-2 xl:p-12">
          <h3 class="text-lg font-medium text-warm-gray-900"><?php _e('Send us a message', 'themeStarter'); ?></h3>
          <?php $mailer = new PG_Simple_Form_Mailer(); ?>
          <?php $mailer->process(array(
            'form_id' => 'contact_us_form_mailer_id',
            'send_to_email' => true,
            'save_to_post_type' => true,
            'email' => 'hr@romagcontracting.ca',
            'post_type' => 'contact_submissions',
            'title' => 'New Message',
            'intro' => 'New Contact Form Submission'
          )); ?>
          <?php if (!$mailer->processed || $mailer->error) : ?>
            <form action="<?php echo '#contact_us_form_mailer_id'; ?>" method="post" class="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8" id="contact_us_form_mailer_id" onsubmit="event.stopImmediatePropagation();event.stopPropagation();">
              <div class="sm:col-span-2">
                <label for="full-name" class="block text-sm font-medium text-warm-gray-900">
                  <?php _e('Name', 'themeStarter'); ?>
                </label>
                <div class="mt-1">
                  <input type="text" id="full-name" autocomplete="given-name" class="block border-warm-gray-300 focus:border-blue-500 focus:ring-blue-400 px-4 py-3 rounded-md shadow-sm text-warm-gray-900 w-full" name="Full Name" placeholder="Enter your name" value="<?php echo (isset($_POST['Full Name']) ? $_POST['Full Name'] : ''); ?>" />
                </div>
              </div>

              <div class="sm:col-span-2">
                <label for="subject" class="block text-sm font-medium text-warm-gray-900">
                  <?php _e('Subject', 'themeStarter'); ?>
                </label>
                <div class="mt-1">
                  <input type="text" name="Subject" id="subject" class="block border-warm-gray-300 focus:border-blue-500 focus:ring-blue-400 px-4 py-3 rounded-md shadow-sm text-warm-gray-900 w-full" placeholder="What is the subject of this message" value="<?php echo (isset($_POST['Subject']) ? $_POST['Subject'] : ''); ?>" />
                </div>
              </div>
              <div class="sm:col-span-2">
                <div class="flex justify-between">
                  <label for="message" class="block text-sm font-medium text-warm-gray-900">
                    <?php _e('Message', 'themeStarter'); ?>
                  </label><span id="message-max" class="text-sm text-warm-gray-500"><?php _e('Max. 500 characters', 'themeStarter'); ?></span>
                </div>
                <div class="mt-1">
                  <textarea id="message" name="Message" rows="4" class="block border-warm-gray-300 focus:border-blue-500 focus:ring-blue-400 px-4 py-3 rounded-md shadow-sm text-warm-gray-900 w-full" aria-describedby="message-max" placeholder="Enter your message"><?php echo (isset($_POST['Message']) ? $_POST['Message'] : ''); ?></textarea>
                </div>
              </div>
              <div class="sm:col-span-2 sm:flex sm:justify-end">
                <button type="submit" class="cursor-pointer capitalize duration-700 text-white hover:text-black inline-flex items-center justify-center font-normal hover:bg-gray-200 ease-in-out bg-blue-500 min-w-max py-2 px-8 hover:-translate-y-1 hover:ease-linear transition" href="#"><?php _e('Send Message', 'themeStarter'); ?>
                </button>
              </div>
              <input type="hidden" name="contact_us_form_mailer_id" value="1" />
            </form>
          <?php endif; ?>
          <?php if ($mailer->processed) : ?>
            <?php echo $mailer->message; ?>
          <?php endif; ?>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Get Footer -->
<?php get_footer(); ?>