@extends('admin.template.master')

@section('stylesheets')
    {!! Html::style('assets/admin/bower_components/select2/dist/css/select2.min.css') !!}
    <style type="text/css">
    .product-tag-container {
        height: 500px;
        overflow-y: scroll;
    }
    #product_tag_selected_items {
        margin-top: 20px;
    }
    .ordering-txt { width: 40px; text-align: center; }
    .product-tag-column { border-bottom: 1px solid #ccc; }
    </style>
@endsection    


@section('title')
    <section class="content-header">
        <h1>
            Product Tag Setting
            <small>all item types product tag setting</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Product Tag Setting</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">
    @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

        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">List</h3>
                        <div class="box-tools">
                            <div class="input-group input-group-sm" style="width: 150px;">
                              
                            </div>
                        </div>
                    </div>
                    <div class="box-body table-responsive">

                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-group">
                                    <select class="form-control item_type_select2" name="item_type_id" id="item_type_id" >
                                        <option value="">--Select Item Type--</option>
                                        @foreach($item_types as $item) 
                                        <option value="{{ $item->item_type_id }}">{{ $item->item_type_name }}</option>
                                        @endforeach
                                    </select>      
                                </div>                                
                            </div>               
                            <div class="col-md-4">
                                <button class="btn btn-primary" id="product_tag_save_btn">Save</button>   
                                  
                            </div>             
                        </div>  

                        <div class="row">
                             <div class="col-md-8">
                                 <p id="selected-atrributes-list"></p>
                             </div>   
                        </div>                    
                        
                       

                        <div class="row">
                            <div class="col-md-8">
                                <div class="product-tag-container">
                                    <table class="table table-hover" id="product_tag_setting_table">   
                                    </table>                                   
                                </div>

                                <div class="form-group">
                                        <input type="text" id="special_note" name="special_note" class="form-control" placeholder="Enter Special Note" />    
                                </div>

                            </div>                            
                        </div>
                        


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

@section('javascripts')
    {!! Html::script('assets/admin/bower_components/select2/dist/js/select2.full.min.js') !!}
    <script type="text/javascript">


        function getSelectedAttributesList(item_type_id) {
            $.ajax({
                    type: 'GET' , 
                    url: "{{ url('/admin/selected-product-tag-list') }}/" + item_type_id,
                    data: "",
                    success: function(res) {
                        console.log(res)
                        $('#selected-atrributes-list').empty();
                        var parsing = res.split('|');
                        $('#selected-atrributes-list').html(parsing[0]);
                        $('#special_note').val(parsing[1]);
                    }
                });            
        } 


        $(document).on('change', '#item_type_id', function() {
            var item_type_id = $('#item_type_id option:selected').val();
            if (item_type_id !== '') {
                getSelectedAttributesList(item_type_id);
                $.ajax({
                    type: 'GET' , 
                    url: "{{ url('/admin/product-attritbutes-by-item-type') }}/" + item_type_id,
                    data: "",
                    success: function(res) {
                        console.log(res)
                        $('#product_tag_setting_table').empty();
                        $('#product_tag_setting_table').html(res);
                        getSelectedAttributesList(item_type_id);

                    }
                });
            }
        });


        $(document).on('change', '.product_tag_id', function() {
            var item_type_id = $('#item_type_id option:selected').val();

            // checkbox uncheck then remove attribute
            if (!$(this).is(':checked')) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    type: "POST",
                    url: "{{ url('/admin/product-tag-setting-remove') }}",
                    data: 'item_type_id='+ item_type_id + '&attribute_id='+ $(this).val() ,
                    success: function(res) {
                        console.log(res)
                        getSelectedAttributesList(item_type_id);
                    }
                });
            }
            getSelectedAttributesList(item_type_id);
        })


        $(document).on('click', '#product_tag_save_btn', function() {
            
            var item_type_id = $('#item_type_id option:selected').val();
            var allSelItemsIds = [];
            var allSelItems = [];
            var allSelItemsOrderIds = [];
            $('input[type="checkbox"]:checked').each(function() { 
                if ($(this).val() !== 'on') {
                    allSelItemsIds.push($(this).val());
                    var pos = $(this).attr('data-pos');
                    allSelItemsOrderIds.push( $('#product_tag_order_id_'+ $(this).val()).val() );
                    var name = $(this).attr('data-attr');
                    allSelItems.push(name);
                    console.log('pos: '+ pos )
                    console.log('name: '+ name )
                    console.log('text: ' + $('#product_tag_order_id_'+ $(this).val()).val())
                    
                }
            });          
            var special_note = $('#special_note').val();

            console.log('selected item-type: ' + item_type_id)
            console.log('special_note: '+ special_note);

            console.log('attribute_id list: '+ allSelItemsIds);                        
            console.log('attribute_name: '+ allSelItems);
            console.log('order-id: '+ allSelItemsOrderIds);

            if (item_type_id === '') {
                alert('Select Item Type');
            } 
            else if (allSelItemsIds.length === 0) {
                alert('Select Attributes');
            } else {

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

                $.ajax({
                    type: "POST",
                    url: "{{ url('/admin/product-tag-setting') }}",
                    data: 'item_type_id='+ item_type_id + '&allSelItemsIds='+ allSelItemsIds + '&allSelItemsOrderIds='+allSelItemsOrderIds +'&allSelItems='+ allSelItems +
                    '&special_note='+ special_note ,
                    success: function(res) {
                        console.log(res)
                        
                        alert(res);
                        getSelectedAttributesList(item_type_id);

                    }
                });
            }    

        });
    </script>
@endsection