@extends('layout.admin_v2.main')
@section('title', 'システムアップデート設定')
@push('css')
<link rel="stylesheet" href="/lme-ui/src/css/reset.css">
<link rel="stylesheet" href="/lme-ui/src/css/base.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/button/button.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/modal/modal.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/lme-ui/src/css/toast/toast.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/css/admin/maintain-setting/maintain-setting.css?v={{config('sns-line.version')}}">
@endpush

@section('content')
<div id="maintain-setting-app" v-cloak>

    {{-- Page Header --}}
    <div class="maintain-setting-header">
        <h1 class="maintain-setting-page-title">システムアップデート設定</h1>
        <lme-button-flat size="md" @click.native="openHowTo" style="font-size: 12px; font-weight: 400; padding: 0 10px">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.0003 15.0004H3.0004C2.72448 15.0004 2.5 14.7759 2.5 14.5V1.5004C2.5 1.22448 2.72448 1 3.0004 1H13.0003C13.2757 1 13.4998 1.22448 13.4998 1.5004V14.5C13.4998 14.7759 13.2757 15.0004 13.0003 15.0004ZM3.625 2.125V13.8754H12.373V2.125H11.3731V6.7582C11.3731 6.89566 11.2613 7.0075 11.1238 7.0075C11.0711 7.0075 11.0187 6.99056 10.9762 6.9598L9.7045 6.031L8.395 6.967C8.35218 6.99783 8.30187 7.01413 8.24952 7.01413C8.16921 7.01413 8.09339 6.97498 8.0467 6.9094C8.01652 6.86888 7.9999 6.81741 7.9999 6.7645V2.125H3.625ZM8.9377 2.125V5.428L9.7108 4.8754L10.4371 5.4046V2.125H8.9377Z" fill="currentColor"/>
            </svg>

            使い方を見る
        </lme-button-flat>
    </div>

    {{-- Main Card --}}
    <div class="maintain-setting-card">
        <div class="maintain-setting-card-inner">

            {{-- Section: アップデート完了時刻 --}}
            <div class="maintain-setting-section">
                <p class="maintain-setting-section-heading">アップデート完了時刻</p>
                <p class="maintain-setting-section-desc">
                    アップデート画面に表示する完了予定時刻を設定します。利用者にはここで設定した日時が「アップデート完了予定」として表示されます。
                </p>
                <div class="maintain-setting-field">
                    <label class="maintain-setting-field-label">完了予定時刻</label>
                    <input
                        type="time"
                        lang="ja"
                        class="maintain-setting-time-input"
                        :class="{ 'is-error': errors.timeSetting }"
                        v-model="form.timeSetting"
                    >
                    <span class="maintain-setting-field-error" v-if="errors.timeSetting">@{{ errors.timeSetting }}</span>
                </div>
                <div class="maintain-setting-preview-callout" v-if="form.timeSetting">
                    <span class="maintain-setting-preview-label">アップデート画面に表示される時刻：</span>
                    <span class="maintain-setting-preview-time">本日 @{{ formattedTime }} 頃</span>
                </div>
            </div>

            {{-- Page Actions --}}
            <div class="maintain-setting-page-actions">
                <lme-button-default
                        size="md"
                        :disabled="saving"
                        @click.native="save"
                >
                    <span v-if="saving">保存中...</span>
                    <span v-else>保存</span>
                </lme-button-default>
            </div>

            <div class="maintain-setting-divider"></div>

            {{-- Section: スマホアプリへの通知 --}}
            <div class="maintain-setting-section">
                <p class="maintain-setting-section-heading">スマホアプリへの通知</p>
                <p class="maintain-setting-section-desc">
                    アップデート完了通知をスマホアプリに登録済みの全ユーザーへ送信します。送信後はアプリ起動時にポップアップで表示され、必要に応じて表示の取り消しもできます。
                </p>

                <div class="maintain-setting-notify-actions">
                    {{-- Idle state: show send button --}}
                    <template v-if="!isNotifyEnabled && !isCancelled">
                        <lme-button-default
                            size="md"
                            :disabled="sending"
                            @click.native="openSendModal"
                        >
                            <lme-icon file_name="notification-outlined"></lme-icon>
                            通知を送信
                        </lme-button-default>
                    </template>

                    {{-- Notified state: status panel --}}
                    <template v-else-if="isNotifyEnabled">
                        <div class="maintain-setting-notify-panel">
                            <div class="maintain-setting-notify-panel-head">
                                <span class="maintain-setting-notify-badge">送信済み</span>
                                <span class="maintain-setting-notify-timestamp" v-if="notifiedAt">@{{ notifiedAt }} に送信</span>
                            </div>
                            <p class="maintain-setting-notify-panel-text">
                                スマホアプリにポップアップが表示中です。誤送信や内容修正の場合は、下記から表示を取り消せます。
                            </p>
                            <lme-button-risk
                                size="md"
                                :disabled="cancelling"
                                @click.native="openCancelModal"
                            >通知表示を取り消す</lme-button-risk>
                        </div>
                    </template>

                    {{-- Cancelled state: show re-send panel --}}
                    <template v-else>
                        <div class="maintain-setting-notify-panel maintain-setting-notify-panel--cancelled">
                            <div class="maintain-setting-notify-panel-head">
                                <span class="maintain-setting-notify-badge maintain-setting-notify-badge--cancelled">取り消し済み</span>
                                <span class="maintain-setting-notify-timestamp" v-if="cancelledAt">@{{ cancelledAt }} に取り消し</span>
                            </div>
                            <p class="maintain-setting-notify-panel-text">
                                スマホアプリのポップアップ表示を停止しました。再度通知が必要な場合は、新たに送信してください。
                            </p>
                            <lme-button-default
                                size="md"
                                :disabled="sending"
                                @click.native="openSendModal"
                            >
                                <lme-icon file_name="notification-outlined"></lme-icon>
                                もう一度送信
                            </lme-button-default>
                        </div>
                    </template>
                </div>
            </div>

        </div>
    </div>

    {{-- Modal: Send Notification Confirmation --}}
    <lme-modal v-model="showSendModal" :header="false" :mask-closable="false" :width="480">
        <div class="maintain-setting-modal-body">
            <div class="maintain-setting-modal-header">
                <span class="maintain-setting-modal-title" style="color: #1F1F1F; font-size: 20px">通知を送信しますか？</span>
            </div>
            <p class="maintain-setting-modal-text" style="color: #1F1F1F; font-size: 14px; font-weight: 400">
                スマホアプリを利用している全ユーザーに対して、アップデート完了通知を送信します。<br>
                <span style="color: #9A9EAD; font-size: 12px; display: inline-block; margin-top: 12px">送信後はこの画面から表示を取り消せます。</span>
            </p>
            <div class="maintain-setting-modal-footer">
                <lme-button-ghost size="md" @click.native="showSendModal = false">キャンセル</lme-button-ghost>
                <lme-button-default size="md" :disabled="sending" @click.native="confirmSendNotify">
                    <span v-if="sending">送信中...</span>
                    <span v-else>送信する</span>
                </lme-button-default>
            </div>
        </div>
    </lme-modal>

    {{-- Modal: Cancel Notification Confirmation --}}
    <lme-modal v-model="showCancelModal" :header="false" :mask-closable="false" :width="480">
        <div class="maintain-setting-modal-body">
            <div class="maintain-setting-modal-header">
                <span class="maintain-setting-modal-title" style="color: #1F1F1F; font-size: 20px">通知表示を取り消しますか？</span>
            </div>
            <p class="maintain-setting-modal-text" style="color: #1F1F1F; font-size: 14px; font-weight: 400">
                スマホアプリのポップアップ表示を停止します。<br>
                <span style="font-size: 12px; color: #9A9EAD; display: inline-block; margin-top: 12px">既に通知をタップして開いたユーザーには影響しません。</span>
            </p>
            <div class="maintain-setting-modal-footer">
                <lme-button-ghost size="md" @click.native="showCancelModal = false">キャンセル</lme-button-ghost>
                <lme-button-risk size="md" :disabled="cancelling" @click.native="confirmCancelNotify">
                    <span v-if="cancelling">取り消し中...</span>
                    <span v-else>取り消す</span>
                </lme-button-risk>
            </div>
        </div>
    </lme-modal>

</div>
@endsection

@push('script')
<script src="/js/vue2.6.12/vue.js"></script>
<script src="/lme-ui/src/js/icon/lme-icon.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/button/lme-button.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/button/lme-button-default.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/button/lme-button-ghost.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/button/lme-button-risk.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/button/lme-button-flat.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/modal/lme-modal.js?v={{config('sns-line.version')}}"></script>
<script src="/lme-ui/src/js/toast/lme-toast.js?v={{config('sns-line.version')}}"></script>
<script>
(function () {
    var CSRF = $('meta[name="csrf-token"]').attr('content');

    new Vue({
        el: '#maintain-setting-app',
        data: {
            form: {
                timeSetting: '',
            },
            errors: {
                timeSetting: '',
            },
            isNotifyEnabled: false,
            notifiedAt: '',
            isCancelled: false,
            cancelledAt: '',
            showSendModal: false,
            showCancelModal: false,
            saving: false,
            sending: false,
            cancelling: false,
        },
        computed: {
            formattedTime: function () {
                if (!this.form.timeSetting) return '';
                var parts = this.form.timeSetting.split(':');
                var d = new Date();
                d.setHours(parseInt(parts[0], 10), parseInt(parts[1], 10), 0);
                return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            },
        },
        created: function () {
            this.getData();
        },
        methods: {
            openHowTo: function () {
                window.open('https://lme.jp/manual/category/information/', '_blank');
            },

            getData: function () {
                var self = this;
                $.ajax({
                    url: '{{ route("maintainSetting.getData") }}',
                    method: 'GET',
                    success: function (res) {
                        if (res.success) {
                            self.form.timeSetting = res.data.timeSetting || '';
                            self.isNotifyEnabled  = res.data.isNotifyEnabled;
                            self.notifiedAt       = res.data.notifiedAt || '';
                            self.isCancelled      = res.data.isCancelled;
                            self.cancelledAt      = res.data.cancelledAt || '';
                        }
                    },
                    error: function () {
                        self.$toast('データの取得に失敗しました。', 'error');
                    },
                });
            },

            validateForm: function () {
                this.errors.timeSetting = '';
                if (!this.form.timeSetting) {
                    this.errors.timeSetting = '完了予定時刻を入力してください';
                    return false;
                }
                return true;
            },

            save: function () {
                if (this.saving) return;
                if (!this.validateForm()) return;

                var self = this;
                self.saving = true;

                $.ajax({
                    url: '{{ route("maintainSetting.save") }}',
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': CSRF },
                    data: {
                        time_setting: self.form.timeSetting,
                    },
                    success: function (res) {
                        self.saving = false;
                        if (res.success) {
                            self.$toast('保存しました。', 'success');
                        } else {
                            if (res.errors && res.errors.time_setting) {
                                self.errors.timeSetting = res.errors.time_setting[0];
                            } else {
                                self.$toast('保存に失敗しました。', 'error');
                            }
                        }
                    },
                    error: function () {
                        self.saving = false;
                        self.$toast('保存に失敗しました。', 'error');
                    },
                });
            },

            openSendModal: function () {
                this.showSendModal = true;
            },

            openCancelModal: function () {
                this.showCancelModal = true;
            },

            confirmSendNotify: function () {
                if (this.sending) return;
                var self = this;
                self.sending = true;

                $.ajax({
                    url: '{{ route("maintainSetting.sendNotify") }}',
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': CSRF },
                    success: function (res) {
                        if (res.success) {
                            self.isNotifyEnabled = true;
                            self.notifiedAt      = res.notifiedAt || '';
                            self.isCancelled     = false;
                            self.cancelledAt     = '';
                            self.showSendModal = false;
                            self.$toast('通知を送信しました。', 'success');
                        } else {
                            self.$toast('送信に失敗しました。', 'error');
                        }
                    },
                    error: function () {
                        self.$toast('送信に失敗しました。', 'error');
                    },
                    complete: function () {
                        self.sending = false;
                    },
                });
            },

            confirmCancelNotify: function () {
                if (this.cancelling) return;
                var self = this;
                self.cancelling = true;

                $.ajax({
                    url: '{{ route("maintainSetting.cancelNotify") }}',
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': CSRF },
                    success: function (res) {
                        if (res.success) {
                            self.isNotifyEnabled = false;
                            self.isCancelled     = true;
                            self.cancelledAt     = res.cancelledAt || '';
                            self.showCancelModal = false;
                            self.$toast('通知表示を取り消しました。', 'success');
                        } else {
                            self.$toast('取り消しに失敗しました。', 'error');
                        }
                    },
                    error: function () {
                        self.$toast('取り消しに失敗しました。', 'error');
                    },
                    complete: function () {
                        self.cancelling = false;
                    },
                });
            },
        },
    });
}());
</script>
@endpush