@section('style')
{{--    <link href="https://cdn.datatables.net/select/1.3.4/css/select.bootstrap4.css" rel="stylesheet" type="text/css" />--}}
    <style>
        .filter-container-item{
            position: relative;
        }
        .filter-container-item::before{
            content: '';
            width: 97%;
            height: 1px;
            background: #ccc;
            position: absolute;
            bottom: 0;
            left: 50%;
            z-index: 0;
            transform: translateX(-50%);
        }
        .filter-container-item::after{
            content:'AND';
            position: absolute;
            bottom:0;
            padding: 0 10px;
            left:50%;
            transform:translate(-50%,50%);
            font-size: 0.75rem;
            line-height: 1;
            color: #ccc;
            background: #fff;
            z-index: 1;
        }
        .filter-container-item:last-child::before, .filter-container-item:last-child::after{
            content:none;
        }
    </style>
@endsection

<div class="blast blast_page_1" blast-page="1" style="display: none">
    <!-- STEP 1  -->
    @component('admin.components.step_form_pages',
    [ //'post_url'=>$post_url,
    'type'=>'blast',
    'title'=> 'Who are you sending this blast to?' ,
    'step'=>'1',
    'disable_auto_submit'=>true
    ])

        <!-- saved targets section -->
        @php $id = 'section_saved_filter_settings'; $hasError = $errors->has($id); @endphp
        @component('admin.components.form_field', [ 'class'=>'col-12', 'label'=> '<span class="text-lg text-bold mb-0">'.$form[$id]['label'].'</span>', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            <div class="container-fluid p-0">

                <div class="row w-100 m-0">

                    @php $id = 'saved_filter_select'; $hasError = $errors->has($id); @endphp
                    @component('admin.components.form_field', [ 'class'=>'col-12 col-sm-6 w-100 mx-auto mb-0 px-0 pr-sm-1', 'label'=>  $form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

                    <select id="{{$id}}" class="w-100 form-control select2" style="width: 100%"
                            data-placeholder="{{$form[$id]['placeholder']}}" value="{{$form[$id]['value']}}">
{{--                        <option value="none">New Custom Filter</option>--}}
                    </select>
                    <small id="filter_last_update" class="status-item text-muted mt-1 d-inline-block"></small>
                    @endcomponent

                    <div class="col-12 col-sm-6 pr-sm-0 mt-1">
                        <div class="row">
                            <div class="col-6 p-0 pr-1 status-item" id="save_existing_filter_wrap">
                                <button id="save_existing_filter" type="button" class="status-item btn btn-sm btn-block btn-default">
                                    Update Settings
                                </button>
                            </div>

                            <div class="col-6 p-0 status-item" id="save_new_filter_wrap">
                                <button id="save_new_filter" type="button" class="status-item btn btn-sm btn-block btn-default">
                                    <i class="fas fa-heart fa-xs mr-1"></i>
                                    <span>Save filter settings</span>
                                </button>
                            </div>

                            <div class="col-12 p-0">
                                @php $id = 'save_filter_input'; $hasError = $errors->has($id); @endphp
                                @component('admin.components.form_field', [ 'class'=>'status-item col-12 p-0 m-0 mb-1', 'label'=>  $form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input type="text" class="form-control form-control-sm" id="{{$id}}" name="{{$id}}"  placeholder="{{$form[$id]['placeholder']}}" value="{{$form[$id]['value']}}">
                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent
                            </div>
                            <div class="col-6 p-0 pr-1">

                                <button id="cancel_save_filter" type="button" class="status-item btn btn-sm btn-block btn-default">
                                   Cancel
                                </button>

                            </div>
                            <div class="col-6 p-0">

                                <button id="confirm_save_filter" type="button" class="status-item btn btn-sm btn-block btn-default">
                                    Save
                                </button>

                            </div>


                        </div>






                    </div>

                </div>
            </div>

        @endcomponent

        <!-- filter section -->
        <div id="filter-card" class="card card-dark w-100 mt-1 overflow-hidden">
            <div class="card-header" data-card-widget="collapse" role="button">
                <h3 class="card-title">Filter Settings</h3>
                <div class="card-tools">
                    <span class="status-icon mx-2"></span>
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>

            </div>

            <div class="card-body px-2 py-0">
                <div id="filter-container" class="container-fluid w-100">
                    <template id="filter-template" class="d-none">
                        <div class="filter-container-item row p-2 mb-1">
                            <div class="col-11 p-0 m-0">
                                <div class="container-fluid p-0 m-0">
                                    <div class="row py-2 m-0 filter-row">

                                        @php $id = 'filter_type'; $hasError = $errors->has($id) @endphp
                                        @component('admin.components.form_field', ['class'=>'w-100 col-12 col-sm-6 col-md-4 px-0 pr-1 mb-0',
                                            'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                            <select name="{{$id}}" class="w-100 form-control select2" style="width: 100%" data-placeholder="{{$form[$id]['placeholder']}}" value="">
                                                <option value="none" selected disabled>Select a Filter</option>
                                            </select>
                                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                        @endcomponent


                                        {{--                                        <div class="form-group w-100 col-12 col-sm-6 col-md-4 px-0 mx-auto mb-0">--}}
                                        {{--                                            <label class="mb-0">Filter Type</label>--}}
                                        {{--                                            <select name="filter-type" class="w-100 form-control select2" style="width: 100%" data-placeholder="{{$form[$id]['placeholder']}}">--}}
                                        {{--                                                    <option value="none" selected disabled>Select a Filter</option>--}}
                                        {{--                                            </select>--}}
                                        {{--                                        </div>--}}
                                        <!-- js to render items here -->


                                    </div>
                                </div>
                            </div>
                            <div class="col-1 p-0 m-0 flex-center flex-column">
                                <i class="fas fa-exclamation-triangle text-warning has-errors" style="display:none"></i>
                                <button type="button" class="btn p-0 text-muted cta-opt del-cta-opt">
                                    <i class="fas fa-times "></i>
                                </button>
                            </div>
                        </div>
                    </template>

                </div>

            </div>
            <div class="card-footer p-2 bg-transparent">

                <button id="add_filter" type="button" class="btn btn-block btn-default cta-opt add-cta-opt">
                    <i class="fas fa-plus mr-1"></i>Add a Setting
                </button>
            </div>

        </div>

        <!-- user section -->
        @php $id = 'section_blast_recipients'; $hasError = $errors->has($id); @endphp
        @component('admin.components.form_field', [ 'class'=>'mt-4 col-12', 'label'=>  '<span class="text-lg text-bold mb-0">'.$form[$id]['label'].'</span>', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
        @endcomponent
        <div id="users-card" class="card card-info w-100 collapsed-card mt-1 overflow-hidden">
            <div class="card-header" data-card-widget="collapse" role="button">
                <h3 class="card-title">Preview List of Users <span class="user-count text-bold"></span></h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>

            </div>

            <div class="card-body p-0" style="display: none">
                <table id="userListTable" class="border-0 table table-sm table-hover dataTable w-100 table-striped">
                </table>
            </div>

        </div>


        @slot('footer_back')
            <a href="javascript:void(0)" class="btn btn-default blast-back">Back</a>
        @endslot

        @slot('footer_next')
            <button id="btn-submit" type="submit" class="btn btn-info float-right">Next Step</button>
        @endslot

    @endcomponent

</div>


@section('script')
    @parent
{{--    <script charset="utf8" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>--}}

    <script>
        $(() => {
            @php $filterTemplateClass = 'filter-item px-0 pr-1 mb-0' @endphp
            const filterTemplates = {
                'multi_select': `
                @php $id = 'multi_select'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>$filterTemplateClass.' col-12 col-sm-6 col-md-4',
                    'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description_alt'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="w-100 form-control select2" style="width: 100%" data-placeholder="{{$form[$id]['placeholder']}}" multiple>
                </select>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent
                `,

                'single_select': `
                @php $id = 'single_select'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>$filterTemplateClass.' col-12 col-sm-6 col-md-4',
                    'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description_alt'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="w-100 form-control select2" style="width: 100%" data-placeholder="{{$form[$id]['placeholder']}}">
                </select>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent
                `,

                'dynamic_multi_select': `
                @php $id = 'dynamic_multi_select'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>$filterTemplateClass.' col-12 col-sm-6 col-md-4',
                    'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description_alt'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="w-100 form-control select2" style="width: 100%" data-placeholder="{{$form[$id]['placeholder']}}" multiple>
                </select>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent
                `,

                'dynamic_single_select': `
                @php $id = 'dynamic_single_select'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>$filterTemplateClass.' col-12 col-sm-6 col-md-4',
                    'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description_alt'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="w-100 form-control select2" style="width: 100%" data-placeholder="{{$form[$id]['placeholder']}}">
                </select>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent
                `,

                'datetime_range': `
                @php $id = 'datetime_range'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>$filterTemplateClass.' col-12 col-sm-6 col-md-4',
                    'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description_alt'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="daterangepicker_select w-100 form-control select2" style="width: 100%" data-placeholder="{{$form[$id]['placeholder']}}">
                    @if( $form[$id]['input'])
                    @foreach( $form[$id]['input'] as $gid => $name)<option value="{{ $gid }}">{{$name}}</option>@endforeach
                    @endif
                </select>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent

                @php $id = 'datetime_range_input'; $hasError = $errors->has($id) @endphp
                <div class="input-group input-group-sm" style="display:none">
                    <div class="input-group-prepend"><div class="input-group-text"><i class="fas fa-calendar"></i></div></div>
                    <input type="text" class="form-control form-control-sm daterangepicker" id="" name="{{$id}}"
                    value="{{$form[$id]['value']}}" placeholder="{{$form[$id]['placeholder']}}"
                    style="top:unset;left:unset; margin-top:unset; font-size:inherit; font-family:inherit; z-index:0"                    >
                    <div class="input-group-prepend"><span class="input-group-text">to</span></div>
                    <input type="text" class="form-control form-control-sm daterangepicker2" id="" name="{{$id}}"
                    style="top:unset;left:unset; margin-top:unset; font-size:inherit; font-family:inherit; z-index:0"/>
                </div>

                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent
                `,

                'compare': `
                @php $id = 'operator'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>$filterTemplateClass.' col-8 col-sm-4 col-md-3',
                    'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description_alt'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="w-100 form-control select2" style="width: 100%" data-placeholder="{{$form[$id]['placeholder']}}"> @if( $form[$id]['input'])
                @foreach( $form[$id]['input'] as $gid => $name)
                <option value="{{ $gid }}">{{$name}}</option>
                @endforeach
                @endif
                </select>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

                @php $id = 'operand'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>$filterTemplateClass.' col-4 col-sm-2 col-md-1',
                    'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description_alt'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <input type="text" class="form-control form-control-sm" name="{{$id}}"  placeholder="{{$form[$id]['placeholder']}}" value="{{$form[$id]['value']}}">
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent
                `,

                'users_select': `
                @php $id = 'users_select'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>$filterTemplateClass.' col-12 col-sm-6 col-md-4',
                    'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description_alt'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="w-100 form-control select2" style="width: 100%" data-placeholder="{{$form[$id]['placeholder']}}" multiple>
                </select>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent
                `,
            };
            window.endpoints = {
                voucher_series: @json($blast_groups),
                event_types:  @json($event_types),
                event_categories: @json($event_categories),
                ajax_get_notif_templates_list :  '{{ route('admin.notification.template.list') }}',
                ajax_get_filtered_targets : '{{ route('admin.ajax_get_filtered_targets') }}',
                ajax_get_blast_groups : '{{ route('admin.ajax_get_blast_groups') }}',
                ajax_get_riddle : '{{ route('admin.settings.ajax_main_game_riddle') }}',
            }

            skaleBlastCreate.step2(
                filterTemplates,
                @json($form['filter_config']),
                endpoints
            );

            $(document).on('click', '.select-all',(e)=>{
                const $target = $(e.currentTarget);
                const $select =  $target.parents('.form-group').find("select");
                const $opts =  $select.find("option");
                if($target.is(':checked') ){
                    $opts.prop("selected","selected");
                }else{
                    $select.val('');
                    $opts.removeAttr("selected");
                }
                $select.trigger('change');
                $select.off('change.checkbox').on('change.checkbox',()=>{
                    $target.prop('checked', $select.val().length === $opts.length);
                })
            })
        })

    </script>
@endSection