@push('css')
<style>
    .gsi-material-button {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -webkit-appearance: none;
        background-color: WHITE;
        background-image: none;
        border: 1px solid #DDDDDD;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #1f1f1f;
        cursor: pointer;
        font-family: 'Roboto', arial, sans-serif;
        font-size: 14px;
        height: 34px;
        letter-spacing: 0.25px;
        outline: none;
        overflow: hidden;
        padding: 0 12px;
        position: relative;
        text-align: center;
        -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
        transition: background-color .218s, border-color .218s, box-shadow .218s;
        vertical-align: middle;
        white-space: nowrap;
        width: auto;
        max-width: 400px;
        min-width: min-content;
    }

    .gsi-material-button .gsi-material-button-icon {
        height: 20px;
        margin-right: 12px;
        min-width: 20px;
        width: 20px;
    }

    .gsi-material-button .gsi-material-button-content-wrapper {
        -webkit-align-items: center;
        align-items: center;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: 100%;
        justify-content: space-between;
        position: relative;
        width: 100%;
    }

    .gsi-material-button .gsi-material-button-contents {
        -webkit-flex-grow: 1;
        flex-grow: 1;
        font-family: 'Roboto', arial, sans-serif;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: top;
    }

    .gsi-material-button .gsi-material-button-state {
        -webkit-transition: opacity .218s;
        transition: opacity .218s;
        bottom: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .gsi-material-button:disabled {
        cursor: default;
        background-color: #ffffff61;
        border-color: #1f1f1f1f;
    }

    .gsi-material-button:disabled .gsi-material-button-contents {
        opacity: 38%;
    }

    .gsi-material-button:disabled .gsi-material-button-icon {
        opacity: 38%;
    }

    .gsi-material-button:not(:disabled):active .gsi-material-button-state,
    .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
        background-color: #303030;
        opacity: 12%;
    }

    /* .gsi-material-button:not(:disabled):hover {
        -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    }

    .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
        background-color: #303030;
        opacity: 8%;
    } */

    .tab-setting-google-calendar .tab-header .active {
        background: #fff !important;
        border-bottom: 3px solid #08bf5a;
    }

    .tab-setting-google-calendar .tab-header .active button {
        color: #08bf5a;
    }

    .tab-setting-google-calendar li.active {
        background: #fff !important;
        border-bottom: 3px solid #08bf5a;
    }

    .tab-setting-google-calendar li.active button {
        color: #08BF5A;
        font-weight: 600 !important;
    }

    .table-staff-google tr th {
        background: #FFFFFF !important;
        color: #222222;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        border: none !important;
    }

    .table-staff-google tr td {
        border: none !important;
    }

    .table-google-sync tr th {
        background: #F8F8F8 !important;
        color: #222222;
        font-size: 16px;
        font-weight: 300;
        border: none !important;
    }

    .table-google-sync tr td {
        border-top: none !important;
        border-bottom: 1px solid #DDDDDD !important;
        font-weight: 300;
        color: #222222;
        font-size: 14px;
    }

    .change-google-link input:checked + label {
        color: #08BF5A;
        font-weight: 600;
    }

    .change-google-link {
        cursor: pointer;
    }

    .change-google-link input:checked + .custom-checkbox::before {
        background-color: #08BF5A;
        outline: 1px solid #08BF5A;
        width: 14px;
        height: 14px;
        left: 2px;
    }

    .change-google-link .custom-checkbox::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 0;
        width: 16px;
        height: 16px;
        border-radius: 16px;
        border: 1px solid #DDDDDD;
        background-color: #FFFFFF;
    }

    .change-google-link .custom-checkbox {
        padding-left: 30px;
        position: relative;
        display: block;
        width: 100%;
        border: none;
    }

    .toast-close {
        background: #E0E0E0 !important;
        margin-left: 38px !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 26px !important;
    }

    .toastify-bottom {
        bottom: 230px !important;
    }

    #table-history-sync .pagination {
        text-align: right;
        display: block;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #table-history-sync .pagination ul {
        list-style: none;
        display: flex;
        align-items: center;
    }
    #table-history-sync .pagination ul .disabled {
        cursor: not-allowed;
    }

    #table-history-sync .pagination ul .active {
        border: 1px solid #4096ff;
        color: #4096ff;
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    #table-history-sync .pagination ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        width: 30px;
        height: 30px;
    }
    #table-history-sync .pagination ul li:hover{
        background-color: #0003030f;
        border-radius: 5px;
    }
    
</style>
@endpush
<div class="content">
    <label class="mb-[8px] text-[20px] font-semibold block text-[#222222]">Googleカレンダー連携</label>
    <span class="text-[#222222] text-[14px]">エルメ上の予約とGoogleカレンダーのスケジュールを相互に連携するための設定です。</span>
    <div>
        <div class="tab-header mt-[22px] tab-setting-google-calendar">
            <ul class="flex flex-wrap -mb-[17px] font-light" style="border-bottom: 1px solid #DDDDDD">
                <li class="active mr-[30px]" id="google-sync-history">
                    <button type="button"
                            @click="checkLinkedGoogleCalendar"
                            class="inline-block py-4 px-2 rounded-t-lg hover:opacity-70 text-[16px] text-[#888888]"
                            data-toggle="tab" href="#google-sync-history-content">データ同期履歴
                    </button>
                </li>
                <li class="mr-[30px]" id="setting-google">
                    <button type="button"
                            class="inline-block py-4 px-2 rounded-t-lg hover:opacity-70 text-[16px] text-[#888888]"
                            data-toggle="tab" href="#setting-google-content">連携設定
                    </button>
                </li>
                <li class="mr-[30px]" id="setting-google">
                    <button type="button"
                            class="inline-block py-4 px-2 rounded-t-lg hover:opacity-70 text-[16px] text-[#888888]"
                            data-toggle="tab" href="#setting-google-free-time">前後の空き時間の合算
                    </button>
                </li>
            </ul>
            <div class="tab-content">
                <div class="active tab-pane fade in mt-[50px]" id="google-sync-history-content">
                    <div v-show="!is_linked_google_calendar" class="flex items-center w-[550px] h-[70px] rounded-[3px] border border-solid border-[#F44336] py-[10px] pl-[25px]">
                        <div class="mr-[15px] w-[20px] h-[20px] bg-[#F44336] rounded-[20px] leading-[20px] text-center">
                            <i class="text-[#FFFFFF] text-[12px] fal
                    fa-info"></i>
                        </div>
                        <div>
                            <h3 class="text-[16px] text-[#F44336] !font-semibold">Google連携が完了していません</h3>
                            <div class="mt-[5px]">
                                <a href="" @click.prevent="redirectTab('#setting-google', 'setting_google_link')" class="text-[16px] text-[#5799DB] font-light
                                underline">連携設定</a><span class="text-[16px]
                            text-[#222222] font-light">よりGoogleカレンダー連携設定を完了させてください。</span>
                            </div>
                        </div>
                    </div>

                    <div v-show="is_linked_google_calendar" id="wrap-content-linked-google-calendar">
                        <div class="font-[300] text-[14px]">
                            情報は数分ごとに同期されますが、新しいスケジュールが更新された場合のみ履歴に表示されます。
                        </div>
                        <div class="mt-[30px]  ">
                            <div class="flex items-center">
                                <div class="flex items-center justify-between w-[50%] max-w-[500px]">
                                    <div class="flex items-center">
                                        <div class="w-[30px] h-[40px] border border-solid border-[#DDDDDD] flex items-center justify-center	cursor-pointer"
                                            @click="prevDateSyncGoogleCalendar"
                                        >
                                            <i class="fas fa-caret-left text-[#222222] text-[23px]"></i>
                                        </div>
                                        <div class="border border-solid border-[#DDDDDD] h-[40px] w-[170px] mx-[5px] pl-[20px] flex items-center cursor-pointer relative c-input-date">
                                            <i class="far fa-calendar text-[#222222]"></i>
                                            <span class="pl-[7px]">@{{ moment(google_calendar_sync_date).format('YYYY.MM.DD') }} (@{{ getTextDayOfWeek(google_calendar_sync_date) }})</span>
                                            <input type="date" v-model="google_calendar_sync_date"
                                                @change="getListHistorySyncBookingGoogleCalendar"
                                            >
                                        </div>
                                        <div class="w-[30px] h-[40px] border border-solid border-[#DDDDDD] flex items-center justify-center	cursor-pointer"
                                             @click="nextDateSyncGoogleCalendar"
                                        >
                                            <i class="fas fa-caret-right text-[#222222] text-[23px]"></i>
                                        </div>
                                    </div>

                                    <div class="cursor-pointer	border rounded-[3px] border-solid border-[#DDDDDD] w-[70px] text-center h-[40px] leading-[40px] text-[#888888]"
                                        @click="showModalDownloadCsvSyncGoogleCalendar"
                                    >
                                        CSV
                                    </div>
                                </div>

                                <template v-if="status_download_csv_sync !== ''">
                                    <div v-if="status_download_csv_sync != 2 && type_download_csv_sync_db == 1"
                                            class="ml-[40px] cursor-pointer border rounded-[3px] border-solid border-[#5799DB] w-[120px] text-center h-[40px] leading-[40px] text-[#5799DB]">
                                        <i class="far fa-undo-alt fa-flip-horizontal text-[#5799DB] text-[15px]"></i>
                                        <span>CSV作成中</span>
                                    </div>

                                    <span class="pl-[10px]" v-if="status_download_csv_sync != 2 && type_download_csv_sync_db == 1">
                                        エルメ → Googleカレンダー
                                    </span>

                                    <div v-if="status_download_csv_sync != 2 && type_download_csv_sync_db == 2"
                                         class="ml-[40px] cursor-pointer border rounded-[3px] border-solid border-[#5799DB] w-[120px] text-center h-[40px] leading-[40px] text-[#5799DB]">
                                        <i class="far fa-undo-alt fa-flip-horizontal text-[#5799DB] text-[15px]"></i>
                                        <span>CSV作成中</span>
                                    </div>

                                    <span class="pl-[10px]" v-if="status_download_csv_sync != 2 && type_download_csv_sync_db == 2">
                                        Googleカレンダー → エルメ
                                    </span>

                                    <div
                                            v-if="status_download_csv_sync == 2"
                                            @click="downloadCsvSync"
                                            class="ml-[40px] bg-[#5799DB] cursor-pointer border rounded-[3px] border-solid border-[#5799DB] w-[150px] text-center h-[40px] leading-[40px] text-[#ffffff]">
                                        <i class="far fa-arrow-to-bottom text-[#FFFFFF] text-[15px]"></i>
                                        <span>CSVダウンロード</span>
                                    </div>
                                </template>
                            </div>
                            <div class="w-[50%] max-w-[500px]">
                                <div id="table-history-sync" class="mt-[20px]">
                                    <div class="bg-[#F8F8F8] h-[40px] flex justify-between items-center px-[15px]">
                                        <div>
                                            同期日時
                                        </div>
                                        <div class="text-right text-[#888888]">
                                        </div>
                                    </div>

                                    <template v-for="(item, indexSync) in listSyncBooking">
                                        <div class="px-[15px] h-[40px] flex justify-between items-center border-b border-solid border-[#DDDDDD]">
                                            <div>
                                                <span>@{{ moment(item.created_at).format('YYYY.MM.DD') }}（@{{ getTextDayOfWeek(item.created_at) }}）</span>
                                                <span class="pl-[28px]">@{{ moment(item.created_at).format('HH:mm') }}</span>
                                                <template v-if="indexSync == 0">
                                                    <span class="px-[15px]">最新</span>
                                                    <span class="relative group">
                                                        <i class="fas fa-info-circle text-[#888888] text-[15px] text-[#888888]"></i>
                                                        <div class="absolute z-10 top-[-65px] right-[-225px] w-[400px] rounded-[5px] shadow-[0px_3px_6px_#00000029] bg-[#FFFFFF] px-[16px] py-[10px] hidden group-hover:!block">
                                                            <span>最新の同期日時のみ、新しいスケジュールの更新がない場合も表示されます。</span>
                                                        </div>
                                                    </span>
                                                </template>
                                                <template v-else>
                                                    <span v-if="item.status == 4" class="px-[15px] text-[#F44336]">予約変更を検出 </span>
                                                    <template v-if="item.status == 3">
                                                        <span class="text-[#F44336] px-[15px]">手動削除を検出</span>
                                                        <span class="relative group">
                                                        <i class="fas fa-info-circle text-[#888888] text-[15px] text-[#F44336]"></i>
                                                        <div class="absolute z-10 top-[-145px] right-[-225px] w-[400px] rounded-[5px] shadow-[0px_3px_6px_#00000029] bg-[#FFFFFF] px-[16px] py-[10px] hidden group-hover:!block">
                                                            <span>Googleカレンダー上でエルメから連携されたスケジュールが削除されました。</span>
                                                            <span class="text-[#F44336]">エルメ上の予約が変更・キャンセルされても、Googleカレンダー上のスケジュールには反映されません。</span>
                                                            <span>（このスケジュールはGoogleカレンダー上のゴミ箱から復元しても、元のエルメ上の予約とは紐づきません。）</span>
                                                        </div>
                                                    </span>
                                                    </template>
                                                </template>

                                            </div>
                                            <div class="text-right">
                                                <span class="text-[#5799DB] text-[14px] font-[600] underline cursor-pointer"
                                                      @click="showModalHistorySyncGoogleCalendar(item.id, item.created_at)"
                                                >詳細</span>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="pagination mb-[30px] mt-[30px]">
                                        <ul>
                                            <li class="cursor-pointer"
                                                :class="paginationHistory.pageNumber == 1 ? 'disabled' : ''"
                                                @click="previousPageHistorySync"
                                            >
                                            <svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg>
                                            </li>
                                            <li class="mx-[8px]"
                                                v-for="number in visiblePages"
                                                :class="paginationHistory.pageNumber == number ? 'active' : ''"
                                                @click="changePageHistorySync(number)"
                                            >
                                                @{{ number }}
                                            </li>
                                            <li class="cursor-pointer"
                                                :class="(paginationHistory.pageNumber == paginationHistory.totalPage || paginationHistory.totalPage == 0) ? 'disabled' : ''"
                                                @click="nextPageHistorySync"
                                            >
                                            <svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg>
                                            </li>
                                        </ul>


                                        <select class="form-control my_class w-[100px]" id="paginate_limit" v-model="paginationHistory.limit">
                                                <option value="10">10/ページ</option>
                                                <option value="20">20/ページ</option>
                                                <option value="50">50/ページ</option>
                                                <option value="100">100/ページ</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade in mt-[40px] w-[90%]" id="setting-google-content">
                    <template v-if="!showDetailGoogleSync">
                        <div class="text-[#222222] text-[16px] !font-semibold mt-[15px]">連携設定</div>
                        <div class="text-[16px] text-[#222222] font-light mt-[10px]">「Sign in with
                            Google」ボタンから連携したいGoogleアカウントにログインしてください。
                        </div>

                        <table class="table table-staff-google mt-[10px]">
                            <thead>
                            <tr>
                                <th scope="col" class="w-[300px]">スタッフ</th>
                                <th scope="col" class="w-[350px]">連携済みのマイカレンダー</th>
                                <th scope="col" class="min-w-[70px]"></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in listStaffs">
                                <td>
                                    <div class="flex justify-between items-center">
                                        <div v-if="item.staff_id != 0" class="flex gap-2 items-center px-[10px] text-left w-[260px] h-[40px]
                                    rounded-[3px] !bg-[#F8F8F8] leading-[40px]">
                                            <img class="w-[25px] h-[25px] rounded-[25px]"
                                                 :src="item.staff_image ? (item.staff_image.includes('http') ? item.staff_image : '{{ env('URL_SERVER_MEDIA') }}' + item.staff_image) : '/images/blank_avatar.png'"
                                                 alt="">
                                            <span>@{{ item.staff_system_name ? item.staff_system_name : item.staff_name }}</span>
                                        </div>
                                        <div v-else class="px-[10px] text-left w-[260px] h-[40px] rounded-[3px] !bg-[#F8F8F8] leading-[40px]">
                                            @{{ item.staff_system_name ? item.staff_system_name : item.staff_name }}
                                        </div>
                                        <i class="text-[24px] text-[#888888] fas fa-caret-right"></i>
                                    </div>
                                </td>
                                <td>
                                    <div v-if="item.google_calendar_id && item.status_connect_gg_calendar == 1" class="cursor-pointer hover:opacity-70 w-[340px] px-[10px] overflow-hidden
                                    h-[40px] rounded-[3px]
                                    border
                                    border-solid
                                border-[#DDDDDD] leading-[40px] text-center bg-[#F8F8F8]">
                                        <span>@{{ item.google_calendar_name ? item.google_calendar_name : (item.google_content ? item.google_content[0].summary : '')
                                            }}</span>
                                    </div>
                                    <div v-else-if="item.google_calendar_id && item.status_connect_gg_calendar == 0"  class="flex items-center gap-2">
                                        <a @click.prevent="redirectGoogle('{{ env('DOMAIN_WEB_ADMIN') }}', item)" href="">
                                            <img class="!w-[134px] !h-[30px]" src="/images/web_light_rd_SI.png">
                                        </a>
                                        <span class="text-[16px] text-[#F44336] !font-[600] font-light tracking-0">再連携する</span>
                                    </div>
                                    <div class="flex items-center gap-2" v-else>
                                        <a @click.prevent="redirectGoogle('{{ env('DOMAIN_WEB_ADMIN') }}', item)" href="">
                                            <img class="!w-[134px] !h-[30px]" src="/images/web_light_rd_SI.png">
                                        </a>
                                        <span class="text-[14px] text-[#222222] font-light tracking-0">Googleアカウントを連携する</span>
                                    </div>
                                </td>
                                <td class="text-left">
                                    <div @click="openModalChangeLinkGoogle(item)"
                                         v-show="item.google_calendar_id && item.status_connect_gg_calendar == 1"
                                         class="hover:opacity-70 cursor-pointer border border-solid
                                            border-[#DDDDDD]
                                            w-[30px]
                                            h-[30px] flex items-center justify-center
                                            relative
                                    ">
                                        <i class="text-[18px] fas fa-cog"></i>
                                        <div v-show="item.is_display_title == 1" class="absolute w-[10px] h-[10px] bg-[#F44336] rounded-full top-[-5px] right-[-5px]"></div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </template>
                    <template v-else>
                        @include('basic.calendar_salon.tabs.setting_reservation.setting_detail_google_calendar')
                    </template>
                </div>
                <div class="tab-pane fade in mt-[40px] w-[90%]" id="setting-google-free-time">
                    <h3 class="font-[600] font-[14px] mb-3">前後の空き時間の合算</h3>
                    <p>予約前後の空き時間を予約時間と合算してGoogleカレンダーに連携する</p>
                    <div class="flex items-center mt-[30px]">
                        <div class="flex items-center setting-display-course mb-[10px] mr-[30px]">
                            <input v-model="is_sync_free_time" type="radio" value="1" id="is_sync_free_time" class="w-[16px] h-[16px] !m-0 !mr-[7px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]"> 
                            <label for="is_sync_free_time" class="text-[14px] font-light leading-[22px] text-[#888888]">利用する</label>
                        </div>
                        <div class="flex items-center setting-display-course mb-[10px]">
                            <input v-model="is_sync_free_time" type="radio" value="0" id="is_not_sync_free_time" class="w-[16px] h-[16px] !m-0 !mr-[7px] bg-[#FFFFFF] border border-solid border-[#DDDDDD]"> 
                            <label for="is_not_sync_free_time" class="text-[14px] font-light leading-[22px] text-[#888888]">利用しない</label>
                        </div>
                    </div>
                    <button @click="saveSettingSyncFreeTime()" type="button" class="hover:opacity-70 text-[#08BF5A] text-[16px] font-light bg-[#FFFFFF] rounded-[3px] border border-solid border-[#08BF5A] w-[150px] h-[40px] text-center leading-[40px] my-[30px]">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>