@extends('layout.admin_v2.main')

@section('title')
    返金管理
@endsection

@push('css')
    <link rel="stylesheet" href="/css/tippy/tippy.css">
    <link rel="stylesheet" href="/css/admin/account.css?v={{config("sns-line.version")}}">
    <script src="/js/tailwind/browser@4.js"></script>
@endpush
@section('content')
    <div class="bg-[#F5F7FA] !p-[20px] flex flex-col gap-[20px] content-fit-vh" id="vue-element" @click="showYearDropdown = false" v-cloak>
        <div class="flex items-center gap-[20px]">
            <span class="text-[#222222] text-[18px] font-[600]">返金管理</span>
        </div>
        <div class="main-panel flex-to-block flex-1 gap-[20px]">
            <div class="rounded-[20px] bg-[#FFFFFF] block-500 min-w-0">
                <div class="!h-[100%] !p-[20px] flex flex-col justify-between gap-[10px]">
                    <div class="flex flex-col justify-between gap-[10px]">
                        <div class="left-header flex items-center gap-[10px]">
                            <div class="flex items-center gap-[5px]">
                                <span @click="prevYear" class="bg-[#E0E0E0] cursor-pointer hover:bg-[#888888] flex items-center justify-center w-[26px] h-[42px] rounded-[5px] text-[#FFFFFF]">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="arcs">
                                        <path d="M15 18l-6-6 6-6"></path>
                                    </svg>
                                </span>
                                <div class="relative" @click.stop>
                                    <span class="cursor-pointer !border !border-[#E8E8E8]
                                    rounded-[5px] flex items-center justify-center w-[120px] h-[42px]
                                    text-[#222222] text-[14px] font-[300]" @click="toggleYearDropdown">
                                        @{{ selectedYear }}年
                                    </span>
                                    <!-- Dropdown -->
                                    <div v-if="showYearDropdown" class="absolute z-50 top-[46px] left-0 w-[120px]
                                    max-h-[240px] bg-white border border-[#E8E8E8] rounded-[5px] shadow-md overflow-y-auto scroll-custom">
                                        <div v-for="year in yearList" :key="year"
                                             class="!px-[10px] !py-[8px] text-[14px] cursor-pointer hover:bg-[#F0F0F0]"
                                             :class="selectedYear === year ? 'bg-[#F0F0F0]' : ''"
                                             @click="selectYear(year)">
                                            @{{ year }}年
                                        </div>
                                    </div>
                                </div>
                                <span @click="nextYear" class="bg-[#E0E0E0] cursor-pointer hover:bg-[#888888] flex items-center justify-center w-[26px] h-[42px] rounded-[5px] text-[#FFFFFF]">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="arcs">
                                        <path d="M9 18l6-6-6-6"></path>
                                    </svg>
                                </span>
                            </div>
                            <div class="cursor-pointer hover:bg-[#E0E0E0] !border-solid !border-[1px] !border-[#E8E8E8] rounded-[5px] flex items-center justify-center w-[150px] h-[42px]">
                                <a class="!text-[#222222] hover:!text-[#222222] text-[16px] font-[300]" href="{{route("admin.refund-management.refund-in-year")}}">⇄ 年間返金一覧</a>
                            </div>
                        </div>

                        <div class="left-body flex flex-col justify-between">
                            <div class="table-wrapper table-responsive relative scroll-custom" style="max-height: calc(100vh - 300px)">
                                <table class="table-custom-v2">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="min-w-[180px]">年月</th>
                                            <th scope="col" class="min-w-[200px]">返金額合計</th>
                                        </tr>
                                    </thead>
                                    <tbody v-if="list_by_year.length > 0">
                                        <tr v-for="(item,index) in list_by_year" :key="index">
                                            <td>@{{ item.date }}</td>
                                            <td>
                                                <div class="flex items-center justify-end gap-[20px]">
                                                    <span>@{{ item.total_format }}</span>
                                                    <button @click="setListDetail(item)"
                                                            class="cursor-pointer hover:bg-[#5799DB]
                                                    !border-solid !border-[1px] !border-[#5799DB] rounded-[5px]
                                                    flex items-center justify-center gap-[5px] w-[120px] h-[35px]
                                                    !text-[#5799DB] hover:!text-[#FFFFFF] text-[14px] font-[600]
                                                    disabled:!bg-[#F8F8F8] disabled:!border-[#F8F8F8] disabled:!text-[#888888]"
                                                    :disabled="item.total === 0">
                                                        詳細を確認 <span class="!text-[14px]">></span>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tbody v-else>
                                        <tr>
                                            <td class="!text-center no-before border-b-none" colspan="2"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rounded-[20px] bg-[#FFFFFF] flex-1 min-w-0">
                <div class="!h-[100%] !p-[20px] flex flex-col justify-between">
                    <div class="flex flex-col justify-between gap-[10px]">
                        <div class="right-header flex-to-block items-center justify-between">
                            <div class="flex items-center gap-[5px]">
                                <span class="text-[#222222] text-[16px] font-[600]">@{{ month_data.date_title }}</span>
                            </div>
                            <div class="flex-to-block items-center gap-[10px]">
                                <span class="flex !border-b-solid !border-b-[1px] !border-b-[#888888] min-w-[125px] text-[#222222] text-[16px] font-[600] !py-[5px]">
                                    合計 @{{ month_data.total_title }} 円
                                </span>
                                <a href="{{route("admin.refund-management.create")}}"
                                    class="cursor-pointer hover:!bg-[#004B85] !bg-[#5799DB]
                                                    !border-solid !border-[1px] !border-[#5799DB] rounded-[5px]
                                                    flex items-center justify-center gap-[5px] w-[200px] h-[35px]
                                                    !text-[#FFFFFF] text-[16px] font-[600]">
                                    <svg width="15" height="15" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
                                         fill="currentColor">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                        <g id="SVGRepo_iconCarrier">
                                            <title>plus-circle</title>
                                            <desc>Created with Sketch Beta.</desc>
                                            <defs> </defs>
                                            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                                <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-464.000000, -1087.000000)" fill="currentColor">
                                                    <path d="M480,1117 C472.268,1117 466,1110.73 466,1103 C466,1095.27 472.268,1089 480,1089 C487.732,1089 494,1095.27 494,1103 C494,1110.73 487.732,1117 480,1117 L480,1117 Z M480,1087 C471.163,1087 464,1094.16 464,1103 C464,1111.84 471.163,1119 480,1119 C488.837,1119 496,1111.84 496,1103 C496,1094.16 488.837,1087 480,1087 L480,1087 Z M486,1102 L481,1102 L481,1097 C481,1096.45 480.553,1096 480,1096 C479.447,1096 479,1096.45 479,1097 L479,1102 L474,1102 C473.447,1102 473,1102.45 473,1103 C473,1103.55 473.447,1104 474,1104 L479,1104 L479,1109 C479,1109.55 479.447,1110 480,1110 C480.553,1110 481,1109.55 481,1109 L481,1104 L486,1104 C486.553,1104 487,1103.55 487,1103 C487,1102.45 486.553,1102 486,1102 L486,1102 Z" id="plus-circle" sketch:type="MSShapeGroup">
                                                    </path>
                                                </g>
                                            </g>
                                        </g>
                                    </svg>
                                    <span>新規登録</span>
                                </a>
                            </div>
                        </div>

                        <div class="right-body flex flex-col justify-between">
                            <div class="table-wrapper table-responsive relative scroll-custom" style="max-height: calc(100vh - 300px)">
                                <table class="table-custom-v2">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="min-w-[150px]">返金日</th>
                                            <th scope="col" class="min-w-[350px]">主管理者名</th>
                                            <th scope="col" class="min-w-[350px]">LINE公式アカウント名</th>
                                            <th scope="col" class="min-w-[120px]">返金方法</th>
                                            <th scope="col" class="min-w-[120px] !text-center">決済額</th>
                                            <th scope="col" class="min-w-[120px] !text-center">返金額</th>
                                            <th scope="col" class="min-w-[200px]">返金前</th>
                                            <th scope="col" class="min-w-[200px]">返金後</th>
                                            <th scope="col" class="min-w-[150px]">次回請求日</th>
                                            <th scope="col" class="min-w-[180px] !text-center">原因</th>
                                            <th scope="col" class="min-w-[350px]">課金ID</th>
                                        </tr>
                                    </thead>
                                    <tbody v-if="list_detail.length > 0">
                                        <tr v-for="(item,index) in list_detail" :key="index">
                                            <td>@{{ item.date_format }}</td>
                                            <td>
                                                <div class="flex items-center gap-[10px]">
                                                    <div v-if="item.user_image" class="table-avatar !border-solid !border-[1px] !border-[#DDDDDD] rounded-[50%] w-[30px] h-[30px] overflow-hidden">
                                                        <img class="rounded-[50%] w-full h-full object-cover" :src="item.user_image" alt="" @error="setErrorImg">
                                                    </div>
                                                    <div v-else class="w-[30px] h-[30px] flex items-center justify-center rounded-[50%]">
                                                        @include("admin.user-avatar-default")
                                                    </div>

                                                    <a :href="item.url_user_detail" class="!text-[#5799DB] text-[14px] font-[300] !underline line-clamp-1 max-w-[250px]">
                                                        @{{ item.username }}
                                                    </a>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="flex items-center gap-[10px]">
                                                    <div v-if="item.bot_image" class="table-avatar !border-solid !border-[1px] !border-[#DDDDDD] rounded-[50%] w-[30px] h-[30px] overflow-hidden">
                                                        <img class="rounded-[50%] w-full h-full object-cover" :src="item.bot_image" alt="" @error="setErrorImg">
                                                    </div>
                                                    <div v-else class="w-[30px] h-[30px] flex items-center justify-center rounded-[50%]">
                                                        @include("admin.user-avatar-default")
                                                    </div>

                                                    <a v-if="item.url_bot_detail" :href="item.url_bot_detail"
                                                       :class="item.bot_id ? '!text-[#5799DB] !underline' : 'text-[#222222]'"
                                                       class="text-[14px] font-[300] line-clamp-1 max-w-[250px]">
                                                        @{{ item.botname }}
                                                    </a>
                                                    <span v-else
                                                          :class="item.bot_id ? '!text-[#5799DB] !underline' : 'text-[#222222]'"
                                                          class="text-[14px] font-[300] line-clamp-1 max-w-[250px]">
                                                        @{{ item.botname }}
                                                    </span>
                                                </div>
                                            </td>
                                            <td>@{{ item.payment_method }}</td>
                                            <td>
                                                <div class="flex items-center justify-end">
                                                    @{{ item.amount_format }}
                                                </div>
                                            </td>
                                            <td>
                                                <div class="flex items-center justify-end">
                                                    @{{ item.amount_refund_format }}
                                                </div>
                                            </td>
                                            <td>@{{ item.plan_before }}</td>
                                            <td>@{{ item.plan_after }}</td>
                                            <td>@{{ item.next_payment }}</td>
                                            <td>
                                                <div class="flex items-center justify-end gap-[5px]">
                                                    <span>@{{ item.reason }}</span>
                                                    <span @click="previewDetail(item)"
                                                          class="!border-solid !border-[1px] !border-[#DDDDDD]
                                                    hover:bg-[#DDDDDD] rounded-[5px] w-[50px] h-[30px]
                                                    flex items-center justify-center cursor-pointer">
                                                        詳細
                                                    </span>
                                                </div>
                                            </td>
                                            <td>@{{ item.univa_charge_id }}</td>
                                        </tr>
                                    </tbody>
                                    <tbody v-else>
                                        <tr>
                                            <td class="!text-left no-before border-b-none" style="height: 0" colspan="11"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <pagination :pagination="pagination"
                                @change-page="changePage"
                                @change-per-page="changePerPage">
                    </pagination>
                </div>
            </div>
        </div>

        <!-- modal detail -->
        <transition name="modal">
            <div v-if="showModalDetail" class="modal-overlay"> <!-- @click.self="closeModalDetail" -->
                <div class="modal-box flex flex-col gap-[25px] !py-[26px] !px-[20px] !w-[700px]">
                    <div class="flex items-center justify-center relative">
                        <div class="flex items-center gap-[10px]">
                            <span class="text-[#222222] text-[16px] font-[600]">原因詳細</span>
                        </div>
                        <button class="modal-close absolute right-0" @click="closeModalDetail">
                            <span class="flex items-center justify-center w-[25px] h-[25px] hover:text-[#646464] rounded-[50%]">✕</span>
                        </button>
                    </div>
                    <div class="modal-body-v2 flex flex-col gap-[30px] !px-[20px]">
                        <div class="flex flex-col gap-[10px] text-[#222222] text-[14px] font-[600]">
                            <span>原因</span>
                            <div class="font-[300]">
                                @{{ reason_detail.reason }}
                            </div>
                        </div>
                        <div class="flex flex-col gap-[10px] text-[#222222] text-[14px] font-[600]">
                            <span>詳細メモ</span>
                            <div class="font-[300]" style="white-space: pre;text-wrap: auto;word-wrap: break-word">@{{ reason_detail.description }}</div>
                        </div>
                        <div class="text-center">
                            <span @click="closeModalDetail"
                                  class="text-[#888888] text-[14px] font-[300] cursor-pointer underline hover:opacity-75">
                                閉じる
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
@endsection
@push('script')
    <script src="/js/vue2.6.12/vue.js"></script>
    <script src="/js/tippy/popper.min.js"></script>
    <script src="/js/tippy/tippy-bundle.umd.min.js"></script>
    <script src="/js/admin/components/pagination.js"></script>
    <script src="/js/admin/refund/refund.js?v={{config("sns-line.version")}}"></script>
@endpush