@extends('layout.basic.main')
@section('title', 'QRコードアクション（編集）')

@push('js')
    <script src="/js/tailwindcss.js"></script>
@endpush
@push('css')
    <link rel="stylesheet" href="/css/jquery-ui.css">
    <link rel="stylesheet" href="{{asset('css/form_answer/common-v3.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="{{asset('css/qr_code/edit_qr_code_v2.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" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    {{--    <link rel="stylesheet" href="/css/plugins/timepicker/bootstrap-timepicker.css">--}}

    <style>
        :root {
            --text-color: #222222;
            --gray1: #888888;
            --gray2: #E0E0E0;
            --gray3: #F8F8F8;
            --gray4: #DDDDDD;
            --blue: #5799DB;
            --red: #F44336;
            --line-color: #DDDDDD;
        }
        
        body {
            background: #F5F7FA;
        }

        .custom_calendar_content {
            padding: 0 !important;
        }
        .tab-header ul li {
            position: relative;
        }
        .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-radius: 0;
        }
        .tab-header .active:before {
            content: "";
            width: 100%;
            height: 5px;
            background: #5799DB;
            position: absolute;
            top: -5px;
            border-radius: 10px 10px 0 0;
        }

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

        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;
        }

        .tab-pane.active {
            background-color: #F5F7FA !important;
        }
        .toastMessage button {
            color: var(--gray1);
            margin-left: 30px;
        }
        .toastMessage {
            bottom: 70px !important;
        }

        .i-tooltip {
            cursor: pointer;
            position: relative;
        }

        .i-tooltip:hover > .hide {
            display: block !important;
        }

        .toastMessage::before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background-image: url('/images/circle-check.svg');
            background-size: cover;
            margin-right: 3px;
        }
    </style>
@endpush
@section('content')
    <div class="bg-[#F5F7FA] p-[20px] h-[calc(100vh - 79px)] max-w-[1150px]" id="edit_landing_v2" v-cloak>
        <div class="pl-[25px]">
            @include('basic.qr_code.v2.components.header_landing')
        </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-[40px] justify-center cursor-pointer bg-[#FFFFFF] px-[10px] rounded-t-[10px] d-flex align-items-center mr-[10px]"
                    @click="changeTab(1)" :class="tab == 1 ? 'active' : ''">
                    <a class="!text-[#888888] font-[300]">基本設定</a>
                </li>
                <li class="text-[14px] w-[140px] h-[40px] justify-center cursor-pointer bg-[#FFFFFF] px-[10px] rounded-t-[10px] d-flex align-items-center mr-[10px] position-relative"
                    @click="changeTab(2)" :class="tab == 2 ? 'active' : ''">
                    <a class="!text-[#888888] font-[300]">外部連携</a>
                </li>
                <li class="text-[14px] w-[140px] h-[40px] justify-center cursor-pointer bg-[#FFFFFF] px-[10px] rounded-t-[10px] d-flex align-items-center mr-[10px] position-relative"
                    @click="changeTab(3)" :class="tab == 3 ? 'active' : ''">
                    <a class="!text-[#888888] font-[300]">QRコード表示</a>
                </li>
            </ul>

        </div>
        <div class="tab-content">
            <div class="tab-pane fade in rounded-[10px] !bg-[#F5F7FA]" :class="tab == 1 ? 'active' : ''" id="set-action">
                @include('basic.qr_code.v2.components.setting_basic') 
            </div>
            <div class="tab-pane fade in rounded-[10px] !bg-[#F5F7FA] " :class="tab == 2 ? 'active' : ''" id="set-action">
                @include('basic.qr_code.v2.components.setting_external_link')
            </div>
            <div class="tab-pane fade in rounded-[10px] !bg-[#F5F7FA] " :class="tab == 3 ? 'active' : ''" id="set-action">
                @include('basic.qr_code.v2.components.qr_display_tab')
            </div>
        </div>
    </div>

    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
    @include('basic.qr_code.v2.modal.steps')
@endsection
@push('js')
    <script>
        var id = "{{ $id }}";
        var landing = @if(!empty($landingRecord)) null @else null @endif;
        var basic_home_new = [];
        var params = [];
        var hideActionIntroModal = "{{ $hideActionIntroModal ?? false }}"
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/javascript/javascript.min.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/form_answer/vee-validate_ja.min.js"></script>
    <script src="/js/form_answer/vue.min.js"></script>
    <script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="/tinymce/langs/ja.js"></script>
    <script src="/js/validate/config.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="/js/form_answer/moment.min.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

    <script src="/js/qr_code/v2/mixins/setting_detail.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/setting_qr_off.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/setting_introduce.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/setting_option.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/setting_limit.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/setting_external_link.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/setting_basic.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/qr_display_tab.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/edit.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
    <script src="/js/qr_code/v2/setting_intro_steps.js?v={{config('sns-line.version')}}"></script>
@endpush