@extends('layout.admin.main')
@section('title','契約情報・領収書（一覧）')
@push('css')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<link rel="stylesheet" href="/_assets/commons/css/list.css?v={{config("sns-line.version")}}" type="text/css">
<link rel="stylesheet" href="/_assets/commons/css/search_box.css?v={{config("sns-line.version")}}" type="text/css">
<link rel="stylesheet" href="/_assets/commons/css/lme_custom.css?v={{config("sns-line.version")}}" type="text/css">
<link rel="stylesheet" href="/_assets/commons/css/pagination.css?v={{config("sns-line.version")}}" type="text/css">
<link rel="stylesheet" href="/_assets/modules/bill/css/index.css?v={{config("sns-line.version")}}" type="text/css">
@endpush
@section('content')
<div id="loading-clarity"></div>
<section id="billable-list-page" v-cloak>
    <div id="header-page" class="flex-space-between">
        <div class="flex-align-items">
            <div class="title">契約情報・領収書</div>
            <div class="btn-note">
                <button @click="openModalNoteContract()">
                    ご契約に関する注意事項
                </button>
            </div>
        </div>
        <div class="btn-bill-create flex-align-items">
            <div class="btn-note">
                <button @click="clickBtnDisconnectHistory()">
                    接続解除履歴
                </button>
            </div>
            <button class="button-ripple button01" @click="clickBtnPaymentHistory()">
                <svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <foreignObject x="-10" y="-10" width="31" height="34">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                            style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_2429_13525_clip_path);height:100%;width:100%"></div>
                    </foreignObject>
                    <path data-figma-bg-blur-radius="10"
                        d="M10.5003 14.0004H0.5004C0.22448 14.0004 0 13.7759 0 13.5V0.5004C0 0.22448 0.22448 0 0.5004 0H7.1379C7.26889 0 7.39748 0.05347 7.4907 0.1467L10.8531 3.5091C10.9463 3.60232 10.9998 3.73157 10.9998 3.8637V13.5C10.9998 13.7759 10.7757 14.0004 10.5003 14.0004ZM1.125 1.125V12.8754H9.8748V5.1561H6.4998C6.13803 5.1561 5.8437 4.86177 5.8437 4.5V1.125H1.125ZM6.9066 1.1529V4.0941H9.8469L6.9066 1.1529ZM5.3748 9.6561H2.5002C2.43122 9.6561 2.3751 9.59998 2.3751 9.531V8.7813C2.3751 8.71232 2.43122 8.6562 2.5002 8.6562H5.3748C5.44378 8.6562 5.4999 8.71232 5.4999 8.7813V9.531C5.4999 9.59998 5.44378 9.6561 5.3748 9.6561ZM8.4996 7.5312H2.5002C2.43122 7.5312 2.3751 7.47508 2.3751 7.4061V6.6564C2.3751 6.58742 2.43122 6.5313 2.5002 6.5313H8.4996C8.56858 6.5313 8.6247 6.58742 8.6247 6.6564V7.4061C8.6247 7.47508 8.56858 7.5312 8.4996 7.5312Z"
                        fill="white" />
                    <defs>
                        <clipPath id="bgblur_0_2429_13525_clip_path" transform="translate(10 10)">
                            <path d="M10.5003 14.0004H0.5004C0.22448 14.0004 0 13.7759 0 13.5V0.5004C0 0.22448 0.22448 0 0.5004 0H7.1379C7.26889 0 7.39748 0.05347 7.4907 0.1467L10.8531 3.5091C10.9463 3.60232 10.9998 3.73157 10.9998 3.8637V13.5C10.9998 13.7759 10.7757 14.0004 10.5003 14.0004ZM1.125 1.125V12.8754H9.8748V5.1561H6.4998C6.13803 5.1561 5.8437 4.86177 5.8437 4.5V1.125H1.125ZM6.9066 1.1529V4.0941H9.8469L6.9066 1.1529ZM5.3748 9.6561H2.5002C2.43122 9.6561 2.3751 9.59998 2.3751 9.531V8.7813C2.3751 8.71232 2.43122 8.6562 2.5002 8.6562H5.3748C5.44378 8.6562 5.4999 8.71232 5.4999 8.7813V9.531C5.4999 9.59998 5.44378 9.6561 5.3748 9.6561ZM8.4996 7.5312H2.5002C2.43122 7.5312 2.3751 7.47508 2.3751 7.4061V6.6564C2.3751 6.58742 2.43122 6.5313 2.5002 6.5313H8.4996C8.56858 6.5313 8.6247 6.58742 8.6247 6.6564V7.4061C8.6247 7.47508 8.56858 7.5312 8.4996 7.5312Z" />
                        </clipPath>
                    </defs>
                </svg>

                <div style="margin-top: 2px;">
                    領収書の発行
                </div>
            </button>
        </div>
    </div>

    <div class="overdue-section" v-if="overdue_data.length > 0 || maxFriendDataContract.length > 0 || maxFriendErrorDataContract.length > 0">
        <div class="item item_max_friend" v-for="(maxFriend, index) in maxFriendDataContract">
            <div class="flex-center" v-if="checkBotUpgrade(maxFriend) == 2">
                <div class="flex-align-items warning-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <foreignObject x="-8.50073" y="-7.1875" width="41.001" height="38.3748">
                            <div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_9_814_clip_path);height:100%;width:100%"></div>
                        </foreignObject>
                        <path data-figma-bg-blur-radius="10" d="M11.9993 3.3125C12.0898 3.3125 12.1684 3.35672 12.2161 3.43848V3.4375L21.9651 20.3125C22.0117 20.3933 22.0117 20.4832 21.9661 20.5625C21.9202 20.6418 21.8425 20.6875 21.7493 20.6875H2.24927C2.15763 20.6874 2.0805 20.6427 2.03442 20.5635C1.98813 20.4835 1.98792 20.3925 2.03442 20.3115L2.03345 20.3105L11.7834 3.4375L11.7844 3.43555C11.8285 3.35824 11.9045 3.31255 11.9993 3.3125ZM11.5667 5.37305L3.60278 19.1582L3.16919 19.9082H20.8303L20.3977 19.1582L12.4319 5.37305L11.9993 4.62402L11.5667 5.37305ZM11.9993 16.25C12.3438 16.25 12.625 16.5305 12.6252 16.875C12.6252 17.2184 12.3445 17.5 11.9993 17.5C11.6554 17.4999 11.3752 17.2189 11.3752 16.875C11.3755 16.53 11.6561 16.2501 11.9993 16.25ZM12.2502 10.0625V13.75H11.7502V10.0625H12.2502Z" fill="#222222" stroke="#FEA600" />
                        <defs>
                            <clipPath id="bgblur_0_9_814_clip_path" transform="translate(8.50073 7.1875)">
                                <path d="M11.9993 3.3125C12.0898 3.3125 12.1684 3.35672 12.2161 3.43848V3.4375L21.9651 20.3125C22.0117 20.3933 22.0117 20.4832 21.9661 20.5625C21.9202 20.6418 21.8425 20.6875 21.7493 20.6875H2.24927C2.15763 20.6874 2.0805 20.6427 2.03442 20.5635C1.98813 20.4835 1.98792 20.3925 2.03442 20.3115L2.03345 20.3105L11.7834 3.4375L11.7844 3.43555C11.8285 3.35824 11.9045 3.31255 11.9993 3.3125ZM11.5667 5.37305L3.60278 19.1582L3.16919 19.9082H20.8303L20.3977 19.1582L12.4319 5.37305L11.9993 4.62402L11.5667 5.37305ZM11.9993 16.25C12.3438 16.25 12.625 16.5305 12.6252 16.875C12.6252 17.2184 12.3445 17.5 11.9993 17.5C11.6554 17.4999 11.3752 17.2189 11.3752 16.875C11.3755 16.53 11.6561 16.2501 11.9993 16.25ZM12.2502 10.0625V13.75H11.7502V10.0625H12.2502Z" />
                            </clipPath>
                        </defs>
                    </svg>
                    <span class="txt_max">従量課金決済が必要です</span>

                </div>
                <div class="flex-align-items contract-info">
                    <img class="avatar" @error="setAltImg" v-if="!maxFriend.bot_image" src="/images/8.png">
                    <img class="avatar" @error="setAltImg"
                        v-if="maxFriend.bot_image && maxFriend.bot_image.includes('profile.line-scdn.net')"
                        :src="maxFriend.bot_image">
                    <img class="avatar" @error="setAltImg"
                        v-if="maxFriend.bot_image && maxFriend.bot_image.includes('profile.line-scdn.net') === false"
                        :src="'