@extends('admin.template.master')

@section('title')
    <section class="content-header">
        <h1>
            Item Type Wise Attribute Setup form
            <small>update attribute</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="{!! url('admin/item-type-wise-attribute-setup') !!}">Item Type Wise Attribute 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;
    }
    .attr_div {
        margin: 0 auto;
        width: 100%;
    }
    
    .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;
    }
    
</style>

@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-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">List</h3>
                </div>
                
                <div class="box-body">
                    <table align="center" width="100%" id="attribute_item_type_setting">
                            <thead>
                                <th>Item Type</th>
                                <th>Attribute</th>
                            </thead>
                    </table>
                </div>
            </div>    
                
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Update</h3>
                </div>
    
                    <div class="box-body">
                        <table width="40%" align="center" >
                        <tr>
                            <td>Item Type&nbsp;</td>
                            <td >
                                <select id="item_type_id">
                                    <option value="">Select Item Type</option>
                                    @foreach($items as $item)
                                    <option value="{{ $item->item_type_id }}">{{ $item->item_type_name }}</option>
                                    @endforeach
                                </select>
                            </td>
                         
                            <td>
                                <button id="save_btn" type="button">Save</button>
                            </td>
                        </tr>
                        <tr>
                            <td>Attributes</td>
                            <td>
                                <div id="attributes_list" style="  "></div>
                            </td>
                        </tr>
                        </table>
                    </div>

                </div>

            </div>
        </div>
    </section>




<div class="container">

</div>
@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">
    
    $('#item_type_id').select2();
     
    $(document).on('change', '#item_type_id', function() {
        var id = $(this).val();
        if (id != '') {
            $.ajax({
                type: 'GET',
                url: "{{ url('admin/item-type-wise-attribute-search') }}/" + id ,
                success: function(res) {
                    console.log('attr',res.attributes);
                    console.log('len', res.attributes.length);
                    console.log('selected-attr',res.attributesSelected);
                    console.log('selected-attr-len',res.attributesSelected.length);
                    if ( res.status ) {
                        console.log('len', res.attributes.length);
                        console.log('attr', res.attributes);
                        var str = '<ul>'; 
                         
                        $.each( res.attributes, function(index, item) {
                            console.log('item=>', item)
                            var isExist = res.attributesSelected.filter(o=> o.attribute_set_id === item.attribute_set_id); 
                            console.log('item-data:isExist:' ,isExist);
                            
                            if (+isExist.length > 0 && isExist !== undefined && isExist !== '') {
                                str += '<li><p><input type="checkbox" name="attribute_set_id[]" class="item_type_chk" checked id="attr_item_type_id_'+ item.attribute_set_id +'" value="'+ item.attribute_set_id +'" /> ' +
                                    item.attribute_set_name +
                                '<input type="text" style="width: 50px;" name="sort_order[]" class="sort_ordering" id="sort_id_'+ item.attribute_set_id +'" value="'+ isExist[0].sort_order +'" />'
                                +'</p></li>';    
                            } else {
                                str += '<li><p><input type="checkbox" name="attribute_set_id[]" class="item_type_chk" id="attr_item_type_id_'+ item.attribute_set_id +'" value="'+ item.attribute_set_id +'" /> ' +
                                    item.attribute_set_name +
                                '<input type="text" style="width: 50px;" name="sort_order[]" class="sort_ordering" id="sort_id_'+ item.attribute_set_id +'" value="1" />'
                                +'</p></li>';        
                            }
                        });
                          
                        str += '</ul>';
                        $('#attributes_list').html(str); 
                    }
                }
            });
        }
     });
     
     
     
     
     
     $(document).on('click', '#save_btn', function() {
         
         var item_type_id = $('#item_type_id option:selected').val();
         
          var selectedItems = [];
          var selectedOrders = [];
          $('.item_type_chk').each(function() {
              if ($(this).is(':checked')) {
                    selectedItems.push( $(this).val() );     
                    selectedOrders.push( $('#sort_id_' + $(this).val() ).val() );
              }
          });
          
          console.log
          
          if (item_type_id == '') {
              alert('Select Item Type');
              return false;
          } 
          
          else if (selectedItems.length ==0 ) {
              alert('Select Delivery method');
              return false;
          } 
          
          else {
              
                $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')  } });
                $.ajax({
                    type: 'POST' ,
                    url: "{{ route('item-type-wise-attribute-setup-action') }}" ,
                    data: 'selectedItems='+ selectedItems + '&item_type_id='+item_type_id + '&selectedOrders='+selectedOrders,
                    success: function(res){
                        console.log('res', res);
                        location.reload();
                    }
                });
              console.log('selectedItems', selectedItems);
              console.log('selectedOrders', selectedOrders);
          }
     });
     
     
     
 
    $('#attribute_item_type_setting').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "{{ route('get-attribute-item-type-setting-data') }}",
        "order": [[0, "DESC"]],
        "columns": [
            {data: 'item_type_name'},
            {data: 'attribute_set_name'}
        ],
        "autoWidth": false
    });
     
     
</script>

@endsection