@extends('layouts.app_mobile')

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

@section('content')
<div class="container">
@include('shared.messages')

	<div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
		<div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="pull-right"></div>
                    </div>
                    <div class="panel-body">
                        <form method="POST" action="{{route('docs.collected')}}" id="collect_docs" role="form" class="form-horizontal">
                            {{ csrf_field() }}
                            <input type="hidden" id="order" name="order" value="{{$order_id}}"/>
                            
                            <div class="form-group" style="width:100% !important;">
                                <label for="document_number" class="control-label col-xs-11 col-sm-11 col-md-11">Номер на документ</label>
                                <div class="input-group col-xs-11 col-sm-11 col-md-11" style="margin-left:20px;">
                                    <input type="text" class="form-control" id="document_number" name="document_number" placeholder="Номер на документ" required/>
                                    <span id="correct_document" style="color:#74C274" hidden></span>
                                    <span id="wrong_document" style="color:#D34A46" hidden></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group col-xs-8 col-sm-8 col-md-8" style="margin:10px 40%;">                                    
                                    <button type="submit" id="done" class="btn btn-success btn-sm" disabled>Готово</button>
                                </div>
                            </div>
                        </form>
                    </div>
		</div>
            </div>
	</div>

</div>

<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/validation.js') }}"></script>
<script src="{{ asset('js/jquery.scannerdetection.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 document_id = $('#document_number').val().replace('280','').replace(/^0+/, '').slice(0,-1);
            check_scanned_document(document_id);
        } // main callback function	
    });
    
    $('#document_number').on('change', function(){
        if($(this).val()!=''){
            check_scanned_document($(this).val());
        }
    });
    
    function check_scanned_document(document_id){
        var order_id = $('#order').val();
        $.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/check_scanned_document',
                        type: 'POST',
                data: { 'id' : document_id,
                        'order_id' : order_id},
                    
                success: function(response){
                            if(response.warning){
                                $('#document_number').val('');
                                $('#done').attr('disabled',true);
                                $('#wrong_document').text(response.warning).show();
                                $('#correct_document').hide();
                            }
                            else{
                                $('#done').attr('disabled',false);
                                $('#correct_document').text(response.success).show();
                                $('#wrong_document').hide();
                            }
                         }
        });
    }
</script>  
@endsection