

<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="border-b border-indigo-300">
            <div class="py-5 px-4 2xl:px-28">
              <a rel="noopener noreferrer nofollow" target="_blank"
                 href="https://yoomoney.ru/pay/page?id=526623"
              >
                <svg class="h-10 mb-5" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 1440 320"
                ><defs></defs><path fill="#fff" d="M1265.12,160.92c0-39.25-29.7-71-71.65-71-41.12,0-70.4,30.53-70.4,72.48,0,42.16,30.11,72.9,73.31,72.9,27.41,0,50.46-12.26,64.79-37.18l-29.07-13.5c-6.85,12.46-21.81,20.56-35.72,20.56-17.65,0-38-13.29-39.25-31.77h106.95A77.88,77.88,0,0,0,1265.12,160.92Zm-107.37-12c2.5-18.69,15.37-30.94,35.93-30.94,20.35,0,32.81,12,34.47,30.94Z" /><path fill="#fff" d="M864.79,89.89c-42.16,0-72.06,30.33-72.06,73.11,0,42.36,29.9,72.27,72.48,72.27,42.78,0,72.68-29.91,72.68-71.65C937.89,120.63,907.16,89.89,864.79,89.89Zm.42,113.6c-21.19,0-34.27-15.78-34.27-40.29,0-24.92,13.29-41.95,34.27-41.95,21.18,0,34.47,16.82,34.47,41.95C899.68,187.92,886.6,203.49,865.21,203.49Z" /><path fill="#fff" d="M714.67,89.93c-17.27,0-30.28,5.9-43.29,20.53h-4.27c-8.74-13.21-23-20.53-39-20.53A50.44,50.44,0,0,0,587,110.46h-4.27l-.21-.2V92.78H546.78V232.22H585.4V160.46c0-23.17,9.76-36.79,26.63-36.79,15.65,0,25.81,11.59,25.81,29.27v79.28h38.82V160.46c0-23,9.76-36.79,26.84-36.79,15.44,0,25.4,11.59,25.4,29.48v79.07h38.83V148.47C767.73,112.09,748.21,89.93,714.67,89.93Z" /><path fill="#fff" d="M1351,183.86h-2.76c0-2.48-16.84-46.64-27.88-74l-6.9-17.11h-38.91l55.2,139.93L1308,286h38.64l79.49-193.2H1387.2l-6.35,14.63-21.53,53.27C1353.25,175.58,1350.76,182.48,1351,183.86Z" /><path fill="#fff" d="M1045,89.93c-17.28,0-32.12,7.52-42.08,20.94h-4.07l-.4-.2V92.78H962.69V232.22h38.62V160.87c0-22.76,11-37,29.07-37,16.87,0,29.27,12.6,29.27,32.52v75.82h38.62V148.07C1098.27,113.92,1075.91,89.93,1045,89.93Z" /><path fill="#8b3ffd" d="M284.49,10C201.05,10,134,77.5,134,160c0,83.18,67.71,150,150.47,150S435,242.5,435,160,367.25,10,284.49,10Zm0,205.91c-30.78,0-56.08-25.23-56.08-55.91s25.3-55.91,56.08-55.91,56.09,25.23,56.09,55.91C339.89,190.68,315.27,215.91,284.49,215.91Z" /><path fill="#8b3ffd" d="M134,53.58V271.76H80.68L12.28,53.58Z" /></svg>
              </a>

              <form method="GET" class="flex"
                    action="/actions-to-payments"
              >
                <input v-model="sum" type="number"
                       name="sum"
                       placeholder="Введите сумму"
                       class="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"
                />
                <button type="submit" class="ml-5 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-pink focus:outline-none">
                  Пополнить
                </button>
              </form>
              <p v-show="sum" class="text-white mt-1">
                ИТОГО + 3.5% комиссия сервиса yoomoney = {{ amount }}
              </p>
            </div>

            <div class="flex justify-between px-4 2xl:px-28 my-4 lg:my-8">
              <div class="flex flex-col text-white">
                <span class="text-lg">Баланс:</span>
                <span class="text-3xl">{{ $page.props.balance }}</span>
              </div>
              <inertia-link :href="route('setting.payouts')" type="button"
                            class="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"
              >
                Вывести
              </inertia-link>
            </div>
            <div class="text-white flex justify-end gap-3 flex-wrap pb-2 px-4 2xl:px-28">
              <div class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="16"
                     height="16" viewBox="0 0 24 24"
                     fill="none" stroke="currentColor"
                     stroke-width="2" stroke-linecap="round"
                     stroke-linejoin="round" class="feather feather-check-square"
                ><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                Ознакомлен:
              </div>
              <p>
                <a class="underline" rel="noopener noreferrer nofollow"
                   target="_blank"
                   href="https://yoomoney.ru/pay/page?id=526623"
                >Yoomoney</a>
              </p>
              <inertia-link class="underline" :href="route('setting.tarif')">
                Тарифы
              </inertia-link>
            </div>
          </div>

          <div v-if="pointLists.length" class="my-4 lg:my-8">
            <div class="py-4 px-4 2xl:px-28  md:text-lg text-white">
              История операций:
              <!-- <button class="text-xs" @click="testPaid">
                Пополнить
              </button> -->
            </div>
            <div class="divide-y divide-indigo-300 ">
              <InfinityScroll :node-element="lastNodeLement" :next-cursor="nextCursor"
                              @fromPagination="putFromPagination"
              >
                <div v-for="point in pointLists" :key="point.id"
                     :ref="el => { if (el && point.id === lastElementID) lastNodeLement = el }"
                     class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12"
                >
                  <div class="col-span-5 flex items-center">
                    <div class="flex-shrink-0 mr-3 lg:mr-8">
                      <svg :class="[point.direction == 2 ? 'text-white rotate-180' : point.direction == 0 ? 'text-green rotate-90' : 'text-red -rotate-90', 'transform w-8 h-8']">
                        <use xlink:href="#arrow-up-circle"></use>
                      </svg>
                    </div>

                    <div class="flex flex-col">
                      <p class="truncate text-base lg:text-lg font-semibold text-gray">
                        {{ point.date }}
                      </p>
                      <p class="truncate lg:mt-1 text-base text-gray-light">
                        {{ point.time }}
                      </p>
                    </div>
                  </div>
                  <div class="col-span-2 text-left lg:text-center text-white xl:text-xl font-semibold">
                    {{ point.point }}
                  </div>
                  <div class="col-span-5 text-left lg:text-right text-gray-light xl:text-lg">
                    {{ point.type }}

                    <div v-if="point.direction == 2">
                      <button class="text-green underline" @click="checkPaid(point.id)">
                        Проверить оплату
                      </button>
                    </div>
                  </div>
                </div>
              </InfinityScroll>
            </div>
          </div>
          <div v-else class="py-4 px-4 2xl:px-28  md:text-lg text-gray-light">
            Нет данных
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Inertia } from '@inertiajs/inertia'
import Layout from '@/Shared/Layout.vue'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import InfinityScroll from '@/Shared/Misc/InfinityScroll.vue'

export default {
    components: {
        MetaHead,
        SettingsMenu,
        InfinityScroll,
    },
    layout: Layout,
    props: {
        nextCursor: String,
        points: Array,
    },

    setup() {
        const containerRef = ref(null)
        return {
            lastNodeLement: containerRef,
        }
    },

    data() {
        return {
            pointLists: [],
            sum: null,
        }
    },

    computed: {
        amount(){
            return ((Math.abs(this.sum) * 0.035) + Math.abs(this.sum)).toFixed(1)
        },
        lastElementID() {
            return this.pointLists[this.pointLists.length - 1]?.id
        },
    },

    watch: {
        points(points){
            this.pointLists = points
        }
    },

    mounted() {
        this.pointLists = this.points
    },

    methods: {

        putFromPagination(lists) {
            for (let list of lists) {
                this.pointLists.push(list)
            }
        },
        checkPaid(id) {
            Inertia.post(route('payouts.checkPointPay', id), {
                preserveScroll: true,
                preserveState: true,
            })

        },
    },
}
</script>
