@extends('layouts.main')

@section("content")
    <page-content :context="context"/>
@endsection
@section("components_declarations")
    @include("users.user_activity")
    @include("users.user_form")
    <template id="page-content">
        <v-content>
            <v-container fluid fill-height>
                <v-layout justify-center>
                    <v-flex>
                        <template>
                            <v-layout row>
                                <v-flex class="mx-auto" xs12 md4>
                                    <v-card
                                        elevation="1"
                                        d-flex
                                    >
                                        <v-card-text>
                                            <v-layout column>
                                                <v-flex xs12 d-flex>
                                                    <user-info :user="user" :bio="false"/>
                                                </v-flex>





                                                <v-flex xs12>
                                                    <v-divider></v-divider>
                                                </v-flex>
                                                <v-flex xs12 class="grey lighten-3">
                                                    <v-layout row justify-center>
                                                        <v-flex shrink>
                                                            {{__("First Name")}}
                                                        </v-flex>
                                                        <v-flex grow>
                                                            <v-layout justify-end class="align-content-end">
                                                                <h5>{{$user->first_name}}</h5>
                                                            </v-layout>

                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-divider></v-divider>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-layout row justify-center>
                                                        <v-flex shrink>
                                                            {{__("Last Name")}}
                                                        </v-flex>
                                                        <v-flex grow>
                                                            <v-layout justify-end class="align-content-end">
                                                                <h5>{{$user->last_name}}</h5>
                                                            </v-layout>

                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-divider></v-divider>
                                                </v-flex>
                                                <v-flex class="grey lighten-3" xs12>
                                                    <v-layout row justify-center>
                                                        <v-flex shrink>
                                                            {{__("Phone 1")}}
                                                        </v-flex>
                                                        <v-flex grow>
                                                            <v-layout justify-end class="align-content-end">
                                                                <h5>{{$user->tel1}}</h5>
                                                            </v-layout>

                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-divider></v-divider>
                                                </v-flex>
                                                <v-flex class="grey lighten-3" xs12>
                                                    <v-layout row justify-center>
                                                        <v-flex shrink>
                                                            {{__("Phone 2")}}
                                                        </v-flex>
                                                        <v-flex grow>
                                                            <v-layout justify-end class="align-content-end">
                                                                <h5>{{$user->tel2}}</h5>
                                                            </v-layout>

                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-divider></v-divider>
                                                </v-flex>
                                                <v-flex class="grey lighten-3" xs12>
                                                    <v-layout row justify-center>
                                                        <v-flex shrink>
                                                            {{__("Address")}}
                                                        </v-flex>
                                                        <v-flex grow>
                                                            <v-layout justify-end class="align-content-end">
                                                                <h5>{{$user->address}}</h5>
                                                            </v-layout>

                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-divider></v-divider>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-layout row justify-center>
                                                        <v-flex shrink>
                                                            {{__("City")}}
                                                        </v-flex>
                                                        <v-flex grow>
                                                            <v-layout justify-end class="align-content-end">
                                                                <h5>{{$user->city}}</h5>
                                                            </v-layout>

                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-divider></v-divider>
                                                </v-flex>
                                                <v-flex class="grey lighten-3" xs12>
                                                    <v-layout row justify-center>
                                                        <v-flex shrink>
                                                            {{__("Country")}}
                                                        </v-flex>
                                                        <v-flex grow>
                                                            <v-layout justify-end class="align-content-end">
                                                                <h5>{{$user->country}}</h5>
                                                            </v-layout>

                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-divider></v-divider>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-layout row justify-center>
                                                        <v-flex shrink>
                                                            {{__("Postal/Zip Code")}}
                                                        </v-flex>
                                                        <v-flex grow>
                                                            <v-layout justify-end class="align-content-end">
                                                                <h5>{{$user->zip}}</h5>
                                                            </v-layout>

                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-divider></v-divider>
                                                </v-flex>
                                                <v-flex class="grey lighten-3" xs12>
                                                    <v-layout row justify-center>
                                                        <v-flex shrink>
                                                            {{__("Agency")}}
                                                        </v-flex>
                                                        <v-flex grow>
                                                            <v-layout justify-end class="align-content-end">
                                                                <h5>{{$user->agency->name ?? ""}}</h5>
                                                            </v-layout>

                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>

                                            </v-layout>

                                        </v-card-text>

                                    </v-card>
                                </v-flex>

                            </v-layout>

                        </template>

                    </v-flex>
                </v-layout>
                <v-snackbar
                    v-model="snackbar.active"
                    :color="snackbar.color"
                >
                    @{{ snackbar.text }}
                    <v-btn

                        flat
                        @click="snackbar.active = false"
                    >
                        Close
                    </v-btn>
                </v-snackbar>
            </v-container>

        </v-content>
    </template>
    <script>

        const PageContent = {
            template: "#page-content",
            components: {UserInfo, UserForm, UserActivity},
            data: () => ({
                user: {!! $user !!},
                snackbar: {active: false, text: "", color: "primary"},
            }),
            props: {
                source: String,
                context: Object,

                showreport: {
                    type: Function,
                    defualt: function (url) {
                    }
                },

            },
            computed: {},
            watch: {},
            mounted() {


            },
            methods: {


                toast(message, color) {

                    this.snackbar.text = message;
                    this.snackbar.color = color;
                    this.snackbar.active = true;


                },
                eventListner(event, data) {
                    switch (event) {
                        case "toast":
                            this.toast(data.message, data.color);
                            break;
                        default:
                            console.log("unknown event caught");
                            break;
                    }
                }
            },
        }
    </script>
@endsection
@section("components_instances")
    PageContent
@endsection