@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">

    <style>
        .category-selector {
            background: white;
        }

        .category-selector option {
            padding: 10px;
            font-size: 90%;
        }

        .title-setting {
            background-color: rgba(8,191,90,1);
            padding: 10px;
            color: white;
            font-weight: 600;
        }

        .hr-setting {
            color: rgba(8,191,90,1);
            border-top: 2px solid rgba(8,191,90,1);
            margin-top: 5px;
        }

        .label-action {
            font-weight: 600;
            margin-bottom: 5px;
        }

        #newFunnelModal th {
            background: #f7f4f4 !important;
            color: #444 !important;
        }

        #newFunnelModal .modal-title {
            margin: 0 !important;
            font-weight: normal !important;
        }
        .emojionearea{
            margin-top: 10px !important;
        }

        .emojionearea > .emojionearea-editor {
            min-height: 200px !important;
            max-height: 220px !important;
        }

        .set-rich-menu {
            margin-top: 10px;
        }

        .emoji {
            position: absolute;
            left: 308px;
            top: 57px;
        }

        .editor-bar {
            top: 10px !important;
        }

        .on-submenu {
        }

        .insert-delivery-date, .insert-date-add {
            display: inline-block;
        }

        .below-submenu {
            margin-top: 10px;
        }

        .date-danger-1, .date-danger-2, .date-danger-3 {
            margin-bottom: 5px !important;
            padding: 10px !important;
            display: none;
            margin-top: 5px
        }

        .remove-time-1, .remove-time-2, .remove-time-3 {
            display: none;
        }

        .remove-time-1:hover, .remove-time-2:hover, .remove-time-3:hover {
            cursor: pointer;
        }

        .set-rich-menu {
            margin-top: 10px;
        }

        #list-test-modal{
            z-index: 1050 !important;
        }
        .box-search{
            display: flex;
            align-items: center;
        }
        #list-test-modal table th{
            background: #3c8dbc !important;
        }
        #list-test-modal .btn{
            padding: 3px 12px 7px 12px !important;
        }
        #list-test-modal table td{
            border-right: 1px solid #eee !important;
        }
        .tem_choice ul > li {
            padding: 5px !important;
        }

        .nav-pills>li+li {
            margin-left: 2px;
        }
        .nav-pills > li {
            background: #ccc;
            padding: unset!important;
        }
        .info-url {
            padding-right: unset;
            padding-left: unset;
            margin-top: 10px;
        }
        .info-url2 {
            padding-right: unset;
            padding-left: unset;
            margin-top: 10px;
        }
        .info-url3 {
            padding-right: unset;
            padding-left: unset;
            margin-top: 10px;
        }
        .explain_url_broadcast {
            margin: 5px 0 10px 0;
            color: rgb(192, 192, 192);
        }
        .sub p {
            font-weight: unset;
        }
        .require_red{
            background: #a73030;
            display: inline-block;
            color: #fff;
            border-radius: 5px;
            padding: 1px 9px 4px 9px;
            font-size: 13px;
        }
        .explain_url_template {
            margin: 5px 0 10px 0;
            color: rgb(192, 192, 192);
        }
        .info_tag{
            background: #337ab7;
            display: inline-block;
            color: #fff;
            border-radius: 5px;
            padding: 1px 9px 4px 9px;
            font-size: 13px;
        }
        .info-url .panel-body .btn, .info-url2 .panel-body .btn, .info-url3 .panel-body .btn,
        #tbl-urlDetect .btn, #tbl-urlDetect2 .btn, #tbl-urlDetect3 .btn{
            width: auto!important;
        }

        .duration_inp{
            display: flex;
            margin: 7px 0;
            align-items: flex-end;
        }
        textarea::placeholder {
            color: #ccc !important;
            font-size: 13px;
        }
        .mb-3 {
            margin-bottom: 9px;
        }
        .info-url textarea ,.info-url2 textarea, .info-url3 textarea{
            margin: 5px 0 !important;
            border: 1px solid rgb(187 187 187);
        }
        .btn-store{
            background-color: rgb(13, 189, 51);
            color: white;
            margin-top: 10px;
            width: 140px;
            padding: 7px 10px 7px 10px;
            text-align: center;
            float: unset !important;
            vertical-align: middle !important;
        }
        .btn-store:hover{
            color: whitesmoke;
            background-color: rgb(22, 186, 23);
        }
    </style>
@endpush
@section('content')
    <article class="">
        <section id="setting-add-friend">
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">メッセージ登録</h2>
            <p style="margin-bottom: 15px; font-size: 15px; color: #222222">
              @if(!empty($typeSetting) && $typeSetting == 'new') 新規友だちあいさつメッセージ @endif
              @if(!empty($typeSetting) && $typeSetting == 'old') 既存友だちあいさつメッセージ @endif
            </p>
                <form
                    @if(!empty($typeSetting) && $typeSetting == 'new')
                    action="{{route('add_friend.updateSettingMessage', ['typeSetting' => 'new'])}}"
                    @endif
                    @if(!empty($typeSetting) && $typeSetting == 'old')
                    action="{{route('add_friend.updateSettingMessage', ['typeSetting' => 'old'])}}"
                    @endif
                    method="post" role="form" id="frmAddTemplate" onsubmit="return false;" enctype="multipart/form-data">
                    <div class="form-group">
                        <input type="hidden" id="type_setting" @if(!empty($typeSetting)) value="{{ $typeSetting }}" @endif >
                        @include('basic.scenario.content_form_message')
                        @include('basic.message_template.partials.modal')
                        @include('basic.filter.modal_filter')
                        @include('layout.modal_test_list.modal_list_test')
                    </div>
                <div>
                    <button type="submit" class="btn btn-store" onclick="callStoreSettingMessage()" >メッセージ登録</button>
                    <a style="margin: 5px 0 0 30px" class="btn btn-secondary" href="{{route('settingAddFriend')}}">戻る</a>
                </div>
                </form>
            <input type="hidden" id="flag_message"  @if(!empty($flagMessage)) value="{{ $flagMessage }}" @endif>
        </section>
    </article>
    @endsection

@push('js')
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue-paginate.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/msg_template/custom_rule.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/msg_template/vee-validate_ja.min.js"></script>
    <script src="/chat_files/emojione.js"></script>
    <script src="/chat_files/emojionearea.js"></script>
    <script type="application/javascript" src="/js/common/template_backup.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/reply/filter.js?v={{config('sns-line.version')}}"></script>
    <script type="application/javascript" src="/js/popup_send_test-message.js?v={{config('sns-line.version')}}"></script>
    <script type="application/javascript" src="/js/fgEmojiPicker.js"></script>
    <script src="/js/scenario/setting_message.js?v={{config('sns-line.version')}}"></script>
    <script type="application/javascript" src="/js/setting_detect_url.js?v={{config('sns-line.version')}}"></script>
    <script type="application/javascript"
            src="/js/msg_template/google_map.js?v={{config('sns-line.version')}}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAU9JfuYb5j2Xtr_v5__89wY5flXr0ai5I&libraries=places&callback=initMap&language={{App::getLocale()}}"
            async defer></script>
    <script>
        var token = "{!! csrf_token() !!}";
        id = "";
        button_main.title = ``;
        button_main.text = ``;
        button_main.img_path = "";
        button_main.update_flag = "";
        button_main.buttons = [];
        button_main.gr_buttons = [];

        id_2 = "";
        button_main_2.title = "";
        button_main_2.text = ``;
        button_main_2.img_path = "";
        button_main_2.update_flag = "";
        button_main_2.buttons = [];
        button_main_2.gr_buttons = [];

        id_3 = "";
        button_main_3.title = "";
        button_main_3.text = ``;
        button_main_3.img_path = "";
        button_main_3.update_flag = "";
        button_main_3.buttons = [];
        button_main_3.gr_buttons = [];
    </script>
    <script>
        $(function () {
            var message = $('#text_content').html().length;
            $('#count_text_content').html(message);
            if ($('#text_content2').length) {
                var message_2 = $('#text_content2').html().length;
                $('#count_text_content2').html(message_2);
            }
            if ($('#text_content3').length) {
                var message_3 = $('#text_content3').html().length;
                $('#count_text_content3').html(message_3);
            }
        });

        $(document).ready(function() {
            // const emojiPicker = new FgEmojiPicker({
            //     trigger: ['.fa-smile-o'],
            //     position: ['bottom', 'right'],
            //     preFetch: true,
            //     // insertInto: document.querySelector('#text_content2'),
            //     emit(obj, triggerElement) {
            //         const emoji = obj.emoji;
            //         const type = triggerElement.getAttribute('data-type');
            //         switch (type) {
            //             case '2' :
            //                 document.getElementById('text_content2').focus();
            //                 insertAtCursor(document.getElementById('text_content2'), emoji);
            //                 break;
            //             case '3':
            //                 document.getElementById('text_content3').focus();
            //                 insertAtCursor(document.getElementById('text_content3'), emoji);
            //                 break;
            //             default:
            //                 document.getElementById('text_content').focus();
            //                 insertAtCursor(document.getElementById('text_content'), emoji);
            //                 break;
            //         }
            //
            //     }
            // });
        });
    </script>
@endpush