@extends('layouts.app_mobile')

@section('link')
    <link href="{{ asset('css/theme.default.css') }}" rel="stylesheet">
    <link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet">    
    
    <link href="{{ asset('css/mobile.css') }}" rel="stylesheet">
@endsection

@section('style')
<style>
    .chosen-container .chosen-drop{
        width:100% !important;
    }
    
    .choose_product{
        background: #e7e7e7;
        width: 100%;
        z-index: 1000;
        position: fixed;
        border:1px solid #000;
        margin-top:5px;
        top: 100px;
        left: 0px;
        display:none;
    }
</style>
@endsection

@section('content')
    <div class="gray-bg dashbard-1">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header" style="width:250px;position: fixed;background:#f3f3f4;">
                    <a class="navbar-minimalize minimalize-styl-2 btn-xs btn-primary" href="{{route('mobile_views.home')}}">{{__('texte.mobile_views_arr.return.menu')}} </a> 
                    <button id="new_barcode_button" type="button" class="minimalize-styl-2 btn btn-primary button-list">{{__('texte.mobile_views_arr.return.scan_code')}}</button> 
                    <button id="beginning_button" type="button" class="minimalize-styl-2 btn btn-primary" style="display:none;">{{__('texte.mobile_views_arr.input.beginning')}}</button> 
                </div>
            </nav>
        </div>
        <div class="row screen-content">                
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id='1'>
                        <form id="mobile_return_create" method="POST" action="{{ route('documents.store', $doc_type->id) }}" class="form form-horizontal" novalidate>
                            {{ csrf_field() }}
                            <input type="hidden" name="parent" value="{{ $parent }}" />
                            <input type="hidden" id="doc_type" name="doc_type" value="{{$doc_type->id}}" />
                            <input type="hidden" id="mobile" name="mobile" value="1" />

                            <div class="form-group short">
                            @if ($drivers->isNotEmpty())
                                @permission('document-form-driver-read')
                                <div class="col-xs-12 col-sm-12 col-md-12 input" style="padding:0px 2px 0px 2px;" {{ $errors->has('driver') ? ' has-error' : '' }}>
                                    <select class="form-control" id="user" name="user" required autofocus 
                                        @nonepermission('document-form-driver-write')
                                            readonly 
                                        @endnonepermission
                                    >
                                    <option value="">{{__('texte.mobile_views_arr.return.driver')}}</option>
                                        @foreach($drivers as $driver)
                                        <option value='{{$driver->id}}' {{isset($docTemp->documentable_id) && $driver->id==$docTemp->documentable_id ? "selected" : ""}}>{{$driver->name}}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('user'))
                                        <span class="help-block"><strong>{{ $errors->first('user') }}</strong></span>
                                    @endif
                                    <div class="errorBox"></div>
                                </div>                                   
                                @endpermission
                            @endif
                            </div>

                            <div class="form-group short">
                            @permission('document-form-storage-read')
                                <div class="col-xs-12 col-sm-12 col-md-12 input" style="padding:0px 2px 0px 2px;"{{ $errors->has('storage') ? ' has-error' : '' }}>
                                    <select class="form-control" id="storage" name="storage" 
                                        @nonepermission('document-form-storage-write')
                                            readonly 
                                        @endnonepermission
                                    >
                                        @foreach($storages as $storage)
                                        <option value="{{$storage->id}}" {{isset($docTemp->storage_id) && $storage->id==$docTemp->storage_id ? "selected" : ""}}>{{$storage->name}}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('storage'))
                                        <span class="help-block"><strong>{{ $errors->first('storage') }}</strong></span>
                                    @endif
                                    <div class="errorBox"></div>
                                </div>
                            @endpermission
                            </div>

                            <div class="form-group">

                                <div class="col-xs-12 col-sm-12 col-md-12 input" style="padding:0px;">                                        
                                    @permission('document-form-date-read')
                                    <div class='element-holder'>
                                        <input type="text" class="form-control" style="margin-right:10px;width:62%;" id="date" name="date" value="{{ isset($docTemp->date) ? date_format(new DateTime($docTemp->date), 'd.m.Y') : date('d.m.Y') }}" placeholder="{{__('texte.mobile_views_arr.return.date')}}" maxlength="10" required readonly />
                                        @if ($errors->has('date'))
                                            <span class="help-block"><strong>{{ $errors->first('date') }}</strong></span>
                                        @endif
                                        <div class="errorBox"></div>
                                        <button type='button' class='btn btn-sm btn-primary show_note' style="min-height:30px;">{{__('texte.mobile_views_arr.return.note')}}</button>
                                    </div>
                                    @endpermission

                                    <div id="note" hidden="hidden">
                                        @permission('document-form-note-read')
                                        <div class="input-group col-xs-12 col-sm-12 col-md-12 input" {{ $errors->has('note') ? ' has-error' : '' }} hidden="hidden">
                                            <textarea class="form-control" id="note" name="note" rows="14" placeholder="{{__('texte.mobile_views_arr.return.note')}}" 
                                                @nonepermission('document-form-note-write')
                                                    readonly 
                                                @endnonepermission
                                            >{{ isset($docTemp->note) ? $docTemp->note : ''}}</textarea>
                                            @if ($errors->has('note'))
                                                <span class="help-block"><strong>{{ $errors->first('note') }}</strong></span>
                                            @endif
                                            <div class="errorBox"></div>
                                        </div>
                                        <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                            <button type='button' class='btn btn-primary hide_note' style="width:100%;">{{__('texte.mobile_views_arr.return.done')}}</a>
                                        </div>                                        
                                        @endpermission
                                    </div>
                                </div>
                            </div>

                            @permission('document-form-product-read')
                            <div class="form-group" hidden>
                                <label for="product" class="control-label col-xs-2 col-sm-2 col-md-2">{{__('texte.mobile_views_arr.return.product')}}</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>
                                    <select class="form-control" id="product" name="product"></select>                                        
                                </div>
                            </div>
                            @endpermission

                            <div class="form-group" hidden>
                                <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                    <div class="ui-widget">
                                        <input placeholder="{{__('texte.mobile_views_arr.return.add_product')}}" class="autocomplete" style="width:100%" value="">
                                    </div>
                                </div>
                            </div>

                            @permission('document-form-stocks-read')
                            <div id="product_list" class="form-group" hidden>
                                <div class="input-group col-xs-12 col-sm-12 col-md-12 input">
                                    <table id="product_stocks" class="table table-bordered table-striped table-hover" style="font-size:10px;">   
                                        <thead>
                                            <th>{{__('texte.mobile_views_arr.return.id')}}</th>
                                            <th>{{__('texte.mobile_views_arr.return.product')}}</th>
                                            <th>{{__('texte.mobile_views_arr.return.count')}}</th>
                                            <th>{{__('texte.mobile_views_arr.return.measure')}}</th>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                    @if ($errors)
                                        <span class="help-block"><strong>{{ $errors->first() }}</strong></span>
                                    @endif
                                    <div class="errorBox"></div>
                                </div>
                            </div>
                            @endpermission


                            @permission('document-form-stocks-read')
                            <div id="wrappage_list" class="form-group" hidden>
                                <div style='margin-bottom:5px;display:flex;'>
                                    <div style='width:45%;margin-right:5px;'>
                                        <select name="pallets" id="pallets">
                                            <option value="">{{__('texte.mobile_views_arr.return.pallets')}}</option>
                                            @foreach($products as $index=>$product)
                                                @if($product->category_id==75)
                                                    <option value="{{$product->id}}" data-i="{{$index}}" >{{$product->name}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                    <button type="button" class="btn btn-success" style='font-size:11px;' onclick="calculate_wrappage()">{{__('texte.mobile_views_arr.return.calculate_wrappage')}}</button>
                                </div>
                                <div class="input-group col-xs-12 col-sm-12 col-md-12 input">
                                    <table id="wrappage_stocks" class="table table-bordered table-striped table-hover" style="font-size:10px; table-layout: fixed;">  
                                        <thead>
                                            <th colspan="5">{{__('texte.mobile_views_arr.return.wrappage')}}</th>
                                            <th colspan="4">{{__('texte.mobile_views_arr.return.quantity')}}</th>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                    @if ($errors)
                                        <span class="help-block"><strong>{{ $errors->first() }}</strong></span>
                                    @endif
                                    <div class="errorBox"></div>
                                </div>
                            </div>
                            @endpermission

                            <div class="form-group">
                                <div class="btn-group btn-group-sm" style='margin:1px 36%;'>
                                    <button type="submit" class="btn btn-primary" style='font-size:11px;' @nonepermission('document-route-create') disabled @endnonepermission>{{__('texte.mobile_views_arr.return.save')}}</button>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div id="2" style="display:none;">
                        <div class="full-width">
                            <div class="col-xs-12 col-sm-12 col-md-12 input" style="padding:0px;" {{ $errors->has('place') ? ' has-error' : '' }}>
                                <h4 style="margin-bottom:5px;">{{__('texte.mobile_views_arr.return.place')}}</h4>
                                <select class="form-control place" id="place" name="place" 
                                    @nonepermission('document-form-place-write')
                                        readonly 
                                    @endnonepermission
                                >
                                    @foreach($places as $place)
                                    <option value="{{$place->id}}" {{isset($docTemp) && count($docTemp->rows)>0 && $place->id==$docTemp->rows[0]->place_id ? "selected" : ""}}>{{$place->address}}</option>
                                    @endforeach
                                </select>
                                @if ($errors->has('place'))
                                    <span class="help-block"><strong>{{ $errors->first('place') }}</strong></span>
                                @endif
                                <div class="errorBox" style="margin-bottom:5px;"></div>
                            </div>
                        </div>
                        
                        <input type="hidden" id="barcode_scanning" name="barcode_scanning" value="0"/> 
                        <div class="element_div">
                            <span class="left-element">{{__('texte.mobile_views_arr.return.barcode')}}</span>
                            <input class="right-element" type="text" id="product_barcode" name="product_barcode" value=""/>
                        </div>                                
                        <div class="element_div">
                            <span class="left-element">{{__('texte.mobile_views_arr.return.quantity_short')}}</span>
                            <input class="right-element" type="text" id="quantity" name="quantity" value="" style="width:40%"/>
                            <span class='quantity_measure'></span>
                        </div>
                        <div class="element_div">
                            <span class="left-element">{{__('texte.mobile_views_arr.return.pallet')}}</span>
                            <input class="right-element" type="text" id="pallet" name="pallet" value="" style="width:70%"/>
                        </div>
                        <div class="element_div">
                            <button id="go" type="button" class="btn btn-success">{{__('texte.mobile_views_arr.return.go')}}</button> 
                        </div>
                        
                        <div class="choose_product" style="display:none;">
                            <table id="product_options" class="table table-bordered">
                                <span>Моля изберете продукт</span>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </div>    

<script src="{{ asset('js/form.map.js') }}"></script>
<script src="{{ asset('js/jquery.tablesorter.min.js') }}"></script>
<script src="{{ asset('js/chosen.js') }}"></script>
<script src="{{ asset('js/chosen-readonly.js') }}"></script>
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('js/moment-with-locales.min.js') }}"></script>
<script src="{{ asset('js/datepicker-bg.js') }}"></script>
<script src="{{ asset('js/document.js') }}"></script>
<script src="{{ asset('js/document.mobile_input.js') }}"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/validation.js') }}"></script>
<script src="{{ asset('js/BarcodeParser.js') }}"></script> 
<script src="{{ asset('js/jquery.scannerdetection.js') }}"></script>

<script type='text/javascript'>
    $('#user,#storage,#place,#pallets').chosen();
    $('.sidebar-collapse').slimscroll();
    $('input#date').datepicker({option: $.datepicker.regional['bg'], maxDate: '+0M +0D'});
    var scroll_offset = 50;
    
    $('#pallets').on('change', function(){
       if($(this).val()!=''){
         let i = $(this).children('option:selected').attr('data-i');  
         self.addRow(i);
       } 
    });
    
    
    $(document).ready(function(){
        new Document_MobileInput({!! $products->toJSON() !!}, {!! $intangibles->toJSON() !!}, {!! $stocks->toJSON() !!}, {!! $storages->toJSON() !!}, '{{ old('storage', $storage_id) }}', {!! $places->toJSON() !!}, {!! '"'.$doc_type->title.'"' !!} );
    });
   
    $(document).on('click','.show_note',function(){
       $('#note').show();
       $("html, body").animate({
            scrollTop: $('#note').offset().top-scroll_offset 
       }, 200);
    });
    
    $(document).on('click','.hide_note',function(){
       $('#note').hide();
    });
    
    $('.navbar-minimalize').on('click',function(){
        if($('body').hasClass('body-small')){
            $(".screen-content,.button-document,.button-add,.button-list").toggle();
        }
    });
    
    $('.button-document').on('click', function(){
        $('#product_list').hide();
        $("html, body").animate({
            scrollTop: $('#contragent').offset().top-scroll_offset 
       }, 200);
    });
    
    $('.button-add').on('click', function(){
        $('.autocomplete').closest('.form-group').show();
        $("html, body").animate({
            scrollTop: $('.autocomplete').offset().top-scroll_offset
       }, 200);
       $('.autocomplete').focus();
       
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '/store_temp_stocks',
            type: 'POST',
            data: {data: $("#mobile_input_create").serialize(),},
        });
    });
    
    $('.button-list').on('click', function(){
        $('#product_list').show();
        $("html, body").animate({
            scrollTop: $('#product_stocks').offset().top-scroll_offset 
       }, 200);
    });
    
    $("#quantity").on('change',function(){
        setTimeout(function(){
            $("#pallet").focus();
       });
    });
    
    $('#new_barcode_button').on('click', function(){
        $('#1').hide();
        $('#2').show();         
        $('#2').find('input:text').val(''); 
        $('.quantity_measure').text('');
        $('#barcode').focus(); 
        $('#barcode_scanning').val(1);
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '/store_temp_stocks',
            type: 'POST',
            data: {data: $("#mobile_return_create").serialize(),},
        });
        $(this).hide();
        $('#beginning_button').show();
    });
    
    $('#beginning_button').on('click', function(){
        $('#1').show();
        $('#2').hide();
        $(this).hide();
        $('#new_barcode_button').show();
    });
    
    $('#go').on('click',function(){        
        $('#2').find('.right-element').each(function(){
            if($(this).attr('id')!='pallet' && $(this).val()==''){
                $(this).addClass('error').attr('placeholder','Попълни !');
            }
            else{
                $(this).removeClass('error').attr('placeholder','');
            }
        });
       
        if($('#2').find('.error').length==0){  
            $('#1').show();
            $('#2').hide();
            $('#barcode_scanning').val(1);
            $('#beginning_button').hide();
            $('#new_barcode_button').show();
        }        
        $('#product').change();
    });
    
    $('#product_barcode').on('change', function(){        
        if($(this).val()!=''){
            let product = $(this).val();
            $.ajax({
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: '/find_products',
                            type: 'POST',
                    data: { 'product' : product},
                    success: function(response){
                                    if(response.length==0){
                                        alert('Не са намерени продукти.');
                                        $('#product').val('');
                                    }
                                    else{
                                        if(response.length==1){
                                            $('#product').val(response[0].id);   
                                            $('#product_barcode').val(response[0].name);
                                            $('.quantity_measure').text(response[0].measure==1 ? 'брой' : response[0].package_name);
                                            setTimeout(function(){
                                                $("#quantity").focus();
                                            });
                                        }
                                        else{
                                            $('#product_options tbody tr').remove();
                                            for(var i in response){
                                                var row = "<tr><td data-id='"+response[i].id+"' data-measure='"+(response[i].measure==1 ? 'брой' : response[i].package_name)+"'>"+response[i].name+"</td></tr>";
                                                $('#product_options tbody').append(row);
                                            }
                                            $('.choose_product').show();
                                        }
                                    }
                             }
            });
        }        
    });
    
    $(document).on('click','#product_options tbody tr', function(){
        $('#product').val($(this).find('td').attr('data-id'));
        $('#product_barcode').val($(this).find('td').text());
        $('.quantity_measure').text($(this).find('td').attr('data-measure'));
        setTimeout(function(){
            $("#quantity").focus();
        });
        $('.choose_product').hide();
    });
    
    $(document).on('click','.list_row',function(){
        $(this).next('tr').toggle();
        $(this).next('tr').find('.pallet').focus();
    })
    
    $(document).on('focus', '.autocomplete', function () {
        var element = $(this);
        
        element.autocomplete({
            source: function( request, response ) {            
                if(request.term.length>3){  
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/get_input_autocomplete_products',
                        type: 'POST',
                        data: {'product' : request.term},

                        success: function(data) {
                          response( data);
                        }
                    });
                }               
            },
            select:function(e,ui)
            {
                $('#product').val(ui.item.id).change();
                $('.autocomplete').val('');
            },
            response: function(event, ui) {

              if(ui.content.length === 1) {
                ui.item = ui.content[0];
                $(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', ui);
                $(this).autocomplete('close');
                $('.autocomplete').val('');
              }
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                    .data("ui-autocomplete-item", item)
                    .append("<table class='results_table' width='100%'><tr><td width='60%'>" + item.name + "</td></tr></table>")
                    .appendTo(ul);
        };
    });
	
	
	function read_barcode(barcode){
        try {
                answer = parseBarcode(barcode);
                $.each(answer.parsedCodeItems, function (i) {
                    switch(answer.parsedCodeItems[i].ai){
                        case "01": $('#product_barcode').val(answer.parsedCodeItems[i].data.replace(/^0+/, ''));break;
                        case "02": $('#product_barcode').val(answer.parsedCodeItems[i].data.replace(/^0+/, ''));break;
                        case "10": $('#batch').val(answer.parsedCodeItems[i].data);break;
                        case "15": $('#expiry_date').val(answer.parsedCodeItems[i].data.getDate() +'.'+ (answer.parsedCodeItems[i].data.getMonth()+1) +'.'+ answer.parsedCodeItems[i].data.getFullYear());break;
                        case "37": $('#quantity').val(answer.parsedCodeItems[i].data.replace(/^0+/, ''));break;
                        default: break;    
                    }
                });
                $('#barcode').val('').focus();
                $('#barcode1').val('');
        } catch (e) {
            $('#barcode').val('');
        }
    }
    
    
    function calculate_wrappage(){
        $('.is_wrappage[value!=0]').each(function(){
            $(this).closest('tr').find('.quantity').val('0');
        });

        $('.is_wrappage[value=0]').each(function(){
            var stock = $(this).closest('tr').find('.quantity').attr('id').replace("quantity_", "");
            var quantity = $('#measure_'+stock).val()==1 ? $('#quantity_'+stock).val() : ($('#measure_'+stock).val()==0 ? $('#quantity_'+stock).val()*$('input[name="stocks['+stock+'][wrappage_package_id]"]').attr('data-quantity') : $('#quantity_'+stock).val()*$('input[name="stocks['+stock+'][wrappage_pallet_id]"]').attr('data-quantity'));
            $('.product[value="'+$(this).closest('tr').find('.wrappage_piece_id').val()+'"]').closest('tr').find('.quantity').val(parseFloat($('.product[value="'+$(this).closest('tr').find('.wrappage_piece_id').val()+'"]').closest('tr').find('.quantity').val())+ parseFloat(quantity)).change();
            $('.product[value="'+$(this).closest('tr').find('.wrappage_package_id').val()+'"]').closest('tr').find('.quantity').val(Math.floor(parseFloat($('.product[value="'+$(this).closest('tr').find('.wrappage_package_id').val()+'"]').closest('tr').find('.quantity').val())+ parseFloat(quantity/$('input[name="stocks['+stock+'][wrappage_package_id]"]').attr('data-quantity')))).change();
            $('.product[value="'+$(this).closest('tr').find('.wrappage_pallet_id').val()+'"]').closest('tr').find('.quantity').val(Math.floor(parseFloat($('.product[value="'+$(this).closest('tr').find('.wrappage_pallet_id').val()+'"]').closest('tr').find('.quantity').val())+ parseFloat(quantity/$('input[name="stocks['+stock+'][wrappage_pallet_id]"]').attr('data-quantity')))).change();

        });
    }
    
</script>
@endsection