@extends('layout.basic.main')
@section('title','QRコードアクション（Googleスプレッドシート連携）')
@push('css')
    <link rel="stylesheet" href="{{asset('css/qr_code/link_google.css')}}?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <div class="" id="link_google">
        <div class="d-flex flex-column">
            <div class="fr-header pt-3 pb-3 w-100">
                <h3 class="mb-2 font-s20 font-w-bold color-text">Googleスプレッドシート連携</h3>
                <h4 class="font-s14 font-w-normal color-gray1">
                    <a href="/basic/landing" class="font-s14 font-w-normal color-gray1" style="text-decoration: underline">QRコードアクション一覧</a> > Googleスプレッドシート連携</h4>
            </div>
            <div class="l-content">
                <div class="mb-4">
                    <p class="font-s14 font-w-normal color-text l-title">Googleスプレッドシートに友だち追加情報を表示します。</p>
                </div>
                <div class="box-link" style="">
                    @if(!empty($google_sheet_auth_url))
                        <div class="box-not-link">
                            <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>
                        </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="{{ $landingConnectGoogle->google_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">{{ $landingConnectGoogle->google_account_name }}</span>
                                </div>
                            </div>
                            <div class="warning p-2" style="margin-top: 10px">
                                <p class="font-s14 font-w-bold color-text mb-2">スプレッドシート利用の注意点</p>
                                <div class="" style="line-height: 24px">
                                    <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>
                                    <p class="font-s14 font-w-normal color-text">・データの反映は翌日の正午までに行われます。</p>
                                </div>
                            </div>
                            <div class="guide p-2" style="margin-top: 12px">
                                <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" style="line-height: 24px">
                                    <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>
                    @endif
                </div>
                <div class="tb-footer d-flex justify-content-between align-items-center mt-3">
                    <button class="font-s14 font-w-normal color-text btn-back" onclick="window.location.href = '/basic/landing'">戻る</button>
                    @if(empty($google_sheet_auth_url))
                        <p class="font-s14 font-w-normal color-red un-link" onclick="showModalUnLink()">Googleアカウントの接続を解除する</p>
                    @endif
                </div>
            </div>
        </div>
        @include('basic.qr_code.v2.modal.unlink_google')
        @if(!empty($isGoogleSheetRevoked))
            <div class="modal fade" id="modalAlertGoogleSheetError" tabindex="-1" role="dialog" aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <i class="fal fa-times" style="color: #888888"></i></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="text-center w-100">
                                    <img src="/images/exclamation-triangle-regular.svg" width="80px" style="margin-bottom: 26px">
                                </div>
                                <div class="text-center w-100" style="font-size: 20px; font-weight: 600; color: #F44336">
                                    Googleスプレッドシートの連携が解除されました
                                </div>
                                <div class="text-center w-100" style="color: #222222; font-weight: 300; font-size: 14px">
                                    連携が解除された状態では、正常にデータ連携が行われません。
                                </div>
                            </div>
                        </div>
                        <div class="text-center" style="padding: 15px ; padding-bottom: 30px">
                            <a href="{{ $google_sheet_auth_url_reconnect }}" type="button" class="btn btn-sns-line-success btn-sns-line" style="margin-bottom: 20px ; font-size: 14px !important; font-weight: 600; background: #08BF5A !important;width: 150px; height: 40px ">再連携する</a>
                            <br>
                            <a data-dismiss="modal" style="color:#888888 ;font-weight: 300; font-size: 14px; text-decoration: underline; cursor: pointer">再連携せずにこの画面を閉じる</a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection
@push('js')
    <script>
        function showModalUnLink() {
            $('#un-link').modal('show')
        }
        @if(!empty($isGoogleSheetRevoked))
            $(document).ready(function () {
                $('#modalAlertGoogleSheetError').modal('show')
            });
        @endif
        @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>
@endpush