<script setup>
import { defineProps, ref } from 'vue';
import {SessionUser} from "@/components/session/token/SessionUser.vue";
import FormDisplay from "@/components/displays/FormDisplay.vue";
import Swal from "sweetalert2";

const props = defineProps({
  booking: Object,
})


const onSuccessfulCertificateSubmission = () => {
  props.booking.load()
}

const services = {
    1: 'Udvendig sættevognstræk ( Trækker / trailer )',
    2: 'Udvendigt trailer vask',
    3: 'Indvendig trailer vask',
}

const download = (booking_id) => {
  SessionUser.objects.bookings.functions.download(booking_id).then(async (response) => {
    console.log(response, 'success');
    const href = response.data.data.link;
    window.open(href, '_blank');
  }).catch((error) => {
    console.log(error, 'error');
    Swal.fire({
      icon: "error",
      title: "Fejl",
      text: "Der skete en fejl under download af vaskecertifikatet",
      footer: error
    });
  });
}
</script>

<template>
  <div class="columns is-multiline">
    <div class="column is-12">
      <h1 class="title is-4">Booking #{{props.booking.id}}</h1>
      <h3 class="subtitle is-6"></h3>
    </div>

    <div class="column is-4">
      <div class="box">
        <h2 class="title is-5">Kunde</h2>
        <p><strong>Kunde nummer:</strong> {{ props.booking.customer_number }}</p>
        <p><strong>Kontakt email:</strong> {{ props.booking.contact_email }}</p>
        <p><strong>Vaskecertifikat:</strong> {{ props.booking.washCertificateEmail }}</p>
      </div>
    </div>

    <div class="column is-4">
      <div class="box">
        <h2 class="title is-5">Køretøjer</h2>
        <p><strong>Trækker:</strong> {{props.booking.regNrTraekker}}</p>
        <p><strong>Trailer:</strong> {{props.booking.regNrTrailer}}</p>
        <p><strong>Hentes:</strong> {{props.booking.pickup_bool ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no }}</p>
      </div>
    </div>

    <div class="column is-4">
      <div class="box">
        <h2 class="title is-5">Vask</h2>
        <p><strong>Dato:</strong> {{props.booking.date }}</p>
        <p><strong>Vask:</strong> {{props.booking.wash_type}}</p>
        <p><strong>Ref.:</strong> {{props.booking.reference_number}}</p>
      </div>
    </div>

    <!-- Send certificate -->
    <div class="column is-8">
      <div class="box">
        <!-- Generate certificate -->
        <template v-if="props.booking.isWashCertificatePending() && props.booking.isLoaded()">
          <FormDisplay
              :form_identifier="'GENERATE_BOOKING_WASH_CERTIFICATE'"
              v-bind:validator_options="{validateBookingId: {default: props.booking.id, locked: true, visible: false}}"
              :onSuccessfulSubmission="onSuccessfulCertificateSubmission"
          />
        </template>
        <!-- Certificate -->
        <template v-else-if="props.booking.isWashCertificateCompleted()">
          <div class="message is-success">
            <div class="message-header">
              <p>Vaskecertifikat</p>
              <div class="buttons is-pulled-right">
                <a
                    class="button is-small is-success"
                    @click="download(props.booking.id)"
                >
                  <span class="icon">
                    <i class="fas fa-file-pdf"></i>
                  </span>
                  <span>{{props.booking.wash_certificate_pdf}}</span>
                </a>
              </div>
            </div>
            <div class="message-body">
              <p>Der er genereret et vaskecertifikat til denne booking.</p>
              <p>Sendt til: {{ props.booking.washCertificateEmail }}</p>
            </div>
          </div>
        </template>
        <template v-else-if="!props.booking.isWashCertificatePending() && !props.booking.isWashCompleted() && !props.booking.isWashCancelled() && props.booking.isLoaded()">
          <FormDisplay
            :form_identifier="'COMPLETE_BOOKING_WITHOUT_WASH_CERTIFICATE'"
            v-bind:validator_options="{validateBookingId: {default: props.booking.id, locked: true, visible: false}}"
            :onSuccessfulSubmission="onSuccessfulCertificateSubmission"
          />
        </template>
        <template v-else-if="props.booking.isWashCompleted()">
          <div class="message is-success">
            <div class="message-header">
              <p>Vask udført</p>
            </div>
            <div class="message-body">
              <p>Der er udført en vask på denne booking.</p>
              <p>Denne vask er uden vaskecertifikat.</p>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- Right column -->
    <div class="column is-4">
      <!-- Notes -->
        <div class="message" v-if="props.booking.hasNotes()">
          <div class="message-header">
            <p>Note fra kunden</p>
          </div>
          <div class="message-body">
            {{ props.booking.notes }}
          </div>
        </div>
      <!-- Data -->
      <div class="box">
        <h2 class="title is-5">Vaskeydelser</h2>
        <table class="table is-fullwidth is-hoverable">
          <tbody>
          <tr v-for="service in props.booking.data">
            <td>
              - {{ services[service] }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>