<template>

  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="barnacle_contact_form" :class="{ 'animated fadeIn': !!waypointTriggered }">

      <!-- Title, Subtitle, Paragraph Side-Container -->
      <div class="side-container">
        <h1 class="title" v-html="properties['Title'].value" v-if="properties['Title'].value"></h1>
        <h3 class="subtitle" v-html="properties['Subtitle'].value" v-if="properties['Subtitle'].value"></h3>
        <p class="paragraph" v-if="properties['Paragraph Text'].value"><span
            v-html="properties['Paragraph Text'].value"></span></p>
      </div>

      <div class="form-container">

        <!-- LOADING -->
        <div v-if="submitting" class="loading">
          <i class="fa fa-spinner fa-3x fa-spin"></i>
        </div>

        <!-- Successfully Submitted -->
        <div v-if="submitted" class="success">
          <p>Thank you, your form submission was successful.</p>
        </div>

        <!-- Inquiry Type Selector -->
        <div class="form" v-if="!submitting && !submitted && !isIE()">
          <div class="double-slot-row">
            <div class="form-field">
              <select v-model="inquiryType" @change="changeInquiryType()" name="inquiry_type" id="inquiry_type"
                      title="inquiry_type">
                <option value="general">Inquiry: General</option>
                <option value="sales" selected>Inquiry: Sales</option>
                <option value="learn_more">Inquiry: Learn more about the Barnacle</option>
                <option value="virtual_demo">Inquiry: Request a virtual demo</option>
                <option value="technology_teaser">Inquiry: Sign up to see new technology teaser</option>
              </select>
              <i class="fa fa-caret-down"></i>
              <label for="inquiry_type"></label>
            </div>
          </div>
        </div>

        <form class="form" id="inquiry_form" v-if="!submitting && !submitted">
          <!-- General Inquiry Form -->
          <div v-if="inquiryType === 'general' || inquiryType === 'learn_more' || inquiryType === 'virtual_demo' || inquiryType === 'technology_teaser'">
            <div class="double-slot-row">
              <div class="form-field">
                <input v-model="firstName" id="general_first_name" type="text"
                       :class="alertValidation(firstName, 'general_first_name')" autocomplete="off" required/>
                <label for="general_first_name">First Name</label>
                <p class="required">Required</p>
              </div>
              <div class="form-field">
                <input v-model="lastName" id="general_last_name" type="text" :class="alertValidation(lastName)"
                       autocomplete="off"/>
                <label for="general_last_name">Last Name</label>
              </div>
            </div>

            <div class="double-slot-row">
              <div class="form-field">
                <input v-model="email" id="general_email" type="email" :class="alertValidation(email, 'general_email')"
                       autocomplete="off" required/>
                <label for="general_email">Email</label>
                <p class="required">Required</p>
              </div>
              <div class="form-field">
                <input v-model="phone" id="general_phone" type="tel" :class="alertValidation(phone)"
                       autocomplete="off"/>
                <label for="general_phone">Phone</label>
              </div>
            </div>

            <div>
              <div class="form-field">
                <input v-model="subject" id="general_subject" type="text"
                       :class="alertValidation(subject, 'general_subject')" autocomplete="off" required/>
                <label for="general_subject">Subject</label>
                <p class="required">Required</p>
              </div>
            </div>

            <div>
              <div class="form-field">
                <textarea v-model="message" id="general_message" rows="6"
                          :class="alertValidation(message, 'general_message')" autocomplete="off"
                          required>
                </textarea>
                <label for="general_message">Message</label>
                <p class="required message">Required</p>
              </div>
            </div>

            <div class="single-slot-row align-right">
              <div class="form-field submit-field">
                <div class="button" @click="submitFormGeneral()" v-if="buttonText === 'SUBMIT'">{{buttonText}}</div>
                <div v-else class="button" style="cursor: default;">{{buttonText}}</div>
              </div>
            </div>
          </div>

          <!-- Sales Inquiry Form (Non-IE)-->
          <div v-if="inquiryType === 'sales' && !isIE()">
            <div class="double-slot-row">
              <div class="form-field">
                <input v-model="firstName" id="sales_first_name" type="text"
                       :class="alertValidation(firstName, 'sales_first_name')" autocomplete="off" required/>
                <label for="sales_first_name">First Name</label>
                <p class="required">Required</p>
              </div>
              <div class="form-field">
                <input v-model="lastName" id="sales_last_name" type="text" :class="alertValidation(lastName)"
                       autocomplete="off" required/>
                <label for="sales_last_name">Last Name</label>
              </div>
            </div>

            <div class="double-slot-row">
              <div class="form-field">
                <input v-model="email" id="sales_email" type="email" :class="alertValidation(email, 'sales_email')"
                       autocomplete="off" required/>
                <label for="sales_email">Email</label>
                <p class="required">Required</p>
              </div>
              <div class="form-field">
                <input v-model="company" id="sales_company" type="text" :class="alertValidation(company)"
                       autocomplete="off"/>
                <label for="sales_company">Company</label>
              </div>
            </div>

            <div class="double-slot-row">
              <div class="form-field">
                <select v-model="orgType" id="sales_org_type" :class="alertValidation(orgType, 'sales_org_type')"
                        autocomplete="off" required>
                  <option value="none">None</option>
                  <option value="distributor">Distributor</option>
                  <option value="government_agency">Government Agency</option>
                  <option value="law_enforcement">Law Enforcement</option>
                  <option value="national_parking_operator">National Parking Operator</option>
                  <option value="parking_lot_manager">Parking Lot Manager</option>
                  <option value="parking_lot_owner">Parking Lot Owner</option>
                  <option value="Towing Company">Towing Company</option>
                  <option value="university_hospital">University/Hospital</option>
                  <option value="other">Other</option>
                </select>
                <label for="sales_org_type">Organization Type</label>
                <p class="required">Required</p>
              </div>
              <div class="form-field">
                <input v-model="phone" id="sales_phone" type="tel" :class="alertValidation(phone)" autocomplete="off"/>
                <label for="sales_phone">Phone</label>
              </div>
            </div>

            <div class="double-slot-row">
              <div class="form-field">
                <input v-model="city" id="sales_city" type="text" :class="alertValidation(city, 'sales_city')" autocomplete="off"/>
                <label for="sales_city">City</label>
              </div>
              <div class="form-field">
                <input v-model="state" id="sales_state" type="text" :class="alertValidation(state)"
                       autocomplete="off"/>
                <label for="sales_state">State</label>
              </div>
            </div>

            <div class="single-slot-row">
              <div class="form-field">
                <input v-model="country" id="sales_country" type="text" :class="alertValidation(country)"
                       autocomplete="off"/>
                <label for="sales_country">Country</label>
              </div>
            </div>

            <div class="single-slot-row align-right">
              <div class="form-field submit-field">
                <div class="button" @click="submitFormSales()" v-if="buttonText === 'SUBMIT'">{{buttonText}}</div>
                <div class="button" style="cursor: default;" v-else>{{buttonText}}</div>
              </div>
            </div>

          </div>

          <!-- Sales Inquiry Form (IE)-->
          <div v-if="inquiryType === 'sales' && isIE()">
            <form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

              <input type=hidden name="oid" value="00D1I000003J16j">
              <input type=hidden name="retURL" value="https://barnacleparking.com">
              <input type=hidden name="lead_source" value="Website">

              <label style="display:inline-block; width:30%; text-align: right; padding-right:10px; padding-bottom: 10px;" for="first_name">First Name: </label>
              <input  id="first_name" maxlength="40" name="first_name" size="20" type="text" />
              <br>

              <label style="display:inline-block; width:30%; text-align: right; padding-right:10px; padding-bottom: 10px;" for="last_name">Last Name: </label>
              <input  id="last_name" maxlength="80" name="last_name" size="20" type="text" />
              <br>

              <label style="display:inline-block; width:30%; text-align: right; padding-right:10px; padding-bottom: 10px;" for="company">Company: </label>
              <input  id="company" maxlength="40" name="company" size="20" type="text" />
              <br>

              <label style="display:inline-block; width:30%; text-align: right; padding-right:10px; padding-bottom: 10px;" for="email">Email: </label>
              <input  id="email" maxlength="80" name="email" size="20" type="text" />
              <br>

              <label style="display:inline-block; width:30%; text-align: right; padding-right:10px; padding-bottom: 10px;" for="phone">Phone: </label>
              <input  id="phone" maxlength="40" name="phone" size="20" type="text" />
              <br>

              <span style="display:inline-block; width:30%; text-align: right; padding-right:10px; padding-bottom: 10px;">Organization Type: </span>
              <select  id="00N1I00000HzX20" name="00N1I00000HzX20" title="Organization Type">
                <option value="">--None--</option>
                <option value="Distributor">Distributor</option>
                <option value="Government Agency">Government Agency</option>
                <option value="Law Enforcement">Law Enforcement</option>
                <option value="Parking Operator">Parking Operator</option>
                <option value="Property Manager/Owner">Parking Manager/Owner</option>
                <option value="Security Company ">Security Company</option>
                <option value="Towing Company">Towing Company</option>
                <option value="University/Hospital">University/Hospital</option>
                <option value="Other">Other</option>
              </select>
              <br>

              <label style="display:inline-block; width:30%; text-align: right; padding-right:10px; padding-bottom: 10px;" for="city">City</label>
              <input  id="city" maxlength="40" name="city" size="20" type="text" />
              <br>

              <label style="display:inline-block; width:30%; text-align: right; padding-right:10px; padding-bottom: 10px;" for="state">State/Province</label>
              <input  id="state" maxlength="20" name="state" size="20" type="text" />
              <br>

              <label style="display:inline-block; width:30%; text-align: right; padding-right:10px; padding-bottom: 10px;" for="country">Country</label>
              <input  id="country" maxlength="40" name="country" size="20" type="text" />
              <br>

              <span style="display:inline-block; width:30%; text-align: right; padding-right:10px; padding-bottom: 10px;"></span>
              <input type="submit" name="submit">
            </form>
          </div>

        </form>

      </div>

    </div>
  </div>

</template>

<script>

  import {post} from '../../admin/helpers/api.js';

  export default {
    name: "BuildableBarnacleContactForm",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      let hardCodedData = {
        buttonText: 'SUBMIT',
        formChecked: false,
        inquiryType: 'sales',
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        subject: '',
        message: '',
        company: '',
        orgType: '',
        city: '',
        state: '',
        country: '',
        // monthlyImmobilizations: '',
        // unitsRequired: '',
        submitting: false,
        submitted: false,
        waypointTriggered: false,
      };
      let componentData = JSON.parse(this.componentData);
      return {...hardCodedData, ...componentData};
    },
    mounted() {
      const self = this;
      let waypoint = new Waypoint({
        element: this.$el,
        handler: function() {
          self.waypointTriggered = true;
        },
        offset: "75%"
      });
    },
    methods: {
      alertValidation(value, id = null) {
        let hasValue = value !== '' ? 'has-value' : '';
        let alertValidation = id !== null && this.formChecked && (!value || !document.getElementById(id).checkValidity()) ? 'alert-validation' : '';
        return `${hasValue} ${alertValidation}`;
      },
      changeInquiryType() {
        this.formChecked = false;
      },
      submitFormGeneral() {
        if (!this.firstName || !this.email || !this.subject || !this.message || !document.getElementById('inquiry_form').checkValidity()) {
          this.formChecked = true;
          return;
        }
        this.formChecked = false;
        this.submitting = true;
        post(
          'forms/contact-general',
          {
            'First Name': this.firstName,
            'Last Name': this.lastName,
            'Email': this.email,
            'Phone': this.phone,
            'Subject': this.subject,
            'Message': this.message,
            'Inquiry Type': this.inquiryType
          }
        ).then((response) => {
          this.submitted = true;
          this.submitting = false;
        }).catch((err) => {
          this.submitting = false;
          alert('Form Submission Failed. ' + err.message);
        });
      },
      submitFormSales() {
        if (!this.firstName || !this.email || !this.orgType) { //|| !this.monthlyImmobilizations || !this.unitsRequired || !this.message
          this.formChecked = true;
          return;
        }
        this.formChecked = false;
        this.submitting = true;
        post(
          'forms/contact-sales',
          {
            'first_name': this.firstName,
            'last_name': this.lastName,
            'email': this.email,
            'company': this.company,
            '00N1I00000HzX20': this.orgType,
            'phone': this.phone,
            'city': this.city,
            'state': this.state,
            'country': this.country,
            'oid': '00D1I000003J16j',
            'retURL': document.location.origin,
            'lead_source': 'Website'
            // '00N1I00000HzX1v': this.monthlyImmobilizations,
            // '00N1I00000HzY09': this.unitsRequired,
            // '00N1I00000HzY0T': this.message
          }
        ).then((response) => {
          this.submitted = true;
          this.submitting = false;
        }).catch((err) => {
          this.submitting = false;
          alert('Form Submission Failed. ' + err.message);
        });
      },
      isIE() {
        let ua = navigator.userAgent;
        /* MSIE used to detect old browsers and Trident used to newer ones*/
        return ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
      }
    }
  }
</script>

<style scoped>

</style>
