<template>
<form class="modal-form" action="">
    <div class="modal-card" style="width: auto">
    <header class="modal-card-head">
                <p class="modal-card-title">Nová žaloba</p>
            </header>
            <section class="modal-card-body">
            <b-steps :has-navigation="hasNavigation" v-model="activeStep">
                <b-step-item step="1" label="Žalobce">
                    <h1 class="title has-text-centered">Kdo jste vy, jako žalobce?</h1>
                    <div class="columns">
                        <div class="column">
                            <b-field>
                            <b-field label="Jméno">
                                <b-input placeholder="Jméno" required v-model="zaloba.zalobci[0].jmeno"></b-input>
                            </b-field>
                            <b-field label="Příjmení">
                                <b-input placeholder="Příjmení" required v-model="zaloba.zalobci[0].prijmeni"></b-input>
                            </b-field>
                            </b-field>
                            <b-field label="Rodné číslo">
                                <b-input placeholder="Rodné číslo" validation-message="Rodné číslo může obsahovat pouze číslice a lomítko" max="10" pattern="[0-9/]*" required v-model="zaloba.zalobci[0].rodnecisloneboico"></b-input>
                            </b-field>
                            <b-field label="Bydliště">
                                <b-field label="Ulice a číslo popisné">
                                    <b-input placeholder="Ulice a číslo popisné" required v-model="zaloba.zalobci[0].sidlo.uliceacislopopisne"></b-input>
                                </b-field>
                            </b-field>
                            <b-field>
                                <b-field label="Město">
                                    <b-input placeholder="Město" required v-model="zaloba.zalobci[0].sidlo.mesto"></b-input>
                                </b-field>
                            </b-field>
                            <b-field>
                                <b-field label="PSČ">
                                    <b-input placeholder="PSČ" required v-model="zaloba.zalobci[0].sidlo.psc"></b-input>
                                </b-field>
                                <b-field label="Stát">
                                    <b-input placeholder="Stát" required v-model="zaloba.zalobci[0].sidlo.stat"></b-input>
                                </b-field>
                            </b-field>
                        </div>
                        <div v-if="hasZastoupeni" class="column">
                            <p class="has-text-weight-bold">Právní zastoupení</p>
                            <b-field label="Jméno">
                                <b-input placeholder="Jméno" v-model="zaloba.zalobci[0].zastoupen.jmeno"></b-input>
                            </b-field>
                            <b-field label="Příjmení">
                                <b-input placeholder="Příjmení" v-model="zaloba.zalobci[0].zastoupen.prijmeni"></b-input>
                            </b-field>
                            <b-field label="IČO">
                                <b-input placeholder="IČO" v-model="zaloba.zalobci[0].zastoupen.rodnecisloneboico"></b-input>
                            </b-field>
                            <b-field label="Sídlo">
                                <b-field label="Ulice a číslo popisné">
                                    <b-input placeholder="Ulice a číslo popisné" v-model="zaloba.zalobci[0].zastoupen.sidlo.uliceacislopopisne"></b-input>
                                </b-field>
                            </b-field>
                            <b-field>
                                <b-field label="Město">
                                    <b-input placeholder="Město" v-model="zaloba.zalobci[0].zastoupen.sidlo.mesto"></b-input>
                                </b-field>
                            </b-field>
                            <b-field>
                                <b-field label="PSČ">
                                    <b-input placeholder="PSČ" v-model="zaloba.zalobci[0].zastoupen.sidlo.psc"></b-input>
                                </b-field>
                                <b-field label="Stát">
                                    <b-input placeholder="Stát" v-model="zaloba.zalobci[0].zastoupen.sidlo.stat"></b-input>
                                </b-field>
                            </b-field>
                        </div>
                    </div>
                    <b-checkbox v-model="hasZastoupeni">
                        Mám právní zastoupení
                    </b-checkbox>
                    
                </b-step-item>
                <b-step-item step="2" label="Soud">
                    <h1 class="title has-text-centered">K jakému soudu budete žalobu podávat?</h1>
                    <p>Podací soud je určen podle pravidla takzvané  místní příslušnosti.</p>
                    <b-field label="Hledat soud">
                        <b-autocomplete
                            v-model="typingSoud"
                            placeholder="například: okresní soud beroun"
                            :open-on-focus="true"
                            :data="filteredDataObj"
                            field="name"
                            @select="option => (selected = option)"
                        >
                        </b-autocomplete>
                    </b-field>
                    <hr />
                    <b-field label="Název soudu">
                        <b-input placeholder="Název soudu" v-model="zaloba.soud.nazev"></b-input>
                    </b-field>
                    <b-field label="Sídlo">
                        <b-field label="Ulice a číslo popisné">
                            <b-input placeholder="Ulice a číslo popisné" v-model="zaloba.soud.sidlo.uliceacislopopisne"></b-input>
                        </b-field>
                    </b-field>
                    <b-field>
                        <b-field label="Město">
                            <b-input placeholder="Město" v-model="zaloba.soud.sidlo.mesto"></b-input>
                        </b-field>
                    </b-field>
                    <b-field>
                        <b-field label="PSČ">
                            <b-input placeholder="PSČ" v-model="zaloba.soud.sidlo.psc"></b-input>
                        </b-field>
                        <b-field label="Stát">
                            <b-input placeholder="Stát" v-model="zaloba.soud.sidlo.stat"></b-input>
                        </b-field>
                    </b-field>
                </b-step-item>
                <b-step-item step="3" label="Žalovaný">
                    <h1 class="title has-text-centered">Koho budete žalovat?</h1>
                    <div class="is-size-6">
                        <Zalovany v-for="(zalovan, index) in zaloba.zalovani" :key="zalovan.rodnecisloneboico" v-bind:zalovan="zalovan" v-bind:index="index" v-on:remove="deleteZalovany"/>
                        <b-field>
                        <b-field label="Jméno">
                            <b-input placeholder="Jméno" required v-model="newZalovan.jmeno"></b-input>
                        </b-field>
                        <b-field label="Příjmení">
                            <b-input placeholder="Příjmení" required v-model="newZalovan.prijmeni"></b-input>
                        </b-field>
                        </b-field>
                        <b-field label="Rodné číslo">
                            <b-input placeholder="Rodné číslo" validation-message="Rodné číslo může obsahovat pouze číslice a lomítko" max="10" pattern="[0-9/]*" required v-model="newZalovan.rodnecisloneboico"></b-input>
                        </b-field>
                        <b-field label="Bydliště">
                            <b-field label="Ulice a číslo popisné">
                                <b-input placeholder="Ulice a číslo popisné" required v-model="newZalovan.sidlo.uliceacislopopisne"></b-input>
                            </b-field>
                        </b-field>
                        <b-field>
                            <b-field label="Město">
                                <b-input placeholder="Město" required v-model="newZalovan.sidlo.mesto"></b-input>
                            </b-field>
                        </b-field>
                        <b-field>
                            <b-field label="PSČ">
                                <b-input placeholder="PSČ" required v-model="newZalovan.sidlo.psc"></b-input>
                            </b-field>
                            <b-field label="Stát">
                                <b-input placeholder="Stát" required v-model="newZalovan.sidlo.stat"></b-input>
                            </b-field>
                        </b-field>
                        <b-button type="is-success" icon-pack="fas" icon-left="plus" @click="addAnotherZalovany">Přidat dalšího žalovaného</b-button>
                    </div>

                </b-step-item>
                <b-step-item step="4" label="O co jde?">
                    <h1 class="title has-text-centered">V jaké věci?</h1>
                    <p class="mb-2">O žalobu v jaké věci se jedná?</p>
                    <p class="mb-2">Zkuste doplnit větu:</p>
                    <b-field label="Jedná se...">
                        <b-input v-model="zaloba.cosleduje" placeholder="o zaplacení částky ve výši 1,500.000,- Kč s příslušenstvím"></b-input>
                    </b-field>
                    <p>
                        Například:<br>
                        <i>o doplacení výživného ve výši 14 000 Kč</i><br>
                        <i>o náhradu škody způsobenou nepodáním insolvenčního návrhu</i>
                    </p>
                </b-step-item>
                <b-step-item step="5" label="Skoro hotovo!">
                    <h1 class="title has-text-centered">Skoro hotovo!</h1>
                    <p>Průvodce už máte skoro za sebou, stačí jen tyto formality:</p>
                    <b-field label="Název žaloby">
                        <b-input v-model="zaloba.title" placeholder="Žaloba"></b-input>
                    </b-field>
                    <b-field label="Datum na listině">
                        <b-datepicker
                            placeholder="Vyberte datum"
                            icon="calendar-today"
                            v-model="zaloba.datum"
                            inline
                            trap-focus>
                        </b-datepicker>
                    </b-field>
                </b-step-item>
                <template
                    slot="navigation"
                    slot-scope="{previous, next}">
                    <b-button
                        outlined
                        type="is-outline"
                        icon-pack="fas"
                        icon-left="arrow-left"
                        v-if="!previous.disabled"
                        @click.prevent="previous.action">
                        Zpět
                    </b-button>
                    <b-button
                        type="is-primary"
                        icon-pack="fas"
                        icon-right="arrow-right"
                        class="button-right"
                        :disabled="continuedisabled"
                        v-if="activeStep!==4"
                        @click.prevent="next.action">
                        <span>Pokračovat</span>
                    </b-button>
                    <b-button
                        type="is-primary"
                        icon-pack="fas"
                        icon-right="arrow-right"
                        class="button-right"
                        v-if="activeStep==4"
                        @click="emitZaloba">
                        Přejít na vypsání žaloby
                    </b-button>
                </template>
            </b-steps>
            </section>
            <footer class="modal-card-foot">
                <b-button type="is-danger" outlined icon-pack="fas" icon-left="times-circle" @click="goBackToHome">Zpátky na hlavní stránku</b-button>
            </footer>
        </div>
    </form>
</template>

<style>
.button-right {
    float: right;
}
.modal-form {
    min-width: 30%;
}
</style>

<script>
import Zalovany from '@/components/edit/Zalovany.vue'
const soudy = require('@/components/edit/soudy.json')

export default {
    name: "Guide",
    components: {
        Zalovany
    },
    methods: {
        addAnotherZalovany: function () {
            this.zaloba.zalovani.push({...this.newZalovan})
            this.resetNewZalovan()
        },
        resetNewZalovan: function ()  {
            this.newZalovan = {
                  rod: "",
                  jmeno: "",
                  prijmeni: "",
                  sidlo: {
                      uliceacislopopisne: "",
                      mesto: "",
                      psc: "",
                      stat: ""
                  },
                  rodnecisloneboico: ""
              }
        },
        deleteZalovany: function (index) {
            this.zaloba.zalovani.splice(index, 1)
        },
        emitZaloba: function () {
            if (this.newZalovan.jmeno !== "" && this.newZalovan.primeni !== "") {
                this.addAnotherZalovany()
            }
            // TODO: proper validation
            if (!this.hasZastoupeni) {
                this.zaloba.zalobci[0].zastoupeni = null
            }
            this.zaloba.datum = this.zaloba.datum.toLocaleDateString('cs-CZ')
            this.$emit("zalobaguideclose",this.zaloba)
            this.$parent.close()
        },
        goBackToHome: function () {
            this.$parent.close()
            this.$router.push('/')
        }
    },
    computed: {
        filteredDataObj() {
            return this.soudy.filter(option => {
                return (
                    option.name
                        .toString()
                        .toLowerCase()
                        .indexOf(this.typingSoud.toLowerCase()) >= 0
                )
            })
        }
    },
    watch: {
        selected:{
            handler(newVal) {
                this.zaloba.soud.nazev = newVal.name || ""
                this.zaloba.soud.sidlo.uliceacislopopisne = newVal.address.split(", ")[0]|| ""
                this.zaloba.soud.sidlo.mesto = newVal.address.split(", ")[1] || ""
                this.zaloba.soud.sidlo.psc = ""
                this.zaloba.soud.sidlo.stat = "Česká republika"
            },
            deep: true
        }
    },
    data: () => {
        return {
            continuedisabled: false,
            activeStep: 0,
            hasNavigation: true,
            hasZastoupeni: false,
            isFormValid: false,
            typingSoud: '',
            selected: null,
            soudy,
            zaloba: {
                soud: {
                        nazev: "",
                        sidlo: {
                                uliceacislopopisne: "",
                                mesto: "",
                                psc: "",
                                stat: ""
                            }
                    },
                zalobci: [{
                    rod: "",
                    jmeno: "",
                    prijmeni: "",
                    sidlo: {
                        uliceacislopopisne: "",
                        mesto: "",
                        psc: "",
                        stat: ""
                    },
                    rodnecisloneboico: "",
                    zastoupen: {
                        rod: "",
                        jmeno: "",
                        prijmeni: "",
                        sidlo: {
                            uliceacislopopisne: "",
                            mesto: "",
                            psc: "",
                            stat: ""
                        },
                        rodnecisloneboico: "" 
                    }
                }],
                zalovani: [],
                hlavy: [],
                datum: new Date(),
                cosleduje: "",
                title: ""
            },
            newZalovan: {
                  rod: "",
                  jmeno: "",
                  prijmeni: "",
                  sidlo: {
                      uliceacislopopisne: "",
                      mesto: "",
                      psc: "",
                      stat: ""
                  },
                  rodnecisloneboico: ""
              }
        }
    },

}
</script>