@extends('layout.basic.main')
@section('title','フォーム作成（共通デザイン設定）')
@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

    <style>
        #main-new {
            padding-bottom: 0;
        }

        .custom_calendar_content {
            padding: 0 !important;
        }

        p, div, span, button {
            color: #222222;
        }
        .tab-header {
            min-height: 360px;
            height: calc(-270px + 100vh);
        }
        .tab-header .active {
            background-color: #EDF4FB !important;
        }

        .tab-header .active .rectangle {
            background-color: #5799DB;
        }

        .tab-header .active p, .tab-header .active i {
            color: #5799DB;
            font-weight: 600;
        }

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

        [type='radio'] {
            accent-color: #5799DB;
            appearance: auto !important;
        }

        [type='checkbox']:focus, [type='radio']:focus {
            box-shadow: none !important;
            outline: none !important;
            --tw-ring-shadow: none !important;
        }

        label {
            font-weight: 300;
        }

        [type='radio']:checked + span {
            color: #5799DB;
            font-weight: 600;
        }

        .cl-switch > input:checked + span::before {
            background-color: #85b8b7;
        }

        .cl-switch > span::before {
            content: "";
            float: right;
            display: inline-block;
            border-radius: 100px;
            width: 40px;
            height: 20px;
            background-color: #E0E0E0;
            opacity: 1;
            vertical-align: top;
        }

        .cl-switch > input:checked + span::after {
            background-color: #08BF5A;
            transform: translateX(16px);
            left: -13px;
        }

        .cl-switch > input:checked + span::before {
            opacity: 0.2;
        }

        .cl-switch > span::after {
            content: "";
            position: absolute;
            top: 2px;
            right: 2px;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            background-color: #FFFFFF;
            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        }

        .cl-switch > input:checked {
            right: -10px;
            background-color: #85b8b7;
        }

        .cl-switch > input {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            z-index: -1;
            position: absolute;
            right: 6px;
            top: -8px;
            display: block;
            margin: 0;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            background-color: rgb(0, 0, 0, 0.38);
            outline: none;
            opacity: 0;
            transform: scale(1);
            pointer-events: none;
        }
        .gr-pattern .active .title {
            color: #5799DB;
            font-weight: 600;
        }
        input[type="radio"] {
            cursor: pointer;
        }
        .css-class input[type="text"] {
            font-size: 14px;
        }
        .css-class input[type="text"]:focus {
            border: 1px solid #66AFE9 !important;
            box-shadow: unset;
        }
        .mg-center{
            margin:  0 auto;
        }
        .css-pbtn{
            padding: 4px 10px 4px 10px;
            line-height: normal;
        }
    </style>
@endpush
@section('content')
    <div class="mt-[20px]" id="settingCommon" v-cloak>
        <div class="px-[15px]">
            <p class="text-[18px] font-semibold">共通デザイン設定</p>
            <nav class="flex mt-[5px]" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
                    <li>
                        <div class="flex items-center">
                            <a href="{{ route('form_answer.edit', ['id' => $id]) }}"
                               class="text-[#888888] text-[14px] font-light underline hover:text-blue-600">
                                フォーム編集
                            </a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <i class="fal fa-chevron-right"></i>
                            <span class="ms-1 text-[#888888] md:ms-2 text-[14px]">共通デザイン設定</span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
        <div class="flex mt-[20px] h-[100vh] border-t border-solid border-[#DDDDDD]">
            <div class="h-full border-r border-solid border-[#DDDDDD]">
                <ul class="w-[250px] tab-header">
                    <li class="flex items-center justify-between h-[60px] w-full cursor-pointer active"
                        v-on:click="getSettingCommon()"
                        href="#c" data-toggle="tab">
                        <div class="flex items-center">
                            <div class="w-[5px] h-[35px] rounded-full bg-[#E0E0E0] ml-[7px] mr-[10px] rectangle"></div>
                            <p class="text-[14px]">全体デザイン</p>
                        </div>
                        <i class="fal fa-chevron-right mr-[16px] text-[#DDDDDD]"></i>
                    </li>
                    <li class="flex items-center justify-between h-[60px] w-full cursor-pointer" href="#setting-header"
                        v-on:click="getSettingCommon()"
                        data-toggle="tab">
                        <div class="flex items-center">
                            <div class="w-[5px] h-[35px] rounded-full bg-[#E0E0E0] ml-[7px] mr-[10px] rectangle"></div>
                            <p class="text-[14px]">見出し</p>
                        </div>
                        <i class="fal fa-chevron-right mr-[16px] text-[#DDDDDD]"></i>
                    </li>
                    <li class="flex items-center justify-between h-[60px] w-full cursor-pointer" href="#setting-line"
                        v-on:click="getSettingCommon()"
                        data-toggle="tab">
                        <div class="flex items-center">
                            <div class="w-[5px] h-[35px] rounded-full bg-[#E0E0E0] ml-[7px] mr-[10px] rectangle"></div>
                            <p class="text-[14px]">区切り線</p>
                        </div>
                        <i class="fal fa-chevron-right mr-[16px] text-[#DDDDDD]"></i>
                    </li>
                    <li class="flex items-center justify-between h-[60px] w-full cursor-pointer"
                        v-on:click="getSettingCommon()"
                        href="#setting-question" data-toggle="tab">
                        <div class="flex items-center">
                            <div class="w-[5px] h-[35px] rounded-full bg-[#E0E0E0] ml-[7px] mr-[10px] rectangle"></div>
                            <p class="text-[14px]">質問項目</p>
                        </div>
                        <i class="fal fa-chevron-right mr-[16px] text-[#DDDDDD]"></i>
                    </li>
                    <li class="flex items-center justify-between h-[60px] w-full cursor-pointer" href="#setting-button"
                        v-on:click="getSettingCommon()"
                        data-toggle="tab">
                        <div class="flex items-center">
                            <div class="w-[5px] h-[35px] rounded-full bg-[#E0E0E0] ml-[7px] mr-[10px] rectangle"></div>
                            <p class="text-[14px]">ボタン</p>
                        </div>
                        <i class="fal fa-chevron-right mr-[16px] text-[#DDDDDD]"></i>
                    </li>
                    <li class="flex items-center justify-between h-[60px] w-full cursor-pointer"
                        v-on:click="getSettingCommon()"
                        href="#setting-css-class" data-toggle="tab">
                        <div class="flex items-center">
                            <div class="w-[5px] h-[35px] rounded-full bg-[#E0E0E0] ml-[7px] mr-[10px] rectangle"></div>
                            <p class="text-[14px]">CSSクラス指定</p>
                        </div>
                        <i class="fal fa-chevron-right mr-[16px] text-[#DDDDDD]"></i>
                    </li>
                </ul>
                <div class="text-center">
                    <button v-on:click="backToEdit" class="border border-solid text-[14px] border-[#DDDDDD] rounded-[5px] w-[110px] h-[40px] hover:opacity-[.7]">
                        戻る
                    </button>
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane fade in active" id="setting-all">
                    @include('basic.form_answer.v3.setting_common.setting_all')
                </div>
                <div class="tab-pane fade in" id="setting-header">
                    @include('basic.form_answer.v3.setting_common.setting_header')
                </div>
                <div class="tab-pane fade in" id="setting-line">
                    @include('basic.form_answer.v3.setting_common.setting_line')
                </div>
                <div class="tab-pane fade in" id="setting-question">
                    @include('basic.form_answer.v3.setting_common.setting_question')
                </div>
                <div class="tab-pane fade in" id="setting-button">
                    @include('basic.form_answer.v3.setting_common.setting_button')
                </div>
                <div class="tab-pane fade in" id="setting-css-class">
                    @include('basic.form_answer.v3.setting_common.setting_css_class')
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        let id = "{{ $id }}"
    </script>
    <script src="/js/tailwindcss.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="/js/form_answer/v3/setting-common.js"></script>
@endpush