@extends('layouts.app_mobile')

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

@section('style')
<style>
        
    .errorBox{
        max-height:38px;
        overflow:hidden;
    }
    
    body{
        line-height:1;
    }
    
    #fourth{
        background: #e7e7e7;
        width: 100%;
        z-index: 9999;
        position: fixed;
        top: 80px;
        border: 1px solid #000;
        margin-top: 5px;
        text-align: center;
        max-width: 90%;
        height: 250px;
        vertical-align: -moz-middle-with-baseline;
        padding-top: 60px;
        display:none;
    }
    
</style>
@endsection

@section('content')
<div id="page-wrapper" class="gray-bg dashbard-1">
@include('shared.messages')
    <div class="row">
        <div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{__('texte.mobile_views_arr.forklift_transfer_start.transfer')}}</h3>
                </div>
                <br/>
                <div id="first" hidden>
                    <div class="col-xs-15 col-sm-15 col-md-15">
                        <div class="form-group">   
                            <div style="overflow: scroll;width:100%;">
                                <table id="myTable" class="table table-bordered table-striped table-hover" style="margin-top:10px;">
                                    <thead>
                                        <th>{{__('texte.mobile_views_arr.forklift_transfer_start.place_from')}}</th>
                                        <th>{{__('texte.mobile_views_arr.forklift_transfer_start.quantity_short')}}</th>
                                        <th>{{__('texte.mobile_views_arr.forklift_transfer_start.product')}}</th>
                                        <th>{{__('texte.mobile_views_arr.forklift_transfer_start.place_to')}}</th>
                                    </thead>
                                    <tbody>
                                        @foreach($stock_transfer->rows as $index=>$forklift_transfer)
                                        <tr id="{{$forklift_transfer->id}}" data-finished="{{$forklift_transfer->finished}}" {{$forklift_transfer->finished==1 ? "style=background:#84d08094" : ""}}>
                                            <td>
                                                {{$forklift_transfer->place_from->address}}
                                                <input type="hidden" class="old_place_hidden" value="{{$forklift_transfer->place_from->address}}"/>
                                            </td>
                                            <td>
                                                {{$forklift_transfer->quantity}}
                                                <input type="hidden" class="stock_hidden" data-quantity="{{$forklift_transfer->quantity}}" data-pallet="{{$forklift_transfer->pallet}}"/>
                                            </td>
                                            <td>
                                                {{$forklift_transfer->product->name}}
                                                <input type="hidden" class="product_hidden" data-code="{{$forklift_transfer->product->code}}" data-piece_barcode="{{$forklift_transfer->product->piece_barcode}}" data-package_barcode="{{$forklift_transfer->product->package_barcode}}" value="{{$forklift_transfer->product->name}}"/>
                                            </td>
                                            <td>
                                                {{$forklift_transfer->place_to->address}}
                                                <input type="hidden" class="new_place_hidden" value="{{$forklift_transfer->place_to->address}}"/>
                                            </td>
                                        </tr>
                                        @endforeach                                            
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="second">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_transfer_start.storage')}}: </strong>
                            {{ $stock_transfer->storage_from->name }}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_transfer_start.place')}}: </strong>
                            <span class="old_barcode"></span>
                        </div>
                    </div>
                                        
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_transfer_start.pallet')}}: </strong>
                            <span class="pallet"></span>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_transfer_start.quantity')}}: </strong>
                            <span class="quantity"></span>                            
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_transfer_start.product')}}: </strong>
                            <span class="product_name"></span>
                        </div>
                    </div>                   

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_transfer_start.product_barcode')}}: </strong>
                            <span class="product_barcode"></span>
                        </div>
                    </div>
                    
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_transfer_start.new_storage')}}: </strong>
                            {{ $stock_transfer->storage_to->name }}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_transfer_start.new_place')}}: </strong>
                            <span class="new_barcode"></span>                            
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">  
                        <form method="POST" action="{{ route('forklift_transfer.complete', $stock_transfer->id) }}" id="complete_forklift_transfer" role="form" class="form-horizontal">
                            {{ csrf_field() }}
                            <input type="hidden" name="stock_transfer_id" id="stock_transfer_id" value="{{$stock_transfer->id}}"/>
                            <input type="hidden" name="transfer_id" id="transfer_id" value=""/>

                            <div class="form-group">
                                <div class="col-xs-8 col-sm-8 col-md-8 flex">                                    
                                    <input type="text" style="width:90%" data-barcode="" class="form-control place_barcode" id="place_barcode" name="place_barcode" value=""  placeholder="{{__('texte.mobile_views_arr.forklift_transfer_start.place_barcode')}}" style="width:100%" required/>
                                    <span id="correct_place" style="color:#74C274;" hidden> <i class="glyphicon glyphicon-ok-sign"></i> </span>
                                    <span id="wrong_place" style="color:#D34A46;" hidden><i class="glyphicon glyphicon-ban-circle"></i></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-8 col-sm-8 col-md-8 flex">
                                    <input type="text" style="width:90%" data-pallet_barcode="" class="form-control pallet_barcode" id="pallet_barcode" value=""  placeholder="{{__('texte.mobile_views_arr.forklift_transfer_start.pallet_barcode')}}" required disabled/>
                                    <span id="correct_pallet_barcode" style="color: #74C274" hidden><i class="glyphicon glyphicon-ok-sign"></i></span>
                                    <span id="wrong_pallet_barcode" style="color: #D34A46" hidden><i class="glyphicon glyphicon-ban-circle"></i></span>
                                </div>
                            </div>                                

                            <div class="form-group">
                                <div class="col-xs-8 col-sm-8 col-md-8 flex">
                                    <input type="text" style="width:90%" data-id="" data-producer_code="" data-producer_second_code="" data-piece_barcode="" data-piece_second_barcode="" data-package_barcode="" data-package_second_barcode="" class="form-control product_barcode" id="product_barcode" value=""  placeholder="{{__('texte.mobile_views_arr.forklift_transfer_start.barcode')}}" required disabled/>
                                    <span id="correct_barcode" style="color: #74C274" hidden><i class="glyphicon glyphicon-ok-sign"></i></span>
                                    <span id="wrong_barcode" style="color: #D34A46" hidden><i class="glyphicon glyphicon-ban-circle"></i></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-8 col-sm-8 col-md-8 flex">                                    
                                    <input type="text" style="width:90%" data-id="" data-barcode="" class="form-control new_place_barcode" id="new_place_barcode" name="new_place_barcode" value=""  placeholder="{{__('texte.mobile_views_arr.forklift_transfer_start.new_place_barcode')}}" style="width:100%" required disabled/>
                                    <span id="correct_new_place" style="color:#74C274;" hidden> <i class="glyphicon glyphicon-ok-sign"></i> </span>
                                    <span id="wrong_new_place" style="color:#D34A46;" hidden><i class="glyphicon glyphicon-ban-circle"></i></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-8 col-sm-8 col-md-8">    
                                    <button type="button" id="done" class="btn btn-success done">{{__('texte.mobile_views_arr.forklift_transfer_start.done')}}</button>
                                    @if(config('settings.has_barcode_scanner'))
                                    <button type="button" class="btn btn-info" id="scan_barcode" onclick="scanBarcode()">Scan</button>
                                    @endif
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div id="third">
                    <div class="form-group">
                        <div class="col-xs-15 col-sm-15 col-md-15" style="text-align:center;">    
                            <button type="button" id="exit" type="button" class="btn btn-danger" style='display:none;'>{{__('texte.mobile_views_arr.forklift_transfer_start.exit')}}</button>
                            <button type="button" id="rows" class="btn btn-primary">{{__('texte.mobile_views_arr.forklift_transfer_start.rows')}}</button>
                            <button type="button" id="transfer_details" class="btn btn-success"  style='display:none;'>{{__('texte.mobile_views_arr.forklift_transfer_start.transfer')}}</button>
                        </div>
                    </div>
                </div>
                <div id='fourth'>
                    <span>{{__('texte.mobile_views_arr.forklift_transfer_start.transfer_completing')}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/datatables.min.js') }}"></script> 
<script src="{{ asset('js/jquery.scannerdetection.js') }}"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/validation.js') }}"></script>
<script type="text/javascript">
    var previous_focus;
    
    if(is_barcode_scanner==0){
        $('#place_barcode').focus();
    }
                
    previous_focus = 'place_barcode';
    
    $(document).scannerDetection({
        timeBeforeScanTest: 200, // wait for the next character for upto 200ms
        startChar: [120], // Prefix character for the cabled scanner (OPL6845R)
        endChar: [13], // be sure the scan is complete if key 13 (enter) is detected
        avgTimeByChar: 40, // it's not a barcode if a character takes longer than 40ms
        onComplete: function(){ 
            var element = $(document.activeElement);
            element.change();
        } // main callback function	
    });
    
    var commenced = 0;
    
    $(document).ready(function(){
        
        $('#myTable > tbody > tr').on('change', function(){  
            if($(this).attr('data-finished')=='0'){
                $(this).attr('data-finished','1');
                $('#transfer_id').val($(this).attr('id'));
                $('span.old_barcode').text($(this).find('.old_place_hidden').val());
                $('#place_barcode').attr('data-barcode',$(this).find('.old_place_hidden').val()).val('').attr('disabled',false); 
                $('span.pallet').text($(this).find('.stock_hidden').attr('data-pallet'));
                
                if($(this).find('.stock_hidden').attr('data-pallet')!=null && $(this).find('.stock_hidden').attr('data-pallet')!=''){
                    $('#pallet_barcode').attr('data-pallet_barcode',$(this).find('.stock_hidden').attr('data-pallet')).val('').attr('disabled',true);
                    $('#product_barcode').closest('.form-group').hide();
                    $('#pallet_barcode').closest('.form-group').show();
                }
                else{
                    $('#product_barcode')
                        .attr('data-code',$(this).find('.product_hidden').attr('data-code'))
                        .attr('data-piece_barcode',$(this).find('.product_hidden').attr('data-piece_barcode'))
                        .attr('data-package_barcode',$(this).find('.product_hidden').attr('data-package_barcode')).val('').attr('disabled',true);
                    $('#pallet_barcode').closest('.form-group').hide();
                    $('#product_barcode').closest('.form-group').show();
                }
                
                $('#wrong_place').hide();
                $('#correct_place').hide();
                $('#wrong_barcode').hide();
                $('#correct_barcode').hide();
                $('#wrong_pallet_barcode').hide();
                $('#correct_pallet_barcode').hide();
                $('#wrong_new_place').hide();
                $('#correct_new_place').hide();
                
                $('span.quantity').text($(this).find('.stock_hidden').attr('data-quantity') + ' бр.');
                $('span.product_name').text($(this).find('.product_hidden').val());
                $('span.product_barcode').text($(this).find('.product_hidden').attr('data-piece_barcode') ?? ($(this).find('.product_hidden').attr('data-package_barcode') ?? ($(this).find('.product_hidden').attr('data-code'))));
                
                $('span.new_barcode').text($(this).find('.new_place_hidden').val());
                $('#new_place_barcode').attr('data-barcode',$(this).find('.new_place_hidden').val()).val('').attr('disabled',true);
                
                $('#done').attr('disabled',true);
                $('#exit').hide();
                $('#transfer_details').hide();
            }
        });        
        
        if($('#myTable > tbody > tr[data-finished="0"]').length>0){
            if($('#myTable > tbody > tr[data-finished="1"]').length>0){
                commenced=1;
            }            
            $('#myTable > tbody > tr[data-finished="0"]').first().change();            
        }
        else{
            $('#complete_forklift_transfer').submit();
            $('#fourth').show();
            $('#done').hide();
        } 
        
        if(is_barcode_scanner==0){
            $('#place_barcode').focus();
        }
        else{
            previous_focus = 'place_barcode';
        }
        
        $(".place_barcode").on('change',function() {
            if($(this).val()!=='' && $(this).val()===$(this).attr("data-barcode")){
                if($('#product_barcode:visible').length){
                    $('#product_barcode').attr('disabled',false);
                    $('.product_barcode').focus();
                    
                    if(is_barcode_scanner==0){
                        $('#product_barcode').focus();
                    }
                    else{
                        previous_focus = 'product_barcode';
                    }
                }
                else{
                    $('#pallet_barcode').attr('disabled',false);
                    
                    if(is_barcode_scanner==0){
                        $('#pallet_barcode').focus();
                    }
                    else{
                        previous_focus = 'pallet_barcode';
                    }
                }
                $(this).attr('disabled',true);
                $('#wrong_place').hide();
                $('#correct_place').show();                
            }
            else{
                $('#wrong_place').show();
                $(this).val('');
                setTimeout(function(){
                    if(is_barcode_scanner==0){
                        $('#place_barcode').focus();
                    }
                    else{
                        previous_focus = 'place_barcode';
                    }
                });
            }                
        });
        
        $(".product_barcode").on('change',function() {
            if($(this).val()!=='' && ($(this).val()===$(this).attr("data-code") || $(this).val()===$(this).attr("data-piece_barcode") || $(this).val()===$(this).attr("data-package_barcode"))){
                $('#new_place_barcode').attr('disabled',false);
                $(this).attr('disabled',true);
                $('#wrong_barcode').hide();
                $('#correct_barcode').show();
                
                if(is_barcode_scanner==0){
                    $('#new_place_barcode').focus();
                }
                else{
                    previous_focus = 'new_place_barcode';
                }
            }
            else{
                $('#wrong_barcode').show();
                $(this).val('');
                setTimeout(function(){
                    if(is_barcode_scanner==0){
                        $('#product_barcode').focus();
                    }
                    else{
                        previous_focus = 'product_barcode';
                    }
                });
            }                
        });
        
        $(".pallet_barcode").on('change',function() {
            if($(this).val()!=='' && ($(this).val()===$(this).attr("data-pallet_barcode"))){
                $('#new_place_barcode').attr('disabled',false);
                $(this).attr('disabled',true);
                $('#wrong_pallet_barcode').hide();
                $('#correct_pallet_barcode').show();
                
                if(is_barcode_scanner==0){
                    $('#new_place_barcode').focus();
                }
                else{
                    previous_focus = 'new_place_barcode';
                }
            }
            else{
                $('#wrong_pallet_barcode').show();
                $(this).val('');
                setTimeout(function(){
                    if(is_barcode_scanner==0){
                        $('#pallet_barcode').focus();
                    }
                    else{
                        previous_focus = 'pallet_barcode';
                    }
                });
            }                
        });
        
        $(".new_place_barcode").on('change',function() {
            if($(this).val()!=='' && $(this).val()===$(this).attr("data-barcode")){
                $(this).attr('disabled',true);
                $('#wrong_new_place').hide();
                $('#correct_new_place').show();
                $('#done').attr('disabled',false);
            }
            else{
                $('#wrong_new_place').show();
                $(this).val('');
                setTimeout(function(){
                    if(is_barcode_scanner==0){
                        $('#new_place_barcode').focus();
                    }
                    else{
                        previous_focus = 'new_place_barcode';
                    }
                });
            }                
        });     
        
        $('.new_place_barcode').keypress(function (e) {
            var key = e.which;
            if(key == 13)  // the enter key code
            {
                if($(this).val()!=='' && $(this).val()===$(this).attr("data-barcode")){
                     $('#done').click();
                }           
                return false;  
            }
        }); 
        
        $('.done').on('click', function(){
            var id= $('#transfer_id').val();
            commenced=1;
            
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "/update_forklift_transfer",
                type:"POST",
                async:false,
                data:
                {
                 'id': id
                },
                success: function(response){
                    if(response.warning){
                        alert(response.warning);
                    }
                    else{
                        $('#'+id).css('background-color','#84d08094');
                        if($('#myTable > tbody > tr[data-finished="0"]').length>0){
                            $('#myTable > tbody > tr[data-finished="0"]').first().change();
                        }
                        else{
                            $('#complete_forklift_transfer').submit();
                            $('#fourth').show();
                            $('#done').hide();  
                            $('#exit').hide();
                        }  
                    }
                }
            });                    
        });
    
        $('#rows').on('click', function(){
            $('#first').show();
            $('#second').hide();
            $('#rows').hide();
            $('#exit').show();
            $('#transfer_details').show();
        });
        
        $('#transfer_details').on('click', function(){            
            $('#first').hide();
            $('#second').show();            
            $('#rows').show();
            $('#exit').hide();
            $('#transfer_details').hide();
        });
        
        $('#exit').on('click',function(e){ 
            if(commenced===0){
                var id = $('#stock_transfer_id').val();
                $.ajax({
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: '/release_forklift_transfer',
                            type: 'POST',
                    data: { 'id' : id},
                    success: function(response){
                                window.location.href = '/forklift/index_transfers';
                            }
                });
            }
            else{
                window.location.href = '/forklift/index_transfers';
            }
        });
        
        
        setTimeout(function() {
            $('#exit').click();
        }, 600000);

        
    });
    
    $( "input" ).on('focus',function() {
        previous_focus = $(this).attr('id');
    });
    
    function getBarcodeValue(result) {
        $('#'+previous_focus).val(result).change();
    };  
    
</script>
@endsection