@extends(branchMenu())
@section('content')
<?php Fun::lang() ?>
<div class="page">
    <div class=container>
        <div class="top-content">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <div class="title-add">
                        <div class="pull-left">
                            <h3>{{__('administrator.new_product')}}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {!! Form::open(array('route' => 'products.store','method'=>'POST','enctype'=>'multipart/form-data','class'=>'jform')) !!}
        <div class="row" id="tabs">
            <div class="tab-content">
                <div id="home" class="tab-pane fade in active">
                    <div class="col-sm-12">
                        <div class="master-form">
                            <div class="title-note">
                                <h3>
                                    <span class="fa fa-exclamation-triangle"></span> {{__('administrator.create')}}
                                    <i>({{__('administrator.fields_in_red_are_required')}})</i>
                                </h3>
                            </div>
                            <div class="form-group col-sm-12 col-xs-12">
                                <div class="col-sm-2 col-xs-12 ">
                                    <label class="required" for="name">{{__('administrator.item_name')}} </label>
                                </div>
                                <div class="col-sm-10 col-xs-12">
                                    {!! Form::text('product_name', null, array('placeholder' =>
                                    __('administrator.item_name'),'class' => 'form-control
                                    input-sm','maxlength'=>'50')) !!}
                                </div>
                            </div>
                            <div class="form-group col-sm-12 col-xs-12">
                                <div class="col-sm-2 col-xs-12 ">
                                    <label for="name" class="required">{{__('administrator.brands')}}</label>
                                </div>
                                <div class="col-sm-10 paddin-0">
                                    <div class="col-sm-12">
                                        {!! Form::select('brand', $brand, @$product->brand, ['placeholder' =>
                                        __('administrator.please_select'),'class' => 'form-control select2']) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-12 col-xs-12">
                                <div class="col-sm-2 col-xs-12 ">
                                    <label class="required" for="name">{{__('administrator.barcode')}} </label>
                                </div>
                                <div class="col-sm-10 col-xs-10">
                                    {!! Form::text('barcode',$code, array('placeholder' =>
                                    __('administrator.product_code'),'class' => 'form-control input-sm')) !!}
                                </div>
                            </div>
                            <div class="form-group col-sm-12 col-xs-12">
                                <div class="col-sm-2 col-xs-12 ">
                                    <label for="name" class="required">{{__('administrator.unit')}}</label>
                                </div>
                                <div class="col-sm-10 paddin-0">
                                    <div class="col-sm-12" id="get_selectUnit">
                                        {!! Form::select('unit_id', $unit, null, ['placeholder' =>
                                        __('administrator.please_select'),'class' => 'form-control','required']) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="form-group col-sm-12 col-xs-12">
                                <div class="col-sm-2 col-xs-12 ">
                                    <label for="name" class="required">{{__('administrator.category')}}</label>
                                </div>
                                <div class="col-sm-10 paddin-0">
                                    <div class="col-sm-12">
                                        {!! Form::select('category_id', $category, @$product->category_id,
                                        ['placeholder' => __('administrator.please_select'),'class' => 'form-control
                                        select2','']) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-12 col-xs-12">
                                <div class="col-sm-2 col-xs-12 ">
                                    <label>{{__('administrator.qty_alert')}}</label>
                                </div>
                                <div class="col-sm-10 paddin-0">
                                    <div class="col-sm-12">
                                        {!! Form::text('alert_qty', null,['placeholder' =>0,'class' => 'form-control']) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="form-group col-sm-12 col-xs-12">
                                <div class="col-sm-10 col-xs-10 col-md-10 col-sm-offset-2 col-xs-offset-2 col-md-offset-2">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th width="110px"><label class="required">{{__('administrator.size')}}</label>
                                                <th width="100px"><label class="required">{{__('administrator.color')}}</label>
                                                </th>
                                                <th><label class="required">{{__('administrator.cost')}}<br>({{__('administrator.riel')}})</label>
                                                </th>
                                                <th><label class="required">{{__('administrator.cost')}}<br>({{__('administrator.usd')}})</label></th>
                                                <th width="120px"><label class="required">{{__('administrator.barcode')}}</label></th>
                                                <th style="text-align: center"><span class="cursor button_success fa fa-plus" id="add_unit"></span></th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbody">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xs-12 ">
                                <div class="form-group footer-save">
                                    <button type="button" class=" button_primary pull-right submit_form"><span
                                            class="fa fa-save"></span> {{__('administrator.save')}}</button>
                                    <button type="button" onClick="history.go(-1)" class=" button_warning pull-right">
                                        <span class=" fa fa-arrow-circle-left"></span> {{__('administrator.back')}}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {!! Form::close() !!}
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    $(document).ready(function () {
            $('.submit_form').on('click', function () {
                let array = [];
                let count = 0;
                $('.barcode_child').each(function (ii, vv) {
                    array[ii] = vv.value;
                });
                let sorted = array.sort();
                for (let i = 0; i < sorted.length - 1; i++) {
                    if (sorted[i + 1] === sorted[i]) {
                        count++;
                    }
                }
                if (count) {
                    $.alert('{{__('administrator.barcode_is_duplicated')}}', '{{__('administrator.warning')}}');
                } else {
                    $('.jform').submit();
                }
            });
            add_unit();
            $('select[name=brand]').on('change', function () {
                $.get('{{route('products.create')}}',{brand:$(this).val()},function (data) {
                    let code = '{{$code}}';
                    $('input[name=barcode]').val(data+code);
                });
            });
            $('#add_unit').on('click', function () {
                add_unit();
            });
            $(document).on('click', '.remove_row', function () {
                $(this).closest("tr").remove();
            });
            $('input[name=increase]').on('click', function () {
                let this_ = $(this);
                if (this_.prop('checked')) {
                    this_.closest('.form-group').find('input').removeAttr('disabled');
                    this_.closest('div').find('input[type=text]').prop('disabled', 'disabled');
                }
            });
            $(document).on('change', '.size_code,.color_code', function () {
                concat_code($(this));
            });
        });


        function concat_code(this_) {
            let color = this_.closest('tr').find('.color_code').val();
            let size = this_.closest('tr').find('.size_code').val();
            let barcode = $('input[name=barcode]').val();
            this_.closest('tr').find('.barcode_child').val(barcode + '' + size + '' + color);
        }
        function add_unit() {
            let count = $('#tbody tr').length;
            let row = `<tr>
                                        <td class="count_index` + (count + 1) + `">` + (count + 1) + `</td>
                                        <td>
                                        {!! Form::select('size_code[]', $size,null, ['placeholder' => __('administrator.please_select'),'class' => 'form-control size_code select2','']) !!}
                                        </td>
                                        <td>
                                        {!! Form::select('color_code[]', $color,null, ['placeholder' => __('administrator.please_select'),'class' => 'form-control color_code select2','']) !!}
                                        </td>
                                        <td><input name="cost_riel[]" type="text" class="form-control input-sm number-only cost_riel" placeholder="{{__('administrator.cost')}}" required></td>
                                        <td><input name="cost_usd[]" type="text" class="form-control input-sm number-only cost_usd" placeholder="{{__('administrator.cost')}}" required></td>
                                        <td><input name="barcode_child[]" type="text" class="form-control input-sm number-only barcode_child" value="" placeholder="{{__('administrator.barcode')}}"></td>
                                        <td style="text-align: center"><span class="cursor button_danger fa fa-close remove_row" ></span></td>
                             </tr>`;
            $('#tbody').append(row).find('tr:last .select2').select2();
            let old_row = $(document).find('.count_index' + count).closest('tr');
            let old_size = old_row.find('.size_code').val();
            let old_color = old_row.find('.color_code').val();
            let old_cost_usd = old_row.find('.cost_usd').val();
            let old_cost_riel = old_row.find('.cost_riel').val();
            let old_barcode_child = old_row.find('.barcode_child').val();

            let new_row = $(document).find('.count_index' + (count + 1)).closest('tr');
            new_row.find('.size_code').val(old_size).change();
            new_row.find('.color_code').val(old_color).change();
            new_row.find('.cost_usd').val(old_cost_usd);
            new_row.find('.cost_riel').val(old_cost_riel);
            new_row.find('.barcode_child').val(old_barcode_child);
        }


</script>
@endsection
