<template>
  <q-page padding>
    <div class="q-pa-md">
      
    </div>
    <div class="q-pa-md">
      <q-banner dense inline-actions class="text-white bg-blue font-tajuk">
        <div class="font-tajuk text-h4">
          Fines
        </div>
      </q-banner>
      <q-input bottom-slots v-model="borrower_id" ref="borrower_id" :rules="[val => !!val || 'Field is required']" label="Student/Staff ID" dense>
        <template v-slot:hint>
          Borrower id
        </template>

        <template v-slot:append>
          <q-btn round dense flat icon="search" @click="findFines" />
        </template>
      </q-input>
      <div v-if="total_fines>0" class="q-pa-md fit row wrap justify-center   q-gutter-md">
        <q-avatar size="70vw" color="green">{{ total_fines }}</q-avatar>
      </div>
    </div>
  </q-page>
</template>

<script>
export default {
    data () {
      return {
        borrower_id: '2016607348',
        total_fines: .0
      }
    },
    methods: {
        findFines() {
            
            this.$refs.borrower_id.validate()
            if (this.$refs.borrower_id.hasError){
              this.$q.notify({
                message: 'Error. Please enter ID.',
                icon: 'error',
                color: 'red'
              })
            }
            else {
              this.$q.loading.show({
              delay: 10 // ms
            })
                this.$axios.get('wils/denda',{
                    params: {
                        borrower_id: this.borrower_id
                    }
                }).then((response) => {
                    console.log(response)
                    this.total_fines =  response.data.jumlah   
                    this.$q.notify({
                      message: 'Record was successfully retrieved.',
                      icon: 'check',
                      color: 'green'
                    })

                }).catch((err) => {
                    console.log(err)
                    this.$q.notify({
                      message: 'Error. please try again.',
                      icon: 'error',
                      color: 'red'
                    })
                }).finally(()=>{
                  this.$q.loading.hide()
                })
            }
        }
    }
}
</script>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
    .font-tajuk {
        font-family: 'Roboto Condensed', sans-serif;
    }
    .my-card {
      width: 100%;
      max-width: 300px;
    }
</style>