@extends('admin.template.master')

@section('title')
    <section class="content-header">
        <h1>
           Termnal Left Filter Attribute Selected Setup form
            <small>update attribute set</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="{!! url('admin/filter-setup') !!}">Filter Setup</a></li>
            <li class="active">Update</li>
        </ol>
    </section>
@endsection


@section('stylesheets')
{!! Html::style('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;
    }

    .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
        border: 1px solid #d2d6de;
        border-radius: 0;
        padding: 6px 12px;
        height: 34px;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-right: 10px;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-left: 0;
        padding-right: 0;
        height: auto;
        margin-top: -4px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 28px;
        right: 3px;
    }

    .alertbox {
        width: 97%;
        margin-left: 14px;
    }
</style>
<script>
    var pri_pos = [];
    var etot = 0;
    var prev_arr = [];
</script>
@endsection

@section('main-content')
<section class="content">
    <div class="row">

        @if(Session::has('message'))
            <div class="row">
                <div class="col-xs-12">
                    <div class="alert alert-success alert-dismissible alertbox">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {{ Session('message') }}
                    </div>
                </div>
            </div>
        @endif

        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Update</h3>
                </div>

                    <div class="box-body">
                       <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" multiple 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>

                </div>
            </div>
        </div>
    </section>
@endsection


@section('javascripts')
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
{!! Html::script('assets/admin/bower_components/select2/dist/js/select2.full.min.js') !!}
<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();
            console.log('layer3_category_id', layer3_category_id)

            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('getFilterAttributesDataForTerminal') }}",
                    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_selected_form').submit();
            alert('Clicked update button');
        });

        // 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