@extends('layouts.admin')

@php
    $form = config('admin.create_popup');
    $module_inputs = $form['modules']['input'];
@endphp
@section('style')
    @parent
@endSection

@section('script')
    @parent
    <script>
        window.request =  @json($custom);
        $(()=>{
            //local functions
            const indexPage = '{{route('admin.settings.popup.custom.index')}}';
            function doImageUploader(element, doneFunction){
                if(! $(element)){
                    return
                }
                $(element).change(function(e) {
                    const btn = $(this);
                    btn.addClass('disabled');
                    let fileinput = $(e.currentTarget);
                    let file =fileinput.get(0).files[0];
                    if(!file){
                        fileinput =btn.parents('.form-group').find('input');
                        file = fileinput.get(0).files[0];
                    }


                    console.log(file)
                    if (!file) {
                        return;
                    }
                    let formData = new FormData();
                    if ( fileinput.attr('name') !=='site_icon' ){
                        formData.append('image',file);
                    } else {
                        formData.append('icon',file);
                    }
                    var settings = {
                        url: '{{ route('admin.settings.ajax_post_upload_image') }}',
                        method: "POST",
                        mimeType: "multipart/form-data",
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',

                    };

                    $.ajax(settings).done(function(response){
                        if(!response.errors || !response.valid){
                            makeToast('bg-success', 'Image uploaded successfully');
                            doneFunction(response);
                        }else{
                            $.each(response.errors, function(name, msg){
                                makeToast('bg-danger', msg);
                            })
                        }
                    }).fail(function(){
                        makeToast('bg-danger', 'Image failed to upload')
                    }).always(function(){
                        btn.removeClass('disabled');
                    });
                });
            }

            function initEventTagsDropdownData(dropdown_el, dropdown_data,  default_val=null,){
                if (!dropdown_data)  return;
                $.each(dropdown_data, function(key,val) {
                    var newOption = new Option( val.name, val.id,false, false);
                    $(dropdown_el).append(newOption).trigger('change');
                });
                $(dropdown_el).select2({
                    placeholder:  $(dropdown_el).attr('placeholder'),
                });
            }

            function goToPage(destinationClass,e=null,){
                if(e){
                    e.preventDefault();
                    setButtonToLoading(e.currentTarget);
                }
                if(typeof(destinationClass)==='string'){
                    if (!$('.page:visible').hasClass(destinationClass)){
                        $('.page:visible').hide();
                        $(destinationClass).fadeIn();
                        $("html, body").animate({ scrollTop: 0 },0);
                    }
                } else {
                    $('.page:visible').hide();
                    destinationClass.fadeIn();
                    $("html, body").animate({ scrollTop: 0 },0);
                }
                resetLoadingButton();
            }

            function handlePopupTarget(popup_type, el){
                var $target = $(el);
                var $target_parent = $target.parents('.form-group:first').parents('.form-group:first');
                if (!$target.data('default-opts')) {
                    $target.data('default-opts', $target.find('option'));
                }
                if (popup_type === 'custom'){
                    $target.find('option:first').prop('selected', true).trigger('change');
                    $target_parent.hide();
                }
                else{
                    $target_parent.show();
                }
                $target.find('option').remove();
                var acts = {
                    popup_rewards: function () {
                        $.each({
                            ' ': 'Rewards Available',
                            'wallet-tab': 'Rewards Downloaded',
                        }, function (k, v) {
                            $('<option>').val(k).text(v).appendTo($target);
                        });
                    },
                    init: function () {
                        $target.data('default-opts').appendTo($target);
                    },
                };
                (acts[popup_type] || acts.init)();
                $target.trigger('change');
            }

            // init dep
            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

            $('#show_after_date').daterangepicker({
                locale: {format: 'YYYY-MM-DD'},
                singleDatePicker: true,
                startDate: '{{ date('Y-m-d', strtotime( '-1 year' ))}}',
                endDate: '{{ date('Y-m-d', strtotime( today() ))}} ',
            });

            $.each($('.select2'), function(k,v){
                $(v).select2({placeholder: $(v).attr('placeholder')});
            });

            // basic functionalities
            $('[name=popup_to_show]').on('change', function(){
                if ($(this).val() === 'custom' ){
                    $('.custom_fields').show()
                    $('[name=title]').addClass('required');
                    $('[name=subtitle]').addClass('required');
                    $('[name=cta]').addClass('required');
                    if( $('[name=popup_destination]').find('[value=voucher_use_page]').length ===0 &&
                        $('[name=popup_destination]').find('[value=voucher_post_redemption]').length ===0
                    ){
                        var newOption = new Option('Upon Page Load @ Use Voucher Page', 'voucher_use_page', false, false);
                        var newOption2 = new Option('Upon Redemption @ Use Voucher Page', 'voucher_post_redemption', false, false);
                        $('[name=popup_destination]').append(newOption).append(newOption2).trigger('change');
                    }
                }
                else{
                    $('.custom_fields').hide()
                    $('[name=title]').removeClass('required');
                    $('[name=subtitle]').removeClass('required');
                    $('[name=cta]').removeClass('required');
                    $('[name=popup_destination]').find('[value=voucher_use_page]').remove();
                    $('[name=popup_destination]').find('[value=voucher_post_redemption]').remove();
                }
                handlePopupTarget($(this).val(), $('[name="popup_target"]'));
            }).change();

            $('[name=cta_popup]').on('change', function () {
                handlePopupTarget($(this).val(), $('[name=cta_popup_target]'));
            });

            $('[name=popup_destination]').on('change', function () {
                var val = $(this).val();
                var page_support = ['voucher_use_page', 'voucher_post_redemption'];
                var $excl = $('[name=voucher_series_exclusion]');
                var $row = $excl.parents('.form-group:first');
                if (page_support.findIndex(v => v === val) === -1) {
                    $excl.val('').trigger('change');
                    $row.hide();
                } else {
                    $row.show();
                }
            });

            doImageUploader('#image_url_uploader', function(response){
                let url_name =  response['original'].split('/').at(-1)
                $('#image_url').val(response['original']).parents('.form-group').find('img').attr('src', response['original']).show().end().find('.custom-file-label').text( url_name );
            });

            $('[name=modules]').select2({
                minimumResultsForSearch: -1,
                placeholder: $('#module').attr('placeholder'),
            });
            $('[name=modules]').val(  @json(is_array($form['modules']['default_val']) ? $form['modules']['default_val'] : []) )
                .on('change', function(){
                    $('.filter_group').hide();
                    $.each( $('[name=modules]').val() ,function(k,module){
                        $('.filter_group_' +  module).show();
                    });
                }).change();

            initEventTagsDropdownData('.event_type_id', @json($event_types) );
            initEventTagsDropdownData('.event_category_id', @json($event_categories) );
            $('[name=blast_trigger_event_is_category]').on('change', function(){
                if( $('[name=blast_trigger_event_is_category]:checked').val() === 'true' ){
                    $( '.event_category_id').parent('.form-group').show();
                    $( '.event_type_id').parent('.form-group').hide();
                }
                else {
                    $( '.event_category_id').parent('.form-group').hide();
                    $( '.event_type_id').parent('.form-group').show();
                }
            }).change();


            // pagination and saving
            $('.page-next-btn').click(e=>goToPage('.page_2',e));
            $('.page-back-btn').click(e=>goToPage('.page_1',e));
            $('.page-save-btn').click(function(e){
                e.preventDefault();
                setButtonToLoading(e.currentTarget);

                let hasError = false;
                $.each( $('.required'), function(k,v){
                    if( !$(v).val() ){
                        hasError=true;
                        $(v).addClass('is-invalid');
                    }
                })
                if(hasError){
                    makeToast('bg-danger','Please fill up all the required fields');
                    const errorPg =  $('.required.is-invalid:first').parents('.page');
                    if( errorPg ) goToPage(errorPg);
                    $("html, body").animate({ scrollTop: 0 },0);
                    resetLoadingButton();
                    return;
                }
                let data = {
                    "name": $('[name=name]').val(),
                    "type": $('[name=popup_to_show]').val(),
                    "automations": {"series_id": []},
                    "conditions": {
                        "popup_source": $('[name=popup_destination]').val(),
                        "popup_times": $('[name=popup_appear_times]').val() ?? null,
                        "modules": $('[name=modules]').val() ?? [],
                    },
                    popup_target: $('[name=popup_target]').val(),
                };
                if( data['type']==='custom'){
                    data['customs'] = {
                        "image_url": $('[name=image_url]').val(),
                        "title": $('[name=title]').val(),
                        "subtitle": $('[name=subtitle]').val(),
                        "cta": $('[name=cta]').val(),
                        cta_act: {
                            popup: $('[name=cta_popup]').val(),
                            target: $('[name=cta_popup_target]').val(),
                        },
                    }
                }
                $.each($('[name=automate_action_type]'), function(){
                    if( $(this).val()==='series_id'){
                        data['automations']['series_id']=  $(this).parents('td').find('[name=automate_action_value]').val()
                    }
                })
                $.each( data['conditions']['modules'], function(k,v){
                    switch(v){
                        case 'past_events':
                            const is_cat = $('[name=blast_trigger_event_is_category][value=true]').prop('checked');
                            data['conditions'][v] = {
                                "event_has_done":  $('[name=event_has_done]').val()==='true',
                                "event_type_id": !is_cat ? $('[name=event_type_id]').val() :[],
                                "event_category_id": is_cat ? $('[name=event_category_id]').val() :[],
                                "event_occurrence_opt":  $('[name=event_occurrence_opt]').val(),
                                "event_occurrence": $('[name=event_occurrence]').val(),
                            };
                            break;
                        case 'datetime':
                            data['conditions'][v] = $('[name=show_after_date]').val();
                            break;
                        case 'reward_mechanisms':
                            data['conditions'][v] = [];
                            $.each( $('#reward_mechanisms_table tr'), function(i, tr){
                                data['conditions'][v].push({
                                    "type": $(tr).find('[name=reward_mechanism_status]').val(),
                                    "occurrence":  $(tr).find('[name=reward_mechanism_count]').val()??0,
                                    "occurrence_opt":  $(tr).find('[name=reward_mechanism_opt]').val(),
                                    "unit":   $(tr).find('[name=reward_mechanism_type]').val()
                                })

                            })
                            break;
                        case 'vouchers':
                            data['conditions'][v] =  {
                                "series_id": $('[name=voucher_series]').val(),
                                "status": $('[name=voucher_status]').val(),
                                series_id_exclusion: $('[name=voucher_series_exclusion]').val(),
                                voucher_downloaded_opt: $('[name=voucher_downloaded_opt]').val(),
                                voucher_downloaded: $('[name=voucher_downloaded]').val(),
                            };
                            break;
                    }
                })
                console.log(data);

                $.ajax( settings = {
                    "url" : AJAX_URL + 'settings/popup/custom'+ (request ? '/'+request.id : ''),
                    "timeout": 0,
                    "headers": {"Content-Type": "application/json",},
                    "data" : JSON.stringify(data),
                    "method": request ? 'PUT' :'POST'
                }).done(function (response) {
                    console.log(response)
                    if(response.error){
                        makeToast('bg-danger',response.message)
                        return;
                    }
                    makeToast('bg-success','Popup Created Successfully. Redirecting to popup list in 3s...')
                    setTimeout(function(){
                        window.location = indexPage;
                    },3000)

                }).fail((response)=>{
                    if(response.errors){
                        makeToast('bg-danger',response.message)
                    }
                    $("html, body").animate({ scrollTop: 0 },0);
                    resetLoadingButton();
                })



            });

            // load all data
            if(request){
                $('[name=name]').val( request.popup_name );
                const popup_type = request.popup_type;
                var sett = request.custom_setting[popup_type] || {};
                $('[name=popup_to_show]').val(popup_type==='custom' ?popup_type: sett['modal_type']).change();
                sett.target ? $('[name=popup_target]').val(sett.target).change() : 0;
                if(popup_type==='custom'){
                    const custom_img = sett.image_url;
                    if(custom_img){
                        let url_name =  custom_img.split('/').at(-1)
                        $('#image_url').val(custom_img).parents('.form-group').find('img').attr('src', custom_img).show().end()
                            .find('.custom-file-label').text( url_name );
                    }
                    $('[name=title]').val(sett.title);
                    $('[name=subtitle]').val(sett.subtitle);
                    $('[name=cta]').val(sett.cta);
                    var cta_act = sett.cta_act || {};
                    cta_act.popup ? $('[name=cta_popup').val(cta_act.popup).trigger('change') : 0;
                    cta_act.target ? $('[name=cta_popup_target').val(cta_act.target).trigger('change') : 0;
                }
                if(!!request.automate_setting){
                    let setting_idx = 0;
                    $.each(request.automate_setting, function(auto_type,auto_val){
                        if(setting_idx>0){
                            $('#automate_action').parents('.dynamic-form-control').find('.add-cta-opt').click();
                        }
                        $($('[name=automate_action_type]')[setting_idx]).val(auto_type).change();
                        $($('[name=automate_action_value]')[setting_idx]).val(auto_val).change();
                        setting_idx++;
                    })
                }

                $('[name=popup_destination]').val(request.cond_destination).change();
                $('[name=popup_appear_times]').val(request.cond_num_appear).change();
                $('[name=modules]').val(request.cond_filter.modules).change();
                $.each(request.cond_filter.modules, function(i, mod){
                    const mod_req = request.cond_filter[mod];
                    switch(mod){
                        case 'past_events':

                            $('[name=event_has_done]').val(mod_req.event_has_done?'true':'false').change();

                            const evt_is_category = mod_req.event_category_id.length > 0;
                            $('[name=blast_trigger_event_is_category][value=false]').prop('checked', !evt_is_category).change();
                            $('[name=blast_trigger_event_is_category][value=true]').prop('checked', evt_is_category).change();
                            $('[name=event_category_id]').val(mod_req.event_category_id).change();
                            $('[name=event_type_id]').val(mod_req.event_type_id).change();

                            $('[name=event_occurrence_opt]').val(mod_req.event_occurrence_opt).change();
                            $('[name=event_occurrence]').val(mod_req.event_occurrence);

                            break;
                        case 'datetime':
                            $('[name=show_after_date]').val( moment(request.cond_show_after_date).format('YYYY-MM-DD') );
                            break;
                        case 'reward_mechanisms':
                            let reward_idx = 0;
                            $.each(mod_req, function(i,itm){
                                if(reward_idx>0){
                                    $('#reward_mechanisms_table').parents('.dynamic-form-control').find('.add-cta-opt').click();
                                }
                                $($('[name=reward_mechanism_status]')[reward_idx]).val(itm.type).change();
                                $($('[name=reward_mechanism_opt]')[reward_idx]).val(itm.occurrence_opt).change();
                                $($('[name=reward_mechanism_count]')[reward_idx]).val(itm.occurrence).change();
                                $($('[name=reward_mechanism_type]')[reward_idx]).val(itm.unit).change();

                                reward_idx++;
                            })
                            break;
                        case 'vouchers':
                            $('[name=voucher_series]').val(mod_req.series_id).change();
                            $('[name=voucher_status]').val(mod_req.status).change();
                            $('[name=voucher_series_exclusion]').val(mod_req.series_id_exclusion).trigger('change');
                            $('[name=voucher_downloaded_opt]').val(mod_req.voucher_downloaded_opt).trigger('change');
                            $('[name=voucher_downloaded]').val(mod_req.voucher_downloaded).trigger('change');
                            break;
                    }
                })


            }

        });


    </script>

@endSection

@section('content')
    <div class="page page_1">
        <!-- STEP 1  -->
        @component('admin.components.step_form_pages', [
            'post_url'=>'',
            'type'=>'popup',
            'title'=> 'Popup Details',
            'all_pages' =>['Popup Details', 'Display Conditions'],
            'step'=> '1',
        ])

            @php $id = 'name'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <input name="{{$id}}" type="text" class="form-control {{$form[$id]['req']?'required':''}}" placeholder="{{$form[$id]['placeholder']}}" value="{{ $reminder['blast_name'] ?? old('blast_name') }}" >
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent
            <div class="col-12 row px-0">
                <div class="col-sm-6">
                    @php $id = 'popup_to_show'; $hasError = $errors->has($id); @endphp
                    @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <div class="form-group d-flex mb-1">
                            <select name="{{$id}}" class="{{$id}} {{$form[$id]['req']?'required':''}} form-control select2 w-100" placeholder="{{$form[$id]['placeholder']}}">
                                @if($form[$id]['input'] )
                                    @foreach( $form[$id]['input'] as $gid => $name)
                                        <option value="{{$gid}}">{{$name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    @endcomponent

                    @php $id = 'popup_target'; $hasError = $errors->has($id); @endphp
                    @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <div class="form-group d-flex mb-1">
                            <select name="{{$id}}" class="{{$id}} {{$form[$id]['req']?'required':''}} form-control select2 w-100" placeholder="{{$form[$id]['placeholder']}}">
                                @foreach( $form[$id]['input'] ?: [] as $gid => $name)
                                    <option value="{{$gid}}">{{$name}}</option>
                                @endforeach
                            </select>
                        </div>
                    @endcomponent

                    <div class="custom_fields m-2 pt-1 border rounded bg-light">
                        @php $id = 'image_url'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <div class="input-group">
                                <input type="text" id="{{$id}}" class="d-none {{$hasError?'is-invalid':''}} {{$form[$id]['req']?'required':''}}" name="{{$id}}" value="{{ $imgsrc }}">
                                <input type="file" id="{{$id}}_uploader" class="custom-file-input {{$hasError?'is-invalid':''}}"
                                       accept="image/*">
                                <label class="custom-file-label text-nowrap" for="exampleInputFile">{{ $imgsrc3 ?? old('file')??'Choose Image'}}</label>
                            </div>
                            <div class="file-viewer mt-1">
                                <img src="" alt="preview" class="w-100 rounded">
                            </div>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent

                        @php $id = 'title'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <input name="{{$id}}" type="text" class="form-control {{$form[$id]['req']?'required':''}}" placeholder="{{$form[$id]['placeholder']}}" value="{{ $reminder['blast_name'] ?? old('blast_name') }}" >
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent

                        @php $id = 'subtitle'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <input name="{{$id}}" type="text" class="form-control {{$form[$id]['req']?'required':''}}" placeholder="{{$form[$id]['placeholder']}}" value="{{ $reminder['blast_name'] ?? old('blast_name') }}" >
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent

                        @php $id = 'cta'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <input name="{{$id}}" type="text" class="form-control {{$form[$id]['req']?'required':''}}" placeholder="{{$form[$id]['placeholder']}}" value="{{ $reminder['blast_name'] ?? old('blast_name') }}" >
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent

                        @php $id = 'cta_popup'; $hasError = $errors->has($id); @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <div class="form-group d-flex mb-1">
                                <select name="{{$id}}" class="{{$id}} {{$form[$id]['req']?'required':''}} form-control select2 w-100" placeholder="{{$form[$id]['placeholder']}}">
                                    @foreach( $form[$id]['input'] ?: [] as $gid => $name)
                                        <option value="{{$gid}}">{{$name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endcomponent
    
                        @php $id = 'cta_popup_target'; $hasError = $errors->has($id); @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <div class="form-group d-flex mb-1">
                                <select name="{{$id}}" class="{{$id}} {{$form[$id]['req']?'required':''}} form-control select2 w-100" placeholder="{{$form[$id]['placeholder']}}">
                                    @foreach( $form[$id]['input'] ?: [] as $gid => $name)
                                        <option value="{{$gid}}">{{$name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endcomponent
                    </div>


                </div>
                <div class="col-sm-6">

                    @component('admin.components.dynamic_form_fields', [
                        'id'=>'automate_action',
                        'label'=>'Automated Actions',
                        'wrapperClass' =>'bg-light border rounded py-2',
                        'tdClass'=>'d-flex align-items-center flex-column p-0 pb-2',
                        'addCtaCopy'=> 'Add Action',
                        'addCtaClass'=>'ml-2',    'delCtaClass'=>'',
                        'minRows'=>0,    'maxRows'=>1,     'initRows'=>1,
                        ])
                        @php $id = 'automate_action_type'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field', [ 'class'=> 'col-12 mb-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <select name="{{$id}}" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}  {{$form[$id]['req'] ?'required':''}}"
                                    data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                                @if($form[$id]['input'])
                                    @foreach($form[$id]['input'] as $value => $label)
                                        <option value="{{$value}}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                                    @endforeach
                                @endif
                            </select>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent

                        @php $id = 'automate_action_value'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field', [ 'class'=>'col-12 mb-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <select name="{{$id}}" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}  {{$form[$id]['req'] ?'required':''}}"
                                    multiple data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                                @if($voucher_series)
                                    @foreach( $voucher_series as $sid)
                                        <option value="{{ $sid['id'] }}">
                                            {{$sid['title']}}  [{{$sid['series_id']}}]
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                    @endcomponent
                </div>
            </div>

            @slot('footer_back')@endslot
            @slot('footer_next')
                <a href="javascript:void(0)" class="btn btn-default float-right page-next-btn">Next Step</a>
            @endslot

        @endcomponent

    </div>

    <div class="page page_2" style="display:none;">
    <!-- STEP 2  -->
        @component('admin.components.step_form_pages',
        [ //'post_url'=>$post_url,
            'post_url'=>'',
            'type'=>'popup',
            'title'=> 'Display Conditions',
            'all_pages' =>['Popup Details', 'Display Conditions'],
            'step'=> '2',
        ])

        @php $id = 'popup_destination'; $hasError = $errors->has($id); @endphp
        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            <div class="form-group d-flex mb-1">
                <select name="{{$id}}" class="{{$id}} form-control select2 w-100 {{$form[$id]['req']?'required':''}}" placeholder="{{$form[$id]['placeholder']}}">
                    @if($form[$id]['input'] )
                        @foreach( $form[$id]['input'] as $gid => $name)
                            <option value="{{$gid}}">{{$name}}</option>
                        @endforeach
                    @endif
                </select>
            </div>
        @endcomponent

        @php $id = 'popup_appear_times'; $hasError = $errors->has($id); @endphp
        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            <div class="form-group d-flex mb-1">
                <input name="{{$id}}" type="text" class="form-control {{$form[$id]['req']?'required':''}}" placeholder="{{$form[$id]['placeholder']}}" value="{{ $reminder['blast_name'] ?? old('blast_name') }}" >
            </div>
        @endcomponent

        @php $id = 'modules'; $hasError = $errors->has($id); @endphp
        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            <div class="form-group d-flex mb-1">
                <select name="{{$id}}" class="{{$id}} form-control select2 w-100 {{$form[$id]['req']?'required':''}}" multiple placeholder="{{$form[$id]['placeholder']}}">
                    @if($form[$id]['input'] )
                    @foreach( $form[$id]['input'] as $gid => $name)
                        <option value="{{$gid}}">{{$name}}</option>
                    @endforeach
                    @endif
                </select>
            </div>
        @endcomponent

        <div id="event_filters" class="filter_group filter_group_past_events card card-light w-100">
            <div class="card-header">
                {{ $module_inputs['past_events'] }} Filters
                {{-- Customize Event --}}
            </div>

            <div class="card-body">

                <div class="col-sm-12 row">
                    <label class="col-sm-12 mb-0">Popup will be shown to users who</label>
                    @php $id = 'event_occurrence_opt'; $hasError = $errors->has($id) @endphp

                    @php $id = 'event_has_done'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-4','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <select name="{{$id}}" class="{{$id}} form-control select2 w-100 {{$form[$id]['req']?'required':''}}" data-placeholder="{{$form[$id]['placeholder']}}">
                            @foreach( $form[$id]['input'] as $gid => $name)
                                <option value="{{$gid}}">{{$name}}</option>
                            @endforeach
                        </select>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent



                    <div class="col-sm-8 px-0">

                        @php $id = 'blast_trigger_event_is_category'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field', ['class'=>'col-sm-12 mb-0','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <div class="form-group d-flex mb-0">
                                @foreach( $form[$id]['input'] as $gid => $name)
                                    <div class="custom-control custom-radio mx-2">
                                        <input class="custom-control-input" type="radio" id="{{$id.'_'.$gid}}"
                                               name="{{$id}}" value="{{$gid}}" {{$loop->first? 'checked':''}}>
                                        <label for="{{$id.'_'.$gid}}"
                                               class="custom-control-label">{{$name}}</label>
                                    </div>
                                @endforeach
                            </div>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent

                        @php $id = 'event_type_id'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <select name="{{$id}}" class="{{$id}} form-control select2 w-100" multiple data-placeholder="{{$form[$id]['placeholder']}}">
                                {{--                                @foreach( $form[$id]['input'] as $gid => $name)--}}
                                {{--                                    <option value="{{$gid}}">{{$name}}</option>--}}
                                {{--                                @endforeach--}}
                            </select>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent

                        @php $id = 'event_category_id'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <select name="{{$id}}" class="{{$id}} form-control select2 w-100" multiple data-placeholder="{{$form[$id]['placeholder']}}">
                                {{--                                @foreach( $form[$id]['input'] as $gid => $name)--}}
                                {{--                                    <option value="{{$gid}}">{{$name}}</option>--}}
                                {{--                                @endforeach--}}
                            </select>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                    </div>


                </div>

                <div class="col-sm-12 row">
                    <label class="col-sm-12 mb-0">For how many times</label>
                    @php $id = 'event_occurrence_opt'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-4','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <select name="{{$id}}" class="{{$id}} form-control select2 w-100" data-placeholder="{{$form[$id]['placeholder']}}">
                            @foreach( $form[$id]['input'] as $gid => $name)
                                <option value="{{ $gid }}">
                                    {{$name}}
                                </option>
                            @endforeach
                        </select>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent


                    @php $id = 'event_occurrence'; $hasError = $errors->has($i.'_'.$id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-8','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <div class="input-group">

                            <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}"
                                   type="number" min="0" class="form-control {{$id}}" value="0"/>
                            <div class="input-group-append">
                                <span class="input-group-text">times(s)</span>
                            </div>
                        </div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                </div>

            </div>


        </div>

        <div id="datetime_filters" class="filter_group filter_group_datetime card card-light w-100">
            <div class="card-header">{{ $module_inputs['datetime'] }} Filters</div>

            <div class="card-body">
                <div class="col-sm-12 row">
                    {{--                        <label class="col-sm-12 mb-0">Registration period</label>--}}
                    @php $id = 'show_after_date'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-calendar"></i></span></div>
                            <input id="{{$id}}" type="text" class="form-control {{$form[$id]['req']?'required':''}}" name="{{$id}}"  placeholder="{{$form[$id]['placeholder']}}">
                        </div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent
                </div>
            </div>
            <!-- add more here-->
        </div>
        <div id="reward_mechanism_filters" class="filter_group filter_group_reward_mechanisms card card-light w-100">
            <div class="card-header">{{ $module_inputs['reward_mechanisms'] }} Filters</div>

            <div class="card-body">


                @component('admin.components.dynamic_form_fields', [
                    'id'=>'reward_mechanisms_table',
                    'label'=>'Reward Mechanisms',
                    'wrapperClass' =>'',
                    'tdClass'=> 'row align-items-center p-0 pb-2',
                    'addCtaCopy'=> 'Add Filter',
                    'addCtaClass'=>'ml-2',    'delCtaClass'=>'',
                    'minRows'=>1,    'maxRows'=>6,     'initRows'=>1,
                    ])
                    @php $id = 'reward_mechanism_status'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field', [ 'class'=> 'col-6 col-md-3 mb-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <select name="{{$id}}" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}  {{$form[$id]['req'] ?'required':''}}"
                                data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                            @if($form[$id]['input'])
                                @foreach($form[$id]['input'] as $value => $label)
                                    <option value="{{$value}}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                                @endforeach
                            @endif
                        </select>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                    @php $id = 'reward_mechanism_opt'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field', [ 'class'=> 'col-6 col-md-3 mb-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <select name="{{$id}}" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}  {{$form[$id]['req'] ?'required':''}}"
                                data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                            @if($form[$id]['input'])
                                @foreach($form[$id]['input'] as $value => $label)
                                    <option value="{{$value}}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                                @endforeach
                            @endif
                        </select>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                    @php $id = 'reward_mechanism_count'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field', [ 'class'=>'col-6 col-md-3 mb-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <input type="text" class="form-control {{$form[$id]['req']?'required':''}}" name="{{$id}}"  placeholder="{{$form[$id]['placeholder']}}" value="{{$form[$id]['value']}}">
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent


                    @php $id = 'reward_mechanism_type'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field', [ 'class'=> 'col-6 col-md-3 mb-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <select name="{{$id}}" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}  {{$form[$id]['req'] ?'required':''}}"
                                data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                            @if($form[$id]['input'])
                                @foreach($form[$id]['input'] as $value => $label)
                                    <option value="{{$value}}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                                @endforeach
                            @endif
                        </select>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent
                @endcomponent

            </div>
        </div>

        <div id="voucher_filters" class="filter_group filter_group_vouchers card card-light w-100">
            <div class="card-header">{{ $module_inputs['vouchers'] }} Filters</div>

            <div class="card-body">
                <div class="col-sm-12 row">
                    @php $id = 'voucher_series'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

                        <select id="{{$id}}" name="{{$id}}" class="{{$id}} form-control select2 w-100" multiple data-placeholder="{{$form[$id]['placeholder']}}">
                            @if( $form[$id]['input'])
                                @foreach( $form[$id]['input'] as $gid => $name)
                                    <option value="{{ $gid }}">
                                        {{$name}}
                                    </option>
                                @endforeach
                            @endif

                            @foreach( $voucher_series ?: [] as $sid)
                                <option value="{{ $sid['series_id'] }}">
                                    {{$sid['title']}}  [{{$sid['series_id']}}]
                                </option>
                            @endforeach

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

                    @php $id = 'voucher_status'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <select id="{{$id}}" name="{{$id}}" class="{{$id}} form-control select2 w-100" multiple data-placeholder="{{$form[$id]['placeholder']}}">
                            @if( $form[$id]['input'])
                                @foreach( $form[$id]['input'] as $gid => $name)
                                    <option value="{{ $gid }}" {{$gid=='all'? 'selected':''}}>
                                        {{$name}}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                    <div class="col-sm-12 row pr-0">
                        <label class="col-sm-12 mb-0">For how many downloads</label>
                        @php $id = 'voucher_downloaded_opt'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field', ['class'=>'col-sm-4','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <select name="{{$id}}" class="{{$id}} form-control select2 w-100" data-placeholder="{{$form[$id]['placeholder']}}">
                                @foreach( $form[$id]['input'] as $gid => $name)
                                    <option value="{{ $gid }}">
                                        {{$name}}
                                    </option>
                                @endforeach
                            </select>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent

                        @php $id = 'voucher_downloaded'; $hasError = $errors->has($i.'_'.$id) @endphp
                        @component('admin.components.form_field', ['class'=>'col-sm-8 pr-0','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <div class="input-group">
    
                                <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}"
                                       type="number" min="0" class="form-control {{$id}}" value="0"/>
                                <div class="input-group-append">
                                    <span class="input-group-text">download(s)</span>
                                </div>
                            </div>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                    </div>

                    @php $id = 'voucher_series_exclusion'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

                        <select id="{{$id}}" name="{{$id}}" class="{{$id}} form-control select2 w-100" multiple data-placeholder="{{$form[$id]['placeholder']}}">
                            @foreach( $form[$id]['input'] ?: [] as $gid => $name)
                                <option value="{{ $gid }}">
                                    {{$name}}
                                </option>
                            @endforeach

                            @foreach( $voucher_series ?: [] as $sid)
                                <option value="{{ $sid['series_id'] }}">
                                    {{$sid['title']}}  [{{$sid['series_id']}}]
                                </option>
                            @endforeach

                        </select>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent
                </div>
            </div>
            <!-- add more here-->
        </div>

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

        @slot('footer_next')
{{--            @if (!$account->is_agency && havePermissionByEntityKey('BLAST_BTN_CREATE_SCHEDULE'))--}}
            <a href="javascript:void(0)" class="btn btn-default float-right page-save-btn">Save</a>
{{--            @endif--}}
        @endslot
    @endcomponent
</div>

@endsection