<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" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-orange"
                          @click="changeAvatar"
                  >
                    Изменить фото профиля
                  </button>
                  <button v-else class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-red"
                          @click="removeAvatar"
                  >
                    Удалить фото
                  </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" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-orange"
                          @click="changeBanner"
                  >
                    Изменить баннер профиля
                  </button>
                  <button v-else class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-red"
                          @click="removeBanner"
                  >
                    Удалить баннер
                  </button>
                </div>
              </div>
            </div>

            <form class="border-b border-indigo-400 pb-10 mt-10 grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-7  gap-5 lg:gap-10 items-start" @submit.prevent="submitPassword">
              <div class="2xl:col-span-3 flex flex-col">
                <text-input v-model="passwordForm.old_password" :error="passwordForm.errors.old_password"
                            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="Старый пароль"
                            type="password"
                />
              </div>
              <div class="2xl:col-span-3 flex flex-col">
                <text-input v-model="passwordForm.new_password" :error="passwordForm.errors.new_password"
                            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="Новый пароль"
                            type="password"
                />
              </div>
              <div class="lg:col-span-2 2xl:col-span-1 2xl:mt-8">
                <loading-button :loading="form.processing" class="transition shadow-none hover:shadow-classic2 inline-flex items-center px-3 py-2.5 w-full justify-center  text-base rounded-md text-white bg-orange focus:outline-none"
                                type="submit"
                >
                  Обновить
                </loading-button>
              </div>
            </form>

            <form class="mt-10 grid gap-4 lg:gap-10 grid-cols-1 lg:grid-cols-2" @submit.prevent="submit">
              <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 class="flex flex-col">
                <text-input v-model="form.inn" :error="form.errors.inn"
                            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.checking_account" :error="form.errors.checking_account"
                            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.bik" :error="form.errors.bik"
                            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="text-gray-light text-lg mb-2">
                  Тип
                </div>
                <div class="flex space-x-6">
                  <div class="flex items-center">
                    <input id="user-type-1" v-model="form.type"
                           value="1" type="radio"
                           class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
                    >
                    <label for="user-type-1" class="select-none ml-3 text-gray">Физ. лицо</label>
                  </div>

                  <div class="flex items-center">
                    <input id="user-type-2" v-model="form.type"
                           value="2" type="radio"
                           class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
                    >
                    <label for="user-type-2" class="select-none ml-3 text-gray">Самозанятый</label>
                  </div>
                  <div class="flex items-center">
                    <input id="user-type-3" v-model="form.type"
                           value="3" type="radio"
                           class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
                    >
                    <label for="user-type-3" class="select-none ml-3 text-gray">Юридическое лицо</label>
                  </div>

                  <div class="flex items-center">
                    <input id="user-type-4" v-model="form.type"
                           value="4" type="radio"
                           class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
                    >
                    <label for="user-type-4" class="select-none ml-3 text-gray">ИП</label>
                  </div>
                </div>
              </div>

              <div class="lg:col-span-2">
                <div class="flex flex-col">
                  <textarea-input v-model="form.about" label="О себе"
                                  :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="lg:col-span-2">
                <!-- <div class="text-gray-light text-lg mb-2">
                  Ограничить доступ
                </div> -->
                <div class="flex items-center">
                  <input id="user-private" v-model="form.private"
                         type="checkbox" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
                  >
                  <label for="user-private" class="select-none ml-3 text-gray">Включить эксклюзивный акаунт, доступ к контенту только по подписке</label>
                </div>
                <!-- <div class="flex items-center">
                  <input id="user-commercial" v-model="form.allow_adult_content"
                         type="checkbox" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
                  >
                  <label for="user-commercial" class="select-none ml-3 text-gray">Разрешить контент для взрослых</label>
                </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 { useForm } from '@inertiajs/inertia-vue3'
import { Inertia } from '@inertiajs/inertia'
import { toRefs } from 'vue'

import Layout from '@/Shared/Layout.vue'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
import LoadingButton from '@/Shared/Form/LoadingButton.vue'
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
import UserBanner from '@/Shared/Misc/UserBanner.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import TextInput from '@/Shared/Form/TextInput.vue'
import TextareaInput from '@/Shared/Form/TextareaInput.vue'


export default {
    components: {
        MetaHead,
        UserAvatar,
        UserBanner,
        TextInput,
        TextareaInput,
        LoadingButton,
        SettingsMenu,
    },
    layout: Layout,
    props: {
        user: Object,
    },
    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,
            type: user.value.type,
            date_of_birth: user.value.date_of_birth,
            about: user.value.about,
            private: user.value.private,
            inn: user.value.inn,
            checking_account: user.value.checking_account,
            bik: user.value.bik,
            password: null,
        })

        const passwordForm = useForm({
            old_password: null,
            new_password: null,
        })

        const submit = () => {
            form.put(route('users.update', user.value.id))
        }
        const submitPassword = () => {
            passwordForm.put(route('users.update.password', user.value.id), {
                onSuccess: () => passwordForm.reset(),
            })
        }

        return { form, passwordForm, submit, submitPassword }
    },
    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',
            })
        }
    },
}
</script>
