@extends('backend.layout')


@section('extra_css')
<link media="all" type="text/css" rel="stylesheet" href="{{ asset('assets/admin/bower_components/select2/dist/css/select2.min.css') }}">
<style>
    ul li { list-style: none; }
    #category_id { width: 70%; }
    .sortable {
        list-style: none;
        margin-bottom: 5px;
    }

    .sortable:last-child {
        margin-bottom: 0;
    }

    .text-to-label {
        border: none;
        width: 30px;
        max-width: 30px;
        outline: none;
    }

    #priority_pos {
        padding: 0;
    }
</style>
<script>
    var pri_pos = [];
    var etot = 0;
    var prev_arr = [];
</script>
@endsection

@section('content')
<div class="container">
    
    @if(Session::has('message'))
        <div class="row">
            <div class="col-xs-12">
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    {{ Session('message') }}
                </div>
            </div>
        </div>
    @endif 
    
   <h2 style="color: blue;">Filter Setup form</h2><hr>
  
   <div class="form-group">
      <label for="root_category_id">Root Category:</label>
      <select class="form-control select2_dropdown" id="root_category_id">
          <option value="">Select Root Category</option>
          @foreach($root_categories as $root_category)
            <option value="{{ $root_category->category_id }}">{{ $root_category->category_name }}</option>
          @endforeach
      </select>
    </div>
    
    <div class="form-group">
      <label for="layer1_category_id">Layer 1 Category:</label>
      <select class="form-control select2_dropdown" id="layer1_category_id">
          <option value="">Select Layer 1 Category</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="layer2_category_id">Layer 2 Category:</label>
      <select class="form-control select2_dropdown" id="layer2_category_id">
          <option value="">Select Layer 2 Category</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="layer3_category_id">Layer 3 Category:</label>
      <select class="form-control select2_dropdown" id="layer3_category_id">
          <option value="">Select Layer 3 Category</option>
      </select>
    </div>
    
    <button type="button" id="search_attributes_btn" class="btn btn-primary">Search</button>
    
    <div id="attributes_data_div" style="margin-top: 20px; margin-bottom: 15px;"></div>
    
</div>
@endsection


@section('extra_js')
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="{{ asset('assets/admin/bower_components/select2/dist/js/select2.full.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        
        $('.select2_dropdown').select2();
        
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        $(document).on('change', '#root_category_id', function() {
            var category_id = $(this).val();
            if (category_id != '') {
                $.ajax({
                    type: 'POST',
                    url: "{{ route('get_categories_select_by_parent') }}",
                    data: 'category_parent_id=' + category_id,
                    cache: false,
                    success: function(result) {
                        $('#layer1_category_id').children('option:not(:first)').remove();
                        $("#layer1_category_id").append(result);
                        $('#layer2_category_id').children('option:not(:first)').remove();
                        $('#layer3_category_id').children('option:not(:first)').remove();
                    }
                });
            } else {
                $('#layer1_category_id').children('option:not(:first)').remove();
                $('#layer2_category_id').children('option:not(:first)').remove();
                $('#layer3_category_id').children('option:not(:first)').remove();
            }
        });
        
        $(document).on('change', '#layer1_category_id', function() {
            var category_id = $(this).val();
            if (category_id != '') {
                $.ajax({
                    type: 'POST',
                    url: "{{ route('get_categories_select_by_parent') }}",
                    data: 'category_parent_id=' + category_id,
                    cache: false,
                    success: function(result) {
                        $('#layer2_category_id').children('option:not(:first)').remove();
                        $("#layer2_category_id").append(result);
                        $('#layer3_category_id').children('option:not(:first)').remove();
                    }
                });
            } else {
                $('#layer2_category_id').children('option:not(:first)').remove();
                $('#layer3_category_id').children('option:not(:first)').remove();
            }
        });
        
        $(document).on('change', '#layer2_category_id', function() {
            var category_id = $(this).val();
            if (category_id != '') {
                $.ajax({
                    type: 'POST',
                    url: "{{ route('get_categories_select_by_parent') }}",
                    data: 'category_parent_id=' + category_id,
                    cache: false,
                    success: function(result) {
                        $('#layer3_category_id').children('option:not(:first)').remove();
                        $("#layer3_category_id").append(result);
                    }
                });
            } else {
                $('#layer3_category_id').children('option:not(:first)').remove();
            }
        });
        
        $(document).on('click', '#search_attributes_btn', function() {
            var root_category_id = $('#root_category_id').val();
            var layer1_category_id = $('#layer1_category_id').val();
            var layer2_category_id = $('#layer2_category_id').val();
            var layer3_category_id = $('#layer3_category_id').val();
            
            var category_id = (layer3_category_id != '') ? layer3_category_id : ( (layer2_category_id != '') ? layer2_category_id : ( (layer1_category_id != '') ? layer1_category_id : ( (root_category_id != '') ? root_category_id : '' ) ) );
            
            if(category_id != '') {
                $('#attributes_data_div').html('<i><b>Please wait...</b></i>');
                
                $.ajax({
                    type: 'POST',
                    url: "{{ route('getFilterAttributesData') }}",
                    data: 'category_id=' + category_id,
                    cache: false,
                    success: function(result) {
                        $('#attributes_data_div').html(result);
                    },
                    complete: function() {
                        if( $('#category_attribute_sets').length>0 ) {
                            $('#category_attribute_sets').select2();
                            
                            $("#priority_pos").sortable({
                                stop: function (event, ui) {
                                    var cnt = 1;
                                    $(this).children('li').each(function () {
                                        var attribue_set_id = $(this).attr('id').split('_')[1];
                                        pri_pos[attribue_set_id][0] = cnt;
                                        $('#pr' + attribue_set_id).val(cnt);
                                        cnt++;
                                    });
                                }
                            });
                            generate_pri_pos_array();
                        }
                    }
                });
            }
        });
        
        // Submit Form
        $(document).on('click', '#submit_btn', function() {
            $('#update_form').submit();
        });
        
        // Define custom method on Array prototype
        // Pass the array as parameter
        Array.prototype.diff = function (arr) {
            // Merge the arrays
            var mergedArr = this.concat(arr);
            // Get the elements which are unique in the array
            // Return the diff array
            return mergedArr.filter(function (e) {
                // Check if the element is appearing only once
                return mergedArr.indexOf(e) === mergedArr.lastIndexOf(e);
            });
        };
        
        $(document).on('change', '#category_attribute_sets', function() {
            var curr_arr = [];

            etot = (($('#category_attribute_sets').val()).length);

            $('#priority_pos').empty();
            $.each($('#category_attribute_sets option:selected'), function () {
                curr_arr.push($(this).val());

                bulild_priority_position($(this).text(), $(this).val());

                //for sorting the li
                $("#priority_pos li").sort(sort_li).appendTo('#priority_pos');

                function sort_li(a, b) {
                    return (parseInt($(b).children('input:first').val())) < (parseInt($(a).children('input:first').val())) ? 1 : -1;
                }
            });

            // call diff
            var diff = prev_arr.diff(curr_arr);

            //pop removed element
            if (diff.length == 1 && prev_arr.length > curr_arr.length) {
                delete pri_pos[diff[0]];
            } else if (diff.length == 1 && prev_arr.length < curr_arr.length) {
                var jsonData = {};
                jsonData = [etot, '0', 1];
                pri_pos[diff[0]] = jsonData;
            }

            prev_arr = curr_arr;
            sort_update();
        });
        
        // Bind the update event manually
        $(document).on('sortupdate', '#priority_pos', function() {
            var cnt = 1;
            $(this).children('li').each(function () {
                var attribue_set_id = $(this).attr('id').split('_')[1];
                pri_pos[attribue_set_id][0] = cnt;
                $('#pr' + attribue_set_id).val(cnt);
                cnt++;
            });
        });
        
    });
    
    function generate_pri_pos_array() {
        $('.sortable').each(function() {
            var attribue_set_id = $(this).attr('id').split('_')[1];
            pri_pos[attribue_set_id] = [$('#pr' + attribue_set_id).val(), $('#po' + attribue_set_id).val(), $('#expanded' + attribue_set_id).val()];
            prev_arr.push(attribue_set_id);
        });
    }
    
    function bulild_priority_position(attr_name, aid) {
        var pri = (typeof(pri_pos[aid]) != "undefined" && pri_pos[aid] !== null) ? pri_pos[aid][0] : 0;
        var pos = (typeof(pri_pos[aid]) != "undefined" && pri_pos[aid] !== null) ? pri_pos[aid][1] : 0;
        var expanded = (typeof(pri_pos[aid]) != "undefined" && pri_pos[aid] !== null) ? pri_pos[aid][2] : 1;
        var newn = [];
        if (pri == 0) {
            pri = (pri > 0) ? pri : etot;
            newn = [aid, pri];
        }

        var position_select = "<select id='po" + aid + "' name='po" + aid + "'><option value='0'>None</option><option value='2'>Left</option><option value='4'>Left Only</option></select>";
        var expanded_select = "<select id='expanded" + aid + "' name='expanded" + aid + "'><option value='0'>Closed</option><option value='1'>Expanded</option></select>";
        var priority_text = "<input type='text' id='pr" + aid + "' name='pr" + aid + "' value='" + pri + "' class='text-to-label' readonly>";
        $('#priority_pos').append('<li class="sortable ui-sortable-handle" id="li_' + aid + '">' + priority_text + '<b style="cursor: pointer">' + attr_name + '</b>&nbsp;&nbsp;' + position_select + '&nbsp;&nbsp;' + expanded_select + '</li>');
        $('#po' + aid).val(pos);
        $('#expanded' + aid).val(expanded);
        console.log(expanded);

        return newn;
    }
    
    function sort_update() {
        $('#priority_pos').trigger('sortupdate'); // Trigger the update event manually
    }
</script>
@endsection