<template>
  <div class="hub hub-detail" id="detailToPrint" :style="[bckgrColor('divBgColor'), color('fontColor')]">
    <nav>
      <ul class="top-links">
        <li class="list-item">
          <a @click.prevent="$emit('backTolist')" class="top-link backToListeButton button primary" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
            <span class="padding10">{{ $t('front_externMP.detail_zurueck') }}</span>
          </a>
        </li>
        <li v-if="false" class="list-item leftMarg10"><a href="" class="top-link advancedSearchButton button primary" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]"><span class="padding10"> Suche anpassen</span></a></li>
        <li v-if="getNext" @click.prevent="$emit('gotoNext', getNext)" class="list-item next">
          <a href="" class="top-link nextInserateButton button primary" data-id="2693330" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
            <span class="padding10">{{ $t('front_externMP.detail_naechstes') }} &gt;</span>
          </a>
        </li>
        <li v-if="getPrev" @click.prevent="$emit('gotoPrev', getPrev)" class="list-item prev">
          <a href="" class="top-link prevInserateButton button primary" data-id="" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
            <span class="padding10">&lt; {{ $t('front_externMP.detail_vorher') }}</span>
          </a>
        </li>
      </ul>
    </nav>
    <header>
      <div class="heading-container">
        <p v-if="false" class="printHeader"><b>{{ $store.state.details.rel_standort.firma_name }}</b> {{ $store.state.details.rel_standort.kunde_strasse }} {{ $store.state.details.rel_standort.kunde_plz }} {{ $store.state.details.rel_standort.kunde_ort }} Telefon: {{ $store.state.details.rel_standort.kunde_telefon }} Fax: {{ $store.state.details.rel_standort.kunde_fax }} </p>
        <hr style="margin-top: -10px;">
        <p></p>
        <h1 v-html="$store.state.details.rel_kategorie['bezeichnung_' + $store.state.settings.lang] + ' - ' + $store.state.details.rel_art['bezeichnung_' + $store.state.settings.lang]" class="title-main" :style="color('titleColor')"></h1>
        <div v-if="false" class="button-container printPdfContainer exportShowNormal">
          <a href="javascript:;" class="printDetail" style="color: #000000!important;">
            <span class="caption" styl="">Drucken | </span>
          </a>
          <a href="javascript:;" class="downloadPdfDetail" style="color: #000000!important;">
            <span class="caption">Download PDF</span>
          </a>
        </div>
      </div>
    </header>
    <div class="columns" id="divToPrint">
      <div class="left">
        <div data-gallery-closetext="Schliessen" class="my-gallery gallery">
          <div ref="defaultDContainer" class="image-large-container" style="text-align: center;">
            <a href="#" @click.prevent="picClicked(0)" rel="group1">
              <detail-image 
                :details="details"
                :imgOffset="0"
                :prefix="''"
                :container="'defaultDContainer'"
                @imageClick="imageClick($event)"
              />
            </a>
          </div>
          <div class="object-list-container">
            <ul v-if="$store.state.details.rel_pictures.length > 1" class="object-list thumb-list closed">
              <template v-for="(pic, ndx) in $store.state.details.rel_pictures">
              <li v-if="ndx>0" v-bind:key="ndx" ref="dContainer" style="text-align: center;" class="imageGroup object-list-item">
                <a href="#" @click.prevent="picClicked(ndx)" class="object-thumb" rel="group1">
                  <detail-image 
                    :details="details"
                    :imgOffset="ndx"
                    :prefix="''"
                    :container="'dContainer'"
                    @imageClick="imageClick($event)"
                  />
                </a>
              </li>
              </template>
            </ul>
          </div>
          <photo-swipe-component
            :options="options"
            @open="$emit('open')"
            @close="$emit('close')"
          />

        </div>
        <section>
          <div class="vehicle-data greyBgAndBorderDetail">
            <h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_externMP.detail_titel') }}</h2>
            <table :style="color('fontColor')">
              <tbody>
                <tr>
                  <th class="data-label">{{ $t('front_externMP.detail_kategorie') }}</th>
                  <td class="data">{{ $store.state.details.rel_kategorie['bezeichnung_' + $store.state.settings.lang]}}</td>
                </tr>
                <tr v-if="$store.state.details.rel_gruppe && Object.keys($store.state.details.rel_gruppe).length !== 0">
                  <th class="data-label">{{ $t('front_externMP.detail_gruppe') }}</th>
                  <td class="data">{{ $store.state.details.rel_gruppe['bezeichnung_' + $store.state.settings.lang]}}</td>
                </tr>
                <tr>
                  <th class="data-label">{{ $t('front_externMP.art_nummer') }}</th>
                  <td class="data">{{ $store.state.details.ident_nr_artikel }}</td>
                </tr>
                <tr v-if="$store.state.details.ident_nr_artikel_alt">
                  <th class="data-label">{{ $t('front_externMP.art_nummer_alt') }}</th>
                  <td class="data">{{ $store.state.details.ident_nr_artikel_alt }}</td>
                </tr>
                <tr v-if="$store.state.details.rel_material && Object.keys($store.state.details.rel_material).length !== 0">
                  <th class="data-label">{{ $t('front_externMP.material') }}</th>
                  <td class="data">{{ $store.state.details.rel_material['bezeichnung_' + $store.state.settings.lang] }}</td>
                </tr>
                <tr v-if="$store.state.details.rel_zustand && Object.keys($store.state.details.rel_zustand).length !== 0">
                  <th class="data-label">{{ $t('front_externMP.zustand') }}</th>
                  <td class="data">{{ $store.state.details.rel_zustand['bezeichnung_' + $store.state.settings.lang] }}</td>
                </tr>
                <tr v-if="$store.state.details.rel_farben.length > 0">
                  <th class="data-label">{{ $t('front_externMP.farbe') }}</th>
                  <td class="data">{{ farbe }}</td>
                </tr>
                <tr>
                  <th class="data-label">{{ $t('front_externMP.gebraucht') }}</th>
                  <td v-if="$store.state.details.rel_farben.inserat_artikel_gebraucht" class="data">{{ $t('front_externMP.ja') }}</td>
                  <td v-else class="data">{{ $t('front_externMP.nein') }}</td>
                </tr>
                <tr>
                  <th class="data-label">{{ $t('front_externMP.gepruft') }}</th>
                  <td v-if="$store.state.details.rel_farben.inserat_artikel_geprueft" class="data">{{ $t('front_externMP.ja') }}</td>
                  <td v-else class="data">{{ $t('front_externMP.nein') }}</td>
                </tr>
                <tr>
                  <th class="data-label">{{ $t('front_externMP.fahrbereit') }}</th>
                  <td v-if="$store.state.details.rel_farben.inserat_artikel_fahrbereit" class="data">{{ $t('front_externMP.ja') }}</td>
                  <td v-else class="data">{{ $t('front_externMP.nein') }}</td>
                </tr>
                <tr>
                  <th class="data-label">{{ $t('front_externMP.unfall') }}</th>
                  <td v-if="$store.state.details.rel_farben.inserat_artikel_unfall" class="data">{{ $t('front_externMP.ja') }}</td>
                  <td v-else class="data">{{ $t('front_externMP.nein') }}</td>
                </tr>
                <tr v-if="$store.state.details.ident_nr_chassis && $store.state.details.inserat_art != 2">
                  <th class="data-label">{{ $t('front_externMP.chasis_nr') }}</th>
                  <td class="data">{{ $store.state.details.ident_nr_chassis }}</td>
                </tr>
                <tr v-if="$store.state.details.inserat_art == 2 && $store.state.details.rel_gender && Object.keys($store.state.details.rel_gender).length !== 0">
                  <th class="data-label">{{ $t('front_externMP.gender') }}</th>
                  <td class="data">{{ $store.state.details.rel_gender['bezeichnung_' + $store.state.settings.lang] }}</td>
                </tr>
                <tr>
                  <th class="data-label">{{ $t('front_externMP.preis') }}</th>
                  <td class="data">{{ formatPrice($store.state.details.inserat_artikel_preis_verkauf) }}</td>
                </tr>
                <tr v-if="$store.state.details.inserat_artikel_preis_katalog">
                  <th class="data-label">{{ $t('front_externMP.katalog_preis') }}</th>
                  <td class="data">{{ formatPrice($store.state.details.inserat_artikel_preis_katalog) }}</td>
                </tr>
                <tr v-if="$store.state.details.inserat_artikel_beschreibung">
                  <th class="data-label">{{ $t('front_externMP.beschreibung') }}</th>
                  <td class="data" v-html="$store.state.details.inserat_artikel_beschreibung"></td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
        <section v-if="$store.state.details.rel_models && $store.state.details.rel_models.length">
          <div class="greyBgAndBorderDetail">
            <h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_externMP.detail_models') }}</h2>
            <table :style="[color('fontColor'), 'width:100%']">
              <tbody>
                <tr v-for="i in Math.ceil($store.state.details.rel_models.length / 2)">
                  <td>{{ $store.state.details.rel_models[i].rel_brand.Markenbezeichnung + ' ' + $store.state.details.rel_models[i].rel_modell.Modellbezeichnung }}</td>
                  <td v-if="$store.state.details.rel_models[i+1]">{{ $store.state.details.rel_models[i+1].rel_brand.Markenbezeichnung + ' ' + $store.state.details.rel_models[i+1].rel_modell.Modellbezeichnung }}</td>
                  <td v-else></td>
                </tr>
              </tbody>


            </table>
          </div>
        </section>
        <div class="beschPrint">
          <h2 class="title-secondary">{{ $t('front_externMP.detail_bemerkung') }}</h2>
          <p v-html="$store.state.details.fzg_text"></p>
        </div>
        <div class="beschPreis">{{ $t('front_externMP.detail_preis') }} {{formatPrice($store.state.details.actualprice, 0)}} </div>
      </div>
      <div class="right">
        <div class="padding">
          <div class="chapters">
            <section>
              <div class="chapter dealer">
                <div class="chapter-content greyBgAndBorder">
                  <div>
                    <h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_externMP.detail_anbieter') }}</h2>
                    <div class="vcard">
                      <span v-html="$store.state.details.rel_standort.firma_name" class="org fn"></span>
                      <span class="adr">
                        <span class="street-address">{{ $store.state.details.rel_standort.kunde_strasse }}</span>
                        <span class="postal-code">{{ $store.state.details.rel_standort.kunde_plz }}</span>&nbsp;
                        <span class="locality">{{ $store.state.details.rel_standort.kunde_ort }}</span>
                      </span>
                    </div>
                    <a :href="googleMapsLink" target="_blank" class="geo" style="color: #000000;!important">{{ $t('front_externMP.detail_googlemap')}} </a>
                  </div>
                  <div v-if="standortLogo" style="float: right; padding: 0px; padding-top: 25px;"><img :src="standortLogo" :alt="$store.state.details.rel_standort.firma_name + ' ' + $store.state.details.rel_standort.kunde_ort" style="max-width: 200px;"></div>
                  <address class="phone-container">
                    <table style="margin-left: -2px;">
                      <tbody>
                        <tr v-if="$store.state.details.rel_standort.kunde_telefon || $store.state.details.rel_standort.kunde_mobile" class="primary">
                          <th class="header">{{ $t('front_externMP.details_telefon') }}</th>
                          <td class="data">
                            <span class="phone">
                              <a :style="color('fontColor')" id="lnkPhoneCall_1" :href="'tel:' + ($store.state.details.rel_standort.kunde_telefon ? $store.state.details.rel_standort.kunde_telefon.replace(/ /g, '') : $store.state.details.rel_standort.kunde_mobile.replace(/ /g, ''))" class="tel call-on-me">{{ $store.state.details.rel_standort.kunde_telefon ? $store.state.details.rel_standort.kunde_telefon : $store.state.details.rel_standort.kunde_mobile }}</a>
                            </span>
                          </td>
                        </tr>
                        <tr v-if="$store.state.details.rel_standort.kunde_telefon">
                          <th class="header">{{ $t('front_externMP.details_fax') }}</th>
                          <td class="data"><span class="phone"><span class="tel">{{  $store.state.details.rel_standort.kunde_telefon }}</span></span></td>
                        </tr>
                      </tbody>
                    </table>
                  </address>
                </div>
              </div>
            </section>
            <section>
              <div class="kontaktDiv">
                <div class="DetailContact">
                  <div id="kontaktArea">
                    <form v-if="!contactSent" id="kontaktdaten" name="kontaktdaten" method="post" onsubmit="return false;" novalidate="novalidate">
                      <div class="kontaktDiv1">
                        <span class="DCTitle" :style="color('titleColor')">{{ $t('front_externMP.form_kontakt') }}</span>
                        <label class="inpLabel">{{ $t('front_externMP.form_anrede') }}</label>
                        <input id="anrede0" name="anrede" type="radio" value="1" v-model="form.anrede">
                        <label for="anrede0" class="labelFrau">{{ $t('front_externMP.form_frau') }}</label>
                        <input id="anrede1" name="anrede" type="radio" value="2" v-model="form.anrede">
                        <label for="anrede1">{{ $t('front_externMP.form_herr') }}</label>
                        <input id="anrede2" name="anrede" type="radio" value="3" v-model="form.anrede">
                        <label for="anrede2">{{ $t('front_externMP.form_firma') }}</label>
                        <label ref="vorname" class="inpLabel">{{ $t('front_externMP.form_vorname') }} * </label>
                        <input id="vorname" name="vorname" type="text" v-model="form.vorname" class="DetailInputText" :style="errorClass('vorname')" title="">
                        <label ref="name" class="inpLabel">{{ $t('front_externMP.form_name') }} *</label>
                        <input id="name" name="name" type="text" v-model="form.name" class="DetailInputText" :style="errorClass('name')" title="">
                        <label ref="telefon" class="inpLabel">{{ $t('front_externMP.form_telefon') }} *</label>
                        <input id="telefon" name="telefon" type="text" v-model="form.telefon" class="DetailInputText" :style="errorClass('telefon')" title="">
                        <label ref="email" class="inpLabel">{{ $t('front_externMP.form_email') }} *</label>
                        <input id="email" name="email" type="text" v-model="form.email" class="DetailInputText" :style="errorClass('email')" title="">
                        <div class="contactOptions">
                          <input id="chkCopy" type="checkbox" value="1" v-model="form.sendCopy">
                          <label for="chkCopy">{{ $t('front_externMP.form_kopie') }}</label>
                        </div>
                        <template v-if="false">
                          <div class="dieMitInfo">{{ $t('front_externMP.form_required') }}<br> </div>
                          <span class="DCTitle" style="color: #DE182E!important;"></span>
                          <label class="inpLabel" style="width:200px;">{{ $t('front_externMP.form_interested_in') }}</label>
                          <div class="contactRightOptions">
                            <input id="chkBesichtigung" type="checkbox" v-model="form.chkBesichtigung">
                            <label for="chkBesichtigung">{{ $t('front_externMP.form_interested_in_visit') }}</label>
                            <input id="chkProbefahrt" type="checkbox" v-model="form.chkProbefahrt">
                            <label for="chkProbefahrt">{{ $t('front_externMP.form_interested_in_testdrive') }}</label>
                          </div>
                        </template>
                        <label class="inpLabel" style0="width:200px;">{{ $t('front_externMP.form_bemerkung') }}</label>
                        <textarea id="bemerkungen" v-model="form.bemerkungen" name="bemerkungen" class="contactTextarea"></textarea>
                        <div class="smsSumbitPart">
                          <input type="submit" @click.prevent="sendContact" class="button primary submit advSearchBtn submitKontaktForm" :value="$t('front_externMP.form_absenden')" style="cursor: pointer; height: 32px;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
                        </div>
                      </div>
                    </form>
                    <div v-else>
                      <span v-html="$t('front_externMP.contact_sent')" class="DCTitle" :style="color('titleColor')"></span>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'

import DetailImage from './DetailImage.vue'

import PathMixin from '../mixins/PathMixin.js'
import Numberformatting from '../mixins/Numberformatting.js'
import defaultImageMixin from '../mixins/defaultImageMixin.js'
// import PhotoSwipeLightbox from 'photoswipe';
// import 'photoswipe/style.css';
import PhotoSwipeComponent from './vue3-picture-swipe/PhotoSwipeComponent.vue';

export default {
  // props: ['list', 'details', '$store.state.settings.lang', 'settings', 'url'],
  props: ['url', 'api'],
  mixins: [PathMixin, Numberformatting, defaultImageMixin],
  components: {
    'detail-image': DetailImage,
    PhotoSwipeComponent,
  },
  data() {
    return {
      isLoading: false,
      contactSent: false,
      form: {
        rowID: 0,
        mpID: 0,
        anrede: 1,
        vorname: '',
        name: '',
        telefon: '',
        email: '',
        sendCopy: false,
        chkBesichtigung: false,
        chkProbefahrt: false,
        bemerkungen: '',
      },
      formErrors: {
        name: false,
        vorname: false,
        email: false,
        teleforn: false,
      },
    }
  },
  methods: {
    imageClick: function(e) {
      // console.log(e);
      // this.$store.state.details.rel_pictures      
    },
    picClicked: function() {
    },
    defaultPic: function() {
      if(!this.$store.state.details.rel_pictures) {
        return this.getDefaultImage();
        // return '/front/v30/images/J56420132201.jpg';
      }
      if(this.$store.state.details.rel_pictures.length == 0) {
        return this.getDefaultImage();
        // return '/front/v30/images/J56420132201.jpg';
      }
      return this.adCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.$store.state.details.rel_pictures[0].datei;
    },
    getPic: function(pic) {
      return this.adCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + pic;
    },
    errorClass(name) {
      if(this.formErrors[name]) {
        return "border: 2px solid red;"
      }
      return '';
    },
    resetFormErrors() {
      this.formErrors = {
        name: false,
        vorname: false,
        email: false,
        teleforn: false,
      }
    },
    sendContact() {
      this.isLoading = true;
      this.form.rowID = this.$store.state.settings.id;
      this.form.mpID = this.$store.state.details.id;
      axios
        .get(this.url + this.api + "sendContact", {
          params: this.form
        })
        .then(response => {
          this.resetFormErrors();
          this.contactSent = true;
        })
        .catch(error => {
          this.resetFormErrors();
          if(error.response.status == 422){
            var errList = error.response.data.errors;
            var listKeys = Object.keys(errList);
            if(listKeys.length > 0) {
              listKeys.forEach(element => {
                this.formErrors[element] = true;
              });
            }
          }else{
            console.log('Error: ', error.response.data)
          }
        })
        .finally(() => {
          this.isLoading = false;
        })
    },    
  },
  computed: {
    axiosParams() {
      const params = new URLSearchParams();
      params.append('param1', 'value1');
      params.append('param2', 'value2');
      return params;
    },    
    getPrev: function() {
      var id = this.$store.state.details.id;
      var ndx = this.$store.state.list.findIndex(i => i.id === id);
      if(ndx > 0) {
        return this.$store.state.list[ndx-1].id;
      }
      return false;
    },
    getNext: function() {
      var id = this.$store.state.details.id;
      var ndx = this.$store.state.list.findIndex(i => i.id === id);
      if(ndx < this.$store.state.list.length-1) {
        return this.$store.state.list[ndx+1].id;
      }
      return false;
    },
    farbe() {
      var t = '';
      this.$store.state.details.rel_farben.forEach(element => {
        if(t != '') {
          t = t + ' / ';
        }
        t = t + element.rel_farbedef['bezeichnung_' + this.$store.state.settings.lang];
      });
      return t;
      // $store.state.details.rel_farben[0].rel_farbedef['bezeichnung_' + $store.state.settings.lang]
    },
    googleMapsLink: function() {
      return '//maps.google.ch/maps?q=' + this.$store.state.details.rel_standort.kunde_strasse + ',' + this.$store.state.details.rel_standort.kunde_plz + '+' + this.$store.state.details.rel_standort.kunde_ort;
    },
    standortLogo: function() {
      var logo = this.$store.state.details.rel_standort.images.find(b => b.medientyp_id == 1);
      if(logo) {
        return this.clientCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + '/logos/' + logo.media;
      }
      return false;
    },
  },
}
</script>
<style scoped>
  .strikethrough {
    position: relative;
  }
  .strikethrough:before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-top: 1px solid;
    border-color: inherit;

    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);
  }
</style>    