@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/materialize.min.css">
    <style>
        .bot-chat row {
            margin-bottom: 0;
        }

        .border-option {
            border: thin solid;
            margin-bottom: 10px;
            padding-bottom: 15px;
            padding-top: 15px;
        }

        .border-option p {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .border-option label {
            margin-bottom: 15px;
        }

        .lm-current-description {
            font-size: 20px;
            font-weight: bold;
        }

        label {
            color: #000;
        }

        [type="checkbox"] + span:not(.lever) {
            /*display: table;*/
        }

        .row {
            margin-right: -15px;
            margin-left: -15px;
            /*margin-bottom: 15px;*/
        }

        [type="checkbox"] + span:not(.lever):before {
            top: 3px;
        }

        .lm-current-description {
            margin-bottom: 0;
        }

        .bot-detail {
            vertical-align: initial !important;
            margin-top: 0;
            margin-bottom: 0;
        }

        .helper-text {
            color: red !important;
            font-size: 15px !important;
        }

        #transfer_code_value {
            margin-bottom: 0 !important;
        }

        .lm-current-description {
            background-color: unset !important;
            margin-bottom: 15px;
            color: #0c0c0c;
        }

        .mb-20 {
            margin-bottom: 20px;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid">
        <div class="row" id="item_vuelist_tag">
            <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
                <i class="glyphicon glyphicon-refresh spin"></i>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <p class="lm-current-description">データ移行</p>
                <div class="col s12" style="font-size: 18px;line-height: 34px">
                    バックアップコード
                    <div class="input-field inline">
                        <input type="text" value="" id="transfer_code_value" name="transfer_code_value">
                        <span class="helper-text" data-error="wrong"
                              data-success="right">@if($errors->has('transfer_code')){{$errors->first('transfer_code')}}@endif</span>
                    </div>
                </div>
                <div class="col s12" style="font-size: 18px; margin-bottom: 20px">
                    BOT名:
                    <span class="input-field inline bot-detail">
                    </span>
                </div>
                <form method="POST" action="{{ route('backup.store') }}">
                    {{ csrf_field() }}
                    <input type="hidden" value="" name="transfer_code">
                    <div class="col-xs-12 col-sm-12 col-md-12 border-option">
                        <p>
                            タグ管理
                            <label>
                                <input type="checkbox" name="check_all_tag" id="check_all_tag">
                                <span>すべて選択</span>
                            </label>
                        </p>
                        <div class="row" style="display: flex; flex-wrap: wrap">
                            @if(!empty($listTagFolderDefault))
                                <div class="col-xs-4 mb-20">
                                    <h3 class="mb-20">未分類</h3>
                                    @foreach($listTagFolderDefault as $tagDefault)
                                        <label class="col-md-12">
                                            <input type="checkbox" value="{{ $tagDefault->id }}"
                                                   id="tag{{ $tagDefault->id }}"
                                                   name="tag[]">
                                            <span>{{ $tagDefault->name }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                            @foreach($folderTags as $folderItem)
                                @if(!empty($folderItem->tags))
                                    <div class="col-xs-4 mb-20">
                                        <h3 class="mb-20">{{ $folderItem->name }}</h3>
                                        @foreach($folderItem->tags as $tag)
                                            <label class="col-md-12">
                                                <input type="checkbox" value="{{ $tag->id }}" id="tag{{ $tag->id }}"
                                                       name="tag[]">
                                                <span>{{ $tag->name }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 border-option">
                        <p>
                            ステップ配信
                            <label>
                                <input type="checkbox" name="check_all_scenario" id="check_all_scenario">
                                <span>すべて選択</span>
                            </label>
                        </p>
                        @foreach($scenarioList as $scenario)
                            <label class="col-md-2">
                                <input type="checkbox" value="{{ $scenario['id'] }}" id="scenario{{ $scenario['id'] }}"
                                       name="scenario[]">
                                <span>{{ $scenario['name'] }}</span>
                            </label>
                        @endforeach
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12 border-option">
                        <p>
                            リマインド配信
                            <label>
                                <input type="checkbox" name="check_all_remind" id="check_all_remind">
                                <span>すべて選択</span>
                            </label>
                        </p>
                        @foreach($remindList as $remind)
                            <label class="col-md-3">
                                <input type="checkbox" value="{{ $remind['id'] }}" id="remind{{ $remind['id'] }}"
                                       name="remind[]">
                                <span>{{ $remind['event_name'] }}</span>
                            </label>
                        @endforeach
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12 border-option">
                        <p>
                            イベント予約管理
                            <label>
                                <input type="checkbox" name="check_all_booking" id="check_all_booking">
                                <span>すべて選択</span>
                            </label>
                        </p>
                        @foreach($bookingList as $booking)
                            <label class="col-md-3">
                                <input type="checkbox" value="{{ $booking['id'] }}" id="remind{{ $booking['id'] }}"
                                       name="booking[]">
                                <span>{{ $booking['title'] }}</span>
                            </label>
                        @endforeach
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12 border-option">
                        <p>
                            フォーム作成
                            <label>
                                <input type="checkbox" name="check_all_form_answer" id="check_all_form_answer">
                                <span>すべて選択</span>
                            </label>
                        </p>
                        <div class="row" style="display: flex; flex-wrap: wrap">
                            @if(!empty($formAnswerListFolderDefault))
                                <div class="col-xs-4 mb-20">
                                    <h3 class="mb-20">未分類</h3>
                                    @foreach($formAnswerListFolderDefault as $formAnswer)
                                        <label class="col-xs-12">
                                            <input type="checkbox" value="{{ $formAnswer->id }}"
                                                   id="formAnswer{{ $formAnswer->id }}" name="form_answer[]">
                                            <span>{{ $formAnswer->name }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                            @foreach($folderFormanswer as $folderItem)
                                @if($folderItem->formanswers)
                                    <div class="col-xs-4 mb-20">
                                        <h3 class="mb-20">{{ $folderItem->name }}</h3>
                                        @foreach($folderItem->formanswers as $formAnswer)
                                            <label class="col-xs-12">
                                                <input type="checkbox" value="{{ $formAnswer->id }}"
                                                       id="formAnswer{{ $formAnswer->id }}" name="form_answer[]">
                                                <span>{{ $formAnswer->name }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 border-option">
                        <p>
                            自動応答
                            <label>
                                <input type="checkbox" name="check_all_auto_reply" id="check_all_auto_reply">
                                <span>すべて選択</span>
                            </label>
                        </p>
                        <div class="row" style="display: flex; flex-wrap: wrap">
                            @if(!empty($autoReplyListFolderDefault))
                                <div class="col-xs-4">
                                    <h3 class="mb-20">未分類</h3>
                                    @foreach($autoReplyListFolderDefault as $autoReply)
                                        <label class="col-md-12">
                                            <input type="checkbox" value="{{ $autoReply->id }}"
                                                   id="autoReply{{ $autoReply->id }}"
                                                   name="auto_reply[]">
                                            <span>{{ $autoReply->keyword }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            @endif

                            @foreach($folderAutoReply as $folder)
                                @if(!empty($folder->auto_reply))
                                    <div class="col-xs-4">
                                        <h3 class="mb-20">{{ $folder->name }}</h3>
                                        @foreach($folder->auto_reply as $autoReply)
                                            <label class="col-md-12">
                                                <input type="checkbox" value="{{ $autoReply->id }}"
                                                       id="autoReply{{ $autoReply->id }}"
                                                       name="auto_reply[]">
                                                <span>{{ $autoReply->keyword }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 border-option">
                        <p>
                            テンプレート
                            <label>
                                <input type="checkbox" name="check_all_template" id="check_all_template">
                                <span>すべて選択</span>
                            </label>
                        </p>
                        <div class="row" style="display: flex; flex-wrap: wrap">
                        @if(!empty($templateListFolderDefault))
                            <div class="col-xs-4">
                                <h3 class="mb-20">未分類</h3>
                                @foreach($templateListFolderDefault as $template)
                                    <label class="col-md-12">
                                        <input type="checkbox" value="{{ $template->id }}"
                                               id="template{{ $template->id }}"
                                               name="template[]">
                                        <span>{{ $template->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                        @endif
                        @foreach($folderTemplates as $folderItem)
                            @if(!empty($folderItem->templates))
                                <div class="col-xs-4">
                                    <h3 class="mb-20">{{ $folderItem->name }}</h3>
                                    @foreach($folderItem->templates as $template)
                                        <label class="col-md-12">
                                            <input type="checkbox" value="{{ $template->id }}"
                                                   id="template{{ $template->id }}"
                                                   name="template[]">
                                            <span>{{ $template->name }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                        @endforeach
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 border-option">
                        <p>
                            リッチメニュー
                            <label>
                                <input type="checkbox" name="check_all_rich_menu" id="check_all_rich_menu">
                                <span>すべて選択</span>
                            </label>
                        </p>
                        @foreach($richMenuList as $richMenu)
                            <label class="col-md-2">
                                <input type="checkbox" value="{{ $richMenu->id }}" id="richMenu{{ $richMenu->id }}"
                                       name="rich_menu[]">
                                <span>{{ $richMenu->name }}</span>
                            </label>
                        @endforeach
                    </div>
                    {{--                    <div class="col-xs-12 col-sm-12 col-md-12 border-option">--}}
                    {{--                        <p>--}}
                    {{--                            登録メディア一覧--}}
                    {{--                            <label>--}}
                    {{--                                <input type="checkbox" name="check_all_media" id="check_all_media">--}}
                    {{--                                <span>すべて選択</span>--}}
                    {{--                            </label>--}}
                    {{--                        </p>--}}
                    {{--                        @foreach($mediaList as $media)--}}
                    {{--                            <label class="col-md-2">--}}
                    {{--                                <input type="checkbox" value="{{ $media['id'] }}" id="media{{ $media['id'] }}"--}}
                    {{--                                       name="media[]">--}}
                    {{--                                @if($media['media_type'] == 'video')--}}
                    {{--                                    <span>--}}
                    {{--                                        <div class="panel panel-default panel-media panel-media-video">--}}
                    {{--                                            <div class="panel-body text-center">--}}
                    {{--                                                <video class="show-video"--}}
                    {{--                                                       data-original-src-width="1040"--}}
                    {{--                                                       data-original-src-height="613"--}}
                    {{--                                                       style="max-width: 100%;" controls--}}
                    {{--                                                       src="{{ asset($media['media_path']) }}">--}}
                    {{--                                                </video>--}}
                    {{--                                            </div>--}}
                    {{--                                            <div class="panel-footer">--}}
                    {{--                                                登録：<b>{{ $media['created_at'] }}</b>--}}
                    {{--                                            </div>--}}
                    {{--                                        </div>--}}
                    {{--                                    </span>--}}
                    {{--                                @endif--}}
                    {{--                                @if($media['media_type'] == 'audio')--}}
                    {{--                                    <span>--}}
                    {{--                                        <div class="panel panel-default panel-media panel-media-video">--}}
                    {{--                                            <div class="panel-body text-center">--}}
                    {{--                                                <video class="show-video"--}}
                    {{--                                                       data-original-src-width="1040"--}}
                    {{--                                                       data-original-src-height="613"--}}
                    {{--                                                       style="max-width: 100%;" controls--}}
                    {{--                                                       src="{{ asset($media['media_path']) }}">--}}
                    {{--                                                </video>--}}
                    {{--                                            </div>--}}
                    {{--                                            <div class="panel-footer">--}}
                    {{--                                                登録：<b>{{ $media['created_at'] }}</b>--}}
                    {{--                                            </div>--}}
                    {{--                                        </div>--}}
                    {{--                                    </span>--}}
                    {{--                                @endif--}}
                    {{--                                @if($media['media_type'] == 'image')--}}
                    {{--                                    <span>--}}
                    {{--                                        <div class="panel panel-default panel-media panel-media-image">--}}
                    {{--                                            <div class="panel-body text-center">--}}
                    {{--                                                <div class="gallery-item ">--}}
                    {{--                                                    <img id="{{ $media['id'] }}"--}}
                    {{--                                                         data-id="{{ $media['id'] }}"--}}
                    {{--                                                         class="show"--}}
                    {{--                                                         src="{{ asset($media['media_path']) }}"--}}
                    {{--                                                         data-original-src="">--}}
                    {{--                                                </div>--}}
                    {{--                                            </div>--}}
                    {{--                                            <div class="panel-footer">--}}
                    {{--                                                登録：<b>{{ $media['created_at'] }}</b>--}}
                    {{--                                            </div>--}}
                    {{--                                        </div>--}}
                    {{--                                    </span>--}}
                    {{--                                @endif--}}
                    {{--                            </label>--}}
                    {{--                        @endforeach--}}
                    {{--                    </div>--}}
                    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
            <div class="modal-overlay" style="display: none;"></div>
        </div>
    </div>
@endsection
@push('js')
    <script src="/plugins/loadingoverlay/loadingoverlay.min.js"></script>
    <script>
        $('#check_all_tag').on('change', function () {
            if ($(this).is(':checked')) {
                $('input[name="tag[]"]').each(function () {
                    if (!$(this).is(':checked'))
                        $(this).parent().click();
                })
            } else {
                $('input[name="tag[]"]').each(function () {
                    if ($(this).is(':checked'))
                        $(this).parent().click();
                })
            }
        })

        $('#check_all_scenario').on('change', function () {
            if ($(this).is(':checked')) {
                $('input[name="scenario[]"]').each(function () {
                    if (!$(this).is(':checked'))
                        $(this).parent().click();
                })
            } else {
                $('input[name="scenario[]"]').each(function () {
                    if ($(this).is(':checked'))
                        $(this).parent().click();
                })
            }
        })

        $('#check_all_remind').on('change', function () {
            if ($(this).is(':checked')) {
                $('input[name="remind[]"]').each(function () {
                    if (!$(this).is(':checked'))
                        $(this).parent().click();
                })
            } else {
                $('input[name="remind[]"]').each(function () {
                    if ($(this).is(':checked'))
                        $(this).parent().click();
                })
            }
        })

        $('#check_all_booking').on('change', function () {
            if ($(this).is(':checked')) {
                $('input[name="booking[]"]').each(function () {
                    if (!$(this).is(':checked'))
                        $(this).parent().click();
                })
            } else {
                $('input[name="booking[]"]').each(function () {
                    if ($(this).is(':checked'))
                        $(this).parent().click();
                })
            }
        })

        $('#check_all_form_answer').on('change', function () {
            if ($(this).is(':checked')) {
                $('input[name="form_answer[]"]').each(function () {
                    if (!$(this).is(':checked'))
                        $(this).parent().click();
                })
            } else {
                $('input[name="form_answer[]"]').each(function () {
                    if ($(this).is(':checked'))
                        $(this).parent().click();
                })
            }
        })

        $('#check_all_auto_reply').on('change', function () {
            if ($(this).is(':checked')) {
                $('input[name="auto_reply[]"]').each(function () {
                    if (!$(this).is(':checked'))
                        $(this).parent().click();
                })
            } else {
                $('input[name="auto_reply[]"]').each(function () {
                    if ($(this).is(':checked'))
                        $(this).parent().click();
                })
            }
        })

        $('#check_all_template').on('change', function () {
            if ($(this).is(':checked')) {
                $('input[name="template[]"]').each(function () {
                    if (!$(this).is(':checked'))
                        $(this).parent().click();
                })
            } else {
                $('input[name="template[]"]').each(function () {
                    if ($(this).is(':checked'))
                        $(this).parent().click();
                })
            }
        })

        $('#check_all_rich_menu').on('change', function () {
            if ($(this).is(':checked')) {
                $('input[name="rich_menu[]"]').each(function () {
                    if (!$(this).is(':checked'))
                        $(this).parent().click();
                })
            } else {
                $('input[name="rich_menu[]"]').each(function () {
                    if ($(this).is(':checked'))
                        $(this).parent().click();
                })
            }
        })

        $('#check_all_media').on('change', function () {
            if ($(this).is(':checked')) {
                $('input[name="media[]"]').each(function () {
                    if (!$(this).is(':checked'))
                        $(this).parent().click();
                })
            } else {
                $('input[name="media[]"]').each(function () {
                    if ($(this).is(':checked'))
                        $(this).parent().click();
                })
            }
        })

        $('#transfer_code_value').on('change', function () {
            $.ajax({
                type: 'POST',
                url: '/ajax/check-transfer-code',
                data: {
                    transfer_code: $(this).val()
                },
                dataType: 'json',
                beforeSend: function () {
                    $.LoadingOverlay('show');
                },
                success: function (data) {
                    $.LoadingOverlay('hide');
                    if (!data.success)
                        alert(data.message)
                    else {
                        $('input[name="transfer_code"]').val(data.data.transfer_code)
                        $('.bot-detail').html(data.data.view_name)
                        $('.helper-text').html('')
                    }
                },
                error: function (data) {
                    $.LoadingOverlay('hide');
                    alert(data.message);
                }
            })
        })
    </script>
@endpush