{% extends "base.html" %}

{% block title %}
  {{ __('Inspiration Universe') }}
{% endblock %}

{% block content %}

<div class="blockedHTML">
  {% include "partials/cookie-consent-placeholder.njk" %}
  <template class="cookieConsent">
  <div>
    <!-- Features Section -->
    <div class="flex flex-wrap mx-auto px-gutter bg-white my-20  ">

      <div class="flex flex-wrap w-full">
        <div class="flex w-full md:w-3/6 md:pr-5 mb-16">
          <div class="mr-6 w-24 flex-no-shrink">
            <i class="fa fa-heart-o fa-3x text-edsyellow"></i>
          </div>
          <div>
            <h4 class="mt-0 mb-16 font-light text-5xl mb-2 text-edsgreen md:w-4/5">{{ features.heart.title }}</h4>
            <div class="leading-normal font-light text-2xl text-gray-600">
              {{ features.heart.content | safe }}
            </div>
          </div>
        </div>

        <div class="flex w-full md:w-3/6 md:pl-5 mb-16 ">
          <div class="mr-6 w-24 flex-no-shrink">
            <i class="fa fa-check-square-o fa-3x text-edsyellow"></i>
          </div>
          <div>
            <h4 class="mt-0 mb-16 font-light text-5xl mb-2 text-edsgreen md:w-4/5">{{ features.checkbox.title }}</h4>
            <div class="leading-normal font-light text-2xl text-gray-600">
              {{ features.checkbox.content | safe }}
            </div>
          </div>
        </div>
      </div>

      <div class="flex w-full flex-wrap">
        <div class="flex w-full md:w-3/6 md:pr-5 mb-16">
          <div class="mr-6 w-24 flex-no-shrink">
            <i class="fa fa-cog fa-3x text-edsyellow"></i>
          </div>
          <div>
            <h4 class="mt-0 mb-16 font-light text-5xl mb-2 text-edsgreen md:w-4/5">{{ features.gear.title }}</h4>
            <div class="leading-normal font-light text-2xl text-gray-600">
              {{ features.gear.content | safe }}
            </div>
          </div>
        </div>

        <div class="flex w-full md:w-3/6 md:pl-5 mb-16 justify-start">
          <div class="mr-6 w-24 flex-no-shrink">
            <i class="fa fa-envelope-o fa-3x text-edsyellow"></i>
          </div>
          <div>
            <h4 class="mt-0 mb-16 font-light text-5xl mb-2 text-edsgreen md:w-4/5">{{ features.mail.title }}</h4>
            <div class="leading-normal font-light text-2xl text-gray-600">
              {{ features.mail.content | safe }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Section End -->
    <!-- Ideas preview -->
    <div class="bg-edslightgray py-10 px-auto">
      <p class="text-7xl uppercase text-edsgreen text-center font-bold p-2">{{ ideasPreview.title | safe }}</p>
      <div class="flex w-full">
        <div class="min-h" style="min-height: 200px; width: 100%;">
          <div class="flex justify-center w-full text-edsdarkgreen text-center m-auto">
            <article>{{ ideasPreview.content|safe }}</article>
          </div>
          <div class="p-12 pt-24 text-center">
            <a href="/ideas"
               class="bg-transparent hover:bg-edsgreen text-4xl text-edsgreen font-semibold hover:text-white py-2 px-4 border border-edsgreen rounded">{{__('View all Ideas')}}</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Section End -->
    <!-- Email Form and Info -->
    <div class="flex flex-wrap mx-auto px-gutter bg-white my-20 ">
      <div class="w-full pr-0 mb-8 md:w-1/2 md:pr-16 ">
        <h2 class="text-7xl uppercase text-edsgreen  mb-16">{{ __('Welcome to the Inspiration Universe') }}</h2>
        <p class="text-4xl text-gray-600">
          {{ __('If you have a good idea or just want to know more, you can always send an email to energidata@energinet.dk.') }}
          <br/><br/>
          {{ __('Please add a short description of your idea, tell us how and to whom your idea creates value and let us know, how our team from Energinet can help you. Please let us know your name, contact information and potential company/organization, then we will get back to you as soon as possible.') }}
        </p>
      </div>
      <div class="w-full  md:w-1/2 ">

        <div id="error_message" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-10"
             role="alert" hidden>
          <strong class="font-bold">Error !</strong>
          <span id="error_message_body" class="block sm:inline">{{ __('Message was not sent') }}</span>
        </div>

        <div id="status_message" class="bg-red-200 border border-red-200 text-red-700 px-4 py-3 rounded relative mb-10"
             role="alert" hidden>
          <strong class="font-bold">{{ __('In Process!') }}</strong>
          <span id="status_message_body" class="block sm:inline">{{ __('Please wait') }}...</span>
        </div>

        <div id="success_message"
             class="bg-teal-100 border border-teal-400 text-teal-900 px-4 py-3 rounded relative mb-10"
             role="alert" hidden>
          <strong class="font-bold">{{ __('Success!') }}</strong>
          <span id="success_message_body"
                class="block sm:inline">{{ __('Thank you for your submission. It has been sent.') }}</span>
        </div>

        <div class="relative py-3">
          <div class="w-full">
            <label class="block text-edsgreen  text-2xl uppercase mb-2 cursor-default">{{ __('Email') }}</label>
            <input id="username"
                   class="text-2xl appearance-none block w-full text-gray-700 bg-edsgray py-5 px-4 leading-tight focus:outline-none"
                   type="text">
          </div>
        </div>
        <div class="relative py-3">
          <div class="w-full">
            <label class="block text-edsgreen  text-2xl uppercase mb-2 cursor-default">{{ __('Subject') }}</label>
            <input id="subject"
                   class="text-2xl appearance-none block w-full text-gray-700 bg-edsgray py-5 px-4 leading-tight focus:outline-none"
                   type="email">
          </div>
        </div>
        <div class="relative py-3">
          <div class="w-full">
            <label
                class="block text-edsgreen  text-2xl uppercase mb-2 cursor-default">{{ __('Put your idea in writing') }}</label>
            <textarea id="idea_detail"
                      class="block text-2xl appearance-none block w-full text-gray-700 bg-edsgray py-5 px-4 leading-tight focus:outline-none"
                      type="email" id="contact-short-message"></textarea>
          </div>
        </div>
        <div class="relative py-5">
          <div class="w-full ">
            <label id="attach-msg" class="block text-right text-edsgreen  text-xl ">{{ __('Accept') }} docx/doc/pdf
              - {{ __('UP TO') }} 3MB </label>
            <label id="attach-trigger" class="block text-right text-edsgreen  text-2xl uppercase">
              <i
                  class="fa fa-paperclip" aria-hidden="true"></i> {{ __('Attach File') }}</label>
            <input id="attach" type="file" class="hidden">
          </div>
        </div>

        <div class="relative py-5">
          <div class="w-full flex  justify-end">
            <button id="send_mail"
                    class="w-full text-4xl uppercase font-semibold bg-edsdarkgreen text-white py-4 px-10">{{ __('Send') }}</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Section End -->
  </div>

  </template>
</div>
{% endblock %}

{% block scripts %}
<template class="cookieConsent">
  <script>
    $('#attach-trigger').click(function () {
      $('#attach').click()
    })

    $('#attach').change(function () {
      var file_name = $(this)
          .val()
          .toLowerCase(),
        regex = new RegExp('(.*?)\.(docx|doc|pdf)$')
      var file_size = $(this)[0].files[0]['size']

      if (!(regex.test(file_name)) || file_size.size > 3000000) {
        $('#attach-msg')
          .html('Invalid Attachment. Upload docx/doc/pdf - UP TO 3 MB')
          .removeClass('text-edsgreen')
          .addClass('text-red-600 ')
        $('#send_mail')
          .attr('disabled', true)
          .removeClass('bg-edsdarkgreen')
          .addClass('bg-gray-500')
      } else {
        console.log(formatFileSize(file_size, 3))
        $('#attach-msg')
          .html(file_name.split('\\').pop() + ' <strong>' + formatFileSize(file_size) + '<strong>')
          .removeClass('text-red-600')
          .addClass('text-edsgreen')
        $('#send_mail')
          .attr('disabled', false)
          .removeClass('bg-gray-500')
          .addClass('bg-edsdarkgreen')
      }
    })

    $('#send_mail').click(function () {

      $('#error_message').attr('hidden', true)
      $('#success_message').attr('hidden', true)

      if (!validateFields()) {
        $('#error_message_body').html('Please enter the valid input.')
        $('#error_message').attr('hidden', false)
        return
      }


      let file_data = $('#attach').prop('files')[0]
      let form_data = new FormData()
      form_data.append('username', $('#username').val())
      form_data.append('subject', $('#subject').val())
      form_data.append('ideaDetail', $('#idea_detail').val())
      form_data.append('attachment', file_data)
      $('#status_message').attr('hidden', false)
      $('#send_mail')
        .attr('disabled', true)
        .removeClass('bg-edsdarkgreen')
        .addClass('bg-gray-500')

      $.ajax({
        url: '/inspiration',
        type: 'POST',
        enctype: 'multipart/form-data',
        data: form_data,
        processData: false,
        contentType: false,
        success: function (data) {
          if (data.status === 200) {
            $('#status_message').attr('hidden', true)
            $('#success_message').attr('hidden', false)
          } else {
            if (data.message) {
              $('#error_message_body').html(data.message)
            }
            $('#status_message').attr('hidden', true)
            $('#error_message').attr('hidden', false)
          }
          $('#send_mail')
            .attr('disabled', false)
            .removeClass('bg-gray-500')
            .addClass('bg-edsdarkgreen')
        },
        error: function (error) {
          $('#error_message').attr('hidden', false)
          $('#status_message').attr('hidden', true)
          $('#send_mail')
            .attr('disabled', false)
            .removeClass('bg-gray-500')
            .addClass('bg-edsdarkgreen')
        }
      })
    })

    function validateFields() {
      let username = $('#username')
      let subject = $('#subject')
      let ideaDetail = $('#idea_detail')
      let returnValue = true
      if (username.val() === '') {
        username.addClass('border border-red-500')
        returnValue = false
      } else {
        username.removeClass('border border-red-500')
      }

      if (subject.val() === '') {
        subject.addClass('border border-red-500')
        returnValue = false
      } else {
        subject.removeClass('border border-red-500')
      }

      if (ideaDetail.val() === '') {
        ideaDetail.addClass('border border-red-500')
        returnValue = false
      } else {
        ideaDetail.removeClass('border border-red-500')
      }

      return returnValue

    }

    function formatFileSize(bytes, decimalPoint) {
      if (bytes == 0)
        return '0 Bytes'
      var k = 1000,
        dm = decimalPoint || 2,
        sizes = [
          'Bytes',
          'KB',
          'MB',
          'GB',
          'TB',
          'PB',
          'EB',
          'ZB',
          'YB'
        ],
        i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
    }

    $(document).ready(function () {
      // Add smooth scrolling to all links
      $('a').on('click', function (event) {

        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== '') {
          // Prevent default anchor click behavior
          event.preventDefault()

          // Store hash
          var hash = this.hash

          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash)
              .offset()
              .top
          }, 800, function () {

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash
          })
        } // End if
      })
    })
  </script>
</template>
{% endblock %}