<template>

<v-container fluid>

<v-row>
<v-col class="mb-5" cols="12"></v-col>
<v-card>
<v-data-table
:headers="headers"
:items="books"
class="elevation-1"
:search="searchString"
multi-sort
>
<template v-slot:item.available="{ item }">
<b>{{ item.available ? 'DA' : 'NE' }}</b>
</template>

<template v-slot:item.book_has_authors="{ item }">

<span v-for="(book_has_author, index) in item.book_has_authors"
:key="index">
{{ book_has_author.author.name }}
<span v-if="index != item.book_has_authors.length - 1">,</span>
</span>
</template>

<template v-slot:top>
<v-toolbar
flat
>
<v-toolbar-title>Sve knjige</v-toolbar-title>

<v-divider
class="mx-4"
inset
vertical
></v-divider>

<v-text-field
v-model="searchString"
append-icon="mdi-magnify"
label="Pretraga (naslov knjige, ime autora, kategorija)"
single-line
hide-details
clearable
></v-text-field>

<v-spacer></v-spacer>

<v-dialog
v-model="dialog"
max-width="700px"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
class="mb-2"
v-bind="attrs"
v-on="on"
>
Nova knjiga
</v-btn>
</template>

<!--pokusaj 1-->
 <!--kraj pokusaj 1-->

<v-card>
<v-card-title class="info title white--text darken-2 font-weight-bold">
{{ formTitle }}
</v-card-title>

<v-card-text>
<v-tabs
v-model="tab"
background-color="transparent"
>
<v-tab
v-for="item in items"
:key="item"
>
{{ item }}
</v-tab>
</v-tabs>
<!-- FIRST TAB -->
<v-tabs-items v-model="tab">
<v-tab-item
:key="items[0]"
>
<v-card
color="basil"
flat
>
<v-container>
<v-form
ref="form"
v-model="formValid">
<v-row>
<v-col cols="12" sm="12" md="6" hidden>
<v-text-field
v-model="editedItem.id"
label="Id"
></v-text-field>
</v-col>
<v-col cols="12" sm="12" md="12">
<v-text-field
v-model="editedItem.title"
label="Naslov"
required
v-
bind:rules="fieldRules.titleRules.concat(fieldRules.max200Chars)"
counter="200"
clearable
></v-text-field>
</v-col>
<v-col cols="12" sm="12" md="12">
<v-textarea
name="input-7-1"
label="Opis"
v-model="editedItem.description"
:rules="fieldRules.descriptionRules.concat(field
Rules.max1000Chars)"
counter="1000"
clearable
></v-textarea>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
v-model="editedItem.page_count"
label="Broj strana"
type="number"
 clearable
:rules="fieldRules.positiveValue"
></v-text-field>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-select
:items="categories"
v-model="editedItem.category_id"
name="category_id"
item-text="title"
item-value="id"
label="Kategorija"
:rules="fieldRules.categoryRules"
required
></v-select>
</v-col>
<v-col cols="12" sm="12" md="12">
<v-autocomplete
v-model="editedItem.authors_ids"
:items="authors"
label="Autori"
item-text="name"
item-value="id"
required
:rules="fieldRules.authorsRules"
multiple
></v-autocomplete>
</v-col>
<v-col cols="12" sm="12" md="12">
<v-file-input
small-chips
show-size
counter
multiple
label="Fajlovi"
></v-file-input>
</v-col>
</v-row>
</v-form>
</v-container>
</v-card>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="red darken-1 font-weight-bold"
text
@click="close"
>
Zatvori
</v-btn>
<v-btn
color="green darken-1 font-weight-bold"
text
@click="validateForm"
>
Sačuvaj
</v-btn>
</v-card-actions>
</v-tab-item>

<!-- SECOND TAB-->

<v-tab-item
:key="items[1]"
>
<v-card
color="basil"
flat
>
<v-data-table
 :headers="rentalsHeaders"
:items="rentalsHistory"
class="elevation-1"
v-model="editedItem.id"
multi-sort>
<template v-slot:item.items="{ item }">
<b>{{ item.items.length }}</b>
</template>

<template v-slot:item.returned="{ item }">

<b>{{ item.returned ? 'DA' : 'NE' }}</b>
</template>

<template v-slot:item.created_at="{ item }">

<span>{{ new Date(item.created_at).toLocaleString() }}</span>
</template>

<template v-slot:item.return_date="{ item }">

<span>{{ new
Date(item.return_date).toLocaleDateString() }}</span>
</template>

</v-data-table>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card-text>
</v-card>
</v-dialog>
</v-toolbar>
</template>

<template v-slot:item.actions="{ item }">

<v-tooltip left>
<template v-slot:activator="{ on, attrs }">
<v-icon
class="mr-2"
@click="editItem(item)"
v-bind="attrs"
v-on="on"
>
mdi-book-edit
</v-icon>
</template>
<span>Izmijeni knjigu</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-icon
class="mr-2"
@click="showRentalModal(item)"
v-bind="attrs"
v-on="on"
:disabled="!item.available"
>
mdi-book-arrow-right-outline
</v-icon>

</template>
<span>Izdaj knjigu</span>
</v-tooltip>

</template>

</v-data-table>
</v-card>

<v-dialog
v-model="dialogRental"
persistent
max-width="650"
>
<v-card>
<v-card-title class="warning title white--text darken-2 font-weight-bold">
Izdavanje knjige
</v-card-title>
<v-card-text>
<v-container>

<p>
Da li ste sigurni da želite da izdate knjigu <b>{{ bookName }}</b>?
</p>

<v-form
ref="formRental"
v-model="formValidRental">
<v-row>
<v-col cols="12" sm="12" md="12">
<v-autocomplete
v-model="customerId"
:items="customers"
label="Stranka"
item-text="name"
item-value="id"
required
:rules="fieldRules.customerRules"
clearable
></v-autocomplete>
</v-col>
</v-row>
</v-form>
</v-container>

</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="red darken-1 font-weight-bold"
text
@click="closeRental"
>
Ne želim
</v-btn>
<v-btn
color="green darken-1 font-weight-bold"
text
@click="validateRentalForm"
>
Želim
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>

<v-snackbar
v-model="snackbar.active"
:timeout="2000"
:color="snackbar.color"
bottom
>
{{ snackbar.text }}
 <template v-slot:action="{ attrs }">
<v-btn
color="white"
text
v-bind="attrs"
@click="snackbar.active = false">
Zatvori
</v-btn>
</template>
</v-snackbar>

</v-container>
</template>

<script>
import { homepageBooksHeaders } from '@/mixins/data-table-headers'
import { fieldRules } from "@/mixins/field-rules";
import { defaultBook } from "@/mixins/default-items";
import { rentalsHistoryPageRentalsHeaders } from '@/mixins/data-table-headers'

export default {
name: 'HomePage',
components: {

},
data: () => ({
searchString: '',
dialog: false,
headers: [],
books: [],
categories: [],
authors: [],
customers: [],
formTitle: 'Novi unos',
formValid: true,
rentalsHeaders:[],
rentalsHistory:[],
formValidRental: true,
editedItem: {},
editedItemRental: {},
editedIndex: -1,
fieldRules: null,
dialogRental: false,
bookName: '',
customerId: {},
snackbar: {
active: false,
color: '',
text: ''
},
tab: null,
items: [
'Izmjena knjige', 'Istorija izdavanja'
],
}),
created() {
this.headers = homepageBooksHeaders
this.fieldRules = fieldRules
this.editedItem = defaultBook
this.rentalsHeaders =rentalsHistoryPageRentalsHeaders

this.loadAllBooks();
this.loadAllCategories();
this.loadAllAuthors();
this.loadAllCustomers();
 },
methods: {
async getRentalsByBookId(){
console.log(this.editedItem.id)
await this.$store.dispatch('rentals/getRentalsByBookId',
this.editedItem.id ).then((res) => {

this.rentalsHistory = res.data
})
},
async loadAllBooks(){
await this.$store.dispatch('books/getAllBooks').then((res) => {
this.books = res.data
})
},

async loadAllCategories(){
await this.$store.dispatch('categories/getAllCategories').then((res) =>
{
this.categories = res.data
})
},

async loadAllAuthors(){
await this.$store.dispatch('authors/getAllAuthors').then((res) => {
this.authors = res.data
})
},

async loadAllCustomers(){
await this.$store.dispatch('customers/getAllCustomers').then((res) => {
this.customers = res.data
})
},

editItem (item) {
this.editedItem = this.books.indexOf(item)
this.editedItem = Object.assign({}, item)
this.formTitle = item.title
this.dialog = true

this.editedItem.authors_ids = item.book_has_authors.map(item => {

return item.author.id
})
this.getRentalsByBookId();
},

showRentalModal(item){
this.bookName = item.title
this.dialogRental = true
this.editedItemRental = item
},

validateRentalForm(){
if(this.$refs.formRental.validate())
this.saveRental()
},

validateForm(){
if(this.$refs.form.validate())
this.save()
},

async save () {
try {
await this.$store.dispatch('books/saveBook', this.editedItem
).then((res) => {
if(res.success){
this.loadAllBooks();
this.showSnackbar('Uspješno sačuvano', 'green');
this.close()
}else{
this.showSnackbar('Došlo je do greške, prijavite podršci',
'red');
}
})
}catch (e){
this.showSnackbar('Došlo je do greške, prijavite podršci', 'red');
}

this.formTitle = "Novi unos"

},

async saveRental () {
try {
const data = { book_id: this.editedItemRental.id, customer_id:
this.customerId}

await this.$store.dispatch('rentals/rentABook', data).then((res) =>

{
if(res.success){
this.loadAllBooks();
this.showSnackbar('Uspješno sačuvano', 'green');
this.closeRental()
}else{
this.showSnackbar('Došlo je do greške, prijavite podršci',
'red');
}
})
}catch (e){
this.showSnackbar('Došlo je do greške, prijavite podršci', 'red');
}
},

close () {
this.dialog = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, defaultBook)
this.editedIndex = -1
})
this.$refs.form.resetValidation()
this.formTitle = "Novi unos"
},

closeRental(){
this.bookName = ''
this.dialogRental = false
this.editedItemRental = null
this.customerId = null
},

showSnackbar(text, color){
this.snackbar.active = true
this.snackbar.text = text
this.snackbar.color = color
},

},
watch: {
},
}
</script>