@extends('layouts.app')

@section('link')
    <link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet">
    
@endsection

@section('style')
<style>
    .chosen-single{
        min-height:25px !important;
        width:300px !important;
    }
    
</style>    
@endsection



@section('content')
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        {{__('texte.product_lists_arr.create.add_product_list')}}
                        <div class="pull-right">
                            <button class="btn btn-primary back-btn" onclick="window.history.back()">{{__('texte.product_lists_arr.create.back')}}</button>
                        </div>
                    </h3>
                </div>

                <div class="panel-body">
                    <form id="product_list_create" enctype="multipart/form-data" method="POST" action="{{ route('product_lists.store') }}" class="form form-horizontal">
                        {{ csrf_field() }}

                        @permission('product_list-form-title-read')
                        <div class="form-group{{ $errors->has('title') ? ' has-error' : '' }}">
                            <label for="title" class="control-label col-xs-2 col-sm-2 col-md-2">{{ucfirst(__('texte.product_lists_arr.create.title'))}}</label>
                            <div class="input-group col-xs-8 col-sm-8 col-md-8">
				<span class="input-group-addon"><i class="glyphicon glyphicon-ice-lolly-tasted"></i></span>
                                <input type="text" class="form-control" id="title" name="title" value="{{ old('title') }}" placeholder="{{__('texte.product_lists_arr.create.title')}}" maxlength="255" required autofocus 
                                    @nonepermission('product_list-form-title-write')
                                        readonly 
                                    @endnonepermission
                                />
                                @if ($errors->has('title'))
                                    <span class="help-block"><strong>{{ $errors->first('title') }}</strong></span>
                                @endif
                                <div class="errorBox"></div>
                            </div>
                        </div>
                        @endpermission     
                        
                        <div class="form-group{{ $errors->has('product_id') || $errors->has('product_client_id[]') ? ' has-error' : '' }}">
                            <label for="title" class="control-label col-xs-2 col-sm-2 col-md-2">Редове</label>
                            <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                <table id='products_table' class="table table-bordered">
                                    <thead>
                                        <th>Продукт</th>
                                        <th>Наш ID</th>
                                        <th>Клиентски ID</th>
                                        <th><button type='button' class='btn btn-primary btn-xs add_row'><i class="glyphicon glyphicon-plus"></i></button></th>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select name="product[]" class="product">
                                                    <option value=''>Изберете продукт</option>
                                                    @foreach($products as $product)
                                                    <option value="{{$product->id}}">{{$product->name}}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type='text' class='product_id' name='product_id[]' value=''/>
                                            </td>
                                            <td>
                                                <input type='text' class='product_client_id' name='product_client_id[]' value=''/>
                                            </td>
                                            <td>
                                                <button type='button' class='btn btn-xs btn-danger btn-delete'><i class='glyphicon glyphicon-trash'></i></button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="errorBox"></div>
                            </div>
                            
                        </div>
                        
                        <div class="form-group">
                            <div class="col-xs-12 col-xs-offset-5 col-sm-12 col-sm-offset-5 col-md-12 col-md-offset-5">
                                <button type='button' class='btn btn-primary add_row'>Добави нов ред</button>
                                <button type="submit" class="btn btn-success submit" @nonepermission('product-route-create') disabled @endnonepermission>{{__('texte.product_lists_arr.create.add')}}</button>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/chosen.js') }}"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/validation.js') }}"></script>
<script src="{{ asset('js/additional_methods.min.js') }}"></script>
<script src="{{ asset('js/form.map.js') }}"></script>

<script type="text/javascript">

    $('.product').chosen({ width: '300px!important' });

    $(document).on('click','.add_row', function(){
        var row = $('#products_table tr:last').clone();        
        row.find('.product_id').val('');
        row.find('.product_client_id').val('');
        $('#products_table tr:last').after(row);
        
        $(row).find('.product').closest('td').find('.chosen-container').remove();
        $(row).find('.product').chosen();
        
        $('.product_id').each(function(){ 
                $(this).rules("add", {
                    required: true,
                    number:true,
                    digits:true,
                    messages: {
                        required: "Моля, попълнете ID на продукт.",
                        number: "Моля въведете ID в правилния формат.",
                        digits: "Моля въведете ID в правилния формат.",
                    }
                });
        });
    });
    
    $(document).on('click','.btn-delete', function(){
        if($('#products_table tbody tr').length>1){
            $(this).closest('tr').remove();
        }
        else{
            $(this).closest('tr').find('.product').val('').trigger('chosen:updated');
            $(this).closest('tr').find('.product_id').val('')
            $(this).closest('tr').find('.product_client_id').val('')
        }
    });
    
    $(document).on('change','.product', function(){
        if($(this).val()!=''){
            var value = $(this).val();
    
            var colArray = $('.product_id').map(function(){return $(this).val();}).get();                                                        
                                        
            if($.inArray(value, colArray) !== -1){                
                alert('Този продукт вече е добавен !');
                $(this).val('').trigger('chosen:updated');
                $(this).closest('tr').find('.product_id').val('');
                $(this).closest('tr').find('.product_client_id').val('');
            }
            else{
                $(this).closest('tr').find('.product_id').val($(this).val());
            }
        }
        else{
            $(this).closest('tr').find('.product_id').val('');
            $(this).closest('tr').find('.product_client_id').val('');
        }
    });
    
    
    $(document).on('blur','.product_id', function(){
        if($(this).val()!=''){
            var element = $(this);
            var value = $(this).val();
    
            var colArray = $('.product_id').map(function(){if(!$(this).is(element)){return $(this).val();}}).get();                                                        
                                        
            if($.inArray(value, colArray)!== -1){                
                alert('Този продукт вече е добавен !');
                $(this).val('');
                $(this).closest('tr').find('.product').val('').trigger('chosen:updated');
                $(this).closest('tr').find('.product_client_id').val('');
            }
            else{
                if($(this).closest('tr').find('.product option[value="'+$(this).val()+'"]').length>0){
                    $(this).closest('tr').find('.product').val($(this).val()).trigger('chosen:updated');
                }
                else{
                    $(this).val('');
                    $(this).closest('tr').find('.product').val('').trigger('chosen:updated');
                    alert('Не е намерен продукт с такова ID');                    
                }
            }
        }
    });
    
    
    $(document).on('blur','.product_client_id', function(){
        if($(this).val()!=''){
            var element = $(this);
            var value = $(this).val();
    
            var colArray = $('.product_client_id').map(function(){if(!$(this).is(element)){return $(this).val();}}).get();                                                        
                                        
            if($.inArray(value, colArray)!== -1){                
                alert('Дублиране на Клиентски ID !');
                $(this).val('');
            }
        }
    });
    
</script>
@endsection