<template>

<meta-head title="Подписчики"></meta-head>

<profile-header :user='user' :counts='counts' />
<profile-menu :user='user'  />


<div class="mt-12 xl:container xl:mx-auto px-2 md:px-3">

    <div  class="cards-block rounded-md bg-indigo-200 shadow-classic p-2 lg:p-5">

        <div class=" space-y-3 md:space-y-0 md:flex items-center">
            <div class="flex-1 md:mr-10">
                <div class="relative">
                    <div class="absolute inset-y-0 left-3 flex items-center z-10">
                        <svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" > <path fill-rule="evenodd" clip-rule="evenodd" d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z"/> </svg>
                    </div>
                    <input v-model="form.search" class=" relative w-full 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 !pl-10 " placeholder="Поиск" type="search"/>
                </div>
            </div>

            <div class="flex space-x-6 md:mr-10">
                    <div class="flex items-center">
                        <input id="user-sex-1" v-model="form.sub" 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 text-xs md:text-base">По подписчикам</label>
                    </div>
                    <div class="flex items-center">
                        <input id="user-sex-2" v-model="form.sub" value="0" 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 text-xs md:text-base">Не по подписчикам</label>
                    </div>
            </div>

            <div class="text-gray-light">
                <button @click="resetSearch()" class="default">Сбросить</button>
            </div>
        </div>

    <div v-show="subscribers.length" class="mt-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid gap-2 lg:gap-4 grid-cards">
     <div v-for="subscriber in subscribers" :key='subscriber.id' class=" user-card  relative">
            <div v-if="user.is_auth_user" class="absolute inset-x-0 top-4 z-10 flex justify-center">
                <toggle
                @clicked='susbscribe'
                :user_id='subscriber.id'
                :enabled="subscriber.is_sub"
                textin='Подписаться' textout='Отписаться' />
            </div>
            <div class="absolute inset-x-0 bottom-4 z-10 flex justify-center">
                <div class="flex flex-col items-center">
                    <inertia-link :href="route('profile.user', subscriber.username)" class="block flex-shrink-0">
                        <user-avatar :user='subscriber' size='small' class="border border-white shadow-classic h-20 w-20  text-lg" />
                    </inertia-link>
                    <inertia-link :href="route('profile.user', subscriber.username)" class="mt-2 block text-white text-sm text-center">
                        <p>{{subscriber.name}}</p>
                        <p class="text-xs">{{subscriber.username}}</p>
                    </inertia-link>
                </div>
            </div>
            <div class="gradient-profile relative overflow-hidden">
                <user-banner class="w-full h-72 bg-indigo-300" :user='subscriber' size='banner' />
            </div>
        </div>
    </div>

    </div>
    <div v-show="subscribers.length == 0">
        <p class=" text-center md:text-2xl text-gray-light">Пользователи не найдены</p>
    </div>

</div>

</template>

<script>
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
import ProfileHeader from '@/Shared/Partials/ProfileHeader'
import ProfileMenu from '@/Shared/Partials/ProfileMenu'
import UserAvatar from '@/Shared/Misc/UserAvatar'
import UserBanner from '@/Shared/Misc/UserBanner'
import Toggle from '@/Shared/Form/Toggle'
import pickBy from 'lodash/pickBy';
import throttle from 'lodash/throttle';
import { Inertia } from "@inertiajs/inertia";

export default {
  layout: Layout,
  components: {
    MetaHead,
    Toggle,
    UserAvatar,
    UserBanner,
    ProfileHeader,
    ProfileMenu,
  },
  props: {
    user: Object,
    subscribers: Array,
    counts: Object,
    filters: Object,
  },
  data() {
    return {
      form: {
            search: this.filters.search,
            sub: this.filters.sub,
      },
    }
  },
  watch: {
    form: {
      handler: throttle(function() {
        let query = pickBy(this.form)
        const params = Object.keys(query).length ? query : { remember: 'forget' };

        const url = route('profile.subs', this.user.username);
         Inertia.get(url, params, { replace: true, preserveScroll: true, preserveState: true } )
      }, 300),
      deep: true,
    },
  },


    methods:{
        resetSearch(){
            this.form.search = '';
            this.form.sub = '';
        },
       susbscribe(user_id)
        {
            Inertia.post(route('users.subs', user_id), {}, { preserveScroll: true, preserveState: true })
        },
    }

}
</script>
