<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 User " Color="cyan"></WM-PartTitle>
            <v-layout row wrap class="WM-Section" style="border-right-color: #32c5d2;">
                <v-flex class="lg12 RTL text-lg-right">
                    <div class="Step En" style="color:#32c5d2;"> 01 </div>
                    <div class="Title">
                        <div class="FA"> اطلاعـــــات عمــــــومی  </div>
                        <div class="EN"> General Info  </div>
                    </div>
                </v-flex>
                <v-layout row wrap>
                    <v-flex class="lg4">
                        <v-card-text>
                            <v-autocomplete prepend-icon="fas fa-align-justify" :items="deparment" :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="deparment" :filter="customFilter" color="cyan" item-text="name" label=" اگر لازم است، دپارتمان کاربر را به طور جزئی تر مشخص کنید "></v-autocomplete>
                        </v-card-text>
                    </v-flex>
                    <v-flex pt-2 class="lg1 text-lg-right">

                        <v-tooltip bottom color="black">
                            <v-btn mt-4 small @click.native="$store.state.ConfigUserDepartments = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
                            <span> ویرایش دپارتمان ها </span>
                        </v-tooltip>
                    </v-flex>
                </v-layout>
                <!-- --------------------------------------------------------------------
                                            Gneral Info
                -------------------------------------------------------------------- -->
                <v-layout row wrap>
                    <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>
                    <v-flex lg3>
                        <v-card-text>
                            <v-text-field label=" آدرس پست الکترونیکی " color="cyan" prepend-icon="fas fa-envelope"></v-text-field>
                        </v-card-text>
                    </v-flex>
                    <v-flex lg3>
                        <v-card-text>
                            <v-text-field v-model="password" :append-icon="passwordShow ? 'fas fa-eye' : 'fas fa-eye-slash'" :rules="[rules.required, rules.min]"
                                        :type="passwordShow ? 'text' : 'password'" label=" کلمه ی عبور " color="cyan" prepend-icon="fas fa-asterisk"
                                        hint=" حداقل 8 کاراکتر " counter @click:append="passwordShow = !passwordShow">
                            </v-text-field>
                        </v-card-text>
                    </v-flex>
                    <v-flex lg3>
                        <v-card-text>
                            <v-text-field v-model="passwordRetype" :append-icon="passwordRetypeShow ? 'fas fa-eye' : 'fas fa-eye-slash'" :rules="[rules.required, rules.min]"
                                        :type="passwordRetypeShow ? 'text' : 'password'" label=" تکرار کلمه ی عبور " color="cyan" prepend-icon="fas fa-asterisk"
                                        hint=" حداقل 8 کاراکتر " counter @click:append="passwordRetypeShow = !passwordRetypeShow">
                            </v-text-field>
                        </v-card-text>
                    </v-flex>
                </v-layout>
            </v-layout>
            <!-- --------------------------------------------------------------------
                                        Contact Info
            -------------------------------------------------------------------- -->
            <v-layout row wrap class="WM-Section" style="border-right-color: #00838F;">
                <v-flex class="lg12 RTL text-lg-right">
                    <div class="Step En" style="color:#00838F;"> 02 </div>
                    <div class="Title">
                        <div class="FA"> اطلاعــــــات تمــــــاس  </div>
                        <div class="EN"> Contact Info  </div>
                    </div>
                </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-telegram-plane"></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>
            </v-layout>
            <v-layout row wrap>
                <v-flex mt-3 class="lg12 RTL text-lg-left">
                    <hr>
                    <v-btn large round color="cyan" dark> <v-icon dark>fas fa-plus</v-icon> افزودن کاربر </v-btn>
                </v-flex>
            </v-layout>
        </div>


        <!-- --------------------------------------------------------------------
                                    Modals :: BEGIN
        -------------------------------------------------------------------- -->
        <template>
            <div class="text-xs-center">
                <wm-user-departments-edit></wm-user-departments-edit>
            </div>
        </template>
        <!-- --------------------------------------------------------------------
                                    Modals :: END
        -------------------------------------------------------------------- -->

    </v-container>
</template>



<script>
import DepartmentEdit from "@User/components/Config/Department/Modal-Layout.vue";
export default {
    components: {
        'wm-user-departments-edit'  :  DepartmentEdit,
    },
    data () {
      return {
        passwordShow: false,
        passwordRetypeShow: false,
        password: '',
        passwordRetype: '',
        rules: {
            required: value => !!value || 'اجباری',
            min: v => v.length >= 8 || ' کلمه ی عبور باید حداقل 8 حرف باشد ',
            emailMatch: () => ('The email and password you entered don\'t match')
        },
        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: '/User/List'
            },
            {
                text: ' افزودن کاربر جدید ',
                disabled: true,
                href: '/User/Add'
            }
        ]

      }
    },
};
</script>

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