<template>
    <v-container fluid>
        <div class="Tile Shadowed Padd-0 WM-Margin-B-10" >
            <wm-breadcrumbs LinkClass="WM-Link-Cyan" :items="breadcrumbItems"></wm-breadcrumbs>
        </div>
        <div class="Tile Shadowed">
            <WM-PartTitle class="WM-Margin-T-20" TitleFa=" افزودن مشتری جدید " TitleEn=" Add a new Client " Color="cyan"></WM-PartTitle>
            <v-layout row wrap>
                 <v-flex class="lg4">
                     <v-card-text>
                        <v-autocomplete prepend-icon="fas fa-align-justify" :items="categories" :filter="customFilter" color="cyan" item-text="name" label=" دسته ی مورد نظر "></v-autocomplete>
                    </v-card-text>
                </v-flex>
                <v-flex class="lg4">
                     <v-card-text>
                        <v-autocomplete prepend-icon="fas fa-align-right" :items="categories" :filter="customFilter" color="cyan" item-text="name" label=" لطفا دسته ی آیتم را به طور جزئی تر مشخص کنید "></v-autocomplete>
                    </v-card-text>
                </v-flex>
                <!-- --------------------------------------------------------------------
                                            Gneral Info
                -------------------------------------------------------------------- -->
                <v-flex class="lg12 RTL text-lg-right">
                    <hr>
                    <h4> اطلاعات عمومی  </h4>
                </v-flex>
                <v-flex lg2>
                     <v-card-text>
                        <v-autocomplete prepend-icon="fas fa-align-right" :items="customerTypes" :filter="customFilter" color="cyan" item-text="name" label=" نوع مشتری را مشخص کنید "></v-autocomplete>
                    </v-card-text>
                </v-flex>
                <v-flex lg3>
                    <v-card-text>
                        <v-text-field label=" نام مشتری به فارسی " color="cyan" prepend-icon="fas fa-tag" ></v-text-field>
                    </v-card-text>
                </v-flex>
                <v-flex lg3>
                    <v-card-text>
                        <v-text-field label=" نام مشتری به انگلیسی " color="cyan" prepend-icon="fas fa-tag"></v-text-field>
                    </v-card-text>
                </v-flex>
                <v-flex lg3>
                    <v-card-text>
                        <v-text-field label=" کد ملی، شماره گذرنامه و یا شناسه ی ملی شرکت " color="cyan" prepend-icon="fas fa-sort-numeric-up"></v-text-field>
                    </v-card-text>
                </v-flex>


                <!-- --------------------------------------------------------------------
                                            Contact Info
                -------------------------------------------------------------------- -->
                <v-flex class="lg12 RTL text-lg-right">
                    <hr>
                    <h4> اطلاعات تماس  </h4>
                </v-flex>
                <v-flex lg2>
                     <v-card-text>
                        <v-autocomplete prepend-icon="fas fa-map" :items="customerTypes" :filter="customFilter" color="cyan" item-text="name" label=" شهر مشتری "></v-autocomplete>
                    </v-card-text>
                </v-flex>
                <v-flex lg2>
                     <v-card-text>
                        <v-autocomplete prepend-icon="fas fa-align-right" :items="customerTypes" :filter="customFilter" color="cyan" item-text="name" label=" منطقه ی مشتری "></v-autocomplete>
                    </v-card-text>
                </v-flex>
                <v-flex lg2>
                    <v-card-text>
                        <v-text-field label=" آدرس پست الکترونیکی " color="cyan" prepend-icon="fas fa-envelope"></v-text-field>
                    </v-card-text>
                </v-flex>
                <v-flex lg2>
                    <v-card-text>
                        <v-text-field label=" آدرس پیج اینستاگرام " color="cyan" prepend-icon="fas fa-instagram"></v-text-field>
                    </v-card-text>
                </v-flex>
                <v-flex lg8 style="position:relative; padding: 0px 15px;">
                    <v-card-text class="Duplicate">
                        <v-layout row wrap pl-2>
                            <v-flex lg8>
                                <v-text-field label=" آدرس " color="cyan" prepend-icon="fas fa-map-marker"></v-text-field>
                            </v-flex>
                            <v-flex lg4>
                                <v-text-field label=" شماره ی ثابت " color="cyan" prepend-icon="fas fa-phone"></v-text-field>
                            </v-flex>
                            <v-btn fab color="cyan" fixed bottom left dark style="left:15px; bottom:-25px; position:absolute"><v-icon dark>fas fa-plus</v-icon></v-btn>
                            <v-btn fab small color="red" fixed bottom left dark style="left:-5px; top:-20px; position:absolute"><v-icon dark>fas fa-times</v-icon></v-btn>
                        </v-layout>
                    </v-card-text>
                </v-flex>
                <v-flex lg4 style="position:relative; padding: 0px 20px;">
                    <v-card-text class="Duplicate">
                        <v-layout row wrap pl-2>
                            <v-flex lg6>
                                <v-text-field label=" نام شماره " color="cyan" prepend-icon="fas fa-tag"></v-text-field>
                            </v-flex>
                            <v-flex lg6>
                                <v-text-field label=" شماره ی تلفن " color="cyan" prepend-icon="fas fa-phone"></v-text-field>
                            </v-flex>
                            <v-btn fab color="cyan" fixed bottom left dark style="left:15px; bottom:-25px; position:absolute"><v-icon dark>fas fa-plus</v-icon></v-btn>
                            <v-btn fab small color="red" fixed bottom left dark style="left:-5px; top:-20px; position:absolute"><v-icon dark>fas fa-times</v-icon></v-btn>
                        </v-layout>
                    </v-card-text>
                </v-flex>

                <!-- --------------------------------------------------------------------
                                            Epertise Info
                -------------------------------------------------------------------- -->
                <v-flex mt-3 class="lg12 RTL text-lg-right">
                    <hr>
                    <h4> اطلاعات تخصصی  </h4>
                </v-flex>
                <v-flex lg2>
                     <v-card-text>
                        <v-autocomplete prepend-icon="fas fa-map" :items="customerTypes" :filter="customFilter" color="cyan" item-text="name" label=" گروه خونی "></v-autocomplete>
                    </v-card-text>
                </v-flex>
                <v-flex lg2>
                    <v-card-text>
                        <v-text-field label=" سن " color="cyan" prepend-icon="fas fa-sort-numeric-up"></v-text-field>
                    </v-card-text>
                </v-flex>
                <v-flex lg2>
                    <v-card-text>
                        <v-text-field label=" ورن " color="cyan" prepend-icon="fas fa-sort-numeric-up"></v-text-field>
                    </v-card-text>
                </v-flex>
                <v-flex lg2>
                    <v-card-text>
                        <v-text-field label=" قد " color="cyan" prepend-icon="fas fa-list-ol"></v-text-field>
                    </v-card-text>
                </v-flex>
                <v-flex lg12 style="position:relative; padding: 0px 15px;">
                    <v-card-text class="Duplicate">
                        <v-layout row wrap pl-2>
                            <v-flex lg3>
                                <v-autocomplete prepend-icon="fas fa-align-right" :items="customerTypes" :filter="customFilter" color="cyan" item-text="name" label=" نوع بیماری "></v-autocomplete>
                            </v-flex>
                            <v-flex lg9>
                                <v-text-field label=" توضیحات " color="cyan" prepend-icon="fas fa-quote-right"></v-text-field>
                            </v-flex>
                            <v-btn fab color="cyan" fixed bottom left dark style="left:15px; bottom:-25px; position:absolute"><v-icon dark>fas fa-plus</v-icon></v-btn>
                            <v-btn fab small color="red" fixed bottom left dark style="left:-5px; top:-20px; position:absolute"><v-icon dark>fas fa-times</v-icon></v-btn>
                        </v-layout>
                    </v-card-text>
                </v-flex>
                <v-flex mt-3 class="lg12 RTL text-lg-left">
                    <hr>
                    <v-btn large round color="red" dark> <v-icon dark>fas fa-check</v-icon> ذخیره ی اطلاعات </v-btn>
                </v-flex>
                <!-- <v-btn fab small color="red" bottom left dark ><v-icon dark>fas fa-check</v-icon> ذخیره ی اطلاعات </v-btn> -->

            </v-layout>
            <v-layout row wrap>

            </v-layout>
        </div>
    </v-container>
</template>



<script>
export default {
    components: {
    },
    data () {
      return {
        hasSaved: false,
        model: null,
        categories: [
            { name: ' تلفن همراه ', abbr: 'FL', id: 1 },
            { name: ' تبلت ', abbr: 'GA', id: 2 },
            { name: ' لپ تاپ ', abbr: 'NE', id: 3 },
            { name: ' کامپیوتر ', abbr: 'CA', id: 4 },
            { name: ' دوربین ', abbr: 'NY', id: 5 }
        ],
        customerTypes: [
            { name: ' حقیقی ', abbr: 'FL', id: 1 },
            { name: ' حقوقی ', abbr: 'GA', id: 2 },
        ],
        breadcrumbItems: [
            {
                text: '',
                disabled: false,
                href: 'Home',
                icon: 'home'
            },
            {
                text: ' مشتریان من ',
                disabled: false,
                href: 'Clients'
            },
            {
                text: ' افزودن مشتری جدید ',
                disabled: true,
                href: 'AddClient'
            }
        ]

      }
    },
};
</script>

<style scoped lang="scss">
    .v-card__text {
        padding-top: 4px;
    }
    .Duplicate {
        border: 1px solid #ddd;
    }
    .v-btn--round i {
        margin-left: 10px;
        margin-top: -4px;
    }
</style>
