@push('css')
    <style>
        .notify-checkboxes .checkbox-inline {
            margin-left: 10px;
            padding-bottom: 5px;
            margin-right: 10px;
            font-size: 14px;
        }

        .notify-checkboxes .checkbox-inline input[type=checkbox] {
            margin-top: 0;
        }

        .checkbox-inline-helper {
            position: relative;
            top: 5px;
            margin: 0 1em
        }

        .checkbox-inline-helper:first-child {
            margin-left: 0
        }

        .checkbox-inline-helper:last-child {
            margin-right: 0
        }

        .form-group {
            margin-bottom: 5px;
        }

        .help-block {
            margin-bottom: 0;
        }
        .modal-backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1040;
            background-color: #000 !important;
        }
        .modal-backdrop.in {
            display: block;
        }
        #newFunnelModal {
            padding: 0;
            font-size: 14px !important;
        }

        .table-condensed th {
            width: 18%;
        }

        #newFunnelModal th {
            background: #f7f4f4 !important;
            color: #444 !important;
        }
    </style>
@endpush
<!-- Modal -->
<div class="modal fade" id="newFunnelModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="padding: 0 !important;">
    <div class="modal-dialog" style="width: 900px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true" style="color:black !important;font-size: 25px">×</span></button>
                <h4 class="modal-title" id="newFunnelModalLabel">絞り込み設定</h4>
            </div>
            <div id="funnel_editor">
                <div class="funnel-editor">
                    <div class="modal-body">
                        <div class="panel panel-default">
                            <div class="panel-heading panel-heading-opener">
                                「すべて満たす」必要がある条件 <b>(and条件)</b></div>
                            <div class="panel-body">
                                <table class="table table-bordered table-striped table-condensed">
                                    <tbody>
                                    <tr class="">
                                        <th><span>名前</span>
                                        </th>
                                        <td>
                                            <div class="form-horizontal">
                                                <div class="form-group">
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control" name="modal_name_filter" id="modal_name_filter">
                                                        <span class="help-block"> スペースで区切るといずれかにあてはまる友だちを絞り込めます </span>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-sm-12"><span class="checkbox-inline-helper">を</span>
                                                        <label class="checkbox-inline">
                                                            <input id="filter_type_1" name="modal_name_filter_type[]" type="checkbox" value="1">LINE登録名
                                                        </label>
                                                        <label class="checkbox-inline">
                                                            <input id="filter_type_2" name="modal_name_filter_type[]" type="checkbox" value="2"> 本名
                                                        </label>
                                                        <label class="checkbox-inline">
                                                            <input id="filter_type_3" name="modal_name_filter_type[]" type="checkbox" value="3">システム表示名
                                                        </label>
                                                        <span class="checkbox-inline-helper">から検索</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="">
                                        <th><span>タグ</span>
                                        </th>
                                        <td>
                                            <div class="form-horizontal" order="1">
                                                <div class="form-group">
                                                    <div class="col-sm-12">
                                                        <div class="item-selector">
                                                            <input name="modal_add_tag_ids" type="hidden" :value="add_tag_ids" id="modal_add_tag_ids">
                                                            <div tabindex="0" class="input-area openable-area multi-area hasitem-area">
                                                                <span aria-hidden="true" class="glyphicon input-glyph" v-on:click="showAddTags()"></span>
                                                                <span class="itemlabel" v-for="(item_name, index) in items_add_tag">
                                                                    <span>@{{ item_name }}</span>
                                                                    <i class="glyphicon glyphicon-remove" v-on:click="clearTags('add',index)"></i>
                                                                </span>
                                                                <div class="searchbox" style="width: 200px;"><input style="width: 180px;" placeholder="タグ名を入力" disabled="disabled" id="search_tag"></div>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                            <div  class="itempool float-pool" id="modal_itempool_add" style="display: none">
                                                                <div>
                                                                    <div class="group_selector">
                                                                        <ul style="text-align: left;">
                                                                            <li class="unique-col group_display"
                                                                                v-bind:class="{'selected':(group_open==0)}"
                                                                                v-on:click="showTags(0)" id="modal_group_id_0">
                                                                                <i class="glyphicon group-icon"></i>
                                                                                <span>未分類</span>
                                                                                (@{{ count_default }})
                                                                            </li>
                                                                            <li class="unique-col group_display"
                                                                                v-for="(category, index) in sortedCategories"
                                                                                v-bind:class="{'selected':(group_open==category.id)}"
                                                                                v-on:click="showTags(category.id)"
                                                                                :id="'modal_group_id_'+category.id">
                                                                                <i class="glyphicon group-icon"></i>
                                                                                <span>@{{ category.name }}</span>
                                                                                (@{{ category.count }})
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                    <div class="item_selector" style="text-align: left;">
                                                                        <ul id="modal_tags_0"
                                                                            class="tags_display"
                                                                            v-bind:style="group_open==0 ? 'display:block' : 'display: none'">
                                                                            <li v-for="(tag_item, index) in items_default"
                                                                                v-on:click="addTags(tag_item.id, tag_item.name)">
                                                                                <span class="li-itemname"><span>@{{ tag_item.name }}</span></span>
                                                                            </li>
                                                                        </ul>
                                                                        <ul v-for="(tags_item, index) in items_tag"
                                                                            :id="'modal_tags_'+tags_item.group_id"
                                                                            class="tags_display"
                                                                            v-bind:style="group_open==tags_item.group_id ? 'display:block' : 'display: none'">
                                                                            <li v-for="(tag_item, index) in tags_item.tags"
                                                                                v-on:click="addTags(tag_item.id, tag_item.name)">
                                                                                <span class="li-itemname"><span>@{{ tag_item.name }}</span></span>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-sm-8">
                                                        <select name="modal_tag_filter_option" id="modal_tag_filter_option" class="form-control">
                                                            <option value="0">選択したタグのいずれか1つ以上を含む人</option>
                                                            <option value="1">選択したタグをすべて含む人</option>
                                                            <option value="2">選択したタグを1つ以上含む人を除外</option>
                                                            <option value="3">選択したタグを全て含む人を除外</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="">
                                        <th>
                                            <span>友だち登録日</span></th>
                                        <td>
                                            <div class="form-horizontal">
                                                <div class="vdp-datepicker col-sm-5">
                                                    <div class="input-group">
                                                        <input name="modal_from_filter" id="modal_from_filter" onkeydown="return clearDateFilter(event, 'from')" type="text" placeholder="日付選択" class="date-range-input">
                                                    </div>
                                                </div>
                                                <div class="col-sm-2">
                                                    <div class="col-description">から</div>
                                                </div>
                                                <div class="vdp-datepicker col-sm-5">
                                                    <div class="input-group">
                                                        <input name="modal_to_filter" id="modal_to_filter" onkeydown="return clearDateFilter(event, 'to')" type="text" placeholder="日付選択" class="date-range-input">
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="">
                                        <th><span>ステップ</span>
                                        </th>
                                        <td>
                                            <div class="form-horizontal" order="3">
                                                <div class="form-group">
                                                    <div class="col-sm-12">
                                                        <div class="item-selector">
                                                            <div tabindex="0" class="openable-area single-area col-sm-12">
                                                                <select class="form-control" id="modal_scenario_filter" name="modal_scenario_filter">
                                                                    <option value="" selected="selected">選択なし</option>
                                                                    @if(!empty($scenario) && count($scenario) > 0)
                                                                        @foreach($scenario as $item_scenario)
                                                                            <option value="{!! $item_scenario->id !!}">{!! $item_scenario->name !!}</option>
                                                                        @endforeach
                                                                    @endif
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-sm-6">
                                                        <select id="modal_scenario_filter_option" name="modal_scenario_filter_option" class="form-control">
                                                            <option value="0">を購読中の人</option>
                                                            <option value="1">を現在購読していない人</option>
                                                            <option value="2">の？日目まで送信済みの人</option>
                                                            <option value="3">を読了した人</option>
                                                            <option value="4">を読了していない人</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <div class="input-group input-group-sm">
                                                            <input name="modal_scenario_start_day_filter" id="modal_scenario_start_day_filter" oninput="checkNumber(this);" min="0" class="form-control" type="number">
                                                            <div class="input-group-addon">日目</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="">
                                        <th><span>コンバージョン</span></th>
                                        <td>
                                            <div class="form-horizontal" order="4">
                                                <div class="form-group">
                                                    <div class="col-sm-12">
                                                        <div class="item-selector">
                                                            <div tabindex="0" class="input-area openable-area multi-area">
                                                                <input name="modal_add_conversion_ids" type="hidden" :value="add_conversion_ids" id="modal_add_conversion_ids">
                                                                <span aria-hidden="true" class="glyphicon input-glyph" v-on:click="showConversions()"></span>
                                                                <span class="itemlabel" v-for="(item_name, index) in items_conversion_name">
                                                                    <span>@{{ item_name }}</span>
                                                                    <i class="glyphicon glyphicon-remove" v-on:click="clearConversion(index)"></i>
                                                                </span>
                                                                <div class="searchbox" style="width: 200px;">
                                                                    <input style="width: 180px;" placeholder="コンバージョン名を入力" id="search_conversion">
                                                                </div>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                            <div id="modal_itempool_conversions" class="itempool float-pool" style="display: none;">
                                                                <div>
                                                                    <div class="item_selector">
                                                                        <ul style="text-align: left;">
                                                                            <li v-for="(conversion, index) in conversions"
                                                                                v-on:click="addConversion(conversion.id, conversion.name)">
                                                                                <span class="li-itemname"><span>@{{ conversion.name }}</span></span>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-sm-8">
                                                        <select id="modal_conversion_filter_option" name="modal_conversion_filter_option" class="form-control">
                                                            <option value="0">選択したコンバージョンのいずれか1つ以上を含む人</option>
                                                            <option value="1">選択したコンバージョンをすべて含む人</option>
                                                            <option value="2">選択したコンバージョンを1つ以上含む人を除外</option>
                                                            <option value="3">選択したコンバージョンを全て含む人を除外</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="trchecked">
                                        <th>
                                            <span>メッセージ確認状況 </span></th>
                                        <td>
                                            <div class="form-horizontal">
                                                <div class="notify-checkboxes">
                                                    <label class="checkbox-inline">
                                                        <input id="mark_1" name="modal_mark_filter[]" type="checkbox" value="0">
                                                        <span class="label label-info">未確認</span>
                                                    </label>
                                                    <label class="checkbox-inline">
                                                        <input id="mark_2" name="modal_mark_filter[]" type="checkbox" value="1">
                                                        <span class="label label-default">確認済み</span>
                                                    </label>
{{--                                                    <label class="checkbox-inline">--}}
{{--                                                        <input id="mark_3" name="modal_mark_filter[]" type="checkbox" value="2">--}}
{{--                                                        <span class="label label-primary">未返信（マガジンコメント）</span>--}}
{{--                                                    </label>--}}
{{--                                                    <label class="checkbox-inline">--}}
{{--                                                        <input id="mark_4" name="modal_mark_filter[]" type="checkbox" value="3">--}}
{{--                                                        <span class="label label-primary">未返信（重要度低）</span>--}}
{{--                                                    </label>--}}
{{--                                                    <label class="checkbox-inline">--}}
{{--                                                        <input id="mark_5" name="modal_mark_filter[]" type="checkbox" value="5">--}}
{{--                                                        <span class="label label-warning">要対応（質問）</span>--}}
{{--                                                    </label>--}}
{{--                                                    <label class="checkbox-inline">--}}
{{--                                                        <input id="mark_6" name="modal_mark_filter[]" type="checkbox" value="7">--}}
{{--                                                        <span class="label label-warning">要対応（トラブル）</span>--}}
{{--                                                    </label>--}}
{{--                                                    <label class="checkbox-inline">--}}
{{--                                                        <input id="mark_7" name="modal_mark_filter[]" type="checkbox" value="8">--}}
{{--                                                        <span class="label label-danger">要対応（クロージング）</span>--}}
{{--                                                    </label>--}}
{{--                                                    <label class="checkbox-inline">--}}
{{--                                                        <input id="mark_8" name="modal_mark_filter[]" type="checkbox" value="9">--}}
{{--                                                        <span class="label label-danger">要対応（クレーム）</span>--}}
{{--                                                    </label>--}}
                                                </div>
                                                <div>
                                                    <span class="help-block">複数選択した場合、いずれかにあてはまる友だちを絞り込めます</span>
                                                    <div class="clearfix"></div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <span class="btn btn-success btn-lg btn-block" v-on:click="testFilter()" style="background:#385de2;width: 150px;padding: 5px !important;margin-left: 0 !important;">この条件で決定</span>
                        <div id="filter-preview" style="background-color: #e1e1e1; min-height: 100px; padding: 5px;margin-top: 15px">
                            <div>
                                <span>条件: <button type="button" class="btn btn-sm btn-success" onclick="showUserList()">該当者表示</button></span>
                                <span class="pull-right" style="margin: 0 !important;"><button type="button" class="btn btn-sm btn-danger" onclick="clearFilter()">設定解除</button></span>
                            </div>
                            <div id="preview_content">
                                {!! isset($filter) ? $filter['filter_preview_content'] : '条件なし（全員）' !!}

                            </div>
                        </div>
                        <p style="color: #ff0000; font-weight: bold;">※<span id="filter_counter">0</span>人へ送信されます</p>
                    </div>
                    <div class="modal-footer"><span class="btn btn-success btn-lg btn-block" v-on:click="saveFilter()">決定</span></div>
                </div>
                <div class="modal-body" style="display: none;">
                    <p class="text-center">読み込み中...</p>
                </div>
            </div>
    </div>
</div>