@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;
    }
    
    .flex{
        display:flex;
    }
    
    .error{
        margin-left:0px !important;
    }
</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_unlock_start.unlock_stocks')}}</h3>
                </div>
                <div>
                    <div class="col-xs-12 col-sm-12 col-md-12" style="margin-top:10px;">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_unlock_start.place_barcode')}}: </strong>
                            {{ $forklift_unlock->stock->place->barcode }}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_unlock_start.pallet_barcode')}}: </strong>
                            {{ $forklift_unlock->stock->pallet}}
                        </div>
                    </div>
                    
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.mobile_views_arr.forklift_unlock_start.quantity_ordered')}}: </strong>
                            {{ $forklift_unlock->quantity_ordered ?? 0}} {{__('texte.mobile_views_arr.forklift_unlock_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_unlock_start.product')}}: </strong>
                            <span>{{ $forklift_unlock->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_unlock_start.place_to_supply')}}: </strong>
                            <span>{{ $address_to_supply!==0 ? $address_to_supply : __('texte.mobile_views_arr.forklift_unlock_start.choice')}} </span>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <form method="POST" action="{{ route('forklift_unlock.update', $forklift_unlock->id) }}" id="form-update-stock" role="form" class="form-horizontal">
                            {{ csrf_field() }}
                            <input type='hidden' id='new_place' name='new_place' data-id='{{ $forklift_unlock->id }}' value=''/>
                            
                            <div class="col-xs-12 col-sm-12 col-md-12" style="padding-left:0px;">
                                <div class="errorBox">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <div class="col-sm-12 flex">                                    
                                    <input type="text" data-id="{{$forklift_unlock->id}}" data-barcode="{{$forklift_unlock->stock->place->barcode}}" class="form-control place_barcode barcode_input" id="place_barcode" name="place_barcode" value=""  placeholder="{{__('texte.mobile_views_arr.forklift_unlock_start.place_barcode')}}" 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-sm-12 flex">
                                    <input type="text" data-id="{{$forklift_unlock->id}}" data-pallet="{{$forklift_unlock->stock->pallet}}" class="form-control pallet barcode_input" id="pallet" name="pallet_barcode" value=""  placeholder="{{__('texte.mobile_views_arr.forklift_unlock_start.pallet_barcode')}}" disabled required/>
                                    <span id="correct_pallet" style="color:#74C274;" hidden><i class="glyphicon glyphicon-ok-sign"></i></span>
                                    <span id="wrong_pallet" style="color:#D34A46;" hidden><i class="glyphicon glyphicon-ban-circle"></i></span>
                                </div>
                            </div>
                            
                            <div class="form-group quantity" hidden>
                                <label for="quantity" class="control-label col-xs-4 col-sm-4 col-md-4">{{__('texte.mobile_views_arr.forklift_unlock_start.quantity')}}</label>
                                <div class="input-group col-xs-2 col-sm-2 col-md-2" style="float:left;margin-right:10px">
                                     <input type="text" data-id="{{$forklift_unlock->id}}" data-quantity="{{ $forklift_unlock->measure==1 ? ($forklift_unlock->stock->quantity/$forklift_unlock->stock->product->package_count) : $forklift_unlock->stock->quantity}}" class="form-control" id="quantity" name="quantity" value="{{ $forklift_unlock->measure==1 ? ($forklift_unlock->stock->quantity/$forklift_unlock->stock->product->package_count) : $forklift_unlock->stock->quantity}}"  placeholder="{{__('texte.mobile_views_arr.forklift_unlock_start.quantity')}}" min="{{$forklift_unlock->quantity_ordered < ($forklift_unlock->measure==1 ? ($forklift_unlock->stock->quantity/$forklift_unlock->stock->product->package_count) : $forklift_unlock->stock->quantity) ? ($forklift_unlock->quantity_ordered ?? 1) : ($forklift_unlock->measure==1 ? ($forklift_unlock->stock->quantity/$forklift_unlock->stock->product->package_count) : $forklift_unlock->stock->quantity) }}" max="{{ $forklift_unlock->measure==1 ? ($forklift_unlock->stock->quantity/$forklift_unlock->stock->product->package_count) : $forklift_unlock->stock->quantity}}" required/>
                                </div>
                                <span>{{$forklift_unlock->measure==1 ? $forklift_unlock->stock->product->package->name : __('texte.mobile_views_arr.forklift_unlock_start.count')}}</span>
                            </div>
                            
                            <div class="form-group">
                                <div class="col-sm-12 flex">
                                    <input class="form-control new_address barcode_input" id="new_place_address" type="text" data-id="{{$forklift_unlock->id}}" placeholder="{{__('texte.mobile_views_arr.forklift_unlock_start.new_place_barcode')}}" value="" name="new_place_id" disabled required/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">    
                                    <button type="button" id="back" class="btn btn-primary back-btn">{{__('texte.mobile_views_arr.forklift_unlock_start.back')}}</button>
                                    @if(config('settings.has_barcode_scanner'))
                                    <button type="button" class="btn btn-info" id="scan_barcode" onclick="scanBarcode()">Scan</button>
                                    @endif
                                    <button type="submit" class="btn btn-success">{{__('texte.mobile_views_arr.forklift_unlock_start.done')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </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 = '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	
    });
    
    $(document).ready(function(){

        if(is_barcode_scanner==0){
            $("#place_barcode").focus();
        }
        else{
            previous_focus = 'place_barcode';
        }
                
        $("#place_barcode").on('change',function() {
            if($(this).val()!='' && $(this).val()==$(this).data("barcode")){
                $('#pallet').attr('disabled',false);
                $(this).attr('disabled',true);
                $('#wrong_place').hide();
                $('#correct_place').show();
                
                if(is_barcode_scanner==0){
                    $('#pallet').focus();
                }
                else{
                    previous_focus = 'pallet';
                }
            }
            else{
                $('#wrong_place').show();
                $(this).val('');
                setTimeout(function(){
                    if(is_barcode_scanner==0){
                        $("#place_barcode").focus();
                    }
                    else{
                        previous_focus = 'place_barcode';
                    }
                });
            }
                
        });
        
        $("#pallet").on('change',function() {
            if($(this).val()!='' && $(this).val()==$(this).data("pallet")){
                $('#new_place_address').attr('disabled',false);
                $(this).attr('disabled',true);
                $('#wrong_pallet').hide();
                $('#correct_pallet').show();
                $('.quantity').show();
                
                if(is_barcode_scanner==0){
                    $('#new_place_address').focus();
                }
                else{
                    previous_focus = 'new_place_address';
                }
            }
            else{
                $('#wrong_pallet').show();
                $(this).val('');
                setTimeout(function(){
                    if(is_barcode_scanner==0){
                        $("#pallet").focus();
                    }
                    else{
                        
                    }
                });
            }
                
        });
        
        $("#quantity").on('change',function() {
            setTimeout(function(){
                if(is_barcode_scanner==0){
                    $('#new_address').focus();
                }
                else{
                    previous_focus = 'new_address'
                }
            });                
        });
        
        $("#new_place_address").on('change',function(){
            if($(this).val()!=''){
                $('#new_place').val($(this).val());
            }
        });
        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) {
                $('.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_unlock->id!!};
            $.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/update_forklift_unlock',
                        type: 'POST',
                data: { 'id' : id},
                success: function(response){
                            window.location.href = '/mobile_views/home';
                        }
            });
        });
    });
    
    $( "input" ).on('focus',function() {
        previous_focus = $(this).attr('id');
    });
    
    function getBarcodeValue(result) {
        $('#'+previous_focus).val(result).change();
    };    
</script>
@endsection