@extends('layout.admin.main')
@section('title', 'ログイン時の二段階認証')
@push('script')
    <script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="/tinymce/langs/ja.js"></script>
    <script src="/js/tailwindcss.js"></script>
    <script src="/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="/plugins/datepicker/locales/bootstrap-datepicker.ja.js"></script>
    <script src="/js/plugins/daterangepicker/daterangepicker.js"></script>
    <script src="/js/plugins/timepicker/bootstrap-timepicker.js"></script>
    <script src="/js/calendar_management/ajax-error.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_management/setting-payment.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/form_answer/vuedraggable.min.js"></script>
@endpush
@push('css')
    <link rel="stylesheet" href="/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="/js/plugins/timepicker/bootstrap-timepicker.css">
    <link rel="stylesheet" href="/js/plugins/daterangepicker/daterangepicker-bs3.css">
    <link rel="stylesheet" href="/css/calendar/calendar_detail.css?v={{config('sns-line.version')}}" type="text/css">
    <link rel="stylesheet" href="/css/calendar/setting-payment.css?v={{config('sns-line.version')}}" type="text/css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <style lang="css">
        body {
            line-height: 1.42857143 !important;
            font-size: 14px;
        }
        i {
            font-family: "Font Awesome 5 Pro" !important;
        }
        
        .today-booking .display-custom .table .row:first-child {
            background: #F5F5F5;
        }

        .today-booking .table > tbody > tr > td {
            border-top: none !important;
        }

        .today-booking .table > thead > tr > td {
            background: #F5F5F5;
            font-size: 16px !important;
        }

        .today-booking .pagination > .active > a {
            color: #5799DB !important;
            background: #FFFFFF !important;
            border: 1px solid #5799DB;
        }

        .today-booking .booking_list li.active button {
            background-color: #08BF5A;
            color: #FFFFFF;
            font-weight: 600;
        }

        .today-booking .my_class {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: url("/images/expand_more.svg") 100% no-repeat #fff;
            background-size: 25px 25px;
            cursor: pointer;
        }

        .today-booking .my_class option {
            cursor: pointer;
            color: #2B2F36 !important;
            font-size: 14px;
        }

        .today-booking .disable {
            color: #DDDDDD !important;
            pointer-events: none;
        }

        .calendar-wrapper .display-custom .table .row .cell {
            cursor: unset !important;
        }

        .booking_status a {
            cursor: unset;
        }
        .cl-switch-lv2 {
        transform: rotate(180deg);
        }

        .cl-switch-lv2>span::before {
            width: 43px;
        }

        .cl-toggle-switch-lv2 {
            margin: 0;
        }
        .cl-switch>input:checked+span::before {
            background-color: #85b8b7;
        }

        .cl-switch>span::before {
            content: "";
            float: right;
            display: inline-block;
            margin: 5px 0 5px 0;
            border-radius: 7px;
            width: 43px;
            height: 14px;
            background-color: #2B2F36;
            opacity: 0.2;
            vertical-align: top;
        }

        .cl-switch>input:checked+span::after {
            background-color: #08BF5A;
            transform: translateX(16px);
            left: -16px;
        }

        .cl-switch>span::after {
            content: "";
            position: absolute;
            top: 2px;
            right: 0;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            background-color: #999999;
            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        }

        .cl-switch>input:checked {
            right: -10px;
            background-color: #85b8b7;
        }

        .cl-switch>input {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            z-index: -1;
            position: absolute;
            right: 6px;
            top: -8px;
            display: block;
            margin: 0;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            background-color: rgb(0, 0, 0, 0.38);
            outline: none;
            opacity: 0;
            transform: scale(1);
            pointer-events: none;
        }
        .heading {
            margin-bottom: 29px;
        }
        .text-green-500 {
            color: #08BF5A !important;
            font-weight: 600 !important;
        }
        .text-green-500-300 {
            color: #08BF5A !important;
            font-weight: 300 !important;
        }
        .leading-normal {
            color: #888888;
        }
        .text-600 {
            font-weight: 600 !important;
            color: #222222 !important
        }
        .pagination>li>a, .pagination>li>span {
            border: 0px;
        }
        .pagination span i {
            color: #2B2F36 !important;
        }.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
            background-color: white;
        }
        .pagination li.disabled {
            opacity: 0.1; 
            pointer-events: none; 
        }

        .pagination li.disabled span {
            color: #ccc;
        }
        tbody tr {
            border-bottom: 1px solid #DDDDDD !important;
        }
        label:after {
            content: ''
        }
    </style>
@endpush
@section('content')
<div id="app">
    <div class="calendar p-[15px]" id="calendar" v-cloak>
        <div class="heading">
            <label class="mb-[9px] text-[20px] font-semibold block text-[#222222]">ログイン時の二段階認証</label>
            <span class="mb-[29px] text-[#222222] text-[14px]" style="font-weight: 300;">ログイン時に登録メールアドレスに認証コードを記載したメールを送信します。</span>
        </div>
    
        <div class="content">
            <span class="text-[#222222] text-[16px] !font-[600]">二段階認証の利用</span>
            <div class="mt-[10px] text-[#222222] !font-[600] text-[16px]">
                <div class="flex">
                    <div class="flex items-center justify-center grid grid-cols-3 gap-1">
                        <span class="text-[16px] leading-normal" :class="{'text-600': !isNotifyFullSlot}">利用しない</span>
                        <div class="cl-toggle-switch cl-toggle-switch-lv2 flex items-center justify-center">
                            <label class="cl-switch cl-switch-lv2 !cursor-pointer">
                                <input type="checkbox" @change="changeStatus" v-model="isNotifyFullSlot" value="0">
                                <span></span>
                            </label>
                        </div>
                        <span class="text-[16px] leading-normal" :class="{'text-green-500': isNotifyFullSlot}">利用する</span>
                    </div>
                </div>
            </div>
            <div class="title-table mt-[29px] !font-[600]" style="color: #222222;">
                決済利用 変更履歴
            </div>
            <div class="calendar-wrapper today-booking">
                <div class="display-custom mt-[10px]">
                    <div class="tab-content">
                        <div class="tab-pane active fade in mt-[10px]" id="booking-tab-1">
                            <table class="mb-[9px] border border-collapse" style="width: 42%">
                                <thead>
                                    <tr class="h-[48px]">
                                        <td class="bg-[#E0E0E0] min-w-[200px] w-[200px] 2xl:w-[300px] text-left font-semibold !font-[300] !text-[14px] text-[#222222]">日時</td>
                                        <td class="bg-[#E0E0E0] min-w-[200px] w-[200px] 2xl:w-[300px] text-left font-semibold !font-[300] !text-[14px] text-[#222222]">
                                            内容
                                        </td>
                                        <td class="bg-[#E0E0E0] min-w-[70px] text-center !font-semibold !font-[300] !text-[16px] text-[#2B2F36]"></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="history in histories" :key="history.id" class="text-left text-[#222222]">
                                        <td class="text-left text-[#222222] !font-[300]">@{{ formatDate(history.created_at) }}</td>
                                        <td class="text-left !font-[300]">
                                            <span class="text-[#222222]" :class="{'text-green-500-300': history.status_old == 1, 'text-normal': history.status_old != 1}">@{{ getStatusLabel(history.status_old) }}</span>
                                            →
                                            <span class="text-[#222222]" :class="{'text-green-500-300': history.status_new == 1, 'text-normal': history.status_new != 1}">@{{ getStatusLabel(history.status_new) }}</span>
                                        </td>
                                        <td class="text-left text-[#888888] !font-[300]">に変更</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="flex items-center justify-end mt-[5px]" style="width: 43%;">
                            <div class="pagination-info text-right mt-[10px] text-[#222222] text-[14px]">
                                @{{ pagination.from }} - @{{ pagination.to }} / @{{ pagination.total }}行
                            </div>
                            <nav class="text-center mt-[8px]" :class="{'pagination-devered': true}">
                                <ul class="pagination">
                                    <li :class="{'mr-[10px] text-[#2B2F36]': true, 'disabled': pagination.current_page === 1}"
                                        @click.prevent="pagination.current_page !== 1 && fetchHistory(pagination.current_page - 1)">
                                        <a href="#" aria-label="Previous" class="font-light" style="font-size: 14px; margin-right: 10px">
                                            <span :class="{'text-gray-400': pagination.current_page === 1}" aria-hidden="true">
                                                <i class="fas fa-chevron-left"></i>
                                            </span>
                                        </a>
                                    </li>
                                    <li :class="{'mr-[10px] text-[#2B2F36]': true, 'disabled': pagination.current_page === pagination.last_page}"
                                        @click.prevent="pagination.current_page !== pagination.last_page && fetchHistory(pagination.current_page + 1)">
                                        <a href="#" aria-label="Next" class="font-light" style="font-size: 14px; margin-left: 0px">
                                            <span :class="{'text-gray-400': pagination.current_page === pagination.last_page}" aria-hidden="true">
                                                <i class="fas fa-chevron-right"></i>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>--}}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment/locale/ja.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            histories: [],
            isNotifyFullSlot: null,
            pagination: {
                current_page: 1,
                last_page: 1,
                total: 0,
                from: 0,
                to: 0,
                per_page: 10
            }
        },
        mounted() {
            this.fetchHistory();
        },
        methods: {
            fetchHistory(page = 1) {
                console.log('Fetching page:', page); // Log giá trị page
                axios.get('{{ route('getAllHistories') }}', {
                    params: {
                        page: page,
                        per_page: this.pagination.per_page
                    }
                })
                .then(response => {
                    this.isNotifyFullSlot = response.data.is_two_factor_verified; 
                    this.histories = response.data.histories;
                    this.pagination = response.data.pagination; 
                    this.pagination.current_page = page; // Cập nhật trang hiện tại
                    console.log(this.pagination);
                })
                .catch(error => {
                    console.error(error);
                });
            },
            getStatusLabel(status) {
                return status == 1 ? '利用する' : '利用しない';
            },
            formatDate(date) {
                return moment(date).locale('ja').format('YYYY.MM.DD (dd) HH:mm');
            },
            changeStatus() {
                axios.post('{{ route('updateTwoFactorStatus') }}', {
                    status: this.isNotifyFullSlot,
                })
                .then(response => {
                    Toastify({
                        text: '保存しました。',
                        duration: 3000,
                        newWindow: true,
                        close: true,
                        className: "toastCalendar",
                        avatar: '/images/circle-check.svg',
                        gravity: "bottom", 
                        position: "right", 
                        stopOnFocus: true,
                        offset: {
                            y: 30
                        },
                        style: {
                            background: '#F4FBF2',
                            boxShadow: '0px 2px 4px #00000029',
                            borderRadius: '5px',
                            display: 'flex',
                            alignItems: 'center',
                            color: '#08BF5A',
                            width: '250px',
                            height: '40px',
                            padding: '0',
                        },
                    }).showToast();
                    this.fetchHistory(this.pagination.current_page); // Cập nhật lại dữ liệu sau khi thay đổi trạng thái
                })
                .catch(error => {
                    console.error(error);
                });
            }
        }
    });
</script>

@endsection

<!-- Vue.js and Axios CDN -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>