@extends('layout.basic.main')
@section('title','フォーム作成（Googleスプレッドシート連携）')
@push('css')
    <link rel="stylesheet" href="{{asset('css/form_answer/form_result_v3.css')}}?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <div class="container-fluid" id="link_google">
        <div class="d-flex flex-column">
            <div class="fr-header pt-3 pb-3 w-100">
                <h3 class="mb-2 font-s18 font-w-bold color-text">Googleスプレッドシート連携</h3>
                <h4 class="font-s14 font-w-normal color-gray1">
                    <a href="/basic/form-answer" class="font-s14 font-w-normal color-gray1" style="text-decoration: underline">フォーム一覧</a> > Googleスプレッドシート連携</h4>
            </div>
            <div class="mt-3 l-content">
                <div class="mb-4">
                    <p class="font-s14 font-w-normal color-text">Googleスプレッドシートに回答情報を表示します。</p>
                </div>
                <div class="box-link" style="min-height: calc(-330px + 100vh);">
                    @if(!empty($google_sheet_auth_url))
                        <div class="not-link d-flex flex-column">
                            <h3 class="color-red font-s16 font-w-bold mb-2">Googleアカウント連携が完了していません</h3>
                            <div class="d-flex justify-content-between align-items-center">
                                <p class="d-flex align-items-center font-s14 font-w-normal color-text" style="margin-top: -5px">Googleアカウントを連携する</p>
                                <a href="{{ $google_sheet_auth_url }}" class="google-btn d-flex align-items-center justify-content-center ml-2">
                                    <img src="/images/web_light_rd_SI.png" alt="" style="height: 30px;">
                                </a>
                            </div>
                        </div>
                    @else
                        <div class="link">
                            <div class="account">
                                <p class="font-s14 font-w-bold color-text mb-2">接続されたGoogleアカウント</p>
                                <div class="info d-flex align-items-center p-2">
                                    <img src="{{ $bot->google_sheet_account_avatar }}" style="width: 25px; border-radius: 50%">
                                    <span class="font-s14 font-w-normal color-text ml-2" style="margin-top: -5px; display: inline-block">{{ $bot->google_sheet_account_name }}</span>
                                </div>
                            </div>
                            <div class="warning mt-4 p-2">
                                <p class="font-s14 font-w-bold color-text mb-2">スプレッドシート利用の注意点</p>
                                <div class="">
                                    <p class="font-s14 font-w-normal color-text">・シート名「シート1」は絶対に変更しないでください。</p>
                                    <p class="font-s14 font-w-normal color-text">・シートを追加する場合でも、「シート1」は必ず左端にしてください。</p>
                                    <p class="font-s14 font-w-normal color-text">・シートの最終行を非表示にするとデータ更新が行われなくなります。</p>
                                    <p class="font-s14 font-w-normal color-text">・質問項目が追加・削除されるとシート上の列も変更されます。</p>
                                </div>
                            </div>
                            <div class="guide mt-3 p-2">
                                <div class="pb-2" style="border-bottom: 1px solid var(--line-color)">
                                    <p class="font-s14 font-w-bold color-text mb-2">スプレッドシートのリカバリー方法</p>
                                    <p class="font-s14 font-w-normal color-text">シートに情報が正しく反映されなくなった場合は、以下のリカバリーを行ってください。</p>
                                </div>
                                <div class="mt-2">
                                    <p class="font-s14 font-w-bold color-text">① スプレッドシート左下にある「＋」マークをクリックして新しくシートを作成する。</p>
                                    <p class="font-s14 font-w-bold color-text">② 現在情報が追加されているシートを右クリックして、シートを削除する。</p>
                                    <p class="font-s14 font-w-bold color-text">③ 新規に回答を追加する</p>
                                    <p class="font-s14 font-w-bold color-text">④ 上記操作を行うと、過去の回答も反映されます。</p>
                                </div>
                            </div>
                            <div class="setting-format-date mt-4">
                                <div class="font-s14  font-w-bold color-222222 ">タイムスタンプの表示設定</div>
                                <div class="font-s14 font-w-normal color-222222 mt-2 mb-2">Googleスプレッドシートに表示されるタイムスタンプのフォーマットを設定できます。</div>
                                <div class="custom-radio mr-[20px]">
                                    <input type="radio" id="format0"  v-model="format_gg_type" value="0" v-on:change="saveChangeType">
                                    <label for="format0">2025-01-01 01:00:00 pm</label>
                                </div>
                                <div class="custom-radio mr-[20px]">
                                    <input type="radio" id="format1"  v-model="format_gg_type" value="1" v-on:change="saveChangeType">
                                    <label for="format1">2025/01/01 13:00:00</label>
                                </div>
                                <div class="custom-radio mr-[20px]">
                                    <input type="radio" id="format2"  v-model="format_gg_type" value="2" v-on:change="saveChangeType">
                                    <label for="format2">2025/01/01（月）13:00</label>
                                </div>

                            </div>
                            <div style="width: 600px; text-align: right">
                                <a class="font-s14 font-w-normal color-red un-link" onclick="showModalUnLink()">Googleアカウントの接続を解除する</a>
                            </div>

                        </div>
                    @endif
                </div>
                <div class="tb-footer d-flex justify-content-between align-items-center">
                    <button class="font-s14 font-w-normal color-text btn-back mb-3" onclick="window.location.href = '/basic/form-answer'">戻る</button>
                </div>
            </div>
        </div>
        @include('basic.form_answer.modal.unlink_google')
    </div>
@endsection
@push('js')
    <script>
        var typeFormat = '{{ $bot->format_gg_type }}'
    </script>
    <script>
        function showModalUnLink() {
            $('#un-link').modal('show')
        }
        @if(session()->has('message'))
            setTimeout(() => {
                alert('{{session()->get('message')}}');
            }, 200)
        @endif
    </script>
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
   <script src="/plugins/loadingoverlay/loadingoverlay.min.js"></script>
   <script src="/js/form_answer/form_link_google.js?v={{config("sns-line.version")}}"></script>
@endpush