@extends('layout.basic.main')
@section('title', empty($idCross) ? 'クロス分析（作成）':'クロス分析（編集）')
@push('css')
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">

<style>

    .style-text {

        font-weight: bold;
        font-size: 18px;
        padding: 3px 0 3px 15px;
        border-left: 7px solid #08BF5A;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    #crossAnalysisAdd input[type="text"]{
        height: 36px !important;
    }
    #crossAnalysisAdd input[type="radio"]{
        transform: scale(1.5);
    }
    .b-select{
        position: relative;
    }
    .b-select i {
        position: absolute;
        right: 9px;
        top: 7px;
        font-size: 22px;
    }
    div,a,span{
        font-weight: bold;
    }
    .h-col-1 {
        width: 200px;
        height: 100px;
        border: 2px solid #7D9195;
        position: relative;
    }

    .col-left{
        position: relative;
    }

    .col-left span{
        position: absolute;
        top: 70px;
        left: 15px;
        color: #ffffff;
    }

    .col-left:before{
        position: absolute;
        border-bottom: 99px solid #7D9195;
        top: 0;
        bottom: 0;
        right: 0;
        left:0;
        border-right: 200px solid transparent;
        content: "";
        z-index: -1
    }
    .col-right{
        text-align: right;
        padding-right: 15px;
        margin-top: 15px
    }
    .h-col-child{
        height: 100px;
        width: 100px;
        border: 2px solid #7D9195;
        border-left: 1px ;
        padding: 5px;
    }
    .customn-i{
        border: 1px solid #7D9195;
        border-radius: 50px;
        font-size: 11px;
        padding: 3px 3px 4px 5px;
    }
    .text-short{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-align: left;
        font-size: 13px;
        margin-top: 15px;
    }
    .h-col-child-title{
        display: flex;
        justify-content: space-between;
    }
    .header-x{
        max-width: 1200px;
        display: inline-flex;
    }
    .number{
        font-family: Arial, "Open Sans", "Helvetica Neue", Helvetica, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
        border: 1px solid;
        border-radius: 50%;
        font-size: 10px;
        width: 18px;
        height: 18px;
        /* padding: 0px 5px 3px 5px; */
        display: inline-block;
        text-align: center;
        line-height: 16px;
    }


    .box-radio label {
        display: flex;
        cursor: pointer;
        font-weight: 500;
        position: relative;
        overflow: hidden;
        margin-bottom: 0;
        /* Accessible outline */
        /* Remove comment to use */
        /*
            &:focus-within {
                    outline: .125em solid $primary-color;
            }
        */
    }
    .box-radio label input {
        position: absolute;
        left: -9999px;
    }
    .box-radio label input:checked + span {
        background-color: #7D9195;
        color: white;
    }
    .box-radio label input:checked + span:before {
        box-shadow: inset 0 0 0 5px #7D9195;
    }
    .box-radio label span {
        display: flex;
        align-items: center;
        padding: 0.375em 0.75em 0.375em 0.375em;
        border-radius: 5px;
        transition: 0.25s ease;
        border: 2px solid #7D9195;
        width: 139px;
        color: #7D9195;

    }
    .box-radio label span:hover {
        /*background-color: #d6d6e5;*/
    }
    .box-radio label span:before {
        display: flex;
        flex-shrink: 0;
        content: "";
        background-color: #fff;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        margin-right: 0.375em;
        transition: 0.25s ease;
        border: 1px solid #ffffff;
        box-shadow: inset 0 0 0 0.125em #7D9195;
    }
    .box-radio{
        display: flex;
        align-items: flex-start;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .box-radio>*{
        margin-right: 15px;
    }
    .box-horizontal{
        margin-top: 15px;
    }
    .box_edit{
        height: 38px;
    }
    .box-horizontal .box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border: 1px solid #F2F2F2;
    }
    .box .content-b{
        display: flex;
        align-items: center;
    }
    .content-b .stt{
        width: 70px;
    }
    .box-horizontal .box:nth-child(2n) {
        background: #F8F8F8;
    }
    .box-horizontal .box:nth-child(2n+1) {
        background: #ffffff;
    }
    .box-horizontal .box:hover{
        background-color: #F4FBF2;
    }
    .box-horizontal .box:hover > .box_edit >.line-icon{
        display: inline-block;
    }
    .box-horizontal .box_edit > .line-icon{
        display: none;
    }
    .line-icon{
        background: #ffffff;
    }


    .tem_choice {
        width: 100%;
        display: flex;
        display: -webkit-flex
    }

    .tem_choice>ul {
        width: 40%;
        height: 150px;
        overflow: scroll;
        margin-right: 2%;
        border: 1px solid #eee
    }
    .temp_folder{
        display: block;
        font-weight: 100;
    }

    .choice_detail label {
        display: block;
        font-weight: bold;
    }

    #crossAnalysisAdd .category_active {
        background-color: unset !important;
    }

    #crossAnalysisAdd .ic-fol {
        width: 15px;
        height: 15px;
        background-color: white;
        border: 1px solid #bbb;
        border-radius: 3px;
        margin-right: 10px;
        flex: 0 0 15px;
    }

    #crossAnalysisAdd .category_active .ic-fol {
        background-color: rgba(8, 191, 90, 1);
        border-color: rgba(8, 191, 90, 1);
    }
    #crossAnalysisAdd .ic-cal-ip{
        position: absolute;
        left: 8px;
        top: 7px;
        color: #7D9195;
    }
    #crossAnalysisAdd .input-cal{
        border: 2px solid rgb(125, 145, 149) !important;
        border-radius: 4px;
        padding-left: 26px;
    }
    .btn-save-cross{
        background-color: #FEC300;
        color: white !important;
    }
   
    #preview_filter{
        background-color: #F6F6F6;
        margin-bottom: 20px;
        padding: 20px;
        border-radius: 5px;
        width: 55%;
        margin-left: 20px;
    }
</style>
@endpush
@section('content')
    <div class="container-fluid pc-body">
        <div class="row">

            <div class="row" id="crossAnalysisAdd" v-cloak>
                <div class="col-sm-12">
                    <h2 style="font-size: 22px; font-weight: bold; padding: 10px 10px 10px 0">クロス分析登録</h2>
                    <form method="POST" accept-charset="UTF-8"  id="frm_conversion">
                        <input name="_token" type="hidden" value="{!! csrf_token() !!}">
                        <input name="cross_id" type="hidden" :value="cross_id">
                        <div class="row">
                            <div class="col-sm-6">
                                <label class="style-text">分析名（管理用）</label>
                            </div>
                            <div class="col-sm-6">
                                <label class="style-text">フォルダ</label>
                            </div>

                        </div>
                        <div class="row" style="align-items: baseline; display: flex">
                            <div class="col-sm-4">
                                <div class=" form-group">
                                    <div>
                                      <input class="form-control" name="name" type="text"  v-model="name"
                                           id="name" style="margin-top: 5px;">

                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2">
{{--                                <div >@{{name.length}}/10文字</div>--}}
                            </div>
                            <div class="col-sm-4 ">
                                <select  class="form-control text-center my_class" v-model="group_id" name="group_id" style="height: 36px;margin-bottom: 13px;">
                                    <option value="0">未分類</option>
                                    <option  v-for="(item,index) in groups" :value="item.id">@{{ item.name }}</option>
                                </select>

                            </div>

                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <label class="style-text">分析対象絞込み設定</label>
                            </div>
{{--                            <button type="button" class="btn btn-sns-line btn-sns-line-primary" style="margin-left: 60px; min-width: 150px; display: none;" id="btn_openModalFilter" v-on:click="openModalFilter()">絞込み</button>--}}
                            <button class="btn btn-sns-line btn-sns-line-primary"  id="btn_openModalFilter" v-on:click="openModalFilter('cross_analysis')"
                                    type="button" style="width: 124px;margin-left: 35px;"> 絞込み</button>
                            <div id="preview_filter" style=" margin-top: 10px" >
                                <span>対象人数 : @{{ count_filter }}人</span> <br>
                                <div style="display: flex">
                                     <div>
                                       <span style="    word-break: keep-all;width: 93px; display: block;">対象条件 :</span>
                                    </div>
                                    <div>
                                        <div v-if="list_preview_filter && list_preview_filter.length > 0"
                                             v-for="(preview, index) in list_preview_filter" style="font-weight: bold">
                                            @{{ preview }}
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <label class="style-text">分析基準登録 <small style="font-size: 13px">※分析基準を更新すると分析リストの履歴がリセットされますのでご注意ください。</small></label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12" style="overflow-y: hidden;overflow-x: auto;">
                               <div class="header-x">
                                   <div class="h-col-1">
                                       <div class="col-left">
                                           <span>基準軸</span>

                                       </div>
                                       <div class="col-right">分析項目</div>

                                   </div>
                                   <div class="h-col-child"  v-for="(itemP,index) in list_filter_vertical" v-if="index <10" :data-id="index">
                                       <div class="h-col-child-title">
                                           <div>
                                               <span class="number" v-bind:style="index >= 9 ? 'padding: 0px 3px 3px 3px !important;' : ''">@{{ index + 1 }}</span>
                                           </div>
                                           <div>
                                               <span><i class="far fa-arrow-left customn-i"  v-on:click="onUpdate(undefined, index, 'up')"></i></span>
                                               <span><i class="far fa-arrow-right customn-i"  v-on:click="onUpdate(undefined, index, 'down')"></i></span>
                                           </div>
                                       </div>
                                       <div class="text-short">
                                           <span v-if="itemP.search_action && itemP.search_action.length > 0" v-for="(item,ind) in itemP.search_action">@{{ item.preview }}</span>
                                           <span v-if="itemP.search_action && itemP.search_action_or.length > 0" v-for="(item,ind) in itemP.search_action_or">@{{ item.preview }}</span>
                                       </div>

                                   </div>
                               </div>
                            </div>
                        </div>
                        <div class="row ">
                            <div class="col-md-12 d-flex" v-bind:style="filter_by == 2 ? 'align-items: baseline' : 'align-items: center;'" >
                                <div class="box-radio ">
                                    <label>
                                        <input type="radio" name="radio" value="1" v-model="filter_by"/>
                                        <span>友だち情報</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="radio" value="2" v-model="filter_by" v-on:change="changeFilterBy"/>
                                        <span><div style="width: 80px; text-align: center">タグ</div></span>
                                    </label>
                                    <label>
                                        <input type="radio" name="radio" value="3" v-model="filter_by"/>
                                        <span>友だち登録日</span>
                                    </label>
                                </div>
                                <select  class="form-control text-left my_class"
                                         v-model="filter_by_friend_id"
                                         style="height: 37px; border: 2px solid #7D9195; width: 300px"
                                         v-if="filter_by == 1 && list_f_info && list_f_info.length > 0">
                                    <option value="0">選択してください</option>
                                    <option v-for="(info,index) in list_f_info" :value="info.id">@{{ info.title }}</option>
                                    <option value="0">未分類</option>
                                </select>


                                <div style="display: flex" v-show="filter_by == 3" >
                                        <div class="input-group box-date"  style="position: relative">
                                            <input class="input-cal datepicker start_date"
                                                   type="text"
                                                   readonly="readonly"
                                                   v-model="start_date"
                                                   placeholder="">
                                            <span class="ic-cal-ip"><i class="far fa-calendar"></i></span>
                                        </div>
                                        <div class="input-group box-date"  style="position: relative; margin-left: 15px">
                                            <input class="input-cal datepicker end_date"
                                                   type="text"
                                                   readonly="readonly"
                                                   {{--                                                   @click="hideErrorInfo(indexAction)"--}}
                                                   {{--                                                   :id="'content_info_date_'+indexAction"--}}
                                                   {{--                                                   :name="'content_info_date_'+indexAction"--}}
                                               {{--                                                   :data-index = "indexAction"--}}
                                               v-model="end_date"
                                               {{--                                                                   :value="(item.data.type == 3 && item.data.action == 2) ? item.data.content : ''"--}}
                                               placeholder="">
                                        <span class="ic-cal-ip"><i class="far fa-calendar"></i></span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div v-if="filter_by == 2" class="col-md-6">
                                <div style="display: flex; border: 1px solid #f2f2f2; min-height: 230px; border-radius: 5px" >
                                    <div style="width: 50%; background-color: #f2f2f2; padding: 10px 15px; height: 300px; overflow: scroll;">
                                        <ul>
                                            <li>
                                                <a class="collapsed collapse-opener" role="button" style="margin: 0;padding: 5px 10px" data-toggle="collapse" href="" aria-expanded="false" id="group_0" v-bind:class="(tag_group_open == 0)?'category_active':'folder-close'" data-id="0">
                                                    <div v-on:click="showGroupTag(0)" class="display_category" style="display: flex;align-items: baseline;font-weight: bold;color: #51595C">
                                                        <div class="ic-fol"></div>
                                                        未分類 (@{{ tag_count_default }})
                                                    </div>
                                                </a>
                                                <a v-for="(category, index) in tag_groups" style="margin: 0;padding: 5px 10px" class="collapsed collapse-opener" data-toggle="collapse" href="" aria-expanded="false" :id="'third_group_22'" :data-id="'third_22'" :data-name="'hhh'" v-bind:class="(tag_group_open == category.id)?'category_active':'folder-close'" v-on:click="showGroupTag(category.id)">
                                                    <div style="display: flex;align-items: baseline;font-weight: bold; color: #51595C;">
                                                        <div class="ic-fol"></div>
                                                        @{{ category.name }} (@{{ category.count }})
                                                    </div>
                                                </a>
                                            </li>
                                            <li></li>
                                        </ul>
                                    </div>
                                    <div style="padding: 15px; height: 300px; width: 50%; overflow: scroll;">
                                        <div class="choice_detail">
                                            <ul v-if="tag_group_open == 0 && tag_items_default && tag_items_default.length > 0">
                                                <li v-for="(item,index) in tag_items_default" :id="'tag_'+item.id" :data-id="item.id">
                                                    <label style="cursor: pointer !important;">
                                                        <input style="cursor: pointer !important;" type="checkbox" :value="item.id" class="tag_item_check" :id="'tag_item_check_'+item.id"
                                                               name="select_tag[]"
                                                               v-model="list_tags_id_checked"
                                                               v-on:change="selectTag(item)">@{{ item.name }}
                                                    </label>
                                                </li>
                                            </ul>
                                            <ul v-if="tag_group_open != 0 && tag_items && tag_items.length > 0">
                                                <li v-for="(item,index) in tag_items">
                                                    <label style="cursor: pointer !important;">
                                                        <input style="cursor: pointer !important;" type="checkbox" :value="item.id" class="tag_item_check" :id="'tag_item_check_'+item.id"
                                                               name="select_tag[]"
                                                               v-model="list_tags_id_checked"
                                                               v-on:change="selectTag(item)"
                                                        >@{{ item.name }}
                                                    </label>
                                                </li>
                                            </ul>
                                            <ul v-if="tag_items.length == 0 && tag_items_default && tag_items_default.length == 0">
                                                <li>
                                                    分類を選択して下さい
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                                <div style="display: flex; margin-bottom: 30px;    border: 1px solid #f2f2f2;padding: 10px; ">
                                    <p style="min-width: 100px;">選択した項目</p>
                                    <div v-if="list_tags_checked && list_tags_checked.length > 0" style="display: flex; flex-wrap: wrap;">
                                        <div v-for="(item,index) in list_tags_checked" style="margin-left: 3px; min-width: 100px; min-height: 20px; border-radius: 30px; background-color: #7D9195; color: white; text-align: center; padding: 2px 15px; margin-bottom: 10px">@{{ item.name }} <span v-on:click="removeTag(item.id)" style="cursor: pointer !important">x</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" :disabled="list_filter_vertical && list_filter_vertical.length >= 10" class="btn btn-sns-line btn-sns-line-primary" v-on:click="openModalFilter('filter_cross_vertical')">
                                    <i class="far fa-plus-circle "></i>
                                    <span>項目追加（@{{ list_filter_vertical.length < 10 ? (list_filter_vertical.length +1) : '10'}}/10）</span>
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-11">
                                <div class="box-horizontal">
                                    <div class="box" v-for="(itemP,index) in list_filter_vertical" v-if="index <10">
                                        <div class="content-b">
                                            <div class="stt"><span class="number" v-bind:style="index >= 9 ? 'padding: 0px 3px 3px 3px !important;' : ''">@{{ index + 1 }}</span></div>
                                            <div>
                                                <span v-if="itemP.search_action && itemP.search_action.length > 0" v-for="(item,ind) in itemP.search_action">@{{ item.preview }} <br></span>
                                                <span v-if="itemP.search_action_or && itemP.search_action_or.length > 0" v-for="(item,ind) in itemP.search_action_or">@{{ item.preview }}<br></span>
                                            </div>
                                        </div>
                                        <div class="box_edit" >
                                            <span class="line-icon" v-on:click="openModalFilterChild('filter_cross_vertical_child',itemP,index)" ><i class="fas fa-pen"></i></span>
                                            <span class="line-icon" v-on:click="removeSetting(index)"><i class="fas fa-trash-alt"></i></span>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class="row " style="margin-top: 20px">
                            <div class="col-md-12 " style="display: flex; align-items: center ; margin-top: 15px">
                                <button type="button"
                                        v-on:click="saveCross(0)"
                                        class="btn btn-sns-line btn-sns-line-lg btn-sns-line-success" style=" width: 200px; margin-right: 20px">
                                    分析基準保存・更新
                                </button>
                                <div>
                                    <span>条件保存日時</span>  @{{ formatDate(last_time_save) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 " style="display: flex; align-items: center ; margin-top: 15px">
                                <button type="button"
                                        v-on:click="saveCross(1)"
                                        class="btn btn-sns-line btn-sns-line-lg btn-sns-line-light btn-save-cross" style=" width: 200px; margin-right: 20px">
                                    分析リスト表示 <i class="fas fa-share"></i>
                                </button>
                                <div>
                                     <span>※分析リストを表示する場合は、必ず分析基準の保存・更新を行ってください。</span>
                                </div>
                            </div>
                        </div>

                </form>

                </div>
            </div>
        </div>
    </div>
    @include('layout.modal_filter_v2')

@endsection
@push('js')

    <script src="/chat_files/jquery-ui.min.js"></script>
    <script src="/js/vue-paginate.js"></script>
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script src="/chat_files/bootstrap-timepicker.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="/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/friendlist/modal_filter_v2.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/cross_analysis/create.js?v={{config('sns-line.version')}}"></script>
    <script>
        $(document).ready(function () {
            setTimeout(function () {
                $(".datepicker").datepicker({
                    dateFormat: 'yy-mm-dd',
                    language: 'ja',
                })},200);
        });
    </script>
@endpush