@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 flex-1 gap-[20px]">
            <div class="rounded-[20px] bg-[#FFFFFF] 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 hover:bg-[#E0E0E0] !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.index")}}">⇄ 月間返金一覧</a>
                            </div>
                            <div>
                                <div class="search-v2-wrapper relative">
                                    <input v-model="keyword" @keydown.enter="searchKeyword" class="input-v2 !w-[250px] !h-[42px] rounded-[5px] !border !border-[#DDDDDD] !pl-[10px] !pr-[25px]" type="text" placeholder="検索">
                                    <div @click="searchKeyword" class="absolute text-[#888888] top-[13px] right-[10px] cursor-pointer">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                            <g id="SVGRepo_iconCarrier">
                                                <g clip-path="url(#clip0_15_152)">
                                                    <rect width="24" height="24" fill="white"></rect>
                                                    <circle cx="10.5" cy="10.5" r="6.5" stroke="currentColor" stroke-linejoin="round"></circle>
                                                    <path d="M19.6464 20.3536C19.8417 20.5488 20.1583 20.5488 20.3536 20.3536C20.5488 20.1583 20.5488 19.8417 20.3536 19.6464L19.6464 20.3536ZM20.3536 19.6464L15.3536 14.6464L14.6464 15.3536L19.6464 20.3536L20.3536 19.6464Z" fill="currentColor"></path>
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_15_152">
                                                        <rect width="24" height="24" fill="white"></rect>
                                                    </clipPath>
                                                </defs>
                                            </g>
                                        </svg>
                                    </div>
                                </div>
                            </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-[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" colspan="11">
                                                <div v-if="empty_type !== 1" class="flex flex-col items-center justify-center gap-[20px] min-h-[250px]">
                                                    <svg id="Group_3240" data-name="Group 3240" xmlns="http://www.w3.org/2000/svg" width="120" height="77.779" viewBox="0 0 120 77.779">
                                                        <path id="Path_52" data-name="Path 52" d="M101.145,27.855H2.662A2.524,2.524,0,0,1,0,25.5V11.357A2.524,2.524,0,0,1,2.662,9h98.483Z" transform="translate(0 12.212)" fill="#f5f5f7"></path>
                                                        <path id="Path_53" data-name="Path 53" d="M52.248,42.284a5,5,0,0,1-8.525,3.509L27.5,29.571,34.571,22.5,50.793,38.723a4.947,4.947,0,0,1,1.454,3.561" transform="translate(48.897 30.531)" fill="#dce0e6"></path>
                                                        <path id="Path_54" data-name="Path 54" d="M34.785,18l7.761,7.761a2.359,2.359,0,0,1,0,3.333l-8.452,8.452a2.359,2.359,0,0,1-3.333,0L23,29.785Z" transform="translate(42.791 24.425)" fill="#dce0e6"></path>
                                                        <path id="Path_55" data-name="Path 55" d="M66.28,30.64A30.64,30.64,0,1,0,35.64,61.28,30.639,30.639,0,0,0,66.28,30.64" transform="translate(18.366)" fill="#dce0e6"></path>
                                                        <path id="Path_56" data-name="Path 56" d="M55.138,26.569A23.569,23.569,0,1,0,31.569,50.138,23.569,23.569,0,0,0,55.138,26.569" transform="translate(22.437 4.071)" fill="#fff"></path>
                                                        <path id="Path_57" data-name="Path 57" d="M54.5,9H38V27.855H54.5A2.358,2.358,0,0,0,56.855,25.5V11.357A2.358,2.358,0,0,0,54.5,9" transform="translate(63.145 12.212)" fill="#aeb8c2"></path>
                                                        <path id="Path_58" data-name="Path 58" d="M21.071,27.01A8.523,8.523,0,0,1,25.7,19.562a4.714,4.714,0,1,0-6.984-4.132,2.357,2.357,0,1,1-4.714,0,9.43,9.43,0,1,1,13.972,8.261,3.881,3.881,0,0,0-2.187,3.319,2.359,2.359,0,1,1-4.714,0" transform="translate(30.579 8.139)" fill="#dce0e6"></path>
                                                        <path id="Path_59" data-name="Path 59" d="M19.384,22.714a2.357,2.357,0,1,1,2.357-2.357,2.368,2.368,0,0,1-2.357,2.357" transform="translate(34.67 24.425)" fill="#dce0e6"></path>
                                                        <path id="Path_61" data-name="Path 61" d="M18.785,31.714H9.357a2.357,2.357,0,0,1,0-4.714h9.428a2.357,2.357,0,0,1,0,4.714" transform="translate(21.08 36.637)" fill="#f5f5f7"></path>
                                                        <path id="Path_62" data-name="Path 62" d="M18.785,35.714H9.357a2.357,2.357,0,0,1,0-4.714h9.428a2.357,2.357,0,0,1,0,4.714" transform="translate(21.08 42.065)" fill="#f5f5f7"></path>
                                                        <path id="Path_63" data-name="Path 63" d="M25.458,9.771l2.735-2.735A1.193,1.193,0,0,0,26.506,5.35L23.771,8.085,21.036,5.35A1.193,1.193,0,0,0,19.35,7.036l2.735,2.735L19.35,12.506a1.193,1.193,0,0,0,1.687,1.687l2.735-2.735,2.735,2.735a1.193,1.193,0,0,0,1.687-1.687Z" transform="translate(86.801 20.869)" fill="#dce0e6"></path>
                                                    </svg>
                                                    <span class="text-[#888888] !font-[500] !text-[16px]">検索結果がありません</span>
                                                </div>

                                                <div v-else class="flex flex-col items-center justify-center gap-[20px] min-h-[250px]">
                                                    <img class="max-w-[96px]" src="/images/no_data.png" alt="まだデータがありません">
                                                    <span class="!text-[16px] !font-[600] !text-[#888888]">まだデータがありません</span>
                                                </div>
                                            </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-in-year.js?v={{config("sns-line.version")}}"></script>
@endpush