<template>
  <div class="receiving">

    <nav class="breadcrumb">
      <ul>
        <li>
          <router-link :to="getIndexURL()">Receiving</router-link>
        </li>
        <li>
          <router-link :to="getBatchURL()">{{ row.batch_id_str }}</router-link>
        </li>
        <li>
          &nbsp; {{ row[productKey] }}
        </li>
      </ul>
    </nav>

    <div style="display: flex;">
      <div style="flex-grow: 1;">
        <p class="has-text-weight-bold">
          {{ row.brand_name }}
        </p>

        <p class="has-text-weight-bold">
          {{ row.description }} {{ row.size }}
        </p>

        <p v-if="allowCases"
           class="has-text-weight-bold">
          1 CS = {{ row.case_quantity || 1 }} {{ row.unit_uom }}
        </p>

        <table class="receiving-quantities">
          <tr v-if="row.order_quantities_known">
            <td>ordered</td>
            <td>
              <span v-if="allowCases">
                {{ row.cases_ordered || 0}} /
              </span>
              {{ row.units_ordered || 0}}
            </td>
          </tr>
          <tr v-if="row.order_quantities_known">
            <td>shipped</td>
            <td>
              <span v-if="allowCases">
                {{ row.cases_shipped || 0}} /
              </span>
              {{ row.units_shipped || 0}}
            </td>
          </tr>
          <tr>
            <td>received</td>
            <td>
              <span v-if="allowCases">
                {{ row.cases_received || 0}} /
              </span>
              {{ row.units_received || 0}}
            </td>
          </tr>
          <tr>
            <td>damaged</td>
            <td>
              <span v-if="allowCases">
                {{ row.cases_damaged || 0}} /
              </span>
              {{ row.units_damaged || 0}}
            </td>
          </tr>
          <tr v-if="allowExpired">
            <td>expired</td>
            <td>
              <span v-if="allowCases">
                {{ row.cases_expired || 0}} /
              </span>
              {{ row.units_expired || 0}}
            </td>
          </tr>
        </table>
      </div>

      <div>
        <img :src="row.image_url" />
      </div>
    </div>

    <div v-if="row.received_alert"
         class="has-text-danger">
      <br />
      <p>{{ row.received_alert }}</p>
    </div>

    <div v-if="row.unexpected_alert"
         class="has-text-danger">
      <br />
      <p>{{ row.unexpected_alert }}</p>
    </div>

    <slot name="warnings" :row="row"></slot>

    <br />

    <div v-if="shouldShowQuickReceive">
      <slot name="quick-receive">
        <!-- only show quick-receive if we have an identifiable product -->
        <div class="buttons">
          <b-button v-if="row.quick_receive_all"
                    type="is-primary"
                    @click="addQuickAmount(row.quick_receive_quantity, row.quick_receive_uom)"
                    expanded>
            {{ row.quick_receive_text }}
          </b-button>          
          <div v-if="!row.quick_receive_all">
            <div class="buttons"
                 v-if="allowCases">
              <b-button type="is-primary"
                        @click="addQuickAmount(1, 'CS')"
                        expanded>
                Receive 1 CS
              </b-button>
            </div>
            <div class="buttons has-text-centered" style="width: 100%;">
              <b-button type="is-primary"
                        @click="addQuickAmount(1, row.unit_uom)">
                1 {{ row.unit_uom }}
              </b-button>
              <b-button type="is-primary"
                        @click="addQuickAmount(3, row.unit_uom)">
                3 {{ row.unit_uom }}
              </b-button>
              <b-button type="is-primary"
                        @click="addQuickAmount(6, row.unit_uom)">
                6 {{ row.unit_uom }}
              </b-button>
            </div>
          </div>
        </div>
      </slot> <!-- quick-receive -->

      <p class="has-text-centered is-italic">OR</p>
      <br />
    </div>

    <b-field grouped>
      <b-field class="control">
        <b-input v-model="inputQuantity"
                 type="number"
                 custom-class="receiving-quantity-input">
        </b-input>
      </b-field>
      <b-field class="control">
        <b-radio-button v-model="inputUOM"
                        native-value="CS"
                        :disabled="!allowCases">
          <span>CS</span>
        </b-radio-button>
        <b-radio-button v-model="inputUOM"
                        :native-value="row.unit_uom">
          <span>{{ row.unit_uom }}</span>
        </b-radio-button>
      </b-field>
    </b-field>
    
    <b-field>
      <b-radio-button v-model="inputType"
                      native-value="received">
        <span>RCVD</span>
      </b-radio-button>
      <b-radio-button v-model="inputType"
                      native-value="damaged">
        <span>DMGD</span>
      </b-radio-button>
      <b-radio-button v-model="inputType"
                      native-value="expired"
                      :disabled="!allowExpired">
        <span>EXPD</span>
      </b-radio-button>
      <b-radio-button v-model="inputType"
                      native-value="mispick"
                      disabled>
        <span>MSPK</span>
      </b-radio-button>
    </b-field>

    <b-field v-if="inputType == 'expired'"
             label="Expiration Date">
      <b-input v-model="expirationDate"
               type="date">
      </b-input>
    </b-field>

    <div class="buttons">
      <b-button type="is-primary"
                @click="addAmount()"
                :disabled="addAmountDisabled">
        Add Amount
      </b-button>
      <b-button type="is-warning"
                @click="subtractAmount()">
        Subtract Amount
      </b-button>
    </div>

    <p class="has-text-centered is-italic">OR</p>
    <br />

    <div class="buttons">
      <b-button type="is-primary"
                tag="router-link"
                :to="`/receiving/rows/${row.uuid}`">
        View this Row
      </b-button>
      <b-button type="is-primary"
                disabled>
        Edit this Row
      </b-button>
      <b-button type="is-danger"
                disabled>
        Delete this Row
      </b-button>
    </div>
  </div>
</template>

<script>
export default {
    name: 'ByjoveReceiving',
    props: {
        productKey: {
            type: String,
            default: 'upc',
        },
        allowCases: {
            type: Boolean,
            default: true,
        },
        allowExpired: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            row: {},
            inputQuantity: 1,
            inputUOM: null,
            inputType: 'received',
            expirationDate: null,
        }
    },

    computed: {
        addAmountDisabled: function() {
            if (this.inputType == 'expired' && !this.expirationDate) {
                return true
            }
            return false
        },
        shouldShowQuickReceive() {
            if (!this.row.quick_receive) {
                return false
            }
            if (!this.row.product_uuid) {
                return false
            }
            return true
        },
    },

    mounted() {
        this.fetch(this.$route.params.uuid)
    },

    methods: {

        getIndexURL() {
            return '/receiving/'
        },

        getBatchURL() {
            return `/receiving/${this.row.batch_uuid}`
        },

        fetch(uuid) {
            this.$http.get(`/api/receiving-batch-row/${uuid}`).then(response => {
                this.row = response.data.data
                this.inputUOM = this.row.unit_uom
            }, response => {
                if (response.status == 403) { // forbidden; redirect to model index
                    this.$buefy.toast.open({
                        message: "You do not have permission to access that page.",
                        type: 'is-danger',
                    })
                    this.$router.push(this.getIndexURL())
                } else {
                    this.$buefy.toast.open({
                        message: "Failed to fetch page data!",
                        type: 'is-danger',
                    })
                }
            })

        },

        addAmount() {
            let url = `/api/receiving-batch-row/${this.row.uuid}/receive`
            let params = {
                row: this.row.uuid,
                mode: this.inputType,
                cases: null,
                units: null,
                expiration_date: this.expirationDate,
                quick_receive: false,
            }

            if (this.inputUOM == 'CS') {
                params.cases = this.inputQuantity
            } else {
                params.units = this.inputQuantity
            }

            this.$http.post(url, params).then(response => {
                if (response.data.data) {
                    this.$router.push(`/receiving/${this.row.batch_uuid}`)
                } else {
                    this.$buefy.toast.open({
                        message: response.data.error || "Failed to post receiving!",
                        type: 'is-danger',
                    })
                }
            }, response => {
                this.$buefy.toast.open({
                    message: "Failed to post receiving!",
                    type: 'is-danger',
                })
            })
        },

        addQuickAmount(quantity, uom) {
            this.inputQuantity = quantity
            this.inputUOM = uom
            this.addAmount()
        },

        subtractAmount() {
            this.inputQuantity = -this.inputQuantity
            this.addAmount()
        },
    },
}
</script>
<style>
  table.receiving-quantities td {
      padding: 0px 10px 0px 0px;
  }
  .input.receiving-quantity-input {
      width: 10rem;
  }
</style>
