<template>
<meta-head title="Мои настройки"></meta-head>

<div class="xl:container xl:mx-auto px-2 md:px-3">
    <div class="mt-16 shadow-classic rounded-md bg-indigo-200">
        <div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">

            <settings-menu />

            <div class="col-span-4">
                <div class="m-4 lg:m-8">
                    <div class="flex flex-col xl:flex-row">
                        <div class="xl:mr-24">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 mr-5">
                                    <user-avatar :user='user' class="w-20 h-20 text-lg" />
                                </div>
                                <div class="flex flex-col">
                                    <p class="text-base lg:text-xl font-semibold text-gray">{{user.name}}</p>
                                    <p class="lg:mt-1 text-base text-gray-light">@{{user.username}}</p>
                                </div>
                            </div>
                            <input ref="fileavatar"  class="hidden" accept="image/png, image/jpeg, image/jpg" type="file" @change="previewFiles">
                            <input ref="filebanner"  class="hidden" accept="image/png, image/jpeg, image/jpg" type="file" @change="previewFilesBanner">
                            <div>
                                <div v-if="$page.props.errors.avatar" class="text-red lg:text-lg">
                                    {{$page.props.errors.avatar}}
                                </div>
                                <button v-if="!user.photo_path" @click="changeAvatar" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-orange">
                                    Изменить фото профиля
                                </button>
                                <button v-else @click="removeAvatar" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-red">
                                    Удалить фото
                                </button>
                            </div>

                        </div>
                        <div class="mt-5 xl:mt-0">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 mr-5">
                                     <user-banner class="w-60 lg:w-96 h-20 rounded-xl bg-indigo-300" :user='user' size='banner' />
                                </div>
                            </div>
                            <div>
                                <div v-if="$page.props.errors.banner" class="text-red lg:text-lg">
                                    {{$page.props.errors.banner}}
                                </div>
                                <button v-if="!user.banner_path" @click="changeBanner" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-orange">
                                    Изменить баннер профиля
                                </button>
                                <button v-else @click="removeBanner" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-red">
                                    Удалить баннер
                                </button>
                            </div>
                        </div>
                    </div>


                    <form @submit.prevent="submit" class="mt-10 grid gap-4 lg:gap-10 grid-cols-1 lg:grid-cols-2">
                        <div class="flex flex-col">
                            <text-input v-model="form.first_name" :error="form.errors.first_name" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Имя" />
                        </div>
                        <div class="flex flex-col">
                            <text-input v-model="form.last_name" :error="form.errors.last_name" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Фамилия" />
                        </div>
                       <div class="flex flex-col">
                            <text-input v-model="form.username" :error="form.errors.username" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Тег" />
                        </div>
                        <div class="flex flex-col">
                             <text-input v-model="form.date_of_birth" :error="form.errors.date_of_birth" type="date" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Дата рождения" />
                        </div>

                        <div class="flex flex-col">
                             <text-input v-model="form.email" :error="form.errors.email" type="email" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Почта" />
                        </div>

                        <div class="flex flex-col">
                            <text-input v-model="form.phone" :error="form.errors.phone" type="tel" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Телефон" />
                        </div>
                        <div>
                            <div class="text-gray-light text-lg mb-2">Пол</div>
                            <div class="flex space-x-6">
                                <div class="flex items-center">
                                    <input id="user-sex-1" v-model="form.sex" value="1" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
                                    <label for="user-sex-1" class="select-none ml-3 text-gray">Женский</label>
                                </div>
                                <div class="flex items-center">
                                    <input id="user-sex-2" v-model="form.sex" value="2" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
                                    <label for="user-sex-2"  class="select-none ml-3 text-gray">Мужской</label>
                                </div>
                            </div>
                        </div>
                        <div class="lg:col-span-2">
                            <div class="flex flex-col">
                                <textarea-input label="О себе" v-model="form.about" :error="form.errors.about" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" cols="30" rows="2"></textarea-input>
                            </div>
                        </div>
                        <div class="flex flex-wrap -my-1 -mx-3">
                            <loading-button :loading="form.processing" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-orange focus:outline-none" type="submit">Сохранить</loading-button>
                            <button type="button"
                            class="mx-3 my-1 default text-lg text-orange">
                                Удалить аккаунт
                            </button>
                        </div>
                    </form>


                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import Layout from '@/Shared/Layout'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu'
import LoadingButton from "@/Shared/Form/LoadingButton";
import UserAvatar from '@/Shared/Misc/UserAvatar'
import UserBanner from '@/Shared/Misc/UserBanner'
import MetaHead from '@/Shared/MetaHead'
import TextInput from '@/Shared/Form/TextInput'
import TextareaInput from '@/Shared/Form/TextareaInput'
import { useForm } from "@inertiajs/inertia-vue3";
import { Inertia } from "@inertiajs/inertia";
import { toRefs } from "vue";

export default {
  layout: Layout,
  components: {
      MetaHead,
      UserAvatar,
      UserBanner,
      TextInput,
      TextareaInput,
      LoadingButton,
      SettingsMenu,
  },
  props: {
      user: Object,
  },
  methods: {
      previewFilesBanner(event){
          const file = event.target.files[0];
          Inertia.post(route("image.banner"), {
            _method: 'put',
            banner: file,
         })
      },
      previewFiles(event){
          const file = event.target.files[0];
          Inertia.post(route("image.avatar"), {
            _method: 'put',
            avatar: file,
         })
      },
     changeBanner(){
          this.$refs.filebanner.click();
      },
      removeBanner(){
          Inertia.post(route("image.banner.remove"), {
            _method: 'delete',
         })
      },
      changeAvatar(){
          this.$refs.fileavatar.click();
      },
      removeAvatar(){
          Inertia.post(route("image.avatar.remove"), {
            _method: 'delete',
         })
      }
  },
    setup(props) {
        const { user } = toRefs(props);
        const form = useForm({
            first_name: user.value.first_name,
            last_name: user.value.last_name,
            username: user.value.username,
            email: user.value.email,
            phone: user.value.phone,
            sex: user.value.sex,
            date_of_birth: user.value.date_of_birth,
            about: user.value.about,
            password: null,
        });

        const submit = () => {
            form.put(route("users.update", user.value.id));
        };

        return { form, submit }
    },
}
</script>
