@extends('layout.basic.main')
@section('title', 'クロス分析（作成）')
@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"
          integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="{{asset('css/cross_analysis/create.css')}}?v={{config("sns-line.version")}}">

    <style>
        #crossAnalysisAdd label {
            font-size: inherit;
            font-weight: inherit;
        }

        #crossAnalysisAdd input::placeholder {
            color: #E0E0E0;
        }

        /* pagination style */
        #crossAnalysisAdd .active {
            background-color: white !important;
            border: 1px solid #5799DB;
        }

        #crossAnalysisAdd .active button {
            color: #5799DB;
        }

        #crossAnalysisAdd .dropdown-menu {
            min-width: 103px;
            top: -155px
        }

        #crossAnalysisAdd .open > .dropdown-menu {
            display: flex;
            flex-direction: column;
        }

        .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 id="crossAnalysisAdd" class="text-[#222222] text-[14px] font-[300]" v-cloak style="position: relative">
        <div class="w-full h-[100px] bg-[#FFFFFF] flex items-center">
            <div class="w-[300px] ml-[17px]">
                <div class="flex justify-content-between">
                    <label>管理名</label>
                    <span class="text-[12px] text-[#888888]">@{{ name.length ?? 0 }}/20</span>
                </div>
                <input type="text" class="rounded-[4px] border w-full !h-[32px] mt-[7px] !pl-[10px] text-[#2B2F36] !text-[14px]"
                       v-model="name"
                       maxlength="20">
            </div>
            <div class="w-[300px] ml-[30px]">
                <div>
                    <label for="">フォルダ</label>
                </div>
                <select class="rounded-[4px] border border-solid border-[#DDDDDD] w-full !h-[32px] mt-[7px] text-[#2B2F36] !text-[14px]"
                        v-model="group_id">
                    <option value="0">未分類</option>
                    <option v-for="(item,index) in groups" :value="item.id">@{{ item.name }}</option>
                </select>
            </div>
            <div class="text-[#888888] ml-[27px] mt-[25px]">
                <a href="{{ route('index.crossAnalysis') }}"
                   class="font-[300] hover:text-[#888888] hover:opacity-70 underline hover:underline">クロス分析一覧</a>
                <span class="mr-[25px]">> 分析リスト編集</span>
            </div>
        </div>

        @include('basic.cross_analysis.v2.components.create.section_modal_filter')

        <div v-show="cr_step == 1">
            @include('basic.cross_analysis.v2.components.create.register_filter')
        </div>

        <div class="min-w-[600px] max-w-[100%] inline-block bg-[#FFFFFF] rounded-[10px] mt-[16px] ml-[17px] p-0" v-show="cr_step == 2">
            @include('basic.cross_analysis.v2.components.create.register_condition')

            <div class="flex justify-content-between items-center">
                <div class="px-[25px] pt-[5px] pb-[13px] flex items-center mt-[18px]">
                    <button class="w-[110px] h-[40px] border border-solid border-[#5799DB] text-[#5799DB] rounded-[5px]"
                            v-on:click="saveCrossV2()">
                        保存・更新
                    </button>
                    <button class="w-[110px] h-[40px] text-[#888] border border-solid border-[#DDDDDD] rounded-[5px] ml-[10px]"
                            v-on:click="backStep(1)">
                        戻る
                    </button>
                </div>

                <div class="ml-[30px] mr-[25px] mt-[10px]">
                    @include('basic.cross_analysis.v2.components.pagination')
                </div>
            </div>
        </div>
    </div>
    @include('layout.modal_filter_v2')
@endsection

@push('js')
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script>
        var token = "{!! csrf_token() !!}";
        var group_id = "{!! $folderCookie !!}";
        var idCross = "{!! $idCross !!}";
        var basic_home_new = [];
        var list_status = null;
        list_status.forEach(function (item) {
            basic_home_new.push({
                k: item.id,
                text: item.name_status,
                bg: item.color,
                'class': 'default',
                show: !1,
                stt: 1,
                value: item.id
            });
        });
        var params = [];
        var getScenario = null;
        var conversion = null;
    </script>
    <script src="/js/tailwindcss.js"></script>
    <script src="/chat_files/clipboard.min.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/cross_analysis/v2/pagination.js?v={{config("sns-line.version")}}"></script>
    <script type="application/javascript"
            src="/js/infor_friend/components/list_friend.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/cross_analysis/v2/edit.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/cross_analysis/create.js?v={{config("sns-line.version")}}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script>
        $(document).ready(function () {
            setTimeout(function () {
                $(".datepicker").datepicker({
                    dateFormat: 'yy-mm-dd',
                    language: 'ja',
                })
            }, 2000);
            $('#cr_table_header_condition').sortable({
                handle: ".drag-title-handle",
                axis: "x",
                cursor: "move",
                update: function () {
                    let x = $(this).sortable('toArray', {attribute: 'data-index'});
                    crossAnalysisAdd.sortFilterName(x);
                }
            });
            $('#section_data_rows').sortable({
                handle: ".drag-handle",
                cursor: "move",
                update: function () {
                    let x = $(this).sortable('toArray', {attribute: 'data-index'});
                    crossAnalysisAdd.sortRow(x);
                }
            });

            $(document).ready(function () {
                setTimeout(function () {
                    $('#cr_section_data_table').css('opacity', 1)
                }, 1000);
            });
        });
    </script>
@endpush