@php
    $config_type_preferences = @$step_verified_data['config_type_preferences'];
    $type_preferences_arr = @$step_verified_data['type_preferences_arr'];    
@endphp
<style>
    .dropdown-backdrop{  display:none; }
</style>
<div class="app-status-panel-content">
    
    <div class="addinfo_notify"></div>
    <form class="m-b-10 custom_form adi-info-form-1" name="add_type_preferences" id="add_type_preferences">
        <input type="hidden" name="btn_action" value="" />
        <div id="popup_notify_id"></div>
        <div id="type_preferences_div">
            <div class="row m-b-12 pd-20">                
                <h3 class="d-inline-b">CAMP TYPE PREFERENCES</h3>
                <button type="button" title="Contact Support" class="btn btn-success pull-right support_width" onclick="return viewPopup('Type Preference','{{@$active_step_key}}');">Support<i class="mdi mdi-help-circle-outline step-help"></i></button> 
                <div class="col-sm-12">                    
                    <div class="row m-b-12">
                        <h4 class="d-inline-b">Select Camp Type Preference</h4>
                        <div class="col-sm-12">
                            <div class="row">                      
                                <div style="overflow:hidden;">
                                    <select id="type_preferences" name="type_preferences[]" class="selectpicker type_dropdown"  data-container="body" tabindex="1" multiple  data-style="btn-default btn-outline">
                                        @if(isset($config_type_preferences) && !empty($config_type_preferences))   
                                        @foreach($config_type_preferences as $key => $value)   
                                        @php
                                        $selected = in_array($key,$type_preferences_arr)?'selected':'';
                                        @endphp

                                        <option value="{{ $key }}" {{$selected}}>{{ $value }}</option>  
                                        @endforeach
                                        @endif   
                                    </select>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row"> 
                        <div class="clearfix"></div>
                        <div class="form-actions m-t-20">
                            <button type="button" name="submit_type_preferences" id="submit_type_preferences" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" >Save & Next Stage</button>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    $(document).ready(function(){        
        var user_id = $('meta[name="user_token"]').attr('content');
        var form_selector = "#add_type_preferences";        
        $(document).off("click","#submit_type_preferences").on("click","#submit_type_preferences",function(){
            show_inner_loader(".timeline_stp_desc","#all_tab_data");               
            var url = "{{ route('updatetypepreferences') }}";
            var type_length = $("select[name='type_preferences[]'] option:selected").length;
            
            var notify_id = "popup_notify_id";      
            var next_step_key = '1_short_introduction';
            if($("select[name='type_preferences[]'] option:selected").length > 0){
                if(type_length < 2){
                    notifyResponse("#"+notify_id,"Please select at least 2 options in Camp Type Preference.","error");
                    hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                }else{
                    var type_preferences = $("#type_preferences").val();
                    $.ajax({
                        type: 'post',
                        url: url,
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        data: { 
                            'type_preferences': type_preferences, 
                            'action': 'updatetypepreferences'
                        }, 
                        success: function(response) {
                            var messages = response.message;
                            if(response.type == "success")
                            {
                                notifyResponseTimerAlert(messages,response.type,response.type.charAt(0).toUpperCase()+ response.type.slice(1));
                                setTimeout(function(){
                                    navigateStages('1',next_step_key);
                                },3000);
                            } else {
                                notifyResponseTimerAlert(messages,response.type,response.type.charAt(0).toUpperCase()+ response.type.slice(1));
                            }
                            hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                        }
                    });
                }
            }
            else {
                notifyResponse("#"+notify_id,"Please select Camp Type Preference","error");
                hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
            }  
        });
        
         $('.selectpicker').selectpicker();
                
    }); 
</script>