@extends('layouts.app_mobile')

@section('link')
    <link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet">
    <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{
        font-size:10px;
        max-height:38px;
        overflow:hidden;
    }
    
    body{
        line-height:1;
    }
    
</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_movement_start.movement')}}</h3>
                </div>
                <div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_movement_start.storage')}}: </strong>
                            {{ $forklift_movement->stock->storage->name }}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_movement_start.place')}}: </strong>
                            {{ $forklift_movement->stock->place->barcode }}
                        </div>
                    </div>
                                        
                    @if(!empty($forklift_movement->stock->pallet))
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>{{__('texte.mobile_views_arr.forklift_movement_start.pallet')}}: </strong>
                                {{ $forklift_movement->stock->pallet }}
                            </div>
                        </div>
                    @else
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>{{__('texte.mobile_views_arr.forklift_movement_start.quantity')}}: </strong>
                                {{$forklift_movement->stock->product->package_count!=null && $forklift_movement->stock->product->package_count!=0 ? (floor($forklift_movement->stock->quantity/$forklift_movement->stock->product->package_count).'('.$forklift_movement->stock->product->package->name.')'.($forklift_movement->stock->quantity%$forklift_movement->stock->product->package_count!=0 ? ($forklift_movement->stock->quantity-floor($forklift_movement->stock->quantity/$forklift_movement->stock->product->package_count)*$forklift_movement->stock->product->package_count.' '.__('texte.mobile_views_arr.forklift_movement_start.count')): '')): $forklift_movement->stock->quantity.__('texte.mobile_views_arr.forklift_movement_start.count')}}
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>{{__('texte.mobile_views_arr.forklift_movement_start.product')}}: </strong>
                                <span style="font-size:10px;">{{ $forklift_movement->stock->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_movement_start.product_barcode')}}: </strong>
                                <span class="product_barcode">{{ $forklift_movement->stock->product->piece_barcode ?? ($forklift_movement->stock->product->piece_second_barcode ?? ( $forklift_movement->stock->product->package_barcode ?? ( $forklift_movement->stock->product->package_second_barcode ?? ($forklift_movement->stock->product->producer_code ?? $forklift_movement->stock->product->producer_second_code)))) }}</span>
                            </div>
                        </div>
                    @endif
                    
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_movement_start.new_storage')}}: </strong>
                            {{ $forklift_movement->new_storage->name }}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_movement_start.new_place')}}: </strong>
                            {{ $forklift_movement->new_place->barcode }}
                        </div>
                    </div>

                    <div class="col-xs-15 col-sm-15 col-md-15">
                        <form method="POST" action="{{ route('forklift_movement.update', $forklift_movement->id) }}" id="form-update-stock" role="form" class="form-horizontal">
                            {{ csrf_field() }}
                            <input type='hidden' id='new_place' name='new_place' data-id='{{ $forklift_movement->id }}' value=''/>
                            
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="errorBox">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="place" class="control-label col-xs-1 col-sm-1 col-md-1"></label>
                                <div class="input-group col-xs-8 col-sm-8 col-md-8">                                    
                                    <input type="text" style="width:90%" data-id="{{$forklift_movement->id}}" data-barcode="{{$forklift_movement->stock->place->barcode}}" class="form-control place_barcode" id="place_barcode" name="place_barcode" value=""  placeholder="{{__('texte.mobile_views_arr.forklift_movement_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>

                            @if(!empty($forklift_movement->stock->pallet))
                                <div class="form-group">
                                    <label for="pallet_barcode" class="control-label col-xs-1 col-sm-1 col-md-1"></label>
                                    <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                        <input type="text" style="width:90%" data-pallet_barcode="{{$forklift_movement->stock->pallet}}" class="form-control pallet_barcode" id="pallet_barcode" value=""  placeholder="{{__('texte.mobile_views_arr.forklift_movement_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>                                
                            @else
                                <div class="form-group">
                                    <label for="product_barcode" class="control-label col-xs-1 col-sm-1 col-md-1"></label>
                                    <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                        <input type="text" style="width:90%" data-id="{{$forklift_movement->stock->product->id}}" data-producer_code="{{$forklift_movement->stock->product->producer_code}}" data-producer_second_code="{{$forklift_movement->stock->product->producer_second_code}}" data-piece_barcode="{{$forklift_movement->stock->product->piece_barcode}}" data-piece_second_barcode="{{$forklift_movement->stock->product->piece_second_barcode}}" data-package_barcode="{{$forklift_movement->stock->product->package_barcode}}" data-package_second_barcode="{{$forklift_movement->stock->product->package_second_barcode}}" class="form-control product_barcode" id="product_barcode" value=""  placeholder="{{__('texte.mobile_views_arr.forklift_movement_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>
                            @endif
                            
                            <div class="form-group">
                                <label for="new_place" class="control-label col-xs-1 col-sm-1 col-md-1"></label>
                                <div class="input-group col-xs-8 col-sm-8 col-md-8">                                    
                                    <input type="text" style="width:90%" data-id="{{$forklift_movement->id}}" data-barcode="{{$forklift_movement->new_place->barcode}}" class="form-control new_place_barcode" id="new_place_barcode" name="new_place_barcode" value=""  placeholder="{{__('texte.mobile_views_arr.forklift_movement_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-12 col-xs-offset-1 col-sm-12 col-sm-offset-1 col-md-12 col-md-offset-1">     
                                    <button id="back" type="button" class="btn btn-primary back-btn">{{__('texte.mobile_views_arr.forklift_movement_start.back')}}</button>
                                    <button type="submit" class="btn btn-success">{{__('texte.mobile_views_arr.forklift_movement_start.done')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/chosen.js') }}"></script>
<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">
    
    $(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	
    });
    
    $(document).ready(function(){
        var es = new EventSource("{{route('orders.show_new_movements')}}");
        es.addEventListener("message", function(e) {
            location.reload();
        }, false);
        $('.modal').on('shown.bs.modal', function() {
            $(this).find('.place_barcode').focus();
        });

        $(".place_barcode").focus();
                
        $(".place_barcode").on('change',function() {
            if($(this).val()!='' && $(this).val()==$(this).data("barcode")){
                if($('#product_barcode').length){
                    $('#product_barcode').attr('disabled',false);
                    $('.quantity').show();
                    $('.product_barcode').focus();
                }
                else{
                    $('#pallet_barcode').attr('disabled',false);
                    $('.pallet_barcode').focus();
                }
                $(this).attr('disabled',true);
                $('#wrong_place').hide();
                $('#correct_place').show();                
            }
            else{
                $('#wrong_place').show();
                $(this).val('');
                setTimeout(function(){
                      $(".place_barcode").focus();
                });
            }                
        });
        
        $(".product_barcode").on('change',function() {
            if($(this).val()!='' && ($(this).val()==$(this).data("producer_code") || $(this).val()==$(this).data("producer_second_code") || $(this).val()==$(this).data("piece_barcode") || $(this).val()==$(this).data("piece_second_barcode") || $(this).val()==$(this).data("package_barcode") || $(this).val()==$(this).data("package_second_barcode"))){
                $('#new_place_barcode').attr('disabled',false);
                $(this).attr('disabled',true);
                $('#wrong_barcode').hide();
                $('#correct_barcode').show();
                $('.new_place_barcode').focus();
            }
            else{
                $('#wrong_barcode').show();
                $(this).val('');
                setTimeout(function(){
                      $(".product_barcode").focus();
                });
            }                
        });
        
        $(".pallet_barcode").on('change',function() {
            if($(this).val()!='' && ($(this).val()==$(this).data("pallet_barcode"))){
                $('#new_place_barcode').attr('disabled',false);
                $(this).attr('disabled',true);
                $('#wrong_pallet_barcode').hide();
                $('#correct_pallet_barcode').show();
                $('.new_place_barcode').focus();
            }
            else{
                $('#wrong_pallet_barcode').show();
                $(this).val('');
                setTimeout(function(){
                      $(".pallet_barcode").focus();
                });
            }                
        });
        
        $(".new_place_barcode").on('change',function() {
            if($(this).val()!='' && $(this).val()==$(this).data("barcode")){
                $(this).attr('disabled',true);
                $('#wrong_new_place').hide();
                $('#correct_new_place').show();
            }
            else{
                $('#wrong_new_place').show();
                $(this).val('');
                setTimeout(function(){
                      $(".new_place_barcode").focus();
                });
            }                
        });
        
        table = $('.dataTables-example').DataTable({
            pageLength: 100,
            responsive: true,
            "order": [[ 6, "desc" ]],
            "oLanguage": {
                "sSearch": "",
                "sLengthMenu": "_MENU_  <span style='vertical-align:-moz-middle-with-baseline;margin-left:5px;'>Резултата на страница</span>",  
                "sInfo": "Показване на записи от _START_ до _END_ от общо _TOTAL_ записа",
                "sZeroRecords": "Не са намерени записи по зададените параметри",
                "sInfoEmpty": "Не са намерени записи по зададените параметри",
                "sInfoFiltered" : "- филтрирани от _MAX_ записа",
                "sLoadingRecords" : "Резултатите се зареждат, моля изчакайте...",
                "oPaginate": {
                                        "sNext": "Следваща страница",
                                        "sPrevious": "Предишна страница",
                                  },

            },
            "columnDefs": [
                            { "orderable": false, "targets": 5 }
                          ],
            "initComplete":function(settings, json) {
                $('select[name="DataTables_Table_0_length"]').chosen();
                $('.input-sm').attr('placeholder', 'Търсене');
                $('div.dataTables_filter input').css({ marginLeft : "0px"});
                this_table = $('.dataTables-example').dataTable();
            },
            "dom" : "fl<'#add_package'>tip",

        });
    
        $('#back').on('click',function(e){            
            var id = {!!$forklift_movement->id!!};
            $.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/update_forklift_movement',
                        type: 'POST',
                data: { 'id' : id},
                success: function(response){
                            window.location.href = '/mobile_views/home';
                        }
            });
        });
        
        
        setTimeout(function() {
            $('#back').click();
        }, 600000);

        
    });
</script>
@endsection