@extends('layout.basic.main')
@section('title','フォーム作成（編集）')
@push('js')
    <script src="/js/tailwindcss.js"></script>
@endpush
@push('css')
    <link rel="stylesheet" href="/css/jquery-ui.css">
    <link rel="stylesheet" href="/css/form_answer/v3/edit.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/form_answer/v3/form_items.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/form_answer/other-setting.css?v={{config('sns-line.version')}}">
    <link href="/css/form_answer/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/theme/monokai.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"/>
{{--    <link rel="stylesheet" href="/css/plugins/timepicker/bootstrap-timepicker.css">--}}


    <style>
        .custom_calendar_content {
            padding: 0 !important;
        }

        .tab-header ul li:hover {
            background: #EDF4FB 0% 0% no-repeat padding-box;
        }

        .tab-header ul li:hover > a {
            color: var(--blue) !important;
            font-weight: 600;
        }

        .tab-header .active {
            border-top: 5px solid #5799DB;
        }

        .tab-header .active a {
            color: #5799DB !important;
            font-weight: 600;
        }

        .tab-content .active {
            background-color: #FFFFFF !important;
        }

        input, textarea {
            font-size: 14px !important;
            color: var(---222222) !important;
        }

        .copy-notification {
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border-radius: 30px;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 250px;
            margin-top: -30px;
            margin-left: -85px;
            display: none;
            text-align: center;
            z-index: 5000;
        }

        .main {
            padding-bottom: 0;
        }

        details i {
            transform: rotate(0deg);
        }

        details[open] i {
            transform: rotate(180deg);
        }

        details {
            overflow: hidden;
        }

        details .details-content {
            display: none;
            overflow: hidden;
            opacity: 0;
            transition: display 0.5s ease-out, opacity 0.3s ease-out;
        }

        details[open] .details-content {
            display: block;
            opacity: 1;
        }

        #friend-information-modal [type='checkbox']:checked, #friend-information-modal [type='radio']:checked {
            background-color: #08bf5a !important;
        }

        #distribution-datetime-modal [type='radio'] {
            -webkit-appearance: appearance;
            appearance: auto;

        }

        #setting-remind-modal [type='radio'] {
            -webkit-appearance: appearance;
            appearance: auto;

        }

        #distribution-datetime-modal [type='radio']:focus,
        #friend-information-modal [type='radio']:focus,
        #setting-remind-modal [type='radio']:focus {
            outline: none !important;
            --tw-ring-offset-width: none !important;
        }

        textarea::placeholder, input::placeholder {
            color: var(--gray2) !important;
            font-weight: 400 !important;
        }

        .select_bg_down {
            background-image: url(/images/down_2.png) !important;
            background-size: 15px;
        }

        [hidden] {
            display: none !important;
        }
    </style>
@endpush
@section('content')
    <div class="bg-[#EBEFF5] p-[20px] h-[calc(100vh - 79px)]" id="edit_formanswer_v3" v-cloak>
        <div class="d-flex justify-content-between align-items-center mb-[30px] px-[15px] bg-[#FFFFFF] p-[20px] rounded-[10px] w-[1000px]">
            <div>
                <div class="text-[18px] text-[#222222] font-[600]">フォーム編集</div>
                <div class="text-[14px] text-[#888888] font-[300]">
                    <a href="/basic/form-answer" class="underline">フォーム一覧 </a>> フォーム編集
                </div>
            </div>
            <div class="gap-x-[30px] px-[15px] items-center d-flex">
                <div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <p class="text-[14px] text-[#222222]">管理名</p>
                            <div class="box-tooltip ml-[9px]">
                                <i class="fas fa-question-circle !text-[14px] !text-[#888888]"></i>
                                <div class="tooltipp"
                                     style="left: -150px; width: 330px;    z-index: 9999; color: #222222; font-size: 14px; font-weight: 400">
                                    <p>お客様に表示されるフォーム名の編集は <br>各種設定 > LINEトーク画面・フォーム名表示
                                        <br>より変更が可能です。</p>
                                </div>
                            </div>
                        </div>

                        <span class="text-[12px] text-[#888888]">@{{ countText(formAnswer.system_name) }}/ 50</span>
                    </div>
                    <label>
                        <input type="text"
                               v-model="formAnswer.system_name"
                               v-on:blur="saveEditSystemName()"
                               class="mt-[8px] rounded-[4px] font-[300] !border-[#DDDDDD] text-[#222222] !w-[300px] !h-[40px] px-[10px] text-[14px]">
                    </label>
                </div>
                <div>
                    <p class="text-[14px] text-[#222222]">フォルダ</p>
                    <label>
                        <select class="select_bg_down mt-[8px] font-[300] rounded-[4px] border-[#DDDDDD] w-[300px] h-[40px] bg-[#FFFFFF] text-[14px]"
                                v-model="formAnswer.group_id" v-on:change="saveEditGroup">
                            {{--                    <option value="0" style="font-weight: lighter;">未分類</option>--}}
                            @foreach($list_folder as $folderId => $folderName)
                                <option value="{{ $folderId }}"
                                        style="font-weight: lighter;">{{ $folderName }}</option>
                            @endforeach
                        </select>
                    </label>
                </div>
            </div>

            {{--            <a href="/basic/form-answer" class="text-[16px] underline text-[#5799DB]">フォーム一覧へ戻る</a>--}}
        </div>
        <div class="tab-header nav nav-tabs px-[25px] flex" style="border: none">
            <ul class="flex" style="position: relative">
                <li class="text-[14px] w-[140px] h-[44px] justify-center cursor-pointer bg-[#FFFFFF] px-[10px] rounded-t-[5px] h-[34px] d-flex align-items-center mr-[10px]"
                    @click="changeEditFormTab(1)" :class="editFormTab == 1 ? 'active' : ''">
                    <a class="!text-[#888888] font-w-bold">フォーム編集</a>
                </li>
                <li class="text-[14px] w-[140px] h-[44px] justify-center cursor-pointer bg-[#FFFFFF] px-[10px] rounded-t-[5px] h-[34px] d-flex align-items-center mr-[10px] position-relative"
                    @click="changeEditFormTab(5)" :class="editFormTab == 5 ? 'active' : ''">
                    <a class="!text-[#888888] font-w-bold">共通デザイン設定</a>
                </li>
                <li class="text-[14px] w-[210px] h-[44px] justify-center cursor-pointer bg-[#FFFFFF] px-[10px] rounded-t-[5px] h-[34px] d-flex align-items-center mr-[10px]"
                    @click="changeEditFormTab(2)" :class="editFormTab == 2 ? 'active' : ''">
                    <a class="!text-[#888888] font-w-bold">メッセージ・アクション設定</a>
                </li>
                <li class="text-[14px] w-[140px] h-[44px] justify-center cursor-pointer bg-[#FFFFFF] px-[10px] rounded-t-[5px] h-[34px] d-flex align-items-center mr-[10px]"
                    @click="changeEditFormTab(3)" :class="editFormTab == 3 ? 'active' : ''">
                    <a class="!text-[#888888] font-w-bold">診断コンテンツ</a>
                </li>
                <li class="text-[14px] w-[140px] h-[44px] justify-center cursor-pointer bg-[#FFFFFF] px-[10px] rounded-t-[5px] h-[34px] d-flex align-items-center"
                    @click="changeEditFormTab(4)" :class="editFormTab == 4 ? 'active' : ''">
                    <a class="!text-[#888888] font-w-bold">各種設定</a>
                </li>
                <div class="common-setting-tooltip font-s16 font-w-bold text-white py-[10px]" v-if="showTooltip">
                    <span class="cursor-pointer" @click="disableTooltip">+</span>
                    フォーム全体に共通するデザインの設定ができます
                </div>
            </ul>
            <button class="text-[#888888] font-semibold w-[130px] h-[35px] shadow-[0px_2px_2px_#0000001A] bg-[#FFFFFF] ml-[20px] rounded-[5px] hover:opacity-[.7] text-[14px]"
                    @click="openModalURLLink('https://liff.line.me/{{$liff_id}}?unique_key='+formAnswer.unique_key+'&ts={{ time() }}')"
            >送信用URL <i class="fas fa-paper-plane rotate-[42deg]"></i></button>
        </div>
        <div class="tab-content bg-[#FFFFFF] rounded-[10px] w-[1000px]">
            <div class="tab-pane fade in rounded-[10px]" :class="editFormTab == 1 ? 'active' : ''" id="edit-form-content">
{{--                <div class="flex py-[10px] px-[15px]">--}}
{{--                    <a href="/basic/form-answer/common-design-setting/{{ $id }}">--}}
{{--                        <button class="text-[14px] w-[150px] h-[40px] text-[#5799DB] font-semibold border border-solid border-[#5799DB] mr-[8px] rounded-[4px]">--}}
{{--                            <i class="far fa-pen-nib mr-[10px]"></i>共通デザイン設定--}}
{{--                        </button>--}}
{{--                    </a>--}}
{{--                    <a href="/basic/form-answer/form-render/{{ $form_answer->unique_key }}?mode=preview" target="_blank">--}}
{{--                        <button class="text-[14px] w-[150px] h-[40px] text-[#5799DB] font-semibold border border-solid border-[#5799DB] mr-[8px] rounded-[4px]">--}}
{{--                            <i class="fas fa-eye mr-[10px]"></i>プレビュー--}}
{{--                        </button>--}}
{{--                    </a>--}}
{{--                    <button @click="openModalURLLink('https://liff.line.me/{{$liff_id}}?unique_key='+formAnswer.unique_key+'&ts={{ time() }}')"--}}
{{--                            type="button"--}}
{{--                            class="text-[14px] w-[150px] h-[40px] text-[#5799DB] font-semibold border border-solid border-[#5799DB] mr-[8px] rounded-[4px]">--}}
{{--                        <i class="fas fa-paper-plane rotate-[42deg] mr-[10px]"></i>送信用URL--}}
{{--                    </button>--}}
{{--                </div>--}}
                <div class="form-items pt-[20px]">
                    @include('basic.form_answer.v3.form_items')
                </div>
            </div>
            <div class="tab-pane fade in rounded-[10px]" :class="editFormTab == 2 ? 'active' : ''" id="set-action">
                @include('basic.form_answer.v3.setting_action')
                @include('basic.form_answer.v3.modal.setting_remind')
                @include('basic.form_answer.v3.modal.distribution_datetime')
            </div>
            <div class="tab-pane fade in rounded-[10px]" :class="editFormTab == 3 ? 'active' : ''"
                 id="diagnostic-content">
                @include('basic.form_answer.v3.diagnostic_content')
                @include('basic.form_answer.v3.modal.qrCode_formanswer')
            </div>
            <div class="tab-pane fade in rounded-[10px]" :class="editFormTab == 4 ? 'active' : ''"
                 id="various-settings">
                <other-settings :form_id="form_id" :change_tab="otherSettingDefaultTab" :update_setting_page_confirm="formAnswer.setting_page_confirm"></other-settings>
            </div>
            <div class="tab-pane fade in rounded-[10px]" :class="editFormTab == 5 ? 'active' : ''" id="settingCommon">
                @include('basic.form_answer.v3.setting_common')
            </div>

        </div>

        @include('basic.form_answer.v3.modal.formanswer_friend_information')
        @include('basic.form_answer.modal.modal_add_item_form')
        @include('basic.form_answer.modal.modal_url_link')
        @include('basic.form_answer.modal.modal_confirm_delete_remind')
    </div>

    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
@endsection
@push('js')
    <script>
        var domainMedia = '